@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/drawer/drawer.module.css

@@ -0,0 +1,97 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: oklch(10% 0 0 / .38);
+  backdrop-filter: blur(4px);
+}
+
+.content {
+  --drawer-size: min(30rem, calc(100vw - var(--space-inset)));
+  /* Critically damped, like a sheet spring: it never overshoots past the edge it is anchored to. */
+  --ease-drawer: cubic-bezier(.32,.72,0,1);
+  --drawer-from: translateX(100%);
+  position: fixed;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  width: var(--drawer-size);
+  max-width: 100vw;
+  max-height: 100dvh;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-floating);
+}
+/* While a layer leaves it lets clicks through, so pressing the trigger again during the close reopens the drawer from wherever it is. */
+/* Radix writes pointer-events inline on the overlay, so the closing state has to win over it. */
+.overlay[data-state="closed"], .content[data-state="closed"] { pointer-events: none !important; }
+
+.content[data-side="right"] { inset: 0 0 0 auto; border-width: 1px 0 1px 1px; border-radius: var(--radius-container) 0 0 var(--radius-container); corner-shape: var(--corner-shape); }
+.content[data-side="left"] { inset: 0 auto 0 0; border-width: 1px 1px 1px 0; border-radius: 0 var(--radius-container) var(--radius-container) 0; corner-shape: var(--corner-shape); }
+.content[data-side="top"] { inset: 0 0 auto; width: 100%; max-width: none; max-height: min(32rem, 100dvh); border-width: 0 0 1px; border-radius: 0 0 var(--radius-container) var(--radius-container); corner-shape: var(--corner-shape); }
+.content[data-side="bottom"] { inset: auto 0 0; width: 100%; max-width: none; max-height: min(32rem, 100dvh); border-width: 1px 0 0; border-radius: var(--radius-container) var(--radius-container) 0 0; corner-shape: var(--corner-shape); }
+.content[data-side="bottom"]::before { position: absolute; top: 9px; left: 50%; width: 2.25rem; height: 4px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); content: ""; opacity: .75; transform: translateX(-50%); }
+
+/* Motion springs the panel from its edge. Keyframes only run when DrawerContent sits under a bare Radix root. */
+.content[data-side="left"] { --drawer-from: translateX(-100%); }
+.content[data-side="top"] { --drawer-from: translateY(-100%); }
+.content[data-side="bottom"] { --drawer-from: translateY(100%); }
+.keyframes.overlay[data-state="open"] { animation: overlay-in var(--duration-standard) var(--ease-enter) both; }
+.keyframes.overlay[data-state="closed"] { animation: overlay-out var(--duration-fast) var(--ease-standard) both; }
+.keyframes.content[data-state="open"] { animation: drawer-in var(--duration-considered) var(--ease-drawer) both; }
+.keyframes.content[data-state="closed"] { animation: drawer-out var(--duration-standard) var(--ease-standard) both; }
+.content:focus { outline: none; }
+/* Inside a container the layers anchor to that element instead of the viewport. */
+.overlay[data-contained], .content[data-contained] { position: absolute; }
+.overlay[data-contained] { z-index: 1; background: oklch(10% 0 0 / .16); backdrop-filter: none; }
+.content[data-contained] { --drawer-size: min(22rem, calc(100% - var(--space-block))); z-index: 2; max-height: 100%; box-shadow: none; }
+.content[data-contained][data-side="top"], .content[data-contained][data-side="bottom"] { max-height: min(32rem, calc(100% - var(--space-block))); }
+/* The container already draws the outer edges, so only the inner edge keeps a border. */
+.content[data-contained][data-side] { border-width: 0; }
+.content[data-contained][data-side="right"] { border-left-width: 1px; }
+.content[data-contained][data-side="left"] { border-right-width: 1px; }
+.content[data-contained][data-side="top"] { border-bottom-width: 1px; }
+.content[data-contained][data-side="bottom"] { border-top-width: 1px; }
+
+.header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: var(--space-comfort); padding: var(--space-section); border-bottom: 1px solid var(--border); }
+/* The header doubles as the drag handle, so touch drags move the panel instead of the page. */
+.handle { touch-action: none; user-select: none; }
+.content[data-side="bottom"] .handle, .content[data-side="top"] .handle { cursor: grab; }
+.title, .description { position: relative; }
+/* The copy sets its own line height so a page-level heading rule cannot squeeze the title. */
+.swap { display: block; line-height: var(--leading-body); }
+.title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.description { max-width: 32rem; margin: var(--space-related) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+/* Centered on the first line of the title rather than its top edge. */
+.close { display: grid; flex: 0 0 auto; width: var(--space-block); height: var(--space-block); margin-top: calc((var(--text-lg) * var(--leading-body) - var(--space-block)) / 2); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--surface-muted) 65%, transparent); color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .close:hover { background: var(--surface-muted); color: var(--foreground); } }
+.close:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.body { min-height: 0; overflow: auto; padding: var(--space-section); font-size: var(--text-sm); line-height: var(--leading-body); overscroll-behavior: contain; scrollbar-width: thin; }
+
+@media (max-width: 40rem) {
+  .content { --drawer-size: calc(100vw - var(--space-group)); }
+  .content[data-side="right"] { border-radius: var(--radius-control) 0 0 var(--radius-control); corner-shape: var(--corner-shape); }
+  .content[data-side="left"] { border-radius: 0 var(--radius-control) var(--radius-control) 0; corner-shape: var(--corner-shape); }
+  .content[data-side="top"] { border-radius: 0 0 var(--radius-control) var(--radius-control); corner-shape: var(--corner-shape); }
+  .content[data-side="bottom"] { border-radius: var(--radius-control) var(--radius-control) 0 0; corner-shape: var(--corner-shape); }
+  .header, .body { padding: var(--space-comfort); }
+}
+
+@keyframes overlay-in { from { opacity: 0; } }
+@keyframes overlay-out { to { opacity: 0; } }
+@keyframes drawer-in { from { transform: var(--drawer-from); } }
+/* The late fade lets the floating shadow leave with the panel instead of popping away at unmount. */
+@keyframes drawer-out { 65% { opacity: 1; } to { opacity: 0; transform: var(--drawer-from); } }
+@keyframes drawer-fade-in { from { opacity: 0; } }
+@keyframes drawer-fade-out { to { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .keyframes.overlay[data-state="open"] { animation: overlay-in var(--duration-instant) linear both; }
+  .keyframes.overlay[data-state="closed"] { animation: overlay-out 100ms linear both; }
+  .keyframes.content[data-state="open"] { animation: drawer-fade-in var(--duration-instant) linear both; }
+  .keyframes.content[data-state="closed"] { animation: drawer-fade-out 100ms linear both; }
+  .close, .close:active { transition: none; }
+  .close:active { transform: none; }
+}

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface DropdownItem {
+    label: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+    destructive?: boolean;
+    separatorBefore?: boolean;
+}
+export interface DropdownMenuProps {
+    label: string;
+    items: DropdownItem[];
+    icon?: ReactNode;
+}
+export declare function DropdownMenu({ label, items, icon }: DropdownMenuProps): import("react").JSX.Element;
+export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useLayoutEffect, useRef, useState } from "react";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./dropdown-menu.module.css";
+/** A new trigger label rises in while the old one leaves, and the trigger width springs to the measured text instead of snapping. */
+function TriggerLabel({ text }) {
+    const reduced = useReducedMotion();
+    const measure = useRef(null);
+    const measured = useRef(null);
+    const [size, setSize] = useState({ width: "auto", animate: false });
+    useLayoutEffect(() => {
+        const node = measure.current;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const current = node.textContent;
+            // Only a text change morphs; the first measure and font swaps settle instantly.
+            const animate = measured.current !== null && measured.current !== current;
+            measured.current = current;
+            setSize({ width: Math.ceil(entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth), animate });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return _jsxs(motion.span, { className: styles.label, initial: false, animate: { width: size.width }, transition: size.animate && !reduced ? motionTokens.spring.morph : { duration: 0 }, children: [_jsx("span", { ref: measure, className: styles.labelMeasure, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.labelText, initial: reduced ? false : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: text }, text) })] });
+}
+export function DropdownMenu({ label, items, icon }) {
+    const { highlight, reset, contentProps } = useMenuHighlight();
+    return _jsxs(DropdownPrimitive.Root, { onOpenChange: open => { if (open)
+            reset(); }, children: [_jsxs(DropdownPrimitive.Trigger, { className: styles.trigger, type: "button", children: [icon && _jsx("span", { className: styles.triggerIcon, "aria-hidden": "true", children: icon }), _jsx(TriggerLabel, { text: label }), _jsx(ChevronDown, { className: styles.chevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }), _jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { className: styles.menu, sideOffset: 6, align: "end", collisionPadding: 12, loop: true, ...contentProps, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), items.map((item, index) => _jsxs(Fragment, { children: [item.separatorBefore && _jsx(DropdownPrimitive.Separator, { className: styles.separator }), _jsxs(DropdownPrimitive.Item, { className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, onSelect: item.onSelect, children: [item.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), item.label] })] }, item.label))] }) })] });
+}
+export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.module.css

@@ -0,0 +1,38 @@
+.trigger { display: inline-flex; max-width: 100%; min-height: var(--control-height-sm); align-items: center; gap: var(--space-related); padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover { border-color: var(--border-strong); background: var(--surface-muted); box-shadow: var(--shadow-resting); } }
+/* The trigger anchors the menu, so press feedback stays in color. A scaled rect would be measured on pointerdown and shift the menu. */
+.trigger[data-state="open"] { border-color: var(--border-strong); background: var(--surface-muted); box-shadow: none; }
+.trigger:active { border-color: var(--border-strong); background: color-mix(in oklab, var(--surface-muted), var(--border) 55%); box-shadow: none; }
+.item:focus-visible { outline: none; }
+.triggerIcon { display: inline-flex; flex: none; color: var(--text-secondary); }
+.label { position: relative; display: inline-flex; min-width: 0; flex: 0 1 auto; overflow-x: clip; }
+.labelMeasure { position: absolute; top: 0; left: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
+.labelText { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chevron { flex: none; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.trigger[data-state="open"] .chevron { transform: rotate(180deg); }
+/* The menu grows from the trigger edge: offset toward the trigger, scale from the Radix origin, fade quickly.
+   Transitions instead of keyframes, so a close that interrupts the open (or a reopen during the close) reverses from where it is. */
+.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: 60; min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu[data-side="top"] { --menu-y: 5px; }
+.menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
+.menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
+@starting-style {
+  .menu[data-state="open"] { opacity: 0; transform: translate(var(--menu-x), var(--menu-y)) scale(.97); }
+  .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
+}
+/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
+.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
+.icon { display: inline-flex; width: 17px; color: var(--text-secondary); }
+.separator { height: 1px; margin: var(--space-tight) calc(var(--space-tight) * -1); background: var(--border-subtle); }
+.destructive { color: var(--danger); }
+.destructive .icon { color: var(--danger); }
+.item[data-disabled] { opacity: .45; cursor: default; }
+@keyframes menu-exit { to { --menu-exit: 1; } }
+@media (prefers-reduced-transparency: reduce) { .menu { background: var(--surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .trigger, .chevron, .item, .highlight { transition: none; }
+  .menu, .menu[data-state="closed"] { transform: none; transition: opacity var(--duration-instant) linear; }
+}

package/components/elastic-slider/elastic-slider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export interface ElasticSliderMark {
+    value: number;
+    label?: string;
+}
+export interface ElasticSliderProps {
+    /** Visible label; it also names the thumb. */
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Runs once a drag is released or a key changes the value. */
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** PageUp, PageDown, and Shift with an arrow move this far. Defaults to a tenth of the range. */
+    largeStep?: number;
+    /** Detents. A dragged thumb clicks into each one and holds for a few pixels before letting go. Labels print under the track. */
+    marks?: (number | ElasticSliderMark)[];
+    /** Formats the readout, the bubble, and the spoken value. */
+    format?: (value: number) => string;
+    /** Show the value beside the label. The bubble over the thumb still appears while dragging or using keys. */
+    showValue?: boolean;
+    /** Icons at either end. The one on the side being pulled past its limit is pushed outward with the track. */
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Submits the value with a form. */
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A single value slider made of something that gives. The thumb swells under the finger, the track stretches like rubber past either
+ * end and springs back with the release velocity, a value tag hangs off the thumb and sways with its speed, and marks act as detents
+ * the thumb clicks into. Arrows, Shift+arrows, PageUp, PageDown, Home, and End work as in a native range input.
+ */
+export declare function ElasticSlider({ label, value, defaultValue, onValueChange, onValueCommit, min, max, step: stepProp, largeStep, marks, format, showValue, startIcon, endIcon, name, disabled, className }: ElasticSliderProps): import("react").JSX.Element;
+export default ElasticSlider;

package/components/elastic-slider/elastic-slider.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./elastic-slider.module.css";
+const { spring, duration, blur } = motionTokens;
+const enterEase = [...motionTokens.ease.enter];
+const exitEase = [...motionTokens.ease.standard];
+/** Motion drops velocity on time-defined springs, so anything a gesture hands off to runs the same spring written as stiffness and damping. */
+const physical = ({ visualDuration, bounce }, restDelta = .002) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta, restSpeed: restDelta * 10 }; };
+const thumbSpring = physical(spring.snappy);
+/** The stretch lets go with more life than anything else here: it is the one thing the user threw. */
+const snapBack = physical({ visualDuration: .5, bounce: .42 }, .05);
+/** Pixels the track may stretch past a limit, the pixel reach of a detent, and the speed a key press at a limit hits the wall with. */
+const STRETCH = 26, DETENT_PX = 7, BUMP_PX = 260;
+/** iOS style resistance: each pixel past the limit gives less, and never more than `limit`. */
+const rubber = (distance, limit = STRETCH) => Math.sign(distance) * (1 - 1 / (Math.abs(distance) * .55 / limit + 1)) * limit;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const decimalsOf = (value) => (String(value).split(".")[1] ?? "").length;
+const bubbleIn = { opacity: 0, scale: .7, y: 6, filter: `blur(${blur.subtle}px)` };
+const bubbleRest = { opacity: 1, scale: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" } };
+const bubbleOut = { opacity: 0, scale: .85, y: 4, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: exitEase } };
+const bubbleEnter = { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } };
+/**
+ * A single value slider made of something that gives. The thumb swells under the finger, the track stretches like rubber past either
+ * end and springs back with the release velocity, a value tag hangs off the thumb and sways with its speed, and marks act as detents
+ * the thumb clicks into. Arrows, Shift+arrows, PageUp, PageDown, Home, and End work as in a native range input.
+ */
+export function ElasticSlider({ label, value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step: stepProp = 1, largeStep, marks, format, showValue = true, startIcon, endIcon, name, disabled, className }) {
+    const reduced = useReducedMotion() ?? false;
+    const labelId = useId();
+    const step = stepProp > 0 ? stepProp : 1;
+    const span = max - min || 1;
+    const decimals = Math.max(decimalsOf(step), decimalsOf(min));
+    const [internal, setInternal] = useState(() => clamp(defaultValue ?? min, min, max));
+    const current = value === undefined ? internal : clamp(value, min, max);
+    const formatValue = format ?? ((input) => input.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }));
+    const pct = (input) => ((input - min) / span) * 100;
+    const valueAt = (percent) => min + (percent / 100) * span;
+    const snap = (input) => clamp(Number((min + Math.round((input - min) / step) * step).toFixed(decimals)), min, max);
+    const markList = (marks ?? []).map(mark => typeof mark === "number" ? { value: mark } : mark).filter(mark => mark.value >= min && mark.value <= max);
+    const trackRef = useRef(null);
+    const thumbRef = useRef(null);
+    const tickRefs = useRef(new Map());
+    const latest = useRef(current);
+    const goal = useRef(pct(current));
+    const drag = useRef(null);
+    const width = useRef(1);
+    const lingerTimer = useRef(undefined);
+    const [dragging, setDragging] = useState(false);
+    const [keyed, setKeyed] = useState(false);
+    const [linger, setLinger] = useState(false);
+    // The thumb is a committed position plus a catch-up offset, so it can glide into a detent or to a pressed spot while the pointer
+    // keeps moving the position 1:1. `over` is the rubber-band stretch in pixels, signed by side.
+    const pos = useMotionValue(pct(current));
+    const lag = useMotionValue(0);
+    const over = useMotionValue(0);
+    const press = useMotionValue(0);
+    const shown = useTransform(() => pos.get() + lag.get());
+    const thumbX = useTransform(shown, at => `${at - 100}%`);
+    const clipPath = useTransform(shown, at => `inset(0 ${(100 - clamp(at, 0, 100)).toFixed(3)}% 0 0 round 999px)`);
+    // Stretch: the track grows away from its anchored end and thins as it does, like a band pulled tight. A press thickens it a little.
+    const scaleX = useTransform(over, px => 1 + Math.abs(px) / width.current);
+    const originX = useTransform(over, px => px < 0 ? 1 : 0);
+    const scaleY = useTransform(() => (1 + press.get() * .45) * (1 - (Math.abs(over.get()) / STRETCH) * .32));
+    const startShift = useTransform(over, px => Math.min(0, px));
+    const endShift = useTransform(over, px => Math.max(0, px));
+    // The tag trails the thumb on a soft spring, so it lags more the faster the thumb moves, and swings on its tail with that speed.
+    const trailed = useSpring(shown, { stiffness: 420, damping: 30, mass: .7 });
+    const bubbleAt = reduced ? shown : trailed;
+    const bubbleX = useTransform(bubbleAt, at => `${at - 100}%`);
+    const speed = useVelocity(trailed);
+    const rotate = useTransform(speed, velocity => reduced ? 0 : clamp((-velocity / 100) * width.current * .009, -11, 11));
+    const emit = (next) => {
+        if (latest.current === next)
+            return;
+        latest.current = next;
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    };
+    // Values from outside a drag (keys, props) spring the thumb to their place from wherever it is on screen.
+    useLayoutEffect(() => {
+        latest.current = current;
+        const target = pct(current);
+        if (drag.current || goal.current === target)
+            return;
+        goal.current = target;
+        const from = pos.get() + lag.get();
+        lag.jump(0);
+        pos.jump(from);
+        if (reduced)
+            pos.jump(target);
+        else
+            animate(pos, target, thumbSpring);
+    });
+    useEffect(() => {
+        const node = trackRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => { if (entry)
+            width.current = entry.contentRect.width || 1; });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => () => window.clearTimeout(lingerTimer.current), []);
+    /** A detent answers with a small pop of its tick and, where the device supports it, a short tap of vibration. */
+    function pulse(mark, haptic) {
+        const node = tickRefs.current.get(mark);
+        if (node && !reduced)
+            animate(node, { scale: [1, 2.1, 1] }, { duration: .34, ease: enterEase });
+        if (haptic && typeof navigator !== "undefined" && "vibrate" in navigator)
+            navigator.vibrate?.(6);
+    }
+    /** Moves the thumb to a new resting spot through a spring on the catch-up offset, so the jump reads as travel. */
+    function glide(placed) {
+        const from = pos.get() + lag.get();
+        pos.set(placed);
+        if (reduced) {
+            lag.jump(0);
+            return;
+        }
+        lag.jump(from - placed);
+        animate(lag, 0, thumbSpring);
+    }
+    const detentAt = (percent) => {
+        let best = null, gap = DETENT_PX + 1;
+        for (const mark of markList) {
+            const distance = Math.abs(((percent - pct(mark.value)) / 100) * width.current);
+            if (distance <= DETENT_PX && distance < gap) {
+                best = mark.value;
+                gap = distance;
+            }
+        }
+        return best;
+    };
+    function follow(state, at, time, first = false) {
+        const raw = at - state.grab;
+        const edge = clamp(raw, 0, 100);
+        over.set(reduced ? 0 : rubber(((raw - edge) / 100) * width.current));
+        const detent = detentAt(edge);
+        const placed = detent === null ? edge : pct(detent);
+        if (first || detent !== state.detent) {
+            if (detent !== null && !first)
+                pulse(detent, state.type === "touch");
+            glide(placed);
+        }
+        else
+            pos.set(placed);
+        state.detent = detent;
+        state.edge = edge;
+        state.samples.push({ t: time, p: placed });
+        if (state.samples.length > 6)
+            state.samples.shift();
+        emit(detent ?? snap(valueAt(edge)));
+    }
+    function onPointerDown(event) {
+        if (disabled || event.button !== 0 || !event.isPrimary)
+            return;
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        width.current = rect.width || 1;
+        const at = ((event.clientX - rect.left) / width.current) * 100;
+        const grabbed = !!event.target.closest("[data-thumb]");
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const from = pos.get() + lag.get();
+        lag.jump(0);
+        pos.jump(from);
+        const state = { pointer: event.pointerId, grab: grabbed ? at - from : 0, samples: [], detent: null, edge: from, type: event.pointerType };
+        drag.current = state;
+        setDragging(true);
+        window.clearTimeout(lingerTimer.current);
+        setLinger(false);
+        thumbRef.current?.focus({ preventScroll: true });
+        if (reduced)
+            press.jump(1);
+        else
+            animate(press, 1, spring.snappy);
+        // A grabbed thumb stays put under the finger; a pressed track pulls the thumb over on a spring.
+        follow(state, grabbed ? from + state.grab : at, event.timeStamp, true);
+    }
+    function onPointerMove(event) {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        follow(state, ((event.clientX - rect.left) / (rect.width || 1)) * 100, event.timeStamp);
+    }
+    function onPointerEnd(event) {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        drag.current = null;
+        const samples = state.samples, first = samples[0], last = samples[samples.length - 1];
+        const elapsed = last && first ? (last.t - first.t) / 1000 : 0;
+        const velocity = (elapsed > .008 && event.timeStamp - last.t < 60 ? (last.p - first.p) / elapsed : 0) + lag.getVelocity();
+        const next = state.detent ?? snap(valueAt(state.edge));
+        const from = pos.get() + lag.get(), target = pct(next);
+        lag.jump(0);
+        pos.jump(from);
+        goal.current = target;
+        if (reduced) {
+            pos.jump(target);
+            over.jump(0);
+            press.jump(0);
+        }
+        else {
+            animate(pos, target, { ...thumbSpring, velocity });
+            animate(over, 0, { ...snapBack, velocity: over.getVelocity() });
+            animate(press, 0, spring.snappy);
+        }
+        emit(next);
+        setDragging(false);
+        setLinger(true);
+        lingerTimer.current = window.setTimeout(() => setLinger(false), 700);
+        onValueCommit?.(next);
+    }
+    function onKeyDown(event) {
+        if (disabled)
+            return;
+        const now = latest.current;
+        const large = largeStep ?? Math.max(step, snap(min + span / 10) - min);
+        const moves = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, PageUp: large, PageDown: -large };
+        let wanted;
+        if (event.key === "Home")
+            wanted = min;
+        else if (event.key === "End")
+            wanted = max;
+        else if (event.key in moves)
+            wanted = now + (event.shiftKey && event.key.startsWith("Arrow") ? Math.sign(moves[event.key]) * large : moves[event.key]);
+        else
+            return;
+        event.preventDefault();
+        setKeyed(true);
+        const next = snap(wanted);
+        // At a limit the track still stretches toward the press and snaps back, so the key visibly lands on something.
+        if (next === now) {
+            const toward = Math.sign(wanted - now);
+            if (toward && !reduced)
+                animate(over, 0, { ...snapBack, velocity: toward * BUMP_PX });
+            return;
+        }
+        emit(next);
+        if (markList.some(mark => mark.value === next))
+            pulse(next, false);
+        onValueCommit?.(next);
+    }
+    const text = formatValue(current);
+    const labelled = markList.filter(mark => mark.label);
+    const bubble = dragging || keyed || linger;
+    return _jsxs("div", { className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, "data-dragging": dragging || undefined, "data-tag": bubble || undefined, "data-marks": labelled.length > 0 || undefined, children: [_jsxs("div", { className: styles.header, children: [_jsx("span", { id: labelId, className: styles.label, children: label }), showValue && _jsx("span", { className: styles.readout, "aria-hidden": "true", children: text })] }), _jsxs("div", { className: styles.body, children: [startIcon && _jsx(motion.span, { className: styles.start, style: { x: startShift }, "aria-hidden": "true", children: startIcon }), _jsxs("div", { className: styles.control, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onLostPointerCapture: onPointerEnd, onMouseDown: event => event.preventDefault(), children: [_jsxs("div", { ref: trackRef, className: styles.rail, children: [_jsx(motion.div, { className: styles.track, style: { scaleX, scaleY, originX }, children: _jsx(motion.div, { className: styles.fill, style: { clipPath } }) }), markList.filter(mark => mark.value > min && mark.value < max).map(mark => _jsx("span", { ref: node => { if (node)
+                                            tickRefs.current.set(mark.value, node);
+                                        else
+                                            tickRefs.current.delete(mark.value); }, className: styles.tick, "data-on": mark.value <= current || undefined, style: { left: `${pct(mark.value)}%` } }, mark.value))] }), _jsxs("div", { className: styles.thumbs, children: [_jsx(motion.div, { className: styles.layer, style: { x: bubbleX }, children: _jsx(motion.span, { className: styles.bubbleAnchor, style: { x: over, "--at": bubbleAt }, children: _jsx(AnimatePresence, { children: bubble && _jsx(motion.span, { className: styles.bubble, "aria-hidden": "true", style: { rotate }, initial: reduced ? { opacity: 0 } : bubbleIn, animate: bubbleRest, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : bubbleOut, transition: reduced ? { duration: .15 } : bubbleEnter, children: text }, "bubble") }) }) }), _jsx(motion.div, { className: styles.layer, style: { x: thumbX }, children: _jsx(motion.div, { className: styles.shift, style: { x: over }, children: _jsx(motion.div, { ref: thumbRef, role: "slider", "data-thumb": "", className: styles.thumb, tabIndex: disabled ? -1 : 0, "aria-labelledby": labelId, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": text, "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, initial: false, animate: { scale: dragging ? 1.28 : 1 }, transition: reduced ? { duration: 0 } : spring.snappy, onKeyDown: onKeyDown, onBlur: () => setKeyed(false) }) }) })] })] }), endIcon && _jsx(motion.span, { className: styles.end, style: { x: endShift }, "aria-hidden": "true", children: endIcon }), labelled.length > 0 && _jsx("div", { className: styles.marks, "aria-hidden": "true", children: labelled.map(mark => _jsx("span", { className: styles.markLabel, "data-on": mark.value === current || undefined, "data-edge": mark.value === min ? "start" : mark.value === max ? "end" : undefined, style: { left: `${pct(mark.value)}%` }, onClick: () => { if (disabled || mark.value === latest.current)
+                                return; emit(mark.value); pulse(mark.value, false); onValueCommit?.(mark.value); }, children: mark.label }, mark.value)) })] }), name && _jsx("input", { type: "hidden", name: name, value: current, disabled: disabled })] });
+}
+export default ElasticSlider;

package/components/elastic-slider/elastic-slider.module.css

@@ -0,0 +1,40 @@
+/* Set --elastic-thumb and --elastic-track to resize. The rail is inset by half a thumb, so a thumb at either limit stays inside the box. */
+.root { --elastic-thumb: 24px; --elastic-track: 8px; display: grid; width: 100%; min-width: 0; gap: var(--space-related); color: var(--foreground); font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); user-select: none; -webkit-user-select: none; }
+.header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--space-inset); }
+.label { min-width: 0; font-weight: 500; }
+.readout { flex: none; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--duration-fast) var(--ease-standard); }
+/* While the tag rides the thumb it carries the value, so the readout steps back instead of competing with it. */
+.root[data-tag] .readout { opacity: 0; }
+.body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
+.start, .end { display: flex; color: var(--text-muted); will-change: transform; }
+.start { grid-area: 1 / 1; margin-right: var(--space-group); }
+.end { grid-area: 1 / 3; margin-left: var(--space-group); }
+/* The whole row takes the press; vertical pans still scroll the page on touch. */
+.control { position: relative; grid-area: 1 / 2; height: var(--control-height-md); cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
+.rail { position: absolute; top: 50%; right: calc(var(--elastic-thumb) / 2); left: calc(var(--elastic-thumb) / 2); height: var(--elastic-track); margin-top: calc(var(--elastic-track) / -2); }
+/* Only the band stretches. Ticks, thumb, and tag ride along without distorting. */
+.track { position: absolute; inset: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-track); will-change: transform; }
+.fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--control-fill); }
+.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.tick[data-on] { background: color-mix(in oklab, var(--control-glyph) 60%, transparent); }
+.thumbs { position: absolute; inset: 0 calc(var(--elastic-thumb) / 2); container-type: inline-size; pointer-events: none; }
+/* Each layer is as wide as the rail and slides by a percentage of itself, so placing the thumb needs no measuring. */
+.layer { position: absolute; inset: 0; }
+.shift { position: absolute; inset: 0; }
+.thumb { position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--elastic-thumb); height: var(--elastic-thumb); translate: 50% -50%; border: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); pointer-events: auto; cursor: grab; outline: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
+/* A generous invisible hit area for fingertips. */
+.thumb::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; corner-shape: inherit; }
+.root[data-dragging], .root[data-dragging] .control, .root[data-dragging] .thumb { cursor: grabbing; }
+/* The tag centers on the thumb until it would pass the component's edge, then holds there. It hangs from its bottom edge, so a swing pivots on the thumb. */
+.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + 10px); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
+@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + 20px); } }
+.bubble { display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 130%; }
+.marks { position: relative; grid-area: 2 / 2; height: 1.25rem; margin: 0 calc(var(--elastic-thumb) / 2); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.markLabel { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
+.markLabel[data-edge="start"] { translate: max(-50%, calc(var(--elastic-thumb) / -2)) 0; }
+.markLabel[data-edge="end"] { translate: min(-50%, calc(-100% + var(--elastic-thumb) / 2)) 0; }
+.markLabel[data-on] { color: var(--foreground); }
+@media (hover: hover) and (pointer: fine) { .markLabel:hover { color: var(--foreground); } }
+.root[data-disabled] { opacity: .5; }
+.root[data-disabled] .control, .root[data-disabled] .thumb, .root[data-disabled] .markLabel { cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) { .thumb, .tick, .markLabel { transition: none; } }

package/components/empty-state/empty-state.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export interface EmptyStateProps {
+    title: string;
+    description: string;
+    action?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    /** Optional accessible label for the state region. */
+    label?: string;
+}
+export declare function EmptyState({ title, description, action, icon, className, label }: EmptyStateProps): import("react").JSX.Element;
+export default EmptyState;

package/components/empty-state/empty-state.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { Folder } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./empty-state.module.css";
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** A new icon component crossfades in; re-rendering the same icon stays still. */
+function iconKey(icon) {
+    if (!isValidElement(icon))
+        return "icon";
+    const type = icon.type;
+    return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+/** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */
+function HeightFrame({ reduce, morphKey, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const height = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [morphKey]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto" }); };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            const current = height.get();
+            const from = typeof current === "number" ? current : last;
+            last = next;
+            controls?.stop();
+            if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120)
+                return settle();
+            // Pin the old height before this frame paints, then spring to the new one.
+            if (frame.current)
+                Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` });
+            controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [height, reduce]);
+    return _jsx(motion.div, { ref: frame, className: styles.frame, style: { height }, children: _jsx("div", { ref: content, className: styles.copy, children: children }) });
+}
+export function EmptyState({ title, description, action, icon, className, label }) {
+    const reduce = useReducedMotion();
+    const glyph = icon ?? _jsx(Folder, { width: 24, height: 24, strokeWidth: 1.5 });
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: enter };
+    // The result of an action morphs in place: the icon crossfades and the copy rises in while the old copy leaves.
+    return _jsxs("section", { className: [styles.root, className].filter(Boolean).join(" "), "aria-label": label, children: [_jsx("div", { className: styles.icon, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.glyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? enter : motionTokens.spring.snappy, children: glyph }, iconKey(glyph)) }) }), _jsxs(HeightFrame, { reduce: reduce, morphKey: `${title}\n${description}`, children: [_jsx("h3", { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: title }, title) }) }), _jsx("p", { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: description }, description) }) })] }), action && _jsx("div", { className: styles.action, children: action })] });
+}
+export default EmptyState;