@windmorph/react 0.0.0-stage → 0.1.0

package/dist/utils/cn.d.ts

@@ -0,0 +1,31 @@
+import { ClassValue } from "clsx";
+//#region src/utils/cn.d.ts
+/**
+ * tailwind-merge extension for the M3 theme keys, derived from the token source so
+ * class merging can never drift from the generated CSS. Shared with tailwind-variants.
+ */
+export declare const twMergeConfig: {
+  extend: {
+    theme: {
+      color: ("primary" | "on-primary" | "primary-container" | "on-primary-container" | "inverse-primary" | "primary-fixed" | "primary-fixed-dim" | "on-primary-fixed" | "on-primary-fixed-variant" | "secondary" | "on-secondary" | "secondary-container" | "on-secondary-container" | "secondary-fixed" | "secondary-fixed-dim" | "on-secondary-fixed" | "on-secondary-fixed-variant" | "tertiary" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "tertiary-fixed" | "tertiary-fixed-dim" | "on-tertiary-fixed" | "on-tertiary-fixed-variant" | "error" | "on-error" | "error-container" | "on-error-container" | "background" | "on-background" | "surface" | "surface-dim" | "surface-bright" | "surface-container-lowest" | "surface-container-low" | "surface-container" | "surface-container-high" | "surface-container-highest" | "on-surface" | "surface-variant" | "on-surface-variant" | "inverse-surface" | "inverse-on-surface" | "outline" | "outline-variant" | "shadow" | "scrim" | "surface-tint" | "success" | "on-success" | "success-container" | "on-success-container" | "warning" | "on-warning" | "warning-container" | "on-warning-container")[];
+      text: ("display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-large" | "body-medium" | "body-small" | "label-large" | "label-medium" | "label-small" | "display-large-emphasized" | "display-medium-emphasized" | "display-small-emphasized" | "headline-large-emphasized" | "headline-medium-emphasized" | "headline-small-emphasized" | "title-large-emphasized" | "title-medium-emphasized" | "title-small-emphasized" | "body-large-emphasized" | "body-medium-emphasized" | "body-small-emphasized" | "label-large-emphasized" | "label-medium-emphasized" | "label-small-emphasized")[];
+      radius: string[];
+      shadow: string[];
+      ease: string[];
+      breakpoint: ("medium" | "large" | "expanded" | "xlarge")[];
+      font: string[];
+    };
+    classGroups: {
+      duration: {
+        duration: string[];
+      }[];
+    };
+  };
+};
+/**
+ * Joins class names and resolves Tailwind conflicts, M3 tokens included.
+ * Later classes win, so a consumer's `className` always overrides the library's.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.js

@@ -0,0 +1,37 @@
+import { COLOR_ROLES } from "../tokens/color.js";
+import { LEGACY_EASINGS, SPRING_TOKEN_NAMES } from "../tokens/motion.js";
+import { BREAKPOINT_NAMES } from "../tokens/breakpoints.js";
+import { ELEVATION_LEVEL_NAMES } from "../tokens/elevation.js";
+import { CORNER_NAMES } from "../tokens/shape.js";
+import { TYPE_ROLES } from "../tokens/typography.js";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/utils/cn.ts
+/**
+* tailwind-merge extension for the M3 theme keys, derived from the token source so
+* class merging can never drift from the generated CSS. Shared with tailwind-variants.
+*/
+const twMergeConfig = { extend: {
+	theme: {
+		color: [...COLOR_ROLES],
+		text: [...TYPE_ROLES],
+		radius: CORNER_NAMES.map((name) => `corner-${name}`),
+		shadow: ELEVATION_LEVEL_NAMES.map((level) => `elevation-${level}`),
+		ease: [...SPRING_TOKEN_NAMES.map((name) => `m3-${name}`), ...Object.keys(LEGACY_EASINGS).map((name) => `m3-${name}`)],
+		breakpoint: [...BREAKPOINT_NAMES],
+		font: ["brand", "plain"]
+	},
+	classGroups: { duration: [{ duration: SPRING_TOKEN_NAMES.map((name) => `m3-${name}`) }] }
+} };
+const twMerge = extendTailwindMerge(twMergeConfig);
+/**
+* Joins class names and resolves Tailwind conflicts, M3 tokens included.
+* Later classes win, so a consumer's `className` always overrides the library's.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn, twMergeConfig };
+
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge, type ConfigExtension } from 'tailwind-merge';\nimport {\n  BREAKPOINT_NAMES,\n  COLOR_ROLES,\n  CORNER_NAMES,\n  ELEVATION_LEVEL_NAMES,\n  LEGACY_EASINGS,\n  SPRING_TOKEN_NAMES,\n  TYPE_ROLES,\n} from '../tokens';\n\n/**\n * tailwind-merge extension for the M3 theme keys, derived from the token source so\n * class merging can never drift from the generated CSS. Shared with tailwind-variants.\n */\nexport const twMergeConfig = {\n  extend: {\n    theme: {\n      color: [...COLOR_ROLES],\n      text: [...TYPE_ROLES],\n      radius: CORNER_NAMES.map((name) => `corner-${name}`),\n      shadow: ELEVATION_LEVEL_NAMES.map((level) => `elevation-${level}`),\n      ease: [\n        ...SPRING_TOKEN_NAMES.map((name) => `m3-${name}`),\n        ...Object.keys(LEGACY_EASINGS).map((name) => `m3-${name}`),\n      ],\n      breakpoint: [...BREAKPOINT_NAMES],\n      font: ['brand', 'plain'],\n    },\n    classGroups: {\n      duration: [{ duration: SPRING_TOKEN_NAMES.map((name) => `m3-${name}`) }],\n    },\n  },\n} satisfies ConfigExtension<string, string>;\n\nconst twMerge = extendTailwindMerge<string, string>(twMergeConfig);\n\n/**\n * Joins class names and resolves Tailwind conflicts, M3 tokens included.\n * Later classes win, so a consumer's `className` always overrides the library's.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,EAC3B,QAAQ;CACN,OAAO;EACL,OAAO,CAAC,GAAG,WAAW;EACtB,MAAM,CAAC,GAAG,UAAU;EACpB,QAAQ,aAAa,KAAK,SAAS,UAAU,MAAM;EACnD,QAAQ,sBAAsB,KAAK,UAAU,aAAa,OAAO;EACjE,MAAM,CACJ,GAAG,mBAAmB,KAAK,SAAS,MAAM,MAAM,GAChD,GAAG,OAAO,KAAK,cAAc,CAAC,CAAC,KAAK,SAAS,MAAM,MAAM,CAC3D;EACA,YAAY,CAAC,GAAG,gBAAgB;EAChC,MAAM,CAAC,SAAS,OAAO;CACzB;CACA,aAAa,EACX,UAAU,CAAC,EAAE,UAAU,mBAAmB,KAAK,SAAS,MAAM,MAAM,EAAE,CAAC,EACzE;AACF,EACF;AAEA,MAAM,UAAU,oBAAoC,aAAa;;;;;AAMjE,SAAgB,GAAG,GAAG,QAA8B;CAClD,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/utils/composite-keys.js

@@ -0,0 +1,32 @@
+//#region src/utils/composite-keys.ts
+/** Text entry keeps its arrow, Home and End keys for the caret (APG toolbar pattern). */
+const TEXT_ENTRY = "textarea, [contenteditable]:not([contenteditable=\"false\"]), input:not([type=\"button\"], [type=\"checkbox\"], [type=\"radio\"], [type=\"submit\"], [type=\"reset\"], [type=\"image\"], [type=\"range\"], [type=\"color\"], [type=\"file\"])";
+function isRtl(root) {
+	return getComputedStyle(root).direction === "rtl";
+}
+function moveFor(key, axes, rtl) {
+	const horizontal = axes !== "vertical";
+	const vertical = axes !== "horizontal";
+	switch (key) {
+		case "ArrowRight": return horizontal ? rtl ? -1 : 1 : null;
+		case "ArrowLeft": return horizontal ? rtl ? 1 : -1 : null;
+		case "ArrowDown": return vertical ? 1 : null;
+		case "ArrowUp": return vertical ? -1 : null;
+		case "Home": return "first";
+		case "End": return "last";
+		default: return null;
+	}
+}
+/** The item a move lands on, wrapping from one end to the other. */
+function target(items, current, move) {
+	if (move === "first") return items[0];
+	if (move === "last") return items.at(-1);
+	return items[(current + move + items.length) % items.length];
+}
+function hasModifier(event) {
+	return event.altKey || event.ctrlKey || event.metaKey;
+}
+//#endregion
+export { TEXT_ENTRY, hasModifier, isRtl, moveFor, target };
+
+//# sourceMappingURL=composite-keys.js.map

package/dist/utils/composite-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-keys.js","names":[],"sources":["../../src/utils/composite-keys.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\n/*\n * What the composite widgets' keyboard handlers share: which move a key asks for, where it\n * lands, and when to leave a key alone. The handlers live in `toolbar-keys.ts` and\n * `radio-group-keys.ts`, so each component loads only the pattern it uses.\n */\n\n/** The axis a composite widget's arrow keys move along. */\nexport type KeyOrientation = 'horizontal' | 'vertical';\n\n/** Text entry keeps its arrow, Home and End keys for the caret (APG toolbar pattern). */\nexport const TEXT_ENTRY =\n  'textarea, [contenteditable]:not([contenteditable=\"false\"]), input:not([type=\"button\"], [type=\"checkbox\"], [type=\"radio\"], [type=\"submit\"], [type=\"reset\"], [type=\"image\"], [type=\"range\"], [type=\"color\"], [type=\"file\"])';\n\nexport function isRtl(root: Element): boolean {\n  return getComputedStyle(root).direction === 'rtl';\n}\n\n/** The move a key asks for: one step either way, or to an end. */\nexport type Move = 1 | -1 | 'first' | 'last';\n\nexport function moveFor(\n  key: string,\n  axes: 'horizontal' | 'vertical' | 'both',\n  rtl: boolean,\n): Move | null {\n  const horizontal = axes !== 'vertical';\n  const vertical = axes !== 'horizontal';\n  switch (key) {\n    case 'ArrowRight':\n      return horizontal ? (rtl ? -1 : 1) : null;\n    case 'ArrowLeft':\n      return horizontal ? (rtl ? 1 : -1) : null;\n    case 'ArrowDown':\n      return vertical ? 1 : null;\n    case 'ArrowUp':\n      return vertical ? -1 : null;\n    case 'Home':\n      return 'first';\n    case 'End':\n      return 'last';\n    default:\n      return null;\n  }\n}\n\n/** The item a move lands on, wrapping from one end to the other. */\nexport function target<T>(items: T[], current: number, move: Move): T | undefined {\n  if (move === 'first') return items[0];\n  if (move === 'last') return items.at(-1);\n  return items[(current + move + items.length) % items.length];\n}\n\nexport function hasModifier(event: KeyboardEvent) {\n  return event.altKey || event.ctrlKey || event.metaKey;\n}\n"],"mappings":";;AAYA,MAAa,aACX;AAEF,SAAgB,MAAM,MAAwB;CAC5C,OAAO,iBAAiB,IAAI,CAAC,CAAC,cAAc;AAC9C;AAKA,SAAgB,QACd,KACA,MACA,KACa;CACb,MAAM,aAAa,SAAS;CAC5B,MAAM,WAAW,SAAS;CAC1B,QAAQ,KAAR;EACE,KAAK,cACH,OAAO,aAAc,MAAM,KAAK,IAAK;EACvC,KAAK,aACH,OAAO,aAAc,MAAM,IAAI,KAAM;EACvC,KAAK,aACH,OAAO,WAAW,IAAI;EACxB,KAAK,WACH,OAAO,WAAW,KAAK;EACzB,KAAK,QACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;AAGA,SAAgB,OAAU,OAAY,SAAiB,MAA2B;CAChF,IAAI,SAAS,SAAS,OAAO,MAAM;CACnC,IAAI,SAAS,QAAQ,OAAO,MAAM,GAAG,EAAE;CACvC,OAAO,OAAO,UAAU,OAAO,MAAM,UAAU,MAAM;AACvD;AAEA,SAAgB,YAAY,OAAsB;CAChD,OAAO,MAAM,UAAU,MAAM,WAAW,MAAM;AAChD"}

package/dist/utils/focus-visible.js

@@ -0,0 +1,14 @@
+//#region src/utils/focus-visible.ts
+/**
+* Whether keyboard focus (`:focus-visible`) is inside `root`. Scroll-hidden bars use it to
+* stay on screen while a keyboard user is on one of their controls, without pinning them
+* after a pointer click (which focuses a button but doesn't show its focus ring).
+*/
+function hasVisibleFocusWithin(root) {
+	const active = root.ownerDocument.activeElement;
+	return active !== null && root.contains(active) && active.matches(":focus-visible");
+}
+//#endregion
+export { hasVisibleFocusWithin };
+
+//# sourceMappingURL=focus-visible.js.map

package/dist/utils/focus-visible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-visible.js","names":[],"sources":["../../src/utils/focus-visible.ts"],"sourcesContent":["/**\n * Whether keyboard focus (`:focus-visible`) is inside `root`. Scroll-hidden bars use it to\n * stay on screen while a keyboard user is on one of their controls, without pinning them\n * after a pointer click (which focuses a button but doesn't show its focus ring).\n */\nexport function hasVisibleFocusWithin(root: Element): boolean {\n  const active = root.ownerDocument.activeElement;\n  return active !== null && root.contains(active) && active.matches(':focus-visible');\n}\n"],"mappings":";;;;;;AAKA,SAAgB,sBAAsB,MAAwB;CAC5D,MAAM,SAAS,KAAK,cAAc;CAClC,OAAO,WAAW,QAAQ,KAAK,SAAS,MAAM,KAAK,OAAO,QAAQ,gBAAgB;AACpF"}

package/dist/utils/focus.js

@@ -0,0 +1,51 @@
+//#region src/utils/focus.ts
+const TABBABLE = [
+	"a[href]",
+	"area[href]",
+	"button",
+	"input:not([type=\"hidden\"])",
+	"select",
+	"textarea",
+	"iframe",
+	"summary",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]"
+].join(",");
+/**
+* Whether an element is rendered: not under `display: none` (a responsive `hidden` class,
+* say) or `content-visibility: hidden`. Environments without `checkVisibility` (jsdom)
+* count every element as rendered.
+*/
+function isRendered(el) {
+	return !("checkVisibility" in el) || el.checkVisibility();
+}
+/**
+* The elements inside `root` that Tab would reach, in document order: focusable, not
+* disabled, not `tabindex="-1"`, not in an `inert` or `hidden` subtree, and rendered. `skip`
+* leaves out elements the caller doesn't want. (React Aria's tree walker isn't part of its
+* public API.)
+*/
+function tabbables(root, skip) {
+	return [...root.querySelectorAll(TABBABLE)].filter((el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[inert], [hidden]") && isRendered(el) && !skip?.(el));
+}
+/** The first of {@link tabbables}, or null when there's none. */
+function firstTabbable(root, skip) {
+	return tabbables(root, skip)[0] ?? null;
+}
+/**
+* Moves initial focus from a dialog's panel to its first interactive element (M3: "focus
+* should automatically land on the first interactive element"). React Aria's `useDialog`
+* focuses the panel itself unless something inside took focus (`autoFocus`), so this only
+* acts while the panel holds focus. A scrolling region marked `data-scrollable` is
+* focusable for the keyboard but isn't a control, so it's skipped. `pick` can hand focus to
+* another element in place of that first one (a dialog's least destructive action).
+*/
+function focusFirstInteractive(panel, pick = (first) => first) {
+	if (!panel || panel.ownerDocument.activeElement !== panel) return;
+	const first = firstTabbable(panel, (el) => el.hasAttribute("data-scrollable"));
+	if (first) pick(first).focus();
+}
+//#endregion
+export { firstTabbable, focusFirstInteractive, tabbables };
+
+//# sourceMappingURL=focus.js.map

package/dist/utils/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","names":[],"sources":["../../src/utils/focus.ts"],"sourcesContent":["const TABBABLE = [\n  'a[href]',\n  'area[href]',\n  'button',\n  'input:not([type=\"hidden\"])',\n  'select',\n  'textarea',\n  'iframe',\n  'summary',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[tabindex]',\n].join(',');\n\n/**\n * Whether an element is rendered: not under `display: none` (a responsive `hidden` class,\n * say) or `content-visibility: hidden`. Environments without `checkVisibility` (jsdom)\n * count every element as rendered.\n */\nfunction isRendered(el: HTMLElement): boolean {\n  return !('checkVisibility' in el) || el.checkVisibility();\n}\n\n/**\n * The elements inside `root` that Tab would reach, in document order: focusable, not\n * disabled, not `tabindex=\"-1\"`, not in an `inert` or `hidden` subtree, and rendered. `skip`\n * leaves out elements the caller doesn't want. (React Aria's tree walker isn't part of its\n * public API.)\n */\nexport function tabbables(root: Element, skip?: (el: HTMLElement) => boolean): HTMLElement[] {\n  return [...root.querySelectorAll<HTMLElement>(TABBABLE)].filter(\n    (el) =>\n      el.tabIndex >= 0 &&\n      !el.matches(':disabled') &&\n      !el.closest('[inert], [hidden]') &&\n      isRendered(el) &&\n      !skip?.(el),\n  );\n}\n\n/** The first of {@link tabbables}, or null when there's none. */\nexport function firstTabbable(\n  root: Element,\n  skip?: (el: HTMLElement) => boolean,\n): HTMLElement | null {\n  return tabbables(root, skip)[0] ?? null;\n}\n\n/**\n * Moves initial focus from a dialog's panel to its first interactive element (M3: \"focus\n * should automatically land on the first interactive element\"). React Aria's `useDialog`\n * focuses the panel itself unless something inside took focus (`autoFocus`), so this only\n * acts while the panel holds focus. A scrolling region marked `data-scrollable` is\n * focusable for the keyboard but isn't a control, so it's skipped. `pick` can hand focus to\n * another element in place of that first one (a dialog's least destructive action).\n */\nexport function focusFirstInteractive(\n  panel: HTMLElement | null,\n  pick: (first: HTMLElement) => HTMLElement = (first) => first,\n) {\n  if (!panel || panel.ownerDocument.activeElement !== panel) return;\n  const first = firstTabbable(panel, (el) => el.hasAttribute('data-scrollable'));\n  if (first) pick(first).focus();\n}\n"],"mappings":";AAAA,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;AAOV,SAAS,WAAW,IAA0B;CAC5C,OAAO,EAAE,qBAAqB,OAAO,GAAG,gBAAgB;AAC1D;;;;;;;AAQA,SAAgB,UAAU,MAAe,MAAoD;CAC3F,OAAO,CAAC,GAAG,KAAK,iBAA8B,QAAQ,CAAC,CAAC,CAAC,QACtD,OACC,GAAG,YAAY,KACf,CAAC,GAAG,QAAQ,WAAW,KACvB,CAAC,GAAG,QAAQ,mBAAmB,KAC/B,WAAW,EAAE,KACb,CAAC,OAAO,EAAE,CACd;AACF;;AAGA,SAAgB,cACd,MACA,MACoB;CACpB,OAAO,UAAU,MAAM,IAAI,CAAC,CAAC,MAAM;AACrC;;;;;;;;;AAUA,SAAgB,sBACd,OACA,QAA6C,UAAU,OACvD;CACA,IAAI,CAAC,SAAS,MAAM,cAAc,kBAAkB,OAAO;CAC3D,MAAM,QAAQ,cAAc,QAAQ,OAAO,GAAG,aAAa,iBAAiB,CAAC;CAC7E,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC,MAAM;AAC/B"}

package/dist/utils/focusable-disabled.js

@@ -0,0 +1,12 @@
+//#region src/utils/focusable-disabled.ts
+/**
+* Disabled items stay focusable but can't be chosen, as WAI-ARIA APG's "Focusability of disabled
+* controls" asks for options, menu items and tabs, so screen reader users find them (M3 menus:
+* "Disabled menu items can receive focus but aren't selectable"). React Stately reads it from
+* the state options, though not every state hook's types list it.
+*/
+const FOCUSABLE_DISABLED_OPTIONS = { disabledBehavior: "selection" };
+//#endregion
+export { FOCUSABLE_DISABLED_OPTIONS };
+
+//# sourceMappingURL=focusable-disabled.js.map

package/dist/utils/focusable-disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-disabled.js","names":[],"sources":["../../src/utils/focusable-disabled.ts"],"sourcesContent":["/**\n * Disabled items stay focusable but can't be chosen, as WAI-ARIA APG's \"Focusability of disabled\n * controls\" asks for options, menu items and tabs, so screen reader users find them (M3 menus:\n * \"Disabled menu items can receive focus but aren't selectable\"). React Stately reads it from\n * the state options, though not every state hook's types list it.\n */\nexport const FOCUSABLE_DISABLED_OPTIONS = { disabledBehavior: 'selection' as const };\n"],"mappings":";;;;;;;AAMA,MAAa,6BAA6B,EAAE,kBAAkB,YAAqB"}

package/dist/utils/keep-pressed-in-place.d.ts

@@ -0,0 +1,60 @@
+import { SyntheticEvent } from "react";
+//#region src/utils/keep-pressed-in-place.d.ts
+/** The container's event handlers {@link useKeepPressedInPlace} returns. */
+export interface KeepPressedInPlaceResult {
+  /**
+   * Notes the pressed element: the container's `onPointerDownCapture` and `onKeyDownCapture`,
+   * and its `onClickCapture` for a virtual click (`event.detail === 0`).
+   */
+  capture: (event: SyntheticEvent) => void;
+  /**
+   * Forgets a press that changed nothing, by the next task: the container's
+   * `onPointerUpCapture`, `onKeyUpCapture` and `onClickCapture`.
+   */
+  release: () => void;
+}
+/**
+ * Keeps the element a person pressed where it was on screen while the content above it changes
+ * size because of that press. When a press opens one item while an open item above it folds
+ * (a one-at-a-time tree or accordion), the pressed element would otherwise slide up by the
+ * folded height, off the window when the fold starts above it; with this hook its scroller
+ * scrolls by the folded height on every frame instead, so nothing moves out from under the
+ * person. The core `List` uses it for its tree grid (2026-10-17).
+ *
+ * **When to use it:** in a container of your own whose items open and fold in response to a
+ * press, where an item above the pressed one can fold (or grow) at the same time. Pair it with
+ * `overflow-anchor: none` on the folding parts: the browser's scroll anchoring then holds the
+ * pressed element on its own whenever it is the first thing showing below them, and this hook
+ * covers the rest (the anchor the browser picks above it, such as the folding item's own header
+ * or content above the container) and browsers without scroll anchoring.
+ *
+ * **Wiring:** put `capture` on the container as `onPointerDownCapture` and `onKeyDownCapture`,
+ * and `release` as `onPointerUpCapture` and `onKeyUpCapture`. A virtual click (assistive tech,
+ * `event.detail === 0`) presses with no pointer or key down before it, so `onClickCapture`
+ * calls `capture` for it, then `release` for every click.
+ *
+ * **What it notes:** on a pointer down, a key down or a virtual click, the element `selector`
+ * finds from the event's target (`closest`), its top on screen, its scroller (the nearest
+ * scrolling ancestor, else the page) and the scroller's position. A press outside `selector`
+ * clears it.
+ *
+ * **When it acts:** when `version` next changes (any value that changes whenever the content
+ * the press changed does, such as the open keys or the rows shown): in a layout effect, before
+ * the change paints, it scrolls by however far the element moved, which covers a change with no
+ * motion (reduced motion); then again on every animation frame while `settling` is true (the
+ * folding parts are still moving), and once more after.
+ *
+ * **When it lets go:** on the next wheel, touch, pointer down or key down anywhere (the person
+ * is scrolling or acting again), when `settling` turns false, when the element leaves the page,
+ * or on unmount. It ignores a press after which the scroller moved before the change (the
+ * person scrolled), and forgets a press that changed nothing by the next task, so it never holds
+ * a later, unrelated change.
+ *
+ * @param selector A CSS selector for the pressable items (`'[role=row]'`).
+ * @param version Changes whenever the content changes.
+ * @param settling Whether the content is still moving after the change (parts still folding).
+ * @returns `capture` and `release`, the container's event handlers.
+ */
+export declare function useKeepPressedInPlace(selector: string, version: unknown, settling: boolean): KeepPressedInPlaceResult;
+//#endregion
+//# sourceMappingURL=keep-pressed-in-place.d.ts.map

package/dist/utils/keep-pressed-in-place.js

@@ -0,0 +1,127 @@
+"use client";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+//#region src/utils/keep-pressed-in-place.ts
+/** The element that scrolls `element`: its nearest scrolling ancestor, else the page. */
+function scrollerOf(element) {
+	for (let node = element.parentElement; node; node = node.parentElement) {
+		const { overflowY } = getComputedStyle(node);
+		if (/auto|scroll|overlay/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+	}
+	return document.scrollingElement ?? document.documentElement;
+}
+/** Inputs that mean the reader is scrolling or acting again, so the hold lets go. */
+const RELEASE_EVENTS = [
+	"wheel",
+	"touchstart",
+	"pointerdown",
+	"keydown"
+];
+/**
+* Keeps the element a person pressed where it was on screen while the content above it changes
+* size because of that press. When a press opens one item while an open item above it folds
+* (a one-at-a-time tree or accordion), the pressed element would otherwise slide up by the
+* folded height, off the window when the fold starts above it; with this hook its scroller
+* scrolls by the folded height on every frame instead, so nothing moves out from under the
+* person. The core `List` uses it for its tree grid (2026-10-17).
+*
+* **When to use it:** in a container of your own whose items open and fold in response to a
+* press, where an item above the pressed one can fold (or grow) at the same time. Pair it with
+* `overflow-anchor: none` on the folding parts: the browser's scroll anchoring then holds the
+* pressed element on its own whenever it is the first thing showing below them, and this hook
+* covers the rest (the anchor the browser picks above it, such as the folding item's own header
+* or content above the container) and browsers without scroll anchoring.
+*
+* **Wiring:** put `capture` on the container as `onPointerDownCapture` and `onKeyDownCapture`,
+* and `release` as `onPointerUpCapture` and `onKeyUpCapture`. A virtual click (assistive tech,
+* `event.detail === 0`) presses with no pointer or key down before it, so `onClickCapture`
+* calls `capture` for it, then `release` for every click.
+*
+* **What it notes:** on a pointer down, a key down or a virtual click, the element `selector`
+* finds from the event's target (`closest`), its top on screen, its scroller (the nearest
+* scrolling ancestor, else the page) and the scroller's position. A press outside `selector`
+* clears it.
+*
+* **When it acts:** when `version` next changes (any value that changes whenever the content
+* the press changed does, such as the open keys or the rows shown): in a layout effect, before
+* the change paints, it scrolls by however far the element moved, which covers a change with no
+* motion (reduced motion); then again on every animation frame while `settling` is true (the
+* folding parts are still moving), and once more after.
+*
+* **When it lets go:** on the next wheel, touch, pointer down or key down anywhere (the person
+* is scrolling or acting again), when `settling` turns false, when the element leaves the page,
+* or on unmount. It ignores a press after which the scroller moved before the change (the
+* person scrolled), and forgets a press that changed nothing by the next task, so it never holds
+* a later, unrelated change.
+*
+* @param selector A CSS selector for the pressable items (`'[role=row]'`).
+* @param version Changes whenever the content changes.
+* @param settling Whether the content is still moving after the change (parts still folding).
+* @returns `capture` and `release`, the container's event handlers.
+*/
+function useKeepPressedInPlace(selector, version, settling) {
+	const pressed = useRef(null);
+	const settlingRef = useRef(settling);
+	settlingRef.current = settling;
+	const stopHold = useRef(null);
+	const capture = useCallback((event) => {
+		const element = event.target.closest?.(selector);
+		if (!element) {
+			pressed.current = null;
+			return;
+		}
+		const scroller = scrollerOf(element);
+		pressed.current = {
+			element,
+			top: element.getBoundingClientRect().top,
+			scroller,
+			scrollTop: scroller.scrollTop
+		};
+	}, [selector]);
+	const release = useCallback(() => {
+		const current = pressed.current;
+		setTimeout(() => {
+			if (pressed.current === current) pressed.current = null;
+		});
+	}, []);
+	useLayoutEffect(() => {
+		const press = pressed.current;
+		if (!press) return;
+		pressed.current = null;
+		const { element, top, scroller } = press;
+		if (scroller.scrollTop !== press.scrollTop) return;
+		stopHold.current?.();
+		let frame = 0;
+		const view = scroller.ownerDocument.defaultView;
+		const stop = () => {
+			cancelAnimationFrame(frame);
+			for (const type of RELEASE_EVENTS) view.removeEventListener(type, stop, true);
+			if (stopHold.current === stop) stopHold.current = null;
+		};
+		const keep = () => {
+			if (!element.isConnected) return stop();
+			const delta = element.getBoundingClientRect().top - top;
+			if (Math.abs(delta) >= .5) scroller.scrollTo({
+				top: scroller.scrollTop + delta,
+				behavior: "instant"
+			});
+		};
+		keep();
+		const tick = () => {
+			keep();
+			if (settlingRef.current) frame = requestAnimationFrame(tick);
+			else stop();
+		};
+		frame = requestAnimationFrame(tick);
+		for (const type of RELEASE_EVENTS) view.addEventListener(type, stop, true);
+		stopHold.current = stop;
+	}, [version]);
+	useEffect(() => () => stopHold.current?.(), []);
+	return {
+		capture,
+		release
+	};
+}
+//#endregion
+export { useKeepPressedInPlace };
+
+//# sourceMappingURL=keep-pressed-in-place.js.map

package/dist/utils/keep-pressed-in-place.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keep-pressed-in-place.js","names":[],"sources":["../../src/utils/keep-pressed-in-place.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useLayoutEffect, useRef, type SyntheticEvent } from 'react';\n\n/** The element that scrolls `element`: its nearest scrolling ancestor, else the page. */\nfunction scrollerOf(element: Element): Element {\n  for (let node = element.parentElement; node; node = node.parentElement) {\n    const { overflowY } = getComputedStyle(node);\n    if (/auto|scroll|overlay/.test(overflowY) && node.scrollHeight > node.clientHeight) {\n      return node;\n    }\n  }\n  return document.scrollingElement ?? document.documentElement;\n}\n\ninterface Pressed {\n  element: Element;\n  /** Its viewport top when it was pressed. */\n  top: number;\n  scroller: Element;\n  /** The scroller's position then: if it has scrolled since, the press is stale. */\n  scrollTop: number;\n}\n\n/** Inputs that mean the reader is scrolling or acting again, so the hold lets go. */\nconst RELEASE_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown'] as const;\n\n/** The container's event handlers {@link useKeepPressedInPlace} returns. */\nexport interface KeepPressedInPlaceResult {\n  /**\n   * Notes the pressed element: the container's `onPointerDownCapture` and `onKeyDownCapture`,\n   * and its `onClickCapture` for a virtual click (`event.detail === 0`).\n   */\n  capture: (event: SyntheticEvent) => void;\n  /**\n   * Forgets a press that changed nothing, by the next task: the container's\n   * `onPointerUpCapture`, `onKeyUpCapture` and `onClickCapture`.\n   */\n  release: () => void;\n}\n\n/**\n * Keeps the element a person pressed where it was on screen while the content above it changes\n * size because of that press. When a press opens one item while an open item above it folds\n * (a one-at-a-time tree or accordion), the pressed element would otherwise slide up by the\n * folded height, off the window when the fold starts above it; with this hook its scroller\n * scrolls by the folded height on every frame instead, so nothing moves out from under the\n * person. The core `List` uses it for its tree grid (2026-10-17).\n *\n * **When to use it:** in a container of your own whose items open and fold in response to a\n * press, where an item above the pressed one can fold (or grow) at the same time. Pair it with\n * `overflow-anchor: none` on the folding parts: the browser's scroll anchoring then holds the\n * pressed element on its own whenever it is the first thing showing below them, and this hook\n * covers the rest (the anchor the browser picks above it, such as the folding item's own header\n * or content above the container) and browsers without scroll anchoring.\n *\n * **Wiring:** put `capture` on the container as `onPointerDownCapture` and `onKeyDownCapture`,\n * and `release` as `onPointerUpCapture` and `onKeyUpCapture`. A virtual click (assistive tech,\n * `event.detail === 0`) presses with no pointer or key down before it, so `onClickCapture`\n * calls `capture` for it, then `release` for every click.\n *\n * **What it notes:** on a pointer down, a key down or a virtual click, the element `selector`\n * finds from the event's target (`closest`), its top on screen, its scroller (the nearest\n * scrolling ancestor, else the page) and the scroller's position. A press outside `selector`\n * clears it.\n *\n * **When it acts:** when `version` next changes (any value that changes whenever the content\n * the press changed does, such as the open keys or the rows shown): in a layout effect, before\n * the change paints, it scrolls by however far the element moved, which covers a change with no\n * motion (reduced motion); then again on every animation frame while `settling` is true (the\n * folding parts are still moving), and once more after.\n *\n * **When it lets go:** on the next wheel, touch, pointer down or key down anywhere (the person\n * is scrolling or acting again), when `settling` turns false, when the element leaves the page,\n * or on unmount. It ignores a press after which the scroller moved before the change (the\n * person scrolled), and forgets a press that changed nothing by the next task, so it never holds\n * a later, unrelated change.\n *\n * @param selector A CSS selector for the pressable items (`'[role=row]'`).\n * @param version Changes whenever the content changes.\n * @param settling Whether the content is still moving after the change (parts still folding).\n * @returns `capture` and `release`, the container's event handlers.\n */\nexport function useKeepPressedInPlace(\n  selector: string,\n  version: unknown,\n  settling: boolean,\n): KeepPressedInPlaceResult {\n  const pressed = useRef<Pressed | null>(null);\n  const settlingRef = useRef(settling);\n  settlingRef.current = settling;\n  const stopHold = useRef<(() => void) | null>(null);\n\n  const capture = useCallback(\n    (event: SyntheticEvent) => {\n      const element = (event.target as Element).closest?.(selector);\n      if (!element) {\n        pressed.current = null;\n        return;\n      }\n      const scroller = scrollerOf(element);\n      pressed.current = {\n        element,\n        top: element.getBoundingClientRect().top,\n        scroller,\n        scrollTop: scroller.scrollTop,\n      };\n    },\n    [selector],\n  );\n\n  // A press's change commits before the next task, so a press that changed nothing is\n  // forgotten then and never holds a later, unrelated change.\n  const release = useCallback(() => {\n    const current = pressed.current;\n    setTimeout(() => {\n      if (pressed.current === current) pressed.current = null;\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    const press = pressed.current;\n    if (!press) return;\n    pressed.current = null;\n    const { element, top, scroller } = press;\n    if (scroller.scrollTop !== press.scrollTop) return;\n    stopHold.current?.();\n\n    let frame = 0;\n    const view = scroller.ownerDocument.defaultView!;\n    const stop = () => {\n      cancelAnimationFrame(frame);\n      for (const type of RELEASE_EVENTS) view.removeEventListener(type, stop, true);\n      if (stopHold.current === stop) stopHold.current = null;\n    };\n    const keep = () => {\n      if (!element.isConnected) return stop();\n      const delta = element.getBoundingClientRect().top - top;\n      if (Math.abs(delta) >= 0.5) {\n        scroller.scrollTo({ top: scroller.scrollTop + delta, behavior: 'instant' });\n      }\n    };\n    // Before this commit paints (a change with no motion moves things at once), then on\n    // every frame while the content settles, and once more after.\n    keep();\n    const tick = () => {\n      keep();\n      if (settlingRef.current) frame = requestAnimationFrame(tick);\n      else stop();\n    };\n    frame = requestAnimationFrame(tick);\n    for (const type of RELEASE_EVENTS) view.addEventListener(type, stop, true);\n    stopHold.current = stop;\n  }, [version]);\n\n  useEffect(() => () => stopHold.current?.(), []);\n\n  return { capture, release };\n}\n"],"mappings":";;;;AAKA,SAAS,WAAW,SAA2B;CAC7C,KAAK,IAAI,OAAO,QAAQ,eAAe,MAAM,OAAO,KAAK,eAAe;EACtE,MAAM,EAAE,cAAc,iBAAiB,IAAI;EAC3C,IAAI,sBAAsB,KAAK,SAAS,KAAK,KAAK,eAAe,KAAK,cACpE,OAAO;CAEX;CACA,OAAO,SAAS,oBAAoB,SAAS;AAC/C;;AAYA,MAAM,iBAAiB;CAAC;CAAS;CAAc;CAAe;AAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DvE,SAAgB,sBACd,UACA,SACA,UAC0B;CAC1B,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CACtB,MAAM,WAAW,OAA4B,IAAI;CAEjD,MAAM,UAAU,aACb,UAA0B;EACzB,MAAM,UAAW,MAAM,OAAmB,UAAU,QAAQ;EAC5D,IAAI,CAAC,SAAS;GACZ,QAAQ,UAAU;GAClB;EACF;EACA,MAAM,WAAW,WAAW,OAAO;EACnC,QAAQ,UAAU;GAChB;GACA,KAAK,QAAQ,sBAAsB,CAAC,CAAC;GACrC;GACA,WAAW,SAAS;EACtB;CACF,GACA,CAAC,QAAQ,CACX;CAIA,MAAM,UAAU,kBAAkB;EAChC,MAAM,UAAU,QAAQ;EACxB,iBAAiB;GACf,IAAI,QAAQ,YAAY,SAAS,QAAQ,UAAU;EACrD,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,MAAM,QAAQ,QAAQ;EACtB,IAAI,CAAC,OAAO;EACZ,QAAQ,UAAU;EAClB,MAAM,EAAE,SAAS,KAAK,aAAa;EACnC,IAAI,SAAS,cAAc,MAAM,WAAW;EAC5C,SAAS,UAAU;EAEnB,IAAI,QAAQ;EACZ,MAAM,OAAO,SAAS,cAAc;EACpC,MAAM,aAAa;GACjB,qBAAqB,KAAK;GAC1B,KAAK,MAAM,QAAQ,gBAAgB,KAAK,oBAAoB,MAAM,MAAM,IAAI;GAC5E,IAAI,SAAS,YAAY,MAAM,SAAS,UAAU;EACpD;EACA,MAAM,aAAa;GACjB,IAAI,CAAC,QAAQ,aAAa,OAAO,KAAK;GACtC,MAAM,QAAQ,QAAQ,sBAAsB,CAAC,CAAC,MAAM;GACpD,IAAI,KAAK,IAAI,KAAK,KAAK,IACrB,SAAS,SAAS;IAAE,KAAK,SAAS,YAAY;IAAO,UAAU;GAAU,CAAC;EAE9E;EAGA,KAAK;EACL,MAAM,aAAa;GACjB,KAAK;GACL,IAAI,YAAY,SAAS,QAAQ,sBAAsB,IAAI;QACtD,KAAK;EACZ;EACA,QAAQ,sBAAsB,IAAI;EAClC,KAAK,MAAM,QAAQ,gBAAgB,KAAK,iBAAiB,MAAM,MAAM,IAAI;EACzE,SAAS,UAAU;CACrB,GAAG,CAAC,OAAO,CAAC;CAEZ,sBAAsB,SAAS,UAAU,GAAG,CAAC,CAAC;CAE9C,OAAO;EAAE;EAAS;CAAQ;AAC5B"}

package/dist/utils/load-on-demand.js

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/load-on-demand.tsx
+/**
+* Loads a component on demand, for parts a component shows only sometimes (a tooltip on
+* hover, a loading indicator while loading), so it doesn't carry their code up front.
+*
+* Unlike `React.lazy` it never suspends: once the module is in, the component renders in the
+* same pass, and on first use it renders as soon as the module arrives. A `Suspense` boundary
+* would hold back content that resolves after its fallback showed (React throttles those
+* reveals by up to 300ms), so a part preloaded on hover would still show late.
+*/
+function onDemand(load) {
+	let loaded;
+	let pending;
+	const preload = () => {
+		pending ??= load().then((component) => loaded = component, (error) => {
+			pending = void 0;
+			throw error;
+		});
+		return pending;
+	};
+	function Component(props) {
+		const [, setArrived] = useState(false);
+		useEffect(() => {
+			if (loaded) return;
+			let mounted = true;
+			preload().then(() => mounted && setArrived(true), () => void 0);
+			return () => {
+				mounted = false;
+			};
+		}, []);
+		const Loaded = loaded;
+		return Loaded ? /* @__PURE__ */ jsx(Loaded, { ...props }) : null;
+	}
+	return {
+		preload,
+		Component
+	};
+}
+/** How long after mounting a browser without `requestIdleCallback` waits before preloading. */
+const IDLE_FALLBACK_DELAY = 1e3;
+const idleQueue = /* @__PURE__ */ new Set();
+let cancelIdle;
+function whenIdle(run) {
+	if (typeof window.requestIdleCallback === "function") {
+		const handle = window.requestIdleCallback(run);
+		return () => window.cancelIdleCallback(handle);
+	}
+	const handle = window.setTimeout(run, IDLE_FALLBACK_DELAY);
+	return () => window.clearTimeout(handle);
+}
+function runIdlePreloads() {
+	cancelIdle = void 0;
+	const preloads = new Set([...idleQueue].map((entry) => entry.preload));
+	idleQueue.clear();
+	for (const preload of preloads) preload().catch(() => void 0);
+}
+/** Whether the user asked to save data, where the browser tells. */
+function savesData() {
+	const { connection } = navigator;
+	return connection?.saveData === true;
+}
+/**
+* Calls `preload` in the browser's first idle period after mount (or `IDLE_FALLBACK_DELAY`
+* later without `requestIdleCallback`), while `enabled`, so the part is usually in before it
+* first shows. One callback serves every mounted part. Never on the server, nor when the user
+* asked to save data.
+*/
+function usePreloadWhenIdle(preload, enabled) {
+	useEffect(() => {
+		if (!enabled || savesData()) return;
+		const entry = { preload };
+		idleQueue.add(entry);
+		cancelIdle ??= whenIdle(runIdlePreloads);
+		return () => {
+			idleQueue.delete(entry);
+			if (idleQueue.size === 0 && cancelIdle) {
+				cancelIdle();
+				cancelIdle = void 0;
+			}
+		};
+	}, [preload, enabled]);
+}
+/**
+* Calls `preload` when the pointer moves over `ref`'s element or focus enters it, while
+* `enabled`: the moments a part shown on hover or focus becomes likely. It also preloads when
+* the browser is idle (`usePreloadWhenIdle`).
+*/
+function usePreloadOnIntent(ref, preload, enabled) {
+	usePreloadWhenIdle(preload, enabled);
+	useEffect(() => {
+		const element = ref.current;
+		if (!enabled || !element) return;
+		const onIntent = () => void preload().catch(() => void 0);
+		element.addEventListener("pointerover", onIntent);
+		element.addEventListener("focusin", onIntent);
+		return () => {
+			element.removeEventListener("pointerover", onIntent);
+			element.removeEventListener("focusin", onIntent);
+		};
+	}, [
+		ref,
+		preload,
+		enabled
+	]);
+}
+//#endregion
+export { IDLE_FALLBACK_DELAY, onDemand, usePreloadOnIntent, usePreloadWhenIdle };
+
+//# sourceMappingURL=load-on-demand.js.map

package/dist/utils/load-on-demand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-on-demand.js","names":[],"sources":["../../src/utils/load-on-demand.tsx"],"sourcesContent":["import { useEffect, useState, type ComponentType, type RefObject } from 'react';\n\n/** A component whose module loads the first time it renders, or ahead of that. */\nexport interface OnDemandComponent<P extends object> {\n  /**\n   * Starts loading the module, once; later calls return the same promise. A failed load (say,\n   * a dropped connection) is tried again on the next call.\n   */\n  preload: () => Promise<ComponentType<P>>;\n  /**\n   * Renders the component once its module has loaded, and nothing until then; mounting it\n   * starts the load. A failed load renders nothing and is tried again on the next mount or\n   * `preload`.\n   */\n  Component: ComponentType<P>;\n}\n\n/**\n * Loads a component on demand, for parts a component shows only sometimes (a tooltip on\n * hover, a loading indicator while loading), so it doesn't carry their code up front.\n *\n * Unlike `React.lazy` it never suspends: once the module is in, the component renders in the\n * same pass, and on first use it renders as soon as the module arrives. A `Suspense` boundary\n * would hold back content that resolves after its fallback showed (React throttles those\n * reveals by up to 300ms), so a part preloaded on hover would still show late.\n */\nexport function onDemand<P extends object>(\n  load: () => Promise<ComponentType<P>>,\n): OnDemandComponent<P> {\n  let loaded: ComponentType<P> | undefined;\n  let pending: Promise<ComponentType<P>> | undefined;\n\n  const preload = () => {\n    pending ??= load().then(\n      (component) => (loaded = component),\n      (error: unknown) => {\n        pending = undefined;\n        throw error;\n      },\n    );\n    return pending;\n  };\n\n  function Component(props: P) {\n    // Re-renders once the module arrives; `loaded` holds the component.\n    const [, setArrived] = useState(false);\n    useEffect(() => {\n      if (loaded) return;\n      let mounted = true;\n      preload().then(\n        () => mounted && setArrived(true),\n        () => undefined,\n      );\n      return () => {\n        mounted = false;\n      };\n    }, []);\n    const Loaded = loaded;\n    return Loaded ? <Loaded {...props} /> : null;\n  }\n\n  return { preload, Component };\n}\n\n/** How long after mounting a browser without `requestIdleCallback` waits before preloading. */\nexport const IDLE_FALLBACK_DELAY = 1000;\n\n/** A mounted part waiting for the browser's next idle period, with the preload it wants. */\ninterface IdleEntry {\n  preload: () => Promise<unknown>;\n}\n\nconst idleQueue = new Set<IdleEntry>();\nlet cancelIdle: (() => void) | undefined;\n\nfunction whenIdle(run: () => void): () => void {\n  if (typeof window.requestIdleCallback === 'function') {\n    const handle = window.requestIdleCallback(run);\n    return () => window.cancelIdleCallback(handle);\n  }\n  const handle = window.setTimeout(run, IDLE_FALLBACK_DELAY);\n  return () => window.clearTimeout(handle);\n}\n\nfunction runIdlePreloads() {\n  cancelIdle = undefined;\n  const preloads = new Set([...idleQueue].map((entry) => entry.preload));\n  idleQueue.clear();\n  // A failed preload is left to the hover, focus or render that needs the part.\n  for (const preload of preloads) void preload().catch(() => undefined);\n}\n\n/** Whether the user asked to save data, where the browser tells. */\nfunction savesData() {\n  const { connection } = navigator as Navigator & { connection?: { saveData?: boolean } };\n  return connection?.saveData === true;\n}\n\n/**\n * Calls `preload` in the browser's first idle period after mount (or `IDLE_FALLBACK_DELAY`\n * later without `requestIdleCallback`), while `enabled`, so the part is usually in before it\n * first shows. One callback serves every mounted part. Never on the server, nor when the user\n * asked to save data.\n */\nexport function usePreloadWhenIdle(preload: () => Promise<unknown>, enabled: boolean) {\n  useEffect(() => {\n    if (!enabled || savesData()) return;\n    const entry: IdleEntry = { preload };\n    idleQueue.add(entry);\n    cancelIdle ??= whenIdle(runIdlePreloads);\n    return () => {\n      idleQueue.delete(entry);\n      if (idleQueue.size === 0 && cancelIdle) {\n        cancelIdle();\n        cancelIdle = undefined;\n      }\n    };\n  }, [preload, enabled]);\n}\n\n/**\n * Calls `preload` when the pointer moves over `ref`'s element or focus enters it, while\n * `enabled`: the moments a part shown on hover or focus becomes likely. It also preloads when\n * the browser is idle (`usePreloadWhenIdle`).\n */\nexport function usePreloadOnIntent(\n  ref: RefObject<HTMLElement | null>,\n  preload: () => Promise<unknown>,\n  enabled: boolean,\n) {\n  usePreloadWhenIdle(preload, enabled);\n  useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element) return;\n    // A failed preload is left to the render that needs the part, which loads again.\n    const onIntent = () => void preload().catch(() => undefined);\n    element.addEventListener('pointerover', onIntent);\n    element.addEventListener('focusin', onIntent);\n    return () => {\n      element.removeEventListener('pointerover', onIntent);\n      element.removeEventListener('focusin', onIntent);\n    };\n  }, [ref, preload, enabled]);\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,SACd,MACsB;CACtB,IAAI;CACJ,IAAI;CAEJ,MAAM,gBAAgB;EACpB,YAAY,KAAK,CAAC,CAAC,MAChB,cAAe,SAAS,YACxB,UAAmB;GAClB,UAAU,KAAA;GACV,MAAM;EACR,CACF;EACA,OAAO;CACT;CAEA,SAAS,UAAU,OAAU;EAE3B,MAAM,GAAG,cAAc,SAAS,KAAK;EACrC,gBAAgB;GACd,IAAI,QAAQ;GACZ,IAAI,UAAU;GACd,QAAQ,CAAC,CAAC,WACF,WAAW,WAAW,IAAI,SAC1B,KAAA,CACR;GACA,aAAa;IACX,UAAU;GACZ;EACF,GAAG,CAAC,CAAC;EACL,MAAM,SAAS;EACf,OAAO,SAAS,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA,IAAI;CAC1C;CAEA,OAAO;EAAE;EAAS;CAAU;AAC9B;;AAGA,MAAa,sBAAsB;AAOnC,MAAM,4BAAY,IAAI,IAAe;AACrC,IAAI;AAEJ,SAAS,SAAS,KAA6B;CAC7C,IAAI,OAAO,OAAO,wBAAwB,YAAY;EACpD,MAAM,SAAS,OAAO,oBAAoB,GAAG;EAC7C,aAAa,OAAO,mBAAmB,MAAM;CAC/C;CACA,MAAM,SAAS,OAAO,WAAW,KAAK,mBAAmB;CACzD,aAAa,OAAO,aAAa,MAAM;AACzC;AAEA,SAAS,kBAAkB;CACzB,aAAa,KAAA;CACb,MAAM,WAAW,IAAI,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,KAAK,UAAU,MAAM,OAAO,CAAC;CACrE,UAAU,MAAM;CAEhB,KAAK,MAAM,WAAW,UAAU,QAAa,CAAC,CAAC,YAAY,KAAA,CAAS;AACtE;;AAGA,SAAS,YAAY;CACnB,MAAM,EAAE,eAAe;CACvB,OAAO,YAAY,aAAa;AAClC;;;;;;;AAQA,SAAgB,mBAAmB,SAAiC,SAAkB;CACpF,gBAAgB;EACd,IAAI,CAAC,WAAW,UAAU,GAAG;EAC7B,MAAM,QAAmB,EAAE,QAAQ;EACnC,UAAU,IAAI,KAAK;EACnB,eAAe,SAAS,eAAe;EACvC,aAAa;GACX,UAAU,OAAO,KAAK;GACtB,IAAI,UAAU,SAAS,KAAK,YAAY;IACtC,WAAW;IACX,aAAa,KAAA;GACf;EACF;CACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACvB;;;;;;AAOA,SAAgB,mBACd,KACA,SACA,SACA;CACA,mBAAmB,SAAS,OAAO;CACnC,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,WAAW,CAAC,SAAS;EAE1B,MAAM,iBAAiB,KAAK,QAAQ,CAAC,CAAC,YAAY,KAAA,CAAS;EAC3D,QAAQ,iBAAiB,eAAe,QAAQ;EAChD,QAAQ,iBAAiB,WAAW,QAAQ;EAC5C,aAAa;GACX,QAAQ,oBAAoB,eAAe,QAAQ;GACnD,QAAQ,oBAAoB,WAAW,QAAQ;EACjD;CACF,GAAG;EAAC;EAAK;EAAS;CAAO,CAAC;AAC5B"}

package/dist/utils/merge-data-tokens.d.ts

@@ -0,0 +1,9 @@
+//#region src/utils/merge-data-tokens.d.ts
+/**
+ * A component's own `data-tokens` set followed by the sets an app passed in
+ * `props['data-tokens']`, each once (`"md-comp-assist-chip app-reaction"`). Token rules match
+ * with `~=`, so the root keeps the component's styles and takes the app's.
+ */
+export declare function mergeDataTokens(own: string, props?: object | null): string;
+//#endregion
+//# sourceMappingURL=merge-data-tokens.d.ts.map

package/dist/utils/merge-data-tokens.js

@@ -0,0 +1,15 @@
+//#region src/utils/merge-data-tokens.ts
+/**
+* A component's own `data-tokens` set followed by the sets an app passed in
+* `props['data-tokens']`, each once (`"md-comp-assist-chip app-reaction"`). Token rules match
+* with `~=`, so the root keeps the component's styles and takes the app's.
+*/
+function mergeDataTokens(own, props) {
+	const incoming = props?.["data-tokens"];
+	if (typeof incoming !== "string") return own;
+	return [...new Set(`${own} ${incoming}`.split(/\s+/).filter(Boolean))].join(" ");
+}
+//#endregion
+export { mergeDataTokens };
+
+//# sourceMappingURL=merge-data-tokens.js.map

package/dist/utils/merge-data-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-data-tokens.js","names":[],"sources":["../../src/utils/merge-data-tokens.ts"],"sourcesContent":["/**\n * A component's own `data-tokens` set followed by the sets an app passed in\n * `props['data-tokens']`, each once (`\"md-comp-assist-chip app-reaction\"`). Token rules match\n * with `~=`, so the root keeps the component's styles and takes the app's.\n */\nexport function mergeDataTokens(own: string, props?: object | null): string {\n  const incoming = (props as { 'data-tokens'?: unknown } | null | undefined)?.['data-tokens'];\n  if (typeof incoming !== 'string') return own;\n  return [...new Set(`${own} ${incoming}`.split(/\\s+/).filter(Boolean))].join(' ');\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB,KAAa,OAA+B;CAC1E,MAAM,WAAY,QAA2D;CAC7E,IAAI,OAAO,aAAa,UAAU,OAAO;CACzC,OAAO,CAAC,GAAG,IAAI,IAAI,GAAG,IAAI,GAAG,WAAW,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG;AACjF"}

package/dist/utils/natural-size.js

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/utils/natural-size.ts
+/**
+* Measures an element's natural length on one axis (its used `width` or `height`, in
+* fractional px and untouched by transforms, as a scaled-down hidden FAB is), again whenever
+* it resizes, so a wrapper can animate its own width or height between 0 and that length.
+* A length in px lets a spring's overshoot show, which a `0fr ↔ 1fr` grid track can't (it
+* never passes its content's size). The element must keep its natural size while the
+* wrapper is closed (`w-max` / `h-max`, or `shrink-0`). The size is `undefined` until
+* measured (and on the server), so the wrapper can fall back to its natural size.
+*
+* `resized` is true for one frame after the content itself changed size (a web font
+* arriving, new text): the wrapper should follow it at once (`data-resized`, no
+* transition), as a grid track would, instead of springing to it.
+*/
+function useNaturalSize(axis = "width", enabled = true) {
+	const ref = useRef(null);
+	const [size, setSize] = useState();
+	const [resized, setResized] = useState(false);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!enabled || !element) return;
+		let measured;
+		const measure = () => {
+			const used = parseFloat(getComputedStyle(element)[axis]);
+			const next = Number.isNaN(used) ? void 0 : used;
+			if (next === measured) return;
+			if (measured !== void 0) setResized(true);
+			measured = next;
+			setSize(next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [axis, enabled]);
+	useEffect(() => {
+		if (!resized) return;
+		const frame = requestAnimationFrame(() => setResized(false));
+		return () => cancelAnimationFrame(frame);
+	}, [resized, size]);
+	return [
+		ref,
+		size,
+		resized
+	];
+}
+//#endregion
+export { useNaturalSize };
+
+//# sourceMappingURL=natural-size.js.map