@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/selection-list/selection-list.js

@@ -0,0 +1,355 @@
+"use client";
+import { focusRingInset } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { Button } from "../button/button.js";
+import { springEasing } from "./selection-list-spring.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/selection-list/selection-list.tsx
+const STYLES = `
+[data-slot="selection-list-fill"] { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="selection-list-goo"] { display: none; }
+  [data-slot="selection-list-fill"] { display: block; }
+}
+@supports (transition-timing-function: linear(0, 1)) {
+  [data-slot="selection-list-action"][data-state="out"],
+  [data-slot="selection-list-blob"] { transition-timing-function: var(--selection-list-spring); }
+}
+`;
+/** The box surface. `inverted` is the workbench's dark fill. */
+const selectionListVariants = cva("", {
+	variants: {
+		tone: {
+			default: "bg-card text-card-foreground [--selection-list-surface:var(--color-card)]",
+			inverted: "bg-foreground text-background [--selection-list-surface:var(--color-foreground)]"
+		},
+		/** A 1px inset hairline around the box. */
+		stroke: {
+			true: "ring-1 ring-border ring-inset",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		stroke: false
+	}
+});
+function defaultActionLabel(count) {
+	return count <= 1 ? "Send request" : `Send ${String(count)} requests`;
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word.charAt(0)).join("").toUpperCase();
+}
+function Tick({ filterId }) {
+	const on = "group-aria-selected/row:";
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "selection-list-tick",
+		"aria-hidden": "true",
+		className: "relative size-5.5 shrink-0",
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				"data-slot": "selection-list-goo",
+				viewBox: "0 0 22 22",
+				className: "absolute inset-0 size-full overflow-visible",
+				children: /* @__PURE__ */ jsxs("g", {
+					filter: `url(#${filterId})`,
+					fill: "currentColor",
+					children: [/* @__PURE__ */ jsx("rect", {
+						"data-slot": "selection-list-blob",
+						x: 2.3,
+						y: 2.3,
+						width: 17.4,
+						height: 17.4,
+						rx: 8.7,
+						className: cn("origin-center scale-0 opacity-0 [transform-box:fill-box]", "transition-[scale,opacity] duration-[calc(420ms*var(--motion-scale))] ease-[var(--ease-overshoot)]", `${on}scale-100 ${on}opacity-100`)
+					}), /* @__PURE__ */ jsx("circle", {
+						cx: 11,
+						cy: 11,
+						r: 4,
+						className: cn("origin-center -translate-y-2.5 scale-0 [transform-box:fill-box]", "transition-[translate,scale] delay-[calc(40ms*var(--motion-scale))] duration-[calc(300ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", `${on}translate-y-0 ${on}scale-100`)
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "selection-list-fill",
+				className: cn("absolute inset-0 rounded-full bg-current opacity-0", `${on}opacity-100`)
+			}),
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 22 22",
+				fill: "none",
+				className: "absolute inset-0 size-full",
+				children: [/* @__PURE__ */ jsx("circle", {
+					"data-slot": "selection-list-ring",
+					cx: 11,
+					cy: 11,
+					r: 10.25,
+					stroke: "currentColor",
+					strokeWidth: 1.5,
+					className: cn("[stroke-opacity:.26] group-hover/row:[stroke-opacity:.48]", "transition-[stroke-opacity,opacity] duration-[calc(100ms*var(--motion-scale))]", `${on}opacity-0`)
+				}), /* @__PURE__ */ jsx("path", {
+					"data-slot": "selection-list-check",
+					d: "M6.8 11.3l2.9 2.9 5.5-5.7",
+					stroke: "var(--selection-list-surface)",
+					strokeWidth: 1.8,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeDasharray: 14,
+					className: cn("[stroke-dashoffset:14]", "transition-[stroke-dashoffset] delay-[calc(60ms*var(--motion-scale))] duration-[calc(260ms*var(--motion-scale))] ease-[cubic-bezier(.32,.9,.3,1)]", `${on}[stroke-dashoffset:0]`)
+				})]
+			})
+		]
+	});
+}
+/** A multi-select list of people whose action springs out once someone is picked. */
+function SelectionList({ className, style, items, value: valueProp, defaultValue, onValueChange, corner = 20, actionLabel = defaultActionLabel, doneLabel = "Requests sent", onAction, resetAfter = 1600, bounce = .35, tone, stroke, listClassName, actionClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue ?? []);
+	const value = (valueProp ?? uncontrolled).filter((id) => items.some((item) => item.id === id));
+	const [active, setActive] = useState(0);
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(false);
+	const [pill, setPill] = useState({
+		index: 0,
+		shown: false
+	});
+	const [phase, setPhase] = useState("idle");
+	const [lastCount, setLastCount] = useState(Math.max(1, value.length));
+	const rows = useRef([]);
+	const action = useRef(null);
+	const timer = useRef(null);
+	const alive = useRef(true);
+	const baseId = useId();
+	const filterId = `dowel-selection-list-goo-${baseId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const count = value.length;
+	const current = Math.min(active, Math.max(items.length - 1, 0));
+	if (count > 0 && count !== lastCount) setLastCount(count);
+	const target = hovered ?? (focused ? current : null);
+	if (target === null ? pill.shown : pill.index !== target) setPill({
+		index: target ?? pill.index,
+		shown: target !== null && pill.shown
+	});
+	const reveal = target !== null && !pill.shown && pill.index === target;
+	useEffect(() => {
+		if (!reveal) return;
+		const frame = requestAnimationFrame(() => setPill((p) => ({
+			...p,
+			shown: true
+		})));
+		return () => cancelAnimationFrame(frame);
+	}, [reveal]);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+			if (timer.current) clearTimeout(timer.current);
+		};
+	}, []);
+	const setValue = (next) => {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	};
+	const toggle = (id) => {
+		setValue(value.includes(id) ? value.filter((v) => v !== id) : [...value, id]);
+	};
+	function handleKeyDown(event) {
+		const last = items.length - 1;
+		const next = {
+			ArrowDown: current >= last ? 0 : current + 1,
+			ArrowUp: current <= 0 ? last : current - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next !== void 0) {
+			event.preventDefault();
+			setActive(next);
+			setHovered(null);
+			rows.current[next]?.focus();
+			return;
+		}
+		const item = items[current];
+		if ((event.key === " " || event.key === "Enter") && item) {
+			event.preventDefault();
+			toggle(item.id);
+		} else if (event.key.toLowerCase() === "a" && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			setValue(count === items.length ? [] : items.map((i) => i.id));
+		}
+	}
+	function handleBlur(event) {
+		if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+	}
+	function finish() {
+		setPhase("done");
+		setValue([]);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => {
+			if (action.current?.contains(document.activeElement)) rows.current[current]?.focus();
+			setPhase("idle");
+		}, resetAfter);
+	}
+	function handleAction() {
+		if (phase !== "idle" || count === 0) return;
+		const result = onAction?.([...value]);
+		if (result instanceof Promise) {
+			setPhase("busy");
+			result.then(() => {
+				if (alive.current) finish();
+			}, () => {
+				if (alive.current) setPhase("idle");
+			});
+			return;
+		}
+		finish();
+	}
+	const out = count > 0 || phase !== "idle";
+	const label = phase === "done" ? doneLabel : typeof actionLabel === "function" ? actionLabel(lastCount) : actionLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "selection-list",
+		className: cn("relative flex w-67 max-w-full flex-col gap-2", className),
+		style: {
+			"--selection-list-spring": springEasing(Math.min(Math.max(bounce, 0), 1)),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-selection-list",
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				className: "absolute size-0",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "-50%",
+					y: "-50%",
+					width: "200%",
+					height: "200%",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: "1.6",
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "blur",
+							type: "matrix",
+							values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17",
+							result: "goo"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "atop"
+						})
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Select people",
+				"aria-labelledby": ariaLabelledBy,
+				"data-slot": "selection-list-box",
+				className: cn("relative z-1 flex flex-col gap-1 p-2.5", selectionListVariants({
+					tone,
+					stroke
+				}), listClassName),
+				style: { borderRadius: corner },
+				onFocus: () => setFocused(true),
+				onBlur: handleBlur,
+				onPointerLeave: () => setHovered(null),
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "selection-list-pill",
+					"data-state": pill.shown ? "visible" : "hidden",
+					"aria-hidden": "true",
+					className: cn("pointer-events-none absolute inset-x-2.5 top-2.5 h-11.5 opacity-0", "bg-[color-mix(in_oklab,currentColor_6%,transparent)]", "transition-[opacity] duration-[calc(160ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", "data-[state=visible]:opacity-100 data-[state=visible]:transition-[opacity,transform]"),
+					style: {
+						borderRadius: corner / 2,
+						transform: `translateY(calc(${String(pill.index)} * (100% + 0.25rem)))`
+					}
+				}), items.map((item, index) => {
+					const selected = value.includes(item.id);
+					return /* @__PURE__ */ jsxs("div", {
+						ref: (node) => {
+							rows.current[index] = node;
+						},
+						role: "option",
+						"aria-selected": selected,
+						"aria-labelledby": `${baseId}-${String(index)}-name`,
+						"aria-describedby": item.description ? `${baseId}-${String(index)}-description` : void 0,
+						tabIndex: index === current ? 0 : -1,
+						"data-slot": "selection-list-option",
+						className: cn("group/row relative flex h-11.5 cursor-pointer items-center gap-2.75 px-2.25 select-none", focusRingInset),
+						style: { borderRadius: corner * .65 },
+						onPointerEnter: () => setHovered(index),
+						onFocus: () => setActive(index),
+						onKeyDown: handleKeyDown,
+						onClick: () => {
+							setActive(index);
+							toggle(item.id);
+						},
+						children: [
+							/* @__PURE__ */ jsxs(Avatar, {
+								size: "sm",
+								"aria-hidden": "true",
+								children: [item.avatar ? /* @__PURE__ */ jsx(AvatarImage, {
+									src: item.avatar,
+									alt: ""
+								}) : null, /* @__PURE__ */ jsx(AvatarFallback, { children: initials(item.name) })]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									id: `${baseId}-${String(index)}-name`,
+									className: "truncate text-[0.8125rem] font-medium",
+									children: item.name
+								}), item.description ? /* @__PURE__ */ jsx("span", {
+									id: `${baseId}-${String(index)}-description`,
+									className: "truncate text-[0.71875rem] text-current/45",
+									children: item.description
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx(Tick, { filterId })
+						]
+					}, item.id);
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: action,
+				"data-slot": "selection-list-action",
+				"data-state": out ? "out" : "tucked",
+				inert: !out,
+				"aria-hidden": out ? void 0 : true,
+				className: cn("group/action relative z-0 origin-top transition-[translate,scale]", "duration-[calc(540ms*var(--motion-scale))] ease-[var(--ease-overshoot)]", "data-[state=tucked]:-translate-y-13 data-[state=tucked]:scale-x-88 data-[state=tucked]:scale-y-55", "data-[state=tucked]:duration-[var(--duration-slow)] data-[state=tucked]:ease-[var(--ease-in-out-quint)]"),
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					press: "none",
+					disabled: !out,
+					loading: phase === "busy",
+					"data-slot": "selection-list-cta",
+					className: cn("h-11 w-full bg-foreground text-[0.84375rem] text-background hover:bg-foreground active:bg-foreground", "transition-[background-color,color,translate,scale] duration-[calc(200ms*var(--motion-scale))]", "hover:-translate-y-px active:scale-[0.985]", "group-data-[state=tucked]/action:bg-foreground/7 group-data-[state=tucked]/action:text-foreground/40", "disabled:opacity-100", actionClassName),
+					style: { borderRadius: corner * .65 },
+					onClick: handleAction,
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("transition-opacity delay-[calc(150ms*var(--motion-scale))] duration-[var(--duration-normal)]", "group-data-[state=tucked]/action:opacity-0 group-data-[state=tucked]/action:delay-0"),
+						children: label
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: phase === "done" ? doneLabel : ""
+			})
+		]
+	});
+}
+//#endregion
+export { SelectionList, selectionListVariants };
+
+//# sourceMappingURL=selection-list.js.map

package/dist/components/selection-list/selection-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-list.js","names":[],"sources":["../../../src/components/selection-list/selection-list.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Selection list (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Button } from \"@/components/button\";\nimport { focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { springEasing } from \"./selection-list-spring\";\n\n/*\n * A multi-select list of people with an action that drops out from under it.\n *\n * The source's rows were independent toggle buttons. Here the box is a\n * `role=\"listbox\" aria-multiselectable` with one tab stop: the arrows rove,\n * Space/Enter toggle, Ctrl/Cmd+A selects or clears everything. One shared\n * highlight pill slides to whichever row the pointer is over or, when the\n * pointer is elsewhere, to the row holding keyboard focus.\n *\n * The tick fills through an SVG goo filter (blur + alpha threshold), which is\n * what makes the fill read as liquid. Under reduced motion the goo layer is\n * dropped for a plain fill. The action is Dowel's Button, tucked behind the\n * box (inert, hidden from assistive technology) while nothing is selected; it\n * springs out on a `linear()` spring. Its result is announced politely.\n */\n\nconst STYLES = `\n[data-slot=\"selection-list-fill\"] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n  [data-slot=\"selection-list-goo\"] { display: none; }\n  [data-slot=\"selection-list-fill\"] { display: block; }\n}\n@supports (transition-timing-function: linear(0, 1)) {\n  [data-slot=\"selection-list-action\"][data-state=\"out\"],\n  [data-slot=\"selection-list-blob\"] { transition-timing-function: var(--selection-list-spring); }\n}\n`;\n\n/** The box surface. `inverted` is the workbench's dark fill. */\nconst selectionListVariants = cva(\"\", {\n  variants: {\n    tone: {\n      default: \"bg-card text-card-foreground [--selection-list-surface:var(--color-card)]\",\n      inverted:\n        \"bg-foreground text-background [--selection-list-surface:var(--color-foreground)]\",\n    },\n    /** A 1px inset hairline around the box. */\n    stroke: {\n      true: \"ring-1 ring-border ring-inset\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    tone: \"default\",\n    stroke: false,\n  },\n});\n\nexport interface SelectionListItem {\n  id: string;\n  name: string;\n  /** Secondary line, such as a handle. */\n  description?: string;\n  /** Image URL. Initials are shown while it loads and if it fails. */\n  avatar?: string;\n}\n\nexport interface SelectionListProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof selectionListVariants> {\n  items: SelectionListItem[];\n  /** Controlled selection, as item ids. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  /** Radius of the box in pixels; the pill and action radii derive from it. */\n  corner?: number;\n  /** The action's label for a selection count. */\n  actionLabel?: string | ((count: number) => string);\n  /** Shown on the action, and announced, once it has run. */\n  doneLabel?: string;\n  /** Runs with the selected ids. Return a promise to show a busy state until it settles. */\n  onAction?: (ids: string[]) => unknown;\n  /** Milliseconds the done label shows before the action tucks away. */\n  resetAfter?: number;\n  /** Overshoot of the action's spring, 0–1. */\n  bounce?: number;\n  listClassName?: string;\n  actionClassName?: string;\n}\n\nfunction defaultActionLabel(count: number) {\n  return count <= 1 ? \"Send request\" : `Send ${String(count)} requests`;\n}\n\nfunction initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word.charAt(0))\n    .join(\"\")\n    .toUpperCase();\n}\n\nfunction Tick({ filterId }: { filterId: string }) {\n  const on = \"group-aria-selected/row:\";\n  return (\n    <span\n      data-slot=\"selection-list-tick\"\n      aria-hidden=\"true\"\n      className=\"relative size-5.5 shrink-0\"\n    >\n      <svg\n        data-slot=\"selection-list-goo\"\n        viewBox=\"0 0 22 22\"\n        className=\"absolute inset-0 size-full overflow-visible\"\n      >\n        <g filter={`url(#${filterId})`} fill=\"currentColor\">\n          <rect\n            data-slot=\"selection-list-blob\"\n            x={2.3}\n            y={2.3}\n            width={17.4}\n            height={17.4}\n            rx={8.7}\n            className={cn(\n              \"origin-center scale-0 opacity-0 [transform-box:fill-box]\",\n              \"transition-[scale,opacity] duration-[calc(420ms*var(--motion-scale))] ease-[var(--ease-overshoot)]\",\n              `${on}scale-100 ${on}opacity-100`,\n            )}\n          />\n          <circle\n            cx={11}\n            cy={11}\n            r={4}\n            className={cn(\n              \"origin-center -translate-y-2.5 scale-0 [transform-box:fill-box]\",\n              \"transition-[translate,scale] delay-[calc(40ms*var(--motion-scale))] duration-[calc(300ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n              `${on}translate-y-0 ${on}scale-100`,\n            )}\n          />\n        </g>\n      </svg>\n      <span\n        data-slot=\"selection-list-fill\"\n        className={cn(\"absolute inset-0 rounded-full bg-current opacity-0\", `${on}opacity-100`)}\n      />\n      <svg viewBox=\"0 0 22 22\" fill=\"none\" className=\"absolute inset-0 size-full\">\n        <circle\n          data-slot=\"selection-list-ring\"\n          cx={11}\n          cy={11}\n          r={10.25}\n          stroke=\"currentColor\"\n          strokeWidth={1.5}\n          className={cn(\n            \"[stroke-opacity:.26] group-hover/row:[stroke-opacity:.48]\",\n            \"transition-[stroke-opacity,opacity] duration-[calc(100ms*var(--motion-scale))]\",\n            `${on}opacity-0`,\n          )}\n        />\n        <path\n          data-slot=\"selection-list-check\"\n          d=\"M6.8 11.3l2.9 2.9 5.5-5.7\"\n          stroke=\"var(--selection-list-surface)\"\n          strokeWidth={1.8}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeDasharray={14}\n          className={cn(\n            \"[stroke-dashoffset:14]\",\n            \"transition-[stroke-dashoffset] delay-[calc(60ms*var(--motion-scale))] duration-[calc(260ms*var(--motion-scale))] ease-[cubic-bezier(.32,.9,.3,1)]\",\n            `${on}[stroke-dashoffset:0]`,\n          )}\n        />\n      </svg>\n    </span>\n  );\n}\n\n/** A multi-select list of people whose action springs out once someone is picked. */\nexport function SelectionList({\n  className,\n  style,\n  items,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  corner = 20,\n  actionLabel = defaultActionLabel,\n  doneLabel = \"Requests sent\",\n  onAction,\n  resetAfter = 1600,\n  bounce = 0.35,\n  tone,\n  stroke,\n  listClassName,\n  actionClassName,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: SelectionListProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? []);\n  const value = (valueProp ?? uncontrolled).filter((id) =>\n    items.some((item) => item.id === id),\n  );\n  const [active, setActive] = useState(0);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [focused, setFocused] = useState(false);\n  const [pill, setPill] = useState({ index: 0, shown: false });\n  const [phase, setPhase] = useState<\"idle\" | \"busy\" | \"done\">(\"idle\");\n  const [lastCount, setLastCount] = useState(Math.max(1, value.length));\n  const rows = useRef<(HTMLDivElement | null)[]>([]);\n  const action = useRef<HTMLDivElement>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const alive = useRef(true);\n  const baseId = useId();\n  const filterId = `dowel-selection-list-goo-${baseId.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const count = value.length;\n  const current = Math.min(active, Math.max(items.length - 1, 0));\n  if (count > 0 && count !== lastCount) setLastCount(count);\n\n  // The pill follows the pointer, else keyboard focus. Arriving from hidden it\n  // jumps to the row first and fades in a frame later, so it never slides in.\n  const target = hovered ?? (focused ? current : null);\n  if (target === null ? pill.shown : pill.index !== target) {\n    setPill({ index: target ?? pill.index, shown: target !== null && pill.shown });\n  }\n  const reveal = target !== null && !pill.shown && pill.index === target;\n  useEffect(() => {\n    if (!reveal) return;\n    const frame = requestAnimationFrame(() => setPill((p) => ({ ...p, shown: true })));\n    return () => cancelAnimationFrame(frame);\n  }, [reveal]);\n\n  useEffect(() => {\n    alive.current = true;\n    return () => {\n      alive.current = false;\n      if (timer.current) clearTimeout(timer.current);\n    };\n  }, []);\n\n  const setValue = (next: string[]) => {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  };\n\n  const toggle = (id: string) => {\n    setValue(value.includes(id) ? value.filter((v) => v !== id) : [...value, id]);\n  };\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const last = items.length - 1;\n    const moves: Record<string, number> = {\n      ArrowDown: current >= last ? 0 : current + 1,\n      ArrowUp: current <= 0 ? last : current - 1,\n      Home: 0,\n      End: last,\n    };\n    const next = moves[event.key];\n    if (next !== undefined) {\n      event.preventDefault();\n      setActive(next);\n      setHovered(null);\n      rows.current[next]?.focus();\n      return;\n    }\n    const item = items[current];\n    if ((event.key === \" \" || event.key === \"Enter\") && item) {\n      event.preventDefault();\n      toggle(item.id);\n    } else if (event.key.toLowerCase() === \"a\" && (event.ctrlKey || event.metaKey)) {\n      event.preventDefault();\n      setValue(count === items.length ? [] : items.map((i) => i.id));\n    }\n  }\n\n  function handleBlur(event: FocusEvent<HTMLDivElement>) {\n    if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n  }\n\n  function finish() {\n    setPhase(\"done\");\n    setValue([]);\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      // The action is about to become inert: bring focus back to the list\n      // rather than letting it fall to the page.\n      if (action.current?.contains(document.activeElement)) rows.current[current]?.focus();\n      setPhase(\"idle\");\n    }, resetAfter);\n  }\n\n  function handleAction() {\n    if (phase !== \"idle\" || count === 0) return;\n    const result = onAction?.([...value]);\n    if (result instanceof Promise) {\n      setPhase(\"busy\");\n      result.then(\n        () => {\n          if (alive.current) finish();\n        },\n        () => {\n          if (alive.current) setPhase(\"idle\");\n        },\n      );\n      return;\n    }\n    finish();\n  }\n\n  const out = count > 0 || phase !== \"idle\";\n  const label =\n    phase === \"done\"\n      ? doneLabel\n      : typeof actionLabel === \"function\"\n        ? actionLabel(lastCount)\n        : actionLabel;\n\n  return (\n    <div\n      data-slot=\"selection-list\"\n      className={cn(\"relative flex w-67 max-w-full flex-col gap-2\", className)}\n      style={\n        {\n          \"--selection-list-spring\": springEasing(Math.min(Math.max(bounce, 0), 1)),\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <style href=\"dowel-selection-list\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <svg aria-hidden=\"true\" className=\"absolute size-0\">\n        <defs>\n          <filter id={filterId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1.6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17\"\n              result=\"goo\"\n            />\n            <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? \"Select people\")}\n        aria-labelledby={ariaLabelledBy}\n        data-slot=\"selection-list-box\"\n        className={cn(\n          \"relative z-1 flex flex-col gap-1 p-2.5\",\n          selectionListVariants({ tone, stroke }),\n          listClassName,\n        )}\n        style={{ borderRadius: corner }}\n        onFocus={() => setFocused(true)}\n        onBlur={handleBlur}\n        onPointerLeave={() => setHovered(null)}\n      >\n        <span\n          data-slot=\"selection-list-pill\"\n          data-state={pill.shown ? \"visible\" : \"hidden\"}\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute inset-x-2.5 top-2.5 h-11.5 opacity-0\",\n            \"bg-[color-mix(in_oklab,currentColor_6%,transparent)]\",\n            \"transition-[opacity] duration-[calc(160ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n            \"data-[state=visible]:opacity-100 data-[state=visible]:transition-[opacity,transform]\",\n          )}\n          style={{\n            borderRadius: corner / 2,\n            transform: `translateY(calc(${String(pill.index)} * (100% + 0.25rem)))`,\n          }}\n        />\n        {items.map((item, index) => {\n          const selected = value.includes(item.id);\n          return (\n            <div\n              key={item.id}\n              ref={(node) => {\n                rows.current[index] = node;\n              }}\n              role=\"option\"\n              aria-selected={selected}\n              aria-labelledby={`${baseId}-${String(index)}-name`}\n              aria-describedby={\n                item.description ? `${baseId}-${String(index)}-description` : undefined\n              }\n              tabIndex={index === current ? 0 : -1}\n              data-slot=\"selection-list-option\"\n              className={cn(\n                \"group/row relative flex h-11.5 cursor-pointer items-center gap-2.75 px-2.25 select-none\",\n                focusRingInset,\n              )}\n              style={{ borderRadius: corner * 0.65 }}\n              onPointerEnter={() => setHovered(index)}\n              onFocus={() => setActive(index)}\n              onKeyDown={handleKeyDown}\n              onClick={() => {\n                setActive(index);\n                toggle(item.id);\n              }}\n            >\n              <Avatar size=\"sm\" aria-hidden=\"true\">\n                {item.avatar ? <AvatarImage src={item.avatar} alt=\"\" /> : null}\n                <AvatarFallback>{initials(item.name)}</AvatarFallback>\n              </Avatar>\n              <span className=\"flex min-w-0 flex-1 flex-col\">\n                <span\n                  id={`${baseId}-${String(index)}-name`}\n                  className=\"truncate text-[0.8125rem] font-medium\"\n                >\n                  {item.name}\n                </span>\n                {item.description ? (\n                  <span\n                    id={`${baseId}-${String(index)}-description`}\n                    className=\"truncate text-[0.71875rem] text-current/45\"\n                  >\n                    {item.description}\n                  </span>\n                ) : null}\n              </span>\n              <Tick filterId={filterId} />\n            </div>\n          );\n        })}\n      </div>\n      <div\n        ref={action}\n        data-slot=\"selection-list-action\"\n        data-state={out ? \"out\" : \"tucked\"}\n        inert={!out}\n        aria-hidden={out ? undefined : true}\n        className={cn(\n          \"group/action relative z-0 origin-top transition-[translate,scale]\",\n          \"duration-[calc(540ms*var(--motion-scale))] ease-[var(--ease-overshoot)]\",\n          \"data-[state=tucked]:-translate-y-13 data-[state=tucked]:scale-x-88 data-[state=tucked]:scale-y-55\",\n          \"data-[state=tucked]:duration-[var(--duration-slow)] data-[state=tucked]:ease-[var(--ease-in-out-quint)]\",\n        )}\n      >\n        <Button\n          type=\"button\"\n          press=\"none\"\n          disabled={!out}\n          loading={phase === \"busy\"}\n          data-slot=\"selection-list-cta\"\n          className={cn(\n            \"h-11 w-full bg-foreground text-[0.84375rem] text-background hover:bg-foreground active:bg-foreground\",\n            \"transition-[background-color,color,translate,scale] duration-[calc(200ms*var(--motion-scale))]\",\n            \"hover:-translate-y-px active:scale-[0.985]\",\n            \"group-data-[state=tucked]/action:bg-foreground/7 group-data-[state=tucked]/action:text-foreground/40\",\n            \"disabled:opacity-100\",\n            actionClassName,\n          )}\n          style={{ borderRadius: corner * 0.65 }}\n          onClick={handleAction}\n        >\n          <span\n            className={cn(\n              \"transition-opacity delay-[calc(150ms*var(--motion-scale))] duration-[var(--duration-normal)]\",\n              \"group-data-[state=tucked]/action:opacity-0 group-data-[state=tucked]/action:delay-0\",\n            )}\n          >\n            {label}\n          </span>\n        </Button>\n      </div>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {phase === \"done\" ? doneLabel : \"\"}\n      </span>\n    </div>\n  );\n}\n\nexport { selectionListVariants };\n"],"mappings":"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"}

package/dist/components/shader-transition/index.d.ts

@@ -0,0 +1,4 @@
+import { SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, ShaderTransitionPreset, ShaderTransitionPresetName, getShaderTransitionPreset } from "./shader-transition-presets.js";
+import { ShaderTransition, ShaderTransitionProps, ShaderTransitionStatus } from "./shader-transition.js";
+import { Rgb, ShaderColors, ShaderRenderer, VERTEX_SHADER, buildFragmentShader, createProgram, createShaderRenderer } from "./shader-transition-engine.js";
+export { type Rgb, SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, type ShaderColors, type ShaderRenderer, ShaderTransition, type ShaderTransitionPreset, type ShaderTransitionPresetName, type ShaderTransitionProps, type ShaderTransitionStatus, VERTEX_SHADER, buildFragmentShader, createProgram, createShaderRenderer, getShaderTransitionPreset };

package/dist/components/shader-transition/index.js

@@ -0,0 +1,4 @@
+import { VERTEX_SHADER, buildFragmentShader, createProgram, createShaderRenderer } from "./shader-transition-engine.js";
+import { SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, getShaderTransitionPreset } from "./shader-transition-presets.js";
+import { ShaderTransition } from "./shader-transition.js";
+export { SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, ShaderTransition, VERTEX_SHADER, buildFragmentShader, createProgram, createShaderRenderer, getShaderTransitionPreset };

package/dist/components/shader-transition/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/shader-transition/meta.ts
+const meta = defineMeta({
+	name: "shader-transition",
+	title: "Shader Transition",
+	description: "Transitions a frame between two states under a full-frame WebGL reveal — one raw-WebGL engine and sixteen presets (aperture, chroma, prism, SDF blobs and circles, noise, wipe, stripes, spiral…).",
+	category: "effects",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: [
+		"shader-transition.tsx",
+		"shader-transition-engine.ts",
+		"shader-transition-presets.ts"
+	],
+	a11y: "Both states are real DOM; the shader only paints a decorative, aria-hidden cover over the frame. While a run is in progress the outgoing state is aria-hidden and inert, the incoming state is in the accessibility tree from the first frame, and focus inside the outgoing state moves to the incoming one. The root is aria-busy while running. Reduced motion (OS setting or --motion-scale 0) swaps instantly; without WebGL, or if the context is lost mid-run, the states cross-fade instead."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/shader-transition/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/shader-transition/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"shader-transition\",\n  title: \"Shader Transition\",\n  description:\n    \"Transitions a frame between two states under a full-frame WebGL reveal — one raw-WebGL engine and sixteen presets (aperture, chroma, prism, SDF blobs and circles, noise, wipe, stripes, spiral…).\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\n    \"shader-transition.tsx\",\n    \"shader-transition-engine.ts\",\n    \"shader-transition-presets.ts\",\n  ],\n  a11y:\n    \"Both states are real DOM; the shader only paints a decorative, aria-hidden cover over the frame. \" +\n    \"While a run is in progress the outgoing state is aria-hidden and inert, the incoming state is in the \" +\n    \"accessibility tree from the first frame, and focus inside the outgoing state moves to the incoming one. \" +\n    \"The root is aria-busy while running. Reduced motion (OS setting or --motion-scale 0) swaps instantly; \" +\n    \"without WebGL, or if the context is lost mid-run, the states cross-fade instead.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO;EACL;EACA;EACA;CACF;CACA,MACE;AAKJ,CAAC"}

package/dist/components/shader-transition/shader-transition-engine.d.ts

@@ -0,0 +1,39 @@
+import { ShaderTransitionPreset } from "./shader-transition-presets.js";
+//#region src/components/shader-transition/shader-transition-engine.d.ts
+type Rgb = readonly [number, number, number];
+interface ShaderColors {
+  /** The cover: the colour behind the content. */
+  surface: Rgb;
+  /** Glow on the moving front. */
+  accent: Rgb;
+  /** Tint mixed into the cover by the preset's sheen. */
+  accentSecondary: Rgb;
+}
+interface ShaderRenderer {
+  /** Draws one frame. `progress` runs 0 → 1 across the whole run. */
+  draw: (progress: number, time: number) => void;
+  /** Resizes the backing store to a CSS box, DPR capped at 2. */
+  resize: (width: number, height: number) => void;
+  /** Frees the program, buffer and — where the browser allows — the context. */
+  destroy: () => void;
+}
+/** Shared by every preset. Varyings are unnecessary: the fragment reads gl_FragCoord. */
+declare const VERTEX_SHADER = "attribute vec2 aPos;\nvoid main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\n";
+/** The complete fragment program for one preset. */
+declare function buildFragmentShader(preset: Pick<ShaderTransitionPreset, "glsl">): string;
+/** Compiles and links the shared vertex shader with a fragment source. */
+declare function createProgram(gl: WebGLRenderingContext, fragmentSource: string): WebGLProgram | null;
+interface RendererOptions {
+  colors: ShaderColors;
+  /** Mirror the field horizontally, so sweeps travel toward inline-end in RTL. */
+  flip?: boolean;
+}
+/**
+ * Creates a context and program on `canvas` for one preset. Returns null when
+ * WebGL is unavailable or the program does not build — the caller falls back
+ * to a CSS cross-fade.
+ */
+declare function createShaderRenderer(canvas: HTMLCanvasElement, preset: ShaderTransitionPreset, { colors, flip }: RendererOptions): ShaderRenderer | null;
+//#endregion
+export { RendererOptions, Rgb, ShaderColors, ShaderRenderer, VERTEX_SHADER, buildFragmentShader, createProgram, createShaderRenderer };
+//# sourceMappingURL=shader-transition-engine.d.ts.map

package/dist/components/shader-transition/shader-transition-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition-engine.d.ts","names":[],"sources":["../../../src/components/shader-transition/shader-transition-engine.ts"],"mappings":";;KA6BY;UAEK;;EAEf,SAAS;;EAET,QAAQ;;EAER,iBAAiB;;UAGF;;EAEf,OAAO,kBAAkB;;EAEzB,SAAS,eAAe;;EAExB;;;cAMW;;iBA2DG,oBAAoB,QAAQ,KAAK;;iBAoBjC,cACd,IAAI,uBACJ,yBACC;UAqCc;EACf,QAAQ;;EAER;;;;;;;iBAQc,qBACd,QAAQ,mBACR,QAAQ,0BACN,QAAQ,QAAgB,kBACzB"}