@funstack/ui 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/internal/use-action-trigger.mjs

@@ -7,19 +7,23 @@ function report(error) {
 	else console.error(error);
 }
 /**
-* The transition of a pure-trigger part: an `action` with no state of its own (`Dialog.Close`,
-* `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection surfacing as
-* `useControllableAction`: React keeps only the newest thenable per `useTransition`, so the
-* rejection of a run that a later run superseded would be dropped. The hook catches it and throws
-* it from render, so it reaches the same boundary as the latest run's rejection does.
+* The transition of a pure-trigger part: an `action` with no state of its own (`Button`,
+* `Dialog.Close`, `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection
+* surfacing as `useControllableAction`: React keeps only the newest thenable per `useTransition`,
+* so the rejection of a run that a later run superseded would be dropped. The hook catches it and
+* throws it from render, so it reaches the same boundary as the latest run's rejection does.
+*
+* The argument is the options object, or (the older positional form) `openGeneration` alone.
 */
-function useActionTrigger(openGeneration) {
+function useActionTrigger(options) {
+	const { openGeneration, ignoreWhilePending = false } = typeof options === "function" ? { openGeneration: options } : options ?? {};
 	const [supersededError, setSupersededError] = useState(null);
 	const hasSupersededError = useRef(false);
 	if (supersededError !== null) throw supersededError.error;
 	const [pending, startOwnTransition] = useTransition();
 	const latest = useRef(0);
 	const mounted = useRef(false);
+	const inFlight = useRef(0);
 	useEffect(() => {
 		mounted.current = true;
 		return () => {
@@ -27,12 +31,15 @@ function useActionTrigger(openGeneration) {
 		};
 	}, []);
 	const run = (work, then) => {
+		if (ignoreWhilePending && inFlight.current > 0) return false;
+		inFlight.current++;
 		const id = ++latest.current;
 		const generation = openGeneration?.();
 		startOwnTransition(async () => {
 			try {
 				await work();
 			} catch (error) {
+				inFlight.current--;
 				if (id === latest.current) throw error;
 				if (!mounted.current) return;
 				if (hasSupersededError.current) {
@@ -43,9 +50,11 @@ function useActionTrigger(openGeneration) {
 				setSupersededError({ error });
 				return;
 			}
+			inFlight.current--;
 			if (openGeneration !== void 0 && openGeneration() !== generation) return;
 			then?.();
 		});
+		return true;
 	};
 	return {
 		pending,

package/dist/internal/use-action-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-action-trigger.mjs","names":[],"sources":["../../src/internal/use-action-trigger.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState, useTransition } from \"react\";\n\nexport interface ActionTrigger {\n  /** A run started through this hook is in flight (the part's own transition). */\n  readonly pending: boolean;\n  /**\n   * Runs `work` inside the part's own transition and, once it resolves, `then` (still inside the\n   * transition: a Close part's close, a menu item's close). A rejection skips `then` and reaches\n   * the nearest Error Boundary above the part, also when a later run superseded this one. With\n   * `openGeneration` (the hook's argument), `then` is skipped when a newer open of the overlay\n   * started after the run began.\n   */\n  readonly run: (work: () => unknown, then?: () => void) => void;\n}\n\n/** Reports an error that cannot reach a boundary (conventions 2.4: never swallow). */\nfunction report(error: unknown): void {\n  if (typeof reportError === \"function\") reportError(error);\n  else console.error(error);\n}\n\n/**\n * The transition of a pure-trigger part: an `action` with no state of its own (`Dialog.Close`,\n * `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection surfacing as\n * `useControllableAction`: React keeps only the newest thenable per `useTransition`, so the\n * rejection of a run that a later run superseded would be dropped. The hook catches it and throws\n * it from render, so it reaches the same boundary as the latest run's rejection does.\n */\nexport function useActionTrigger(openGeneration?: () => number): ActionTrigger {\n  // Thrown before `useTransition` on purpose (see use-controllable-action.ts): in the retry of\n  // an errored render `useTransition` would suspend on the newer run's pending thenable.\n  const [supersededError, setSupersededError] = useState<{ readonly error: unknown } | null>(null);\n  const hasSupersededError = useRef(false);\n  if (supersededError !== null) throw supersededError.error;\n\n  const [pending, startOwnTransition] = useTransition();\n  const latest = useRef(0);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const run = (work: () => unknown, then?: () => void): void => {\n    const id = ++latest.current;\n    // The open this run belongs to (design/components/popover.md, review M2 / PO rule): if the\n    // user dismisses and re-opens while the action runs, its close must not close the new open.\n    const generation = openGeneration?.();\n    startOwnTransition(async () => {\n      try {\n        await work();\n      } catch (error) {\n        // The latest run's rejection takes React's own route to the boundary.\n        if (id === latest.current) throw error;\n        if (!mounted.current) return;\n        if (hasSupersededError.current) {\n          report(error);\n          return;\n        }\n        hasSupersededError.current = true;\n        // After an await, outside the transition: urgent, so the part re-renders and throws.\n        setSupersededError({ error });\n        return;\n      }\n      if (openGeneration !== undefined && openGeneration() !== generation) return;\n      then?.();\n    });\n  };\n\n  return { pending, run };\n}\n"],"mappings":";;;;AAiBA,SAAS,OAAO,OAAsB;CACpC,IAAI,OAAO,gBAAgB,YAAY,YAAY,KAAK;MACnD,QAAQ,MAAM,KAAK;AAC1B;;;;;;;;AASA,SAAgB,iBAAiB,gBAA8C;CAG7E,MAAM,CAAC,iBAAiB,sBAAsB,SAA6C,IAAI;CAC/F,MAAM,qBAAqB,OAAO,KAAK;CACvC,IAAI,oBAAoB,MAAM,MAAM,gBAAgB;CAEpD,MAAM,CAAC,SAAS,sBAAsB,cAAc;CACpD,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,UAAU,OAAO,KAAK;CAE5B,gBAAgB;EACd,QAAQ,UAAU;EAClB,aAAa;GACX,QAAQ,UAAU;EACpB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,MAAqB,SAA4B;EAC5D,MAAM,KAAK,EAAE,OAAO;EAGpB,MAAM,aAAa,iBAAiB;EACpC,mBAAmB,YAAY;GAC7B,IAAI;IACF,MAAM,KAAK;GACb,SAAS,OAAO;IAEd,IAAI,OAAO,OAAO,SAAS,MAAM;IACjC,IAAI,CAAC,QAAQ,SAAS;IACtB,IAAI,mBAAmB,SAAS;KAC9B,OAAO,KAAK;KACZ;IACF;IACA,mBAAmB,UAAU;IAE7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B;GACF;GACA,IAAI,mBAAmB,KAAA,KAAa,eAAe,MAAM,YAAY;GACrE,OAAO;EACT,CAAC;CACH;CAEA,OAAO;EAAE;EAAS;CAAI;AACxB"}
+{"version":3,"file":"use-action-trigger.mjs","names":[],"sources":["../../src/internal/use-action-trigger.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState, useTransition } from \"react\";\n\nexport interface ActionTriggerOptions {\n  /**\n   * Open generation of the overlay a `then` belongs to: `then` is skipped when a newer open of\n   * the overlay started after the run began.\n   */\n  readonly openGeneration?: (() => number) | undefined;\n  /**\n   * Ignore `run` while a run is in flight (conventions 2.5): `run` returns `false` and starts\n   * nothing. In flight means the hook's synchronous in-flight counter is non-zero (it also sees\n   * two activations in one task, before React re-rendered); the last render's `pending` is not\n   * consulted, so a click in a settled-but-held commit window runs. Default `false`; on for\n   * `Button` (#79) until #81 makes it the only behaviour.\n   */\n  readonly ignoreWhilePending?: boolean | undefined;\n}\n\nexport interface ActionTrigger {\n  /** A run started through this hook is in flight (the part's own transition). */\n  readonly pending: boolean;\n  /**\n   * Runs `work` inside the part's own transition and, once it resolves, `then` (still inside the\n   * transition: a Close part's close, a menu item's close). A rejection skips `then` and reaches\n   * the nearest Error Boundary above the part, also when a later run superseded this one. With\n   * `openGeneration`, `then` is skipped when a newer open of the overlay started after the run\n   * began. Returns `false` when the run was ignored (`ignoreWhilePending`), so the part can\n   * `preventDefault()` the activation, and `true` otherwise.\n   */\n  readonly run: (work: () => unknown, then?: () => void) => boolean;\n}\n\n/** Reports an error that cannot reach a boundary (conventions 2.4: never swallow). */\nfunction report(error: unknown): void {\n  if (typeof reportError === \"function\") reportError(error);\n  else console.error(error);\n}\n\n/**\n * The transition of a pure-trigger part: an `action` with no state of its own (`Button`,\n * `Dialog.Close`, `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection\n * surfacing as `useControllableAction`: React keeps only the newest thenable per `useTransition`,\n * so the rejection of a run that a later run superseded would be dropped. The hook catches it and\n * throws it from render, so it reaches the same boundary as the latest run's rejection does.\n *\n * The argument is the options object, or (the older positional form) `openGeneration` alone.\n */\nexport function useActionTrigger(options?: ActionTriggerOptions | (() => number)): ActionTrigger {\n  const { openGeneration, ignoreWhilePending = false }: ActionTriggerOptions =\n    typeof options === \"function\" ? { openGeneration: options } : (options ?? {});\n\n  // Thrown before `useTransition` on purpose (see use-controllable-action.ts): in the retry of\n  // an errored render `useTransition` would suspend on the newer run's pending thenable.\n  const [supersededError, setSupersededError] = useState<{ readonly error: unknown } | null>(null);\n  const hasSupersededError = useRef(false);\n  if (supersededError !== null) throw supersededError.error;\n\n  const [pending, startOwnTransition] = useTransition();\n  const latest = useRef(0);\n  const mounted = useRef(false);\n  // Runs whose work has not settled yet. Updated synchronously, so a second activation in the\n  // same task (React's `pending` is still the stale render value) is seen (conventions 2.5).\n  const inFlight = useRef(0);\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const run = (work: () => unknown, then?: () => void): boolean => {\n    // The own counter only, not the rendered `pending` (design/components/button.md 5.2): after\n    // the work settled, a commit held by entanglement must not drop a new activation.\n    if (ignoreWhilePending && inFlight.current > 0) return false;\n    inFlight.current++;\n    const id = ++latest.current;\n    // The open this run belongs to (design/components/popover.md, review M2 / PO rule): if the\n    // user dismisses and re-opens while the action runs, its close must not close the new open.\n    const generation = openGeneration?.();\n    startOwnTransition(async () => {\n      try {\n        await work();\n      } catch (error) {\n        inFlight.current--;\n        // The latest run's rejection takes React's own route to the boundary.\n        if (id === latest.current) throw error;\n        if (!mounted.current) return;\n        if (hasSupersededError.current) {\n          report(error);\n          return;\n        }\n        hasSupersededError.current = true;\n        // After an await, outside the transition: urgent, so the part re-renders and throws.\n        setSupersededError({ error });\n        return;\n      }\n      inFlight.current--;\n      if (openGeneration !== undefined && openGeneration() !== generation) return;\n      then?.();\n    });\n    return true;\n  };\n\n  return { pending, run };\n}\n"],"mappings":";;;;AAkCA,SAAS,OAAO,OAAsB;CACpC,IAAI,OAAO,gBAAgB,YAAY,YAAY,KAAK;MACnD,QAAQ,MAAM,KAAK;AAC1B;;;;;;;;;;AAWA,SAAgB,iBAAiB,SAAgE;CAC/F,MAAM,EAAE,gBAAgB,qBAAqB,UAC3C,OAAO,YAAY,aAAa,EAAE,gBAAgB,QAAQ,IAAK,WAAW,CAAC;CAI7E,MAAM,CAAC,iBAAiB,sBAAsB,SAA6C,IAAI;CAC/F,MAAM,qBAAqB,OAAO,KAAK;CACvC,IAAI,oBAAoB,MAAM,MAAM,gBAAgB;CAEpD,MAAM,CAAC,SAAS,sBAAsB,cAAc;CACpD,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,UAAU,OAAO,KAAK;CAG5B,MAAM,WAAW,OAAO,CAAC;CAEzB,gBAAgB;EACd,QAAQ,UAAU;EAClB,aAAa;GACX,QAAQ,UAAU;EACpB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,MAAqB,SAA+B;EAG/D,IAAI,sBAAsB,SAAS,UAAU,GAAG,OAAO;EACvD,SAAS;EACT,MAAM,KAAK,EAAE,OAAO;EAGpB,MAAM,aAAa,iBAAiB;EACpC,mBAAmB,YAAY;GAC7B,IAAI;IACF,MAAM,KAAK;GACb,SAAS,OAAO;IACd,SAAS;IAET,IAAI,OAAO,OAAO,SAAS,MAAM;IACjC,IAAI,CAAC,QAAQ,SAAS;IACtB,IAAI,mBAAmB,SAAS;KAC9B,OAAO,KAAK;KACZ;IACF;IACA,mBAAmB,UAAU;IAE7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B;GACF;GACA,SAAS;GACT,IAAI,mBAAmB,KAAA,KAAa,eAAe,MAAM,YAAY;GACrE,OAAO;EACT,CAAC;EACD,OAAO;CACT;CAEA,OAAO;EAAE;EAAS;CAAI;AACxB"}

package/dist/internal/use-field-control.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { dataAttr } from "./data-attr.mjs";
-import { mergeRefs } from "./merge-props.mjs";
 import { useDevWarning } from "./use-dev-warning.mjs";
+import { mergeRefs } from "./merge-props.mjs";
 import { FieldContext } from "./field-context.mjs";
 import { use, useCallback, useLayoutEffect, useMemo, useRef } from "react";
 //#region src/internal/use-field-control.ts

package/dist/internal/use-popover-root.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "./action-details.mjs";
+import { useDevWarning } from "./use-dev-warning.mjs";
 import { transitionTypes } from "./transition-types.mjs";
 import { useLatest } from "./use-latest.mjs";
 import { useControllableAction } from "./use-controllable-action.mjs";
-import { useDevWarning } from "./use-dev-warning.mjs";
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 //#region src/internal/use-popover-root.ts
 function isPopoverOpen(element) {

package/dist/internal/use-render.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { mergeRefs } from "./merge-props.mjs";
-import { renderElement, rendersButton, resolveStateValue } from "./render-element.mjs";
+import { isHostButton, renderElement, rendersButton, resolveStateValue } from "./render-element.mjs";
 import { isValidElement, useMemo } from "react";
 //#region src/internal/use-render.tsx
 /**
@@ -23,6 +23,6 @@ function useRender(options) {
 	});
 }
 //#endregion
-export { rendersButton, resolveStateValue, useRender };
+export { isHostButton, rendersButton, resolveStateValue, useRender };
 
 //# sourceMappingURL=use-render.mjs.map

package/dist/internal/use-render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.mjs","names":[],"sources":["../../src/internal/use-render.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useMemo } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { mergeRefs } from \"./merge-props.js\";\nimport { renderElement } from \"./render-element.js\";\nimport type { ElementLikeProps, RenderElementOptions } from \"./render-element.js\";\n\nexport { rendersButton, resolveStateValue } from \"./render-element.js\";\nexport type { DataAttributes } from \"./render-element.js\";\n\nexport interface UseRenderOptions<Props extends ElementLikeProps, State> extends Omit<\n  RenderElementOptions<Props, State>,\n  \"ref\"\n> {\n  /** The library's own ref, if the part needs the DOM node. */\n  ref?: Ref<unknown> | undefined;\n}\n\n/**\n * Resolves `render` and the function-form `className` / `style` / `children` of a part against\n * its state and produces the element (conventions 1.2, 1.3, 1.4). The pure work is\n * `renderElement` (`render-element.ts`); this hook adds the memoised ref merge.\n */\nexport function useRender<Props extends ElementLikeProps, State>(\n  options: UseRenderOptions<Props, State>,\n): ReactNode {\n  const { render, props, ref } = options;\n\n  const consumerRef = (props as ElementLikeProps).ref;\n  const elementRef = isValidElement<ElementLikeProps>(render) ? render.props.ref : undefined;\n  // Memoised so that the callback ref keeps its identity across renders and React does not\n  // detach and re-attach the node every time.\n  const mergedRef = useMemo(\n    () => mergeRefs(ref, consumerRef, elementRef),\n    [ref, consumerRef, elementRef],\n  );\n\n  return renderElement<Props, State>({ ...options, ref: mergedRef });\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,UACd,SACW;CACX,MAAM,EAAE,QAAQ,OAAO,QAAQ;CAE/B,MAAM,cAAe,MAA2B;CAChD,MAAM,aAAa,eAAiC,MAAM,IAAI,OAAO,MAAM,MAAM,KAAA;CAGjF,MAAM,YAAY,cACV,UAAU,KAAK,aAAa,UAAU,GAC5C;EAAC;EAAK;EAAa;CAAU,CAC/B;CAEA,OAAO,cAA4B;EAAE,GAAG;EAAS,KAAK;CAAU,CAAC;AACnE"}
+{"version":3,"file":"use-render.mjs","names":[],"sources":["../../src/internal/use-render.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useMemo } from \"react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { mergeRefs } from \"./merge-props.js\";\nimport { renderElement } from \"./render-element.js\";\nimport type { ElementLikeProps, RenderElementOptions } from \"./render-element.js\";\n\nexport { isHostButton, rendersButton, resolveStateValue } from \"./render-element.js\";\nexport type { DataAttributes } from \"./render-element.js\";\n\nexport interface UseRenderOptions<Props extends ElementLikeProps, State> extends Omit<\n  RenderElementOptions<Props, State>,\n  \"ref\"\n> {\n  /** The library's own ref, if the part needs the DOM node. */\n  ref?: Ref<unknown> | undefined;\n}\n\n/**\n * Resolves `render` and the function-form `className` / `style` / `children` of a part against\n * its state and produces the element (conventions 1.2, 1.3, 1.4). The pure work is\n * `renderElement` (`render-element.ts`); this hook adds the memoised ref merge.\n */\nexport function useRender<Props extends ElementLikeProps, State>(\n  options: UseRenderOptions<Props, State>,\n): ReactNode {\n  const { render, props, ref } = options;\n\n  const consumerRef = (props as ElementLikeProps).ref;\n  const elementRef = isValidElement<ElementLikeProps>(render) ? render.props.ref : undefined;\n  // Memoised so that the callback ref keeps its identity across renders and React does not\n  // detach and re-attach the node every time.\n  const mergedRef = useMemo(\n    () => mergeRefs(ref, consumerRef, elementRef),\n    [ref, consumerRef, elementRef],\n  );\n\n  return renderElement<Props, State>({ ...options, ref: mergedRef });\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,UACd,SACW;CACX,MAAM,EAAE,QAAQ,OAAO,QAAQ;CAE/B,MAAM,cAAe,MAA2B;CAChD,MAAM,aAAa,eAAiC,MAAM,IAAI,OAAO,MAAM,MAAM,KAAA;CAGjF,MAAM,YAAY,cACV,UAAU,KAAK,aAAa,UAAU,GAC5C;EAAC;EAAK;EAAa;CAAU,CAC/B;CAEA,OAAO,cAA4B;EAAE,GAAG;EAAS,KAAK;CAAU,CAAC;AACnE"}

package/dist/menu/menu-checkbox-item.mjs

@@ -1,10 +1,10 @@
 "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 { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { closeStackLater, useMenuContext } from "./menu-context.mjs";
 import { useMenuItem } from "./use-menu-item.mjs";
 import { useRef } from "react";

package/dist/menu/menu-group.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { MenuGroupContext } from "./menu-context.mjs";
 import { use, useId, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/menu/menu-item.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { useMenuContext } from "./menu-context.mjs";
 import { useMenuItem } from "./use-menu-item.mjs";
 //#region src/menu/menu-item.tsx

package/dist/menu/menu-popup.mjs

@@ -1,9 +1,9 @@
 "use client";
+import { ToolbarContext } from "../internal/toolbar-context.mjs";
 import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { mergeRefs } from "../internal/merge-props.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { ToolbarContext } from "../internal/toolbar-context.mjs";
 import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
 import { usePopoverPopup } from "../internal/use-popover-popup.mjs";
 import { MenuListContext, useMenuContext } from "./menu-context.mjs";

package/dist/menu/menu-radio-group.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { MenuGroupContext, MenuRadioGroupContext } from "./menu-context.mjs";
 import { useId, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/menu/menu-root.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { resolveStateValue } from "../internal/render-element.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
 import { useDelayedPair } from "../internal/use-delayed-pair.mjs";
 import { usePopoverRoot } from "../internal/use-popover-root.mjs";
 import { MenuContext, MenuListContext } from "./menu-context.mjs";

package/dist/menu/menu-submenu-trigger.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
 import { useMenuContext } from "./menu-context.mjs";
 import { hasModifier, isRtl } from "./menu-dom.mjs";

package/dist/menu/menu-trigger.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useToolbarContext } from "../internal/toolbar-context.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
 import { useMenuContext } from "./menu-context.mjs";
 import { edgeItem, focusItem, hasModifier, isRtl } from "./menu-dom.mjs";

package/dist/number-field/number-field-increment.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { isAtBound } from "./number-field-arithmetic.mjs";
 import { useNumberFieldContext } from "./number-field-context.mjs";
 import { useStepButton } from "./use-step-button.mjs";

package/dist/number-field/number-field-input.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { mergeRefs } from "../internal/merge-props.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useFieldControl, useMergedRef } from "../internal/use-field-control.mjs";
 import { useNumberFieldContext } from "./number-field-context.mjs";
 import { hiddenText } from "./number-field-root.mjs";

package/dist/number-field/number-field-root.mjs

@@ -1,13 +1,13 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { mergeTokenLists } from "../internal/merge-props.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useLatest } from "../internal/use-latest.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { mergeTokenLists } from "../internal/merge-props.mjs";
-import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { FieldContext } from "../internal/field-context.mjs";
 import { useFieldValueChange } from "../internal/use-field-control.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";

package/dist/popover/popover-close.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { usePopoverContext } from "./popover-context.mjs";
 import { useCallback } from "react";
 //#region src/popover/popover-close.tsx

package/dist/popover/popover-popup.mjs

@@ -1,9 +1,9 @@
 "use client";
+import { ToolbarContext } from "../internal/toolbar-context.mjs";
 import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { ToolbarContext } from "../internal/toolbar-context.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
 import { PopoverPopupContext, usePopoverContext } from "./popover-context.mjs";
 import { usePopoverPopup } from "../internal/use-popover-popup.mjs";

package/dist/radio-group/radio-group-item.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 import { syncPresence } from "../internal/sync-presence.mjs";

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

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { RadioGroupContext } from "./radio-group-context.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";

package/dist/select/select-root.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { SelectContext } from "./select-context.mjs";
 import { useSelectPartRef } from "./select-dom.mjs";

package/dist/slider/slider-root.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { transitionTypes } from "../internal/transition-types.mjs";
-import { useLatest } from "../internal/use-latest.mjs";
-import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { mergeTokenLists } from "../internal/merge-props.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { FieldContext } from "../internal/field-context.mjs";
 import { useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";

package/dist/slider/slider-thumb.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { mergeRefs, mergeTokenLists } from "../internal/merge-props.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useSliderContext } from "./slider-context.mjs";
 import { percent, thumbBounds } from "./slider-arithmetic.mjs";
 import { useEffectEvent, useLayoutEffect, useMemo, useRef } from "react";

package/dist/slider/slider-value.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useSliderContext } from "./slider-context.mjs";
 //#region src/slider/slider-value.tsx
 /**

package/dist/switch/switch.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 //#region src/switch/switch.tsx

package/dist/tabs/tabs-list.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { TabsListContext, useTabsContext } from "./tabs-context.mjs";
 import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/tabs/tabs-panel.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useTabsContext } from "./tabs-context.mjs";
 import { panelId, tabId } from "./tabs-ids.mjs";

package/dist/tabs/tabs-root.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { TabsContext } from "./tabs-context.mjs";
 import { tabId } from "./tabs-ids.mjs";
 import { useId, useMemo, useRef } from "react";

package/dist/tabs/tabs-tab.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton, resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { TabsListContext, useTabsContext } from "./tabs-context.mjs";

package/dist/toast/toast-action.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { useToastRootContext } from "./toast-context.mjs";
 import { useLayoutEffect, useState } from "react";
 //#region src/toast/toast-action.tsx

package/dist/toast/toast-root.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useLatest } from "../internal/use-latest.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
 import { exitAnimations } from "../internal/use-exit-animation.mjs";
 import { ToastRootContext, useToastRootContext, useToastViewportContext } from "./toast-context.mjs";
 import { Suspense, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/toast/toast-viewport.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useLatest } from "../internal/use-latest.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
 import { DialogContext } from "../dialog/dialog-context.mjs";
 import { animationBaseline } from "../internal/use-exit-animation.mjs";
 import { getServerTopmostModal, getTopmostModal, subscribeModals } from "../internal/modal-registry.mjs";
 import { ToastViewportContext } from "./toast-context.mjs";
 import { toast, toastManagerInternals } from "./toast.mjs";
 import { use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/toast/toast-viewport.tsx
 const isDev = process.env.NODE_ENV !== "production";
 const DEFAULT_HOTKEY = ["F8"];

package/dist/toggle/toggle.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { transitionTypes } from "../internal/transition-types.mjs";
-import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
 //#region src/toggle/toggle.tsx
 /**
 * A two-state button (WAI-ARIA "Button" pattern, toggle variant). Renders

package/dist/toggle-group/toggle-group-item.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useToggleGroupContext } from "./toggle-group-context.mjs";

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

@@ -1,13 +1,13 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useLatest } from "../internal/use-latest.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { ToggleGroupContext } from "./toggle-group-context.mjs";
-import { useToolbarContext } from "../internal/toolbar-context.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useRovingFocus } from "../internal/use-roving-focus.mjs";
 import { useCallback, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/toolbar/index.d.mts

@@ -1,18 +1,17 @@
 import "../internal/platform-attributes.mjs";
-import { ToolbarButton, ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState } from "./toolbar-button.mjs";
 import { ToolbarOrientation, ToolbarRoot, ToolbarRootProps, ToolbarRootState } from "./toolbar-root.mjs";
 import { ToolbarSeparator, ToolbarSeparatorProps, ToolbarSeparatorState } from "./toolbar-separator.mjs";
 //#region src/toolbar/index.d.ts
 /**
  * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
- * arrow keys over its focusable descendants, `Button` (an action button, focusable when
- * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+ * arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an
+ * item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays
+ * focusable when disabled inside a Toolbar (design/components/button.md 7.3).
  */
 export declare const Toolbar: {
   readonly Root: typeof ToolbarRoot;
-  readonly Button: typeof ToolbarButton;
   readonly Separator: typeof ToolbarSeparator;
 };
 //#endregion
-export type { ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState, ToolbarOrientation, ToolbarRootProps, ToolbarRootState, ToolbarSeparatorProps, ToolbarSeparatorState };
+export type { ToolbarOrientation, ToolbarRootProps, ToolbarRootState, ToolbarSeparatorProps, ToolbarSeparatorState };
 //# sourceMappingURL=index.d.mts.map

package/dist/toolbar/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toolbar/index.ts"],"mappings":";;;;;;;;;;qBAWa;WACX,aAAI;WACJ,eAAM;WACN,kBAAS"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toolbar/index.ts"],"mappings":";;;;;;;;;;qBAWa;WACX,aAAI;WACJ,kBAAS"}

package/dist/toolbar/index.mjs

@@ -1,15 +1,14 @@
-import { ToolbarButton } from "./toolbar-button.mjs";
 import { ToolbarRoot } from "./toolbar-root.mjs";
 import { ToolbarSeparator } from "./toolbar-separator.mjs";
 //#region src/toolbar/index.ts
 /**
 * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
-* arrow keys over its focusable descendants, `Button` (an action button, focusable when
-* disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+* arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an
+* item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays
+* focusable when disabled inside a Toolbar (design/components/button.md 7.3).
 */
 const Toolbar = {
 	Root: ToolbarRoot,
-	Button: ToolbarButton,
 	Separator: ToolbarSeparator
 };
 //#endregion

package/dist/toolbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toolbar/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToolbarButton } from \"./toolbar-button.js\";\nimport { ToolbarRoot } from \"./toolbar-root.js\";\nimport { ToolbarSeparator } from \"./toolbar-separator.js\";\n\n/**\n * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role=\"toolbar\") with one Tab stop and\n * arrow keys over its focusable descendants, `Button` (an action button, focusable when\n * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Button: ToolbarButton,\n  Separator: ToolbarSeparator,\n} as const;\n\nexport type { ToolbarRootProps, ToolbarRootState, ToolbarOrientation } from \"./toolbar-root.js\";\nexport type {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  ToolbarButtonActionDetails,\n} from \"./toolbar-button.js\";\nexport type { ToolbarSeparatorProps, ToolbarSeparatorState } from \"./toolbar-separator.js\";\n"],"mappings":";;;;;;;;;AAWA,MAAa,UAAU;CACrB,MAAM;CACN,QAAQ;CACR,WAAW;AACb"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toolbar/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToolbarRoot } from \"./toolbar-root.js\";\nimport { ToolbarSeparator } from \"./toolbar-separator.js\";\n\n/**\n * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role=\"toolbar\") with one Tab stop and\n * arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an\n * item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays\n * focusable when disabled inside a Toolbar (design/components/button.md 7.3).\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Separator: ToolbarSeparator,\n} as const;\n\nexport type { ToolbarRootProps, ToolbarRootState, ToolbarOrientation } from \"./toolbar-root.js\";\nexport type { ToolbarSeparatorProps, ToolbarSeparatorState } from \"./toolbar-separator.js\";\n"],"mappings":";;;;;;;;;AAWA,MAAa,UAAU;CACrB,MAAM;CACN,WAAW;AACb"}

package/dist/toolbar/toolbar-root.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { ToolbarContext } from "../internal/toolbar-context.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useRovingFocus } from "../internal/use-roving-focus.mjs";
 import { useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/toolbar/toolbar-separator.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useRender } from "../internal/use-render.mjs";
 //#region src/toolbar/toolbar-separator.tsx
 /**
 * `<hr aria-orientation>` between toolbar items: vertical in a horizontal Toolbar, horizontal in