@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/empty-state/empty-state.module.css

@@ -0,0 +1,13 @@
+.root { display: flex; width: 100%; flex-direction: column; align-items: center; padding: clamp(var(--space-block), 8vw, var(--space-page)) var(--space-comfort); text-align: center; }
+.icon { position: relative; display: grid; width: var(--space-page); height: var(--space-page); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-muted); color: var(--text-secondary); animation: empty-state-icon var(--duration-considered) var(--ease-enter) both; }
+.glyph { display: grid; place-items: center; }
+.frame { width: 100%; max-width: 100%; }
+.copy { display: flow-root; }
+.root h3 { position: relative; margin: var(--space-comfort) 0 0; color: var(--foreground); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); }
+.root p { position: relative; max-width: 18rem; margin: var(--space-related) auto 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+/* Centered copy wraps into even lines, so a new description never leaves a single word hanging. */
+.line { display: block; text-wrap: balance; }
+.action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-group); margin-top: var(--space-comfort); }
+/* The icon settles in once when the state first appears; later changes crossfade in place. */
+@keyframes empty-state-icon { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
+@media (prefers-reduced-motion: reduce) { .icon { animation: none; } }

package/components/expandable-card/expandable-card.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface ExpandableCardProps extends Omit<ComponentPropsWithoutRef<"article">, "title" | "children" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragLeave" | "onDragEnter" | "onDragExit" | "onDrop"> {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    defaultExpanded?: boolean;
+    /** Collapsed width cap in px. The card is centered and never wider than its container. Fills the container when omitted. */
+    width?: number;
+    /** Expanded width cap in px, so the card can grow sideways into more room. Defaults to `width`. */
+    expandedWidth?: number;
+}
+export declare function ExpandableCard({ title, description, children, defaultExpanded, width, expandedWidth, className, style, onKeyDown, ...rest }: ExpandableCardProps): import("react").JSX.Element;
+export default ExpandableCard;

package/components/expandable-card/expandable-card.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { ChevronDown as NavArrowDown } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./expandable-card.module.css";
+/**
+ * One morph: the box grows in width and height on the same spring, which never overshoots, so close is the exact mirror of open.
+ * Size is animated for real (not with a scale), so the text, border, and corner radius never stretch.
+ */
+const morph = motionTokens.spring.smooth;
+/** On close the details fade out first, then the box starts to shrink; on open they fade in once the box has made room. */
+const closeHold = 0.06;
+/** A close that reverses an open still in flight skips the hold, so the spring turns around with its velocity instead of stalling. */
+const settleTime = 450;
+const boxTransition = (expanded, hold) => expanded || !hold ? morph : { ...morph, delay: closeHold };
+const contentTransition = (expanded) => expanded
+    ? { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.standard], delay: 0.12 }
+    : { duration: 0.1, ease: [...motionTokens.ease.standard] };
+const still = { duration: 0 };
+/** Changed words in the summary rise in; unchanged words hold still. */
+const wordMotion = {
+    enter: { opacity: 0, y: ".35em", filter: `blur(${motionTokens.blur.soft}px)` },
+    center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } },
+    exit: { opacity: 0, y: "-.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } },
+};
+function RollingText({ text, reduced }) {
+    return _jsxs("span", { className: styles.roll, children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: text.split(/(\s+)/).map((word, index) => _jsx(motion.span, { className: styles.word, variants: wordMotion, initial: reduced ? false : "enter", animate: "center", exit: reduced ? undefined : "exit", children: word }, `${index}:${word}`)) }) })] });
+}
+export function ExpandableCard({ title, description, children, defaultExpanded = false, width, expandedWidth, className, style, onKeyDown, ...rest }) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const [hold, setHold] = useState(true);
+    const lastToggle = useRef(0);
+    // The room the card can use, measured from its centering track. Until it is known, CSS caps the width.
+    const [room, setRoom] = useState(null);
+    const trackRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelId = useId();
+    const reduceMotion = useReducedMotion() ?? false;
+    useLayoutEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const measure = () => setRoom(track.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(track);
+        return () => observer.disconnect();
+    }, []);
+    const openCap = expandedWidth ?? width;
+    const fit = (cap) => room === null ? undefined : Math.min(room, cap ?? room);
+    const boxWidth = fit(expanded ? openCap : width);
+    // The details are laid out at their final width the whole time, so nothing reflows while the box changes size.
+    const innerWidth = fit(openCap);
+    // The width lives in a motion value: the first measurement lands without motion, later changes spring from the current width and velocity.
+    const boxWidthValue = useMotionValue("100%");
+    const placed = useRef(false);
+    const widthTransition = reduceMotion ? still : boxTransition(expanded, hold);
+    useLayoutEffect(() => {
+        if (boxWidth === undefined)
+            return;
+        if (!placed.current) {
+            placed.current = true;
+            boxWidthValue.jump(boxWidth);
+            return;
+        }
+        const controls = animate(boxWidthValue, boxWidth, widthTransition);
+        return () => controls.stop();
+    }, [boxWidth, boxWidthValue]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Caps for the first paint, before the room is measured.
+    const capVars = { "--expandable-card-width": width ? `${width}px` : undefined, "--expandable-card-expanded-width": openCap ? `${openCap}px` : undefined };
+    const toggle = (next) => {
+        const now = performance.now();
+        setHold(now - lastToggle.current > settleTime);
+        lastToggle.current = now;
+        setExpanded(next);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== "Escape" || !expanded)
+            return;
+        event.preventDefault();
+        toggle(false);
+        triggerRef.current?.focus();
+    };
+    return _jsx("div", { ref: trackRef, className: styles.track, children: _jsxs(motion.article, { ...rest, className: [styles.card, className].filter(Boolean).join(" "), "data-expanded": expanded, "data-measured": room === null ? undefined : "", style: { ...style, ...capVars, width: boxWidthValue }, onKeyDown: handleKeyDown, children: [_jsxs("button", { ref: triggerRef, type: "button", className: styles.trigger, "aria-expanded": expanded, "aria-controls": panelId, onClick: () => toggle(!expanded), children: [_jsxs("span", { className: styles.copy, children: [_jsx("strong", { children: title }), description && _jsx("span", { className: styles.description, children: _jsx(RollingText, { text: description, reduced: reduceMotion }) })] }), _jsx(motion.span, { className: styles.arrow, initial: false, animate: { rotate: expanded ? 180 : 0 }, transition: reduceMotion ? still : boxTransition(expanded, hold), children: _jsx(NavArrowDown, { width: 18, height: 18, "aria-hidden": "true" }) })] }), _jsx(motion.div, { id: panelId, className: styles.panel, inert: !expanded, initial: false, animate: { height: expanded ? "auto" : 0 }, transition: reduceMotion ? still : boxTransition(expanded, hold), children: _jsx(motion.div, { className: styles.panelInner, style: innerWidth === undefined ? undefined : { width: innerWidth - 2 }, initial: false, animate: { opacity: expanded ? 1 : 0 }, transition: reduceMotion ? still : contentTransition(expanded), children: children }) })] }) });
+}
+export default ExpandableCard;

package/components/expandable-card/expandable-card.module.css

@@ -0,0 +1,22 @@
+/* The track centers the card and measures the room it may grow into. */
+.track { display: flex; width: 100%; min-width: 0; justify-content: center; }
+.card { width: 100%; max-width: var(--expandable-card-width, 100%); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-overlay); background: var(--surface); box-shadow: var(--shadow-resting); }
+.card[data-expanded="true"] { max-width: var(--expandable-card-expanded-width, var(--expandable-card-width, 100%)); }
+/* Once measured, the width is animated in px, so the CSS cap steps aside and never clamps the morph. */
+.card[data-measured] { max-width: 100%; }
+/* The card clips the header to its corners, so the header's hover fill never changes shape while the card opens or closes. */
+.trigger { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: var(--space-comfort); border: 0; padding: var(--space-inset) var(--space-comfort); background: transparent; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover { background: var(--surface-muted); } .trigger:hover .arrow { color: var(--foreground); } }
+.trigger:active { background: var(--surface-muted); }
+.copy { min-width: 0; }
+.copy strong { display: block; font-size: var(--text-sm); font-weight: 500; }
+.description { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.roll { position: relative; display: block; }
+.word { display: inline-block; white-space: pre; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.arrow { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
+.card[data-expanded="true"] .arrow { color: var(--foreground); }
+/* The divider is an inset line rather than a border, so a collapsed panel is truly zero height and nothing pops at the end of the close. */
+.panel { overflow: hidden; box-shadow: inset 0 1px 0 var(--border); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-sm); }
+.panelInner { max-width: none; padding: var(--space-inset) var(--space-comfort) var(--space-comfort); }
+@media (prefers-reduced-motion: reduce) { .trigger, .arrow { transition: none; } }

package/components/expanding-button-group/expanding-button-group.d.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties, ReactNode } from "react";
+export type ExpandingButtonGroupSize = "sm" | "md";
+export type ExpandingButtonGroupTone = "neutral" | "danger";
+export interface ExpandingButtonGroupItem {
+    /** Stable key for the action. Also the value passed to onAction. */
+    id: string;
+    /** Visible label once the button expands, and its accessible name at all times. Use a short verb, such as "Archive". */
+    label: string;
+    /** Icon shown while collapsed. A 16px lucide icon fits; it is sized by the group. */
+    icon: ReactNode;
+    /** Runs the action. Return false, or reject, to skip the confirmation. A promise keeps the button busy until it settles. */
+    onSelect?: () => void | boolean | Promise<void | boolean>;
+    /** Past tense word shown in place after the action, such as "Archived". The icon becomes a check for confirmDuration. Omit for actions that open something. */
+    doneLabel?: string;
+    /** "danger" colors the expanded state with the danger token, for destructive actions such as Delete. */
+    tone?: ExpandingButtonGroupTone;
+    /** Dimmed and inert. Stays focusable and still reveals its label, so people can learn what it would do. */
+    disabled?: boolean;
+}
+export interface ExpandingButtonGroupProps {
+    items: readonly ExpandingButtonGroupItem[];
+    /** Accessible name of the toolbar, such as "Message actions". */
+    label: string;
+    size?: ExpandingButtonGroupSize;
+    /** Id of the action whose label shows at rest, usually the primary one. Defaults to the first enabled action: one action is always
+     *  expanded. Pointing at or focusing another moves the expansion there, and it returns here when the pointer and focus leave. */
+    defaultExpanded?: string | null;
+    /** Called with the item id whenever an action runs, before its own onSelect. */
+    onAction?: (id: string) => void;
+    /** How long the confirmation stays, in milliseconds. */
+    confirmDuration?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A compact pill of icon buttons for actions. One action always shows its label; the one you point at or focus takes over the
+ * label while its neighbours slide aside, and an action can confirm in place: the icon draws a check and the label becomes a past tense word.
+ * On touch, the first tap reveals the label and a second tap runs the action.
+ */
+export declare function ExpandingButtonGroup({ items, label, size, defaultExpanded, onAction, confirmDuration, className, style }: ExpandingButtonGroupProps): import("react").JSX.Element;
+export default ExpandingButtonGroup;

package/components/expanding-button-group/expanding-button-group.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./expanding-button-group.module.css";
+/** Geometry per size. The icon keeps the same left inset collapsed and expanded, so it never moves while the label is revealed. */
+const metrics = {
+    sm: { height: 28, icon: 14, start: 7, gap: 5, end: 11 },
+    md: { height: 36, icon: 16, start: 10, gap: 7, end: 14 },
+};
+/** Pixels the pointer must travel into a neighbouring action before the expansion moves to it. */
+const hysteresis = 4;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** The label slides out from behind the icon as the width opens, and tucks back a little faster than it came. */
+const labelVariants = {
+    shown: { opacity: 1, x: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: enter, delay: .04 } },
+    hidden: { opacity: 0, x: -6, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } },
+};
+const reducedLabelVariants = {
+    shown: { opacity: 1, x: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } },
+    hidden: { opacity: 0, x: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } },
+};
+const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
+const textIn = { opacity: 0, y: "0.5em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.4em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: standard } };
+const iconIn = { opacity: 0, scale: .55, filter: `blur(${motionTokens.blur.subtle}px)` };
+const iconOut = { ...iconIn, transition: { duration: motionTokens.duration.fast, ease: standard } };
+const fadeIn = { ...rest, opacity: 0 };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+const textEnter = { duration: motionTokens.duration.standard, ease: enter };
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+const iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter }, filter: { duration: motionTokens.duration.fast, ease: enter } };
+const instant = { duration: motionTokens.duration.instant };
+/** The confirmation tick draws itself from its short stroke. */
+function DrawnCheck({ reduced }) {
+    return _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(motion.path, { d: "M4 12.5l5 5L20 6.5", initial: reduced ? false : { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 1 }, transition: { pathLength: { duration: motionTokens.duration.standard, ease: enter, delay: .06 }, opacity: { duration: .05, delay: .06 } } }) });
+}
+function Item({ item, size, expanded, done, busy, tabStop, reduced, onPointerDown, onClick, onFocus }) {
+    const m = metrics[size];
+    const labelRef = useRef(null);
+    const doneRef = useRef(null);
+    const [text, setText] = useState(0);
+    // Hidden copies of both words share the label's grid cell, so the slot is always as wide as the longer one. The confirmation
+    // swap then never changes the width, and the server render already has the right width before anything is measured.
+    // Changes under half a pixel are ignored, so a re-measure never makes the row wobble.
+    useLayoutEffect(() => {
+        const measure = () => {
+            const next = Math.max(labelRef.current?.getBoundingClientRect().width ?? 0, doneRef.current?.getBoundingClientRect().width ?? 0);
+            setText(current => Math.abs(current - next) < .5 ? current : next);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        if (labelRef.current)
+            observer.observe(labelRef.current);
+        if (doneRef.current)
+            observer.observe(doneRef.current);
+        return () => observer.disconnect();
+    }, [item.label, item.doneLabel, size]);
+    const showDone = done && !!item.doneLabel;
+    const measured = text > 0;
+    const target = expanded && measured ? m.start + m.icon + m.gap + text + m.end : m.height;
+    const width = useMotionValue(target);
+    const settled = useRef(false);
+    // Width rides the morph spring, so neighbours slide and the group's own width follows without a jump. The first measured
+    // width (and every width under reduced motion) is placed at once.
+    useLayoutEffect(() => {
+        if (!settled.current || reduced) {
+            width.jump(target);
+            if (measured)
+                settled.current = true;
+            return;
+        }
+        animate(width, target, motionTokens.spring.morph);
+    }, [target, measured, reduced, width]);
+    const word = showDone ? item.doneLabel : item.label;
+    return _jsxs(motion.button, { type: "button", className: styles.item, style: { width }, "data-ebg-item": "", "data-id": item.id, "data-tone": item.tone ?? "neutral", "data-state": showDone ? "done" : "idle", "data-expanded": expanded || undefined, "data-unmeasured": measured ? undefined : "", "aria-label": item.label, "aria-disabled": item.disabled || undefined, "aria-busy": busy || undefined, tabIndex: tabStop ? 0 : -1, onPointerDown: event => onPointerDown(item, event), onClick: () => onClick(item), onFocus: event => onFocus(item, event), children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.glyph, initial: reduced ? fadeIn : iconIn, animate: rest, exit: reduced ? fadeOut : iconOut, transition: reduced ? instant : iconEnter, children: showDone ? _jsx(DrawnCheck, { reduced: reduced }) : item.icon }, showDone ? "done" : "icon") }) }), _jsxs(motion.span, { className: styles.label, "aria-hidden": "true", variants: reduced ? reducedLabelVariants : labelVariants, initial: false, animate: expanded ? "shown" : "hidden", children: [_jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.word, initial: reduced ? fadeIn : textIn, animate: rest, exit: reduced ? fadeOut : textOut, transition: reduced ? instant : textEnter, children: word }, word) }), _jsx("span", { ref: labelRef, className: styles.sizer, children: item.label }), item.doneLabel ? _jsx("span", { ref: doneRef, className: styles.sizer, children: item.doneLabel }) : null] })] });
+}
+/**
+ * A compact pill of icon buttons for actions. One action always shows its label; the one you point at or focus takes over the
+ * label while its neighbours slide aside, and an action can confirm in place: the icon draws a check and the label becomes a past tense word.
+ * On touch, the first tap reveals the label and a second tap runs the action.
+ */
+export function ExpandingButtonGroup({ items, label, size = "md", defaultExpanded = null, onAction, confirmDuration = 1400, className, style }) {
+    const reduced = useReducedMotion() ?? false;
+    const root = useRef(null);
+    const [intent, setIntent] = useState(null);
+    const [done, setDone] = useState(null);
+    const [busy, setBusy] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const [focused, setFocused] = useState(null);
+    // Refs mirror what the pointer and keyboard are doing right now, so leave and blur handlers can fall back correctly.
+    const pointerOver = useRef(null);
+    const pointerAt = useRef(null);
+    const keyFocus = useRef(null);
+    const touchOpen = useRef(null);
+    const press = useRef(null);
+    const doneRef = useRef(null);
+    const timer = useRef(null);
+    const mounted = useRef(true);
+    const seq = useRef(0);
+    useEffect(() => {
+        mounted.current = true;
+        return () => { mounted.current = false; if (timer.current)
+            clearTimeout(timer.current); };
+    }, []);
+    const has = (id) => !!id && items.some(item => item.id === id);
+    // One action is always expanded: the resting one is defaultExpanded, else the first enabled action.
+    const firstEnabled = items.find(item => !item.disabled)?.id ?? items[0]?.id ?? null;
+    const restId = has(defaultExpanded) ? defaultExpanded : firstEnabled;
+    const expandedId = has(intent) ? intent : restId;
+    const tabStop = has(focused) ? focused : restId;
+    // A tap outside closes a label opened by a first tap.
+    useEffect(() => {
+        if (!intent || touchOpen.current !== intent)
+            return;
+        const onDown = (event) => {
+            if (root.current?.contains(event.target))
+                return;
+            touchOpen.current = null;
+            setIntent(doneRef.current ?? keyFocus.current);
+        };
+        document.addEventListener("pointerdown", onDown, true);
+        return () => document.removeEventListener("pointerdown", onDown, true);
+    }, [intent]);
+    const confirm = useCallback((item) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        seq.current += 1;
+        doneRef.current = item.id;
+        setDone({ id: item.id, seq: seq.current });
+        // A zero width space alternates so the same word is announced again on a repeat action.
+        setAnnouncement(`${item.doneLabel}${seq.current % 2 ? "" : "​"}`);
+        timer.current = setTimeout(() => {
+            doneRef.current = null;
+            setDone(null);
+            // Collapse unless the pointer or the keyboard is still on it.
+            if (pointerOver.current !== item.id && keyFocus.current !== item.id) {
+                if (touchOpen.current === item.id)
+                    touchOpen.current = null;
+                setIntent(current => current === item.id ? pointerOver.current ?? keyFocus.current : current);
+            }
+        }, confirmDuration);
+    }, [confirmDuration]);
+    const activate = useCallback(async (item) => {
+        if (item.disabled || busy === item.id || doneRef.current === item.id)
+            return;
+        setIntent(item.id);
+        onAction?.(item.id);
+        let result;
+        try {
+            const pending = item.onSelect?.();
+            if (pending instanceof Promise) {
+                setBusy(item.id);
+                result = await pending;
+            }
+            else
+                result = pending;
+        }
+        catch {
+            result = false;
+        }
+        finally {
+            if (mounted.current)
+                setBusy(current => current === item.id ? null : current);
+        }
+        if (!mounted.current || result === false || !item.doneLabel)
+            return;
+        confirm(item);
+    }, [busy, confirm, onAction]);
+    const onItemPointerDown = (item, event) => {
+        press.current = { id: item.id, kind: event.pointerType, wasExpanded: expandedId === item.id };
+    };
+    const onItemClick = (item) => {
+        const last = press.current;
+        press.current = null;
+        // Touch has no hover: the first tap opens the label, the second runs it. An item already showing its label runs at once.
+        if (last && last.id === item.id && last.kind === "touch" && !last.wasExpanded) {
+            touchOpen.current = item.id;
+            setIntent(item.id);
+            return;
+        }
+        if (last?.kind === "touch")
+            touchOpen.current = item.id;
+        void activate(item);
+    };
+    const onItemFocus = (item, event) => {
+        setFocused(item.id);
+        // Only keyboard focus expands; a mouse click or a tap already has its own path, and would otherwise leave the label open.
+        let visible = true;
+        try {
+            visible = event.currentTarget.matches(":focus-visible");
+        }
+        catch { /* older engines expand on any focus */ }
+        if (!visible)
+            return;
+        keyFocus.current = item.id;
+        setIntent(item.id);
+    };
+    const onBlur = (event) => {
+        if (root.current?.contains(event.relatedTarget))
+            return;
+        keyFocus.current = null;
+        touchOpen.current = null;
+        setIntent(pointerOver.current ?? doneRef.current);
+    };
+    // Hover follows real pointer movement only. Expanding moves the buttons, and a button that slides under a resting pointer
+    // must not take over, or two neighbours could trade places back and forth.
+    const onPointerMove = (event) => {
+        if (event.pointerType !== "mouse")
+            return;
+        const at = pointerAt.current;
+        if (at && Math.abs(at.x - event.clientX) < 1 && Math.abs(at.y - event.clientY) < 1)
+            return;
+        pointerAt.current = { x: event.clientX, y: event.clientY };
+        const button = event.target.closest("[data-ebg-item]");
+        const id = button?.dataset.id;
+        if (!button || !id || id === pointerOver.current)
+            return;
+        // Hysteresis: moving from one action to the next needs the pointer a few pixels inside the new one, so resting on a
+        // boundary never flips between them.
+        if (pointerOver.current) {
+            const box = button.getBoundingClientRect();
+            if (event.clientX < box.left + hysteresis || event.clientX > box.right - hysteresis)
+                return;
+        }
+        pointerOver.current = id;
+        setIntent(id);
+    };
+    const onPointerLeave = (event) => {
+        if (event.pointerType !== "mouse")
+            return;
+        pointerAt.current = null;
+        pointerOver.current = null;
+        setIntent(doneRef.current ?? keyFocus.current);
+    };
+    const onKeyDown = (event) => {
+        const list = Array.from(root.current?.querySelectorAll("[data-ebg-item]") ?? []);
+        const index = list.findIndex(button => button === document.activeElement);
+        if (index < 0)
+            return;
+        const last = list.length - 1;
+        const target = event.key === "ArrowRight" ? (index === last ? 0 : index + 1)
+            : event.key === "ArrowLeft" ? (index === 0 ? last : index - 1)
+                : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        list[target].focus();
+    };
+    const m = metrics[size];
+    const vars = { "--ebg-h": `${m.height}px`, "--ebg-icon": `${m.icon}px`, "--ebg-start": `${m.start}px`, "--ebg-gap": `${m.gap}px`, "--ebg-end": `${m.end}px`, ...style };
+    return _jsxs("div", { ref: root, role: "toolbar", "aria-label": label, "aria-orientation": "horizontal", className: [styles.group, styles[size], className].filter(Boolean).join(" "), style: vars, onKeyDown: onKeyDown, onBlur: onBlur, onPointerMove: onPointerMove, onPointerLeave: onPointerLeave, children: [items.map(item => _jsx(Item, { item: item, size: size, expanded: expandedId === item.id, done: done?.id === item.id, busy: busy === item.id, tabStop: tabStop === item.id, reduced: reduced, onPointerDown: onItemPointerDown, onClick: onItemClick, onFocus: onItemFocus }, item.id)), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+}
+export default ExpandingButtonGroup;

package/components/expanding-button-group/expanding-button-group.module.css

@@ -0,0 +1,44 @@
+/* A flat pill on the surface. Geometry comes from the component as --ebg-* variables, so the measured widths and the CSS agree. */
+.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: 2px; padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
+
+/* The box never scales: its width is the animation, so a press answers with the icon and with color. The label overflows to the
+   right of the icon and the clipped width reveals it. min-width keeps the spring's settle from pinching a collapsed button. */
+.item { position: relative; display: inline-flex; height: var(--ebg-h); min-width: var(--ebg-h); flex: none; align-items: center; justify-content: flex-start; gap: var(--ebg-gap); overflow: clip; border: 0; border-radius: var(--radius-full); corner-shape: round; padding: 0 0 0 var(--ebg-start); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.sm .item { font-size: var(--text-xs); }
+.item[data-expanded] { color: var(--foreground); background: var(--surface-muted); }
+.item[data-tone="danger"][data-expanded] { color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, var(--surface)); }
+/* The confirmation carries its meaning on the check, with a faint tint behind the whole button. */
+.item[data-state="done"]:not([data-tone="danger"]) { background: color-mix(in oklab, var(--success) 10%, var(--surface)); }
+.item[data-state="done"]:not([data-tone="danger"]) .icon { color: var(--success); }
+.item[aria-busy="true"] { cursor: progress; }
+.item[aria-busy="true"] .icon { animation: busy 1.1s var(--ease-in-out) infinite; }
+.item[aria-disabled="true"] { cursor: not-allowed; color: var(--text-muted); opacity: .5; }
+.item[aria-disabled="true"][data-expanded] { background: var(--surface-muted); color: var(--text-secondary); }
+:global(:root[data-theme="dark"]) .item[data-tone="danger"][data-expanded] { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); }
+:global(:root[data-theme="dark"]) .item[data-state="done"]:not([data-tone="danger"]) { background: color-mix(in oklab, var(--success) 14%, var(--surface)); }
+
+.icon { position: relative; display: grid; width: var(--ebg-icon); height: var(--ebg-icon); flex: none; place-items: center; transition: transform 320ms var(--ease-spring); }
+.item:active:not([aria-disabled="true"]) .icon { transform: scale(.86); transition-duration: 90ms; transition-timing-function: var(--ease-standard); }
+.glyph { display: grid; grid-area: 1 / 1; place-items: center; width: 100%; height: 100%; }
+.glyph svg { width: 100%; height: 100%; stroke-width: 1.75; }
+
+/* Outgoing and incoming words share one cell, so a confirmation crossfades in place while the width springs between them. */
+.label { display: inline-grid; flex: none; align-items: center; justify-items: start; }
+.word { grid-area: 1 / 1; white-space: nowrap; }
+
+/* Invisible copies of both words hold the slot at the longer one; they are also what gets measured for the width target. */
+.sizer { grid-area: 1 / 1; visibility: hidden; pointer-events: none; white-space: nowrap; }
+
+/* Before the first measurement (the server render), the expanded action takes its natural width, which is exactly the width the
+   spring later targets, so hydration never moves anything. */
+.item[data-unmeasured][data-expanded] { width: auto !important; padding-inline-end: var(--ebg-end); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+
+@keyframes busy { 50% { opacity: .45; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .item { transition: color var(--duration-instant) linear, background-color var(--duration-instant) linear; }
+  .icon, .item:active:not([aria-disabled="true"]) .icon { transform: none; transition: none; }
+  .item[aria-busy="true"] .icon { animation: none; opacity: .6; }
+}

package/components/expanding-search/expanding-search.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+export interface ExpandingSearchItem {
+    id: string;
+    title: string;
+    /** One short line under the title, such as the type, owner, or last edit. */
+    meta?: string;
+    /** Results gather under this heading, in the order groups first appear in `items`. */
+    group?: string;
+    icon?: ReactNode;
+    /** Extra words that should also find this item. */
+    keywords?: string[];
+}
+/**
+ * A search that waits as an icon button until it is needed. Use it in headers and toolbars where a full field would crowd the layout.
+ * The button morphs into the field, results unfold beneath it, and Escape, choosing a result, or leaving the field empty folds it back into the icon.
+ * Place it in the space the field may grow into; it fills that space's width and keeps the button on the `anchor` edge.
+ */
+export interface ExpandingSearchProps {
+    /** Names the button, the field, and the results, such as "Search projects and docs". */
+    label: string;
+    items: ExpandingSearchItem[];
+    /** Shown before anything is typed, such as recent searches. */
+    suggestions?: ExpandingSearchItem[];
+    suggestionsLabel?: string;
+    placeholder?: string;
+    onSelect?: (item: ExpandingSearchItem) => void;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** The widest the field grows. It never grows past its container. */
+    expandedWidth?: number;
+    maxResults?: number;
+    /** The edge the button sits on; the field grows away from it. */
+    anchor?: "start" | "end";
+    /** A short tip under the empty state. */
+    emptyHint?: string;
+    className?: string;
+}
+export declare function ExpandingSearch({ label, items, suggestions, suggestionsLabel, placeholder, onSelect, onExpandedChange, expandedWidth, maxResults, anchor, emptyHint, className }: ExpandingSearchProps): import("react").JSX.Element;
+export default ExpandingSearch;