feat(ui): demo a vetoed close in the nested dialog story

Makes the panel -> prompt -> prompt case reachable: typing into "add email
address" and then trying to close it stacks a confirmation instead. Every
close request routes through the controlled `onOpenChange`, so declining to
commit there covers Escape, the corner X and Cancel at once.

Hand-rolled, and meant to be replaced by the AlertDialog and close
confirmation work rather than kept.

Author: maxyinger

packages/swingset/src/stories/dialog.component.mdx

@@ -365,6 +365,11 @@ prompt.
 This is the nested case, not a stack: the prompt paints its own scrim over the panel, and the panel
 neither dims nor recedes.
 
+Type into **Add email address** and then try to close it — Escape, the corner X, or Cancel — and a
+confirmation stacks on top instead, making the panel → prompt → prompt case reachable. The veto is
+a controlled `open` whose `onOpenChange` declines to commit; every close request routes through it,
+so one check covers all of them.
+
 Stack a prompt on a prompt and the relationship changes — the shape a close confirmation
 takes:
 

packages/swingset/src/stories/dialog.component.stories.tsx

@@ -107,49 +107,105 @@ const sectionHeader = {
   justifyContent: 'space-between',
 } as const;
 
-/** A `prompt` dialog opened from inside the `panel` — the shape the account profile uses. */
+/**
+ * A `prompt` dialog opened from inside the `panel` — the shape the account profile uses.
+ *
+ * With `confirmDiscard`, closing it while the field holds anything opens a confirmation stacked on
+ * top rather than closing: `panel -> prompt -> prompt`, and the veto is nothing more than a
+ * controlled `open` whose `onOpenChange` declines to commit. Hand-rolled here on purpose — it is
+ * what the `AlertDialog` and close-confirmation work is meant to replace.
+ */
 function AddValueDialog({
   trigger,
   title,
   description,
   placeholder,
   confirmLabel = 'Continue',
   confirmColor,
+  confirmDiscard = false,
 }: {
   trigger: (props: RenderProps) => React.ReactElement;
   title: string;
   description: string;
   placeholder: string;
   confirmLabel?: string;
   confirmColor?: 'negative';
+  confirmDiscard?: boolean;
 }) {
+  const [open, setOpen] = React.useState(false);
+  const [discardOpen, setDiscardOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+
+  const dismiss = () => {
+    setValue('');
+    setOpen(false);
+  };
+
   return (
     <Dialog
       trigger={trigger}
       closedBy='closerequest'
+      open={open}
+      onOpenChange={next => {
+        // The veto. Every close request lands here — Escape, the corner X, `Dialog.Close` — so
+        // declining to commit covers all of them at once. A footer button wired to a bare
+        // `setOpen(false)` would go around it, which is the argument for `Dialog.Close`.
+        if (!next && confirmDiscard && value.trim() !== '') {
+          setDiscardOpen(true);
+          return;
+        }
+        if (!next) {
+          setValue('');
+        }
+        setOpen(next);
+      }}
     >
-      {({ close }) => (
-        <>
-          <Dialog.CloseButton />
-          <Dialog.Title render={<Heading size='sm' />}>{title}</Dialog.Title>
-          <Dialog.Description render={<Text />}>{description}</Dialog.Description>
-          <Input placeholder={placeholder} />
+      <Dialog.CloseButton />
+      <Dialog.Title render={<Heading size='sm' />}>{title}</Dialog.Title>
+      <Dialog.Description render={<Text />}>{description}</Dialog.Description>
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={event => setValue(event.target.value)}
+      />
+      <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
+        <Dialog.Close render={<Button variant='outline' />}>Cancel</Dialog.Close>
+        <Button
+          color={confirmColor}
+          onClick={dismiss}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+      {confirmDiscard ? (
+        <Dialog
+          open={discardOpen}
+          onOpenChange={setDiscardOpen}
+          closedBy='closerequest'
+        >
+          <Dialog.Title render={<Heading size='sm' />}>Discard changes?</Dialog.Title>
+          <Dialog.Description render={<Text />}>
+            You have not finished adding this address. It will not be saved.
+          </Dialog.Description>
           <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
             <Button
               variant='outline'
-              onClick={close}
+              onClick={() => setDiscardOpen(false)}
             >
-              Cancel
+              Keep editing
             </Button>
             <Button
-              color={confirmColor}
-              onClick={close}
+              color='negative'
+              onClick={() => {
+                setDiscardOpen(false);
+                dismiss();
+              }}
             >
-              {confirmLabel}
+              Discard
             </Button>
           </div>
-        </>
-      )}
+        </Dialog>
+      ) : null}
     </Dialog>
   );
 }
@@ -173,6 +229,7 @@ export function Nested() {
             title='Add email address'
             description="We'll send a verification code to this address."
             placeholder='you@example.com'
+            confirmDiscard
           />
         </div>
         <Item.Group>