@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/combobox/combobox.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate, AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check, ChevronDown, Search, X } from "lucide-react";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./combobox.module.css";
+/** Follows the listbox height with a critically damped spring, so filtering never snaps the menu. */
+function AutoHeight({ children, reduceMotion }) {
+    const innerRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+    useEffect(() => {
+        const inner = innerRef.current;
+        if (!inner)
+            return;
+        const observer = new ResizeObserver(() => setHeight(inner.offsetHeight));
+        observer.observe(inner);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx(motion.div, { className: styles.autoHeight, initial: false, animate: { height }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.smooth, children: _jsx("div", { ref: innerRef, children: children }) });
+}
+export const Combobox = forwardRef(function Combobox({ label, options, value: controlledValue, defaultValue = "", onValueChange, description, placeholder = "Search or select…", emptyMessage = "No matches found", id, className, disabled, onBlur, ...inputProps }, forwardedRef) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const listboxId = `${controlId}-listbox`;
+    const hintId = description ? `${controlId}-description` : undefined;
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const optionRefs = useRef({});
+    const reduceMotion = useReducedMotion();
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const selectedValue = controlledValue ?? uncontrolledValue;
+    const selectedOption = options.find((option) => option.value === selectedValue);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    // A chosen label settles into the field: it rises in from below with a soft blur. Clearing fades the
+    // placeholder in instead of snapping from the old label.
+    const settledValue = useRef(selectedValue);
+    useEffect(() => {
+        if (settledValue.current === selectedValue)
+            return;
+        settledValue.current = selectedValue;
+        const input = inputRef.current;
+        if (!input || reduceMotion || (selectedValue && open))
+            return;
+        const controls = selectedValue
+            ? animate(input, { opacity: [0, 1], y: ["0.35em", "0em"], filter: [`blur(${motionTokens.blur.soft}px)`, "blur(0px)"] }, { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] })
+            : animate(input, { opacity: [0, 1] }, { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] });
+        return () => controls.complete();
+    }, [selectedValue, reduceMotion, open]);
+    const filteredOptions = useMemo(() => {
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return options;
+        return options.filter((option) => [option.label, ...(option.keywords ?? [])].some((term) => term.toLocaleLowerCase().includes(normalizedQuery)));
+    }, [options, query]);
+    const enabledIndices = filteredOptions.reduce((indices, option, index) => {
+        if (!option.disabled)
+            indices.push(index);
+        return indices;
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const activeOption = activeIndex >= 0 ? filteredOptions[activeIndex] : undefined;
+        const option = activeOption ? optionRefs.current[activeOption.value] : null;
+        const listbox = option?.parentElement;
+        if (option && listbox) {
+            const top = option.offsetTop;
+            const bottom = top + option.offsetHeight;
+            if (top < listbox.scrollTop)
+                listbox.scrollTop = top;
+            else if (bottom > listbox.scrollTop + listbox.clientHeight)
+                listbox.scrollTop = bottom - listbox.clientHeight;
+        }
+    }, [activeIndex, filteredOptions, open]);
+    useEffect(() => {
+        const handlePointerDown = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                setOpen(false);
+                setQuery("");
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, []);
+    const choose = (option) => {
+        if (option.disabled)
+            return;
+        setUncontrolledValue(option.value);
+        onValueChange?.(option.value);
+        setQuery("");
+        setOpen(false);
+        inputRef.current?.focus();
+    };
+    const clear = (event) => {
+        event.preventDefault();
+        setUncontrolledValue("");
+        onValueChange?.("");
+        setQuery("");
+        setOpen(true);
+        inputRef.current?.focus();
+    };
+    const openMenu = () => {
+        if (disabled)
+            return;
+        setOpen(true);
+        setQuery("");
+        setActiveIndex(-1);
+    };
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!open) {
+                openMenu();
+                return;
+            }
+            if (!enabledIndices.length)
+                return;
+            const currentPosition = enabledIndices.indexOf(activeIndex);
+            const nextPosition = event.key === "ArrowDown"
+                ? (currentPosition + 1) % enabledIndices.length
+                : (currentPosition - 1 + enabledIndices.length) % enabledIndices.length;
+            setActiveIndex(enabledIndices[nextPosition]);
+            return;
+        }
+        if (event.key === "Enter" && open && activeIndex >= 0) {
+            event.preventDefault();
+            const option = filteredOptions[activeIndex];
+            if (option)
+                choose(option);
+            return;
+        }
+        if (event.key === "Escape" && open) {
+            event.preventDefault();
+            setOpen(false);
+            setQuery("");
+            return;
+        }
+    };
+    const inputValue = open ? query : selectedOption?.label ?? "";
+    const activeOption = activeIndex >= 0 ? filteredOptions[activeIndex] : undefined;
+    return (_jsxs("div", { ref: rootRef, className: styles.field, children: [_jsx("label", { htmlFor: controlId, children: label }), _jsxs("div", { className: [styles.control, open ? styles.open : "", disabled ? styles.disabled : "", className ?? ""].filter(Boolean).join(" "), children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ...inputProps, ref: inputRef, id: controlId, type: "text", role: "combobox", value: inputValue, 
+                        // While searching, the chosen label stays in place as muted placeholder copy instead of vanishing.
+                        placeholder: selectedOption?.label ?? placeholder, disabled: disabled, "aria-describedby": hintId, "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": open && activeOption ? `${controlId}-option-${activeOption.value}` : undefined, 
+                        // WAI-ARIA combobox: focus alone never opens the list (a Tab walk through a form would drop it over the next
+                        // fields); typing, ArrowDown/ArrowUp or a click do. Leaving the field closes it, so it never stays open
+                        // behind focus.
+                        onBlur: (event) => {
+                            onBlur?.(event);
+                            // Focus moving anywhere but into the list (the next field, or the field's own Clear button) closes it.
+                            const next = event.relatedTarget;
+                            if (open && next && !document.getElementById(listboxId)?.contains(next)) {
+                                setOpen(false);
+                                setQuery("");
+                            }
+                        }, onClick: openMenu, onChange: (event) => {
+                            setQuery(event.target.value);
+                            setOpen(true);
+                            setActiveIndex(-1);
+                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: selectedOption && !disabled && (_jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear selection", onMouseDown: event => event.preventDefault(), onClick: clear, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, whileTap: { scale: reduceMotion ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), description && _jsx("span", { id: hintId, className: styles.hint, children: description }), _jsx(AnimatePresence, { initial: false, children: open && (_jsx(motion.div, { className: styles.popover, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, y: -6, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { y: -4, scale: 0.98 }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, role: "presentation", children: _jsx(AutoHeight, { reduceMotion: reduceMotion, children: _jsx("div", { id: listboxId, className: styles.listbox, role: "listbox", "aria-label": `${label} options`, tabIndex: -1, children: filteredOptions.length ? filteredOptions.map((option, index) => (_jsxs("div", { ref: (element) => { optionRefs.current[option.value] = element; }, id: `${controlId}-option-${option.value}`, className: styles.option, "data-active": index === activeIndex ? "true" : undefined, "data-disabled": option.disabled ? "true" : undefined, role: "option", "aria-selected": option.value === selectedValue, "aria-disabled": option.disabled || undefined, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => !option.disabled && setActiveIndex(index), onClick: () => choose(option), children: [_jsx("span", { children: option.label }), option.value === selectedValue && _jsx(Check, { className: styles.check, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }, option.value))) : _jsx(motion.div, { className: styles.empty, role: "status", initial: reduceMotion ? false : { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: emptyMessage }) }) }) })) })] }));
+});
+Combobox.displayName = "Combobox";

package/components/combobox/combobox.module.css

@@ -0,0 +1,28 @@
+.field { position: relative; display: grid; gap: var(--space-related); min-width: 0; }
+.field label { font-size: var(--text-sm); font-weight: 500; }
+.control { position: relative; z-index: 2; display: flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-group); background: var(--surface); color: var(--foreground); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .control:hover:not(.disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
+.control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
+.control.open { border-color: var(--border-strong); background: var(--surface-muted); }
+.control.disabled { opacity: .5; cursor: not-allowed; }
+.searchIcon { flex: 0 0 auto; color: var(--text-muted); }
+.control input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); }
+.control input:focus-visible { outline: none; }
+.control input::placeholder { color: var(--text-muted); }
+.chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
+.open .chevron { transform: rotate(180deg); }
+.clear { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .clear:hover { background: var(--surface-muted); color: var(--foreground); } }
+.clear:focus-visible { --focus-outline-offset: 1px; }
+.hint { color: var(--text-muted); font-size: var(--text-xs); }
+.popover { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; transform-origin: top center; border: 1px solid var(--border); border-radius: var(--radius-container); padding: 5px; background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); will-change: transform, opacity; }
+.autoHeight { overflow: hidden; }
+.listbox { max-height: min(300px, 40vh); overflow-y: auto; overscroll-behavior: contain; }
+/* Arrow keys move the highlight often, so it changes almost instantly. */
+.option { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: var(--space-group); border-radius: calc(var(--radius-container) - 5px); padding: 0 12px; color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; user-select: none; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
+.option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.option[data-active="true"] { background: var(--surface-muted); }
+.option[data-disabled="true"] { opacity: .42; cursor: not-allowed; }
+.check { flex: 0 0 auto; color: var(--foreground); }
+.empty { padding: var(--space-group); color: var(--text-muted); font-size: var(--text-sm); }
+@media (prefers-reduced-motion: reduce) { .control, .chevron, .clear, .option { transition: none; } }

package/components/command-palette/command-palette.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    group?: string;
+    keywords?: string[];
+    icon?: ReactNode;
+    shortcut?: string;
+}
+export interface CommandPaletteProps {
+    items: CommandItem[];
+    placeholder?: string;
+    onSelect?: (item: CommandItem) => void;
+    onClose?: () => void;
+    label?: string; /** Focus the search field on mount, for a palette that opens on demand. */
+    autoFocus?: boolean;
+}
+export declare function CommandPalette({ items, placeholder, onSelect, onClose, label, autoFocus }: CommandPaletteProps): import("react").JSX.Element;
+export default CommandPalette;

package/components/command-palette/command-palette.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Command as CommandIcon, Search, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./command-palette.module.css";
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const leave = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const GLIDE_ROWS = 6;
+/** Rows fade out while the rest glide into their place; when the list snaps they leave at once so nothing overlaps the new rows. */
+const rowExit = { exit: (glide) => ({ opacity: 0, transition: glide ? leave : { duration: 0 } }) };
+export function CommandPalette({ items, placeholder = "Search commands", onSelect, onClose, label = "Command palette", autoFocus = false }) {
+    const inputId = useId();
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [listHeight, setListHeight] = useState("auto");
+    const reduced = useReducedMotion();
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const pointer = useRef(false);
+    const lastPointer = useRef({ x: -1, y: -1 });
+    const highlightShown = useRef(false);
+    const highlightY = useMotionValue(0);
+    const highlightHeight = useMotionValue(0);
+    const highlightOpacity = useMotionValue(0);
+    const filtered = useMemo(() => {
+        const normalized = query.trim().toLowerCase();
+        if (!normalized)
+            return items;
+        return items.filter(item => [item.label, item.description, item.group, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(normalized));
+    }, [items, query]);
+    const groupedItems = useMemo(() => {
+        const grouped = new Map();
+        filtered.forEach((item, index) => {
+            const group = item.group ?? "Actions";
+            const entries = grouped.get(group) ?? [];
+            entries.push({ item, index });
+            grouped.set(group, entries);
+        });
+        return [...grouped.entries()];
+    }, [filtered]);
+    // When every remaining row moves within about a viewport, the list closes its gaps with a glide. A long jump (the first letters typed into a long list) snaps like a search result list instead of streaking rows through the frame; only the frame height morphs.
+    const [shift, setShift] = useState({ list: filtered, glide: true });
+    if (shift.list !== filtered) {
+        const before = new Map(shift.list.map((item, index) => [item.id, index]));
+        setShift({ list: filtered, glide: filtered.every((item, index) => Math.abs((before.get(item.id) ?? index) - index) <= GLIDE_ROWS) });
+    }
+    const glide = shift.glide && !reduced;
+    const safeActiveIndex = activeIndex === null
+        ? -1
+        : Math.min(activeIndex, Math.max(filtered.length - 1, 0));
+    const activeId = filtered[safeActiveIndex]?.id;
+    useEffect(() => {
+        if (autoFocus)
+            inputRef.current?.focus({ preventScroll: true });
+    }, [autoFocus]);
+    useEffect(() => {
+        const focusShortcut = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                inputRef.current?.focus();
+            }
+        };
+        document.addEventListener("keydown", focusShortcut);
+        return () => document.removeEventListener("keydown", focusShortcut);
+    }, []);
+    // The results frame follows the list height, so filtering closes or opens the gap instead of snapping.
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const observer = new ResizeObserver(([entry]) => setListHeight(Math.round(entry?.borderBoxSize?.[0]?.blockSize ?? list.offsetHeight)));
+        observer.observe(list);
+        return () => observer.disconnect();
+    }, []);
+    // One highlight follows the active result: a spring for the pointer, a 70ms slide for arrow keys, a fade when it first appears.
+    useLayoutEffect(() => {
+        const node = activeId ? document.getElementById(`${inputId}-${activeId}`) : null;
+        if (!node) {
+            highlightShown.current = false;
+            animate(highlightOpacity, 0, { duration: reduced ? 0 : .1 });
+            return;
+        }
+        const move = !highlightShown.current || reduced ? { duration: 0 } : pointer.current ? motionTokens.spring.snappy : { duration: .07, ease: [...motionTokens.ease.enter] };
+        // Rows sit inside positioned groups, so their offset is summed up to the list (layout transforms stay out of it).
+        let top = 0;
+        for (let element = node; element && element !== listRef.current; element = element.offsetParent)
+            top += element.offsetTop + (element === node ? 0 : element.clientTop);
+        animate(highlightY, top, move);
+        animate(highlightHeight, node.offsetHeight, move);
+        animate(highlightOpacity, 1, { duration: reduced ? 0 : .08 });
+        highlightShown.current = true;
+    }, [activeId, inputId, reduced, highlightY, highlightHeight, highlightOpacity]);
+    useEffect(() => {
+        if (!activeId)
+            return;
+        document.getElementById(`${inputId}-${activeId}`)?.scrollIntoView({ block: "nearest" });
+    }, [activeId, inputId]);
+    function choose(item) {
+        onSelect?.(item);
+        setQuery("");
+        setActiveIndex(null);
+        inputRef.current?.focus();
+    }
+    function handleKeyDown(event) {
+        pointer.current = false;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex(index => Math.min((index ?? -1) + 1, Math.max(filtered.length - 1, 0)));
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex(index => Math.max((index ?? filtered.length) - 1, 0));
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setActiveIndex(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setActiveIndex(Math.max(filtered.length - 1, 0));
+        }
+        // Enter runs the highlighted result; after typing, with nothing highlighted yet, it runs the top match.
+        const target = filtered[safeActiveIndex] ?? (query ? filtered[0] : undefined);
+        if (event.key === "Enter" && target) {
+            event.preventDefault();
+            choose(target);
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (query) {
+                setQuery("");
+                setActiveIndex(null);
+            }
+            else
+                onClose?.();
+        }
+    }
+    return _jsxs(motion.div, { className: styles.palette, initial: reduced ? false : { opacity: 0, y: 6, scale: .98 }, animate: { opacity: 1, y: 0, scale: 1 }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsxs("div", { className: styles.searchRow, children: [_jsx("span", { className: styles.searchIcon, children: _jsx(Search, { width: 18, height: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("label", { className: styles.visuallyHidden, htmlFor: inputId, children: label }), _jsx("input", { ref: inputRef, id: inputId, role: "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "aria-controls": `${inputId}-results`, "aria-activedescendant": activeId ? `${inputId}-${activeId}` : undefined, value: query, onChange: event => { setQuery(event.target.value); setActiveIndex(null); }, onKeyDown: handleKeyDown, placeholder: placeholder, autoComplete: "off" }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: query ? _jsx(motion.button, { className: styles.clearButton, type: "button", "aria-label": "Clear search", onClick: () => { setQuery(""); setActiveIndex(null); inputRef.current?.focus(); }, initial: reduced ? false : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)`, transition: leave }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.instant } }, children: _jsx(X, { width: 15, height: 15, "aria-hidden": "true" }) }, "clear") : null }), onClose ? _jsx("button", { className: styles.closeButton, type: "button", "aria-label": "Close command palette", onClick: onClose, children: "Esc" }) : null, _jsx("kbd", { className: styles.commandKey, children: "\u2318 K" })] }), _jsx(motion.div, { className: styles.resultsFrame, initial: false, animate: { height: listHeight }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsxs(motion.div, { ref: listRef, layoutScroll: true, id: `${inputId}-results`, className: styles.results, role: "listbox", "aria-label": "Command results", children: [_jsx(motion.span, { className: styles.highlight, style: { y: highlightY, height: highlightHeight, opacity: highlightOpacity }, "aria-hidden": "true" }), _jsx(AnimatePresence, { mode: "wait", initial: false, children: filtered.length ? _jsx(motion.div, { initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, transition: leave }, transition: enter, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: groupedItems.map(([group, entries]) => _jsxs(motion.div, { layout: glide ? "position" : false, className: styles.group, role: "group", "aria-label": group, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.groupHeading, "aria-hidden": "true", children: group }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: entries.map(({ item, index }) => _jsxs(motion.button, { layout: glide ? "position" : false, id: `${inputId}-${item.id}`, className: `${styles.result} ${index === safeActiveIndex ? styles.activeResult : ""}`, type: "button", role: "option", "aria-selected": index === safeActiveIndex, onClick: () => choose(item), onPointerMove: event => {
+                                                        // Ignore the synthetic moves browsers send while the list scrolls under a still pointer.
+                                                        if (event.clientX === lastPointer.current.x && event.clientY === lastPointer.current.y)
+                                                            return;
+                                                        lastPointer.current = { x: event.clientX, y: event.clientY };
+                                                        if (index !== safeActiveIndex) {
+                                                            pointer.current = true;
+                                                            setActiveIndex(index);
+                                                        }
+                                                    }, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: item.icon ?? _jsx(CommandIcon, { width: 16, height: 16 }) }), _jsxs("span", { className: styles.resultCopy, children: [_jsx("strong", { children: item.label }), item.description && _jsx("small", { children: item.description })] }), item.shortcut && _jsx("kbd", { className: styles.shortcut, children: item.shortcut })] }, item.id)) })] }, group)) }) }, "results") : _jsxs(motion.div, { className: styles.empty, initial: reduced ? false : { opacity: 0, y: 6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: -4, transition: leave }, transition: enter, children: [_jsx("span", { children: _jsx(Search, { width: 20, height: 20, "aria-hidden": "true" }) }), _jsx("strong", { children: "No matching actions" }), _jsx("small", { children: "Try a different word or clear the search." })] }, "empty") })] }) })] });
+}
+export default CommandPalette;

package/components/command-palette/command-palette.module.css

@@ -0,0 +1,94 @@
+.palette {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-container);
+  background: var(--surface);
+  box-shadow: var(--shadow-floating);
+  transform-origin: top center;
+}
+
+.searchRow {
+  position: relative;
+  display: flex;
+  min-height: 54px;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.searchRow:focus-within { background: var(--surface-muted); }
+.searchIcon, .itemIcon { display: grid; flex: none; place-items: center; color: var(--text-muted); }
+.searchIcon { width: 22px; height: 22px; }
+.searchRow input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); }
+.searchRow input::placeholder { color: var(--text-muted); }
+.searchRow input:focus-visible { outline: none; }
+
+.commandKey, .shortcut {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-detail);
+  background: var(--surface-muted);
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.commandKey { min-width: 38px; height: 24px; padding: 0 6px; gap: 2px; }
+.clearButton { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .clearButton:hover, .closeButton:hover { background: var(--surface); color: var(--foreground); } }
+.clearButton:active, .closeButton:active { background: var(--surface); color: var(--foreground); }
+.closeButton { display: grid; min-width: 27px; height: 24px; flex: none; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-detail); background: transparent; color: var(--text-muted); padding: 0 6px; font: inherit; font-size: var(--text-xs); font-weight: 500; line-height: 1; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+
+/* The frame animates to the list height; the list keeps its own scroll. */
+.resultsFrame { overflow: hidden; }
+.results { position: relative; max-height: 342px; overflow: auto; padding: 6px 8px; }
+.highlight { position: absolute; top: 0; right: 8px; left: 8px; border-radius: var(--radius-detail); background: var(--surface-muted); opacity: 0; pointer-events: none; }
+/* Groups are positioned so a row that pops out of the flow is placed against the same box it was measured in, even mid-glide. */
+.group { position: relative; }
+.group + .group { margin-top: 6px; }
+.groupHeading { display: block; padding: 6px 8px 3px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+
+/* One line per result: the title, then its description in muted text, so the list stays short and scannable. */
+.result { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-detail); padding: 0 8px; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+/* The active row is drawn by the shared highlight; the row itself only tints its icon and arrow. */
+.itemIcon { transition: color var(--duration-fast) var(--ease-standard); }
+.itemIcon { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--text-muted); }
+.itemIcon svg { width: 16px; height: 16px; }
+.resultCopy { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: 8px; }
+.resultCopy strong, .resultCopy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.resultCopy strong { flex: none; max-width: 100%; }
+.resultCopy small { min-width: 0; }
+.resultCopy strong { font-size: var(--text-sm); font-weight: 500; }
+.resultCopy small { color: var(--text-muted); font-size: var(--text-xs); }
+.shortcut { min-width: 18px; height: 18px; padding: 0 4px; border-color: transparent; border-radius: var(--radius-detail); font-size: 11px; }
+.activeResult .itemIcon { color: var(--foreground); }
+.empty { display: grid; justify-items: center; gap: 4px; padding: 26px 12px 28px; text-align: center; }
+.empty > span { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 5px; color: var(--text-muted); }
+.empty strong { font-size: var(--text-sm); font-weight: 500; }
+.empty small { color: var(--text-muted); font-size: var(--text-xs); }
+.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+@media (max-width: 480px) {
+  .searchRow { gap: 8px; padding: 8px 11px; }
+  .results { padding: 6px; }
+  .highlight { right: 6px; left: 6px; }
+  .result { gap: 8px; }
+  .shortcut, .commandKey { display: none; }
+  }
+
+@media (max-width: 340px) {
+    .result { padding-inline: 6px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .searchRow, .itemIcon, .clearButton, .closeButton { transition: none; }
+}

package/components/comment-thread/comment-thread.d.ts

@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+export interface CommentAuthor {
+    id: string;
+    name: string;
+    /** Square image URL. Initials are shown without one. */
+    avatar?: string;
+}
+export interface CommentReaction {
+    emoji: string;
+    /** Ids of the people who reacted. */
+    users: string[];
+}
+export interface ThreadComment {
+    id: string;
+    author: CommentAuthor;
+    /** Plain text. "@Full Name" mentions of known people are highlighted. */
+    body: string;
+    /** Display label such as "2h" or "Sep 18". */
+    createdAt: string;
+    edited?: boolean;
+    /** A deleted comment that still has replies keeps its place as a quiet placeholder. */
+    deleted?: boolean;
+    reactions?: CommentReaction[];
+    replies?: ThreadComment[];
+}
+/** What changed, for syncing to a server. `comments` on `onCommentsChange` is always the full next tree. */
+export type CommentThreadEvent = {
+    type: "reply";
+    comment: ThreadComment;
+    parentId: string | null;
+} | {
+    type: "edit";
+    id: string;
+    body: string;
+} | {
+    type: "delete";
+    id: string;
+} | {
+    type: "react";
+    id: string;
+    emoji: string;
+    added: boolean;
+};
+/** Every word the thread shows or announces. Each one has an English default; words with a count or a name are functions, so an app can apply its own plural rules. */
+export interface CommentThreadLabels {
+    /** Accessible name of the whole thread. */
+    thread?: string;
+    /** Header and resolved chip, such as "3 comments". */
+    commentCount?: (count: number) => string;
+    /** Resolved chip, such as "2 people". */
+    peopleCount?: (count: number) => string;
+    resolve?: string;
+    /** Title of the resolved chip. */
+    resolved?: string;
+    reopen?: string;
+    /** Shown when there are no comments. */
+    empty?: string;
+    reply?: string;
+    edit?: string;
+    delete?: string;
+    cancel?: string;
+    send?: string;
+    /** Saves an edit. */
+    save?: string;
+    /** Placeholder and accessible name of the edit field. */
+    editComment?: string;
+    /** After the time of an edited comment. */
+    edited?: string;
+    deleteConfirm?: string;
+    /** Placeholder text of a deleted comment that still has replies. */
+    deletedText?: string;
+    /** Accessible name of that placeholder. */
+    deletedComment?: string;
+    /** Above the composer while replying. The name inside it is highlighted. */
+    replyingTo?: (name: string) => string;
+    cancelReply?: string;
+    showReplies?: (count: number) => string;
+    hideReplies?: string;
+    addReaction?: string;
+    closeReactions?: string;
+    /** Accessible name of the reaction picker. */
+    reactions?: string;
+    /** Accessible name of an emoji in the picker. */
+    reactWith?: (emoji: string) => string;
+    /** Accessible name of a reaction under a comment. */
+    reactionCount?: (emoji: string, count: number, includesYou: boolean) => string;
+    /** Accessible name of the @mention suggestions. */
+    mentions?: string;
+}
+/**
+ * A threaded discussion: replies nest under their comment and collapse, reactions toggle with a count that rolls,
+ * authors edit and delete their own comments in place, mentions autocomplete in the composer, and resolving folds the
+ * whole thread into a single chip that reopens it. Controlled with `comments` and `resolved`, or uncontrolled.
+ */
+export interface CommentThreadProps {
+    comments?: ThreadComment[];
+    defaultComments?: ThreadComment[];
+    onCommentsChange?: (comments: ThreadComment[], event: CommentThreadEvent) => void;
+    /** The person writing. Their comments can be edited and deleted. */
+    currentUser: CommentAuthor;
+    /** People who can be mentioned. Defaults to everyone in the thread. */
+    people?: CommentAuthor[];
+    resolved?: boolean;
+    defaultResolved?: boolean;
+    onResolvedChange?: (resolved: boolean) => void;
+    /** What the thread is about, shown in its header, such as "Hero headline". */
+    title?: ReactNode;
+    /** Emoji offered by the reaction picker. */
+    reactions?: string[];
+    placeholder?: string;
+    /** Replies deeper than this attach to the deepest allowed parent. Defaults to 2. */
+    maxDepth?: number;
+    /** Label for comments written now. */
+    nowLabel?: string;
+    /** Words for localization. Leave out any key to keep its English default. */
+    labels?: CommentThreadLabels;
+    className?: string;
+}
+export declare const CommentThread: import("react").ForwardRefExoticComponent<CommentThreadProps & import("react").RefAttributes<HTMLElement>>;
+export default CommentThread;