@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/lib/motion.js

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } 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;
+const subscribeReducedMotion = (notify) => {
+	const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+	query.addEventListener("change", notify);
+	return () => query.removeEventListener("change", notify);
+};
+/** Whether the visitor prefers reduced motion, kept current. False on the server and until hydrated. */
+const useReducedMotion = () => useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+/**
+* 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, useReducedMotion };
+
+//# 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, useSyncExternalStore, 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\nconst subscribeReducedMotion = (notify: () => void) => {\n  const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  query.addEventListener(\"change\", notify);\n  return () => query.removeEventListener(\"change\", notify);\n};\n\n/** Whether the visitor prefers reduced motion, kept current. False on the server and until hydrated. */\nexport const useReducedMotion = () =>\n  useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);\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":";;;AAWA,MAAa,4BACX,OAAO,WAAW,cAAc,YAAY;AAE9C,MAAa,6BACX,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAExD,MAAM,0BAA0B,WAAuB;CACrD,MAAM,QAAQ,OAAO,WAAW,kCAAkC;CAClE,MAAM,iBAAiB,UAAU,MAAM;CACvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;AACzD;;AAGA,MAAa,yBACX,qBAAqB,wBAAwB,4BAA4B,KAAK;;;;;;;;;AAUhF,SAAgB,cAAc,SAAwC,KAAa,UAAU,MAAM;CACjG,MAAM,UAAU,OAAO,GAAG;CAC1B,MAAM,aAAa,OAAO,CAAC;CAC3B,gCAAgC;EAC9B,IAAI,QAAQ,YAAY,KAAK;EAC7B,QAAQ,UAAU;EAClB,WAAW,UAAU,YAAY,IAAI,IAAI;CAC3C,GAAG,CAAC,GAAG,CAAC;CACR,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACzE,IAAI,WAAW;EACf,IAAI;EACJ,MAAM,aAAa;GACjB,aAAa,MAAM;GACnB,OAAO,KAAK,QAAQ;EACtB;EACA,MAAM,SAAS,UAA2B;GACxC,IAAI,MAAM,WAAW,QAAQ,MAAM,iBAAiB,SAAS,KAAK;EACpE;EACA,KAAK,iBAAiB,iBAAiB,KAAK;EAC5C,MAAM,SAAS,MAAc,OAAe;GAC1C,IAAI,CAAC,QAAQ,CAAC,YAAY,qBAAqB,KAAK,KAAK,WAAW,SAAS;IAC3E,WAAW,OAAO;IAClB,KAAK,MAAM,QAAQ,OAAO,OAAO,OAAO;IACxC,KAAK;IACL;GACF;GACA,KAAK,QAAQ,WAAW;GACxB,KAAK,MAAM,QAAQ,OAAO;GAG1B,aAAa,MAAM;GACnB,SAAS,WAAW,MAAM,GAAG;EAC/B;EAIA,IAAI,QAAQ;EACZ,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,IAAI,CAAC,OAAO;GACZ,MAAM,OAAO,MAAM,YAAY;GAC/B,MAAM,KAAK,YAAY,IAAI;GAC3B,qBAAqB,KAAK;GAC1B,QAAQ,4BAA4B,MAAM,MAAM,EAAE,CAAC;EACrD,CAAC;EACD,SAAS,QAAQ,IAAI;EACrB,aAAa;GACX,qBAAqB,KAAK;GAC1B,SAAS,WAAW;GACpB,KAAK,oBAAoB,iBAAiB,KAAK;GAC/C,aAAa,MAAM;EACrB;CACF,GAAG,CAAC,SAAS,OAAO,CAAC;AACvB;;;;;;AAOA,SAAgB,gBAAgB,QAAiB,QAAoB,QAAQ,KAAK;CAChF,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,QAAQ,WAAW,QAAQ,KAAK;EACtC,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAQ;EAAQ;CAAK,CAAC;AAC5B;;AAGA,SAAgB,cAAc,OAAe;CAC3C,OAAO,QAAQ,MAAM,UAAU,SAAS,SAAS,KAAK,SAAS;AACjE;;AAGA,SAAgB,aAAa,OAAe;CAC1C,MAAM,EAAE,iBAAiB,OAAO,MAAM,cAAc,UAAU;CAC9D,OACG,UAAU,KAAA,KAAa,UAAU,SAAS,UAAU,WACrD,SAAS,cACT,UAAU,KAAA;AAEd;;;;;;;;;;;;;AA6BA,SAAgB,gBAAmB,KAAa,OAAU,SAAmC;CAC3F,MAAM,WAAW,OAAO;EAAE;EAAK;CAAM,CAAC;CACtC,MAAM,OAAO,OAAa;EAAE,MAAM;EAAG,KAAK;EAAG,OAAO;EAAG,QAAQ;CAAE,CAAC;CAClE,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,CAAC,SAAS,cAAc,SAA2B,CAAC,CAAC;CAC3D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAG5C,gCAAgC;EAC9B,MAAM,MAAM,SAAS;EACrB,IAAI,IAAI,QAAQ,KAAK;EACrB,YAAY,SAAS,CAAC,GAAG,MAAM;GAAE,IAAI,OAAO;GAAW,OAAO,IAAI;GAAO,MAAM,KAAK;EAAQ,CAAC,CAAC;EAC9F,WAAW,IAAI;CACjB,GAAG,CAAC,GAAG,CAAC;CAER,gCAAgC;EAC9B,SAAS,UAAU;GAAE;GAAK;EAAM;EAChC,MAAM,OAAO,QAAQ;EACrB,IAAI,MACF,KAAK,UAAU;GACb,MAAM,KAAK;GACX,KAAK,KAAK;GACV,OAAO,KAAK;GACZ,QAAQ,KAAK;EACf;CACJ,CAAC;CAMD,OAAO;EAAE;EAAS;EAAS,QAJZ,aACZ,OAAe,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,OAAO,EAAE,CAAC,GAC1E,CAAC,CAE6B;CAAE;AACpC;;;;;;;AAQA,SAAgB,YAAY,SAAkB;CAC5C,MAAM,MAAM,OAA2B,IAAI;CAC3C,gCAAgC;EAC9B,IAAI,SAAS,IAAI,SAAS,aAAa,aAAa,MAAM;OACrD,IAAI,SAAS,gBAAgB,WAAW;CAC/C,GAAG,CAAC,OAAO,CAAC;CACZ,OAAO;AACT"}

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

package/dist/lib/rolling-value.js

@@ -0,0 +1,31 @@
+import { SwapText } from "./swap-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/rolling-value.tsx
+/**
+* The value shown in a picker's trigger. The caller's own text stays, visually
+* hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls
+* when it changes: a later value rises in from below, an earlier one drops in from
+* above, and the old one lifts away. Nothing animates on first mount. Long text is
+* cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose
+* first value arrives a render late makes that arrival the first mount.
+*/
+function RollingValue({ srValue, swapKey, dir, instanceKey, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "grid min-w-0 flex-1",
+		children: [srValue, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "min-w-0 overflow-hidden whitespace-nowrap",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey,
+				dir,
+				motion: "roll",
+				className: "flex items-center [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate",
+				children
+			}, instanceKey)
+		})]
+	});
+}
+//#endregion
+export { RollingValue };
+
+//# sourceMappingURL=rolling-value.js.map

package/dist/lib/rolling-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rolling-value.js","names":[],"sources":["../../src/lib/rolling-value.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { SwapText } from \"./swap-text.js\";\n\n/**\n * The value shown in a picker's trigger. The caller's own text stays, visually\n * hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls\n * when it changes: a later value rises in from below, an earlier one drops in from\n * above, and the old one lifts away. Nothing animates on first mount. Long text is\n * cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose\n * first value arrives a render late makes that arrival the first mount.\n */\nexport function RollingValue({\n  srValue,\n  swapKey,\n  dir,\n  instanceKey,\n  children,\n}: {\n  srValue: ReactNode;\n  swapKey: string;\n  dir: number;\n  instanceKey?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span className=\"grid min-w-0 flex-1\">\n      {srValue}\n      <span aria-hidden=\"true\" className=\"min-w-0 overflow-hidden whitespace-nowrap\">\n        <SwapText\n          key={instanceKey}\n          swapKey={swapKey}\n          dir={dir}\n          motion=\"roll\"\n          // A flex row, not a block of inline boxes: a truncated inline-block sits on the\n          // line's baseline, which stretches the line and leaves the text above centre.\n          className=\"flex items-center [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate\"\n        >\n          {children}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,SACA,SACA,KACA,aACA,YAOC;CACD,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,SACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,UAAD;IAEW;IACJ;IACL,QAAO;IAGP,WAAU;IAET;GACO,GATH,WASG;EACN,CAAA,CACF;;AAEV"}

package/dist/lib/spring-progress.js

@@ -0,0 +1,114 @@
+import { prefersReducedMotion } from "./motion.js";
+import { useEffect, useRef } from "react";
+//#region src/lib/spring-progress.ts
+/**
+* The morph spring (--ease-morph, --duration-morph: visualDuration 0.42s, bounce
+* 0.16), sampled every 16ms from Motion's solver. It is here as numbers because a
+* script has to evaluate it: CSS cannot interpolate the `d` of a path in every
+* browser, so an icon that morphs its outline drives the path from this.
+*/
+const MORPH_CURVE = [
+	0,
+	.0178,
+	.0636,
+	.1279,
+	.2033,
+	.2841,
+	.366,
+	.4459,
+	.5218,
+	.5921,
+	.6562,
+	.7136,
+	.7643,
+	.8086,
+	.8466,
+	.879,
+	.9063,
+	.9289,
+	.9475,
+	.9626,
+	.9746,
+	.9841,
+	.9914,
+	.9969,
+	1.001,
+	1.0038,
+	1.0058,
+	1.0069,
+	1.0075,
+	1.0077,
+	1.0076,
+	1.0072,
+	1.0067,
+	1.0062,
+	1.0055,
+	1.0049,
+	1.0043,
+	1.0037,
+	1.0032,
+	1.0027,
+	1.0022,
+	1.0018,
+	1.0015,
+	1.0012,
+	1.0009,
+	1.0007,
+	1
+];
+const MORPH_MS = 736;
+const ease = (t) => {
+	const at = t * MORPH_MS / 16;
+	const i = Math.min(Math.floor(at), MORPH_CURVE.length - 2);
+	const a = MORPH_CURVE[i];
+	return a + (MORPH_CURVE[i + 1] - a) * (at - i);
+};
+/**
+* Follows `target` (0 or 1) on the morph spring and reports progress to
+* `apply` every frame, mutating the DOM directly rather than re-rendering.
+* It is interruptible: a new target mid-flight starts from where the value is.
+* The first render, and reduced motion, jump straight to the target.
+*/
+function useSpringProgress(target, apply) {
+	const current = useRef(target);
+	const frame = useRef(0);
+	const applyRef = useRef(apply);
+	const first = useRef(true);
+	useEffect(() => {
+		applyRef.current = apply;
+	});
+	useEffect(() => {
+		cancelAnimationFrame(frame.current);
+		if (first.current || prefersReducedMotion()) {
+			first.current = false;
+			current.current = target;
+			applyRef.current(target);
+			return;
+		}
+		const from = current.current;
+		const start = performance.now();
+		const tick = (now) => {
+			const t = Math.min(Math.max((now - start) / MORPH_MS, 0), 1);
+			current.current = from + (target - from) * ease(t);
+			applyRef.current(current.current);
+			if (t < 1) frame.current = requestAnimationFrame(tick);
+		};
+		frame.current = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame.current);
+	}, [target]);
+}
+/** Interpolates the numbers of a path whose two states have the same commands. */
+function lerpPath(from, to, progress) {
+	const a = from.match(/-?\d*\.?\d+/g).map(Number);
+	const b = to.match(/-?\d*\.?\d+/g).map(Number);
+	let i = 0;
+	return from.replace(/-?\d*\.?\d+/g, () => {
+		const n = a[i] + (b[i] - a[i]) * progress;
+		i += 1;
+		return String(Math.round(n * 1e3) / 1e3);
+	});
+}
+//#endregion
+export { lerpPath, useSpringProgress };
+
+//# sourceMappingURL=spring-progress.js.map

package/dist/lib/spring-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring-progress.js","names":[],"sources":["../../src/lib/spring-progress.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport { prefersReducedMotion } from \"./motion.js\";\n\n/**\n * The morph spring (--ease-morph, --duration-morph: visualDuration 0.42s, bounce\n * 0.16), sampled every 16ms from Motion's solver. It is here as numbers because a\n * script has to evaluate it: CSS cannot interpolate the `d` of a path in every\n * browser, so an icon that morphs its outline drives the path from this.\n */\nconst MORPH_CURVE: readonly number[] = [\n  0, 0.0178, 0.0636, 0.1279, 0.2033, 0.2841, 0.366, 0.4459, 0.5218, 0.5921, 0.6562, 0.7136, 0.7643,\n  0.8086, 0.8466, 0.879, 0.9063, 0.9289, 0.9475, 0.9626, 0.9746, 0.9841, 0.9914, 0.9969, 1.001,\n  1.0038, 1.0058, 1.0069, 1.0075, 1.0077, 1.0076, 1.0072, 1.0067, 1.0062, 1.0055, 1.0049, 1.0043,\n  1.0037, 1.0032, 1.0027, 1.0022, 1.0018, 1.0015, 1.0012, 1.0009, 1.0007, 1,\n];\nconst MORPH_MS = 736;\n\nconst ease = (t: number) => {\n  const at = (t * MORPH_MS) / 16;\n  const i = Math.min(Math.floor(at), MORPH_CURVE.length - 2);\n  const a = MORPH_CURVE[i]!;\n  const b = MORPH_CURVE[i + 1]!;\n  return a + (b - a) * (at - i);\n};\n\n/**\n * Follows `target` (0 or 1) on the morph spring and reports progress to\n * `apply` every frame, mutating the DOM directly rather than re-rendering.\n * It is interruptible: a new target mid-flight starts from where the value is.\n * The first render, and reduced motion, jump straight to the target.\n */\nexport function useSpringProgress(target: number, apply: (progress: number) => void) {\n  const current = useRef(target);\n  const frame = useRef(0);\n  const applyRef = useRef(apply);\n  const first = useRef(true);\n\n  useEffect(() => {\n    applyRef.current = apply;\n  });\n\n  useEffect(() => {\n    cancelAnimationFrame(frame.current);\n    if (first.current || prefersReducedMotion()) {\n      first.current = false;\n      current.current = target;\n      applyRef.current(target);\n      return;\n    }\n    const from = current.current;\n    const start = performance.now();\n    const tick = (now: number) => {\n      // A frame's timestamp can precede `start`; a negative t would index the curve at -1.\n      const t = Math.min(Math.max((now - start) / MORPH_MS, 0), 1);\n      current.current = from + (target - from) * ease(t);\n      applyRef.current(current.current);\n      if (t < 1) frame.current = requestAnimationFrame(tick);\n    };\n    frame.current = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame.current);\n  }, [target]);\n}\n\n/** Interpolates the numbers of a path whose two states have the same commands. */\nexport function lerpPath(from: string, to: string, progress: number) {\n  const a = from.match(/-?\\d*\\.?\\d+/g)!.map(Number);\n  const b = to.match(/-?\\d*\\.?\\d+/g)!.map(Number);\n  let i = 0;\n  return from.replace(/-?\\d*\\.?\\d+/g, () => {\n    const n = a[i]! + (b[i]! - a[i]!) * progress;\n    i += 1;\n    return String(Math.round(n * 1000) / 1000);\n  });\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAiC;CACrC;CAAG;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAC1F;CAAQ;CAAQ;CAAO;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACvF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACxF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;AAC1E;AACA,MAAM,WAAW;AAEjB,MAAM,QAAQ,MAAc;CAC1B,MAAM,KAAM,IAAI,WAAY;CAC5B,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,GAAG,YAAY,SAAS,CAAC;CACzD,MAAM,IAAI,YAAY;CAEtB,OAAO,KADG,YAAY,IAAI,KACV,MAAM,KAAK;AAC7B;;;;;;;AAQA,SAAgB,kBAAkB,QAAgB,OAAmC;CACnF,MAAM,UAAU,OAAO,MAAM;CAC7B,MAAM,QAAQ,OAAO,CAAC;CACtB,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,QAAQ,OAAO,IAAI;CAEzB,gBAAgB;EACd,SAAS,UAAU;CACrB,CAAC;CAED,gBAAgB;EACd,qBAAqB,MAAM,OAAO;EAClC,IAAI,MAAM,WAAW,qBAAqB,GAAG;GAC3C,MAAM,UAAU;GAChB,QAAQ,UAAU;GAClB,SAAS,QAAQ,MAAM;GACvB;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,QAAQ,QAAgB;GAE5B,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,UAAU,CAAC,GAAG,CAAC;GAC3D,QAAQ,UAAU,QAAQ,SAAS,QAAQ,KAAK,CAAC;GACjD,SAAS,QAAQ,QAAQ,OAAO;GAChC,IAAI,IAAI,GAAG,MAAM,UAAU,sBAAsB,IAAI;EACvD;EACA,MAAM,UAAU,sBAAsB,IAAI;EAC1C,aAAa,qBAAqB,MAAM,OAAO;CACjD,GAAG,CAAC,MAAM,CAAC;AACb;;AAGA,SAAgB,SAAS,MAAc,IAAY,UAAkB;CACnE,MAAM,IAAI,KAAK,MAAM,cAAc,CAAC,CAAE,IAAI,MAAM;CAChD,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,CAAE,IAAI,MAAM;CAC9C,IAAI,IAAI;CACR,OAAO,KAAK,QAAQ,sBAAsB;EACxC,MAAM,IAAI,EAAE,MAAO,EAAE,KAAM,EAAE,MAAO;EACpC,KAAK;EACL,OAAO,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI;CAC3C,CAAC;AACH"}