@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/tabs/tabs.module.css

@@ -0,0 +1,27 @@
+/* Positioned so an outgoing panel pops out exactly where it was while the next one takes its place. */
+.root { position: relative; }
+.listShell { position: relative; display: inline-flex; max-width: 100%; min-width: 0; align-items: center; isolation: isolate; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
+.viewport { min-width: 0; overflow-x: auto; border-radius: inherit; corner-shape: inherit; scrollbar-width: none; }
+.viewport::-webkit-scrollbar { display: none; }
+.listShell[data-left="true"] .viewport { mask-image: linear-gradient(to right, transparent, black 35px, black); }
+.listShell[data-right="true"] .viewport { mask-image: linear-gradient(to right, black, black calc(100% - 35px), transparent); }
+.listShell[data-left="true"][data-right="true"] .viewport { mask-image: linear-gradient(to right, transparent, black 35px, black calc(100% - 35px), transparent); }
+/* The list owns the stacking context so the gliding highlight passes under every label, not over earlier ones. */
+.list { isolation: isolate; display: inline-flex; width: max-content; align-items: center; gap: var(--space-tight); padding: var(--space-tight); }
+.scrollButton { position: absolute; z-index: 2; top: 0; bottom: 0; display: grid; width: 33px; place-items: center; border: 0; background: var(--surface-muted); color: var(--foreground); }
+.scrollLeft { left: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); }
+.scrollRight { right: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
+.scrollButton:disabled { opacity: 0; pointer-events: none; }
+.scrollButton:focus-visible { --focus-outline-offset: -3px; }
+.trigger { position: relative; -webkit-tap-highlight-color: transparent; display: inline-grid; min-width: 5.5rem; place-items: center; flex: 0 0 auto; min-height: var(--control-height-sm); border: 0; border-radius: calc(var(--radius-control) - 3px); padding: 0 var(--space-group); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover { color: var(--foreground); } }
+.trigger:active { color: var(--foreground); }.trigger[data-state="active"] { color: var(--accent-strong); }
+.selection { position: absolute; z-index: -1; inset: 0; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; background: var(--surface); box-shadow: var(--shadow-resting); will-change: transform; }
+.triggerLabel { position: relative; z-index: 1; }
+.trigger:disabled { cursor: not-allowed; opacity: .5; }
+.content { margin-top: var(--space-inset); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+/* The outgoing panel is lifted out of flow by the presence animation; drop its margin so it stays in place and ignore stray clicks. */
+.content[data-motion-pop-id] { margin-top: 0; }
+.content[data-state="inactive"] { pointer-events: none; }
+.content:focus-visible { --focus-outline-offset: 3px; border-radius: var(--radius-control); }
+@media (prefers-reduced-motion: reduce) { .trigger { transition: none; } }

package/components/tag-input/tag-input.d.ts

@@ -0,0 +1,15 @@
+export interface TagInputProps {
+    label: string;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    description?: string;
+    id?: string;
+}
+/**
+ * Tags keep the field still: a new tag blurs in where its text was typed while the caret glides aside, a removed tag
+ * leaves its slot and the rest glide in, and the shell follows wrapped rows on a spring. Backspace or the arrow keys
+ * pick a tag first, a ring glides to it, and the next Backspace removes it.
+ */
+export declare function TagInput({ label, value, defaultValue, onValueChange, placeholder, description, id }: TagInputProps): import("react").JSX.Element;

package/components/tag-input/tag-input.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react";
+import { X as Xmark } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./tag-input.module.css";
+/** Changed words rise in and unblur while unchanged words hold still. Assistive tech reads the plain copy. */
+function MotionText({ text }) {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { className: styles.words, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: words.map((word, index) => _jsx(motion.span, { className: styles.word, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.35em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: index < words.length - 1 ? `${word} ` : word }, `${index}:${word}`)) }) })] });
+}
+/** Helper copy: the row opens its height on a spring, then the words settle in. */
+function FieldMessage({ id, text, className }) {
+    return _jsx(AnimatePresence, { initial: false, children: text ? _jsx(MessageRow, { id: id, text: text, className: className }, "message") : null });
+}
+/** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */
+function MessageRow({ id, text, className }) {
+    const reduced = useReducedMotion();
+    const copyRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+    useEffect(() => {
+        const node = copyRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => setHeight(entry?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    // Reduced motion mounts the row at full height: a zero-duration open would still paint one collapsed frame.
+    return _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(motion.span, { ref: copyRef, id: id, className: className, initial: reduced ? false : { y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { y: 0, filter: "blur(0px)" }, transition: { duration: reduced ? 0 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: _jsx(MotionText, { text: text }) }) });
+}
+/**
+ * Tags keep the field still: a new tag blurs in where its text was typed while the caret glides aside, a removed tag
+ * leaves its slot and the rest glide in, and the shell follows wrapped rows on a spring. Backspace or the arrow keys
+ * pick a tag first, a ring glides to it, and the next Backspace removes it.
+ */
+export function TagInput({ label, value, defaultValue = [], onValueChange, placeholder = "Add a tag", description, id }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const hintId = description ? `${inputId}-description` : undefined;
+    const [internal, setInternal] = useState(defaultValue);
+    const [draft, setDraft] = useState("");
+    const [picked, setPicked] = useState(null);
+    const [notice, setNotice] = useState("");
+    const reduced = useReducedMotion();
+    const [scope, animate] = useAnimate();
+    const contentRef = useRef(null);
+    const inputRef = useRef(null);
+    const ringRef = useRef(null);
+    const ringAt = useRef("");
+    // The shell follows its wrapped rows on a spring instead of jumping when a tag starts or leaves a line.
+    const [height, setHeight] = useState("auto");
+    const tags = value ?? internal;
+    const active = picked !== null && tags.includes(picked) ? picked : null;
+    useEffect(() => {
+        const node = contentRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => setHeight(node.offsetHeight));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    // The ring measures the picked tag's resting box, glides between picks, and fades in place when the pick clears.
+    useLayoutEffect(() => {
+        const ring = ringRef.current;
+        const node = active === null ? null : contentRef.current?.querySelector(`[data-tag="${CSS.escape(active)}"]`);
+        if (!ring)
+            return;
+        // It leaves on the same curve as a removed tag, so a picked tag and its ring fade out as one piece.
+        if (!node) {
+            if (ringAt.current)
+                animate(ring, reduced ? { opacity: 0 } : { opacity: 0, scale: .9 }, { duration: reduced ? 0 : motionTokens.duration.instant, ease: [...motionTokens.ease.standard] });
+            ringAt.current = "";
+            return;
+        }
+        const box = { x: node.offsetLeft, y: node.offsetTop, width: node.offsetWidth, height: node.offsetHeight };
+        const at = Object.values(box).join(" ");
+        if (at === ringAt.current)
+            return;
+        // A ring that is still fading from the last pick glides on to the next one, so quick Backspaces read as one motion.
+        if (!reduced && (ringAt.current || Number(getComputedStyle(ring).opacity) > .02))
+            animate(ring, { ...box, opacity: 1, scale: 1 }, { ...motionTokens.spring.morph, opacity: { duration: motionTokens.duration.fast } });
+        else
+            animate(ring, { ...box, opacity: [0, 1], scale: [reduced ? 1 : .9, 1] }, reduced ? { duration: 0, opacity: { duration: motionTokens.duration.instant } } : { duration: 0, opacity: { duration: motionTokens.duration.fast }, scale: motionTokens.spring.snappy });
+        ringAt.current = at;
+    });
+    function say(message) { setNotice(previous => previous === message ? `${message}\u00a0` : message); }
+    function update(next) { if (value === undefined)
+        setInternal(next); onValueChange?.(next); }
+    function pick(tag) { setPicked(tag); if (tag !== null)
+        say(`${tag} selected. Press Backspace to remove it.`); }
+    function add() {
+        const tag = draft.trim();
+        if (!tag)
+            return;
+        const existing = tags.find(item => item.toLowerCase() === tag.toLowerCase());
+        // A duplicate pulses the tag that already exists, so the ignored Enter still gets an answer.
+        if (existing) {
+            const node = scope.current?.querySelector(`[data-tag="${CSS.escape(existing)}"]`);
+            if (node && !reduced)
+                animate(node, { scale: [1, 1.06, 1] }, { duration: motionTokens.duration.standard + motionTokens.duration.instant, ease: [...motionTokens.ease.inOut] });
+            say(`${existing} is already added`);
+            return;
+        }
+        update([...tags, tag]);
+        setDraft("");
+        setPicked(null);
+        say(`Added ${tag}`);
+    }
+    function remove(tag) { update(tags.filter(item => item !== tag)); setPicked(null); say(`Removed ${tag}`); inputRef.current?.focus(); }
+    function onKeyDown(event) {
+        const { key, currentTarget: input } = event;
+        const atStart = input.selectionStart === 0 && input.selectionEnd === 0;
+        const index = active === null ? tags.length : tags.indexOf(active);
+        let handled = true;
+        if (key === "Enter" || key === ",")
+            add();
+        else if ((key === "Backspace" || key === "Delete") && active !== null)
+            remove(active);
+        else if (key === "Backspace" && atStart && tags.length)
+            pick(tags[tags.length - 1]);
+        else if (key === "ArrowLeft" && (atStart || active !== null) && index > 0)
+            pick(tags[index - 1]);
+        else if (key === "ArrowRight" && active !== null)
+            pick(tags[index + 1] ?? null);
+        else if (key === "Escape" && active !== null)
+            pick(null);
+        else
+            handled = false;
+        if (handled)
+            event.preventDefault();
+    }
+    // A click on a tag picks it without taking focus from the field. The remove button keeps its own press.
+    function onTagPointer(event, tag) {
+        if (event.target.closest("button"))
+            return;
+        if (!tag) {
+            event.preventDefault();
+            return;
+        }
+        pick(active === tag ? null : tag);
+        inputRef.current?.focus();
+    }
+    const move = reduced ? { duration: 0 } : motionTokens.spring.morph;
+    const glide = reduced ? { duration: 0 } : motionTokens.spring.smooth;
+    return _jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: inputId, children: label }), _jsx(motion.div, { ref: scope, className: styles.control, initial: false, animate: { height }, transition: glide, children: _jsxs("div", { ref: contentRef, className: styles.content, onClick: event => { if (event.target === event.currentTarget)
+                        inputRef.current?.focus(); }, children: [_jsx("span", { ref: ringRef, className: styles.ring, "aria-hidden": "true" }), _jsx(AnimatePresence, { initial: false, children: !draft && !tags.length && _jsx(motion.span, { className: styles.placeholder, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: 0 } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: placeholder }, "placeholder") }), _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: tags.map(tag => _jsxs(motion.span, { layout: reduced ? false : "position", className: styles.tag, "data-tag": tag, "data-picked": tag === active || undefined, onMouseDown: event => onTagPointer(event), onClick: event => onTagPointer(event, tag), initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .9, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transitionEnd: { filter: "none" } }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .9, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.morph, layout: move, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, children: [_jsx("span", { className: styles.tagLabel, children: tag }), _jsx("button", { type: "button", onClick: () => remove(tag), "aria-label": `Remove ${tag}`, children: _jsx(Xmark, { width: 14, height: 14, "aria-hidden": "true" }) })] }, tag)) }), _jsx(motion.input, { layout: reduced ? false : "position", transition: { layout: move }, ref: inputRef, id: inputId, value: draft, onChange: event => { setDraft(event.currentTarget.value); setPicked(null); }, onKeyDown: onKeyDown, onBlur: () => { add(); setPicked(null); }, placeholder: tags.length ? "" : placeholder, "aria-describedby": hintId })] }) }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: notice }), _jsx(FieldMessage, { id: hintId, text: description, className: styles.hint })] });
+}

package/components/tag-input/tag-input.module.css

@@ -0,0 +1,34 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+/* The field fills its column, so a new tag never widens it or re-centers it inside a centered layout. */
+.field { display: grid; width: 100%; min-width: 0; }
+.field label { margin-bottom: var(--space-related); font-size: var(--text-sm); font-weight: 500; }
+/* The shell animates its height to .content, which carries the wrapping rows. The ring contracts onto the border on focus. */
+.control { box-sizing: content-box; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); box-shadow: 0 0 0 6px transparent; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .control:hover:not(:focus-within) { border-color: var(--border-strong); } }
+.control:focus-within { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--focus-ring); outline: 2px solid transparent; outline-offset: 2px; }
+/* Equal 7px padding makes one row fill the minimum height exactly, so existing tags hold their line when a second row opens. */
+.content { position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px; min-height: calc(var(--control-height-md) - 2px); box-sizing: border-box; padding: 7px; cursor: text; }
+.tag { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 28px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 4px 0 9px; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); white-space: nowrap; cursor: default; }
+.tag button { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .tag button:hover { background: var(--surface); color: var(--foreground); } }
+.tag button:focus-visible { background: var(--surface); color: var(--foreground); outline: none; box-shadow: inset 0 0 0 1.5px var(--focus-ring); }
+/* Quick press, spring release. */
+.tag button:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.content input { flex: 1 1 100px; min-width: 80px; min-height: 28px; box-sizing: border-box; border: 0; padding: 0 5px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); }
+.content input:focus, .content input:focus-visible { outline: none; }
+.content input::placeholder { color: transparent; }
+/* The visible placeholder is drawn here so it can rise in when the last tag leaves. The native one stays for assistive tech. Inset matches the content and input padding. */
+.placeholder { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; padding: 0 12px; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; }
+/* The pick ring rides above the pills and sizes itself to the picked tag, so it can glide between tags without scaling its border. */
+.ring { position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid var(--accent); border-radius: var(--radius-full); corner-shape: round; background: var(--accent-subtle); opacity: 0; pointer-events: none; }
+/* A resting tag is not a stacking context (its filter ends at none), so its label and button sit above the ring while its fill stays below. */
+.tagLabel, .tag button { position: relative; z-index: 2; }
+.tag[data-picked] button { color: var(--foreground); }
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { display: block; overflow: hidden; }
+.hint { display: block; padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+/* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */
+.words { 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; }
+@media (prefers-reduced-motion: reduce) { .control, .tag button { transition: none; } .tag button:active { transform: none; } }

package/components/text-morph/text-morph.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Morphs one short label into the next in place. Letters both strings share glide to their new positions, new letters sharpen in, removed letters blur away,
+ * and the width follows on a spring so the surrounding layout glides instead of jumping. Use it for status words that change a few letters at a time,
+ * such as Publish, Publishing, and Published, or Follow and Following. It stays on one line, and assistive technology reads the plain text.
+ */
+export interface TextMorphProps {
+    children: string;
+    as?: "span" | "div" | "p" | "strong" | "h1" | "h2" | "h3";
+    className?: string;
+    id?: string;
+}
+export declare function TextMorph({ children, as, className, id }: TextMorphProps): import("react").JSX.Element;
+export default TextMorph;

package/components/text-morph/text-morph.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./text-morph.module.css";
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const blurred = `blur(${motionTokens.blur.soft}px)`;
+/** Lets leaving letters start to clear before the first new letter sharpens in their place. */
+const HANDOFF = .05;
+/** Letters match by character and occurrence, so the second "i" in one string pairs with the second "i" in the next. */
+function toGlyphs(text) {
+    const seen = new Map();
+    return Array.from(text).map(char => { const count = seen.get(char) ?? 0; seen.set(char, count + 1); return { char, key: `${char}-${count}` }; });
+}
+const measure = (element) => parseFloat(getComputedStyle(element).width);
+export function TextMorph({ children, as = "span", className, id }) {
+    const Tag = as;
+    const reduced = useReducedMotion();
+    const frame = useRef(null);
+    const track = useRef(null);
+    const width = useRef(0);
+    const sizing = useRef(null);
+    const glyphs = useMemo(() => toGlyphs(children), [children]);
+    // The previous label tells which letters are new, so only they stagger, in reading order, however far along the word they sit.
+    const [labels, setLabels] = useState({ current: children, previous: children });
+    if (labels.current !== children)
+        setLabels({ current: children, previous: labels.current });
+    const kept = useMemo(() => new Set(toGlyphs(labels.previous).map(glyph => glyph.key)), [labels.previous]);
+    let entering = 0;
+    // The frame holds an explicit width so a new label never snaps it; the spring then follows the track, which already has the new letters in place.
+    useLayoutEffect(() => {
+        const frameElement = frame.current, trackElement = track.current;
+        if (!frameElement || !trackElement)
+            return;
+        const next = measure(trackElement);
+        if (!Number.isFinite(next))
+            return;
+        if (width.current && Math.abs(next - width.current) > .5 && !reduced)
+            sizing.current = animate(frameElement, { width: next }, motionTokens.spring.morph);
+        else {
+            sizing.current?.stop();
+            frameElement.style.width = `${next}px`;
+        }
+        width.current = next;
+    }, [children, reduced]);
+    // Font loading or a responsive font size changes the width without a new label: follow it immediately.
+    useEffect(() => {
+        const frameElement = frame.current, trackElement = track.current;
+        if (!frameElement || !trackElement || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const next = measure(trackElement);
+            if (!Number.isFinite(next) || Math.abs(next - width.current) < .5)
+                return;
+            sizing.current?.stop();
+            frameElement.style.width = `${next}px`;
+            width.current = next;
+        });
+        observer.observe(trackElement);
+        return () => observer.disconnect();
+    }, []);
+    return _jsxs(Tag, { id: id, className: className, children: [_jsx("span", { className: styles.srOnly, children: children }), _jsx("span", { ref: frame, className: styles.frame, "aria-hidden": "true", children: _jsx("span", { ref: track, className: styles.track, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: glyphs.map(({ char, key }) => {
+                            const order = kept.has(key) ? 0 : entering++;
+                            return _jsx(motion.span, { layout: "position", className: styles.glyph, initial: reduced ? false : { opacity: 0, scale: .8, y: "0.14em", filter: blurred }, animate: { opacity: 1, scale: 1, y: "0em", filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .86, y: "-0.1em", filter: blurred, transition: { duration: motionTokens.duration.exit, ease: standard } }, transition: reduced ? { duration: 0 } : { layout: motionTokens.spring.morph, default: { duration: motionTokens.duration.standard + .04, ease: enter, delay: HANDOFF + Math.min(order, 8) * motionTokens.stagger.char * 2 } }, children: char === " " ? "\u00a0" : char }, key);
+                        }) }) }) })] });
+}
+export default TextMorph;

package/components/text-morph/text-morph.module.css

@@ -0,0 +1,8 @@
+/* The frame carries the animated width. Its mask reveals new letters through a soft trailing edge as it grows and fades leaving ones as it shrinks.
+   Padding with matching negative margins gives the mask room for blur and descenders without changing layout; the edge sits entirely in that room, so resting text is never dimmed.
+   The track always starts at the frame's leading edge, even in centered text: otherwise it would recenter inside the old width and leaving letters would jump. */
+.frame.frame, .frame { position: relative; display: inline-block; box-sizing: content-box; padding: .5em .5em .5em .2em; margin: -.5em -.5em -.5em -.2em; text-align: start; white-space: nowrap; mask-image: linear-gradient(90deg, #000 calc(100% - .5em), transparent); }
+/* The track sizes to the letters in flow. Leaving letters are taken out of flow and positioned against it. */
+.track { position: relative; display: inline-block; white-space: nowrap; }
+.glyph { display: inline-block; white-space: pre; transform-origin: 50% 60%; }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; user-select: none; }

package/components/text-reveal/text-reveal.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Reveals a short headline or sentence once, as it mounts: each word rises out of its own clip while it sharpens from a soft blur.
+ * The entrance runs in CSS, so it starts on first paint, never waits for hydration, and never leaves text hidden when scripts are slow.
+ * Use `\n` in `text` for a deliberate line break and change the element's `key` to replay it.
+ */
+export interface TextRevealProps {
+    text: string;
+    as?: "h1" | "h2" | "h3" | "p";
+    className?: string;
+    id?: string; /** Seconds to wait before the first word rises. Defaults to 0. */
+    delay?: number;
+}
+export declare function TextReveal({ text, as, className, id, delay }: TextRevealProps): import("react").JSX.Element;
+export default TextReveal;

package/components/text-reveal/text-reveal.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./text-reveal.module.css";
+/** Total stagger stays under this many seconds, however long the text is. */
+const MAX_STAGGER = motionTokens.duration.considered;
+export function TextReveal({ text, as = "h2", className, id, delay = 0 }) {
+    const Tag = as;
+    const lines = text.split("\n").map(line => line.split(" ").filter(Boolean));
+    const count = lines.reduce((total, words) => total + words.length, 0);
+    const step = Math.min(motionTokens.stagger.word, MAX_STAGGER / Math.max(count, 1));
+    const blur = as === "p" ? motionTokens.blur.soft : motionTokens.blur.text;
+    let index = 0;
+    return _jsxs(Tag, { id: id, className: [styles.reveal, className].filter(Boolean).join(" "), style: { "--reveal-blur": `${blur}px` }, children: [_jsx("span", { className: styles.srOnly, children: text.replace(/\n/g, " ") }), lines.map((words, lineIndex) => _jsxs(Fragment, { children: [_jsx("span", { className: styles.line, "aria-hidden": "true", children: words.map((word, wordIndex) => {
+                            const position = index++;
+                            return _jsxs(Fragment, { children: [_jsx("span", { className: styles.clip, children: _jsx("span", { className: styles.word, style: { "--reveal-delay": `${delay + position * step + lineIndex * step}s` }, children: word }) }), wordIndex < words.length - 1 ? " " : null] }, `${word}-${position}`);
+                        }) }), lineIndex < lines.length - 1 ? " " : null] }, lineIndex))] });
+}
+export default TextReveal;

package/components/text-reveal/text-reveal.module.css

@@ -0,0 +1,13 @@
+.reveal { max-width: 24ch; margin: 0; overflow: visible; color: var(--foreground); text-wrap: balance; }
+.line { display: block; }
+/* The clip hides the rise below the line through a feathered bottom edge, so a blurred word surfaces softly instead of being cut by a hard line.
+   Padding with matching negative margins leaves room for descenders and the blur without changing layout; the feather sits below the descenders, so resting words are never dimmed. */
+.clip { display: inline-block; vertical-align: top; padding: .1em .16em .24em; margin: -.1em -.16em -.24em; mask-image: linear-gradient(#000 calc(100% - .18em), transparent); }
+/* Three tracks: the rise settles longest, the fade finishes first, and the blur clears between them.
+   Backwards fill holds the hidden start through each word's delay, then lets go at the end, so resting words keep no transform or filter layer and render as crisp as plain text. */
+.word { display: inline-block; animation: rise .76s var(--ease-enter) var(--reveal-delay, 0s) backwards, fade .44s var(--ease-standard) var(--reveal-delay, 0s) backwards, focus .58s var(--ease-enter) var(--reveal-delay, 0s) backwards; }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; user-select: none; }
+@keyframes rise { from { transform: translateY(.62em); } }
+@keyframes fade { from { opacity: 0; } }
+@keyframes focus { from { filter: blur(var(--reveal-blur, 4px)); } }
+@media (prefers-reduced-motion: reduce) { .clip { mask-image: none; } .word { animation: fade var(--duration-fast) var(--ease-standard) backwards; } }

package/components/text-shimmer/text-shimmer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A calm light sweep across a short status line, such as "Thinking" or "Generating summary", to show that work is ongoing.
+ * The band uses the current text color over a muted base. When `active` turns false the band glides off and the text settles to solid.
+ * A changed label rises in place while the line springs to its new width. The component sets `aria-busy`; announce completion from your own live region.
+ */
+export interface TextShimmerProps {
+    /** The status text. Keep it to one short line. */
+    children: string;
+    /** Sweep while work is ongoing. Defaults to true. */
+    active?: boolean;
+    /** Seconds for one sweep across the text. Defaults to 1.8. */
+    duration?: number;
+    as?: "span" | "p" | "div" | "h2" | "h3" | "h4";
+    className?: string;
+    id?: string;
+}
+export declare function TextShimmer({ children, active, duration, as, className, id }: TextShimmerProps): import("react").JSX.Element;
+export default TextShimmer;

package/components/text-shimmer/text-shimmer.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, usePageInView, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./text-shimmer.module.css";
+const subscribeHydration = () => () => { };
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+/** Half width of the highlight band in em, and a bell shaped falloff as [offset, strength] stops. */
+const band = 2.2;
+const falloff = [[-1, 0], [-.5, .5], [-.2, .9], [0, 1], [.2, .9], [.5, .5], [1, 0]];
+const percent = (value) => `${(value * 100).toFixed(1)}%`;
+/** Paints the band at sweep position `t` (0 sits left of the text, 1 right of it) over a base that is `settle` of the way to solid. */
+function shimmerImage(t, settle) {
+    const base = `color-mix(in oklab, var(--ts-highlight) ${percent(settle)}, var(--ts-base))`;
+    const stops = falloff.map(([offset, strength]) => `color-mix(in oklab, var(--ts-highlight) ${percent(strength)}, ${base}) calc(${(t * 100).toFixed(2)}% + ${((2 * t - 1 + offset) * band).toFixed(3)}em)`);
+    return `linear-gradient(90deg, ${base}, ${stops.join(", ")}, ${base})`;
+}
+export function TextShimmer({ children, active = true, duration = 1.8, as = "span", className, id }) {
+    const ref = useRef(null);
+    const prefersReduced = useReducedMotion();
+    const hydrated = useSyncExternalStore(subscribeHydration, clientSnapshot, serverSnapshot);
+    const reduced = Boolean(hydrated && prefersReduced);
+    const inView = useInView(ref, { margin: "64px" });
+    const pageVisible = usePageInView();
+    const sweep = useMotionValue(0);
+    const settle = useMotionValue(active ? 0 : 1);
+    const backgroundImage = useTransform(() => shimmerImage(sweep.get(), settle.get()));
+    const running = active && !reduced && inView && pageVisible;
+    const restWidth = useRef(0);
+    const Tag = as;
+    // Loop the sweep only while work is ongoing, visible, and motion is allowed. A paused band resumes where it stopped.
+    useEffect(() => {
+        if (reduced)
+            sweep.jump(0);
+        if (!running)
+            return;
+        let controls;
+        const pass = (delay) => {
+            if (sweep.get() >= 1)
+                sweep.jump(0);
+            controls = animate(sweep, 1, { duration: duration * (1 - sweep.get()), delay, ease: "linear", onComplete: () => pass(duration * .32) });
+        };
+        pass(sweep.get() > 0 ? 0 : .12);
+        return () => controls?.stop();
+    }, [running, reduced, duration, sweep]);
+    // Finishing lets a band in flight glide off while the base resolves to solid, so the text never hard cuts.
+    useEffect(() => {
+        if (active) {
+            const dim = animate(settle, 0, { duration: reduced ? 0 : motionTokens.duration.standard, ease: [...motionTokens.ease.standard] });
+            return () => dim.stop();
+        }
+        const t = sweep.get();
+        const glide = !reduced && t > 0 && t < 1 ? animate(sweep, 1, { duration: Math.min(.42, duration * (1 - t) * .5), ease: [...motionTokens.ease.enter] }) : undefined;
+        const solid = animate(settle, 1, { duration: reduced ? motionTokens.duration.instant : .36, ease: [...motionTokens.ease.standard] });
+        return () => { glide?.stop(); solid.stop(); };
+    }, [active, reduced, duration, sweep, settle]);
+    // A new label springs the line to its width instead of resizing in one frame, so text after it never jumps.
+    useLayoutEffect(() => {
+        const stage = ref.current;
+        if (!stage)
+            return;
+        const sizing = Boolean(stage.style.width);
+        const current = stage.getBoundingClientRect().width;
+        stage.style.width = "";
+        const next = stage.getBoundingClientRect().width;
+        const from = sizing ? current : restWidth.current;
+        restWidth.current = next;
+        if (reduced || !from || Math.abs(from - next) < .5) {
+            delete stage.dataset.sizing;
+            return;
+        }
+        stage.dataset.sizing = "";
+        const controls = animate(stage, { width: [from, next] }, { ...motionTokens.spring.morph, onComplete: () => { stage.style.width = ""; delete stage.dataset.sizing; } });
+        return () => controls.stop();
+    }, [children, reduced]);
+    // Keep the resting width current when fonts load or the container resizes.
+    useEffect(() => {
+        const stage = ref.current;
+        if (!stage || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => { if (!stage.style.width)
+            restWidth.current = stage.getBoundingClientRect().width; });
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx(Tag, { id: id, className: [styles.shimmer, className].filter(Boolean).join(" "), "data-state": active ? "active" : "idle", "aria-busy": active || undefined, children: _jsx("span", { ref: ref, className: styles.stage, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.label, style: { backgroundImage }, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: reduced ? { opacity: 1 } : { opacity: 1, y: "0em", filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, y: "-0.24em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: children }, children) }) }) });
+}
+export default TextShimmer;

package/components/text-shimmer/text-shimmer.module.css

@@ -0,0 +1,9 @@
+/* The band is the current text color; the resting base leans toward muted text. Override with --text-shimmer-highlight and --text-shimmer-base. */
+.shimmer { --ts-highlight: var(--text-shimmer-highlight, currentColor); --ts-base: var(--text-shimmer-base, color-mix(in oklab, currentColor 12%, var(--text-muted))); }
+.stage { position: relative; display: inline-block; max-width: 100%; }
+.label { display: inline-block; max-width: 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+/* While the line springs to a new width the label keeps its own line, so it never rewraps mid morph. */
+.stage[data-sizing] .label { max-width: none; white-space: nowrap; }
+.label::selection { -webkit-text-fill-color: currentColor; }
+@supports not (color: color-mix(in oklab, red, blue)) { .label { background: none !important; -webkit-text-fill-color: currentColor; } }
+@media (forced-colors: active) { .label { background: none !important; -webkit-text-fill-color: currentColor; } }

package/components/textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import type { TextareaHTMLAttributes } from "react";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: string;
+    description?: string;
+    error?: string;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/components/textarea/textarea.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./textarea.module.css";
+/* Digits roll up when a number grows and down when it shrinks; `custom` hands the latest direction to digits already leaving. */
+const digit = {
+    enter: (direction) => ({ opacity: 0, y: `${direction * 0.6}em`, filter: `blur(${motionTokens.blur.subtle}px)` }),
+    center: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -0.6}em`, filter: `blur(${motionTokens.blur.subtle}px)` }),
+};
+const isNumber = (word) => /^\d[\d.,/:]*%?$/.test(word);
+/** A count in the copy, such as "12 characters", rolls only the digits that changed; a gained or lost digit opens or closes its width. */
+function RollingNumber({ word }) {
+    const reduced = useReducedMotion();
+    const [shown, setShown] = useState({ word, direction: 1 });
+    if (shown.word !== word)
+        setShown({ word, direction: parseFloat(word.replace(/,/g, "")) < parseFloat(shown.word.replace(/,/g, "")) ? -1 : 1 });
+    const characters = word.split("");
+    const transition = reduced ? { duration: 0 } : { y: motionTokens.spring.snappy, width: motionTokens.spring.morph, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } };
+    return _jsx(AnimatePresence, { initial: false, children: characters.map((character, index) => _jsx(motion.span, { className: styles.column, initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: transition, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: shown.direction, children: _jsx(motion.span, { custom: shown.direction, variants: digit, initial: "enter", animate: "center", exit: "exit", transition: transition, children: character }, character) }) }, characters.length - index)) });
+}
+/** Changed words rise in and unblur while unchanged words hold still, and numbers roll. Assistive tech reads the plain copy. */
+function MotionText({ text }) {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { className: styles.words, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: words.map((word, index) => _jsxs(motion.span, { className: styles.word, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.35em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: [isNumber(word) ? _jsx(RollingNumber, { word: word }) : word, index < words.length - 1 ? " " : null] }, `${index}:${isNumber(word) ? "#" : word}`)) }) })] });
+}
+/** Helper and error copy: the row opens its height on a spring, then the words settle in. */
+function FieldMessage({ id, text, className, alert }) {
+    return _jsx(AnimatePresence, { initial: false, children: text ? _jsx(MessageRow, { id: id, text: text, className: className, alert: alert }, "message") : null });
+}
+/** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */
+function MessageRow({ id, text, className, alert }) {
+    const reduced = useReducedMotion();
+    const copyRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+    useEffect(() => {
+        const node = copyRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => { if (entry)
+            setHeight(entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight); });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx(motion.span, { className: styles.messageSlot, initial: reduced ? false : { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(motion.span, { ref: copyRef, id: id, className: className, role: alert ? "alert" : undefined, initial: reduced ? false : { y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { y: 0, filter: "blur(0px)" }, transition: { duration: reduced ? 0 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: _jsx(MotionText, { text: text }) }) });
+}
+export const Textarea = forwardRef(function Textarea({ label, description, error, id, className, ...props }, ref) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    const hintId = description ? `${controlId}-description` : undefined;
+    const errorId = error ? `${controlId}-error` : undefined;
+    return _jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: controlId, children: label }), _jsx("textarea", { ...props, id: controlId, ref: ref, className: [styles.control, className].filter(Boolean).join(" "), "aria-invalid": error ? true : props["aria-invalid"], "aria-describedby": [props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || undefined }), _jsx(FieldMessage, { id: hintId, text: description, className: styles.hint }), _jsx(FieldMessage, { id: errorId, text: error, className: styles.error, alert: true })] });
+});

package/components/textarea/textarea.module.css

@@ -0,0 +1,22 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+.field { display: grid; min-width: 0; }
+.field label { margin-bottom: var(--space-related); font-size: var(--text-sm); font-weight: 500; }
+/* Same focus language as Input: the ring contracts onto the border while it fades in, and the box never changes size. */
+.control { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: var(--space-group); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); outline: none; box-shadow: 0 0 0 6px transparent; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.control::placeholder { color: var(--text-muted); }
+@media (hover: hover) and (pointer: fine) { .control:hover:not(:disabled, [aria-invalid="true"]) { border-color: var(--foreground); } }
+.control:focus-visible { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--focus-ring); outline: 2px solid transparent; outline-offset: 2px; }
+.control[aria-invalid="true"] { border-color: var(--danger); }
+.control:disabled { cursor: not-allowed; background: var(--surface-muted); opacity: .6; }
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { display: block; overflow: hidden; }
+.hint, .error { display: block; padding-top: var(--space-related); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { color: var(--text-muted); } .error { color: var(--danger); }
+/* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */
+.words { position: relative; display: block; }
+.word { display: inline-block; white-space: pre; }
+/* One column per character of a count. Tabular digits keep columns equal, so only a gained or lost digit changes the width. */
+.column { position: relative; display: inline-flex; justify-content: center; font-variant-numeric: tabular-nums; }
+.column > span { display: inline-block; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .control { transition: none; } }

package/components/theme-switch/theme-switch.d.ts

@@ -0,0 +1,11 @@
+export type ThemeSwitchVariant = "reveal" | "eclipse" | "split" | "rise";
+export type Theme = "light" | "dark";
+export interface ThemeSwitchProps {
+    theme: Theme;
+    variant?: ThemeSwitchVariant;
+    onThemeChange: (next: Theme, variant: ThemeSwitchVariant, trigger: HTMLElement) => void;
+    label?: string;
+    iconOnly?: boolean;
+}
+export declare function ThemeSwitch({ theme, variant, onThemeChange, label, iconOnly }: ThemeSwitchProps): import("react").JSX.Element;
+export default ThemeSwitch;