@funstack/ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/checkbox/checkbox.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+//#region src/checkbox/checkbox.tsx
+/**
+* A checkbox (WAI-ARIA "Checkbox" pattern, dual- and mixed-state). Renders
+* `<input type="checkbox">` whose DOM `checked` is the optimistic state; the input carries
+* `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.
+*
+* Owned keys (a `render` element's value is overridden): `type`, `checked`, `defaultChecked`,
+* `indeterminate` (stripped), `aria-checked` (always removed), `disabled`, `data-checked`,
+* `data-indeterminate`, `data-pending`, `data-disabled`. `role` passes through. Event handlers
+* are merged rather than owned: a `render` element's own `onChange` (or `onClick`) runs first,
+* then the library's; an `onClick` that calls `preventDefault()` cancels the change (nothing is
+* dispatched).
+*/
+function Checkbox({ checked, defaultChecked, indeterminate = false, checkedChangeAction, disabled = false, transition, className, style, render, ...rest }) {
+	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
+		controlled: checked,
+		defaultValue: defaultChecked,
+		initialValue: false,
+		action: checkedChangeAction,
+		transitionTypes: (next) => transitionTypes("checkbox", next ? "check" : "uncheck"),
+		warn: {
+			component: "Checkbox",
+			prop: "checked"
+		}
+	});
+	const shownIndeterminate = indeterminate && !pending;
+	const inputRef = useNativeChecked({
+		type: "checkbox",
+		component: "Checkbox",
+		checked: optimistic,
+		defaultChecked: checked === void 0 ? defaultChecked ?? false : void 0,
+		indeterminate: shownIndeterminate,
+		latestInFlight,
+		onPlatformChange: (next, event) => dispatch(next, createActionDetails(event, { reason: "platform" }))
+	});
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			checked: optimistic,
+			indeterminate: shownIndeterminate,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref: inputRef,
+		props: rest,
+		libraryProps: {
+			type: "checkbox",
+			checked: optimistic,
+			defaultChecked: void 0,
+			indeterminate: void 0,
+			"aria-checked": void 0,
+			disabled,
+			"data-checked": dataAttr(optimistic),
+			"data-indeterminate": dataAttr(shownIndeterminate),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: "activate" })), "Checkbox");
+			}
+		}
+	});
+	return useTransitionBoundary("Checkbox", transition, element);
+}
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.mjs.map

package/dist/checkbox/checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\n\nexport interface CheckboxState {\n  /** Optimistic checked state: what the user sees, including an in-flight change. */\n  readonly checked: boolean;\n  /**\n   * The `indeterminate` prop, suspended while an action is in flight: `false` whenever `pending`\n   * is true, so that the attribute, the DOM property and `:indeterminate` always agree.\n   */\n  readonly indeterminate: boolean;\n  /** An action dispatched by this Checkbox is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `checkedChangeAction`. */\nexport interface CheckboxCheckedChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled the box (click, Space, label click); `event` is the native\n   * `click` event. `\"platform\"`: the browser changed the value itself: a form reset (`event` is\n   * the `reset` event) or a click before hydration / Firefox form-state restoration found on\n   * mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface CheckboxProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"onChange\"\n  | \"aria-checked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /**\n   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset\n   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Controlled-only mixed state (APG tri-state checkbox), derived by the parent from other state;\n   * there is no `defaultIndeterminate` and no action. Rendered as `el.indeterminate`,\n   * `data-indeterminate` and `:indeterminate`, except while an action is pending. Clicking a\n   * mixed box dispatches `checked: true` (for the usual unchecked + mixed representation). Does\n   * not affect what the form submits.\n   */\n  indeterminate?: boolean;\n  /**\n   * Called with the next checked state on every change. Runs inside the Checkbox's transition;\n   * may be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.\n   * Also called with `details.reason === \"platform\"` for a form reset or a pre-hydration click.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is\n   * unsupported here; use controlled mode to veto a change.\n   */\n  checkedChangeAction?: ChangeAction<boolean, CheckboxCheckedChangeDetails>;\n  /** Renders a natively disabled input; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /** Submitted as the input's value when checked. Default `\"on\"` (platform). */\n  value?: string;\n  /**\n   * Forwarded as `default` to the Checkbox's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, CheckboxState>;\n  style?: StateValue<CSSProperties | undefined, CheckboxState>;\n  /**\n   * Replace the rendered element (element form) or take over rendering (function form). Must keep\n   * an `<input type=\"checkbox\">`.\n   */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, CheckboxState>;\n}\n\n/**\n * A checkbox (WAI-ARIA \"Checkbox\" pattern, dual- and mixed-state). Renders\n * `<input type=\"checkbox\">` whose DOM `checked` is the optimistic state; the input carries\n * `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.\n *\n * Owned keys (a `render` element's value is overridden): `type`, `checked`, `defaultChecked`,\n * `indeterminate` (stripped), `aria-checked` (always removed), `disabled`, `data-checked`,\n * `data-indeterminate`, `data-pending`, `data-disabled`. `role` passes through. Event handlers\n * are merged rather than owned: a `render` element's own `onChange` (or `onClick`) runs first,\n * then the library's; an `onClick` that calls `preventDefault()` cancels the change (nothing is\n * dispatched).\n */\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  indeterminate = false,\n  checkedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: CheckboxProps) {\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    CheckboxCheckedChangeDetails\n  >({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: checkedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"checkbox\", next ? \"check\" : \"uncheck\"),\n    warn: { component: \"Checkbox\", prop: \"checked\" },\n  });\n\n  // Suspended while pending (conventions 4.1): the browser clears the property on the click, and\n  // the parent may not have recomputed yet. Restored on settle if the parent still says mixed.\n  const shownIndeterminate = indeterminate && !pending;\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"Checkbox\",\n    checked: optimistic,\n    // Uncontrolled: the latest prop is the reset target. Controlled: React's mount-time value.\n    defaultChecked: checked === undefined ? (defaultChecked ?? false) : undefined,\n    indeterminate: shownIndeterminate,\n    latestInFlight,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const state: CheckboxState = {\n    checked: optimistic,\n    indeterminate: shownIndeterminate,\n    pending,\n    disabled,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, CheckboxState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these (`role` included).\n    props: rest,\n    // Library-controlled layer (owned keys, conventions 1.2).\n    libraryProps: {\n      type: \"checkbox\",\n      // The DOM state is the optimistic state (conventions 3.2).\n      checked: optimistic,\n      defaultChecked: undefined,\n      // Not a DOM attribute; the hook sets the property. Owned so a `render` element's own\n      // `indeterminate` prop (which react-dom would warn about) is stripped.\n      ...({ indeterminate: undefined } as object),\n      \"aria-checked\": undefined,\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the input on its own.\n      disabled,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-indeterminate\": dataAttr(shownIndeterminate),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled input fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        // `indeterminate` plays no part: the platform's rule is \"flip checked, clear mixed\".\n        guardCheckableChange(\n          nativeEvent,\n          () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: \"activate\" })),\n          \"Checkbox\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Checkbox\", transition, element);\n}\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiHA,SAAgB,SAAS,EACvB,SACA,gBACA,gBAAgB,OAChB,qBACA,WAAW,OACX,YACA,WACA,OACA,QACA,GAAG,QACa;CAChB,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,YAAY,OAAO,UAAU,SAAS;EACjF,MAAM;GAAE,WAAW;GAAY,MAAM;EAAU;CACjD,CAAC;CAID,MAAM,qBAAqB,iBAAiB,CAAC;CAE7C,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX,SAAS;EAET,gBAAgB,YAAY,KAAA,IAAa,kBAAkB,QAAS,KAAA;EACpE,eAAe;EACf;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CASD,MAAM,UAAU,UAAyD;EACvE,gBAAgB;EAChB;EACA,OAAA;GATA,SAAS;GACT,eAAe;GACf;GACA;EAMI;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EAEP,cAAc;GACZ,MAAM;GAEN,SAAS;GACT,gBAAgB,KAAA;GAGV,eAAe,KAAA;GACrB,gBAAgB,KAAA;GAGhB;GACA,gBAAgB,SAAS,UAAU;GACnC,sBAAsB,SAAS,kBAAkB;GACjD,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAE1B,qBACE,mBACM,SAAS,CAAC,YAAY,oBAAoB,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC,GACpF,UACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,YAAY,YAAY,OAAO;AAC9D;AAEA,SAAS,cAAc"}

package/dist/checkbox/index.d.mts

@@ -0,0 +1,3 @@
+import "../internal/platform-attributes.mjs";
+import { Checkbox, CheckboxCheckedChangeDetails, CheckboxProps, CheckboxState } from "./checkbox.mjs";
+export { Checkbox, type CheckboxCheckedChangeDetails, type CheckboxProps, type CheckboxState };

package/dist/checkbox/index.mjs

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.mjs";

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

@@ -0,0 +1,44 @@
+import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/dialog/dialog-close.d.ts
+export interface DialogCloseState {
+  /** The `action` is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+/** Details passed to `Dialog.Close`'s `action`. */
+export interface DialogCloseDetails extends ActionDetails {
+  /** The `value` the dialog closes with (`dialog.returnValue`); `""` without `value`. */
+  readonly returnValue: string;
+}
+export interface DialogCloseProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "value" | "className" | "style" | "children"> {
+  /**
+   * Runs inside this part's own transition, then closes the dialog with `close(value)`. A
+   * rejection reaches the nearest Error Boundary above the Close part and leaves the dialog open.
+   * Without `action` the button is a native `command="request-close"` invoker (JS-free).
+   */
+  action?: Action<[details: DialogCloseDetails]>;
+  /** Becomes `dialog.returnValue` (and `details.returnValue` of the close notification). */
+  value?: string;
+  disabled?: boolean;
+  className?: StateValue<string | undefined, DialogCloseState>;
+  style?: StateValue<CSSProperties | undefined, DialogCloseState>;
+  children?: StateValue<ReactNode, DialogCloseState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, DialogCloseState>;
+}
+/**
+ * A close button: `<button type="button" commandfor command="request-close">`. Without `action`
+ * the browser closes the dialog (a close request: `cancel`, then `close`), with `value` as the
+ * `returnValue`. With `action` the click is cancelled, the action runs in this part's own
+ * transition (`data-pending` on the button) and the dialog closes with `close(value)` once it
+ * resolves; a rejection leaves the dialog open.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+ * `command`, `value`, `onClick` (with `action`), `data-pending`, `data-disabled`.
+ */
+export declare function DialogClose({ action, value, disabled, className, style, children, render, ...rest }: DialogCloseProps): ReactNode;
+export declare namespace DialogClose {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=dialog-close.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close.d.mts","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"mappings":";;;iBAUiB;;WAEN;WACA;;;iBAIM,2BAA2B;;WAEjC;;iBAGM,yBAAyB,KACxC;;;;;;EAQA,SAAS,QAAQ,SAAS;;EAE1B;EACA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAevC,cACd,QACA,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBATH"}

package/dist/dialog/dialog-close.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { useDialogContext } from "./dialog-context.mjs";
+import { useCallback, useTransition } from "react";
+//#region src/dialog/dialog-close.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* A close button: `<button type="button" commandfor command="request-close">`. Without `action`
+* the browser closes the dialog (a close request: `cancel`, then `close`), with `value` as the
+* `returnValue`. With `action` the click is cancelled, the action runs in this part's own
+* transition (`data-pending` on the button) and the dialog closes with `close(value)` once it
+* resolves; a rejection leaves the dialog open.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+* `command`, `value`, `onClick` (with `action`), `data-pending`, `data-disabled`.
+*/
+function DialogClose({ action, value, disabled = false, className, style, children, render, ...rest }) {
+	const ctx = useDialogContext("Dialog.Close");
+	const [pending, startOwnTransition] = useTransition();
+	const { ids, dialogRef, recordCloseIntent } = ctx;
+	const hasAction = action !== void 0;
+	const state = {
+		pending,
+		disabled
+	};
+	const devRef = useCallback((element) => {
+		if (isDev && !hasAction && element.tagName !== "BUTTON") console.error(`Dialog.Close: rendered a <${element.tagName.toLowerCase()}> without \`action\`. Only a <button> runs \`command="request-close"\`; this element will not close the dialog.`);
+		return () => {};
+	}, [hasAction]);
+	const onClick = (event) => {
+		if (action === void 0) return;
+		event.preventDefault();
+		if (disabled) return;
+		const native = event.nativeEvent;
+		const returnValue = value ?? "";
+		const details = createActionDetails(native, { returnValue });
+		startOwnTransition(async () => {
+			await action(details);
+			const dialog = dialogRef.current;
+			if (dialog === null || !dialog.open) return;
+			recordCloseIntent({
+				reason: "activate",
+				event: native
+			});
+			dialog.close(returnValue);
+		});
+	};
+	const libraryProps = {
+		...rendersButton(render) && { type: "button" },
+		disabled,
+		commandfor: ids.dialog,
+		command: "request-close",
+		value,
+		...hasAction && { onClick },
+		"data-pending": dataAttr(pending),
+		"data-disabled": dataAttr(disabled)
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref: devRef
+	});
+}
+DialogClose.displayName = "DialogClose";
+//#endregion
+export { DialogClose };
+
+//# sourceMappingURL=dialog-close.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close.mjs","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useTransition } 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 { 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  const [pending, startOwnTransition] = useTransition();\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    startOwnTransition(async () => {\n      await action(details);\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  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":";;;;;;;AAyCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;;;;;AAYvC,SAAgB,YAAY,EAC1B,QACA,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,CAAC,SAAS,sBAAsB,cAAc;CACpD,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,mBAAmB,YAAY;GAC7B,MAAM,OAAO,OAAO;GAEpB,MAAM,SAAS,UAAU;GACzB,IAAI,WAAW,QAAQ,CAAC,OAAO,MAAM;GACrC,kBAAkB;IAAE,QAAQ;IAAY,OAAO;GAAO,CAAC;GACvD,OAAO,MAAM,WAAW;EAC1B,CAAC;CACH;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"}

package/dist/dialog/dialog-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/dialog/dialog-context.ts
+const DialogContext = createContext(null);
+function useDialogContext(part) {
+	const context = use(DialogContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Dialog.Root.`);
+	return context;
+}
+//#endregion
+export { DialogContext, useDialogContext };
+
+//# sourceMappingURL=dialog-context.mjs.map

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

@@ -0,0 +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\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":";;;AAsDA,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-description.d.mts

@@ -0,0 +1,22 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { DialogPopupState } from "./dialog-popup.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/dialog/dialog-description.d.ts
+export type DialogDescriptionState = DialogPopupState;
+export interface DialogDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, DialogDescriptionState>;
+  style?: StateValue<CSSProperties | undefined, DialogDescriptionState>;
+  children?: StateValue<ReactNode, DialogDescriptionState>;
+  render?: RenderProp<ComponentPropsWithRef<"p">, DialogDescriptionState>;
+}
+/**
+ * The dialog's description: a `<p>` whose id the Popup references with `aria-describedby`.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function DialogDescription({ className, style, children, render, ...rest }: DialogDescriptionProps): ReactNode;
+export declare namespace DialogDescription {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=dialog-description.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.d.mts","names":[],"sources":["../../src/dialog/dialog-description.tsx"],"mappings":";;;;YAOY,yBAAyB;iBAEpB,+BAA+B,KAC9C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,4BAA4B;;;;;;;wBAQlC,oBACd,WACA,OACA,UACA,WACG,QACF,yBAAsB;yBANT"}

package/dist/dialog/dialog-description.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useDialogContext } from "./dialog-context.mjs";
+//#region src/dialog/dialog-description.tsx
+/**
+* The dialog's description: a `<p>` whose id the Popup references with `aria-describedby`.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function DialogDescription({ className, style, children, render, ...rest }) {
+	const ctx = useDialogContext("Dialog.Description");
+	const state = {
+		open: ctx.committed,
+		modal: ctx.modal
+	};
+	return useRender({
+		defaultElement: "p",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { id: ctx.ids.description }
+	});
+}
+DialogDescription.displayName = "DialogDescription";
+//#endregion
+export { DialogDescription };
+
+//# sourceMappingURL=dialog-description.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.mjs","names":[],"sources":["../../src/dialog/dialog-description.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\nimport type { DialogPopupState } from \"./dialog-popup.js\";\n\nexport type DialogDescriptionState = DialogPopupState;\n\nexport interface DialogDescriptionProps extends Omit<\n  ComponentPropsWithRef<\"p\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, DialogDescriptionState>;\n  style?: StateValue<CSSProperties | undefined, DialogDescriptionState>;\n  children?: StateValue<ReactNode, DialogDescriptionState>;\n  render?: RenderProp<ComponentPropsWithRef<\"p\">, DialogDescriptionState>;\n}\n\n/**\n * The dialog's description: a `<p>` whose id the Popup references with `aria-describedby`.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function DialogDescription({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogDescriptionProps) {\n  const ctx = useDialogContext(\"Dialog.Description\");\n  const state: DialogDescriptionState = { open: ctx.committed, modal: ctx.modal };\n  return useRender<ComponentPropsWithRef<\"p\">, DialogDescriptionState>({\n    defaultElement: \"p\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { id: ctx.ids.description },\n  });\n}\n\nDialogDescription.displayName = \"DialogDescription\";\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,kBAAkB,EAChC,WACA,OACA,UACA,QACA,GAAG,QACsB;CACzB,MAAM,MAAM,iBAAiB,oBAAoB;CACjD,MAAM,QAAgC;EAAE,MAAM,IAAI;EAAW,OAAO,IAAI;CAAM;CAC9E,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EAAE,IAAI,IAAI,IAAI,YAAY;CAC1C,CAAC;AACH;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,58 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/dialog/dialog-form.d.ts
+export interface DialogFormState {
+  /** `useFormStatus().pending` of this form, exposed for `className` / `children` functions. */
+  readonly pending: boolean;
+}
+export interface DialogFormProps extends Omit<ComponentPropsWithRef<"form">, "method" | "action" | "className" | "style" | "children"> {
+  /**
+   * 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.
+   */
+  action?: string | ((formData: FormData) => unknown);
+  /**
+   * With a function `action`: close the dialog once the action's transition settles without
+   * throwing. 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`.
+   *
+   * 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.
+   */
+  closeOnSettle?: boolean;
+  /**
+   * Only with a string `action` (a navigating form, for example `"post"`). Owned otherwise:
+   * `"dialog"` without `action`, React's own with a function `action`.
+   */
+  method?: ComponentPropsWithRef<"form">["method"];
+  className?: StateValue<string | undefined, DialogFormState>;
+  style?: StateValue<CSSProperties | undefined, DialogFormState>;
+  children?: StateValue<ReactNode, DialogFormState>;
+  render?: RenderProp<ComponentPropsWithRef<"form">, DialogFormState>;
+}
+/**
+ * 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
+ * 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.
+ *
+ * `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
+ * `useFormStatus()` themselves.
+ *
+ * Owned keys (conventions 1.2): `method` (except with a string `action`), `action`.
+ */
+export declare function DialogForm({ action, closeOnSettle, method, className, style, children, render, ...rest }: DialogFormProps): ReactNode;
+export declare namespace DialogForm {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=dialog-form.d.mts.map

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

@@ -0,0 +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"}

package/dist/dialog/dialog-form.mjs

@@ -0,0 +1,108 @@
+"use client";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useDialogContext } from "./dialog-context.mjs";
+import { useCallback, useEffect, 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
+* 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.
+*
+* `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
+* `useFormStatus()` themselves.
+*
+* 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 [pending, setPending] = useState(false);
+	const submission = useRef(null);
+	const closedSinceSubmit = useRef(false);
+	const watches = typeof action === "function";
+	const libraryRef = useCallback((form) => {
+		const onSubmit = (event) => {
+			if (event.target !== form) return;
+			const submitter = event.submitter;
+			submission.current = {
+				event,
+				returnValue: submitter?.value ?? ""
+			};
+			closedSinceSubmit.current = false;
+		};
+		const dialog = form.closest("dialog");
+		const onClose = (event) => {
+			if (event.target === dialog) closedSinceSubmit.current = true;
+		};
+		form.addEventListener("submit", onSubmit, true);
+		dialog?.addEventListener("close", onClose);
+		return () => {
+			form.removeEventListener("submit", onSubmit, true);
+			dialog?.removeEventListener("close", onClose);
+		};
+	}, []);
+	const onSettled = useCallback(() => {
+		const dialog = dialogRef.current;
+		const submitted = submission.current;
+		submission.current = null;
+		if (!closeOnSettle || closedSinceSubmit.current) return;
+		if (dialog === null || !dialog.open) return;
+		recordCloseIntent({
+			reason: "activate",
+			event: submitted?.event
+		});
+		dialog.close(submitted?.returnValue ?? "");
+	}, [
+		closeOnSettle,
+		dialogRef,
+		recordCloseIntent
+	]);
+	return useRender({
+		defaultElement: "form",
+		render,
+		state: { pending },
+		className,
+		style,
+		children: (s) => /* @__PURE__ */ jsxs(Fragment, { children: [resolveStateValue(children, s), watches && /* @__PURE__ */ jsx(FormStatusWatcher, {
+			onPendingChange: setPending,
+			onSettled
+		})] }),
+		props: rest,
+		libraryProps: {
+			method: action === void 0 ? "dialog" : typeof action === "string" ? method : void 0,
+			action
+		},
+		ref: libraryRef
+	});
+}
+DialogForm.displayName = "DialogForm";
+//#endregion
+export { DialogForm };
+
+//# sourceMappingURL=dialog-form.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,81 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, RefObject, ViewTransitionClass } from "react";
+//#region src/dialog/dialog-popup.d.ts
+export interface DialogPopupState {
+  /** Committed open state (library mode); `false` in JS-free mode. Read `:open` for the DOM truth. */
+  readonly open: boolean;
+  readonly modal: boolean;
+}
+export interface DialogPopupProps extends Omit<ComponentPropsWithRef<"dialog">, "id" | "open" | "closedby" | "onToggle" | "onBeforeToggle" | "className" | "style" | "children"> {
+  /**
+   * Library mode: what happens to the children while the dialog is closed.
+   * - `false` (default): not rendered. Mounting them is part of the opening transition, so
+   *   content that suspends holds the open until it is ready. Unmount waits for the dialog's
+   *   exit animations.
+   * - `true`: rendered inside `<Activity mode="hidden">`: DOM and state preserved, effects
+   *   stopped, pre-rendered at low priority. Not in the server HTML.
+   *
+   * Ignored in JS-free mode (always mounted).
+   */
+  keepMounted?: boolean;
+  /**
+   * Element to focus when the dialog opens: a ref, or a selector resolved inside the dialog.
+   * The library writes `autofocus` on it right before `showModal()` / `show()` and the platform
+   * focuses it. Default: the platform's choice (first focusable descendant; the dialog itself if
+   * none). Use `tabIndex={-1}` on a heading or wrapper for long or destructive dialogs (APG).
+   *
+   * In JS-free mode the browser opens the dialog itself, so the attribute is written after
+   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.
+   */
+  initialFocus?: RefObject<HTMLElement | null> | string;
+  /**
+   * Close on a click outside the dialog (on the backdrop for modal dialogs). Default `false`.
+   * Baseline: JS `pointerdown` + `click` listeners, which close only when both the press and the
+   * click land outside (a drag that starts inside, such as selecting text, never closes); with
+   * `experimental_closedBy`, native `closedby="any"`, which behaves the same.
+   */
+  lightDismiss?: boolean;
+  /**
+   * Experimental (Chrome 134+, Firefox 141+; Safari 27.0 ignores it). Renders `closedby`
+   * (`"any"` when `lightDismiss`, else `"closerequest"`) and skips the JS dismiss listeners where
+   * `HTMLDialogElement.prototype.closedBy` exists. Elsewhere the JS baseline stays active.
+   * Default `false`.
+   */
+  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.
+   *
+   * 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
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, DialogPopupState>;
+  style?: StateValue<CSSProperties | undefined, DialogPopupState>;
+  children?: StateValue<ReactNode, DialogPopupState>;
+  /** Must render a `<dialog>`. */
+  render?: RenderProp<ComponentPropsWithRef<"dialog">, DialogPopupState>;
+}
+/**
+ * The dialog itself: a `<dialog>` with the id the Trigger's `commandfor` names, wired to Title
+ * and Description through `aria-labelledby` / `aria-describedby`. Never renders `open`: modal
+ * opening and closing go through `showModal()` / `close()` only. Style it with `:open` and
+ * `:modal`; it emits `data-modal` but no `data-open`.
+ *
+ * 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 })`.
+ *
+ * Owned keys (conventions 1.2): `id`, `open`, `closedby`, `aria-labelledby` and
+ * `aria-describedby` (token-merged), `data-modal`, `suppressHydrationWarning`.
+ */
+export declare function DialogPopup({ keepMounted, initialFocus, lightDismiss, experimental_closedBy, transition, className, style, children, render, ...rest }: DialogPopupProps): ReactNode;
+export declare namespace DialogPopup {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=dialog-popup.d.mts.map

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

@@ -0,0 +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"}