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

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 { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useDialogContext } from "./dialog-context.mjs";
+import { useCallback } 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, run } = useActionTrigger(ctx.openGeneration);
+	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 });
+		run(() => 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 } 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"}

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   * 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"}

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"}