@funstack/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/checkbox-group/checkbox-group-root.mjs

@@ -0,0 +1,291 @@
+"use client";
+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 { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
+import { CheckboxGroupContext, enabledValues } from "./checkbox-group-context.mjs";
+import { useCallback, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/checkbox-group/checkbox-group-root.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const EMPTY = /* @__PURE__ */ new Set();
+function toSet(value) {
+	return new Set(value);
+}
+function setsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const v of a) if (!b.has(v)) return false;
+	return true;
+}
+/** The optimistic reducer (design 5.2): apply a patch, so stacked dispatches re-base. */
+function reduce(set, patch) {
+	const next = new Set(set);
+	for (const v of patch.removed) next.delete(v);
+	for (const v of patch.added) next.add(v);
+	return next;
+}
+/**
+* `values` sorted by `order` (the Items' values in document order); values not in `order` keep
+* their iteration order, after the others.
+*/
+function sortByOrder(values, order) {
+	const wanted = new Set(values);
+	const sorted = [];
+	for (const v of order) if (wanted.delete(v)) sorted.push(v);
+	for (const v of wanted) sorted.push(v);
+	return sorted;
+}
+function summarize(registry) {
+	const items = /* @__PURE__ */ new Map();
+	for (const { value, disabled } of registry.values()) items.set(value, (items.get(value) ?? false) || !disabled);
+	return items;
+}
+function disabledOf(items) {
+	if (items === null) return EMPTY;
+	const disabled = /* @__PURE__ */ new Set();
+	for (const [value, enabled] of items) if (!enabled) disabled.add(value);
+	return disabled.size === 0 ? EMPTY : disabled;
+}
+function mapsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const [k, v] of a) if (b.get(k) !== v) return false;
+	return true;
+}
+function arraysEqual(a, b) {
+	return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+/** The group's Items: checkboxes of this `name` in the fieldset (Parents have none). */
+function readItems(fieldset, name) {
+	if (fieldset === null) return [];
+	return [...fieldset.querySelectorAll("input[type=\"checkbox\"]")].filter((box) => box.name === name);
+}
+/**
+* `<fieldset>` that owns the group's state (a set of values), the transition, the shared `name`,
+* the form-reset listener, the mount reconciliation and the group-level `required`
+* (design/components/checkbox-group.md 14.3). Carries `data-pending` while `valueChangeAction`
+* is in flight. Its implicit role is `group`; no `role` is written.
+*
+* Owned keys (conventions 1.2): `disabled`, `form`, `data-pending`, `data-disabled`.
+*
+* Unlike RadioGroup, Items may hydrate after their Root (a Suspense boundary between them): a
+* click before an Item hydrated is reconciled when it does.
+*/
+function CheckboxGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required = false, disabled = false, className, style, children, render, ...rest }) {
+	const fallbackName = useId();
+	const name = nameProp ?? fallbackName;
+	const fieldsetRef = useRef(null);
+	const warnedElement = useRef(false);
+	const warnedDuplicate = useRef(false);
+	/** Parent reports waiting for the next mount read (design 8.1). */
+	const parentReports = useRef([]);
+	const itemRegistry = useRef(/* @__PURE__ */ new Map());
+	const [items, setItems] = useState(null);
+	const registerItem = useCallback((value, disabled) => {
+		const publish = () => {
+			const next = summarize(itemRegistry.current);
+			setItems((prev) => prev !== null && mapsEqual(prev, next) ? prev : next);
+		};
+		const token = {};
+		itemRegistry.current.set(token, {
+			value,
+			disabled
+		});
+		publish();
+		return () => {
+			itemRegistry.current.delete(token);
+			publish();
+		};
+	}, []);
+	const disabledItems = useMemo(() => disabledOf(items), [items]);
+	const controlledSet = useMemo(() => value === void 0 ? void 0 : toSet(value), [value]);
+	const defaultSet = useMemo(() => defaultValue === void 0 ? void 0 : toSet(defaultValue), [defaultValue]);
+	/** Sorts by the Items' current document order. Reads the DOM: handlers and effects only. */
+	const sortByDocument = (values) => sortByOrder(values, readItems(fieldsetRef.current, name).map((item) => item.value));
+	const { optimistic, committed, pending, dispatch, latestInFlight } = useControllableAction({
+		controlled: controlledSet,
+		defaultValue: defaultSet,
+		initialValue: EMPTY,
+		action: valueChangeAction && ((next, details) => valueChangeAction(sortByDocument(next), details)),
+		transitionTypes: (_next, _prev, details) => [
+			...transitionTypes("checkbox-group"),
+			...details.added.length > 0 ? ["fsui-checkbox-group-check"] : [],
+			...details.removed.length > 0 ? ["fsui-checkbox-group-uncheck"] : []
+		],
+		reducer: (prev, _next, details) => reduce(prev, details),
+		warn: {
+			component: "CheckboxGroup.Root",
+			prop: "value"
+		}
+	});
+	/** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */
+	const base = () => {
+		const inFlight = latestInFlight();
+		return inFlight === null ? optimistic : inFlight.next;
+	};
+	/** Dispatches `patch` on top of `from`, with the details of design 3.1. */
+	const dispatchPatch = (from, patch, reason, event) => {
+		const details = createActionDetails(event, {
+			reason,
+			added: sortByDocument(patch.added),
+			removed: sortByDocument(patch.removed)
+		});
+		dispatch(reduce(from, details), details);
+	};
+	/**
+	* The group as the DOM shows it (`checked`) or as a form reset leaves it (`defaultChecked`),
+	* laid over `base()` so that values with no Item are kept (they have no DOM to read).
+	*/
+	const readDom = (prop) => new Map(readItems(fieldsetRef.current, name).map((item) => [item.value, item[prop]]));
+	const readGroup = (prop, from, dom = readDom(prop)) => {
+		const next = new Set(from);
+		for (const [v, isChecked] of dom) if (isChecked) next.add(v);
+		else next.delete(v);
+		return next;
+	};
+	/**
+	* The Root's own mount reconciliation ran: later member mounts are "late" (8.3). Set after the
+	* adapter's mount effect; reset by the cleanup (StrictMode included).
+	*/
+	const rootMounted = useRef(false);
+	/**
+	* Late mounts: the members' `checked` read in the first late member's mount layout effect. The
+	* adapter reads the group in a microtask, but the Items' registration re-renders the group
+	* right after the layout effects, and that re-render re-applies each Item's `checked`, erasing a
+	* click made before the Item hydrated. Every member of the commit is in the DOM by then.
+	*/
+	const lateSnapshot = useRef(null);
+	const { onItemMounted: onMemberMounted } = useNativeGroupReconciliation({
+		element: fieldsetRef,
+		readCurrent: () => {
+			const next = readGroup("checked", base(), lateSnapshot.current ?? void 0);
+			lateSnapshot.current = null;
+			const disabledNow = disabledOf(summarize(itemRegistry.current));
+			for (const report of parentReports.current) for (const v of enabledValues(report.values, disabledNow)) if (report.checked) next.add(v);
+			else next.delete(v);
+			parentReports.current = [];
+			return next;
+		},
+		readDefault: () => readGroup("defaultChecked", value === void 0 ? defaultSet ?? EMPTY : base()),
+		base,
+		equals: setsEqual,
+		onPlatformChange: (next, event) => {
+			const from = base();
+			const added = [...next].filter((v) => !from.has(v));
+			const removed = [...from].filter((v) => !next.has(v));
+			dispatchPatch(from, {
+				added,
+				removed
+			}, "platform", event);
+		}
+	});
+	useLayoutEffect(() => {
+		rootMounted.current = true;
+		return () => {
+			rootMounted.current = false;
+		};
+	}, []);
+	const onItemMounted = (el) => {
+		const late = rootMounted.current;
+		if (late && lateSnapshot.current === null) lateSnapshot.current = readDom("checked");
+		onMemberMounted(el);
+		if (late) queueMicrotask(() => {
+			lateSnapshot.current = null;
+		});
+	};
+	const [itemOrder, setItemOrder] = useState([]);
+	const renderedValue = sortByOrder(optimistic, itemOrder);
+	const syncItemOrder = useEffectEvent(() => {
+		const order = readItems(fieldsetRef.current, name).map((item) => item.value);
+		if (!arraysEqual(sortByOrder(optimistic, order), renderedValue)) setItemOrder(order);
+		if (!isDev || warnedDuplicate.current) return;
+		const duplicate = order.find((v, i) => order.indexOf(v) !== i);
+		if (duplicate !== void 0) {
+			warnedDuplicate.current = true;
+			console.error(`CheckboxGroup.Item: two Items share the value "${duplicate}" in one CheckboxGroup.Root. Item values must be unique; both boxes follow the same value.`);
+		}
+	});
+	useLayoutEffect(() => {
+		syncItemOrder();
+	});
+	const libraryRef = useCallback((el) => {
+		fieldsetRef.current = el;
+		if (isDev && !warnedElement.current && el.tagName !== "FIELDSET") {
+			warnedElement.current = true;
+			console.error(`CheckboxGroup.Root: expected to render a <fieldset> element but got <${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled inheritance, form reset) need a real <fieldset>.`);
+		}
+		return () => {
+			fieldsetRef.current = null;
+		};
+	}, []);
+	const context = {
+		name,
+		form,
+		required: required && (items === null ? optimistic.size === 0 : ![...optimistic].some((v) => items.get(v) === true)),
+		disabledItems,
+		registerItem,
+		optimistic,
+		committed,
+		pending,
+		disabled,
+		defaultValue: value === void 0 ? defaultSet ?? EMPTY : void 0,
+		onItemMounted,
+		reportParent: (values, checked) => {
+			parentReports.current.push({
+				values,
+				checked
+			});
+		},
+		value: renderedValue,
+		sortByDocument,
+		toggle: (item, checked, event) => {
+			if (optimistic.has(item) === checked) return;
+			dispatchPatch(optimistic, checked ? {
+				added: [item],
+				removed: []
+			} : {
+				added: [],
+				removed: [item]
+			}, "activate", event);
+		},
+		apply: (patch, event) => {
+			const added = patch.added.filter((v) => !optimistic.has(v));
+			const removed = patch.removed.filter((v) => optimistic.has(v));
+			if (added.length === 0 && removed.length === 0) return;
+			dispatchPatch(optimistic, {
+				added,
+				removed
+			}, "activate", event);
+		}
+	};
+	const element = useRender({
+		defaultElement: "fieldset",
+		render,
+		state: {
+			value: renderedValue,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			disabled,
+			form,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled)
+		},
+		ref: libraryRef
+	});
+	return /* @__PURE__ */ jsx(CheckboxGroupContext, {
+		value: context,
+		children: element
+	});
+}
+CheckboxGroupRoot.displayName = "CheckboxGroupRoot";
+//#endregion
+export { CheckboxGroupRoot };
+
+//# sourceMappingURL=checkbox-group-root.mjs.map

package/dist/checkbox-group/checkbox-group-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-root.mjs","names":[],"sources":["../../src/checkbox-group/checkbox-group-root.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffectEvent,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\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 { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { CheckboxGroupContext, enabledValues } from \"./checkbox-group-context.js\";\nimport type { CheckboxGroupContextValue, CheckboxGroupPatch } from \"./checkbox-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface CheckboxGroupValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled an Item or a Parent (click, Space, label click; `event` is the\n   * native `click`). `\"platform\"`: the browser changed the checked boxes itself: a form reset\n   * (`event` is the `reset` event), or clicks before hydration / Firefox form-state restoration\n   * found at mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n  /** Values this dispatch checked, in document order of their Items (values with no Item last). */\n  readonly added: readonly string[];\n  /** Values this dispatch unchecked, same order. */\n  readonly removed: readonly string[];\n}\n\nexport interface CheckboxGroupRootState {\n  /**\n   * Optimistic checked values, in document order of the Items as of the Root's last render\n   * (values with no Item last). Items reordered by a component that re-renders without the Root\n   * keep the previous order here until the Root renders again; `next` and `details` of\n   * `valueChangeAction` always read the current DOM order. The server render and the first client\n   * render use the value's own order. Content rendered from it must not suspend.\n   */\n  readonly value: readonly string[];\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface CheckboxGroupRootProps extends Omit<\n  ComponentPropsWithRef<\"fieldset\">,\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"name\"\n  | \"disabled\"\n  | \"form\"\n> {\n  /**\n   * Controlled checked values. `[]` checks nothing; `undefined` means uncontrolled. Order is not\n   * significant and duplicates are ignored: the value is a set.\n   *\n   * A form reset returns each box to the `checked` it had when *that box* mounted (React sets\n   * `defaultChecked` once, from the initial `checked`). The reset is offered to\n   * `valueChangeAction` as a `\"platform\"` change; for a stable target use `defaultValue`.\n   */\n  value?: string[];\n  /**\n   * Initial values in uncontrolled mode. Defaults to `[]`. Also the values a form reset returns\n   * to: the latest prop value is mirrored into the boxes' `defaultChecked`.\n   */\n  defaultValue?: string[];\n  /**\n   * Runs inside the Root's transition whenever the set of checked values changes. May be sync\n   * or async (also a Server Function); rejections reach the nearest Error Boundary and roll the\n   * change back.\n   *\n   * `next` is the whole set as a fresh array in document order of the Items; treat it as a set.\n   * `details.added` / `details.removed` say what changed. When controlled and updating after\n   * your own `await`, prefer a functional update keyed by `added` / `removed` over\n   * `setValue(next)`: two overlapping actions completing out of order would otherwise land the\n   * older whole set last. A `setState` placed after your own `await` is not a Transition update;\n   * wrap it in `startTransition` (React limitation). `details.event.preventDefault()` is not a\n   * veto; use controlled mode to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string[], CheckboxGroupValueChangeDetails>;\n  /**\n   * The `name` shared by every Item (form data key: `formData.getAll(name)`). Defaults to a\n   * `useId()` value; pass a real name when the group is inside a `<form>` you submit.\n   */\n  name?: string;\n  /** The `form` attribute, applied to the fieldset and to every Item. */\n  form?: string;\n  /**\n   * \"At least one Item must be checked.\" Rendered as native `required` on every Item while no\n   * enabled Item is checked, and on none once one is: values with no Item and checked disabled\n   * Items (neither is submitted) do not satisfy it. Until the Items have mounted (server HTML,\n   * before hydration) any checked value satisfies it. Not exposed on the fieldset (ARIA does not\n   * allow `aria-required` on role `group`): say it in the `Label` or through `aria-describedby`.\n   */\n  required?: boolean;\n  /** Renders `<fieldset disabled>`: every Item and Parent is disabled and unfocusable. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, CheckboxGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, CheckboxGroupRootState>;\n  children?: StateValue<ReactNode, CheckboxGroupRootState>;\n  /** Replace the rendered element. Must keep a `<fieldset>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"fieldset\">, CheckboxGroupRootState>;\n}\n\ntype ValueSet = ReadonlySet<string>;\n\nconst EMPTY: ValueSet = new Set();\n\nfunction toSet(value: readonly string[]): ValueSet {\n  return new Set(value);\n}\n\nfunction setsEqual(a: ValueSet, b: ValueSet): boolean {\n  if (a.size !== b.size) return false;\n  for (const v of a) if (!b.has(v)) return false;\n  return true;\n}\n\n/** The optimistic reducer (design 5.2): apply a patch, so stacked dispatches re-base. */\nfunction reduce(set: ValueSet, patch: CheckboxGroupPatch): ValueSet {\n  const next = new Set(set);\n  for (const v of patch.removed) next.delete(v);\n  for (const v of patch.added) next.add(v);\n  return next;\n}\n\n/**\n * `values` sorted by `order` (the Items' values in document order); values not in `order` keep\n * their iteration order, after the others.\n */\nfunction sortByOrder(values: Iterable<string>, order: readonly string[]): string[] {\n  const wanted = new Set(values);\n  const sorted: string[] = [];\n  for (const v of order) if (wanted.delete(v)) sorted.push(v);\n  for (const v of wanted) sorted.push(v);\n  return sorted;\n}\n\n/** Value → \"has an Item without its own `disabled`\", over the registered Items. */\ntype ItemRegistry = Map<object, { readonly value: string; readonly disabled: boolean }>;\n\nfunction summarize(registry: ItemRegistry): Map<string, boolean> {\n  const items = new Map<string, boolean>();\n  for (const { value, disabled } of registry.values()) {\n    items.set(value, (items.get(value) ?? false) || !disabled);\n  }\n  return items;\n}\n\nfunction disabledOf(items: ReadonlyMap<string, boolean> | null): ValueSet {\n  if (items === null) return EMPTY;\n  const disabled = new Set<string>();\n  for (const [value, enabled] of items) if (!enabled) disabled.add(value);\n  return disabled.size === 0 ? EMPTY : disabled;\n}\n\nfunction mapsEqual(a: ReadonlyMap<string, boolean>, b: ReadonlyMap<string, boolean>): boolean {\n  if (a.size !== b.size) return false;\n  for (const [k, v] of a) if (b.get(k) !== v) return false;\n  return true;\n}\n\nfunction arraysEqual(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((v, i) => v === b[i]);\n}\n\n/** The group's Items: checkboxes of this `name` in the fieldset (Parents have none). */\nfunction readItems(fieldset: HTMLFieldSetElement | null, name: string): HTMLInputElement[] {\n  if (fieldset === null) return [];\n  return [...fieldset.querySelectorAll<HTMLInputElement>('input[type=\"checkbox\"]')].filter(\n    (box) => box.name === name,\n  );\n}\n\n/**\n * `<fieldset>` that owns the group's state (a set of values), the transition, the shared `name`,\n * the form-reset listener, the mount reconciliation and the group-level `required`\n * (design/components/checkbox-group.md 14.3). Carries `data-pending` while `valueChangeAction`\n * is in flight. Its implicit role is `group`; no `role` is written.\n *\n * Owned keys (conventions 1.2): `disabled`, `form`, `data-pending`, `data-disabled`.\n *\n * Unlike RadioGroup, Items may hydrate after their Root (a Suspense boundary between them): a\n * click before an Item hydrated is reconciled when it does.\n */\nexport function CheckboxGroupRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  name: nameProp,\n  form,\n  required = false,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: CheckboxGroupRootProps) {\n  const fallbackName = useId();\n  const name = nameProp ?? fallbackName;\n  const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);\n  const warnedElement = useRef(false);\n  const warnedDuplicate = useRef(false);\n  /** Parent reports waiting for the next mount read (design 8.1). */\n  const parentReports = useRef<{ values: readonly string[]; checked: boolean }[]>([]);\n\n  // Item registration (design 6.2, 7): each Item reports its value and own `disabled` from a\n  // layout effect. The ref is current for the residual-path reads; the state, set only when the\n  // summary changes, is what render uses. `null` until an Item registered, so the server render\n  // and the hydration render (which cannot know) agree.\n  const itemRegistry = useRef<ItemRegistry>(new Map());\n  const [items, setItems] = useState<ReadonlyMap<string, boolean> | null>(null);\n  const registerItem = useCallback((value: string, disabled: boolean) => {\n    const publish = () => {\n      const next = summarize(itemRegistry.current);\n      setItems((prev) => (prev !== null && mapsEqual(prev, next) ? prev : next));\n    };\n    const token = {};\n    itemRegistry.current.set(token, { value, disabled });\n    publish();\n    return () => {\n      itemRegistry.current.delete(token);\n      publish();\n    };\n  }, []);\n  const disabledItems = useMemo(() => disabledOf(items), [items]);\n\n  const controlledSet = useMemo(() => (value === undefined ? undefined : toSet(value)), [value]);\n  const defaultSet = useMemo(\n    () => (defaultValue === undefined ? undefined : toSet(defaultValue)),\n    [defaultValue],\n  );\n\n  /** Sorts by the Items' current document order. Reads the DOM: handlers and effects only. */\n  const sortByDocument = (values: Iterable<string>): string[] =>\n    sortByOrder(\n      values,\n      readItems(fieldsetRef.current, name).map((item) => item.value),\n    );\n\n  const { optimistic, committed, pending, dispatch, latestInFlight } = useControllableAction<\n    ValueSet,\n    CheckboxGroupValueChangeDetails\n  >({\n    controlled: controlledSet,\n    defaultValue: defaultSet,\n    initialValue: EMPTY,\n    action:\n      valueChangeAction && ((next, details) => valueChangeAction(sortByDocument(next), details)),\n    transitionTypes: (_next, _prev, details) => [\n      ...transitionTypes(\"checkbox-group\"),\n      ...(details.added.length > 0 ? [\"fsui-checkbox-group-check\"] : []),\n      ...(details.removed.length > 0 ? [\"fsui-checkbox-group-uncheck\"] : []),\n    ],\n    reducer: (prev, _next, details) => reduce(prev, details),\n    warn: { component: \"CheckboxGroup.Root\", prop: \"value\" },\n  });\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: an empty group is\n  // the HTML default (design 3.1).\n\n  /** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */\n  const base = (): ValueSet => {\n    const inFlight = latestInFlight();\n    return inFlight === null ? optimistic : inFlight.next;\n  };\n\n  /** Dispatches `patch` on top of `from`, with the details of design 3.1. */\n  const dispatchPatch = (\n    from: ValueSet,\n    patch: CheckboxGroupPatch,\n    reason: ChangeReason,\n    event: Event | undefined,\n  ): void => {\n    const details = createActionDetails(event, {\n      reason,\n      added: sortByDocument(patch.added),\n      removed: sortByDocument(patch.removed),\n    });\n    dispatch(reduce(from, details), details);\n  };\n\n  /**\n   * The group as the DOM shows it (`checked`) or as a form reset leaves it (`defaultChecked`),\n   * laid over `base()` so that values with no Item are kept (they have no DOM to read).\n   */\n  const readDom = (prop: \"checked\" | \"defaultChecked\"): Map<string, boolean> =>\n    new Map(readItems(fieldsetRef.current, name).map((item) => [item.value, item[prop]]));\n  const readGroup = (\n    prop: \"checked\" | \"defaultChecked\",\n    from: ValueSet,\n    dom: ReadonlyMap<string, boolean> = readDom(prop),\n  ): Set<string> => {\n    const next = new Set(from);\n    for (const [v, isChecked] of dom) {\n      if (isChecked) next.add(v);\n      else next.delete(v);\n    }\n    return next;\n  };\n\n  /**\n   * The Root's own mount reconciliation ran: later member mounts are \"late\" (8.3). Set after the\n   * adapter's mount effect; reset by the cleanup (StrictMode included).\n   */\n  const rootMounted = useRef(false);\n  /**\n   * Late mounts: the members' `checked` read in the first late member's mount layout effect. The\n   * adapter reads the group in a microtask, but the Items' registration re-renders the group\n   * right after the layout effects, and that re-render re-applies each Item's `checked`, erasing a\n   * click made before the Item hydrated. Every member of the commit is in the DOM by then.\n   */\n  const lateSnapshot = useRef<Map<string, boolean> | null>(null);\n\n  // The residual browser paths (design section 8): one dispatch per group, from here. Items and\n  // Parents that mount after the Root report through `onItemMounted`.\n  const { onItemMounted: onMemberMounted } = useNativeGroupReconciliation<ValueSet>({\n    element: fieldsetRef,\n    readCurrent: () => {\n      const next = readGroup(\"checked\", base(), lateSnapshot.current ?? undefined);\n      lateSnapshot.current = null;\n      // A Parent clicked before hydration means what its click means: check / uncheck all of its\n      // values whose Items are enabled (8.1, 6.2). Read from the registry ref: the Items of this\n      // commit registered before this runs, and render has not caught up yet.\n      const disabledNow = disabledOf(summarize(itemRegistry.current));\n      for (const report of parentReports.current) {\n        for (const v of enabledValues(report.values, disabledNow)) {\n          if (report.checked) next.add(v);\n          else next.delete(v);\n        }\n      }\n      parentReports.current = [];\n      return next;\n    },\n    // Uncontrolled: start from `defaultValue`, so values with no Item return to it too (they have\n    // no `defaultChecked` to read). Controlled: from `base()`, as for the mount read; the parent\n    // decides.\n    readDefault: () =>\n      readGroup(\"defaultChecked\", value === undefined ? (defaultSet ?? EMPTY) : base()),\n    base,\n    equals: setsEqual,\n    onPlatformChange: (next, event) => {\n      const from = base();\n      const added = [...next].filter((v) => !from.has(v));\n      const removed = [...from].filter((v) => !next.has(v));\n      dispatchPatch(from, { added, removed }, \"platform\", event);\n    },\n  });\n\n  useLayoutEffect(() => {\n    rootMounted.current = true;\n    return () => {\n      rootMounted.current = false;\n    };\n  }, []);\n  const onItemMounted = (el: HTMLInputElement | null) => {\n    const late = rootMounted.current;\n    if (late && lateSnapshot.current === null) lateSnapshot.current = readDom(\"checked\");\n    onMemberMounted(el);\n    // A snapshot the adapter did not consume (it queues one read per commit, before this).\n    if (late) {\n      queueMicrotask(() => {\n        lateSnapshot.current = null;\n      });\n    }\n  };\n\n  // The state's `value` is in document order. Render cannot read the DOM, so the Items' order is\n  // kept in state, refreshed after a commit only when the rendered `value` would change (a value\n  // given out of document order, Items reordered or added). The first render, and the server,\n  // use the value's own order.\n  const [itemOrder, setItemOrder] = useState<readonly string[]>([]);\n  const renderedValue = sortByOrder(optimistic, itemOrder);\n  // After every commit of the Root (a deps-less layout effect runs only when the Root itself\n  // committed: Items moved by a child that re-renders alone are picked up at the Root's next\n  // render). The comparison ends the chain: the re-render it causes renders exactly the value\n  // just compared against.\n  const syncItemOrder = useEffectEvent(() => {\n    const order = readItems(fieldsetRef.current, name).map((item) => item.value);\n    if (!arraysEqual(sortByOrder(optimistic, order), renderedValue)) setItemOrder(order);\n\n    // Dev only: Item values must be unique within the Root (design 14.6).\n    if (!isDev || warnedDuplicate.current) return;\n    const duplicate = order.find((v, i) => order.indexOf(v) !== i);\n    if (duplicate !== undefined) {\n      warnedDuplicate.current = true;\n      console.error(\n        `CheckboxGroup.Item: two Items share the value \"${duplicate}\" in one ` +\n          `CheckboxGroup.Root. Item values must be unique; both boxes follow the same value.`,\n      );\n    }\n  });\n  useLayoutEffect(() => {\n    syncItemOrder();\n  });\n\n  const libraryRef = useCallback((el: HTMLFieldSetElement) => {\n    fieldsetRef.current = el;\n    if (isDev && !warnedElement.current && el.tagName !== \"FIELDSET\") {\n      warnedElement.current = true;\n      console.error(\n        `CheckboxGroup.Root: expected to render a <fieldset> element but got ` +\n          `<${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled ` +\n          `inheritance, form reset) need a real <fieldset>.`,\n      );\n    }\n    return () => {\n      fieldsetRef.current = null;\n    };\n  }, []);\n\n  const context: CheckboxGroupContextValue = {\n    name,\n    form,\n    required:\n      required &&\n      (items === null\n        ? optimistic.size === 0\n        : ![...optimistic].some((v) => items.get(v) === true)),\n    disabledItems,\n    registerItem,\n    optimistic,\n    committed,\n    pending,\n    disabled,\n    defaultValue: value === undefined ? (defaultSet ?? EMPTY) : undefined,\n    onItemMounted,\n    reportParent: (values, checked) => {\n      parentReports.current.push({ values, checked });\n    },\n    value: renderedValue,\n    sortByDocument,\n    toggle: (item, checked, event) => {\n      // No-op rule against the optimistic set (conventions 2.3 item 8).\n      if (optimistic.has(item) === checked) return;\n      const patch = checked ? { added: [item], removed: [] } : { added: [], removed: [item] };\n      dispatchPatch(optimistic, patch, \"activate\", event);\n    },\n    apply: (patch, event) => {\n      const added = patch.added.filter((v) => !optimistic.has(v));\n      const removed = patch.removed.filter((v) => optimistic.has(v));\n      if (added.length === 0 && removed.length === 0) return;\n      dispatchPatch(optimistic, { added, removed }, \"activate\", event);\n    },\n  };\n\n  const state: CheckboxGroupRootState = {\n    value: renderedValue,\n    pending,\n    disabled,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"fieldset\">, CheckboxGroupRootState>({\n    defaultElement: \"fieldset\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      disabled,\n      form,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: libraryRef,\n  });\n\n  return <CheckboxGroupContext value={context}>{element}</CheckboxGroupContext>;\n}\n\nCheckboxGroupRoot.displayName = \"CheckboxGroupRoot\";\n"],"mappings":"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"}

package/dist/checkbox-group/index.d.mts

@@ -0,0 +1,23 @@
+import "../internal/platform-attributes.mjs";
+import { CheckboxGroupItem, CheckboxGroupItemProps, CheckboxGroupItemState } from "./checkbox-group-item.mjs";
+import { CheckboxGroupRoot, CheckboxGroupRootProps, CheckboxGroupRootState, CheckboxGroupValueChangeDetails } from "./checkbox-group-root.mjs";
+import { CheckboxGroupLabel, CheckboxGroupLabelProps } from "./checkbox-group-label.mjs";
+import { CheckboxGroupParent, CheckboxGroupParentProps, CheckboxGroupParentState } from "./checkbox-group-parent.mjs";
+//#region src/checkbox-group/index.d.ts
+/**
+ * CheckboxGroup (WAI-ARIA APG Checkbox pattern, native HTML variant): `Root` (`fieldset`, role
+ * `group`), an optional `Label` (`legend`, first child), one `Item` (`input[type=checkbox]`) per
+ * value, and optional `Parent` boxes (the mixed-state "select all" over a subset of values). The
+ * value is a set of strings; the keyboard is entirely native. Each box's DOM `checked` is
+ * optimistic; the Root and the boxes whose state is changing carry `data-pending` while
+ * `valueChangeAction` is in flight.
+ */
+export declare const CheckboxGroup: {
+  readonly Root: typeof CheckboxGroupRoot;
+  readonly Label: typeof CheckboxGroupLabel;
+  readonly Item: typeof CheckboxGroupItem;
+  readonly Parent: typeof CheckboxGroupParent;
+};
+//#endregion
+export type { CheckboxGroupItemProps, CheckboxGroupItemState, CheckboxGroupLabelProps, CheckboxGroupParentProps, CheckboxGroupParentState, CheckboxGroupRootProps, CheckboxGroupRootState, CheckboxGroupValueChangeDetails };
+//# sourceMappingURL=index.d.mts.map

package/dist/checkbox-group/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/checkbox-group/index.ts"],"mappings":";;;;;;;;;;;;;;qBAgBa;WACX,aAAI;WACJ,cAAK;WACL,aAAI;WACJ,eAAM"}

package/dist/checkbox-group/index.mjs

@@ -0,0 +1,23 @@
+import { CheckboxGroupItem } from "./checkbox-group-item.mjs";
+import { CheckboxGroupLabel } from "./checkbox-group-label.mjs";
+import { CheckboxGroupParent } from "./checkbox-group-parent.mjs";
+import { CheckboxGroupRoot } from "./checkbox-group-root.mjs";
+//#region src/checkbox-group/index.ts
+/**
+* CheckboxGroup (WAI-ARIA APG Checkbox pattern, native HTML variant): `Root` (`fieldset`, role
+* `group`), an optional `Label` (`legend`, first child), one `Item` (`input[type=checkbox]`) per
+* value, and optional `Parent` boxes (the mixed-state "select all" over a subset of values). The
+* value is a set of strings; the keyboard is entirely native. Each box's DOM `checked` is
+* optimistic; the Root and the boxes whose state is changing carry `data-pending` while
+* `valueChangeAction` is in flight.
+*/
+const CheckboxGroup = {
+	Root: CheckboxGroupRoot,
+	Label: CheckboxGroupLabel,
+	Item: CheckboxGroupItem,
+	Parent: CheckboxGroupParent
+};
+//#endregion
+export { CheckboxGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/checkbox-group/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/checkbox-group/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { CheckboxGroupItem } from \"./checkbox-group-item.js\";\nimport { CheckboxGroupLabel } from \"./checkbox-group-label.js\";\nimport { CheckboxGroupParent } from \"./checkbox-group-parent.js\";\nimport { CheckboxGroupRoot } from \"./checkbox-group-root.js\";\n\n/**\n * CheckboxGroup (WAI-ARIA APG Checkbox pattern, native HTML variant): `Root` (`fieldset`, role\n * `group`), an optional `Label` (`legend`, first child), one `Item` (`input[type=checkbox]`) per\n * value, and optional `Parent` boxes (the mixed-state \"select all\" over a subset of values). The\n * value is a set of strings; the keyboard is entirely native. Each box's DOM `checked` is\n * optimistic; the Root and the boxes whose state is changing carry `data-pending` while\n * `valueChangeAction` is in flight.\n */\nexport const CheckboxGroup = {\n  Root: CheckboxGroupRoot,\n  Label: CheckboxGroupLabel,\n  Item: CheckboxGroupItem,\n  Parent: CheckboxGroupParent,\n} as const;\n\nexport type {\n  CheckboxGroupRootProps,\n  CheckboxGroupRootState,\n  CheckboxGroupValueChangeDetails,\n} from \"./checkbox-group-root.js\";\nexport type { CheckboxGroupLabelProps } from \"./checkbox-group-label.js\";\nexport type { CheckboxGroupItemProps, CheckboxGroupItemState } from \"./checkbox-group-item.js\";\nexport type {\n  CheckboxGroupParentProps,\n  CheckboxGroupParentState,\n} from \"./checkbox-group-parent.js\";\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,gBAAgB;CAC3B,MAAM;CACN,OAAO;CACP,MAAM;CACN,QAAQ;AACV"}

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

@@ -1 +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"}
+{"version":3,"file":"dialog-close.d.mts","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"mappings":";;;iBAWiB;;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

@@ -2,8 +2,9 @@
 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, useTransition } from "react";
+import { useCallback } from "react";
 //#region src/dialog/dialog-close.tsx
 const isDev = process.env.NODE_ENV !== "production";
 /**
@@ -18,7 +19,7 @@ const isDev = process.env.NODE_ENV !== "production";
 */
 function DialogClose({ action, value, disabled = false, className, style, children, render, ...rest }) {
 	const ctx = useDialogContext("Dialog.Close");
-	const [pending, startOwnTransition] = useTransition();
+	const { pending, run } = useActionTrigger(ctx.openGeneration);
 	const { ids, dialogRef, recordCloseIntent } = ctx;
 	const hasAction = action !== void 0;
 	const state = {
@@ -36,8 +37,7 @@ function DialogClose({ action, value, disabled = false, className, style, childr
 		const native = event.nativeEvent;
 		const returnValue = value ?? "";
 		const details = createActionDetails(native, { returnValue });
-		startOwnTransition(async () => {
-			await action(details);
+		run(() => action(details), () => {
 			const dialog = dialogRef.current;
 			if (dialog === null || !dialog.open) return;
 			recordCloseIntent({

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-close.mjs","names":[],"sources":["../../src/dialog/dialog-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, 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"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-context.mjs","names":[],"sources":["../../src/dialog/dialog-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { ChangeReason } from \"../internal/types.js\";\n\n/**\n * \"static\": JS-free mode, the browser owns open and close through Invoker Commands. \"library\":\n * open is library-owned (a transition keyed on committed state), close is browser-owned and\n * notified (design section 2).\n */\nexport type DialogMode = \"static\" | \"library\";\n\n/**\n * What caused the next `close` event, recorded just before the close happens (design 2.3). The\n * `close` event carries no source; without an intent the close is a `\"dismiss\"`.\n */\nexport interface DialogCloseIntent {\n  readonly reason: ChangeReason;\n  readonly event: Event | undefined;\n}\n\nexport interface DialogContextValue {\n  readonly mode: DialogMode;\n  /** `useId`-based ids: the `<dialog>`, its Title and its Description. */\n  readonly ids: { readonly dialog: string; readonly title: string; readonly description: string };\n  readonly modal: boolean;\n  /** Committed open state (library mode); `false` in static mode. */\n  readonly committed: boolean;\n  /** Optimistic open state (library mode); `false` in static mode. */\n  readonly optimistic: boolean;\n  /** The Root's transition is pending (library mode). */\n  readonly pending: boolean;\n  /**\n   * Open the dialog through the Root's transition (library mode): a Trigger click, a foreign\n   * `show-modal` command, or mount reconciliation. A no-op when the user already intends `true`.\n   */\n  readonly requestOpen: (event: Event | undefined, reason: ChangeReason) => void;\n  /**\n   * The dialog closed natively: dispatch the `false` notification unless the user (or the\n   * library's own echo) already intends `false`.\n   */\n  readonly notifyClosed: (event: Event, reason: ChangeReason, returnValue: string) => void;\n  /** From `useControllableAction`: the latest in-flight intent, or `null`. */\n  readonly latestInFlight: () => { readonly next: boolean } | null;\n  /** The registered Trigger element, for the focus-return fallback (design 6.2). */\n  readonly triggerRef: RefObject<HTMLElement | null>;\n  /** The `<dialog>`, set by the Popup's ref; how Close and Form reach `close(value)`. */\n  readonly dialogRef: RefObject<HTMLDialogElement | null>;\n  /** Record what causes the next close. Cleared after a task if the dialog did not close. */\n  readonly recordCloseIntent: (intent: DialogCloseIntent | undefined) => void;\n  /** Read and clear the recorded intent (the Popup's `close` listener). */\n  readonly takeCloseIntent: () => DialogCloseIntent | undefined;\n}\n\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"}
+{"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-popup.mjs

@@ -198,6 +198,7 @@ function DialogPopup({ keepMounted, initialFocus, lightDismiss = false, experime
 		if (event.target !== dialogRef.current) return;
 		const newState = event.newState;
 		awaitingClose.current = newState === "closed";
+		if (newState === "open") ctx.nextOpenGeneration();
 	});
 	useEffect(() => {
 		if (dialog === null) return;