@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/lib/height-follow.js

@@ -0,0 +1,59 @@
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "./motion.js";
+import { useEffect, useRef } from "react";
+//#region src/lib/height-follow.ts
+/**
+* Keeps `frame` as tall as `content`, and lets it spring when the content changes
+* on purpose. Height stays `auto` at rest, so a passive reflow (a resize, a font
+* swap) follows at once. When `key` changes and the content's height changes within
+* 120ms of it, the old height is pinned before that frame paints, then released to
+* the new one on a transition (the frame's own `data-following` turns it on) and
+* returned to `auto` when it ends. Reduced motion never animates.
+*
+* `frame` clips only while it moves (`overflow: clip` under `data-following`), so a
+* focus ring is never cut at rest.
+*/
+function useHeightFollow(frame, content, key) {
+	const changedAt = useRef(0);
+	useIsomorphicLayoutEffect(() => {
+		changedAt.current = performance.now();
+	}, [key]);
+	useEffect(() => {
+		const box = frame.current;
+		const node = content.current;
+		if (!box || !node || typeof ResizeObserver === "undefined") return;
+		let last;
+		const settle = () => {
+			delete box.dataset.following;
+			box.style.height = "";
+		};
+		const onEnd = (event) => {
+			if (event.target === box && event.propertyName === "height") settle();
+		};
+		box.addEventListener("transitionend", onEnd);
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+			const from = last;
+			last = next;
+			if (prefersReducedMotion() || from === void 0 || from === next || performance.now() - changedAt.current > 120) {
+				settle();
+				return;
+			}
+			box.style.transition = "none";
+			box.style.height = `${from}px`;
+			box.offsetHeight;
+			box.style.transition = "";
+			box.dataset.following = "";
+			box.style.height = `${next}px`;
+		});
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			box.removeEventListener("transitionend", onEnd);
+		};
+	}, [frame, content]);
+}
+//#endregion
+export { useHeightFollow };
+
+//# sourceMappingURL=height-follow.js.map

package/dist/lib/height-follow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"height-follow.js","names":[],"sources":["../../src/lib/height-follow.ts"],"sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\n\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"./motion.js\";\n\n/**\n * Keeps `frame` as tall as `content`, and lets it spring when the content changes\n * on purpose. Height stays `auto` at rest, so a passive reflow (a resize, a font\n * swap) follows at once. When `key` changes and the content's height changes within\n * 120ms of it, the old height is pinned before that frame paints, then released to\n * the new one on a transition (the frame's own `data-following` turns it on) and\n * returned to `auto` when it ends. Reduced motion never animates.\n *\n * `frame` clips only while it moves (`overflow: clip` under `data-following`), so a\n * focus ring is never cut at rest.\n */\nexport function useHeightFollow(\n  frame: RefObject<HTMLElement | null>,\n  content: RefObject<HTMLElement | null>,\n  key: string,\n) {\n  const changedAt = useRef(0);\n  useIsomorphicLayoutEffect(() => {\n    changedAt.current = performance.now();\n  }, [key]);\n  useEffect(() => {\n    const box = frame.current;\n    const node = content.current;\n    if (!box || !node || typeof ResizeObserver === \"undefined\") return;\n    let last: number | undefined;\n    const settle = () => {\n      delete box.dataset.following;\n      box.style.height = \"\";\n    };\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === box && event.propertyName === \"height\") settle();\n    };\n    box.addEventListener(\"transitionend\", onEnd);\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;\n      const from = last;\n      last = next;\n      if (\n        prefersReducedMotion() ||\n        from === undefined ||\n        from === next ||\n        performance.now() - changedAt.current > 120\n      ) {\n        settle();\n        return;\n      }\n      // Pin the old height before this frame paints, then release to the new one.\n      box.style.transition = \"none\";\n      box.style.height = `${from}px`;\n      void box.offsetHeight;\n      box.style.transition = \"\";\n      box.dataset.following = \"\";\n      box.style.height = `${next}px`;\n    });\n    observer.observe(node);\n    return () => {\n      observer.disconnect();\n      box.removeEventListener(\"transitionend\", onEnd);\n    };\n  }, [frame, content]);\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,gBACd,OACA,SACA,KACA;CACA,MAAM,YAAY,OAAO,CAAC;CAC1B,gCAAgC;EAC9B,UAAU,UAAU,YAAY,IAAI;CACtC,GAAG,CAAC,GAAG,CAAC;CACR,gBAAgB;EACd,MAAM,MAAM,MAAM;EAClB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,OAAO,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EAC5D,IAAI;EACJ,MAAM,eAAe;GACnB,OAAO,IAAI,QAAQ;GACnB,IAAI,MAAM,SAAS;EACrB;EACA,MAAM,SAAS,UAA2B;GACxC,IAAI,MAAM,WAAW,OAAO,MAAM,iBAAiB,UAAU,OAAO;EACtE;EACA,IAAI,iBAAiB,iBAAiB,KAAK;EAC3C,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,IAAI,CAAC,OAAO;GACZ,MAAM,OAAO,MAAM,gBAAgB,EAAE,EAAE,aAAa,KAAK;GACzD,MAAM,OAAO;GACb,OAAO;GACP,IACE,qBAAqB,KACrB,SAAS,KAAA,KACT,SAAS,QACT,YAAY,IAAI,IAAI,UAAU,UAAU,KACxC;IACA,OAAO;IACP;GACF;GAEA,IAAI,MAAM,aAAa;GACvB,IAAI,MAAM,SAAS,GAAG,KAAK;GAC3B,IAAS;GACT,IAAI,MAAM,aAAa;GACvB,IAAI,QAAQ,YAAY;GACxB,IAAI,MAAM,SAAS,GAAG,KAAK;EAC7B,CAAC;EACD,SAAS,QAAQ,IAAI;EACrB,aAAa;GACX,SAAS,WAAW;GACpB,IAAI,oBAAoB,iBAAiB,KAAK;EAChD;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;AACrB"}

package/dist/lib/icon-swap.js

@@ -0,0 +1,47 @@
+import { cn } from "./cn.js";
+import { useExitBackstop, useLeavingItems } from "./motion.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/icon-swap.tsx
+/**
+* Swaps one icon for another: the old one scales away with a little blur while
+* the new one scales in on the snappy spring. `iconKey` says when it is a
+* different icon (a re-render of the same one stays still), and nothing animates
+* on first mount. The icons share one grid cell, so a leaving one needs no
+* position: it stays under the new one.
+*/
+function IconSwap({ iconKey, children, className, calm = false, tight = false, fill = false }) {
+	const phaseRef = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(iconKey, children, () => phaseRef.current);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-grid shrink-0 place-items-center", className),
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingIcon, {
+			id: item.id,
+			onDone: remove,
+			calm,
+			tight,
+			fill,
+			children: item.value
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref: phaseRef,
+			className: cn("col-start-1 row-start-1 inline-flex items-center justify-center" + (fill ? " size-full" : ""), changed && (calm ? "motion-safe:animate-glyph-in-calm motion-reduce:animate-fade-in" : tight ? "motion-safe:animate-icon-in-tight motion-reduce:animate-fade-in" : "motion-safe:animate-glyph-in motion-reduce:animate-fade-in")),
+			children
+		}, iconKey)]
+	});
+}
+function LeavingIcon({ id, onDone, calm, tight, fill, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: cn("col-start-1 row-start-1 inline-flex items-center justify-center" + (fill ? " size-full" : ""), calm ? "motion-safe:animate-glyph-out-calm motion-reduce:animate-fade-out" : tight ? "motion-safe:animate-icon-out-tight motion-reduce:animate-fade-out" : "motion-safe:animate-glyph-out motion-reduce:animate-fade-out"),
+		children
+	});
+}
+//#endregion
+export { IconSwap };
+
+//# sourceMappingURL=icon-swap.js.map

package/dist/lib/icon-swap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-swap.js","names":[],"sources":["../../src/lib/icon-swap.tsx"],"sourcesContent":["import { useCallback, useRef, type ReactNode } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport { useExitBackstop, useLeavingItems } from \"./motion.js\";\n\n/**\n * Swaps one icon for another: the old one scales away with a little blur while\n * the new one scales in on the snappy spring. `iconKey` says when it is a\n * different icon (a re-render of the same one stays still), and nothing animates\n * on first mount. The icons share one grid cell, so a leaving one needs no\n * position: it stays under the new one.\n */\nexport function IconSwap({\n  iconKey,\n  children,\n  className,\n  calm = false,\n  tight = false,\n  fill = false,\n}: {\n  iconKey: string;\n  children: ReactNode;\n  className?: string;\n  /** Slower, softer motion, for feedback that should never read as busy. */\n  calm?: boolean;\n  /** Scales from 0.55 rather than 0.6, for a small icon in a small box. */\n  tight?: boolean;\n  /** The icons fill the box they sit in, so an svg at width 100% has something to be 100% of. */\n  fill?: boolean;\n}) {\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems(iconKey, children, () => phaseRef.current);\n  return (\n    <span className={cn(\"inline-grid shrink-0 place-items-center\", className)}>\n      {leaving.map((item) => (\n        <LeavingIcon\n          key={item.id}\n          id={item.id}\n          onDone={remove}\n          calm={calm}\n          tight={tight}\n          fill={fill}\n        >\n          {item.value}\n        </LeavingIcon>\n      ))}\n      <span\n        key={iconKey}\n        ref={phaseRef}\n        className={cn(\n          \"col-start-1 row-start-1 inline-flex items-center justify-center\" +\n            (fill ? \" size-full\" : \"\"),\n          changed &&\n            (calm\n              ? \"motion-safe:animate-glyph-in-calm motion-reduce:animate-fade-in\"\n              : tight\n                ? \"motion-safe:animate-icon-in-tight motion-reduce:animate-fade-in\"\n                : \"motion-safe:animate-glyph-in motion-reduce:animate-fade-in\"),\n        )}\n      >\n        {children}\n      </span>\n    </span>\n  );\n}\n\nfunction LeavingIcon({\n  id,\n  onDone,\n  calm,\n  tight,\n  fill,\n  children,\n}: {\n  id: number;\n  onDone: (id: number) => void;\n  calm: boolean;\n  tight: boolean;\n  fill: boolean;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      className={cn(\n        \"col-start-1 row-start-1 inline-flex items-center justify-center\" +\n          (fill ? \" size-full\" : \"\"),\n        calm\n          ? \"motion-safe:animate-glyph-out-calm motion-reduce:animate-fade-out\"\n          : tight\n            ? \"motion-safe:animate-icon-out-tight motion-reduce:animate-fade-out\"\n            : \"motion-safe:animate-glyph-out motion-reduce:animate-fade-out\",\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,SAAS,EACvB,SACA,UACA,WACA,OAAO,OACP,QAAQ,OACR,OAAO,SAWN;CACD,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,EAAE,SAAS,SAAS,WAAW,gBAAgB,SAAS,gBAAgB,SAAS,OAAO;CAC9F,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,2CAA2C,SAAS;EAAxE,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,aAAD;GAEE,IAAI,KAAK;GACT,QAAQ;GACF;GACC;GACD;GAEL,UAAA,KAAK;EACK,GARN,KAAK,EAQC,CACd,GACD,oBAAC,QAAD;GAEE,KAAK;GACL,WAAW,GACT,qEACG,OAAO,eAAe,KACzB,YACG,OACG,oEACA,QACE,oEACA,6DACV;GAEC;EACG,GAdC,OAcD,CACF;;AAEV;AAEA,SAAS,YAAY,EACnB,IACA,QACA,MACA,OACA,MACA,YAQC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAC5B,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,WAAW,GACT,qEACG,OAAO,eAAe,KACzB,OACI,sEACA,QACE,sEACA,8DACR;EAEC;CACG,CAAA;AAEV"}

package/dist/lib/leaving-list.js

@@ -0,0 +1,57 @@
+import { useCallback, useState } from "react";
+//#region src/lib/leaving-list.ts
+/**
+* A list whose removed items stay on screen while they leave. Pass the current
+* items (each with a stable `id`); the result is what to render, in order: every
+* current item, with each removed one kept where it stood, flagged `leaving`.
+* The caller plays the exit and calls `done(id)` when it ends. An item that comes
+* back stops leaving. Nothing is kept on first render.
+*/
+function useLeavingList(items) {
+	const key = items.map((item) => item.id).join("\0");
+	const [seen, setSeen] = useState({
+		key,
+		items
+	});
+	const [gone, setGone] = useState([]);
+	if (seen.key !== key) {
+		const now = new Set(items.map((item) => item.id));
+		const added = seen.items.map((item, index) => now.has(item.id) ? null : {
+			item,
+			after: index > 0 ? seen.items[index - 1].id : null
+		}).filter((entry) => entry !== null);
+		setSeen({
+			key,
+			items
+		});
+		setGone((list) => [...list.filter((entry) => !now.has(entry.item.id) && !added.some((a) => a.item.id === entry.item.id)), ...added]);
+	}
+	const done = useCallback((id) => setGone((list) => list.filter((entry) => entry.item.id !== id)), []);
+	const out = [];
+	const place = (after) => {
+		for (const entry of gone) if (entry.after === after) out.push({
+			item: entry.item,
+			leaving: true
+		});
+	};
+	place(null);
+	for (const item of items) {
+		out.push({
+			item,
+			leaving: false
+		});
+		place(item.id);
+	}
+	for (const entry of gone) if (!out.some((o) => o.item.id === entry.item.id)) out.push({
+		item: entry.item,
+		leaving: true
+	});
+	return {
+		list: out,
+		done
+	};
+}
+//#endregion
+export { useLeavingList };
+
+//# sourceMappingURL=leaving-list.js.map

package/dist/lib/leaving-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaving-list.js","names":[],"sources":["../../src/lib/leaving-list.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\ninterface Gone<T> {\n  item: T;\n  /** The id of the item that stood before it, so it leaves where it was. `null`: it was first. */\n  after: string | null;\n}\n\n/**\n * A list whose removed items stay on screen while they leave. Pass the current\n * items (each with a stable `id`); the result is what to render, in order: every\n * current item, with each removed one kept where it stood, flagged `leaving`.\n * The caller plays the exit and calls `done(id)` when it ends. An item that comes\n * back stops leaving. Nothing is kept on first render.\n */\nexport function useLeavingList<T extends { id: string }>(items: readonly T[]) {\n  const key = items.map((item) => item.id).join(\"\\u0000\");\n  const [seen, setSeen] = useState({ key, items });\n  const [gone, setGone] = useState<Gone<T>[]>([]);\n  if (seen.key !== key) {\n    const now = new Set(items.map((item) => item.id));\n    const added = seen.items\n      .map((item, index): Gone<T> | null =>\n        now.has(item.id) ? null : { item, after: index > 0 ? seen.items[index - 1]!.id : null },\n      )\n      .filter((entry): entry is Gone<T> => entry !== null);\n    setSeen({ key, items });\n    setGone((list) => [\n      ...list.filter((entry) => !now.has(entry.item.id) && !added.some((a) => a.item.id === entry.item.id)),\n      ...added,\n    ]);\n  }\n  const done = useCallback(\n    (id: string) => setGone((list) => list.filter((entry) => entry.item.id !== id)),\n    [],\n  );\n\n  const out: { item: T; leaving: boolean }[] = [];\n  const place = (after: string | null) => {\n    for (const entry of gone) if (entry.after === after) out.push({ item: entry.item, leaving: true });\n  };\n  place(null);\n  for (const item of items) {\n    out.push({ item, leaving: false });\n    place(item.id);\n  }\n  // A leaver whose neighbour is gone too has nowhere to stand: it goes at the end.\n  for (const entry of gone) {\n    if (!out.some((o) => o.item.id === entry.item.id)) out.push({ item: entry.item, leaving: true });\n  }\n  return { list: out, done };\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,eAAyC,OAAqB;CAC5E,MAAM,MAAM,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,CAAC,KAAK,IAAQ;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE;EAAK;CAAM,CAAC;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAoB,CAAC,CAAC;CAC9C,IAAI,KAAK,QAAQ,KAAK;EACpB,MAAM,MAAM,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC;EAChD,MAAM,QAAQ,KAAK,MAChB,KAAK,MAAM,UACV,IAAI,IAAI,KAAK,EAAE,IAAI,OAAO;GAAE;GAAM,OAAO,QAAQ,IAAI,KAAK,MAAM,QAAQ,EAAE,CAAE,KAAK;EAAK,CACxF,CAAC,CACA,QAAQ,UAA4B,UAAU,IAAI;EACrD,QAAQ;GAAE;GAAK;EAAM,CAAC;EACtB,SAAS,SAAS,CAChB,GAAG,KAAK,QAAQ,UAAU,CAAC,IAAI,IAAI,MAAM,KAAK,EAAE,KAAK,CAAC,MAAM,MAAM,MAAM,EAAE,KAAK,OAAO,MAAM,KAAK,EAAE,CAAC,GACpG,GAAG,KACL,CAAC;CACH;CACA,MAAM,OAAO,aACV,OAAe,SAAS,SAAS,KAAK,QAAQ,UAAU,MAAM,KAAK,OAAO,EAAE,CAAC,GAC9E,CAAC,CACH;CAEA,MAAM,MAAuC,CAAC;CAC9C,MAAM,SAAS,UAAyB;EACtC,KAAK,MAAM,SAAS,MAAM,IAAI,MAAM,UAAU,OAAO,IAAI,KAAK;GAAE,MAAM,MAAM;GAAM,SAAS;EAAK,CAAC;CACnG;CACA,MAAM,IAAI;CACV,KAAK,MAAM,QAAQ,OAAO;EACxB,IAAI,KAAK;GAAE;GAAM,SAAS;EAAM,CAAC;EACjC,MAAM,KAAK,EAAE;CACf;CAEA,KAAK,MAAM,SAAS,MAClB,IAAI,CAAC,IAAI,MAAM,MAAM,EAAE,KAAK,OAAO,MAAM,KAAK,EAAE,GAAG,IAAI,KAAK;EAAE,MAAM,MAAM;EAAM,SAAS;CAAK,CAAC;CAEjG,OAAO;EAAE,MAAM;EAAK;CAAK;AAC3B"}

package/dist/lib/merge-refs.js

@@ -3,9 +3,9 @@
 * Combines a caller-supplied ref with a ref this component already needs for
 * its own purposes, so both receive the same node.
 *
-* Only two call sites need this -- Avatar's `measure` (image decode-state)
-* and ScrollArea's `region` (scrollTop reset) -- both already attached to the
-* same node the newly forwarded ref now also targets. A shared five-line
+* Three call sites need this -- Avatar's `measure` (image decode-state),
+* ScrollArea's `region` (scrollTop reset) and TabList's overflow watch --
+* each already attached to the same node the forwarded ref also targets. A shared five-line
 * helper for two call sites is the Rule of Two; anything more general (a
 * `useMergedRef` hook, React 19 ref-cleanup support) is speculative until a
 * third caller needs it.

package/dist/lib/merge-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.js","names":[],"sources":["../../src/lib/merge-refs.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\n/**\n * Combines a caller-supplied ref with a ref this component already needs for\n * its own purposes, so both receive the same node.\n *\n * Only two call sites need this -- Avatar's `measure` (image decode-state)\n * and ScrollArea's `region` (scrollTop reset) -- both already attached to the\n * same node the newly forwarded ref now also targets. A shared five-line\n * helper for two call sites is the Rule of Two; anything more general (a\n * `useMergedRef` hook, React 19 ref-cleanup support) is speculative until a\n * third caller needs it.\n */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as { current: T | null }).current = node;\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,UAAa,GAAG,MAA8C;CAC5E,QAAQ,SAAS;EACf,KAAK,MAAM,OAAO,MAChB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAA+B,UAAU;CAE3D;AACF"}
+{"version":3,"file":"merge-refs.js","names":[],"sources":["../../src/lib/merge-refs.ts"],"sourcesContent":["import type { Ref, RefCallback } from \"react\";\n\n/**\n * Combines a caller-supplied ref with a ref this component already needs for\n * its own purposes, so both receive the same node.\n *\n * Three call sites need this -- Avatar's `measure` (image decode-state),\n * ScrollArea's `region` (scrollTop reset) and TabList's overflow watch --\n * each already attached to the same node the forwarded ref also targets. A shared five-line\n * helper for two call sites is the Rule of Two; anything more general (a\n * `useMergedRef` hook, React 19 ref-cleanup support) is speculative until a\n * third caller needs it.\n */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as { current: T | null }).current = node;\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,UAAa,GAAG,MAA8C;CAC5E,QAAQ,SAAS;EACf,KAAK,MAAM,OAAO,MAChB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAA+B,UAAU;CAE3D;AACF"}

package/dist/lib/morph-text.js

@@ -0,0 +1,128 @@
+import { cn } from "./cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from "./motion.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/morph-text.tsx
+const toGlyphs = (chars, seq) => chars.map((char, order) => ({
+	id: seq + ":" + order,
+	char,
+	order,
+	seq
+}));
+/** Shared leading and trailing letters keep their identity, so only the changed run of text is replaced. */
+function useGlyphs(text) {
+	const [state, setState] = useState(() => ({
+		text,
+		seq: 0,
+		glyphs: toGlyphs([...text], 0)
+	}));
+	if (state.text === text) return state.glyphs;
+	const prev = [...state.text];
+	const next = [...text];
+	let start = 0;
+	let end = 0;
+	while (start < prev.length && start < next.length && prev[start] === next[start]) start++;
+	while (end < prev.length - start && end < next.length - start && prev[prev.length - 1 - end] === next[next.length - 1 - end]) end++;
+	if (start < 2) start = 0;
+	if (end < 2) end = 0;
+	const seq = state.seq + 1;
+	const glyphs = [
+		...state.glyphs.slice(0, start),
+		...toGlyphs(next.slice(start, next.length - end), seq),
+		...state.glyphs.slice(state.glyphs.length - end)
+	];
+	setState({
+		text,
+		seq,
+		glyphs
+	});
+	return glyphs;
+}
+function LeavingLetter({ glyph, onDone, calm }) {
+	const { id } = glyph;
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: glyph.rect,
+		className: calm ? "absolute inline-block motion-safe:animate-letter-out-calm motion-reduce:animate-fade-out" : "absolute inline-block motion-safe:animate-letter-out motion-reduce:animate-fade-out",
+		children: glyph.char
+	});
+}
+/**
+* One label morphing into the next: letters both labels share glide into their
+* new place, new ones rise in from a soft blur, removed ones lift away, and the
+* width follows on a spring. The glide is a FLIP: the letter is moved back to
+* where it was, then transitioned to where it is.
+*/
+function MorphText({ text, morphWidth = true, calm = false }) {
+	const glyphs = useGlyphs(text);
+	const rowRef = useRef(null);
+	const before = useRef(/* @__PURE__ */ new Map());
+	const [leaving, setLeaving] = useState([]);
+	useMorphWidth(rowRef, text, morphWidth);
+	useIsomorphicLayoutEffect(() => {
+		const row = rowRef.current;
+		if (!row) return;
+		const now = /* @__PURE__ */ new Map();
+		const reduced = prefersReducedMotion();
+		for (const node of row.querySelectorAll("[data-glyph]")) {
+			const id = node.dataset.glyph;
+			const rect = {
+				left: node.offsetLeft,
+				top: node.offsetTop,
+				width: node.offsetWidth,
+				height: node.offsetHeight
+			};
+			const was = before.current.get(id);
+			now.set(id, {
+				rect,
+				char: node.textContent ?? ""
+			});
+			if (was && !reduced) {
+				const dx = was.rect.left - rect.left;
+				if (Math.abs(dx) > .5) {
+					node.style.transition = "none";
+					node.style.translate = dx + "px 0";
+					node.offsetWidth;
+					node.style.transition = calm ? "translate var(--duration-calm) var(--ease-calm)" : "translate var(--duration-morph) var(--ease-morph)";
+					node.style.translate = "0 0";
+				}
+			}
+		}
+		const gone = [];
+		for (const [id, was] of before.current) if (!now.has(id)) gone.push({
+			id,
+			char: was.char,
+			rect: was.rect
+		});
+		before.current = now;
+		if (gone.length) setLeaving((list) => [...list, ...gone]);
+	});
+	const finish = useCallback((id) => setLeaving((list) => list.filter((glyph) => glyph.id !== id)), []);
+	return /* @__PURE__ */ jsx("span", {
+		className: morphWidth ? "button-slot [--morph-clip:inset(-.6em_0_-.6em_-.3em)]" : "inline-flex min-w-0",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: rowRef,
+			className: "relative inline-flex flex-none whitespace-pre",
+			children: [leaving.map((glyph) => /* @__PURE__ */ jsx(LeavingLetter, {
+				glyph,
+				onDone: finish,
+				calm
+			}, glyph.id)), glyphs.map((glyph) => /* @__PURE__ */ jsx("span", {
+				"data-glyph": glyph.id,
+				style: { "--letter-delay": (calm ? Math.min(glyph.order * 20, 120) : Math.min(glyph.order * 16, 100)) + "ms" },
+				className: cn("inline-block", glyph.seq > 0 && (calm ? "motion-safe:animate-letter-in-calm motion-safe:[animation-delay:var(--letter-delay)] motion-reduce:animate-fade-in" : "motion-safe:animate-letter-in motion-safe:[animation-delay:var(--letter-delay)] motion-reduce:animate-fade-in")),
+				children: glyph.char
+			}, glyph.id))]
+		})
+	});
+}
+//#endregion
+export { MorphText };
+
+//# sourceMappingURL=morph-text.js.map

package/dist/lib/morph-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-text.js","names":[],"sources":["../../src/lib/morph-text.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type CSSProperties } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport {\n  prefersReducedMotion,\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useMorphWidth,\n  type Rect,\n} from \"./motion.js\";\n\ninterface Glyph {\n  id: string;\n  char: string;\n  /** Position within the replaced run, which staggers its entrance. */\n  order: number;\n  /** 0 for the letters the component mounted with, which do not animate in. */\n  seq: number;\n}\n\nconst toGlyphs = (chars: string[], seq: number): Glyph[] =>\n  chars.map((char, order) => ({ id: seq + \":\" + order, char, order, seq }));\n\n/** Shared leading and trailing letters keep their identity, so only the changed run of text is replaced. */\nfunction useGlyphs(text: string) {\n  const [state, setState] = useState(() => ({ text, seq: 0, glyphs: toGlyphs([...text], 0) }));\n  if (state.text === text) return state.glyphs;\n  const prev = [...state.text];\n  const next = [...text];\n  let start = 0;\n  let end = 0;\n  while (start < prev.length && start < next.length && prev[start] === next[start]) start++;\n  while (\n    end < prev.length - start &&\n    end < next.length - start &&\n    prev[prev.length - 1 - end] === next[next.length - 1 - end]\n  )\n    end++;\n  if (start < 2) start = 0;\n  if (end < 2) end = 0;\n  const seq = state.seq + 1;\n  const glyphs = [\n    ...state.glyphs.slice(0, start),\n    ...toGlyphs(next.slice(start, next.length - end), seq),\n    ...state.glyphs.slice(state.glyphs.length - end),\n  ];\n  setState({ text, seq, glyphs });\n  return glyphs;\n}\n\ninterface LeavingGlyph {\n  id: string;\n  char: string;\n  rect: Rect;\n}\n\nfunction LeavingLetter({\n  glyph,\n  onDone,\n  calm,\n}: {\n  glyph: LeavingGlyph;\n  onDone: (id: string) => void;\n  calm: boolean;\n}) {\n  const { id } = glyph;\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={glyph.rect}\n      className={\n        calm\n          ? \"absolute inline-block motion-safe:animate-letter-out-calm motion-reduce:animate-fade-out\"\n          : \"absolute inline-block motion-safe:animate-letter-out motion-reduce:animate-fade-out\"\n      }\n    >\n      {glyph.char}\n    </span>\n  );\n}\n\n/**\n * One label morphing into the next: letters both labels share glide into their\n * new place, new ones rise in from a soft blur, removed ones lift away, and the\n * width follows on a spring. The glide is a FLIP: the letter is moved back to\n * where it was, then transitioned to where it is.\n */\nexport function MorphText({\n  text,\n  morphWidth = true,\n  calm = false,\n}: {\n  text: string;\n  /** Spring the width to the new text. Off when the caller reserves the widest text or springs something wider. */\n  morphWidth?: boolean;\n  /** Slower, softer motion, for feedback that should never read as busy. */\n  calm?: boolean;\n}) {\n  const glyphs = useGlyphs(text);\n  const rowRef = useRef<HTMLSpanElement>(null);\n  const before = useRef(new Map<string, { rect: Rect; char: string }>());\n  const [leaving, setLeaving] = useState<LeavingGlyph[]>([]);\n\n  // The width slot is optional: a caller that wraps this in something wider (an icon beside it) springs that instead.\n  useMorphWidth(rowRef, text, morphWidth);\n\n  useIsomorphicLayoutEffect(() => {\n    const row = rowRef.current;\n    if (!row) return;\n    const now = new Map<string, { rect: Rect; char: string }>();\n    const reduced = prefersReducedMotion();\n    for (const node of row.querySelectorAll<HTMLElement>(\"[data-glyph]\")) {\n      const id = node.dataset.glyph!;\n      const rect = {\n        left: node.offsetLeft,\n        top: node.offsetTop,\n        width: node.offsetWidth,\n        height: node.offsetHeight,\n      };\n      const was = before.current.get(id);\n      now.set(id, { rect, char: node.textContent ?? \"\" });\n      if (was && !reduced) {\n        const dx = was.rect.left - rect.left;\n        if (Math.abs(dx) > 0.5) {\n          node.style.transition = \"none\";\n          node.style.translate = dx + \"px 0\";\n          void node.offsetWidth;\n          node.style.transition = calm\n            ? \"translate var(--duration-calm) var(--ease-calm)\"\n            : \"translate var(--duration-morph) var(--ease-morph)\";\n          node.style.translate = \"0 0\";\n        }\n      }\n    }\n    const gone: LeavingGlyph[] = [];\n    for (const [id, was] of before.current)\n      if (!now.has(id)) gone.push({ id, char: was.char, rect: was.rect });\n    before.current = now;\n    if (gone.length) setLeaving((list) => [...list, ...gone]);\n  });\n\n  const finish = useCallback(\n    (id: string) => setLeaving((list) => list.filter((glyph) => glyph.id !== id)),\n    [],\n  );\n\n  return (\n    <span\n      className={\n        morphWidth ? \"button-slot [--morph-clip:inset(-.6em_0_-.6em_-.3em)]\" : \"inline-flex min-w-0\"\n      }\n      aria-hidden=\"true\"\n    >\n      <span ref={rowRef} className=\"relative inline-flex flex-none whitespace-pre\">\n        {leaving.map((glyph) => (\n          <LeavingLetter key={glyph.id} glyph={glyph} onDone={finish} calm={calm} />\n        ))}\n        {glyphs.map((glyph) => (\n          <span\n            key={glyph.id}\n            data-glyph={glyph.id}\n            style={\n              {\n                \"--letter-delay\":\n                  (calm ? Math.min(glyph.order * 20, 120) : Math.min(glyph.order * 16, 100)) + \"ms\",\n              } as CSSProperties\n            }\n            className={cn(\n              \"inline-block\",\n              glyph.seq > 0 &&\n                (calm\n                  ? \"motion-safe:animate-letter-in-calm motion-safe:[animation-delay:var(--letter-delay)] motion-reduce:animate-fade-in\"\n                  : \"motion-safe:animate-letter-in motion-safe:[animation-delay:var(--letter-delay)] motion-reduce:animate-fade-in\"),\n            )}\n          >\n            {glyph.char}\n          </span>\n        ))}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/lib/motion.js

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/lib/motion.ts
+/** useLayoutEffect warns when rendered on the server in React 18, which this package supports; there it falls back to useEffect. */
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Springs the slot to the natural width of the incoming label when it changes,
+* so a new label never snaps the button's size. Only a resize within 700ms of a
+* label change morphs; any other resize (a late web font, a parent reflow),
+* the first measurement and reduced motion jump straight to the new width, so
+* nothing wobbles on first paint. data-morphing turns on the slot's width
+* transition and its clip-path (button-slot).
+*/
+function useMorphWidth(content, key, enabled = true) {
+	const lastKey = useRef(key);
+	const armedUntil = useRef(0);
+	useIsomorphicLayoutEffect(() => {
+		if (lastKey.current === key) return;
+		lastKey.current = key;
+		armedUntil.current = performance.now() + 700;
+	}, [key]);
+	useEffect(() => {
+		const node = content.current;
+		const slot = node?.parentElement;
+		if (!enabled || !node || !slot || typeof ResizeObserver === "undefined") return;
+		let measured = false;
+		let settle;
+		const done = () => {
+			clearTimeout(settle);
+			delete slot.dataset.morphing;
+		};
+		const onEnd = (event) => {
+			if (event.target === slot && event.propertyName === "width") done();
+		};
+		slot.addEventListener("transitionend", onEnd);
+		const apply = (next, at) => {
+			if (!next || !measured || prefersReducedMotion() || at > armedUntil.current) {
+				measured = next > 0;
+				slot.style.width = next ? next + "px" : "";
+				done();
+				return;
+			}
+			slot.dataset.morphing = "";
+			slot.style.width = next + "px";
+			clearTimeout(settle);
+			settle = setTimeout(done, 900);
+		};
+		let frame = 0;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const next = entry.contentRect.width;
+			const at = performance.now();
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => apply(next, at));
+		});
+		observer.observe(node);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			slot.removeEventListener("transitionend", onEnd);
+			clearTimeout(settle);
+		};
+	}, [content, enabled]);
+}
+/**
+* Runs remove after a backstop delay, in case an exit animation never ends (a
+* consumer who disables animation). The delay must outlast the animation:
+* 600ms covers the quick exits, a spring that settles in 736ms needs more.
+*/
+function useExitBackstop(active, remove, delay = 600) {
+	useEffect(() => {
+		if (!active) return;
+		const timer = setTimeout(remove, delay);
+		return () => clearTimeout(timer);
+	}, [
+		active,
+		remove,
+		delay
+	]);
+}
+/** A press goes a little deeper on an icon button and a little less on a wide one, so every size reads as the same push. */
+function pressScaleFor(width) {
+	return width > 220 ? "0.985" : width && width <= 48 ? "0.96" : "0.97";
+}
+/** True for a trigger that anchors a menu, popover or dialog; those never scale. */
+function anchorsLayer(props) {
+	const { "aria-haspopup": popup, role, "data-state": state } = props;
+	return popup !== void 0 && popup !== false && popup !== "false" || role === "combobox" || state !== void 0;
+}
+/**
+* Keeps the outgoing version of something on screen while its replacement
+* enters, which CSS alone cannot do: a node React unmounts is gone.
+*
+* `key` says when it has changed. On a change the previous `value` joins
+* `leaving`, stamped with the place it last occupied (read from `measure`,
+* the CURRENT node, after every commit); the caller renders each leaving item
+* out of flow at that rect with an exit animation and calls `remove` when it
+* ends. `changed` turns true on the first change, so nothing animates on first
+* mount. It must be a layout effect: the old node's position is DOM state that
+* only exists until the next paint.
+*/
+function useLeavingItems(key, value, measure) {
+	const previous = useRef({
+		key,
+		value
+	});
+	const rect = useRef({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	});
+	const nextId = useRef(0);
+	const [leaving, setLeaving] = useState([]);
+	const [changed, setChanged] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const old = previous.current;
+		if (old.key === key) return;
+		setLeaving((list) => [...list, {
+			id: nextId.current++,
+			value: old.value,
+			rect: rect.current
+		}]);
+		setChanged(true);
+	}, [key]);
+	useIsomorphicLayoutEffect(() => {
+		previous.current = {
+			key,
+			value
+		};
+		const node = measure();
+		if (node) rect.current = {
+			left: node.offsetLeft,
+			top: node.offsetTop,
+			width: node.offsetWidth,
+			height: node.offsetHeight
+		};
+	});
+	return {
+		leaving,
+		changed,
+		remove: useCallback((id) => setLeaving((list) => list.filter((item) => item.id !== id)), [])
+	};
+}
+/**
+* React Aria sets aria-disabled and data-pending on a pending button but
+* forwards no aria-busy, so a pending button was not announced as busy. Put the
+* returned ref on the button (merge it with any other); nothing else manages
+* this attribute on the element.
+*/
+function useAriaBusy(pending) {
+	const ref = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (pending) ref.current?.setAttribute("aria-busy", "true");
+		else ref.current?.removeAttribute("aria-busy");
+	}, [pending]);
+	return ref;
+}
+//#endregion
+export { anchorsLayer, prefersReducedMotion, pressScaleFor, useAriaBusy, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems, useMorphWidth };
+
+//# sourceMappingURL=motion.js.map

package/dist/lib/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","names":[],"sources":["../../src/lib/motion.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\n\n/*\n * Motion helpers shared by every component with button-like motion: the press\n * depth, the width that springs to fit new content, and the backstop for an\n * exit animation that never ends. Plain React and CSS, no animation library;\n * the animations themselves are keyframes and transitions in\n * @seekalfred/styles motion.css and the button-* utilities in styles.css.\n */\n\n/** useLayoutEffect warns when rendered on the server in React 18, which this package supports; there it falls back to useEffect. */\nexport const useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nexport const prefersReducedMotion = () =>\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n/**\n * Springs the slot to the natural width of the incoming label when it changes,\n * so a new label never snaps the button's size. Only a resize within 700ms of a\n * label change morphs; any other resize (a late web font, a parent reflow),\n * the first measurement and reduced motion jump straight to the new width, so\n * nothing wobbles on first paint. data-morphing turns on the slot's width\n * transition and its clip-path (button-slot).\n */\nexport function useMorphWidth(content: RefObject<HTMLElement | null>, key: string, enabled = true) {\n  const lastKey = useRef(key);\n  const armedUntil = useRef(0);\n  useIsomorphicLayoutEffect(() => {\n    if (lastKey.current === key) return;\n    lastKey.current = key;\n    armedUntil.current = performance.now() + 700;\n  }, [key]);\n  useEffect(() => {\n    const node = content.current;\n    const slot = node?.parentElement;\n    if (!enabled || !node || !slot || typeof ResizeObserver === \"undefined\") return;\n    let measured = false;\n    let settle: ReturnType<typeof setTimeout> | undefined;\n    const done = () => {\n      clearTimeout(settle);\n      delete slot.dataset.morphing;\n    };\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === slot && event.propertyName === \"width\") done();\n    };\n    slot.addEventListener(\"transitionend\", onEnd);\n    const apply = (next: number, at: number) => {\n      if (!next || !measured || prefersReducedMotion() || at > armedUntil.current) {\n        measured = next > 0;\n        slot.style.width = next ? next + \"px\" : \"\";\n        done();\n        return;\n      }\n      slot.dataset.morphing = \"\";\n      slot.style.width = next + \"px\";\n      // A morph that ends without a width transition (nothing to animate) would\n      // leave the clip-path on; this is the backstop.\n      clearTimeout(settle);\n      settle = setTimeout(done, 900);\n    };\n    // The write is deferred a frame. Setting the slot's width resizes whatever\n    // contains it, and if that is observed too (a segment in a button group) doing\n    // it inside this notification reports a ResizeObserver loop error.\n    let frame = 0;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const next = entry.contentRect.width;\n      const at = performance.now();\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => apply(next, at));\n    });\n    observer.observe(node);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      slot.removeEventListener(\"transitionend\", onEnd);\n      clearTimeout(settle);\n    };\n  }, [content, enabled]);\n}\n\n/**\n * Runs remove after a backstop delay, in case an exit animation never ends (a\n * consumer who disables animation). The delay must outlast the animation:\n * 600ms covers the quick exits, a spring that settles in 736ms needs more.\n */\nexport function useExitBackstop(active: boolean, remove: () => void, delay = 600) {\n  useEffect(() => {\n    if (!active) return;\n    const timer = setTimeout(remove, delay);\n    return () => clearTimeout(timer);\n  }, [active, remove, delay]);\n}\n\n/** A press goes a little deeper on an icon button and a little less on a wide one, so every size reads as the same push. */\nexport function pressScaleFor(width: number) {\n  return width > 220 ? \"0.985\" : width && width <= 48 ? \"0.96\" : \"0.97\";\n}\n\n/** True for a trigger that anchors a menu, popover or dialog; those never scale. */\nexport function anchorsLayer(props: object) {\n  const { \"aria-haspopup\": popup, role, \"data-state\": state } = props as Record<string, unknown>;\n  return (\n    (popup !== undefined && popup !== false && popup !== \"false\") ||\n    role === \"combobox\" ||\n    state !== undefined\n  );\n}\n\n/** Where a node sat inside its offset parent, in px. */\nexport interface Rect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\nexport interface LeavingItem<T> {\n  id: number;\n  value: T;\n  /** The place the node last occupied, so it can be popped out of flow right there. */\n  rect: Rect;\n}\n\n/**\n * Keeps the outgoing version of something on screen while its replacement\n * enters, which CSS alone cannot do: a node React unmounts is gone.\n *\n * `key` says when it has changed. On a change the previous `value` joins\n * `leaving`, stamped with the place it last occupied (read from `measure`,\n * the CURRENT node, after every commit); the caller renders each leaving item\n * out of flow at that rect with an exit animation and calls `remove` when it\n * ends. `changed` turns true on the first change, so nothing animates on first\n * mount. It must be a layout effect: the old node's position is DOM state that\n * only exists until the next paint.\n */\nexport function useLeavingItems<T>(key: string, value: T, measure: () => HTMLElement | null) {\n  const previous = useRef({ key, value });\n  const rect = useRef<Rect>({ left: 0, top: 0, width: 0, height: 0 });\n  const nextId = useRef(0);\n  const [leaving, setLeaving] = useState<LeavingItem<T>[]>([]);\n  const [changed, setChanged] = useState(false);\n\n  // Declared before the effect below, which overwrites the record this reads.\n  useIsomorphicLayoutEffect(() => {\n    const old = previous.current;\n    if (old.key === key) return;\n    setLeaving((list) => [...list, { id: nextId.current++, value: old.value, rect: rect.current }]);\n    setChanged(true);\n  }, [key]);\n\n  useIsomorphicLayoutEffect(() => {\n    previous.current = { key, value };\n    const node = measure();\n    if (node)\n      rect.current = {\n        left: node.offsetLeft,\n        top: node.offsetTop,\n        width: node.offsetWidth,\n        height: node.offsetHeight,\n      };\n  });\n\n  const remove = useCallback(\n    (id: number) => setLeaving((list) => list.filter((item) => item.id !== id)),\n    [],\n  );\n  return { leaving, changed, remove };\n}\n\n/**\n * React Aria sets aria-disabled and data-pending on a pending button but\n * forwards no aria-busy, so a pending button was not announced as busy. Put the\n * returned ref on the button (merge it with any other); nothing else manages\n * this attribute on the element.\n */\nexport function useAriaBusy(pending: boolean) {\n  const ref = useRef<HTMLElement | null>(null);\n  useIsomorphicLayoutEffect(() => {\n    if (pending) ref.current?.setAttribute(\"aria-busy\", \"true\");\n    else ref.current?.removeAttribute(\"aria-busy\");\n  }, [pending]);\n  return ref;\n}\n"],"mappings":"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"}

package/dist/lib/pausable-timeout.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef } from "react";
+//#region src/lib/pausable-timeout.ts
+/**
+* Calls `onExpire` after `ms`, unless held: while `hold()` is in effect the
+* clock stops and resumes where it was. `key` restarts it (a new state of
+* whatever is waiting). `ms` of 0 turns it off.
+*
+* Returns `setHeld`, which the caller drives from whatever should pause it (a
+* pointer resting on the control, a hidden tab).
+*/
+function usePausableTimeout(ms, key, onExpire) {
+	const expire = useRef(onExpire);
+	const held = useRef({
+		hover: false,
+		hidden: false
+	});
+	const clock = useRef(null);
+	useEffect(() => {
+		expire.current = onExpire;
+	});
+	useEffect(() => {
+		if (!ms) return;
+		let remaining = ms;
+		let startedAt = performance.now();
+		let timer;
+		let running = false;
+		const run = () => {
+			startedAt = performance.now();
+			running = true;
+			timer = setTimeout(() => {
+				running = false;
+				clock.current = null;
+				expire.current();
+			}, remaining);
+		};
+		const sync = () => {
+			const isHeld = held.current.hover || held.current.hidden;
+			if (isHeld && running) {
+				clearTimeout(timer);
+				remaining -= performance.now() - startedAt;
+				running = false;
+			} else if (!isHeld && !running) run();
+		};
+		clock.current = { sync };
+		sync();
+		return () => {
+			clearTimeout(timer);
+			clock.current = null;
+		};
+	}, [ms, key]);
+	useEffect(() => {
+		const onVisibility = () => {
+			held.current.hidden = document.hidden;
+			clock.current?.sync();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => document.removeEventListener("visibilitychange", onVisibility);
+	}, []);
+	return useCallback((hover) => {
+		held.current.hover = hover;
+		clock.current?.sync();
+	}, []);
+}
+//#endregion
+export { usePausableTimeout };
+
+//# sourceMappingURL=pausable-timeout.js.map

package/dist/lib/pausable-timeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pausable-timeout.js","names":[],"sources":["../../src/lib/pausable-timeout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\n/**\n * Calls `onExpire` after `ms`, unless held: while `hold()` is in effect the\n * clock stops and resumes where it was. `key` restarts it (a new state of\n * whatever is waiting). `ms` of 0 turns it off.\n *\n * Returns `setHeld`, which the caller drives from whatever should pause it (a\n * pointer resting on the control, a hidden tab).\n */\nexport function usePausableTimeout(ms: number, key: unknown, onExpire: () => void) {\n  const expire = useRef(onExpire);\n  const held = useRef({ hover: false, hidden: false });\n  const clock = useRef<{ sync: () => void } | null>(null);\n\n  useEffect(() => {\n    expire.current = onExpire;\n  });\n\n  useEffect(() => {\n    if (!ms) return;\n    let remaining = ms;\n    let startedAt = performance.now();\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let running = false;\n    const run = () => {\n      startedAt = performance.now();\n      running = true;\n      timer = setTimeout(() => {\n        running = false;\n        clock.current = null;\n        expire.current();\n      }, remaining);\n    };\n    const sync = () => {\n      const isHeld = held.current.hover || held.current.hidden;\n      if (isHeld && running) {\n        clearTimeout(timer);\n        remaining -= performance.now() - startedAt;\n        running = false;\n      } else if (!isHeld && !running) {\n        run();\n      }\n    };\n    clock.current = { sync };\n    sync();\n    return () => {\n      clearTimeout(timer);\n      clock.current = null;\n    };\n  }, [ms, key]);\n\n  useEffect(() => {\n    const onVisibility = () => {\n      held.current.hidden = document.hidden;\n      clock.current?.sync();\n    };\n    document.addEventListener(\"visibilitychange\", onVisibility);\n    return () => document.removeEventListener(\"visibilitychange\", onVisibility);\n  }, []);\n\n  return useCallback((hover: boolean) => {\n    held.current.hover = hover;\n    clock.current?.sync();\n  }, []);\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,mBAAmB,IAAY,KAAc,UAAsB;CACjF,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,OAAO,OAAO;EAAE,OAAO;EAAO,QAAQ;CAAM,CAAC;CACnD,MAAM,QAAQ,OAAoC,IAAI;CAEtD,gBAAgB;EACd,OAAO,UAAU;CACnB,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,IAAI;EACT,IAAI,YAAY;EAChB,IAAI,YAAY,YAAY,IAAI;EAChC,IAAI;EACJ,IAAI,UAAU;EACd,MAAM,YAAY;GAChB,YAAY,YAAY,IAAI;GAC5B,UAAU;GACV,QAAQ,iBAAiB;IACvB,UAAU;IACV,MAAM,UAAU;IAChB,OAAO,QAAQ;GACjB,GAAG,SAAS;EACd;EACA,MAAM,aAAa;GACjB,MAAM,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ;GAClD,IAAI,UAAU,SAAS;IACrB,aAAa,KAAK;IAClB,aAAa,YAAY,IAAI,IAAI;IACjC,UAAU;GACZ,OAAO,IAAI,CAAC,UAAU,CAAC,SACrB,IAAI;EAER;EACA,MAAM,UAAU,EAAE,KAAK;EACvB,KAAK;EACL,aAAa;GACX,aAAa,KAAK;GAClB,MAAM,UAAU;EAClB;CACF,GAAG,CAAC,IAAI,GAAG,CAAC;CAEZ,gBAAgB;EACd,MAAM,qBAAqB;GACzB,KAAK,QAAQ,SAAS,SAAS;GAC/B,MAAM,SAAS,KAAK;EACtB;EACA,SAAS,iBAAiB,oBAAoB,YAAY;EAC1D,aAAa,SAAS,oBAAoB,oBAAoB,YAAY;CAC5E,GAAG,CAAC,CAAC;CAEL,OAAO,aAAa,UAAmB;EACrC,KAAK,QAAQ,QAAQ;EACrB,MAAM,SAAS,KAAK;CACtB,GAAG,CAAC,CAAC;AACP"}