@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/dialog/dialog-close.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-close.mjs","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, MouseEvent, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogCloseState {\n  /** The `action` is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\n/** Details passed to `Dialog.Close`'s `action`. */\nexport interface DialogCloseDetails extends ActionDetails {\n  /** The `value` the dialog closes with (`dialog.returnValue`); `\"\"` without `value`. */\n  readonly returnValue: string;\n}\n\nexport interface DialogCloseProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"value\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Runs inside this part's own transition, then closes the dialog with `close(value)`. A\n   * rejection reaches the nearest Error Boundary above the Close part and leaves the dialog open.\n   * Without `action` the button is a native `command=\"request-close\"` invoker (JS-free).\n   */\n  action?: Action<[details: DialogCloseDetails]>;\n  /** Becomes `dialog.returnValue` (and `details.returnValue` of the close notification). */\n  value?: string;\n  disabled?: boolean;\n  className?: StateValue<string | undefined, DialogCloseState>;\n  style?: StateValue<CSSProperties | undefined, DialogCloseState>;\n  children?: StateValue<ReactNode, DialogCloseState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, DialogCloseState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * A close button: `<button type=\"button\" commandfor command=\"request-close\">`. Without `action`\n * the browser closes the dialog (a close request: `cancel`, then `close`), with `value` as the\n * `returnValue`. With `action` the click is cancelled, the action runs in this part's own\n * transition (`data-pending` on the button) and the dialog closes with `close(value)` once it\n * resolves; a rejection leaves the dialog open.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,\n * `command`, `value`, `onClick` (with `action`), `data-pending`, `data-disabled`.\n */\nexport function DialogClose({\n  action,\n  value,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogCloseProps) {\n  const ctx = useDialogContext(\"Dialog.Close\");\n  // The open-generation guard: a close from a previous opening must not close a new one.\n  const { pending, run } = useActionTrigger(ctx.openGeneration);\n  const { ids, dialogRef, recordCloseIntent } = ctx;\n  const hasAction = action !== undefined;\n\n  const state: DialogCloseState = { pending, disabled };\n\n  const devRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev && !hasAction && element.tagName !== \"BUTTON\") {\n        console.error(\n          `Dialog.Close: rendered a <${element.tagName.toLowerCase()}> without \\`action\\`. Only a ` +\n            '<button> runs `command=\"request-close\"`; this element will not close the dialog.',\n        );\n      }\n      // A cleanup, so the merged ref never calls back with `null`.\n      return () => {};\n    },\n    [hasAction],\n  );\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    if (action === undefined) return;\n    // Cancelling the click cancels the command.\n    event.preventDefault();\n    if (disabled) return;\n    const native = event.nativeEvent;\n    const returnValue = value ?? \"\";\n    const details = createActionDetails(native, { returnValue });\n    run(\n      () => action(details),\n      () => {\n        // Repeated clicks re-run the action; the first `close()` wins (design 3.4).\n        const dialog = dialogRef.current;\n        if (dialog === null || !dialog.open) return;\n        recordCloseIntent({ reason: \"activate\", event: native });\n        dialog.close(returnValue);\n      },\n    );\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    // Owned: a render element must not re-enable a disabled Close.\n    disabled,\n    commandfor: ids.dialog,\n    command: \"request-close\",\n    value,\n    ...(hasAction && { onClick }),\n    \"data-pending\": dataAttr(pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, DialogCloseState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref: devRef,\n  });\n}\n\nDialogClose.displayName = \"DialogClose\";\n"],"mappings":";;;;;;;;AA0CA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;AAYvC,SAAgB,YAAY,EAC1B,QACA,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAE3C,MAAM,EAAE,SAAS,QAAQ,iBAAiB,IAAI,cAAc;CAC5D,MAAM,EAAE,KAAK,WAAW,sBAAsB;CAC9C,MAAM,YAAY,WAAW,KAAA;CAE7B,MAAM,QAA0B;EAAE;EAAS;CAAS;CAEpD,MAAM,SAAS,aACZ,YAAyB;EACxB,IAAI,SAAS,CAAC,aAAa,QAAQ,YAAY,UAC7C,QAAQ,MACN,6BAA6B,QAAQ,QAAQ,YAAY,EAAE,gHAE7D;EAGF,aAAa,CAAC;CAChB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,WAAW,UAAmC;EAClD,IAAI,WAAW,KAAA,GAAW;EAE1B,MAAM,eAAe;EACrB,IAAI,UAAU;EACd,MAAM,SAAS,MAAM;EACrB,MAAM,cAAc,SAAS;EAC7B,MAAM,UAAU,oBAAoB,QAAQ,EAAE,YAAY,CAAC;EAC3D,UACQ,OAAO,OAAO,SACd;GAEJ,MAAM,SAAS,UAAU;GACzB,IAAI,WAAW,QAAQ,CAAC,OAAO,MAAM;GACrC,kBAAkB;IAAE,QAAQ;IAAY,OAAO;GAAO,CAAC;GACvD,OAAO,MAAM,WAAW;EAC1B,CACF;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EAEvD;EACA,YAAY,IAAI;EAChB,SAAS;EACT;EACA,GAAI,aAAa,EAAE,QAAQ;EAC3B,gBAAgB,SAAS,OAAO;EAChC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA,KAAK;CACP,CAAC;AACH;AAEA,YAAY,cAAc"}
+{"version":3,"file":"dialog-close.mjs","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, MouseEvent, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogCloseState {\n  /** The `action` is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\n/** Details passed to `Dialog.Close`'s `action`. */\nexport interface DialogCloseDetails extends ActionDetails {\n  /** The `value` the dialog closes with (`dialog.returnValue`); `\"\"` without `value`. */\n  readonly returnValue: string;\n}\n\nexport interface DialogCloseProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"value\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Runs inside this part's own transition (`data-pending` on the button), then closes the\n   * dialog with `value` as `returnValue`: in library mode through the Root\n   * (`openChangeAction(false)` awaited, view transition if set), in JS-free mode with\n   * `close(value)`. A rejection reaches the nearest Error Boundary above the Close part and\n   * leaves the dialog open. If the dialog was dismissed and opened again while the action ran,\n   * the close is dropped: it belonged to the earlier open. Without `action` in JS-free mode the\n   * button is a native `command=\"request-close\"` invoker.\n   */\n  action?: Action<[details: DialogCloseDetails]>;\n  /** Becomes `dialog.returnValue` (and `details.returnValue` of `openChangeAction(false)`). */\n  value?: string;\n  /** Native `disabled`; owned, so a `render` element cannot re-enable the button. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, DialogCloseState>;\n  style?: StateValue<CSSProperties | undefined, DialogCloseState>;\n  children?: StateValue<ReactNode, DialogCloseState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, DialogCloseState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * A close button: `<button type=\"button\" commandfor command=\"request-close\">`. In JS-free mode\n * without `action` the browser closes the dialog (a close request: `cancel`, then `close`), with\n * `value` as the `returnValue`. In library mode the click is always cancelled and the close goes\n * through the Root (`openChangeAction(false)` awaited, then `close(value)` in the commit, inside\n * the view transition if the Popup's `transition` is set). With `action` the action runs first in\n * this part's own transition (`data-pending` on the button); a rejection leaves the dialog open.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,\n * `command`, `value`, `onClick` (library mode, or with `action`), `data-pending`,\n * `data-disabled`.\n */\nexport function DialogClose({\n  action,\n  value,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogCloseProps) {\n  const ctx = useDialogContext(\"Dialog.Close\");\n  // The open-generation guard: a close from a previous opening must not close a new one.\n  const { pending, run } = useActionTrigger(ctx.openGeneration);\n  const { ids, dialogRef, recordCloseIntent } = ctx;\n  const isLibrary = ctx.mode === \"library\";\n  const hasAction = action !== undefined;\n  const installClick = isLibrary || hasAction;\n\n  const state: DialogCloseState = { pending, disabled };\n\n  const devRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev && !installClick && element.tagName !== \"BUTTON\") {\n        console.error(\n          `Dialog.Close: rendered a <${element.tagName.toLowerCase()}> in JS-free mode without ` +\n            '`action`. Only a <button> runs `command=\"request-close\"`; this element will not ' +\n            \"close the dialog.\",\n        );\n      }\n      // A cleanup, so the merged ref never calls back with `null`.\n      return () => {};\n    },\n    [installClick],\n  );\n\n  const close = (event: Event, returnValue: string): void => {\n    if (isLibrary) {\n      // A library-owned close (design 2.3): awaited, then `close(returnValue)` in the commit. A\n      // no-op when `false` is already intended (a repeated click, or a dismissal meanwhile).\n      ctx.requestClose(event, \"activate\", returnValue);\n      return;\n    }\n    // JS-free mode with `action`: a browser-owned close; there is no Root state to go through.\n    const dialog = dialogRef.current;\n    if (dialog === null || !dialog.open) return;\n    recordCloseIntent({ reason: \"activate\", event });\n    dialog.close(returnValue);\n  };\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    // Cancelling the click cancels the command.\n    event.preventDefault();\n    if (disabled) return;\n    const native = event.nativeEvent;\n    const returnValue = value ?? \"\";\n    if (action === undefined) {\n      close(native, returnValue);\n      return;\n    }\n    const details = createActionDetails(native, { returnValue });\n    // Repeated clicks re-run the action; the first close wins (design 3.4). A close whose open\n    // was superseded by a newer one (dismissed and re-opened meanwhile) is dropped by the hook.\n    run(\n      () => action(details),\n      () => close(native, returnValue),\n    );\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    // Owned: a render element must not re-enable a disabled Close.\n    disabled,\n    commandfor: ids.dialog,\n    command: \"request-close\",\n    value,\n    ...(installClick && { onClick }),\n    \"data-pending\": dataAttr(pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, DialogCloseState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref: devRef,\n  });\n}\n\nDialogClose.displayName = \"DialogClose\";\n"],"mappings":";;;;;;;;;AA+CA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;;;AAcvC,SAAgB,YAAY,EAC1B,QACA,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAE3C,MAAM,EAAE,SAAS,QAAQ,iBAAiB,IAAI,cAAc;CAC5D,MAAM,EAAE,KAAK,WAAW,sBAAsB;CAC9C,MAAM,YAAY,IAAI,SAAS;CAE/B,MAAM,eAAe,aADH,WAAW,KAAA;CAG7B,MAAM,QAA0B;EAAE;EAAS;CAAS;CAEpD,MAAM,SAAS,aACZ,YAAyB;EACxB,IAAI,SAAS,CAAC,gBAAgB,QAAQ,YAAY,UAChD,QAAQ,MACN,6BAA6B,QAAQ,QAAQ,YAAY,EAAE,gIAG7D;EAGF,aAAa,CAAC;CAChB,GACA,CAAC,YAAY,CACf;CAEA,MAAM,SAAS,OAAc,gBAA8B;EACzD,IAAI,WAAW;GAGb,IAAI,aAAa,OAAO,YAAY,WAAW;GAC/C;EACF;EAEA,MAAM,SAAS,UAAU;EACzB,IAAI,WAAW,QAAQ,CAAC,OAAO,MAAM;EACrC,kBAAkB;GAAE,QAAQ;GAAY;EAAM,CAAC;EAC/C,OAAO,MAAM,WAAW;CAC1B;CAEA,MAAM,WAAW,UAAmC;EAElD,MAAM,eAAe;EACrB,IAAI,UAAU;EACd,MAAM,SAAS,MAAM;EACrB,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW,KAAA,GAAW;GACxB,MAAM,QAAQ,WAAW;GACzB;EACF;EACA,MAAM,UAAU,oBAAoB,QAAQ,EAAE,YAAY,CAAC;EAG3D,UACQ,OAAO,OAAO,SACd,MAAM,QAAQ,WAAW,CACjC;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EAEvD;EACA,YAAY,IAAI;EAChB,SAAS;EACT;EACA,GAAI,gBAAgB,EAAE,QAAQ;EAC9B,gBAAgB,SAAS,OAAO;EAChC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA,KAAK;CACP,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/dialog/dialog-context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-context.mjs","names":[],"sources":["../../src/dialog/dialog-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { ChangeReason } from \"../internal/types.js\";\n\n/**\n * \"static\": JS-free mode, the browser owns open and close through Invoker Commands. \"library\":\n * open is library-owned (a transition keyed on committed state), close is browser-owned and\n * notified (design section 2).\n */\nexport type DialogMode = \"static\" | \"library\";\n\n/**\n * What caused the next `close` event, recorded just before the close happens (design 2.3). The\n * `close` event carries no source; without an intent the close is a `\"dismiss\"`.\n */\nexport interface DialogCloseIntent {\n  readonly reason: ChangeReason;\n  readonly event: Event | undefined;\n}\n\nexport interface DialogContextValue {\n  readonly mode: DialogMode;\n  /** `useId`-based ids: the `<dialog>`, its Title and its Description. */\n  readonly ids: { readonly dialog: string; readonly title: string; readonly description: string };\n  readonly modal: boolean;\n  /** Committed open state (library mode); `false` in static mode. */\n  readonly committed: boolean;\n  /** Optimistic open state (library mode); `false` in static mode. */\n  readonly optimistic: boolean;\n  /** The Root's transition is pending (library mode). */\n  readonly pending: boolean;\n  /**\n   * Open the dialog through the Root's transition (library mode): a Trigger click, a foreign\n   * `show-modal` command, or mount reconciliation. A no-op when the user already intends `true`.\n   */\n  readonly requestOpen: (event: Event | undefined, reason: ChangeReason) => void;\n  /**\n   * The dialog closed natively: dispatch the `false` notification unless the user (or the\n   * library's own echo) already intends `false`.\n   */\n  readonly notifyClosed: (event: Event, reason: ChangeReason, returnValue: string) => void;\n  /** From `useControllableAction`: the latest in-flight intent, or `null`. */\n  readonly latestInFlight: () => { readonly next: boolean } | null;\n  /** The registered Trigger element, for the focus-return fallback (design 6.2). */\n  readonly triggerRef: RefObject<HTMLElement | null>;\n  /** The `<dialog>`, set by the Popup's ref; how Close and Form reach `close(value)`. */\n  readonly dialogRef: RefObject<HTMLDialogElement | null>;\n  /** Record what causes the next close. Cleared after a task if the dialog did not close. */\n  readonly recordCloseIntent: (intent: DialogCloseIntent | undefined) => void;\n  /** Read and clear the recorded intent (the Popup's `close` listener). */\n  readonly takeCloseIntent: () => DialogCloseIntent | undefined;\n  /**\n   * Counts the opens of this dialog. A Close action reads it when it starts and skips its close\n   * if a newer open started meanwhile (the dialog was dismissed and opened again).\n   */\n  readonly openGeneration: () => number;\n  /** Advance `openGeneration` (an open dispatch, the `<dialog>`'s native `beforetoggle` to open). */\n  readonly nextOpenGeneration: () => void;\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>(null);\n\nexport function useDialogContext(part: string): DialogContextValue {\n  const context = use(DialogContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Dialog.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AA6DA,MAAa,gBAAgB,cAAyC,IAAI;AAE1E,SAAgB,iBAAiB,MAAkC;CACjE,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,wCAAwC;CAElE,OAAO;AACT"}
+{"version":3,"file":"dialog-context.mjs","names":[],"sources":["../../src/dialog/dialog-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { ChangeReason } from \"../internal/types.js\";\n\n/**\n * \"static\": JS-free mode, the browser owns open and close through Invoker Commands. \"library\":\n * opening and the closes a part asks for are library-owned (transitions keyed on committed\n * state); dismissals are browser-owned and notified (design section 2).\n */\nexport type DialogMode = \"static\" | \"library\";\n\n/**\n * What caused the next `close` event, recorded just before the close happens (design 2.3). The\n * `close` event carries no source; without an intent the close is a `\"dismiss\"`.\n */\nexport interface DialogCloseIntent {\n  readonly reason: ChangeReason;\n  readonly event: Event | undefined;\n}\n\nexport interface DialogContextValue {\n  readonly mode: DialogMode;\n  /** `useId`-based ids: the `<dialog>`, its Title and its Description. */\n  readonly ids: { readonly dialog: string; readonly title: string; readonly description: string };\n  readonly modal: boolean;\n  /** Committed open state (library mode); `false` in static mode. */\n  readonly committed: boolean;\n  /** Optimistic open state (library mode); `false` in static mode. */\n  readonly optimistic: boolean;\n  /** The Root's transition is pending (library mode). */\n  readonly pending: boolean;\n  /**\n   * Open the dialog through the Root's transition (library mode): a Trigger click, a foreign\n   * `show-modal` command, or mount reconciliation. A no-op when the user already intends `true`.\n   */\n  readonly requestOpen: (event: Event | undefined, reason: ChangeReason) => void;\n  /**\n   * The dialog closed natively (a dismissal, not the library's own `close()`): dispatch the\n   * `false` notification unless the user already intends `false`.\n   */\n  readonly notifyClosed: (event: Event, reason: ChangeReason, returnValue: string) => void;\n  /**\n   * What the user already intends: the latest in-flight dispatch's `next`, else the optimistic\n   * value of the last commit. Safe to call from handlers and effects (layout effects included,\n   * also in the commit that changed it), and after an `await`. Not during render.\n   */\n  readonly intended: () => boolean;\n  /**\n   * A library-owned close (library mode, design 2.3): a Close part, a `method=\"dialog\"` submit,\n   * a Form's settle close, a foreign close command. Records `returnValue` for the apply effect's\n   * `close()` and dispatches `false` (`openChangeAction(false)` awaited). A no-op when `false` is\n   * already intended.\n   */\n  readonly requestClose: (\n    event: Event | undefined,\n    reason: ChangeReason,\n    returnValue: string,\n  ) => void;\n  /**\n   * Read and clear the `returnValue` of the pending part-initiated close, for the apply effect's\n   * `close()`; `\"\"` when there is none (a controlled close).\n   */\n  readonly takeCloseReturnValue: () => string;\n  /** From `useControllableAction`: the latest in-flight intent, or `null`. */\n  readonly latestInFlight: () => { readonly next: boolean } | null;\n  /** The registered Trigger element, for the focus-return fallback (design 6.2). */\n  readonly triggerRef: RefObject<HTMLElement | null>;\n  /** The `<dialog>`, set by the Popup's ref; how Close and Form reach `close(value)`. */\n  readonly dialogRef: RefObject<HTMLDialogElement | null>;\n  /** Record what causes the next close. Cleared after a task if the dialog did not close. */\n  readonly recordCloseIntent: (intent: DialogCloseIntent | undefined) => void;\n  /** Read and clear the recorded intent (the Popup's `close` listener). */\n  readonly takeCloseIntent: () => DialogCloseIntent | undefined;\n  /**\n   * Counts the opens of this dialog. A Close action reads it when it starts and skips its close\n   * if a newer open started meanwhile (the dialog was dismissed and opened again).\n   */\n  readonly openGeneration: () => number;\n  /** Advance `openGeneration` (an open dispatch, the `<dialog>`'s native `beforetoggle` to open). */\n  readonly nextOpenGeneration: () => void;\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>(null);\n\nexport function useDialogContext(part: string): DialogContextValue {\n  const context = use(DialogContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Dialog.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAmFA,MAAa,gBAAgB,cAAyC,IAAI;AAE1E,SAAgB,iBAAiB,MAAkC;CACjE,MAAM,UAAU,IAAI,aAAa;CACjC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,wCAAwC;CAElE,OAAO;AACT"}

package/dist/dialog/dialog-form.d.mts

@@ -9,19 +9,29 @@ export interface DialogFormProps extends Omit<ComponentPropsWithRef<"form">, "me
   /**
    * React form action (`(formData) => unknown`, may be a Server Function). Passed to the form
    * unwrapped so React's progressive enhancement is kept; the dialog closes with the submitter's
-   * `value` as `returnValue` once the action's transition settles (see `closeOnSettle`). A
-   * rejection leaves the dialog open. Without `action` the form renders `method="dialog"`:
-   * submitting closes the dialog natively. A string `action` (a URL) is a plain navigating form.
+   * `value` as `returnValue` once the action's transition settles (see `closeOnSettle`): in
+   * library mode through the Root (`openChangeAction(false)` awaited, view transition if set),
+   * in JS-free mode with `close(value)`. A rejection leaves the dialog open. Without `action`
+   * the form renders `method="dialog"`: submitting closes the dialog, natively in JS-free mode
+   * and through the Root in library mode (a `preventDefault()` in your own `onSubmit` blocks
+   * both; `stopPropagation()` there leaves the close to the browser, notified as a dismissal).
+   * A string `action` (a URL) is a plain navigating form.
    */
   action?: string | ((formData: FormData) => unknown);
   /**
    * With a function `action`: close the dialog once the action's transition settles without
-   * throwing. Default `true`.
+   * throwing and, when this form is rendered as a `Form.Root`
+   * (`render={<Form.Root errors={state.errors} />}`), with no field error: a settle whose
+   * `errors` has a non-empty entry (hidden stale ones included, the `autoReset` rule) keeps
+   * the dialog open and the Form focuses the first errored field. Default `true`.
    *
-   * Any result that does not throw counts as success, including a `useActionState`-style result
-   * that reports validation errors: with the default the dialog closes and those errors are never
-   * seen. Throw to keep the dialog open, or set `closeOnSettle={false}` and close it yourself:
-   * a `Dialog.Close`, a submitter with `formMethod="dialog"`, or a controlled `open`.
+   * Without a `Form.Root` the library never sees a result, so any settle that does not throw
+   * counts, including a `useActionState` result that reports errors: render the form as a
+   * `Form.Root` to route them, throw to keep the dialog open, or set `closeOnSettle={false}`
+   * and close it yourself (a `Dialog.Close`, a submit button in a separate `method="dialog"`
+   * form, or a controlled `open`). A `formMethod="dialog"` submitter inside this form cannot
+   * close it: React prevents every submit of a form with a function `action` and runs the
+   * action again.
    *
    * The dialog is not closed either when it was closed (Escape, a Close part) while the action
    * ran, also if the user re-opened it meanwhile.
@@ -39,10 +49,13 @@ export interface DialogFormProps extends Omit<ComponentPropsWithRef<"form">, "me
 }
 /**
  * A form that completes the dialog. Without `action`: `<form method="dialog">`, so a submit
- * closes the dialog natively (JS-free) with the submitter's `value` as `returnValue`. With a
+ * closes the dialog with the submitter's `value` as `returnValue` (natively in JS-free mode;
+ * in library mode the Popup cancels the submission and closes through the Root). With a
  * function `action`: `<form action={action}>` (React overrides the method) and a status watcher
  * that closes the dialog once the action has settled, with the submitter's `value`, unless
- * `closeOnSettle` is `false` or the dialog was closed while the action ran.
+ * `closeOnSettle` is `false`, the dialog was closed while the action ran, or the form is rendered
+ * as a `Form.Root` and the result has a field error (`render={<Form.Root errors={...} />}`, the
+ * recommended composition for validation).
  *
  * `DialogFormState.pending` is this form's own status; it is not emitted as `data-pending` and
  * is not folded into any control's `pending` (conventions 2.7). Submit buttons read

package/dist/dialog/dialog-form.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-form.d.mts","names":[],"sources":["../../src/dialog/dialog-form.tsx"],"mappings":";;;iBAQiB;;WAEN;;iBAGM,wBAAwB,KACvC;;;;;;;;EAUA,oBAAoB,UAAU;;;;;;;;;;;;;EAa9B;;;;;EAKA,SAAS;EACT,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;;;;;;;;;;;wBAwCrC,aACd,QACA,eACA,QACA,WACA,OACA,UACA,WACG,QACF,kBAAe;yBATF"}
+{"version":3,"file":"dialog-form.d.mts","names":[],"sources":["../../src/dialog/dialog-form.tsx"],"mappings":";;;iBAWiB;;WAEN;;iBAGM,wBAAwB,KACvC;;;;;;;;;;;;EAcA,oBAAoB,UAAU;;;;;;;;;;;;;;;;;;;EAmB9B;;;;;EAKA,SAAS;EACT,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;;;;;;;;;;;;;;wBAmBrC,aACd,QACA,eACA,QACA,WACA,OACA,UACA,WACG,QACF,kBAAe;yBATF"}

package/dist/dialog/dialog-form.mjs

@@ -1,38 +1,23 @@
 "use client";
-import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { FormContext } from "../internal/field-context.mjs";
 import { useDialogContext } from "./dialog-context.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { FormStatusWatcher } from "../internal/form-status-watcher.mjs";
+import { hasAnyError } from "../internal/validity.mjs";
+import { use, useCallback, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useFormStatus } from "react-dom";
 //#region src/dialog/dialog-form.tsx
 /**
-* Observes React's form channel (design 8.1): `useFormStatus().pending` covers the action's
-* whole transition, including the Suspense wait of what it re-renders. On `true → false` the
-* submission succeeded (a rejection unmounts the form through the nearest Error Boundary, so the
-* edge is never seen).
-*/
-function FormStatusWatcher({ onPendingChange, onSettled }) {
-	const { pending } = useFormStatus();
-	const previous = useRef(false);
-	useEffect(() => {
-		const was = previous.current;
-		previous.current = pending;
-		if (was === pending) return;
-		onPendingChange(pending);
-		if (was && !pending) onSettled();
-	}, [
-		pending,
-		onPendingChange,
-		onSettled
-	]);
-	return null;
-}
-/**
 * A form that completes the dialog. Without `action`: `<form method="dialog">`, so a submit
-* closes the dialog natively (JS-free) with the submitter's `value` as `returnValue`. With a
+* closes the dialog with the submitter's `value` as `returnValue` (natively in JS-free mode;
+* in library mode the Popup cancels the submission and closes through the Root). With a
 * function `action`: `<form action={action}>` (React overrides the method) and a status watcher
 * that closes the dialog once the action has settled, with the submitter's `value`, unless
-* `closeOnSettle` is `false` or the dialog was closed while the action ran.
+* `closeOnSettle` is `false`, the dialog was closed while the action ran, or the form is rendered
+* as a `Form.Root` and the result has a field error (`render={<Form.Root errors={...} />}`, the
+* recommended composition for validation).
 *
 * `DialogFormState.pending` is this form's own status; it is not emitted as `data-pending` and
 * is not folded into any control's `pending` (conventions 2.7). Submit buttons read
@@ -41,7 +26,9 @@ function FormStatusWatcher({ onPendingChange, onSettled }) {
 * Owned keys (conventions 1.2): `method` (except with a string `action`), `action`.
 */
 function DialogForm({ action, closeOnSettle = true, method, className, style, children, render, ...rest }) {
-	const { dialogRef, recordCloseIntent } = useDialogContext("Dialog.Form");
+	const ctx = useDialogContext("Dialog.Form");
+	const { dialogRef, recordCloseIntent, requestClose } = ctx;
+	const isLibrary = ctx.mode === "library";
 	const [pending, setPending] = useState(false);
 	const submission = useRef(null);
 	const closedSinceSubmit = useRef(false);
@@ -67,21 +54,29 @@ function DialogForm({ action, closeOnSettle = true, method, className, style, ch
 			dialog?.removeEventListener("close", onClose);
 		};
 	}, []);
-	const onSettled = useCallback(() => {
+	const onSettled = useCallback((clean) => {
 		const dialog = dialogRef.current;
 		const submitted = submission.current;
 		submission.current = null;
 		if (!closeOnSettle || closedSinceSubmit.current) return;
+		if (!clean) return;
 		if (dialog === null || !dialog.open) return;
+		const returnValue = submitted?.returnValue ?? "";
+		if (isLibrary) {
+			requestClose(submitted?.event, "activate", returnValue);
+			return;
+		}
 		recordCloseIntent({
 			reason: "activate",
 			event: submitted?.event
 		});
-		dialog.close(submitted?.returnValue ?? "");
+		dialog.close(returnValue);
 	}, [
 		closeOnSettle,
 		dialogRef,
-		recordCloseIntent
+		isLibrary,
+		recordCloseIntent,
+		requestClose
 	]);
 	return useRender({
 		defaultElement: "form",
@@ -89,7 +84,9 @@ function DialogForm({ action, closeOnSettle = true, method, className, style, ch
 		state: { pending },
 		className,
 		style,
-		children: (s) => /* @__PURE__ */ jsxs(Fragment, { children: [resolveStateValue(children, s), watches && /* @__PURE__ */ jsx(FormStatusWatcher, {
+		children: (s) => /* @__PURE__ */ jsxs(Fragment, { children: [resolveStateValue(children, s), /* @__PURE__ */ jsx(DialogFormSettle, {
+			watches,
+			missingAction: action === void 0,
 			onPendingChange: setPending,
 			onSettled
 		})] }),
@@ -102,6 +99,28 @@ function DialogForm({ action, closeOnSettle = true, method, className, style, ch
 	});
 }
 DialogForm.displayName = "DialogForm";
+/**
+* Rendered among the form's children, so it reads the `FormContext` exactly when the form is a
+* `Form.Root` (either orientation of the `render` composition): the settle close then waits for
+* a result with no field error (`hasAnyError`, the `autoReset` predicate, hidden stale entries
+* included).
+*/
+function DialogFormSettle({ watches, missingAction, onPendingChange, onSettled }) {
+	const form = use(FormContext);
+	useDevWarning(form !== null && missingAction, "`Dialog.Form` rendered as a `Form.Root` needs a function `action`; without one the form navigates instead of closing the dialog. Render a plain `<Dialog.Form>` for a `method=\"dialog\"` form.");
+	const isForm = form !== null;
+	const errors = form?.errors;
+	const settled = useCallback(() => onSettled(!isForm || !hasAnyError(errors)), [
+		isForm,
+		errors,
+		onSettled
+	]);
+	if (!watches) return null;
+	return /* @__PURE__ */ jsx(FormStatusWatcher, {
+		onPendingChange,
+		onSettled: settled
+	});
+}
 //#endregion
 export { DialogForm };
 

package/dist/dialog/dialog-form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-form.mjs","names":[],"sources":["../../src/dialog/dialog-form.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { useFormStatus } from \"react-dom\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogFormState {\n  /** `useFormStatus().pending` of this form, exposed for `className` / `children` functions. */\n  readonly pending: boolean;\n}\n\nexport interface DialogFormProps extends Omit<\n  ComponentPropsWithRef<\"form\">,\n  \"method\" | \"action\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * React form action (`(formData) => unknown`, may be a Server Function). Passed to the form\n   * unwrapped so React's progressive enhancement is kept; the dialog closes with the submitter's\n   * `value` as `returnValue` once the action's transition settles (see `closeOnSettle`). A\n   * rejection leaves the dialog open. Without `action` the form renders `method=\"dialog\"`:\n   * submitting closes the dialog natively. A string `action` (a URL) is a plain navigating form.\n   */\n  action?: string | ((formData: FormData) => unknown);\n  /**\n   * With a function `action`: close the dialog once the action's transition settles without\n   * throwing. Default `true`.\n   *\n   * Any result that does not throw counts as success, including a `useActionState`-style result\n   * that reports validation errors: with the default the dialog closes and those errors are never\n   * seen. Throw to keep the dialog open, or set `closeOnSettle={false}` and close it yourself:\n   * a `Dialog.Close`, a submitter with `formMethod=\"dialog\"`, or a controlled `open`.\n   *\n   * The dialog is not closed either when it was closed (Escape, a Close part) while the action\n   * ran, also if the user re-opened it meanwhile.\n   */\n  closeOnSettle?: boolean;\n  /**\n   * Only with a string `action` (a navigating form, for example `\"post\"`). Owned otherwise:\n   * `\"dialog\"` without `action`, React's own with a function `action`.\n   */\n  method?: ComponentPropsWithRef<\"form\">[\"method\"];\n  className?: StateValue<string | undefined, DialogFormState>;\n  style?: StateValue<CSSProperties | undefined, DialogFormState>;\n  children?: StateValue<ReactNode, DialogFormState>;\n  render?: RenderProp<ComponentPropsWithRef<\"form\">, DialogFormState>;\n}\n\ninterface FormStatusWatcherProps {\n  readonly onPendingChange: (pending: boolean) => void;\n  readonly onSettled: () => void;\n}\n\n/**\n * Observes React's form channel (design 8.1): `useFormStatus().pending` covers the action's\n * whole transition, including the Suspense wait of what it re-renders. On `true → false` the\n * submission succeeded (a rejection unmounts the form through the nearest Error Boundary, so the\n * edge is never seen).\n */\nfunction FormStatusWatcher({ onPendingChange, onSettled }: FormStatusWatcherProps) {\n  const { pending } = useFormStatus();\n  const previous = useRef(false);\n  useEffect(() => {\n    const was = previous.current;\n    previous.current = pending;\n    if (was === pending) return;\n    onPendingChange(pending);\n    if (was && !pending) onSettled();\n  }, [pending, onPendingChange, onSettled]);\n  return null;\n}\n\n/**\n * A form that completes the dialog. Without `action`: `<form method=\"dialog\">`, so a submit\n * closes the dialog natively (JS-free) with the submitter's `value` as `returnValue`. With a\n * function `action`: `<form action={action}>` (React overrides the method) and a status watcher\n * that closes the dialog once the action has settled, with the submitter's `value`, unless\n * `closeOnSettle` is `false` or the dialog was closed while the action ran.\n *\n * `DialogFormState.pending` is this form's own status; it is not emitted as `data-pending` and\n * is not folded into any control's `pending` (conventions 2.7). Submit buttons read\n * `useFormStatus()` themselves.\n *\n * Owned keys (conventions 1.2): `method` (except with a string `action`), `action`.\n */\nexport function DialogForm({\n  action,\n  closeOnSettle = true,\n  method,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogFormProps) {\n  const ctx = useDialogContext(\"Dialog.Form\");\n  const { dialogRef, recordCloseIntent } = ctx;\n  const [pending, setPending] = useState(false);\n  const submission = useRef<{ event: Event; returnValue: string } | null>(null);\n  // The dialog closed after the last submit (Escape, a Close part): the settle must not close it\n  // again, also when the user re-opened it meanwhile (the review's walkthrough 11.8 variant).\n  const closedSinceSubmit = useRef(false);\n  const watches = typeof action === \"function\";\n\n  // The submitter's `value` comes from the native `submit` event (capture, before React's\n  // handler runs the action).\n  const libraryRef = useCallback((form: HTMLFormElement) => {\n    const onSubmit = (event: Event) => {\n      if (event.target !== form) return;\n      const submitter = (event as SubmitEvent).submitter as\n        | HTMLButtonElement\n        | HTMLInputElement\n        | null;\n      submission.current = { event, returnValue: submitter?.value ?? \"\" };\n      closedSinceSubmit.current = false;\n    };\n    const dialog = form.closest(\"dialog\");\n    const onClose = (event: Event) => {\n      if (event.target === dialog) closedSinceSubmit.current = true;\n    };\n    form.addEventListener(\"submit\", onSubmit, true);\n    dialog?.addEventListener(\"close\", onClose);\n    return () => {\n      form.removeEventListener(\"submit\", onSubmit, true);\n      dialog?.removeEventListener(\"close\", onClose);\n    };\n  }, []);\n\n  const onSettled = useCallback(() => {\n    const dialog = dialogRef.current;\n    const submitted = submission.current;\n    submission.current = null;\n    if (!closeOnSettle || closedSinceSubmit.current) return;\n    if (dialog === null || !dialog.open) return;\n    recordCloseIntent({ reason: \"activate\", event: submitted?.event });\n    dialog.close(submitted?.returnValue ?? \"\");\n  }, [closeOnSettle, dialogRef, recordCloseIntent]);\n\n  const state: DialogFormState = { pending };\n\n  return useRender<ComponentPropsWithRef<\"form\">, DialogFormState>({\n    defaultElement: \"form\",\n    render,\n    state,\n    className,\n    style,\n    children: (s) => (\n      <>\n        {resolveStateValue(children, s)}\n        {watches && <FormStatusWatcher onPendingChange={setPending} onSettled={onSettled} />}\n      </>\n    ),\n    props: rest,\n    libraryProps: {\n      method: action === undefined ? \"dialog\" : typeof action === \"string\" ? method : undefined,\n      // React's own type wants `void | Promise<void>`; the library's actions return `unknown`\n      // (conventions 2.2) and React ignores the result.\n      action: action as ComponentPropsWithRef<\"form\">[\"action\"],\n    },\n    ref: libraryRef,\n  });\n}\n\nDialogForm.displayName = \"DialogForm\";\n"],"mappings":";;;;;;;;;;;;;AA4DA,SAAS,kBAAkB,EAAE,iBAAiB,aAAqC;CACjF,MAAM,EAAE,YAAY,cAAc;CAClC,MAAM,WAAW,OAAO,KAAK;CAC7B,gBAAgB;EACd,MAAM,MAAM,SAAS;EACrB,SAAS,UAAU;EACnB,IAAI,QAAQ,SAAS;EACrB,gBAAgB,OAAO;EACvB,IAAI,OAAO,CAAC,SAAS,UAAU;CACjC,GAAG;EAAC;EAAS;EAAiB;CAAS,CAAC;CACxC,OAAO;AACT;;;;;;;;;;;;;;AAeA,SAAgB,WAAW,EACzB,QACA,gBAAgB,MAChB,QACA,WACA,OACA,UACA,QACA,GAAG,QACe;CAElB,MAAM,EAAE,WAAW,sBADP,iBAAiB,aACc;CAC3C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,aAAa,OAAqD,IAAI;CAG5E,MAAM,oBAAoB,OAAO,KAAK;CACtC,MAAM,UAAU,OAAO,WAAW;CAIlC,MAAM,aAAa,aAAa,SAA0B;EACxD,MAAM,YAAY,UAAiB;GACjC,IAAI,MAAM,WAAW,MAAM;GAC3B,MAAM,YAAa,MAAsB;GAIzC,WAAW,UAAU;IAAE;IAAO,aAAa,WAAW,SAAS;GAAG;GAClE,kBAAkB,UAAU;EAC9B;EACA,MAAM,SAAS,KAAK,QAAQ,QAAQ;EACpC,MAAM,WAAW,UAAiB;GAChC,IAAI,MAAM,WAAW,QAAQ,kBAAkB,UAAU;EAC3D;EACA,KAAK,iBAAiB,UAAU,UAAU,IAAI;EAC9C,QAAQ,iBAAiB,SAAS,OAAO;EACzC,aAAa;GACX,KAAK,oBAAoB,UAAU,UAAU,IAAI;GACjD,QAAQ,oBAAoB,SAAS,OAAO;EAC9C;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,kBAAkB;EAClC,MAAM,SAAS,UAAU;EACzB,MAAM,YAAY,WAAW;EAC7B,WAAW,UAAU;EACrB,IAAI,CAAC,iBAAiB,kBAAkB,SAAS;EACjD,IAAI,WAAW,QAAQ,CAAC,OAAO,MAAM;EACrC,kBAAkB;GAAE,QAAQ;GAAY,OAAO,WAAW;EAAM,CAAC;EACjE,OAAO,MAAM,WAAW,eAAe,EAAE;CAC3C,GAAG;EAAC;EAAe;EAAW;CAAiB,CAAC;CAIhD,OAAO,UAA0D;EAC/D,gBAAgB;EAChB;EACA,OAAA,EAL+B,QAK3B;EACJ;EACA;EACA,WAAW,MACT,qBAAA,UAAA,EAAA,UAAA,CACG,kBAAkB,UAAU,CAAC,GAC7B,WAAW,oBAAC,mBAAD;GAAmB,iBAAiB;GAAuB;EAAY,CAAA,CACnF,EAAA,CAAA;EAEJ,OAAO;EACP,cAAc;GACZ,QAAQ,WAAW,KAAA,IAAY,WAAW,OAAO,WAAW,WAAW,SAAS,KAAA;GAGxE;EACV;EACA,KAAK;CACP,CAAC;AACH;AAEA,WAAW,cAAc"}
+{"version":3,"file":"dialog-form.mjs","names":[],"sources":["../../src/dialog/dialog-form.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { FormContext } from \"../internal/field-context.js\";\nimport { FormStatusWatcher } from \"../internal/form-status-watcher.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport { hasAnyError } from \"../internal/validity.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogFormState {\n  /** `useFormStatus().pending` of this form, exposed for `className` / `children` functions. */\n  readonly pending: boolean;\n}\n\nexport interface DialogFormProps extends Omit<\n  ComponentPropsWithRef<\"form\">,\n  \"method\" | \"action\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * React form action (`(formData) => unknown`, may be a Server Function). Passed to the form\n   * unwrapped so React's progressive enhancement is kept; the dialog closes with the submitter's\n   * `value` as `returnValue` once the action's transition settles (see `closeOnSettle`): in\n   * library mode through the Root (`openChangeAction(false)` awaited, view transition if set),\n   * in JS-free mode with `close(value)`. A rejection leaves the dialog open. Without `action`\n   * the form renders `method=\"dialog\"`: submitting closes the dialog, natively in JS-free mode\n   * and through the Root in library mode (a `preventDefault()` in your own `onSubmit` blocks\n   * both; `stopPropagation()` there leaves the close to the browser, notified as a dismissal).\n   * A string `action` (a URL) is a plain navigating form.\n   */\n  action?: string | ((formData: FormData) => unknown);\n  /**\n   * With a function `action`: close the dialog once the action's transition settles without\n   * throwing and, when this form is rendered as a `Form.Root`\n   * (`render={<Form.Root errors={state.errors} />}`), with no field error: a settle whose\n   * `errors` has a non-empty entry (hidden stale ones included, the `autoReset` rule) keeps\n   * the dialog open and the Form focuses the first errored field. Default `true`.\n   *\n   * Without a `Form.Root` the library never sees a result, so any settle that does not throw\n   * counts, including a `useActionState` result that reports errors: render the form as a\n   * `Form.Root` to route them, throw to keep the dialog open, or set `closeOnSettle={false}`\n   * and close it yourself (a `Dialog.Close`, a submit button in a separate `method=\"dialog\"`\n   * form, or a controlled `open`). A `formMethod=\"dialog\"` submitter inside this form cannot\n   * close it: React prevents every submit of a form with a function `action` and runs the\n   * action again.\n   *\n   * The dialog is not closed either when it was closed (Escape, a Close part) while the action\n   * ran, also if the user re-opened it meanwhile.\n   */\n  closeOnSettle?: boolean;\n  /**\n   * Only with a string `action` (a navigating form, for example `\"post\"`). Owned otherwise:\n   * `\"dialog\"` without `action`, React's own with a function `action`.\n   */\n  method?: ComponentPropsWithRef<\"form\">[\"method\"];\n  className?: StateValue<string | undefined, DialogFormState>;\n  style?: StateValue<CSSProperties | undefined, DialogFormState>;\n  children?: StateValue<ReactNode, DialogFormState>;\n  render?: RenderProp<ComponentPropsWithRef<\"form\">, DialogFormState>;\n}\n\n/**\n * A form that completes the dialog. Without `action`: `<form method=\"dialog\">`, so a submit\n * closes the dialog with the submitter's `value` as `returnValue` (natively in JS-free mode;\n * in library mode the Popup cancels the submission and closes through the Root). With a\n * function `action`: `<form action={action}>` (React overrides the method) and a status watcher\n * that closes the dialog once the action has settled, with the submitter's `value`, unless\n * `closeOnSettle` is `false`, the dialog was closed while the action ran, or the form is rendered\n * as a `Form.Root` and the result has a field error (`render={<Form.Root errors={...} />}`, the\n * recommended composition for validation).\n *\n * `DialogFormState.pending` is this form's own status; it is not emitted as `data-pending` and\n * is not folded into any control's `pending` (conventions 2.7). Submit buttons read\n * `useFormStatus()` themselves.\n *\n * Owned keys (conventions 1.2): `method` (except with a string `action`), `action`.\n */\nexport function DialogForm({\n  action,\n  closeOnSettle = true,\n  method,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogFormProps) {\n  const ctx = useDialogContext(\"Dialog.Form\");\n  const { dialogRef, recordCloseIntent, requestClose } = ctx;\n  const isLibrary = ctx.mode === \"library\";\n  const [pending, setPending] = useState(false);\n  const submission = useRef<{ event: Event; returnValue: string } | null>(null);\n  // The dialog closed after the last submit (Escape, a Close part): the settle must not close it\n  // again, also when the user re-opened it meanwhile (the review's walkthrough 11.8 variant).\n  const closedSinceSubmit = useRef(false);\n  const watches = typeof action === \"function\";\n\n  // The submitter's `value` comes from the native `submit` event (capture, before React's\n  // handler runs the action).\n  const libraryRef = useCallback((form: HTMLFormElement) => {\n    const onSubmit = (event: Event) => {\n      if (event.target !== form) return;\n      const submitter = (event as SubmitEvent).submitter as\n        | HTMLButtonElement\n        | HTMLInputElement\n        | null;\n      submission.current = { event, returnValue: submitter?.value ?? \"\" };\n      closedSinceSubmit.current = false;\n    };\n    const dialog = form.closest(\"dialog\");\n    const onClose = (event: Event) => {\n      if (event.target === dialog) closedSinceSubmit.current = true;\n    };\n    form.addEventListener(\"submit\", onSubmit, true);\n    dialog?.addEventListener(\"close\", onClose);\n    return () => {\n      form.removeEventListener(\"submit\", onSubmit, true);\n      dialog?.removeEventListener(\"close\", onClose);\n    };\n  }, []);\n\n  // `clean`: no field error in the settle's result (always `true` without a `Form.Root`).\n  const onSettled = useCallback(\n    (clean: boolean) => {\n      const dialog = dialogRef.current;\n      const submitted = submission.current;\n      submission.current = null;\n      if (!closeOnSettle || closedSinceSubmit.current) return;\n      // A result with field errors keeps the dialog open; the Form.Root focuses the first errored\n      // field (design/components/dialog.md, \"Dialog.Form and Form.Root\").\n      if (!clean) return;\n      if (dialog === null || !dialog.open) return;\n      const returnValue = submitted?.returnValue ?? \"\";\n      if (isLibrary) {\n        // A library-owned close (design 2.3): `openChangeAction(false)` awaited, then\n        // `close(returnValue)` in the commit, inside the view transition if set.\n        requestClose(submitted?.event, \"activate\", returnValue);\n        return;\n      }\n      recordCloseIntent({ reason: \"activate\", event: submitted?.event });\n      dialog.close(returnValue);\n    },\n    [closeOnSettle, dialogRef, isLibrary, recordCloseIntent, requestClose],\n  );\n\n  const state: DialogFormState = { pending };\n\n  return useRender<ComponentPropsWithRef<\"form\">, DialogFormState>({\n    defaultElement: \"form\",\n    render,\n    state,\n    className,\n    style,\n    children: (s) => (\n      <>\n        {resolveStateValue(children, s)}\n        <DialogFormSettle\n          watches={watches}\n          missingAction={action === undefined}\n          onPendingChange={setPending}\n          onSettled={onSettled}\n        />\n      </>\n    ),\n    props: rest,\n    libraryProps: {\n      method: action === undefined ? \"dialog\" : typeof action === \"string\" ? method : undefined,\n      // React's own type wants `void | Promise<void>`; the library's actions return `unknown`\n      // (conventions 2.2) and React ignores the result.\n      action: action as ComponentPropsWithRef<\"form\">[\"action\"],\n    },\n    ref: libraryRef,\n  });\n}\n\nDialogForm.displayName = \"DialogForm\";\n\n/**\n * Rendered among the form's children, so it reads the `FormContext` exactly when the form is a\n * `Form.Root` (either orientation of the `render` composition): the settle close then waits for\n * a result with no field error (`hasAnyError`, the `autoReset` predicate, hidden stale entries\n * included).\n */\nfunction DialogFormSettle({\n  watches,\n  missingAction,\n  onPendingChange,\n  onSettled,\n}: {\n  readonly watches: boolean;\n  readonly missingAction: boolean;\n  readonly onPendingChange: (pending: boolean) => void;\n  readonly onSettled: (clean: boolean) => void;\n}) {\n  const form = use(FormContext);\n  useDevWarning(\n    form !== null && missingAction,\n    \"`Dialog.Form` rendered as a `Form.Root` needs a function `action`; without one the form \" +\n      \"navigates instead of closing the dialog. Render a plain `<Dialog.Form>` for a \" +\n      '`method=\"dialog\"` form.',\n  );\n  const isForm = form !== null;\n  const errors = form?.errors;\n  const settled = useCallback(\n    () => onSettled(!isForm || !hasAnyError(errors)),\n    [isForm, errors, onSettled],\n  );\n  if (!watches) return null;\n  return <FormStatusWatcher onPendingChange={onPendingChange} onSettled={settled} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,SAAgB,WAAW,EACzB,QACA,gBAAgB,MAChB,QACA,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,MAAM,iBAAiB,aAAa;CAC1C,MAAM,EAAE,WAAW,mBAAmB,iBAAiB;CACvD,MAAM,YAAY,IAAI,SAAS;CAC/B,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,aAAa,OAAqD,IAAI;CAG5E,MAAM,oBAAoB,OAAO,KAAK;CACtC,MAAM,UAAU,OAAO,WAAW;CAIlC,MAAM,aAAa,aAAa,SAA0B;EACxD,MAAM,YAAY,UAAiB;GACjC,IAAI,MAAM,WAAW,MAAM;GAC3B,MAAM,YAAa,MAAsB;GAIzC,WAAW,UAAU;IAAE;IAAO,aAAa,WAAW,SAAS;GAAG;GAClE,kBAAkB,UAAU;EAC9B;EACA,MAAM,SAAS,KAAK,QAAQ,QAAQ;EACpC,MAAM,WAAW,UAAiB;GAChC,IAAI,MAAM,WAAW,QAAQ,kBAAkB,UAAU;EAC3D;EACA,KAAK,iBAAiB,UAAU,UAAU,IAAI;EAC9C,QAAQ,iBAAiB,SAAS,OAAO;EACzC,aAAa;GACX,KAAK,oBAAoB,UAAU,UAAU,IAAI;GACjD,QAAQ,oBAAoB,SAAS,OAAO;EAC9C;CACF,GAAG,CAAC,CAAC;CAGL,MAAM,YAAY,aACf,UAAmB;EAClB,MAAM,SAAS,UAAU;EACzB,MAAM,YAAY,WAAW;EAC7B,WAAW,UAAU;EACrB,IAAI,CAAC,iBAAiB,kBAAkB,SAAS;EAGjD,IAAI,CAAC,OAAO;EACZ,IAAI,WAAW,QAAQ,CAAC,OAAO,MAAM;EACrC,MAAM,cAAc,WAAW,eAAe;EAC9C,IAAI,WAAW;GAGb,aAAa,WAAW,OAAO,YAAY,WAAW;GACtD;EACF;EACA,kBAAkB;GAAE,QAAQ;GAAY,OAAO,WAAW;EAAM,CAAC;EACjE,OAAO,MAAM,WAAW;CAC1B,GACA;EAAC;EAAe;EAAW;EAAW;EAAmB;CAAY,CACvE;CAIA,OAAO,UAA0D;EAC/D,gBAAgB;EAChB;EACA,OAAA,EAL+B,QAK3B;EACJ;EACA;EACA,WAAW,MACT,qBAAA,UAAA,EAAA,UAAA,CACG,kBAAkB,UAAU,CAAC,GAC9B,oBAAC,kBAAD;GACW;GACT,eAAe,WAAW,KAAA;GAC1B,iBAAiB;GACN;EACZ,CAAA,CACD,EAAA,CAAA;EAEJ,OAAO;EACP,cAAc;GACZ,QAAQ,WAAW,KAAA,IAAY,WAAW,OAAO,WAAW,WAAW,SAAS,KAAA;GAGxE;EACV;EACA,KAAK;CACP,CAAC;AACH;AAEA,WAAW,cAAc;;;;;;;AAQzB,SAAS,iBAAiB,EACxB,SACA,eACA,iBACA,aAMC;CACD,MAAM,OAAO,IAAI,WAAW;CAC5B,cACE,SAAS,QAAQ,eACjB,iMAGF;CACA,MAAM,SAAS,SAAS;CACxB,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,kBACR,UAAU,CAAC,UAAU,CAAC,YAAY,MAAM,CAAC,GAC/C;EAAC;EAAQ;EAAQ;CAAS,CAC5B;CACA,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,oBAAC,mBAAD;EAAoC;EAAiB,WAAW;CAAU,CAAA;AACnF"}

package/dist/dialog/dialog-popup.d.mts

@@ -44,8 +44,10 @@ export interface DialogPopupProps extends Omit<ComponentPropsWithRef<"dialog">,
   experimental_closedBy?: boolean;
   /**
    * Library mode only. Forwarded to the `<ViewTransition default>` around the dialog. Animates
-   * the opening commit and content changes while open; the close is the browser's and animates
-   * with CSS. Ignored (dev warning) in JS-free mode.
+   * the opening commit, content changes while open, and every library-driven close (a Close
+   * part, a Form submit or settled action, a foreign close command, a controlled
+   * `open={false}`), in all engines; dismissals (Escape, a click outside) are the browser's and
+   * animate with CSS only. Ignored (dev warning) in JS-free mode.
    *
    * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
    * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
@@ -67,8 +69,12 @@ export interface DialogPopupProps extends Omit<ComponentPropsWithRef<"dialog">,
  *
  * In library mode the children render from committed state, so content that suspends keeps the
  * dialog closed (and the Trigger pending) until it is ready; `showModal()` runs in the layout
- * effect of the commit that mounted them. Closing is the browser's: the native `close` event
- * becomes `openChangeAction(false, { reason, returnValue })`.
+ * effect of the commit that mounted them. A close a part asks for (Close, a `method="dialog"`
+ * submit, a Form's settle close, a foreign close command) is cancelled and goes through the
+ * Root: `openChangeAction(false)` is awaited and `close(returnValue)` runs in the layout effect
+ * of the commit that ends it, inside the view transition if `transition` is set. A dismissal
+ * (Escape, a click outside) is the browser's: the native `close` event becomes
+ * `openChangeAction(false, { reason: "dismiss", returnValue })`.
  *
  * Owned keys (conventions 1.2): `id`, `open`, `closedby`, `aria-labelledby` and
  * `aria-describedby` (token-merged), `data-modal`, `suppressHydrationWarning`.

package/dist/dialog/dialog-popup.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-popup.d.mts","names":[],"sources":["../../src/dialog/dialog-popup.tsx"],"mappings":";;;iBA0BiB;;WAEN;WACA;;iBAGM,yBAAyB,KACxC;;;;;;;;;;;EAaA;;;;;;;;;;EAUA,eAAe,UAAU;;;;;;;EAOzB;;;;;;;EAOA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;;;wBA2FvC,cACd,aACA,cACA,cACA,uBACA,YACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBAXH"}
+{"version":3,"file":"dialog-popup.d.mts","names":[],"sources":["../../src/dialog/dialog-popup.tsx"],"mappings":";;;iBA6BiB;;WAEN;WACA;;iBAGM,yBAAyB,KACxC;;;;;;;;;;;EAaA;;;;;;;;;;EAUA,eAAe,UAAU;;;;;;;EAOzB;;;;;;;EAOA;;;;;;;;;;;;;EAaA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;;;;;;;wBAiGvC,cACd,aACA,cACA,cACA,uBACA,YACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBAXH"}

package/dist/dialog/dialog-popup.mjs

@@ -1,10 +1,15 @@
 "use client";
 import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { ToolbarContext } from "../internal/toolbar-context.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useDialogContext } from "./dialog-context.mjs";
-import { Activity, startTransition, useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { useContentFocusProbe } from "../internal/content-focus-probe.mjs";
+import { useExitAnimation } from "../internal/use-exit-animation.mjs";
+import { useModalRegistration } from "../internal/use-modal-registration.mjs";
+import { Activity, useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/dialog/dialog-popup.tsx
 const isDev = process.env.NODE_ENV !== "production";
@@ -52,10 +57,10 @@ function onBackdrop(dialog, event) {
 	const rect = dialog.getBoundingClientRect();
 	return !(rect.top <= clientY && clientY <= rect.bottom && rect.left <= clientX && clientX <= rect.right);
 }
-/** An animation that ends: infinite ones (a spinner) would hold the content forever. */
-function ends(animation) {
-	const end = animation.effect?.getComputedTiming().endTime;
-	return typeof end === "number" && Number.isFinite(end);
+/** The submitter's or invoker's `value` (`""` without one, or where the engine gives no source). */
+function valueOf(element) {
+	if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) return element.value;
+	return "";
 }
 /**
 * The dialog itself: a `<dialog>` with the id the Trigger's `commandfor` names, wired to Title
@@ -65,8 +70,12 @@ function ends(animation) {
 *
 * In library mode the children render from committed state, so content that suspends keeps the
 * dialog closed (and the Trigger pending) until it is ready; `showModal()` runs in the layout
-* effect of the commit that mounted them. Closing is the browser's: the native `close` event
-* becomes `openChangeAction(false, { reason, returnValue })`.
+* effect of the commit that mounted them. A close a part asks for (Close, a `method="dialog"`
+* submit, a Form's settle close, a foreign close command) is cancelled and goes through the
+* Root: `openChangeAction(false)` is awaited and `close(returnValue)` runs in the layout effect
+* of the commit that ends it, inside the view transition if `transition` is set. A dismissal
+* (Escape, a click outside) is the browser's: the native `close` event becomes
+* `openChangeAction(false, { reason: "dismiss", returnValue })`.
 *
 * Owned keys (conventions 1.2): `id`, `open`, `closedby`, `aria-labelledby` and
 * `aria-describedby` (token-merged), `data-modal`, `suppressHydrationWarning`.
@@ -76,10 +85,19 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 	const isLibrary = ctx.mode === "library";
 	const { modal, ids, dialogRef, triggerRef } = ctx;
 	const [dialog, setDialog] = useState(null);
-	const [exiting, setExiting] = useState(false);
-	const exitGeneration = useRef(0);
 	const awaitingClose = useRef(false);
+	const libraryClose = useRef(false);
+	const dismissedWhilePending = useRef(null);
 	const warnedFocus = useRef(false);
+	const exit = useExitAnimation();
+	const [prevCommitted, setPrevCommitted] = useState(ctx.committed);
+	if (prevCommitted !== ctx.committed) {
+		setPrevCommitted(ctx.committed);
+		if (isLibrary && prevCommitted && transition === void 0) exit.holdDuringRender();
+	}
+	const contentProbe = useContentFocusProbe(dialogRef);
+	const { wrapContent } = contentProbe;
+	useModalRegistration(dialog);
 	useDevWarning(!isLibrary && transition !== void 0, "Dialog.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the dialog outside any React transition. Animate it with CSS (`@starting-style`).");
 	useDevWarning(!isLibrary && keepMounted === false, "Dialog.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is always mounted so that the server HTML is complete.");
 	const libraryRef = useCallback((element) => {
@@ -120,18 +138,45 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 	useLayoutEffect(() => {
 		if (isLibrary) reconcileOnMount();
 	}, [isLibrary]);
+	/**
+	* Design 6.2 rule 2, after a close whose commit unmounted the focused content: when focus is
+	* now on `<body>` or still inside the closed dialog, focus the Trigger (if connected), else
+	* blur what holds focus. A modal dialog never needs it (the platform restores focus on
+	* `close()` unconditionally); a non-modal one restores only when focus is inside.
+	*/
+	const returnFocus = (element) => {
+		const doc = element.ownerDocument;
+		const active = doc.activeElement;
+		if (active !== null && active !== doc.body && !element.contains(active)) return;
+		const trigger = triggerRef.current;
+		if (trigger !== null && trigger.isConnected) trigger.focus();
+		else if (active instanceof HTMLElement && active !== doc.body) active.blur();
+	};
 	useLayoutEffect(() => {
 		if (!isLibrary) return;
 		const element = dialogRef.current;
 		if (element === null || !element.isConnected) return;
-		if (ctx.pending || ctx.latestInFlight() !== null) return;
-		if (ctx.committed && !element.open) {
-			if (awaitingClose.current) return;
-			openDialog(element);
-		} else if (!ctx.committed && element.open) {
-			ctx.recordCloseIntent(void 0);
-			element.close();
+		if (!ctx.pending && ctx.latestInFlight() === null) {
+			const dismissed = dismissedWhilePending.current;
+			if (ctx.committed && !element.open) {
+				if (!awaitingClose.current) {
+					dismissedWhilePending.current = null;
+					if (dismissed !== null && dismissed.generation === ctx.openGeneration()) ctx.notifyClosed(dismissed.event, "dismiss", dismissed.returnValue);
+					else openDialog(element);
+				}
+			} else if (!ctx.committed && element.open) {
+				ctx.recordCloseIntent(void 0);
+				libraryClose.current = true;
+				element.close(ctx.takeCloseReturnValue());
+				if (contentProbe.hadFocus()) {
+					contentProbe.forget();
+					returnFocus(element);
+				}
+			}
 		}
+		if (!ctx.committed && dismissedWhilePending.current !== null && ctx.latestInFlight() === null) dismissedWhilePending.current = null;
+		if (ctx.committed && element.open) contentProbe.forget();
+		if (exit.held && !ctx.committed && !exit.waiting() && !awaitingClose.current && !element.open) exit.release();
 	});
 	useEffect(() => {
 		if (isLibrary || initialFocus === void 0 || dialog === null) return;
@@ -151,22 +196,36 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 			if (!isLibrary) return;
 			event.preventDefault();
 			ctx.requestOpen(event, "activate");
-		} else if (command === "request-close" || command === "close") ctx.recordCloseIntent({
-			reason: "activate",
-			event
-		});
+		} else if (command === "request-close" || command === "close") {
+			if (isLibrary) {
+				event.preventDefault();
+				const source = event.source;
+				ctx.requestClose(event, "activate", valueOf(source));
+			} else ctx.recordCloseIntent({
+				reason: "activate",
+				event
+			});
+		}
 	});
 	const onSubmit = useEffectEvent((event) => {
 		const element = dialogRef.current;
 		const form = event.target;
 		if (element === null || !(form instanceof HTMLFormElement)) return;
 		if (form.closest("dialog") !== element) return;
-		const formMethod = event.submitter?.getAttribute("formmethod");
+		const submitter = event.submitter;
+		const formMethod = submitter?.getAttribute("formmethod");
 		if ((formMethod != null ? formMethod.toLowerCase() : form.method) !== "dialog") return;
-		ctx.recordCloseIntent({
-			reason: "activate",
-			event
-		});
+		if (!isLibrary) {
+			ctx.recordCloseIntent({
+				reason: "activate",
+				event
+			});
+			return;
+		}
+		if (event.defaultPrevented) return;
+		if (event.cancelBubble) return;
+		event.preventDefault();
+		ctx.requestClose(event, "activate", valueOf(submitter));
 	});
 	const onClose = useEffectEvent((event) => {
 		const element = dialogRef.current;
@@ -180,29 +239,39 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 			else if (active instanceof HTMLElement) active.blur();
 		}
 		const intent = ctx.takeCloseIntent();
+		const echo = libraryClose.current;
+		libraryClose.current = false;
 		if (!isLibrary) return;
-		if (element.isConnected && typeof element.getAnimations === "function") {
-			getComputedStyle(element).opacity;
-			const animations = element.getAnimations({ subtree: true }).filter(ends);
-			if (animations.length > 0) {
-				const generation = ++exitGeneration.current;
-				setExiting(true);
-				Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
-					if (exitGeneration.current === generation) startTransition(() => setExiting(false));
-				});
-			}
+		if (!echo || transition === void 0) {
+			const animations = exit.exitAnimations(element);
+			if (animations.length > 0) exit.holdUntil(animations);
+			else exit.release();
 		}
-		ctx.notifyClosed(intent?.event ?? event, intent?.reason ?? "dismiss", element.returnValue);
+		if (echo) return;
+		ctx.takeCloseReturnValue();
+		if (ctx.intended()) ctx.notifyClosed(intent?.event ?? event, intent?.reason ?? "dismiss", element.returnValue);
+		else dismissedWhilePending.current = {
+			event: intent?.event ?? event,
+			returnValue: element.returnValue,
+			generation: ctx.openGeneration()
+		};
 	});
 	const onBeforeToggle = useEffectEvent((event) => {
-		if (event.target !== dialogRef.current) return;
+		const element = dialogRef.current;
+		if (element === null || event.target !== element) return;
 		const newState = event.newState;
 		awaitingClose.current = newState === "closed";
-		if (newState === "open") ctx.nextOpenGeneration();
+		if (newState === "closed") exit.recordBaseline(element);
+		if (newState === "open") {
+			dismissedWhilePending.current = null;
+			ctx.nextOpenGeneration();
+			contentProbe.forget();
+		}
 	});
 	useEffect(() => {
 		if (dialog === null) return;
 		const doc = dialog.ownerDocument;
+		const root = dialog.getRootNode();
 		const nativeClosedBy = experimental_closedBy && "closedBy" in dialog;
 		const listeners = [
 			[
@@ -212,7 +281,7 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 				false
 			],
 			[
-				dialog,
+				root,
 				"submit",
 				onSubmit,
 				false
@@ -329,14 +398,18 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 		open: ctx.committed,
 		modal
 	};
-	const visible = ctx.committed || exiting;
-	const content = (s) => {
+	const visible = ctx.committed || exit.held;
+	const content = (s) => /* @__PURE__ */ jsx(ToolbarContext, {
+		value: null,
+		children: contentOf(s)
+	});
+	const contentOf = (s) => {
 		if (!isLibrary) return resolveStateValue(children, s);
 		if (keepMounted === true) return /* @__PURE__ */ jsx(Activity, {
 			mode: visible ? "visible" : "hidden",
-			children: resolveStateValue(children, s)
+			children: wrapContent(resolveStateValue(children, s))
 		});
-		return visible ? resolveStateValue(children, s) : null;
+		return visible ? wrapContent(resolveStateValue(children, s)) : null;
 	};
 	const libraryProps = {
 		id: ids.dialog,