feat(AlertDialog): touch motion on the theme's timing

.changeset/alertdialog-touch-motion.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] AlertDialog: under a finger the alert appears and leaves the way an iOS alert does. It scales down into place from 1.2 while it and the dimming fade in, on the theme's entrance timing. When it closes it fades out with the dimming, on the theme's exit timing, and a close or a reopen midway turns back from where it is. While it appears a touch does nothing, and keys and assistive technology still act. While it leaves nothing reaches it, but a toast its action raised stays live and its words are read. With reduced motion it only cross-fades. On a phone (a compact window under a coarse pointer) the width with no `width` prop goes from 400 px to 320 px in every theme; a `width` you pass still wins. With a mouse nothing changes.
+
+@vjeux

apps/sandbox/src/app/(raw)/pages/alert-dialog-cases/caseIds.ts

@@ -12,6 +12,7 @@
 export const ALERT_DIALOG_CASES = [
   'alert-over-a-toast',
   'dialog-closed-after-save',
+  'interruptions',
 ] as const;
 
 export type AlertDialogCaseId = (typeof ALERT_DIALOG_CASES)[number];
@@ -23,6 +24,8 @@ export const ALERT_DIALOG_CASE_LABELS: Readonly<
     'An alert over a toast: Delete raises a toast as the alert closes',
   'dialog-closed-after-save':
     'A dialog closed after a save: Save raises a toast, and the dialog closes when the save is done',
+  interruptions:
+    'Interruptions: the program closes the alert while it enters, or reopens it while it leaves',
 };
 
 export function parseAlertDialogCase(value: string | null): AlertDialogCaseId {

apps/sandbox/src/app/(raw)/pages/alert-dialog-cases/cases.tsx

@@ -5,8 +5,8 @@
 /**
  * @file cases.tsx
  * @input A case id from caseIds.ts
- * @output The case: an alert over a toast, or a dialog closed after a save
- *   that raised a toast
+ * @output The case: an alert over a toast, a dialog closed after a save
+ *   that raised a toast, or an alert that the program interrupts
  * @position The AlertDialog cases page's content. Each case is its Storybook
  *   story, on a sandbox page.
  */
@@ -110,10 +110,64 @@ function DialogClosedAfterSave() {
   );
 }
 
-export function AlertDialogCase({id}: {id: AlertDialogCaseId}) {
-  return id === 'alert-over-a-toast' ? (
-    <AlertOverAToast />
-  ) : (
-    <DialogClosedAfterSave />
+/**
+ * How long after the open the program closes it, ms: inside every scale's
+ * entrance.
+ */
+const CLOSE_AFTER_MS = 150;
+
+/**
+ * How long after the close the program reopens it, ms: inside every scale's
+ * exit (100 ms or more).
+ */
+const REOPEN_AFTER_MS = 50;
+
+function Interruptions() {
+  const [isOpen, setIsOpen] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Synchronizes the case's timer with the page: leaving the case clears it.
+  useEffect(
+    () => () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    [],
+  );
+  const setOpenSoon = (next: boolean, afterMs: number) => {
+    if (timerRef.current != null) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => setIsOpen(next), afterMs);
+  };
+  return (
+    <Stack gap={2}>
+      <Button
+        label="Open, then close while it enters"
+        onClick={() => {
+          setIsOpen(true);
+          setOpenSoon(false, CLOSE_AFTER_MS);
+        }}
+      />
+      <Button label="Delete item" onClick={() => setIsOpen(true)} />
+      <AlertDialog
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title="Delete item?"
+        description="Reopen closes this alert, then opens it again while it fades out."
+        actionLabel="Reopen"
+        onAction={() => {
+          setIsOpen(false);
+          setOpenSoon(true, REOPEN_AFTER_MS);
+        }}
+      />
+    </Stack>
   );
 }
+
+export function AlertDialogCase({id}: {id: AlertDialogCaseId}) {
+  if (id === 'alert-over-a-toast') {
+    return <AlertOverAToast />;
+  }
+  return id === 'interruptions' ? <Interruptions /> : <DialogClosedAfterSave />;
+}

apps/storybook/stories/AlertDialog.stories.tsx

@@ -1,12 +1,16 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 import {
   AlertDialog,
   useImperativeAlertDialog,
 } from '@astryxdesign/core/AlertDialog';
 import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {useToast} from '@astryxdesign/core/Toast';
+import type {ToastDismissFn} from '@astryxdesign/core/Toast';
 
 const meta: Meta<typeof AlertDialog> = {
   title: 'Core/AlertDialog',
@@ -226,3 +230,52 @@ export const Inline: Story = {
     onAction: () => {},
   },
 };
+
+/**
+ * An action that raises a toast. Under a finger the alert fades out above the
+ * toast. The toast stays live meanwhile: its Undo button takes a tap during
+ * the fade, and assistive technology reads it.
+ */
+export const AlertOverAToast: Story = {
+  render: function AlertOverAToastStory() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [undoCount, setUndoCount] = useState(0);
+    const toast = useToast();
+    // The story's one toast. A new delete replaces it, and leaving the story
+    // dismisses it.
+    const dismissRef = useRef<ToastDismissFn | null>(null);
+    useEffect(() => () => dismissRef.current?.(), []);
+    return (
+      <Stack gap={2}>
+        <Button
+          label="Delete item"
+          variant="destructive"
+          onClick={() => setIsOpen(true)}
+        />
+        <Text>{`Undo taps: ${undoCount}`}</Text>
+        <AlertDialog
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Delete item?"
+          description="This action cannot be undone. The item and all its data will be permanently removed."
+          actionLabel="Delete"
+          onAction={() => {
+            dismissRef.current = toast({
+              body: 'Item deleted.',
+              uniqueID: 'alert-over-a-toast',
+              isAutoHide: false,
+              endContent: (
+                <Button
+                  label="Undo"
+                  variant="secondary"
+                  onClick={() => setUndoCount(count => count + 1)}
+                />
+              ),
+            });
+            setIsOpen(false);
+          }}
+        />
+      </Stack>
+    );
+  },
+};

docs/architecture/layer-runtime.md

@@ -669,7 +669,9 @@ layers use Layer rendering without joining Escape/platform dismissal.
   FR9). A `focus: 'blur'` hold, the default, keeps the shield and makes the
   content inert at once, as a leaving AlertDialog (`component:AlertDialog`
   FR7) and a closing BottomSheetSwitcher step (`component:BottomSheet` FR9)
-  are for their dismissal. The component
+  are for their dismissal. A blur hold leaves a nested layer, its path, and a
+  child live region live, such as a toast viewport that a leaving alert
+  hosts. The component
   still decides where focus returns. A component that holds input uses this hold rather
   than building its own. It is separate from INV14's presentation hold, which
   keeps a layer's chosen presentation.
@@ -867,8 +869,14 @@ it on the surface inside the layer and run no layout while it plays.
   on.
 - `Layer/presentationHold.ts` owns the presentation hold: a layer's chosen
   presentation, held from the open until its close settles (INV14).
-- `Layer/inputHold.ts` owns the input hold, and `Layer/holdEntranceInput.ts`
-  its use by layers that enter through CSS (INV16).
+- `Layer/inputHold.ts` owns the input hold that a touch presentation places
+  while it enters or leaves (`spec:AST-094` FR35), and
+  `Layer/holdEntranceInput.ts` its use by layers that enter through CSS
+  (INV16). A blur dismissal hold leaves a nested layer, its path, and a
+  child live region live. It finds a nested layer with `hasLayerRootWithin`, a reader of
+  the layer-root owner (`architecture:public-component-api` INV23). The
+  owner's other readers test an element or its ancestors, and the hold asks
+  whether a subtree holds a layer root.
 - `Layer/layerStack.ts`, `Layer/useLayerDismissal.ts`, and
   `Layer/LayerDepthContext.tsx` own current registration, presence, ordering, and
   Escape/platform routing. The stack, the modal outlet registry, the gesture