@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/lib/flip.js

@@ -0,0 +1,88 @@
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "./motion.js";
+import { useRef } from "react";
+//#region src/lib/flip.ts
+/**
+* Siblings that shift because something next to them changed size (a wider month
+* name pushes the day and year along) slide to their new place instead of
+* jumping: measure where each `[data-flip]` element was, let the new layout
+* commit, put each one back where it was with a translate, then release it on a
+* transition. CSS cannot do this alone, because the layout move is not a style
+* change.
+*
+* `key` says when to look. Positions are remembered after every look and
+* refreshed when the container resizes, so a move that is not a change of `key`
+* (a window resize) does not become the next flip. Reduced motion does not flip.
+* Elements inside a leaving copy (`[data-leaving]`) are ignored.
+*
+* @param duration CSS time of the slide, e.g. `var(--duration-standard)`.
+* @param easing CSS easing of the slide, e.g. `var(--ease-enter)`.
+* @param relative Measure positions from the container's own corner instead of the
+* viewport's, so scrolling the page between two looks is not mistaken for the elements
+* moving. For lists whose container stays put (rows of a table); content that also moves
+* because its container does (centred text) wants the default.
+*/
+function useFlip(container, key, duration = "var(--duration-standard)", easing = "var(--ease-enter)", relative = false) {
+	const remembered = useRef(/* @__PURE__ */ new Map());
+	const measure = () => {
+		const root = container.current;
+		const next = /* @__PURE__ */ new Map();
+		if (!root) return next;
+		const origin = relative ? root.getBoundingClientRect() : {
+			left: 0,
+			top: 0
+		};
+		for (const el of root.querySelectorAll("[data-flip]")) {
+			if (el.closest("[data-leaving]")) continue;
+			const box = el.getBoundingClientRect();
+			next.set(el, {
+				left: box.left - origin.left,
+				top: box.top - origin.top
+			});
+		}
+		return next;
+	};
+	useIsomorphicLayoutEffect(() => {
+		const root = container.current;
+		if (!root) return;
+		const before = remembered.current;
+		const after = measure();
+		if (before.size > 0 && !prefersReducedMotion()) {
+			const moved = [];
+			for (const [el, now] of after) {
+				const was = before.get(el);
+				if (!was) continue;
+				const dx = was.left - now.left;
+				const dy = was.top - now.top;
+				if (Math.abs(dx) < .5 && Math.abs(dy) < .5) continue;
+				const node = el;
+				node.style.transition = "none";
+				node.style.translate = `${dx}px ${dy}px`;
+				moved.push(node);
+			}
+			if (moved.length > 0) {
+				root.offsetWidth;
+				for (const node of moved) {
+					node.style.transition = `translate ${duration} ${easing}`;
+					node.style.translate = "";
+					node.addEventListener("transitionend", () => {
+						node.style.transition = "";
+					}, { once: true });
+				}
+			}
+		}
+		remembered.current = after;
+	}, [key]);
+	useIsomorphicLayoutEffect(() => {
+		const root = container.current;
+		if (!root || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			remembered.current = measure();
+		});
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, []);
+}
+//#endregion
+export { useFlip };
+
+//# sourceMappingURL=flip.js.map

package/dist/lib/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip.js","names":[],"sources":["../../src/lib/flip.ts"],"sourcesContent":["import { useRef, type RefObject } from \"react\";\n\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"./motion.js\";\n\n/**\n * Siblings that shift because something next to them changed size (a wider month\n * name pushes the day and year along) slide to their new place instead of\n * jumping: measure where each `[data-flip]` element was, let the new layout\n * commit, put each one back where it was with a translate, then release it on a\n * transition. CSS cannot do this alone, because the layout move is not a style\n * change.\n *\n * `key` says when to look. Positions are remembered after every look and\n * refreshed when the container resizes, so a move that is not a change of `key`\n * (a window resize) does not become the next flip. Reduced motion does not flip.\n * Elements inside a leaving copy (`[data-leaving]`) are ignored.\n *\n * @param duration CSS time of the slide, e.g. `var(--duration-standard)`.\n * @param easing CSS easing of the slide, e.g. `var(--ease-enter)`.\n * @param relative Measure positions from the container's own corner instead of the\n * viewport's, so scrolling the page between two looks is not mistaken for the elements\n * moving. For lists whose container stays put (rows of a table); content that also moves\n * because its container does (centred text) wants the default.\n */\nexport function useFlip(\n  container: RefObject<HTMLElement | null>,\n  key: unknown,\n  duration = \"var(--duration-standard)\",\n  easing = \"var(--ease-enter)\",\n  relative = false,\n) {\n  const remembered = useRef(new Map<Element, { left: number; top: number }>());\n\n  const measure = () => {\n    const root = container.current;\n    const next = new Map<Element, { left: number; top: number }>();\n    if (!root) return next;\n    const origin = relative ? root.getBoundingClientRect() : { left: 0, top: 0 };\n    for (const el of root.querySelectorAll<HTMLElement>(\"[data-flip]\")) {\n      if (el.closest(\"[data-leaving]\")) continue;\n      const box = el.getBoundingClientRect();\n      next.set(el, { left: box.left - origin.left, top: box.top - origin.top });\n    }\n    return next;\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    const root = container.current;\n    if (!root) return;\n    const before = remembered.current;\n    const after = measure();\n    if (before.size > 0 && !prefersReducedMotion()) {\n      const moved: HTMLElement[] = [];\n      for (const [el, now] of after) {\n        const was = before.get(el);\n        if (!was) continue;\n        const dx = was.left - now.left;\n        const dy = was.top - now.top;\n        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;\n        const node = el as HTMLElement;\n        node.style.transition = \"none\";\n        node.style.translate = `${dx}px ${dy}px`;\n        moved.push(node);\n      }\n      if (moved.length > 0) {\n        void root.offsetWidth;\n        for (const node of moved) {\n          node.style.transition = `translate ${duration} ${easing}`;\n          node.style.translate = \"\";\n          node.addEventListener(\n            \"transitionend\",\n            () => {\n              node.style.transition = \"\";\n            },\n            { once: true },\n          );\n        }\n      }\n    }\n    remembered.current = after;\n    // Positions are read once per change of `key`; a resize refreshes them below.\n  }, [key]);\n\n  useIsomorphicLayoutEffect(() => {\n    const root = container.current;\n    if (!root || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      remembered.current = measure();\n    });\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, []);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,QACd,WACA,KACA,WAAW,4BACX,SAAS,qBACT,WAAW,OACX;CACA,MAAM,aAAa,uBAAO,IAAI,IAA4C,CAAC;CAE3E,MAAM,gBAAgB;EACpB,MAAM,OAAO,UAAU;EACvB,MAAM,uBAAO,IAAI,IAA4C;EAC7D,IAAI,CAAC,MAAM,OAAO;EAClB,MAAM,SAAS,WAAW,KAAK,sBAAsB,IAAI;GAAE,MAAM;GAAG,KAAK;EAAE;EAC3E,KAAK,MAAM,MAAM,KAAK,iBAA8B,aAAa,GAAG;GAClE,IAAI,GAAG,QAAQ,gBAAgB,GAAG;GAClC,MAAM,MAAM,GAAG,sBAAsB;GACrC,KAAK,IAAI,IAAI;IAAE,MAAM,IAAI,OAAO,OAAO;IAAM,KAAK,IAAI,MAAM,OAAO;GAAI,CAAC;EAC1E;EACA,OAAO;CACT;CAEA,gCAAgC;EAC9B,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MAAM;EACX,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,QAAQ;EACtB,IAAI,OAAO,OAAO,KAAK,CAAC,qBAAqB,GAAG;GAC9C,MAAM,QAAuB,CAAC;GAC9B,KAAK,MAAM,CAAC,IAAI,QAAQ,OAAO;IAC7B,MAAM,MAAM,OAAO,IAAI,EAAE;IACzB,IAAI,CAAC,KAAK;IACV,MAAM,KAAK,IAAI,OAAO,IAAI;IAC1B,MAAM,KAAK,IAAI,MAAM,IAAI;IACzB,IAAI,KAAK,IAAI,EAAE,IAAI,MAAO,KAAK,IAAI,EAAE,IAAI,IAAK;IAC9C,MAAM,OAAO;IACb,KAAK,MAAM,aAAa;IACxB,KAAK,MAAM,YAAY,GAAG,GAAG,KAAK,GAAG;IACrC,MAAM,KAAK,IAAI;GACjB;GACA,IAAI,MAAM,SAAS,GAAG;IACpB,KAAU;IACV,KAAK,MAAM,QAAQ,OAAO;KACxB,KAAK,MAAM,aAAa,aAAa,SAAS,GAAG;KACjD,KAAK,MAAM,YAAY;KACvB,KAAK,iBACH,uBACM;MACJ,KAAK,MAAM,aAAa;KAC1B,GACA,EAAE,MAAM,KAAK,CACf;IACF;GACF;EACF;EACA,WAAW,UAAU;CAEvB,GAAG,CAAC,GAAG,CAAC;CAER,gCAAgC;EAC9B,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACpD,MAAM,WAAW,IAAI,qBAAqB;GACxC,WAAW,UAAU,QAAQ;EAC/B,CAAC;EACD,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;AACP"}

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/menu-highlight.js

@@ -0,0 +1,64 @@
+import { useCallback, useRef } from "react";
+//#region src/lib/menu-highlight.ts
+const ROWS = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* One highlight for a whole menu, drawn by the menu's ::before (the
+* `menu-highlight` utility) and moved from here: it appears in place on the
+* first row, glides between rows after that (pointer and arrow keys alike,
+* because React Aria focuses the row either way), and fades out shortly after
+* focus leaves the rows. A row marked `data-destructive` tints it red. Returns
+* the cleanup.
+*/
+function bindMenuHighlight(menu) {
+	let shown = false;
+	let timer = 0;
+	const hide = () => {
+		menu.removeAttribute("data-hl");
+		menu.removeAttribute("data-glide");
+		shown = false;
+	};
+	const onFocusIn = (event) => {
+		window.clearTimeout(timer);
+		const row = event.target.closest(ROWS);
+		if (!row || !menu.contains(row) || row.hasAttribute("data-disabled")) {
+			timer = window.setTimeout(hide, 70);
+			return;
+		}
+		if (shown) menu.setAttribute("data-glide", "");
+		else menu.removeAttribute("data-glide");
+		menu.style.setProperty("--hl-y", row.offsetTop + "px");
+		menu.style.setProperty("--hl-h", row.offsetHeight + "px");
+		if (row.hasAttribute("data-destructive")) menu.setAttribute("data-hl-tone", "destructive");
+		else menu.removeAttribute("data-hl-tone");
+		menu.setAttribute("data-hl", "");
+		shown = true;
+	};
+	const onFocusOut = (event) => {
+		if (menu.contains(event.relatedTarget)) return;
+		window.clearTimeout(timer);
+		hide();
+	};
+	menu.addEventListener("focusin", onFocusIn);
+	menu.addEventListener("focusout", onFocusOut);
+	return () => {
+		window.clearTimeout(timer);
+		menu.removeEventListener("focusin", onFocusIn);
+		menu.removeEventListener("focusout", onFocusOut);
+	};
+}
+/**
+* A ref callback for the element that carries `menu-highlight`. A menu that
+* mounts only while open (a popover) binds when it appears and unbinds when it
+* goes, so this is a callback ref rather than an effect.
+*/
+function useMenuHighlight() {
+	const unbind = useRef(void 0);
+	return useCallback((node) => {
+		unbind.current?.();
+		unbind.current = node ? bindMenuHighlight(node) : void 0;
+	}, []);
+}
+//#endregion
+export { useMenuHighlight };
+
+//# sourceMappingURL=menu-highlight.js.map

package/dist/lib/menu-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-highlight.js","names":[],"sources":["../../src/lib/menu-highlight.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\nconst ROWS = '[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]';\n\n/**\n * One highlight for a whole menu, drawn by the menu's ::before (the\n * `menu-highlight` utility) and moved from here: it appears in place on the\n * first row, glides between rows after that (pointer and arrow keys alike,\n * because React Aria focuses the row either way), and fades out shortly after\n * focus leaves the rows. A row marked `data-destructive` tints it red. Returns\n * the cleanup.\n */\nfunction bindMenuHighlight(menu: HTMLElement) {\n  let shown = false;\n  let timer = 0;\n  const hide = () => {\n    menu.removeAttribute(\"data-hl\");\n    menu.removeAttribute(\"data-glide\");\n    shown = false;\n  };\n  const onFocusIn = (event: FocusEvent) => {\n    window.clearTimeout(timer);\n    const row = (event.target as Element).closest<HTMLElement>(ROWS);\n    // Between rows (a gap, the separator, the menu itself) it waits a moment, so it can glide across.\n    if (!row || !menu.contains(row) || row.hasAttribute(\"data-disabled\")) {\n      timer = window.setTimeout(hide, 70);\n      return;\n    }\n    if (shown) menu.setAttribute(\"data-glide\", \"\");\n    else menu.removeAttribute(\"data-glide\");\n    menu.style.setProperty(\"--hl-y\", row.offsetTop + \"px\");\n    menu.style.setProperty(\"--hl-h\", row.offsetHeight + \"px\");\n    if (row.hasAttribute(\"data-destructive\")) menu.setAttribute(\"data-hl-tone\", \"destructive\");\n    else menu.removeAttribute(\"data-hl-tone\");\n    menu.setAttribute(\"data-hl\", \"\");\n    shown = true;\n  };\n  const onFocusOut = (event: FocusEvent) => {\n    if (menu.contains(event.relatedTarget as Node | null)) return;\n    window.clearTimeout(timer);\n    hide();\n  };\n  menu.addEventListener(\"focusin\", onFocusIn);\n  menu.addEventListener(\"focusout\", onFocusOut);\n  return () => {\n    window.clearTimeout(timer);\n    menu.removeEventListener(\"focusin\", onFocusIn);\n    menu.removeEventListener(\"focusout\", onFocusOut);\n  };\n}\n\n/**\n * A ref callback for the element that carries `menu-highlight`. A menu that\n * mounts only while open (a popover) binds when it appears and unbinds when it\n * goes, so this is a callback ref rather than an effect.\n */\nexport function useMenuHighlight() {\n  const unbind = useRef<(() => void) | undefined>(undefined);\n  return useCallback((node: HTMLElement | null) => {\n    unbind.current?.();\n    unbind.current = node ? bindMenuHighlight(node) : undefined;\n  }, []);\n}\n"],"mappings":";;AAEA,MAAM,OAAO;;;;;;;;;AAUb,SAAS,kBAAkB,MAAmB;CAC5C,IAAI,QAAQ;CACZ,IAAI,QAAQ;CACZ,MAAM,aAAa;EACjB,KAAK,gBAAgB,SAAS;EAC9B,KAAK,gBAAgB,YAAY;EACjC,QAAQ;CACV;CACA,MAAM,aAAa,UAAsB;EACvC,OAAO,aAAa,KAAK;EACzB,MAAM,MAAO,MAAM,OAAmB,QAAqB,IAAI;EAE/D,IAAI,CAAC,OAAO,CAAC,KAAK,SAAS,GAAG,KAAK,IAAI,aAAa,eAAe,GAAG;GACpE,QAAQ,OAAO,WAAW,MAAM,EAAE;GAClC;EACF;EACA,IAAI,OAAO,KAAK,aAAa,cAAc,EAAE;OACxC,KAAK,gBAAgB,YAAY;EACtC,KAAK,MAAM,YAAY,UAAU,IAAI,YAAY,IAAI;EACrD,KAAK,MAAM,YAAY,UAAU,IAAI,eAAe,IAAI;EACxD,IAAI,IAAI,aAAa,kBAAkB,GAAG,KAAK,aAAa,gBAAgB,aAAa;OACpF,KAAK,gBAAgB,cAAc;EACxC,KAAK,aAAa,WAAW,EAAE;EAC/B,QAAQ;CACV;CACA,MAAM,cAAc,UAAsB;EACxC,IAAI,KAAK,SAAS,MAAM,aAA4B,GAAG;EACvD,OAAO,aAAa,KAAK;EACzB,KAAK;CACP;CACA,KAAK,iBAAiB,WAAW,SAAS;CAC1C,KAAK,iBAAiB,YAAY,UAAU;CAC5C,aAAa;EACX,OAAO,aAAa,KAAK;EACzB,KAAK,oBAAoB,WAAW,SAAS;EAC7C,KAAK,oBAAoB,YAAY,UAAU;CACjD;AACF;;;;;;AAOA,SAAgB,mBAAmB;CACjC,MAAM,SAAS,OAAiC,KAAA,CAAS;CACzD,OAAO,aAAa,SAA6B;EAC/C,OAAO,UAAU;EACjB,OAAO,UAAU,OAAO,kBAAkB,IAAI,IAAI,KAAA;CACpD,GAAG,CAAC,CAAC;AACP"}

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