@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,27 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ReactNode } from "react";
+/**
+ * A sheet that rises from the bottom edge and rests at one or more heights (detents).
+ * Use it for secondary tasks where a peek is useful before committing to the full view: trip details, share options, filters.
+ * Use a dialog when the decision must interrupt, and a drawer for side panels on wide layouts.
+ */
+export interface BottomSheetProps {
+    /** The control that opens the sheet, usually a button. Focus returns to it when the sheet closes. */
+    trigger?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    /** Resting heights as fractions of the viewport height. The sheet opens at `initialDetent` and never grows past the largest. */
+    detents?: number[];
+    /** Index into the sorted detents the sheet opens at. Defaults to the smallest. */
+    initialDetent?: number;
+    onDetentChange?: (index: number) => void;
+    closeLabel?: string;
+    className?: string;
+    children: ReactNode;
+}
+export declare function BottomSheet({ trigger, open: openProp, defaultOpen, onOpenChange, ...props }: BottomSheetProps): import("react").JSX.Element;
+export declare const BottomSheetClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default BottomSheet;

package/components/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,386 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, useTransform } from "motion/react";
+import { X } from "lucide-react";
+import { ESCAPE_LAYER_ATTRIBUTE, layerEscape } from "../../lib/escape.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { useReturnFocus } from "../../lib/return-focus.js";
+import styles from "./bottom-sheet.module.css";
+/** Extra surface below the viewport, so an upward stretch never shows a gap under the sheet. */
+const EXTENSION = 160;
+/** Enough travel below the edge to hide the floating shadow as well as the sheet. */
+const CLOSED_GAP = 40;
+/** How far a release coasts, in seconds of its velocity, before the nearest detent is chosen. */
+const PROJECTION = .2;
+/** A release faster than this (px/s) always moves at least one detent in its direction. */
+const FLICK = 320;
+/** The limit an upward stretch approaches past the tallest detent. */
+const STRETCH = 120;
+/** How much of the full dim remains at the smallest detent. */
+const LOW_DIM = .78;
+const settle = motionTokens.spring.smooth;
+/** Leaving is shorter than arriving; a flick keeps its velocity through the same spring. */
+const leave = { ...motionTokens.spring.smooth, visualDuration: .3 };
+const fade = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+/** iOS-style resistance: follows the finger at first, then approaches STRETCH. */
+const rubber = (distance) => (1 - 1 / (distance * .55 / STRETCH + 1)) * STRETCH;
+const unrubber = (stretch) => (1 / (1 - Math.min(stretch, STRETCH - 1) / STRETCH) - 1) * STRETCH / .55;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function velocityOf(samples, now) {
+    const recent = samples.filter(sample => now - sample.t <= 80);
+    const first = recent[0], last = recent[recent.length - 1];
+    // A pause before letting go drops the momentum, so a slow, deliberate release settles where it is.
+    if (!first || !last || last === first || now - last.t > 60)
+        return 0;
+    return (last.y - first.y) / ((last.t - first.t) / 1000);
+}
+export function BottomSheet({ trigger, open: openProp, defaultOpen = false, onOpenChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const open = openProp ?? uncontrolled;
+    const setOpen = useCallback((next) => {
+        if (openProp === undefined)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const dismiss = useCallback(() => setOpen(false), [setOpen]);
+    return _jsxs(DialogPrimitive.Root, { open: open, onOpenChange: setOpen, children: [trigger ? _jsx(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null, _jsx(AnimatePresence, { children: open && _jsx(DialogPrimitive.Portal, { forceMount: true, children: _jsx(Sheet, { ...props, onDismiss: dismiss }) }, "sheet") })] });
+}
+function Sheet({ title, description, detents = [.45, .92], initialDetent = 0, onDetentChange, closeLabel = "Close", className, children, onDismiss }) {
+    const [isPresent, safeToRemove] = usePresence();
+    const reduced = useReducedMotion() ?? false;
+    const detentKey = detents.join(",");
+    const stops = useMemo(() => detentKey.split(",").map(Number).filter(stop => stop > 0).sort((a, b) => a - b), [detentKey]);
+    const top = stops.length - 1;
+    const [detent, setDetent] = useState(() => clamp(Math.round(initialDetent), 0, top));
+    const [announcement, setAnnouncement] = useState("");
+    const sheetRef = useRef(null);
+    const bodyRef = useRef(null);
+    /** Offset of the sheet below its tallest detent, in px. Starts far below the fold so the first frame never flashes. */
+    const y = useMotionValue(4000);
+    const height = useMotionValue(0);
+    const presence = useMotionValue(1);
+    const detentRef = useRef(detent);
+    const aim = useRef(detent);
+    const drag = useRef(null);
+    const arrive = useRef(undefined);
+    const suppressClick = useRef(false);
+    const mounted = useRef(false);
+    /** When the sheet last started entering or leaving, so a press that began while it was leaving never dismisses it once it is reopened. */
+    const presenceChange = useRef({ present: isPresent, at: 0 });
+    useLayoutEffect(() => { presenceChange.current = { present: isPresent, at: performance.now() }; }, [isPresent]);
+    // Focus starts on the sheet itself, and goes back to what opened it when it closes, trigger or not (lib/return-focus.ts).
+    const returnFocus = useReturnFocus(isPresent, event => { event.preventDefault(); sheetRef.current?.focus({ preventScroll: true }); });
+    const offset = useCallback((stop) => {
+        const full = height.get();
+        return stop === "closed" ? full + CLOSED_GAP : full * (1 - stops[stop] / stops[top]);
+    }, [height, stops, top]);
+    // The backdrop is a function of where the sheet is, so it darkens and clears with a drag instead of on a timer.
+    const backdrop = useTransform([y, height, presence], ([offsetY = 0, full = 0, shown = 0]) => {
+        if (!full)
+            return 0;
+        const low = full * (1 - stops[0] / stops[top]), closed = full + CLOSED_GAP;
+        const dim = offsetY <= low ? 1 - (1 - LOW_DIM) * (low ? offsetY / low : 0) : LOW_DIM * (1 - (offsetY - low) / (closed - low));
+        return clamp(dim, 0, 1) * shown;
+    });
+    // Every move retargets the one motion value from wherever it is. A new target drops the previous arrival callback.
+    const go = useCallback((stop, velocity, onArrive) => {
+        aim.current = stop;
+        arrive.current = onArrive;
+        const target = offset(stop);
+        const done = () => { const callback = arrive.current; arrive.current = undefined; callback?.(); };
+        if (reduced) {
+            y.jump(target);
+            done();
+            return;
+        }
+        animate(y, target, { ...(stop === "closed" ? leave : settle), ...(velocity === undefined ? {} : { velocity }), onComplete: done });
+    }, [offset, reduced, y]);
+    const rest = useCallback((stop, velocity) => {
+        if (stop !== detentRef.current) {
+            detentRef.current = stop;
+            setDetent(stop);
+            onDetentChange?.(stop);
+            setAnnouncement(stop === top ? "Sheet expanded" : stop === 0 ? "Sheet collapsed" : `Sheet at ${Math.round(stops[stop] * 100)} percent height`);
+        }
+        // Collapsing takes the content back to its start, so the peek always shows the top of it.
+        const body = bodyRef.current;
+        if (stop !== top && body && body.scrollTop > 0)
+            body.scrollTo({ top: 0, behavior: reduced ? "auto" : "smooth" });
+        go(stop, velocity);
+    }, [go, onDetentChange, reduced, stops, top]);
+    // Enter, leave, and a reopen caught mid-exit all retarget the same motion value from wherever it is.
+    useLayoutEffect(() => {
+        const sheet = sheetRef.current;
+        if (!sheet)
+            return;
+        if (!mounted.current) {
+            mounted.current = true;
+            height.set(sheet.offsetHeight - EXTENSION);
+            y.jump(offset("closed"));
+            if (reduced) {
+                y.jump(offset(detentRef.current));
+                presence.jump(0);
+            }
+        }
+        if (isPresent) {
+            if (reduced) {
+                y.jump(offset(detentRef.current));
+                animate(presence, 1, fade);
+                return;
+            }
+            presence.jump(1);
+            go(detentRef.current);
+            return;
+        }
+        if (reduced) {
+            animate(presence, 0, { ...fade, onComplete: safeToRemove });
+            return;
+        }
+        // A flick has already started the exit with its own velocity; only the unmount waits for it.
+        if (aim.current === "closed" && y.isAnimating())
+            arrive.current = safeToRemove;
+        else
+            go("closed", undefined, safeToRemove);
+    }, [go, height, isPresent, offset, presence, reduced, safeToRemove, y]);
+    // A viewport change (rotation, the mobile toolbar) moves every detent. Keep the sheet on its detent, retargeting any flight.
+    useEffect(() => {
+        const sheet = sheetRef.current;
+        if (!sheet || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const next = sheet.offsetHeight - EXTENSION;
+            if (next === height.get())
+                return;
+            height.set(next);
+            const stop = aim.current;
+            if (drag.current || stop === "closed")
+                return;
+            if (y.isAnimating())
+                go(stop);
+            else
+                y.jump(offset(stop));
+        });
+        observer.observe(sheet);
+        return () => observer.disconnect();
+    }, [go, height, offset, y]);
+    const beginDrag = useCallback((clientY, time) => {
+        // Catch the sheet where it is, even mid-flight; an overstretched sheet converts back to finger distance so nothing jumps.
+        y.stop();
+        const current = y.get();
+        drag.current = { startY: clientY, origin: current < 0 ? -unrubber(-current) : current, from: detentRef.current, moved: false, samples: [{ t: time, y: clientY }] };
+    }, [y]);
+    const moveDrag = useCallback((clientY, time) => {
+        const state = drag.current;
+        if (!state)
+            return;
+        const delta = clientY - state.startY;
+        if (!state.moved) {
+            if (Math.abs(delta) < 3)
+                return;
+            state.moved = true;
+            sheetRef.current?.setAttribute("data-dragging", "");
+        }
+        const raw = state.origin + delta;
+        // Down follows the finger 1:1 so it can dismiss; up past the tallest detent resists like a rubber band.
+        y.set(raw < 0 ? -rubber(-raw) : raw);
+        state.samples.push({ t: time, y: clientY });
+        if (state.samples.length > 12)
+            state.samples.shift();
+    }, [y]);
+    const endDrag = useCallback((time) => {
+        const state = drag.current;
+        drag.current = null;
+        sheetRef.current?.removeAttribute("data-dragging");
+        if (!state)
+            return;
+        if (!state.moved) {
+            const stop = aim.current;
+            if (stop !== "closed")
+                go(stop);
+            return;
+        }
+        suppressClick.current = true;
+        const current = y.get();
+        // A stretched sheet springs back without the finger's speed, so it never launches past the stretch.
+        const velocity = current < 0 ? 0 : velocityOf(state.samples, time);
+        const projected = current + velocity * PROJECTION;
+        const candidates = [...stops.map((_, index) => index), "closed"];
+        let target = candidates.reduce((best, stop) => Math.abs(offset(stop) - projected) < Math.abs(offset(best) - projected) ? stop : best);
+        // A quick flick always travels at least one detent, and a flick down from the smallest one closes the sheet.
+        if (Math.abs(velocity) > FLICK && target === state.from)
+            target = velocity < 0 ? Math.min(state.from + 1, top) : state.from === 0 ? "closed" : state.from - 1;
+        // The exit starts in this frame with the finger's velocity; closing the dialog only waits for it to land.
+        if (target === "closed") {
+            if (!reduced)
+                go("closed", velocity);
+            onDismiss();
+            return;
+        }
+        rest(target, velocity);
+    }, [go, offset, onDismiss, reduced, rest, stops, top, y]);
+    // Touch drags on the content move the sheet until it is fully open; once open, the content scrolls and a pull down from its top moves the sheet again.
+    useEffect(() => {
+        const body = bodyRef.current;
+        if (!body)
+            return;
+        let gesture = null;
+        const start = (event) => {
+            const touch = event.touches[0];
+            gesture = event.touches.length === 1 && touch ? { x: touch.clientX, y: touch.clientY, mode: "pending" } : null;
+        };
+        const move = (event) => {
+            const touch = event.touches[0];
+            if (!gesture || !touch || event.touches.length !== 1)
+                return;
+            const dx = touch.clientX - gesture.x, dy = touch.clientY - gesture.y;
+            if (gesture.mode === "pending") {
+                const expanded = detentRef.current === top;
+                if (expanded) {
+                    const scrollable = body.scrollHeight > body.clientHeight + 1;
+                    gesture.mode = Math.abs(dy) >= Math.abs(dx) && (!scrollable || (body.scrollTop <= 0 && dy > 0)) ? "sheet" : "native";
+                }
+                else {
+                    if (Math.hypot(dx, dy) < 4)
+                        return;
+                    gesture.mode = Math.abs(dy) >= Math.abs(dx) ? "sheet" : "native";
+                }
+                if (gesture.mode === "sheet")
+                    beginDrag(touch.clientY, event.timeStamp);
+            }
+            if (gesture.mode !== "sheet")
+                return;
+            if (event.cancelable)
+                event.preventDefault();
+            moveDrag(touch.clientY, event.timeStamp);
+        };
+        const end = (event) => {
+            if (gesture?.mode === "sheet")
+                endDrag(event.timeStamp);
+            gesture = null;
+        };
+        body.addEventListener("touchstart", start, { passive: true });
+        body.addEventListener("touchmove", move, { passive: false });
+        body.addEventListener("touchend", end);
+        body.addEventListener("touchcancel", end);
+        return () => {
+            body.removeEventListener("touchstart", start);
+            body.removeEventListener("touchmove", move);
+            body.removeEventListener("touchend", end);
+            body.removeEventListener("touchcancel", end);
+        };
+    }, [beginDrag, endDrag, moveDrag, top]);
+    // The scroll hairline under the header is toggled on the element directly, so scrolling never re-renders.
+    useEffect(() => {
+        const body = bodyRef.current, sheet = sheetRef.current;
+        if (!body || !sheet)
+            return;
+        const update = () => sheet.toggleAttribute("data-scrolled", body.scrollTop > 1);
+        body.addEventListener("scroll", update, { passive: true });
+        return () => body.removeEventListener("scroll", update);
+    }, []);
+    function headerDown(event) {
+        const target = event.target instanceof Element ? event.target : null;
+        if (event.button !== 0 || !event.isPrimary)
+            return;
+        if (target?.closest("button, a, input, select, textarea, [role='button']") && !target.closest("[data-grabber]"))
+            return;
+        beginDrag(event.clientY, event.timeStamp);
+        // Moves arrive once per frame, so a fast flick can leave the header before its first move lands.
+        // Until the header captures the pointer, the window follows it; once captured, the header's own handlers take over.
+        const header = event.currentTarget, id = event.pointerId;
+        const outside = (next) => next.pointerId === id && !(next.target instanceof Node && header.contains(next.target));
+        const move = (next) => {
+            if (!outside(next) || !drag.current)
+                return;
+            moveDrag(next.clientY, next.timeStamp);
+            if (drag.current?.moved && !header.hasPointerCapture(id)) {
+                try {
+                    header.setPointerCapture(id);
+                }
+                catch { /* The pointer is already gone. */ }
+            }
+        };
+        const up = (next) => {
+            if (next.pointerId !== id)
+                return;
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            window.removeEventListener("pointercancel", up);
+            if (outside(next))
+                endDrag(next.timeStamp);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
+    }
+    // Capture only once the pointer has really moved, so a plain click still lands on the grabber button.
+    function headerMove(event) {
+        if (!drag.current)
+            return;
+        if (event.pointerType === "mouse" && event.buttons === 0) {
+            endDrag(event.timeStamp);
+            return;
+        }
+        moveDrag(event.clientY, event.timeStamp);
+        if (drag.current.moved && !event.currentTarget.hasPointerCapture(event.pointerId))
+            event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    function headerUp(event) {
+        if (event.currentTarget.hasPointerCapture(event.pointerId))
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        endDrag(event.timeStamp);
+    }
+    function grabberClick() {
+        if (suppressClick.current) {
+            suppressClick.current = false;
+            return;
+        }
+        rest(detentRef.current === top ? 0 : top);
+    }
+    function grabberKey(event) {
+        const current = detentRef.current;
+        const next = event.key === "ArrowUp" ? Math.min(current + 1, top) : event.key === "ArrowDown" ? Math.max(current - 1, 0) : event.key === "Home" ? top : event.key === "End" ? 0 : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        rest(next);
+    }
+    // Scrolling or tabbing into content that is still below the fold opens the sheet the rest of the way.
+    function bodyWheel(event) {
+        if (detentRef.current !== top && event.deltaY > 4 && !drag.current)
+            rest(top);
+    }
+    function bodyFocus(event) {
+        if (detentRef.current === top || !(event.target instanceof Element))
+            return;
+        if (event.target.getBoundingClientRect().bottom > window.innerHeight - 8)
+            rest(top);
+    }
+    // With focus on the sheet or its content, reading keys open the sheet first and then scroll the content.
+    function sheetKey(event) {
+        const body = bodyRef.current;
+        if (!body || (event.target !== event.currentTarget && event.target !== body))
+            return;
+        const down = event.key === "ArrowDown" || event.key === "PageDown" || (event.key === " " && !event.shiftKey);
+        const up = event.key === "ArrowUp" || event.key === "PageUp" || (event.key === " " && event.shiftKey);
+        if (!down && !up)
+            return;
+        event.preventDefault();
+        if (down && detentRef.current !== top) {
+            rest(top);
+            return;
+        }
+        const step = event.key.startsWith("Arrow") ? 48 : body.clientHeight * .85;
+        body.scrollBy({ top: down ? step : -step, behavior: reduced ? "auto" : "smooth" });
+    }
+    const expanded = detent === top;
+    const style = { y, opacity: presence, "--sheet-max": stops[top], "--sheet-extension": `${EXTENSION}px` };
+    return _jsxs(_Fragment, { children: [_jsx(DialogPrimitive.Overlay, { asChild: true, forceMount: true, children: _jsx(motion.div, { className: styles.overlay, style: { opacity: backdrop } }) }), _jsx(DialogPrimitive.Content, { asChild: true, forceMount: true, ...(description ? {} : { "aria-describedby": undefined }), [ESCAPE_LAYER_ATTRIBUTE]: "", onEscapeKeyDown: layerEscape(), ...returnFocus, 
+                // Radix waits for the click before treating a press as outside. A press on the trigger while the sheet leaves reopens it first, so that press must not close it again.
+                onPointerDownOutside: event => { const { present, at } = presenceChange.current; if (!present || event.detail.originalEvent.timeStamp < at)
+                    event.preventDefault(); }, children: _jsxs(motion.div, { ref: sheetRef, className: [styles.sheet, className].filter(Boolean).join(" "), style: style, "data-expanded": expanded ? "" : undefined, onKeyDown: sheetKey, children: [_jsxs("div", { className: styles.header, onPointerDown: headerDown, onPointerMove: headerMove, onPointerUp: headerUp, onPointerCancel: headerUp, children: [_jsx("button", { type: "button", className: styles.grabber, "data-grabber": "", "aria-label": expanded ? "Collapse sheet" : "Expand sheet", "aria-expanded": expanded, onClick: grabberClick, onKeyDown: grabberKey, children: _jsx("span", { className: styles.grabberBar, "aria-hidden": "true" }) }), _jsxs("div", { className: styles.headRow, children: [_jsxs("div", { className: styles.headText, children: [_jsx(DialogPrimitive.Title, { className: styles.title, children: title }), description ? _jsx(DialogPrimitive.Description, { className: styles.description, children: description }) : null] }), _jsx(DialogPrimitive.Close, { className: styles.close, "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] })] }), _jsx("div", { ref: bodyRef, className: styles.body, onWheel: bodyWheel, onFocus: bodyFocus, children: children }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] }) })] });
+}
+export const BottomSheetClose = DialogPrimitive.Close;
+export default BottomSheet;

package/components/bottom-sheet/bottom-sheet.module.css

@@ -0,0 +1,69 @@
+/* The dim follows the sheet's position in JS; only its color lives here. */
+.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(16% 0 0 / .34); }
+:global(:root[data-theme="dark"]) .overlay { background: oklch(0% 0 0 / .52); }
+/* While it leaves, nothing underneath is blocked and the sheet cannot be grabbed again.
+   Radix sets pointer-events: auto inline on the overlay, so only !important lets a click reach the trigger and reverse the exit. */
+.overlay[data-state="closed"], .sheet[data-state="closed"] { pointer-events: none !important; }
+
+/* The sheet is as tall as its largest detent plus a hidden extension below the fold; detents are translateY offsets from there. */
+.sheet {
+  position: fixed;
+  z-index: 51;
+  right: 0;
+  bottom: calc(var(--sheet-extension) * -1);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 36rem);
+  height: calc(var(--sheet-max) * 100vh + var(--sheet-extension));
+  height: calc(var(--sheet-max) * 100dvh + var(--sheet-extension));
+  margin-inline: auto;
+  overflow: hidden;
+  padding-bottom: calc(var(--sheet-extension) + env(safe-area-inset-bottom, 0px));
+  border: 1px solid var(--border);
+  border-bottom: 0;
+  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; corner-shape: var(--corner-shape);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-floating);
+  font-family: var(--font-body);
+  letter-spacing: var(--tracking-body);
+  outline: none;
+  will-change: transform;
+}
+
+/* The whole header is the handle, so a drag can start anywhere above the content. */
+.header { position: relative; flex: none; padding: var(--space-related) var(--space-comfort) var(--space-inset); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
+.sheet[data-dragging] .header { cursor: grabbing; }
+/* A hairline appears only once the content scrolls under the header. */
+.header::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--border); content: ""; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
+.sheet[data-scrolled] .header::after { opacity: 1; }
+
+.grabber { display: flex; width: 3.5rem; height: 1.25rem; align-items: center; justify-content: center; margin: 0 auto var(--space-tight); padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: inherit; -webkit-tap-highlight-color: transparent; }
+.grabberBar { width: 2.25rem; height: 5px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .grabber:hover .grabberBar { background: var(--text-muted); } }
+.sheet[data-dragging] .grabberBar { background: var(--text-muted); }
+
+.headRow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-inset); }
+.headText { min-width: 0; }
+.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 { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+
+.close { display: grid; flex: none; width: 2rem; height: 2rem; place-items: center; margin-top: -2px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .close:hover { color: var(--foreground); border-color: var(--border-strong); } }
+.close:active { color: var(--foreground); }
+
+/* The content scrolls only at the tallest detent; below it, a drag or scroll opens the sheet first. */
+.body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-tight) var(--space-comfort) var(--space-section); overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; font-size: var(--text-sm); line-height: var(--leading-body); }
+.sheet:not([data-expanded]) .body { overflow: hidden; touch-action: none; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (max-width: 40rem) {
+  .header { padding-inline: var(--space-inset); }
+  .body { padding-inline: var(--space-inset); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .header::after, .grabberBar, .close { transition: none; }
+}

package/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import type { MouseEvent } from "react";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    /** Runs when the crumb is chosen. Without an href the crumb renders as a button, for paths that live in local state. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    ariaLabel?: string;
+}
+/** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */
+export declare function Breadcrumb({ items, ariaLabel }: BreadcrumbProps): import("react").JSX.Element;

package/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight as NavArrowRight } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { SiliconLink } from "../../lib/silicon-provider.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./breadcrumb.module.css";
+/** Crumbs present on first render stay still; crumbs added later slide in from the path before them. */
+export function Breadcrumb({ items, ariaLabel = "Breadcrumb" }) {
+    const reduced = useReducedMotion() ?? false;
+    const still = { duration: 0 };
+    const path = items.map(item => item.label).join("/");
+    return _jsx("nav", { "aria-label": ariaLabel, children: _jsx("ol", { className: styles.list, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: items.map((item, index) => {
+                    const current = index === items.length - 1;
+                    return _jsxs(motion.li, { layout: reduced ? false : "position", layoutDependency: path, initial: reduced ? false : { opacity: 0, x: -8, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, x: -4, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], layout: motionTokens.spring.smooth }, children: [index > 0 && _jsx(NavArrowRight, { width: 14, height: 14, "aria-hidden": "true" }), !current && item.href ? _jsx(SiliconLink, { href: item.href, "data-label": item.label, onClick: item.onClick, children: item.label })
+                                : !current && item.onClick ? _jsx("button", { type: "button", "data-label": item.label, onClick: item.onClick, children: item.label })
+                                    : _jsx("span", { "aria-current": current ? "page" : undefined, "data-label": item.label, children: item.label })] }, `${item.label}-${index}`);
+                }) }) }) });
+}

package/components/breadcrumb/breadcrumb.module.css

@@ -0,0 +1,12 @@
+/* The gap between crumbs matches the gap inside one, so every chevron sits centered between its two labels. */
+.list { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
+.list li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); white-space: nowrap; }
+.list li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--border-strong); stroke-width: 1.75; }
+/* Each crumb reserves the width of its medium weight label, so becoming the current page never shifts the path. */
+.list a, .list li > span, .list li > button { display: inline-flex; flex-direction: column; border-radius: var(--radius-detail); padding: 4px 2px; }
+.list a::after, .list li > span::after, .list li > button::after { height: 0; overflow: hidden; content: attr(data-label); font-weight: 500; visibility: hidden; user-select: none; pointer-events: none; }
+.list li > button { border: 0; margin: 0; background: none; font: inherit; line-height: inherit; text-align: start; cursor: pointer; }
+.list a, .list li > button { color: var(--text-secondary); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
+.list [aria-current="page"] { color: var(--accent-strong); font-weight: 500; transition: color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .list a:hover, .list li > button:hover { color: var(--accent-strong); text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); } }
+@media (prefers-reduced-motion: reduce) { .list a, .list li > button, .list [aria-current="page"] { transition: none; } }

package/components/brush-chart/brush-chart.d.ts

@@ -0,0 +1,45 @@
+import { type Ref } from "react";
+export interface BrushChartDatum {
+    /** A point in time, as a Date or epoch milliseconds. Points must be in ascending order. */
+    date: Date | number;
+    value: number;
+}
+export interface BrushChartAnnotation {
+    date: Date | number;
+    /** Short label printed beside the marker, such as "v2 launch". */
+    label: string;
+    /** Longer note for the tooltip and screen readers. */
+    description?: string;
+}
+/** Use a brush chart for a long, dense time series where people need the whole history and a close look at any stretch of it. */
+export interface BrushChartProps {
+    data: BrushChartDatum[];
+    /** What is measured, such as "Daily active users". Names the chart for assistive technology. */
+    label: string;
+    /** Unit after each value, such as "users". */
+    unit?: string;
+    formatValue?: (value: number) => string;
+    /** Formats the value axis. Defaults to a compact number, such as 12K. */
+    formatTick?: (value: number) => string;
+    /** Formats a date in the tooltip and announcements. */
+    formatDate?: (date: Date) => string;
+    /** Events drawn as markers on both charts. */
+    annotations?: BrushChartAnnotation[];
+    /** Controlled window as [start, end] epoch milliseconds. A new value glides the window there. */
+    range?: [number, number];
+    /** Initial window when uncontrolled. Defaults to the whole series. */
+    defaultRange?: [number, number];
+    /** Called while the window is dragged, resized, stepped, or reset. */
+    onRangeChange?: (range: [number, number]) => void;
+    /** Smallest window in milliseconds. Defaults to seven days. */
+    minSpan?: number;
+    /** Main plot height in pixels. */
+    height?: number;
+    /** Overview strip height in pixels. */
+    overviewHeight?: number;
+    emptyLabel?: string;
+    ref?: Ref<HTMLElement>;
+    className?: string;
+}
+export declare function BrushChart({ data, label, unit, formatValue, formatTick, formatDate, annotations, range, defaultRange, onRangeChange, minSpan, height, overviewHeight, emptyLabel, ref, className }: BrushChartProps): import("react").JSX.Element;
+export default BrushChart;