@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/shortcut-recorder/shortcut-recorder.js

@@ -0,0 +1,489 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { formatShortcut, keyId, modifiersFromEvent, normalizeShortcut, shortcutFromEvent, shortcutTokens, splitShortcut } from "./shortcut-model.js";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/shortcut-recorder/shortcut-recorder.tsx
+const subscribe = () => () => {};
+const detectPlatform = () => {
+	if (typeof navigator === "undefined") return "mac";
+	const hint = navigator.userAgentData?.platform ?? navigator.platform ?? navigator.userAgent;
+	return /mac|iphone|ipad|ipod/i.test(hint) ? "mac" : "other";
+};
+/** The viewer's platform. A server render assumes a Mac and settles on the first client render. */
+function usePlatform(override) {
+	const detected = useSyncExternalStore(subscribe, detectPlatform, () => "mac");
+	return override ?? detected;
+}
+const EMPTY = /* @__PURE__ */ new Set();
+/**
+* The keys held down right now, by physical id (feed it to `ShortcutKeys` to light the
+* caps as they are pressed). Clears when the window loses focus, and after Command lifts
+* (macOS drops the other keyups).
+*/
+function usePressedKeys(enabled = true) {
+	const [held, setHeld] = useState(() => /* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (!enabled) return;
+		const update = (change) => setHeld((current) => {
+			const next = new Set(current);
+			change(next);
+			return next.size === current.size && [...next].every((key) => current.has(key)) ? current : next;
+		});
+		const down = (event) => {
+			const id = keyId(event);
+			if (id) update((next) => next.add(id));
+		};
+		const up = (event) => {
+			const id = keyId(event);
+			update((next) => {
+				if (id) next.delete(id);
+				if (id === "meta") {
+					for (const key of [...next]) if (![
+						"ctrl",
+						"alt",
+						"shift"
+					].includes(key)) next.delete(key);
+				}
+				if (!event.metaKey) next.delete("meta");
+				if (!event.ctrlKey) next.delete("ctrl");
+				if (!event.altKey) next.delete("alt");
+				if (!event.shiftKey) next.delete("shift");
+			});
+		};
+		const clear = () => setHeld((current) => current.size ? /* @__PURE__ */ new Set() : current);
+		window.addEventListener("keydown", down, true);
+		window.addEventListener("keyup", up, true);
+		window.addEventListener("blur", clear);
+		document.addEventListener("visibilitychange", clear);
+		return () => {
+			window.removeEventListener("keydown", down, true);
+			window.removeEventListener("keyup", up, true);
+			window.removeEventListener("blur", clear);
+			document.removeEventListener("visibilitychange", clear);
+		};
+	}, [enabled]);
+	return enabled ? held : EMPTY;
+}
+/** One key cap. Use it inline in copy, or through `ShortcutKeys` for a whole combination. */
+const ShortcutKbd = forwardRef(function ShortcutKbd({ children, pressed = false, tone, size = "md", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		...props,
+		"data-slot": "shortcut-kbd",
+		"data-size": size,
+		"data-pressed": pressed || void 0,
+		"data-tone": tone,
+		className: cn(cnAll("inline-grid h-6.5 min-w-6.5 place-items-center rounded-sm border-(length:--border-width) border-b-2 border-border-strong bg-surface px-1.75 pb-px font-sans text-xs leading-none font-medium whitespace-nowrap text-foreground tabular-nums", "data-[size=sm]:h-5.5 data-[size=sm]:min-w-5.5 data-[size=sm]:px-1.25", "motion-safe:transition-[translate,border-color,background-color,color] motion-safe:duration-(--duration-instant) motion-safe:ease-settle", "data-[pressed]:translate-y-px data-[pressed]:border-b-(length:--border-width) data-[pressed]:border-primary data-[pressed]:bg-primary-subtle data-[pressed]:text-primary-strong", "data-[tone=warning]:border-warning-strong data-[tone=warning]:bg-warning-subtle data-[tone=warning]:text-foreground"), className),
+		children
+	});
+});
+/** A shortcut as key caps, with one spoken label ("Command Shift K") for assistive technology. */
+function ShortcutKeys({ shortcut, platform: platformProp, pressed, size = "md", className }) {
+	const platform = usePlatform(platformProp);
+	const tokens = shortcutTokens(shortcut, platform);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "shortcut-keys",
+		role: "img",
+		"aria-label": tokens.map((token) => token.spoken).join(" "),
+		className: cn("inline-flex flex-none items-center gap-1", className),
+		children: tokens.map((token, index) => /* @__PURE__ */ jsx(ShortcutKbd, {
+			size,
+			pressed: pressed?.has(token.id),
+			"aria-hidden": "true",
+			children: token.label
+		}, `${index}-${token.id}`))
+	});
+}
+const RESERVED = [
+	{
+		shortcut: "mod+w",
+		label: "Close tab"
+	},
+	{
+		shortcut: "mod+t",
+		label: "New tab"
+	},
+	{
+		shortcut: "mod+n",
+		label: "New window"
+	},
+	{
+		shortcut: "mod+q",
+		label: "Quit"
+	},
+	{
+		shortcut: "mod+l",
+		label: "Address bar"
+	},
+	{
+		shortcut: "mod+r",
+		label: "Reload"
+	},
+	{
+		shortcut: "mod+shift+t",
+		label: "Reopen tab"
+	},
+	{
+		shortcut: "mod+c",
+		label: "Copy"
+	},
+	{
+		shortcut: "mod+v",
+		label: "Paste"
+	},
+	{
+		shortcut: "mod+x",
+		label: "Cut"
+	},
+	{
+		shortcut: "mod+z",
+		label: "Undo"
+	},
+	{
+		shortcut: "mod+a",
+		label: "Select all"
+	}
+];
+/** A no-break space, appended to a repeated announcement so a screen reader says it again. */
+const NBSP = String.fromCharCode(160);
+/** Stagger between the caps of a finished shortcut as they settle in (ms). */
+const CAP_STAGGER_MS = 35;
+/** How long the caps stay lit after a shortcut is set (ms). */
+const SETTLE_MS = 700;
+const controlClass = cnAll(fieldSurfaceVariants(), "relative flex h-(--density-control-h-md) items-center", "data-[state=idle]:hover:border-border-strong", "data-[state=recording]:border-primary data-[state=recording]:bg-primary-subtle", "data-[state=conflict]:border-warning-strong", "has-[[data-slot=shortcut-recorder-button]:focus-visible]:border-border-strong has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-solid has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-(length:--focus-ring-width) has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-offset-(--focus-ring-offset) has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-(--color-ring)");
+const actionClass = "grid size-8 flex-none cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-muted data-[hovered]:text-foreground data-[pressed]:scale-95 data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) [&_svg]:pointer-events-none [&_svg]:size-4";
+const linkClass = "inline-flex min-h-6 cursor-pointer items-center rounded-xs border-0 bg-transparent px-1 font-sans text-xs font-medium text-foreground underline decoration-border-strong underline-offset-3 outline-none motion-safe:transition-[text-decoration-color,color] motion-safe:duration-(--duration-quick) data-[hovered]:decoration-current data-[focus-visible]:decoration-current data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring)";
+/** A small icon button inside the field. One that appears after mount scales in; one there at first render does not. */
+function FieldAction({ label, arrives, onPress, children }) {
+	const [animated] = useState(arrives);
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": label,
+		onPress,
+		"data-slot": "shortcut-recorder-action",
+		className: cn(actionClass, animated && "motion-safe:animate-field-clear-in motion-reduce:animate-fade-in"),
+		children
+	});
+}
+/** One cap of the row. Decided once, at its own mount: caps there at first render stay still. */
+function Cap({ arrives, delay, children }) {
+	const [animated] = useState(arrives);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex", animated && "motion-safe:animate-chip-reveal motion-reduce:animate-fade-in"),
+		style: animated && delay ? { animationDelay: `${delay}ms` } : void 0,
+		children
+	});
+}
+/**
+* A field that records a keyboard shortcut. Press it (or focus it and press Enter or
+* Space), then press the combination: held modifiers show as caps while you build the
+* chord, the finished shortcut settles into place and is announced, and a combination
+* that is already taken asks before it is used.
+*
+* Keyboard: Escape cancels, Backspace or Delete clears, and Tab leaves the field
+* (it is never swallowed, so recording cannot trap focus). Escape and Tab can still be
+* recorded with a modifier held. Outside recording, Backspace or Delete clears the
+* shortcut, and the reset button restores the default. Caps follow the platform:
+* Command symbols on a Mac, Ctrl and Alt elsewhere.
+*
+* While recording, the chord belongs to the recorder: its keys are kept from the page's
+* own shortcuts. Nothing animates on first render.
+*
+* @example
+* <ShortcutRecorder label="Open command menu" defaultValue="mod+k" onValueChange={save} />
+*/
+function ShortcutRecorder({ label, hideLabel = false, value, defaultValue = null, onValueChange, resetValue, bindings = [], warnReserved = true, requireModifier = true, platform: platformProp, placeholder = "Record shortcut", description, disabled = false, id, className }) {
+	const platform = usePlatform(platformProp);
+	const conflictId = useId();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value !== void 0 ? value : inner;
+	const restoreTo = resetValue !== void 0 ? resetValue : defaultValue;
+	const [recording, setRecording] = useState(false);
+	const [live, setLive] = useState([]);
+	const [pending, setPending] = useState(null);
+	const [nudge, setNudge] = useState(null);
+	const [settled, setSettled] = useState(0);
+	const [announcement, setAnnouncement] = useState("");
+	const buttonRef = useRef(null);
+	const swallowClick = useRef(false);
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const say = (message) => setAnnouncement((previous) => previous === message ? message + NBSP : message);
+	const spoken = (shortcut) => shortcut ? formatShortcut(shortcut, platform).spoken : "none";
+	const commit = useCallback((next, replaced) => {
+		setPending(null);
+		setNudge(null);
+		if (value === void 0) setInner(next);
+		onValueChange?.(next, { replaced });
+		setSettled((count) => count + 1);
+		say(next ? `Shortcut set to ${formatShortcut(next, platform).spoken}` : "Shortcut cleared");
+	}, [
+		onValueChange,
+		platform,
+		value
+	]);
+	useEffect(() => {
+		if (!settled) return;
+		const timer = window.setTimeout(() => setSettled(0), SETTLE_MS);
+		return () => window.clearTimeout(timer);
+	}, [settled]);
+	const start = () => {
+		if (disabled) return;
+		setPending(null);
+		setNudge(null);
+		setLive([]);
+		setRecording(true);
+		say("Recording. Press the new shortcut, or Escape to cancel.");
+	};
+	const stop = () => {
+		setRecording(false);
+		setLive([]);
+	};
+	const conflictFor = (shortcut) => {
+		const normal = normalizeShortcut(shortcut, platform);
+		if (current && normalizeShortcut(current, platform) === normal) return null;
+		const taken = bindings.find((binding) => normalizeShortcut(binding.shortcut, platform) === normal);
+		if (taken) return {
+			shortcut,
+			conflict: taken,
+			reserved: false
+		};
+		const reserved = warnReserved ? RESERVED.find((binding) => normalizeShortcut(binding.shortcut, platform) === normal) : void 0;
+		return reserved ? {
+			shortcut,
+			conflict: reserved,
+			reserved: true
+		} : null;
+	};
+	function onKeyDown(event) {
+		const bare = !event.metaKey && !event.ctrlKey && !event.altKey;
+		if (!recording) {
+			if (bare && !event.shiftKey && (event.key === "Backspace" || event.key === "Delete") && current) {
+				event.preventDefault();
+				commit(null);
+			} else if (bare && !event.shiftKey && event.key === "Escape" && pending) {
+				event.preventDefault();
+				setPending(null);
+				say("Kept the previous shortcut");
+			}
+			return;
+		}
+		if (event.key === "Tab" && bare) {
+			stop();
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		if (event.key === " ") swallowClick.current = true;
+		const noMods = bare && !event.shiftKey;
+		if (noMods && event.key === "Escape") {
+			stop();
+			say("Recording canceled");
+			return;
+		}
+		if (noMods && (event.key === "Backspace" || event.key === "Delete")) {
+			stop();
+			commit(null);
+			return;
+		}
+		const shortcut = shortcutFromEvent(event.nativeEvent, platform);
+		if (!shortcut) {
+			setLive(modifiersFromEvent(event, platform));
+			return;
+		}
+		const { mods, key } = splitShortcut(shortcut);
+		const strong = mods.has("mod") || mods.has("ctrl") || mods.has("alt") || mods.has("meta");
+		if (requireModifier && !strong && !/^f\d+$/.test(key)) {
+			const hint = platform === "mac" ? "Include ⌘, ⌃, or ⌥" : "Include Ctrl or Alt";
+			setNudge(hint);
+			say(hint);
+			setLive(modifiersFromEvent(event, platform));
+			return;
+		}
+		stop();
+		const conflict = conflictFor(shortcut);
+		if (conflict) {
+			setPending(conflict);
+			say(`${formatShortcut(shortcut, platform).spoken} is ${conflict.reserved ? "reserved for" : "used by"} ${conflict.conflict.label}. Use anyway, or record another.`);
+			return;
+		}
+		commit(shortcut);
+	}
+	function onKeyUp(event) {
+		if (recording) setLive(modifiersFromEvent(event, platform));
+		if (swallowClick.current) setTimeout(() => swallowClick.current = false, 0);
+	}
+	const shown = pending?.shortcut ?? current;
+	const tokens = recording ? shortcutTokens(live.join("+"), platform) : shown ? shortcutTokens(shown, platform) : [];
+	const state = recording ? "recording" : pending ? "conflict" : "idle";
+	const canReset = !recording && (pending !== null || (current ?? null) !== (restoreTo ?? null));
+	const canClear = !recording && !!current && !pending;
+	const hint = pending ? void 0 : nudge ?? (recording ? "Esc to cancel, Backspace to clear" : description);
+	const field = useFieldWiring({
+		enabled: true,
+		id,
+		describedBy: void 0,
+		invalid: void 0,
+		description: hint,
+		error: void 0
+	});
+	const describedBy = [pending ? conflictId : void 0, field.hintId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "shortcut-recorder",
+		className: cn("w-full min-w-0 font-sans", className),
+		children: /* @__PURE__ */ jsxs(FieldShell, {
+			label: hideLabel ? null : label,
+			controlId: field.controlId,
+			description: hint,
+			hintId: field.hintId,
+			error: void 0,
+			errorId: void 0,
+			numbers: false,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "shortcut-recorder-control",
+					"data-state": state,
+					"data-disabled": disabled || void 0,
+					className: controlClass,
+					children: [/* @__PURE__ */ jsx("button", {
+						ref: buttonRef,
+						id: field.controlId,
+						"aria-describedby": describedBy || void 0,
+						type: "button",
+						"data-slot": "shortcut-recorder-button",
+						disabled,
+						"aria-label": `${label}, ${recording ? "recording" : spoken(shown)}`,
+						"aria-pressed": recording,
+						onClick: (event) => {
+							if (swallowClick.current) return;
+							if (recording) {
+								if (event.detail !== 0) {
+									stop();
+									say("Recording canceled");
+								}
+								return;
+							}
+							start();
+						},
+						onKeyDown,
+						onKeyUp,
+						onBlur: () => {
+							if (recording) {
+								stop();
+								setNudge(null);
+							}
+						},
+						className: "flex h-full min-w-0 flex-1 cursor-pointer touch-manipulation items-center rounded-control border-0 bg-transparent ps-2.5 pe-1.5 text-start font-sans text-foreground outline-none disabled:cursor-not-allowed",
+						children: /* @__PURE__ */ jsxs("span", {
+							"aria-hidden": "true",
+							className: "relative flex min-w-0 items-center gap-1",
+							children: [
+								recording ? /* @__PURE__ */ jsx("span", { className: "me-1.5 ms-0.75 size-1.75 flex-none rounded-full bg-primary motion-safe:animate-shortcut-recording" }) : null,
+								tokens.map((token, index) => /* @__PURE__ */ jsx(Cap, {
+									arrives: ready,
+									delay: recording ? 0 : index * CAP_STAGGER_MS,
+									children: /* @__PURE__ */ jsx(ShortcutKbd, {
+										pressed: recording || settled > 0 && !pending,
+										tone: pending ? "warning" : void 0,
+										children: token.label
+									})
+								}, token.id)),
+								tokens.length === 0 ? /* @__PURE__ */ jsx("span", {
+									className: cnAll("ps-0.75 text-sm whitespace-nowrap", recording ? "text-text-secondary" : "text-muted-foreground", ready && "motion-safe:animate-field-word-in motion-reduce:animate-fade-in"),
+									children: recording ? "Press keys" : placeholder
+								}, recording ? "prompt" : "placeholder") : null
+							]
+						})
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-none items-center gap-0.5 pe-1",
+						children: [canReset ? /* @__PURE__ */ jsx(FieldAction, {
+							arrives: ready,
+							label: `Reset to ${spoken(restoreTo ?? null)}`,
+							onPress: () => {
+								commit(restoreTo ?? null);
+								buttonRef.current?.focus();
+							},
+							children: /* @__PURE__ */ jsxs("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.75",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: [/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }), /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })]
+							})
+						}, "reset") : null, canClear ? /* @__PURE__ */ jsx(FieldAction, {
+							arrives: ready,
+							label: "Clear shortcut",
+							onPress: () => {
+								commit(null);
+								buttonRef.current?.focus();
+							},
+							children: /* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.75",
+								strokeLinecap: "round",
+								children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
+							})
+						}, "clear") : null]
+					})]
+				}),
+				pending ? /* @__PURE__ */ jsxs("div", {
+					id: conflictId,
+					"data-slot": "shortcut-recorder-conflict",
+					className: "flex flex-wrap items-baseline justify-between gap-x-3 pt-1.5 font-sans text-xs leading-(--leading-normal) text-text-secondary motion-safe:animate-field-word-in motion-reduce:animate-fade-in",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "me-1.5 ms-px mb-px inline-block size-1.5 rounded-full bg-warning-strong align-middle"
+						}),
+						pending.reserved ? "Reserved for" : "Already used by",
+						" ",
+						/* @__PURE__ */ jsx("strong", {
+							className: "font-medium text-foreground",
+							children: pending.conflict.label
+						})
+					] }), /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							className: linkClass,
+							onPress: () => {
+								commit(pending.shortcut, pending.reserved ? void 0 : pending.conflict);
+								buttonRef.current?.focus();
+							},
+							children: "Use anyway"
+						}), /* @__PURE__ */ jsx(Button, {
+							className: cn(linkClass, "font-normal text-text-secondary no-underline"),
+							onPress: () => {
+								setPending(null);
+								say("Kept the previous shortcut");
+								buttonRef.current?.focus();
+							},
+							children: "Cancel"
+						})]
+					})]
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					role: "status",
+					"aria-live": "polite",
+					children: announcement
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ShortcutKbd, ShortcutKeys, ShortcutRecorder, usePlatform, usePressedKeys };
+
+//# sourceMappingURL=shortcut-recorder.js.map

package/dist/shortcut-recorder/shortcut-recorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-recorder.js","names":["AriaButton"],"sources":["../../src/shortcut-recorder/shortcut-recorder.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\nimport {\n  formatShortcut,\n  keyId,\n  modifiersFromEvent,\n  normalizeShortcut,\n  shortcutFromEvent,\n  shortcutTokens,\n  splitShortcut,\n  type Platform,\n} from \"./shortcut-model.js\";\n\n/*\n * Shortcut keys and a recorder for them. The model (parsing, normalising,\n * platform labels, matching) lives in shortcut-model.ts; this file is the\n * three parts that draw it: a key cap, a row of caps, and the recording field.\n */\n\nconst subscribe = () => () => {};\n\nconst detectPlatform = (): Platform => {\n  if (typeof navigator === \"undefined\") return \"mac\";\n  const hint =\n    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform ??\n    navigator.platform ??\n    navigator.userAgent;\n  return /mac|iphone|ipad|ipod/i.test(hint) ? \"mac\" : \"other\";\n};\n\n/** The viewer's platform. A server render assumes a Mac and settles on the first client render. */\nexport function usePlatform(override?: Platform): Platform {\n  const detected = useSyncExternalStore<Platform>(subscribe, detectPlatform, () => \"mac\");\n  return override ?? detected;\n}\n\nconst EMPTY: ReadonlySet<string> = new Set();\n\n/**\n * The keys held down right now, by physical id (feed it to `ShortcutKeys` to light the\n * caps as they are pressed). Clears when the window loses focus, and after Command lifts\n * (macOS drops the other keyups).\n */\nexport function usePressedKeys(enabled = true): ReadonlySet<string> {\n  const [held, setHeld] = useState<ReadonlySet<string>>(() => new Set());\n  useEffect(() => {\n    if (!enabled) return;\n    const update = (change: (next: Set<string>) => void) =>\n      setHeld((current) => {\n        const next = new Set(current);\n        change(next);\n        return next.size === current.size && [...next].every((key) => current.has(key))\n          ? current\n          : next;\n      });\n    const down = (event: KeyboardEvent) => {\n      const id = keyId(event);\n      if (id) update((next) => next.add(id));\n    };\n    const up = (event: KeyboardEvent) => {\n      const id = keyId(event);\n      update((next) => {\n        if (id) next.delete(id);\n        if (id === \"meta\")\n          for (const key of [...next])\n            if (![\"ctrl\", \"alt\", \"shift\"].includes(key)) next.delete(key);\n        if (!event.metaKey) next.delete(\"meta\");\n        if (!event.ctrlKey) next.delete(\"ctrl\");\n        if (!event.altKey) next.delete(\"alt\");\n        if (!event.shiftKey) next.delete(\"shift\");\n      });\n    };\n    const clear = () => setHeld((current) => (current.size ? new Set() : current));\n    // Capture phase, so keys still register while a focused recorder keeps the chord from bubbling.\n    window.addEventListener(\"keydown\", down, true);\n    window.addEventListener(\"keyup\", up, true);\n    window.addEventListener(\"blur\", clear);\n    document.addEventListener(\"visibilitychange\", clear);\n    return () => {\n      window.removeEventListener(\"keydown\", down, true);\n      window.removeEventListener(\"keyup\", up, true);\n      window.removeEventListener(\"blur\", clear);\n      document.removeEventListener(\"visibilitychange\", clear);\n    };\n  }, [enabled]);\n  return enabled ? held : EMPTY;\n}\n\n/* ---------------------------------------------- ShortcutKbd and ShortcutKeys ---------------------------------------------- */\n\nexport interface ShortcutKbdProps extends Omit<HTMLAttributes<HTMLElement>, \"className\"> {\n  children: ReactNode;\n  /** Draws the key pushed down and lit, such as while it is held. */\n  pressed?: boolean;\n  /** `warning` tints the cap, for a combination that is taken. */\n  tone?: \"warning\";\n  size?: \"sm\" | \"md\";\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** One key cap. Use it inline in copy, or through `ShortcutKeys` for a whole combination. */\nexport const ShortcutKbd = forwardRef<HTMLElement, ShortcutKbdProps>(function ShortcutKbd(\n  { children, pressed = false, tone, size = \"md\", className, ...props },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      {...props}\n      data-slot=\"shortcut-kbd\"\n      data-size={size}\n      data-pressed={pressed || undefined}\n      data-tone={tone}\n      className={cn(\n        cnAll(\n          // A one-pixel edge with a heavier bottom reads as a key without a shadow. Held, it drops a pixel and takes the accent.\n          \"inline-grid h-6.5 min-w-6.5 place-items-center rounded-sm border-(length:--border-width) border-b-2 border-border-strong bg-surface px-1.75 pb-px font-sans text-xs leading-none font-medium whitespace-nowrap text-foreground tabular-nums\",\n          \"data-[size=sm]:h-5.5 data-[size=sm]:min-w-5.5 data-[size=sm]:px-1.25\",\n          \"motion-safe:transition-[translate,border-color,background-color,color] motion-safe:duration-(--duration-instant) motion-safe:ease-settle\",\n          \"data-[pressed]:translate-y-px data-[pressed]:border-b-(length:--border-width) data-[pressed]:border-primary data-[pressed]:bg-primary-subtle data-[pressed]:text-primary-strong\",\n          \"data-[tone=warning]:border-warning-strong data-[tone=warning]:bg-warning-subtle data-[tone=warning]:text-foreground\",\n        ),\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n});\n\nexport interface ShortcutKeysProps {\n  /** A shortcut such as `\"mod+shift+k\"`. `mod` is Command on a Mac and Control elsewhere. */\n  shortcut: string;\n  /** Defaults to the viewer's platform. */\n  platform?: Platform;\n  /** Held key ids from `usePressedKeys`: the matching caps light up. */\n  pressed?: ReadonlySet<string>;\n  size?: \"sm\" | \"md\";\n  /** Extra classes. Merged last. */\n  className?: string;\n}\n\n/** A shortcut as key caps, with one spoken label (\"Command Shift K\") for assistive technology. */\nexport function ShortcutKeys({\n  shortcut,\n  platform: platformProp,\n  pressed,\n  size = \"md\",\n  className,\n}: ShortcutKeysProps) {\n  const platform = usePlatform(platformProp);\n  const tokens = shortcutTokens(shortcut, platform);\n  return (\n    <span\n      data-slot=\"shortcut-keys\"\n      role=\"img\"\n      aria-label={tokens.map((token) => token.spoken).join(\" \")}\n      className={cn(\"inline-flex flex-none items-center gap-1\", className)}\n    >\n      {tokens.map((token, index) => (\n        <ShortcutKbd\n          key={`${index}-${token.id}`}\n          size={size}\n          pressed={pressed?.has(token.id)}\n          aria-hidden=\"true\"\n        >\n          {token.label}\n        </ShortcutKbd>\n      ))}\n    </span>\n  );\n}\n\n/* ---------------------------------------------- ShortcutRecorder ---------------------------------------------- */\n\nexport interface ShortcutBinding {\n  shortcut: string;\n  /** What the shortcut does, shown when a recording collides with it. */\n  label: string;\n}\n\nexport interface ShortcutRecorderProps {\n  /** What the shortcut is for, and the field's accessible name. */\n  label: string;\n  /** Hides the label visually; it stays the accessible name. */\n  hideLabel?: boolean;\n  /** The shortcut, such as `\"mod+shift+k\"`, or `null` for none. Controlled when given. */\n  value?: string | null;\n  defaultValue?: string | null;\n  /** `replaced` is the binding a shortcut was taken from after \"Use anyway\", so the caller can unbind it. */\n  onValueChange?: (value: string | null, details: { replaced?: ShortcutBinding }) => void;\n  /** What the reset button restores. Defaults to `defaultValue`. */\n  resetValue?: string | null;\n  /** Shortcuts already in use. Recording one of them asks before taking it. */\n  bindings?: ShortcutBinding[];\n  /** Also warn about combinations a browser or system keeps, such as Command W and Command C. @default true */\n  warnReserved?: boolean;\n  /** Require Command, Control or Option (function keys are always allowed), so a bare letter cannot be recorded. @default true */\n  requireModifier?: boolean;\n  /** Defaults to the viewer's platform. */\n  platform?: Platform;\n  /** Shown while there is no shortcut. @default \"Record shortcut\" */\n  placeholder?: string;\n  /** Helper text under the field. */\n  description?: string;\n  disabled?: boolean;\n  id?: string;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\nconst RESERVED: ShortcutBinding[] = [\n  { shortcut: \"mod+w\", label: \"Close tab\" },\n  { shortcut: \"mod+t\", label: \"New tab\" },\n  { shortcut: \"mod+n\", label: \"New window\" },\n  { shortcut: \"mod+q\", label: \"Quit\" },\n  { shortcut: \"mod+l\", label: \"Address bar\" },\n  { shortcut: \"mod+r\", label: \"Reload\" },\n  { shortcut: \"mod+shift+t\", label: \"Reopen tab\" },\n  { shortcut: \"mod+c\", label: \"Copy\" },\n  { shortcut: \"mod+v\", label: \"Paste\" },\n  { shortcut: \"mod+x\", label: \"Cut\" },\n  { shortcut: \"mod+z\", label: \"Undo\" },\n  { shortcut: \"mod+a\", label: \"Select all\" },\n];\n\ninterface Pending {\n  shortcut: string;\n  conflict: ShortcutBinding;\n  reserved: boolean;\n}\n\n/** A no-break space, appended to a repeated announcement so a screen reader says it again. */\nconst NBSP = String.fromCharCode(160);\n\n/** Stagger between the caps of a finished shortcut as they settle in (ms). */\nconst CAP_STAGGER_MS = 35;\n\n/** How long the caps stay lit after a shortcut is set (ms). */\nconst SETTLE_MS = 700;\n\nconst controlClass = cnAll(\n  fieldSurfaceVariants(),\n  \"relative flex h-(--density-control-h-md) items-center\",\n  \"data-[state=idle]:hover:border-border-strong\",\n  \"data-[state=recording]:border-primary data-[state=recording]:bg-primary-subtle\",\n  \"data-[state=conflict]:border-warning-strong\",\n  // The recorder is a button, so the control shows the ring whenever it has keyboard focus.\n  \"has-[[data-slot=shortcut-recorder-button]:focus-visible]:border-border-strong has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-solid has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-(length:--focus-ring-width) has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-offset-(--focus-ring-offset) has-[[data-slot=shortcut-recorder-button]:focus-visible]:outline-(--color-ring)\",\n);\n\nconst actionClass =\n  \"grid size-8 flex-none cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-muted data-[hovered]:text-foreground data-[pressed]:scale-95 data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) [&_svg]:pointer-events-none [&_svg]:size-4\";\n\nconst linkClass =\n  \"inline-flex min-h-6 cursor-pointer items-center rounded-xs border-0 bg-transparent px-1 font-sans text-xs font-medium text-foreground underline decoration-border-strong underline-offset-3 outline-none motion-safe:transition-[text-decoration-color,color] motion-safe:duration-(--duration-quick) data-[hovered]:decoration-current data-[focus-visible]:decoration-current data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring)\";\n\n/** A small icon button inside the field. One that appears after mount scales in; one there at first render does not. */\nfunction FieldAction({\n  label,\n  arrives,\n  onPress,\n  children,\n}: {\n  label: string;\n  arrives: boolean;\n  onPress: () => void;\n  children: ReactNode;\n}) {\n  const [animated] = useState(arrives);\n  return (\n    <AriaButton\n      aria-label={label}\n      onPress={onPress}\n      data-slot=\"shortcut-recorder-action\"\n      className={cn(\n        actionClass,\n        animated && \"motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </AriaButton>\n  );\n}\n\n/** One cap of the row. Decided once, at its own mount: caps there at first render stay still. */\nfunction Cap({\n  arrives,\n  delay,\n  children,\n}: {\n  arrives: boolean;\n  delay: number;\n  children: ReactNode;\n}) {\n  const [animated] = useState(arrives);\n  return (\n    <span\n      className={cn(\n        \"inline-flex\",\n        animated && \"motion-safe:animate-chip-reveal motion-reduce:animate-fade-in\",\n      )}\n      style={animated && delay ? { animationDelay: `${delay}ms` } : undefined}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * A field that records a keyboard shortcut. Press it (or focus it and press Enter or\n * Space), then press the combination: held modifiers show as caps while you build the\n * chord, the finished shortcut settles into place and is announced, and a combination\n * that is already taken asks before it is used.\n *\n * Keyboard: Escape cancels, Backspace or Delete clears, and Tab leaves the field\n * (it is never swallowed, so recording cannot trap focus). Escape and Tab can still be\n * recorded with a modifier held. Outside recording, Backspace or Delete clears the\n * shortcut, and the reset button restores the default. Caps follow the platform:\n * Command symbols on a Mac, Ctrl and Alt elsewhere.\n *\n * While recording, the chord belongs to the recorder: its keys are kept from the page's\n * own shortcuts. Nothing animates on first render.\n *\n * @example\n * <ShortcutRecorder label=\"Open command menu\" defaultValue=\"mod+k\" onValueChange={save} />\n */\nexport function ShortcutRecorder({\n  label,\n  hideLabel = false,\n  value,\n  defaultValue = null,\n  onValueChange,\n  resetValue,\n  bindings = [],\n  warnReserved = true,\n  requireModifier = true,\n  platform: platformProp,\n  placeholder = \"Record shortcut\",\n  description,\n  disabled = false,\n  id,\n  className,\n}: ShortcutRecorderProps) {\n  const platform = usePlatform(platformProp);\n  const conflictId = useId();\n\n  const [inner, setInner] = useState<string | null>(defaultValue);\n  const current = value !== undefined ? value : inner;\n  const restoreTo = resetValue !== undefined ? resetValue : defaultValue;\n\n  const [recording, setRecording] = useState(false);\n  const [live, setLive] = useState<string[]>([]);\n  const [pending, setPending] = useState<Pending | null>(null);\n  const [nudge, setNudge] = useState<string | null>(null);\n  const [settled, setSettled] = useState(0);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const swallowClick = useRef(false);\n\n  // Caps and buttons that mount from the next frame on arrive animated.\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n\n  const say = (message: string) =>\n    setAnnouncement((previous) => (previous === message ? message + NBSP : message));\n  const spoken = (shortcut: string | null) =>\n    shortcut ? formatShortcut(shortcut, platform).spoken : \"none\";\n\n  const commit = useCallback(\n    (next: string | null, replaced?: ShortcutBinding) => {\n      setPending(null);\n      setNudge(null);\n      if (value === undefined) setInner(next);\n      onValueChange?.(next, { replaced });\n      setSettled((count) => count + 1);\n      say(next ? `Shortcut set to ${formatShortcut(next, platform).spoken}` : \"Shortcut cleared\");\n    },\n    [onValueChange, platform, value],\n  );\n\n  useEffect(() => {\n    if (!settled) return;\n    const timer = window.setTimeout(() => setSettled(0), SETTLE_MS);\n    return () => window.clearTimeout(timer);\n  }, [settled]);\n\n  const start = () => {\n    if (disabled) return;\n    setPending(null);\n    setNudge(null);\n    setLive([]);\n    setRecording(true);\n    say(\"Recording. Press the new shortcut, or Escape to cancel.\");\n  };\n  const stop = () => {\n    setRecording(false);\n    setLive([]);\n  };\n\n  const conflictFor = (shortcut: string): Pending | null => {\n    const normal = normalizeShortcut(shortcut, platform);\n    if (current && normalizeShortcut(current, platform) === normal) return null;\n    const taken = bindings.find(\n      (binding) => normalizeShortcut(binding.shortcut, platform) === normal,\n    );\n    if (taken) return { shortcut, conflict: taken, reserved: false };\n    const reserved = warnReserved\n      ? RESERVED.find((binding) => normalizeShortcut(binding.shortcut, platform) === normal)\n      : undefined;\n    return reserved ? { shortcut, conflict: reserved, reserved: true } : null;\n  };\n\n  function onKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {\n    const bare = !event.metaKey && !event.ctrlKey && !event.altKey;\n    if (!recording) {\n      if (\n        bare &&\n        !event.shiftKey &&\n        (event.key === \"Backspace\" || event.key === \"Delete\") &&\n        current\n      ) {\n        event.preventDefault();\n        commit(null);\n      } else if (bare && !event.shiftKey && event.key === \"Escape\" && pending) {\n        event.preventDefault();\n        setPending(null);\n        say(\"Kept the previous shortcut\");\n      }\n      return;\n    }\n    // Tab (with or without Shift) is how a keyboard user leaves: it stops recording and moves focus on.\n    if (event.key === \"Tab\" && bare) {\n      stop();\n      return;\n    }\n    // The chord belongs to the recorder: keep it from the page's own shortcuts, such as a command menu on Command K.\n    event.preventDefault();\n    event.stopPropagation();\n    if (event.key === \" \") swallowClick.current = true;\n    const noMods = bare && !event.shiftKey;\n    if (noMods && event.key === \"Escape\") {\n      stop();\n      say(\"Recording canceled\");\n      return;\n    }\n    if (noMods && (event.key === \"Backspace\" || event.key === \"Delete\")) {\n      stop();\n      commit(null);\n      return;\n    }\n    const shortcut = shortcutFromEvent(event.nativeEvent, platform);\n    if (!shortcut) {\n      setLive(modifiersFromEvent(event, platform));\n      return;\n    }\n    const { mods, key } = splitShortcut(shortcut);\n    const strong = mods.has(\"mod\") || mods.has(\"ctrl\") || mods.has(\"alt\") || mods.has(\"meta\");\n    if (requireModifier && !strong && !/^f\\d+$/.test(key)) {\n      const hint = platform === \"mac\" ? \"Include ⌘, ⌃, or ⌥\" : \"Include Ctrl or Alt\";\n      setNudge(hint);\n      say(hint);\n      setLive(modifiersFromEvent(event, platform));\n      return;\n    }\n    stop();\n    const conflict = conflictFor(shortcut);\n    if (conflict) {\n      setPending(conflict);\n      say(\n        `${formatShortcut(shortcut, platform).spoken} is ${conflict.reserved ? \"reserved for\" : \"used by\"} ${conflict.conflict.label}. Use anyway, or record another.`,\n      );\n      return;\n    }\n    commit(shortcut);\n  }\n\n  function onKeyUp(event: ReactKeyboardEvent<HTMLButtonElement>) {\n    if (recording) setLive(modifiersFromEvent(event, platform));\n    // A Space the recorder took must not click the button when it comes back up.\n    if (swallowClick.current) setTimeout(() => (swallowClick.current = false), 0);\n  }\n\n  const shown = pending?.shortcut ?? current;\n  const tokens = recording\n    ? shortcutTokens(live.join(\"+\"), platform)\n    : shown\n      ? shortcutTokens(shown, platform)\n      : [];\n  const state = recording ? \"recording\" : pending ? \"conflict\" : \"idle\";\n  const canReset = !recording && (pending !== null || (current ?? null) !== (restoreTo ?? null));\n  const canClear = !recording && !!current && !pending;\n  const hint = pending\n    ? undefined\n    : (nudge ?? (recording ? \"Esc to cancel, Backspace to clear\" : description));\n\n  const field = useFieldWiring({\n    enabled: true,\n    id,\n    describedBy: undefined,\n    invalid: undefined,\n    description: hint,\n    error: undefined,\n  });\n  const describedBy = [pending ? conflictId : undefined, field.hintId].filter(Boolean).join(\" \");\n\n  return (\n    <div data-slot=\"shortcut-recorder\" className={cn(\"w-full min-w-0 font-sans\", className)}>\n      <FieldShell\n        label={hideLabel ? null : label}\n        controlId={field.controlId}\n        description={hint}\n        hintId={field.hintId}\n        error={undefined}\n        errorId={undefined}\n        numbers={false}\n      >\n        <div\n          data-slot=\"shortcut-recorder-control\"\n          data-state={state}\n          data-disabled={disabled || undefined}\n          className={controlClass}\n        >\n          <button\n            ref={buttonRef}\n            id={field.controlId}\n            aria-describedby={describedBy || undefined}\n            type=\"button\"\n            data-slot=\"shortcut-recorder-button\"\n            disabled={disabled}\n            aria-label={`${label}, ${recording ? \"recording\" : spoken(shown)}`}\n            aria-pressed={recording}\n            onClick={(event) => {\n              if (swallowClick.current) return;\n              if (recording) {\n                // A pointer click cancels; a keyboard click cannot reach here, as the keydown was taken.\n                if (event.detail !== 0) {\n                  stop();\n                  say(\"Recording canceled\");\n                }\n                return;\n              }\n              start();\n            }}\n            onKeyDown={onKeyDown}\n            onKeyUp={onKeyUp}\n            onBlur={() => {\n              if (recording) {\n                stop();\n                setNudge(null);\n              }\n            }}\n            className=\"flex h-full min-w-0 flex-1 cursor-pointer touch-manipulation items-center rounded-control border-0 bg-transparent ps-2.5 pe-1.5 text-start font-sans text-foreground outline-none disabled:cursor-not-allowed\"\n          >\n            <span aria-hidden=\"true\" className=\"relative flex min-w-0 items-center gap-1\">\n              {recording ? (\n                <span className=\"me-1.5 ms-0.75 size-1.75 flex-none rounded-full bg-primary motion-safe:animate-shortcut-recording\" />\n              ) : null}\n              {tokens.map((token, index) => (\n                <Cap key={token.id} arrives={ready} delay={recording ? 0 : index * CAP_STAGGER_MS}>\n                  <ShortcutKbd\n                    pressed={recording || (settled > 0 && !pending)}\n                    tone={pending ? \"warning\" : undefined}\n                  >\n                    {token.label}\n                  </ShortcutKbd>\n                </Cap>\n              ))}\n              {tokens.length === 0 ? (\n                <span\n                  key={recording ? \"prompt\" : \"placeholder\"}\n                  className={cnAll(\n                    \"ps-0.75 text-sm whitespace-nowrap\",\n                    recording ? \"text-text-secondary\" : \"text-muted-foreground\",\n                    ready && \"motion-safe:animate-field-word-in motion-reduce:animate-fade-in\",\n                  )}\n                >\n                  {recording ? \"Press keys\" : placeholder}\n                </span>\n              ) : null}\n            </span>\n          </button>\n          <span className=\"flex flex-none items-center gap-0.5 pe-1\">\n            {canReset ? (\n              <FieldAction\n                key=\"reset\"\n                arrives={ready}\n                label={`Reset to ${spoken(restoreTo ?? null)}`}\n                onPress={() => {\n                  commit(restoreTo ?? null);\n                  buttonRef.current?.focus();\n                }}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.75\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <path d=\"M3 12a9 9 0 1 0 3-6.7L3 8\" />\n                  <path d=\"M3 3v5h5\" />\n                </svg>\n              </FieldAction>\n            ) : null}\n            {canClear ? (\n              <FieldAction\n                key=\"clear\"\n                arrives={ready}\n                label=\"Clear shortcut\"\n                onPress={() => {\n                  commit(null);\n                  buttonRef.current?.focus();\n                }}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.75\"\n                  strokeLinecap=\"round\"\n                >\n                  <path d=\"m4 4 8 8M12 4l-8 8\" />\n                </svg>\n              </FieldAction>\n            ) : null}\n          </span>\n        </div>\n        {/* The conflict: its copy settles in; it goes away at once, as its buttons must not stay reachable while it fades. */}\n        {pending ? (\n          <div\n            id={conflictId}\n            data-slot=\"shortcut-recorder-conflict\"\n            className=\"flex flex-wrap items-baseline justify-between gap-x-3 pt-1.5 font-sans text-xs leading-(--leading-normal) text-text-secondary motion-safe:animate-field-word-in motion-reduce:animate-fade-in\"\n          >\n            <span>\n              <span\n                aria-hidden=\"true\"\n                className=\"me-1.5 ms-px mb-px inline-block size-1.5 rounded-full bg-warning-strong align-middle\"\n              />\n              {pending.reserved ? \"Reserved for\" : \"Already used by\"}{\" \"}\n              <strong className=\"font-medium text-foreground\">{pending.conflict.label}</strong>\n            </span>\n            <span className=\"inline-flex gap-2\">\n              <AriaButton\n                className={linkClass}\n                onPress={() => {\n                  commit(pending.shortcut, pending.reserved ? undefined : pending.conflict);\n                  buttonRef.current?.focus();\n                }}\n              >\n                Use anyway\n              </AriaButton>\n              <AriaButton\n                className={cn(linkClass, \"font-normal text-text-secondary no-underline\")}\n                onPress={() => {\n                  setPending(null);\n                  say(\"Kept the previous shortcut\");\n                  buttonRef.current?.focus();\n                }}\n              >\n                Cancel\n              </AriaButton>\n            </span>\n          </div>\n        ) : null}\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {announcement}\n        </span>\n      </FieldShell>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/slider/index.d.ts

@@ -1,2 +1,2 @@
-import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider.js";
-export { Slider, type SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants };
+import { Slider, SliderMark, SliderProps, SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider.js";
+export { Slider, type SliderMark, type SliderProps, type SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants };