@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/activity-heatmap/activity-heatmap.module.css

@@ -0,0 +1,83 @@
+/* Levels are tints of the accent over a neutral empty square, so the grid follows the selected accent and both themes. */
+.root { --level-0: color-mix(in oklab, var(--foreground) 6.5%, var(--surface)); --level-1: color-mix(in oklab, var(--accent) 26%, var(--level-0)); --level-2: color-mix(in oklab, var(--accent) 50%, var(--level-0)); --level-3: color-mix(in oklab, var(--accent) 76%, var(--level-0)); --level-4: var(--accent); container-type: inline-size; position: relative; display: grid; min-width: 0; gap: var(--space-inset); color: var(--foreground); }
+.header { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-group) var(--space-inset); }
+.summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; column-gap: .3em; margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
+.total { color: var(--foreground); font-weight: 500; white-space: nowrap; }
+.period { white-space: nowrap; }
+.actions { display: flex; flex: none; align-items: center; }
+.rollingFrame { display: inline-flex; justify-content: flex-end; overflow: clip; overflow-clip-margin: .2em; }
+.rolling { display: inline-flex; flex: none; }
+/* Each place is its own window, so a turning digit clips at the line instead of brushing the next line of text. */
+.place { position: relative; display: inline-flex; overflow: clip; overflow-clip-margin: .15em; }
+.placeChar, .riseLine { display: inline-block; }
+.rise { position: relative; display: inline-flex; }
+
+/* The scroller starts at its right edge on narrow screens (the most recent weeks) without script, through its writing direction. */
+.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: -6px; padding: 6px; overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
+.canvas { --gap: 3px; --label: 30px; --cell: clamp(9px, calc((100cqi - var(--label) - var(--gap) * 53) / 53), 15px); --step: calc(var(--cell) + var(--gap)); direction: ltr; display: grid; width: max-content; grid-template-columns: var(--label) auto; grid-template-rows: auto auto; column-gap: var(--gap); row-gap: var(--space-related); }
+.months { position: relative; grid-row: 1; grid-column: 2; height: 1rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1rem; }
+/* Month labels glide to their new week when a range starts on a different weekday. */
+.month { position: absolute; top: 0; left: 0; white-space: nowrap; transform: translateX(calc(var(--col) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring); }
+/* Weekday labels stay pinned while a narrow grid scrolls under them. Set --heatmap-surface when the heatmap sits on another surface. */
+.weekdays { position: sticky; z-index: 1; left: -6px; display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 -6px; padding: 0 var(--gap) 0 6px; background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
+.weekday { display: flex; height: var(--cell); align-items: center; white-space: nowrap; line-height: 1; }
+.plot { position: relative; grid-row: 2; grid-column: 2; }
+.grid { display: grid; gap: var(--gap); outline: none; }
+.row { display: flex; gap: var(--gap); }
+
+/* One square per day. The wave delay rides a custom property so a reveal and a recolor sweep the same diagonal. */
+.cell { --delay: var(--wave); display: block; width: var(--cell); height: var(--cell); flex: none; border-radius: calc(var(--cell) * .28); background: var(--level-0); outline: 1.5px solid transparent; outline-offset: 1px; cursor: default; -webkit-tap-highlight-color: transparent; transition: background-color 320ms var(--ease-standard) var(--delay), transform var(--duration-spring) var(--ease-spring) var(--delay), opacity var(--duration-fast) var(--ease-standard); }
+.grid[data-direction="back"] .cell { --delay: var(--wave-back); }
+.cell[data-level="1"] { background: var(--level-1); }
+.cell[data-level="2"] { background: var(--level-2); }
+.cell[data-level="3"] { background: var(--level-3); }
+.cell[data-level="4"] { background: var(--level-4); }
+/* Days outside the range shrink away in the sweep and grow back when a range needs them. */
+.cell[data-empty] { transform: scale(0); background: var(--level-0); }
+.grid[data-reveal="hidden"] .cell { opacity: 0; transform: scale(.5); transition: none; }
+.grid[data-reveal="hidden"] .cell[data-empty] { transform: scale(0); }
+.grid[data-reveal="revealing"] .cell { transition: background-color 320ms var(--ease-standard) var(--delay), transform var(--duration-spring) var(--ease-spring) var(--delay), opacity 360ms var(--ease-enter) var(--delay); }
+.grid[data-highlight] .cell:not([data-empty]) { opacity: .2; }
+.grid[data-highlight="0"] .cell[data-level="0"], .grid[data-highlight="1"] .cell[data-level="1"], .grid[data-highlight="2"] .cell[data-level="2"], .grid[data-highlight="3"] .cell[data-level="3"], .grid[data-highlight="4"] .cell[data-level="4"] { opacity: 1; }
+@media (hover: hover) and (pointer: fine) { .cell:not([data-empty]):hover { outline-color: color-mix(in oklab, var(--foreground) 45%, transparent); } }
+
+/* The selection ring glides between days, and follows its day when the range changes. */
+.ring { position: absolute; top: -3px; left: -3px; width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + 3px); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.ring[data-shown] { opacity: 1; }
+
+.legend { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); }
+/* The caption names the previewed level; it sits apart from the scale so its changing width never nudges the swatches. */
+.caption { position: relative; min-width: 0; overflow: hidden; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
+.scale { display: flex; flex: none; align-items: center; gap: var(--space-related); }
+.captionShort { display: none; }
+/* Narrow cards keep the day count and let the highlighted squares say which level it is. */
+@container (max-width: 440px) { .captionLong { display: none; } .captionShort { display: inline; } }
+.legendText { line-height: 1; }
+.swatches { display: flex; }
+/* The visible square stays the size of a day while the button keeps a comfortable target around it. */
+.swatch { position: relative; display: grid; width: 15px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-detail); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.swatch::before { content: ""; width: 11px; height: 11px; border-radius: var(--radius-detail); background: var(--level-0); }
+.swatch[data-level="1"]::before { background: var(--level-1); }
+.swatch[data-level="2"]::before { background: var(--level-2); }
+.swatch[data-level="3"]::before { background: var(--level-3); }
+.swatch[data-level="4"]::before { background: var(--level-4); }
+.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--foreground); }
+
+/* One bubble for the whole grid. The outer layer glides between cells; the bubble fades and scales from its tail. */
+.tip { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
+.bubble { position: absolute; bottom: 8px; left: 0; display: block; padding: 7px 12px 8px; border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
+.tipBody { position: relative; display: block; overflow: clip; overflow-clip-margin: 8px; }
+.tipMeasure { position: absolute; top: 0; left: 0; display: grid; width: max-content; visibility: hidden; }
+.tipLines { display: grid; width: max-content; }
+.tipMeasure > span, .tipLines > span { white-space: nowrap; }
+.tipPrimary { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
+.tipSecondary { color: color-mix(in oklab, var(--background) 68%, var(--foreground)); font-size: var(--text-xs); line-height: 1.35; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cell, .grid[data-reveal="revealing"] .cell { transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+  .grid[data-reveal="hidden"] .cell { transform: none; }
+  .cell[data-empty], .grid[data-reveal="hidden"] .cell[data-empty] { opacity: 0; transform: none; }
+  .month, .ring { transition: opacity var(--duration-fast) var(--ease-standard); }
+}

package/components/alert/alert.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: AlertTone;
+    title: string;
+    children?: ReactNode;
+    /** Controls presence. Hiding the alert collapses its height and fades it out. */
+    open?: boolean;
+    /** Shows a dismiss button. An uncontrolled alert collapses first, then calls this. */
+    onDismiss?: () => void;
+}
+export declare function Alert({ open, onDismiss, ...props }: AlertProps): import("react").JSX.Element;
+export default Alert;

package/components/alert/alert.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, Info as InfoCircle, TriangleAlert as WarningTriangle, CircleX as XmarkCircle, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./alert.module.css";
+const icons = { info: InfoCircle, success: Check, warning: WarningTriangle, danger: XmarkCircle };
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade, so the live region reads only the current text. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */
+function HeightFrame({ className, reduce, morphKey, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const height = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [morphKey]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto" }); };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            const current = height.get();
+            const from = typeof current === "number" ? current : last;
+            last = next;
+            controls?.stop();
+            if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120)
+                return settle();
+            // Pin the old height before this frame paints, then spring to the new one.
+            if (frame.current)
+                Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` });
+            controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [height, reduce]);
+    return _jsx(motion.div, { ref: frame, className: className, style: { height }, children: _jsx("div", { ref: content, className: styles.content, children: children }) });
+}
+function AlertBox({ tone = "info", title, children, className, reduce, onDismiss, animateIcon = false, ...props }) {
+    const Icon = icons[tone];
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
+    const hasDetails = children !== undefined && children !== null && children !== false && children !== "";
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: enter };
+    return _jsxs("div", { ...props, className: [styles.alert, styles[tone], className].filter(Boolean).join(" "), role: tone === "danger" ? "alert" : "status", children: [_jsx(motion.span, { className: styles.icon, initial: animateIcon && !reduce ? iconIn : false, animate: shown, transition: motionTokens.spring.snappy, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.glyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? enter : motionTokens.spring.snappy, children: _jsx(Icon, { width: 18, height: 18, "aria-hidden": "true" }) }, tone) }) }), _jsxs(HeightFrame, { className: styles.copy, reduce: reduce, morphKey: `${title}\n${hasDetails}\n${text ?? ""}`, children: [_jsx("strong", { className: styles.title, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: title }, title) }) }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: hasDetails && _jsx(motion.p, { className: styles.description, ...swap, children: text === null ? children : _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: text }, text) }) }, "details") })] }), onDismiss && _jsx("button", { type: "button", className: styles.dismiss, "aria-label": `Dismiss: ${title}`, onClick: onDismiss, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] });
+}
+export function Alert({ open, onDismiss, ...props }) {
+    const reduce = useReducedMotion();
+    const [dismissed, setDismissed] = useState(false);
+    const shell = useRef(null);
+    const setClip = (value) => { if (shell.current)
+        shell.current.style.overflow = value; };
+    if (open === undefined && !onDismiss)
+        return _jsx(AlertBox, { ...props, reduce: reduce });
+    const isOpen = open ?? !dismissed;
+    const dismiss = onDismiss && (() => open === undefined ? setDismissed(true) : onDismiss());
+    const presence = reduce ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } };
+    const exit = { height: 0, opacity: 0, transition: reduce ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: exitFast } };
+    // Presence collapses the height with the fade, so the content below closes the gap instead of jumping.
+    return _jsx(AnimatePresence, { initial: false, onExitComplete: () => { if (open === undefined)
+            onDismiss?.(); }, children: isOpen && _jsx(motion.div, { className: styles.presence, initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: exit, transition: presence, ref: shell, onAnimationStart: () => setClip("hidden"), onAnimationComplete: () => setClip(""), children: _jsx(AlertBox, { ...props, reduce: reduce, onDismiss: dismiss, animateIcon: true }) }, "alert") });
+}
+export default Alert;

package/components/alert/alert.module.css

@@ -0,0 +1,15 @@
+.presence { min-width: 0; }
+.alert { display: flex; align-items: start; gap: var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-inset); background: var(--surface); box-shadow: var(--shadow-resting); }
+.icon, .glyph { position: relative; display: grid; flex: 0 0 auto; place-items: center; }
+.icon { width: 18px; height: 18px; margin-top: 1px; }
+.icon svg { display: block; }
+.copy { flex: 1; min-width: 0; }
+.content { position: relative; }
+.title { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; }
+.line { display: block; }
+.description { position: relative; margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
+.info .icon { color: var(--accent); } .success .icon { color: var(--success); } .warning .icon { color: var(--warning); } .danger .icon { color: var(--danger); }
+.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: -5px -6px -5px 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.dismiss:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .dismiss:hover { background: var(--surface-muted); color: var(--foreground); } }
+@media (prefers-reduced-motion: reduce) { .dismiss { transition: none; } .dismiss:active { transform: none; } }

package/components/animated-counter/animated-counter.d.ts

@@ -0,0 +1,13 @@
+export interface AnimatedCounterProps {
+    value: number;
+    label?: string;
+    prefix?: string;
+    suffix?: string;
+    decimals?: number;
+    /** Roll every digit up from zero the first time the counter scrolls into view. */
+    animateOnView?: boolean;
+    /** Formatting locale. Fixed by default so server and client render the same digits. */
+    locale?: string;
+}
+export declare function AnimatedCounter({ value, label, prefix, suffix, decimals, animateOnView, locale }: AnimatedCounterProps): import("react").JSX.Element;
+export default AnimatedCounter;

package/components/animated-counter/animated-counter.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./animated-counter.module.css";
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const rise = { hidden: { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } } };
+const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered };
+/** Split a formatted number into columns keyed by place value, so 999 → 1,000 keeps the ones column the ones column. */
+function partsFor(value, decimals, locale) {
+    const parts = new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, numberingSystem: "latn" }).formatToParts(value);
+    let place = parts.reduce((count, part) => count + (part.type === "integer" ? part.value.length : 0), 0);
+    let fraction = 0;
+    let order = 0;
+    return parts.flatMap((part, index) => {
+        if (part.type === "integer")
+            return [...part.value].map(char => ({ key: `i${--place}`, digit: Number(char), order: order++ }));
+        if (part.type === "fraction")
+            return [...part.value].map(char => ({ key: `f${fraction++}`, digit: Number(char), order: order++ }));
+        return [{ key: part.type === "group" ? `g${place}` : part.type === "decimal" ? "d" : `${part.type}${index}`, text: part.value }];
+    });
+}
+/** One digit on the wheel. Its offset from the wheel position decides where it sits and how visible it is. */
+function Glyph({ position, digit }) {
+    const offset = useTransform(position, current => ((((digit - current) % 10) + 15) % 10) - 5);
+    const y = useTransform(offset, current => `${current}em`);
+    const opacity = useTransform(offset, current => Math.max(0, 1 - Math.abs(current)));
+    const visibility = useTransform(offset, current => Math.abs(current) >= 1 ? "hidden" : "visible");
+    const filter = useTransform(offset, current => Math.abs(current) < .02 || Math.abs(current) >= 1 ? "none" : `blur(${(Math.abs(current) * motionTokens.blur.subtle).toFixed(2)}px)`);
+    return _jsx(motion.span, { className: styles.glyph, style: { y, opacity, filter, visibility }, children: digit });
+}
+const presence = { initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 } };
+/** A digit wheel. It always turns in the direction the whole number moved, wrapping 9 → 0 like an odometer. */
+function Column({ digit, direction, armed, delay, reduceMotion }) {
+    const position = useMotionValue(armed ? 0 : digit);
+    const wheel = useRef({ digit: armed ? 0 : digit, target: armed ? 0 : digit, revealed: !armed });
+    useEffect(() => {
+        const state = wheel.current;
+        if (armed || state.digit === digit) {
+            if (!armed)
+                state.revealed = true;
+            return;
+        }
+        state.target += direction < 0 && state.revealed ? -((state.digit - digit + 10) % 10) : (digit - state.digit + 10) % 10;
+        state.digit = digit;
+        if (reduceMotion)
+            position.jump(state.target);
+        else
+            animate(position, state.target, state.revealed ? motionTokens.spring.smooth : { ...reveal, delay });
+        state.revealed = true;
+    }, [armed, delay, digit, direction, position, reduceMotion]);
+    return _jsxs(motion.span, { className: styles.column, ...presence, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.morph, children: [_jsx("span", { className: styles.sizer, children: "0" }), DIGITS.map(item => _jsx(Glyph, { position: position, digit: item }, item))] });
+}
+export function AnimatedCounter({ value, label, prefix = "", suffix = "", decimals = 0, animateOnView = false, locale = "en-US" }) {
+    const ref = useRef(null);
+    const inView = useInView(ref, { once: true, amount: .6 });
+    const reduceMotion = !!useReducedMotion();
+    const [previous, setPrevious] = useState(value);
+    const [direction, setDirection] = useState(1);
+    if (value !== previous) {
+        setPrevious(value);
+        setDirection(value > previous ? 1 : -1);
+    }
+    const parts = partsFor(value, decimals, locale);
+    const text = `${prefix}${parts.map(part => "text" in part ? part.text : part.digit).join("")}${suffix}`;
+    const armed = animateOnView && !inView;
+    return _jsxs("span", { ref: ref, className: styles.counter, children: [label && _jsx("span", { className: styles.label, children: _jsx("span", { className: styles.labelSwap, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.labelText, variants: reduceMotion ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", children: label }, label) }) }) }), _jsx("span", { className: styles.srOnly, children: text }), _jsxs("span", { className: styles.value, "aria-hidden": "true", children: [prefix && _jsx("span", { className: styles.symbol, children: prefix }), _jsx(AnimatePresence, { initial: false, children: parts.map(part => "digit" in part
+                            ? _jsx(Column, { digit: part.digit, direction: direction, armed: armed, delay: Math.min(part.order * motionTokens.stagger.item, .25), reduceMotion: reduceMotion }, part.key)
+                            : _jsx(motion.span, { className: styles.symbol, ...presence, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.morph, children: part.text }, part.key)) }), suffix && _jsx("span", { className: styles.symbol, children: suffix })] })] });
+}
+export default AnimatedCounter;

package/components/animated-counter/animated-counter.module.css

@@ -0,0 +1,12 @@
+.counter { position: relative; display: inline-flex; flex-direction: column; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
+.label { margin-bottom: var(--space-related); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+/* Each digit is a clipped wheel; separators clip sideways only so a comma keeps its tail. */
+.value { display: inline-flex; align-items: flex-start; white-space: nowrap; user-select: none; }
+/* The wheel's window reaches a little past the line box and feathers out, so a turning digit fades at the edge instead of being cut. */
+.column { --feather: .16em; position: relative; display: inline-block; overflow: hidden; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); }
+.sizer { visibility: hidden; }
+.glyph { position: absolute; inset: var(--feather) 0; text-align: center; }
+.labelText { display: inline-block; }
+.labelSwap { position: relative; display: block; }
+.symbol { display: inline-block; overflow-x: clip; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/announcement-bar/announcement-bar.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+export interface AnnouncementAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface Announcement {
+    /** Stable id, reported to callbacks. */
+    id: string;
+    message: ReactNode;
+    action?: AnnouncementAction;
+    /** Counts down to a moment, for example the end of a sale. */
+    countdown?: {
+        to: Date | string | number;
+        label?: string;
+    };
+}
+/**
+ * A slim bar for the top of a page. It can rotate several messages, each rising in from below while the bar springs to
+ * the new height; rotation pauses on hover, focus, or a hidden tab, and `controls` adds previous, next, and a pause ring. Messages can carry a
+ * call to action and a live countdown. Dismissing collapses the height smoothly so the page below eases up, and with an
+ * `id` the dismissal is remembered in `localStorage`.
+ */
+export interface AnnouncementBarProps {
+    messages: Announcement[];
+    /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */
+    id?: string;
+    /** Whether the bar is shown. Leave it out to let the component manage it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Index of the visible message. */
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Milliseconds each message stays before the next one. Defaults to 6000. */
+    interval?: number;
+    /** Rotate automatically. Pauses on hover, focus, or a hidden tab, and is turned off when the visitor prefers reduced motion. Defaults to true. */
+    autoPlay?: boolean;
+    /** Show previous, next, and pause controls when there are several messages. Defaults to false: only the close button shows. */
+    controls?: boolean;
+    dismissible?: boolean;
+    tone?: "neutral" | "inverted";
+    onAction?: (announcement: Announcement) => void;
+    onCountdownEnd?: (announcement: Announcement) => void;
+    /** Accessible name of the region. */
+    label?: string;
+    className?: string;
+}
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+export declare function clearAnnouncementDismissal(id: string): void;
+export declare const AnnouncementBar: import("react").ForwardRefExoticComponent<AnnouncementBarProps & import("react").RefAttributes<HTMLElement>>;
+export default AnnouncementBar;

package/components/announcement-bar/announcement-bar.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { ArrowRight, ChevronDown, ChevronUp, Pause, Play, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./announcement-bar.module.css";
+const storageKey = (id) => `silicon-announcement:${id}`;
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+export function clearAnnouncementDismissal(id) {
+    try {
+        window.localStorage.removeItem(storageKey(id));
+    }
+    catch { /* Storage can be blocked. */ }
+}
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const RISE = physical(.46, .1), HEIGHT = physical(.42, 0), COLLAPSE = physical(.44, 0);
+/** Next rises from below and leaves upward; previous runs the other way. */
+const faceVariants = {
+    hidden: (direction) => ({ opacity: 0, y: `${direction * 70}%`, filter: `blur(${motionTokens.blur.soft}px)` }),
+    shown: { opacity: 1, y: "0%", filter: "blur(0px)", transition: { y: RISE, opacity: { duration: motionTokens.duration.standard, ease: enter }, filter: { duration: motionTokens.duration.standard, ease: enter } } },
+    gone: (direction) => ({ opacity: 0, y: `${direction * -60}%`, filter: `blur(${motionTokens.blur.soft}px)`, transition: { y: RISE, opacity: { duration: motionTokens.duration.fast, ease: standard }, filter: { duration: motionTokens.duration.fast, ease: standard } } }),
+};
+const fadeVariants = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.standard, ease: standard } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } } };
+function parts(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    return { d: Math.floor(total / 86400), h: Math.floor(total % 86400 / 3600), m: Math.floor(total % 3600 / 60), s: total % 60 };
+}
+const pad = (value) => String(value).padStart(2, "0");
+/**
+ * One character cell. A changed digit drops in from above while the old one falls away, like a counter winding down.
+ * The invisible sizer keeps the cell in the text flow, so it shares the baseline of the words around it.
+ */
+function Digit({ char, reduced }) {
+    return _jsxs("span", { className: styles.digit, children: [_jsx("span", { className: styles.digitSizer, "aria-hidden": "true", children: "0" }), _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.digitFace, initial: reduced ? { opacity: 0 } : { y: "-70%", opacity: 0 }, animate: { y: "0%", opacity: 1 }, exit: reduced ? { opacity: 0 } : { y: "70%", opacity: 0 }, transition: reduced ? { duration: motionTokens.duration.instant } : { y: physical(.32, .08), opacity: { duration: motionTokens.duration.fast, ease: standard } }, children: char }, char) })] });
+}
+function Countdown({ to, label, reduced, onEnd }) {
+    const target = new Date(to).getTime();
+    const [now, setNow] = useState(null);
+    const ended = useRef(false);
+    const endRef = useRef(onEnd);
+    useEffect(() => { endRef.current = onEnd; }, [onEnd]);
+    useEffect(() => {
+        let timer = 0;
+        const tick = () => {
+            const current = Date.now();
+            setNow(current);
+            if (current >= target) {
+                if (!ended.current) {
+                    ended.current = true;
+                    endRef.current?.();
+                }
+                return;
+            }
+            // Wake just after each whole second so digits change on the beat.
+            timer = window.setTimeout(tick, 1000 - (current % 1000) + 8);
+        };
+        timer = window.setTimeout(tick, 0);
+        return () => window.clearTimeout(timer);
+    }, [target]);
+    const { d, h, m, s } = parts(now === null ? 0 : target - now);
+    const pending = now === null;
+    const spoken = pending ? "" : `${d ? `${d} days ` : ""}${h} hours ${m} minutes`;
+    const digits = (value, key) => value.split("").map((char, index) => _jsx(Digit, { char: pending ? "0" : char, reduced: reduced }, `${key}${value.length - index}`));
+    return _jsxs("span", { className: styles.countdown, children: [label ? _jsx("span", { className: styles.countdownLabel, children: label }) : null, _jsxs("span", { role: "timer", "aria-live": "off", "aria-label": spoken, className: styles.time, "data-pending": pending || undefined, children: [d ? _jsxs(_Fragment, { children: [_jsxs("span", { className: styles.unit, children: [digits(String(d), "d"), _jsx("span", { className: styles.unitMark, "aria-hidden": "true", children: "d" })] }), _jsx("span", { className: styles.gap, "aria-hidden": "true" })] }) : null, digits(pad(h), "h"), _jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }), digits(pad(m), "m"), _jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }), digits(pad(s), "s")] })] });
+}
+function Face({ announcement, direction, reduced, position, total, onSize, onAction, onCountdownEnd }) {
+    const ref = useRef(null);
+    const present = useIsPresent();
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !present)
+            return;
+        const report = () => onSize(node.offsetHeight);
+        report();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(report);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [onSize, present]);
+    const { action, countdown } = announcement;
+    const cta = action ? action.href
+        ? _jsxs("a", { className: styles.cta, href: action.href, onClick: () => { action.onClick?.(); onAction?.(announcement); }, children: [action.label, _jsx(ArrowRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] })
+        : _jsxs("button", { type: "button", className: styles.cta, onClick: () => { action.onClick?.(); onAction?.(announcement); }, children: [action.label, _jsx(ArrowRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }) : null;
+    return _jsx(motion.div, { ref: ref, className: styles.face, custom: direction, variants: reduced ? fadeVariants : faceVariants, initial: "hidden", animate: "shown", exit: "gone", role: total > 1 ? "group" : undefined, "aria-roledescription": total > 1 ? "slide" : undefined, "aria-label": total > 1 ? `${position} of ${total}` : undefined, inert: !present || undefined, children: _jsxs("p", { className: styles.message, children: [_jsx("span", { className: styles.text, children: announcement.message }), countdown ? _jsx(Countdown, { to: countdown.to, label: countdown.label, reduced: reduced, onEnd: () => onCountdownEnd?.(announcement) }) : null, cta] }) });
+}
+const RING = 2 * Math.PI * 8;
+export const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open: openProp, defaultOpen = true, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, interval = 6000, autoPlay = true, controls = false, dismissible = true, tone = "neutral", onAction, onCountdownEnd, label = "Announcements", className, }, ref) {
+    const reduced = !!useReducedMotion();
+    const uid = useId();
+    const total = messages.length;
+    /* Open state: controlled, or internal and hidden at once when this id was dismissed before. */
+    const [openInternal, setOpenInternal] = useState(defaultOpen);
+    const [remembered, setRemembered] = useState(false);
+    useLayoutEffect(() => {
+        if (!id || openProp !== undefined)
+            return;
+        let stored = false;
+        try {
+            stored = window.localStorage.getItem(storageKey(id)) === "dismissed";
+        }
+        catch { /* Storage can be blocked. */ }
+        // Storage is only readable on the client; hide before paint so a dismissed bar never flashes.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (stored)
+            setRemembered(true);
+    }, [id, openProp]);
+    const open = openProp ?? (openInternal && !remembered);
+    const dismiss = () => {
+        if (id) {
+            try {
+                window.localStorage.setItem(storageKey(id), "dismissed");
+            }
+            catch { /* Storage can be blocked. */ }
+        }
+        if (openProp === undefined)
+            setOpenInternal(false);
+        onOpenChange?.(false);
+    };
+    /* Rotation. */
+    const [indexInternal, setIndexInternal] = useState(defaultIndex);
+    const current = total ? ((indexProp ?? indexInternal) % total + total) % total : 0;
+    const [direction, setDirection] = useState(1);
+    const go = useCallback((step) => {
+        if (total < 2)
+            return;
+        const next = ((current + step) % total + total) % total;
+        setDirection(step > 0 ? 1 : -1);
+        if (indexProp === undefined)
+            setIndexInternal(next);
+        onIndexChange?.(next);
+    }, [current, indexProp, onIndexChange, total]);
+    const [userPaused, setUserPaused] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    useEffect(() => {
+        const read = () => setHidden(document.visibilityState === "hidden");
+        document.addEventListener("visibilitychange", read);
+        return () => document.removeEventListener("visibilitychange", read);
+    }, []);
+    const rotating = autoPlay && !reduced && total > 1;
+    const running = rotating && open && !userPaused && !hovered && !focused && !hidden;
+    /* The ring is the clock: its progress runs to one, then advances. Pausing stops it where it is; resuming finishes the rest. */
+    const progress = useMotionValue(0);
+    const dash = useTransform(progress, value => RING * (1 - value));
+    const goRef = useRef(go);
+    useEffect(() => { goRef.current = go; }, [go]);
+    useEffect(() => { progress.jump(0); }, [current, progress]);
+    useEffect(() => {
+        if (!running)
+            return;
+        let controls = animate(progress, 1, {
+            duration: interval / 1000 * (1 - progress.get()), ease: "linear",
+            onComplete: () => { controls = null; goRef.current(1); },
+        });
+        return () => controls?.stop();
+    }, [running, current, interval, progress]);
+    /* The viewport springs to the height of the current message, which can wrap on narrow screens. */
+    const height = useMotionValue("auto");
+    const measured = useRef(0);
+    const onSize = useCallback((next) => {
+        if (Math.abs(next - measured.current) < .5)
+            return;
+        const first = measured.current === 0;
+        measured.current = next;
+        if (first || reduced)
+            height.jump(next);
+        else
+            animate(height, next, HEIGHT);
+    }, [height, reduced]);
+    const announcement = messages[current];
+    if (!announcement)
+        return null;
+    const navigable = controls && total > 1;
+    const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);
+    return _jsx(AnimatePresence, { initial: false, children: open ? _jsx(motion.section, { ref: ref, className: [styles.collapse, className].filter(Boolean).join(" "), "aria-label": label, "aria-roledescription": total > 1 ? "carousel" : undefined, initial: reduced ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.fast } } : { height: 0, opacity: 0, transition: { height: COLLAPSE, opacity: { duration: motionTokens.duration.exit, ease: standard } } }, transition: reduced ? { duration: motionTokens.duration.fast } : { height: COLLAPSE, opacity: { duration: motionTokens.duration.standard, ease: enter } }, onPointerEnter: event => { if (event.pointerType === "mouse")
+                setHovered(true); }, onPointerLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                setFocused(false); }, children: _jsxs("div", { className: styles.bar, "data-tone": tone, style: { "--controls": controlCount }, children: [_jsx("div", { className: styles.side, "aria-hidden": "true" }), _jsx(motion.div, { className: styles.viewport, style: { height }, id: `${uid}-slides`, "aria-live": running ? "off" : "polite", "aria-atomic": "false", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(Face, { announcement: announcement, direction: direction, reduced: reduced, position: current + 1, total: total, onSize: onSize, onAction: onAction, onCountdownEnd: onCountdownEnd }, announcement.id) }) }), _jsxs("div", { className: styles.controls, children: [navigable ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.icon, "aria-label": "Previous announcement", "aria-controls": `${uid}-slides`, onClick: () => go(-1), children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), rotating ? _jsxs("button", { type: "button", className: styles.ring, "aria-label": userPaused ? "Resume announcements" : "Pause announcements", "aria-pressed": userPaused, onClick: () => setUserPaused(paused => !paused), children: [_jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "8", className: styles.ringTrack }), _jsx(motion.circle, { cx: "10", cy: "10", r: "8", className: styles.ringFill, strokeDasharray: RING, style: { strokeDashoffset: dash } })] }), _jsx("span", { className: styles.ringIcon, children: userPaused ? _jsx(Play, { size: 9, strokeWidth: 2.4, "aria-hidden": "true" }) : _jsx(Pause, { size: 9, strokeWidth: 2.4, "aria-hidden": "true" }) })] }) : null, _jsx("button", { type: "button", className: styles.icon, "aria-label": "Next announcement", "aria-controls": `${uid}-slides`, onClick: () => go(1), children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }) : null, dismissible ? _jsx("button", { type: "button", className: styles.icon, "aria-label": "Dismiss", onClick: dismiss, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) : null] })] }) }, "bar") : null });
+});
+export default AnnouncementBar;

package/components/announcement-bar/announcement-bar.module.css

@@ -0,0 +1,60 @@
+/* The outer section animates its height to zero on dismiss, so whatever sits below eases up with it. */
+.collapse { overflow: hidden; container-type: inline-size; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+
+/* The side column mirrors the controls, so the message stays centered on the page rather than in the leftover space. */
+.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
+.bar[data-tone="inverted"] { --muted: color-mix(in oklab, var(--background) 66%, transparent); border-bottom-color: transparent; background: var(--foreground); color: var(--background); }
+
+.side { min-width: 0; }
+.viewport { position: relative; min-height: 32px; overflow: hidden; }
+
+/* Faces overlap in place; the entering one reports its height and the viewport springs to it. */
+.face { position: absolute; top: 0; right: 0; left: 0; display: flex; min-height: 32px; align-items: center; justify-content: center; }
+.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; padding: 6px 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
+.text { min-width: 0; }
+
+/* The countdown is one run of text: every cell shares the line box, so digits, colons, and the day mark sit on the message baseline. */
+.countdown { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); white-space: nowrap; }
+.countdownLabel { color: inherit; }
+.time { display: inline-flex; align-items: baseline; color: var(--foreground); font-variant-numeric: tabular-nums; font-weight: 500; line-height: inherit; }
+.time[data-pending] { opacity: 0; }
+.bar[data-tone="inverted"] .time { color: var(--background); }
+.digit { position: relative; display: inline-block; overflow: hidden; overflow: clip; text-align: center; }
+.digitSizer { visibility: hidden; }
+.digitFace { position: absolute; inset: 0; display: block; }
+.unit { display: inline-flex; align-items: baseline; }
+.unitMark { margin-left: 1px; color: var(--muted); font-weight: 400; }
+/* "case" lifts the colon to the middle of the figures, which it loses once the digits are split into cells. */
+.sep { display: inline-block; padding-inline: 1px; color: var(--muted); font-feature-settings: "case"; font-weight: 400; }
+.gap { display: inline-block; width: .4em; }
+
+.cta { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
+.cta svg { transition: transform var(--duration-fast) var(--ease-standard); }
+
+.controls { display: flex; align-items: center; gap: var(--control-gap); }
+.icon, .ring { position: relative; display: grid; width: var(--icon); height: var(--icon); flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.icon:active, .ring:active { background: color-mix(in oklab, currentColor 12%, transparent); color: inherit; }
+.ring svg { width: 20px; height: 20px; overflow: visible; transform: rotate(-90deg); }
+.ringTrack { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 1.75; }
+.ringFill { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.75; }
+.ringIcon { position: absolute; inset: 0; display: grid; place-items: center; }
+.ringIcon svg { width: 9px; height: 9px; transform: none; fill: currentColor; }
+.bar[data-tone="inverted"] .icon, .bar[data-tone="inverted"] .ring { color: var(--muted); }
+
+@media (hover: hover) and (pointer: fine) {
+  .icon:hover, .ring:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
+  .bar .icon:hover, .bar .ring:hover { color: var(--foreground); }
+  .bar[data-tone="inverted"] .icon:hover, .bar[data-tone="inverted"] .ring:hover { color: var(--background); }
+  .cta:hover svg { transform: translateX(2px); }
+}
+
+/* Narrow bars drop the mirror column and read from the start edge. */
+@container (max-width: 560px) {
+  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: 14px; }
+  .face { justify-content: flex-start; }
+  .message { justify-content: flex-start; column-gap: 10px; text-align: left; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon, .ring, .cta svg { transition: none; }
+}

package/components/avatar/avatar.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "react";
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    status?: "online" | "offline";
+}
+export declare function Avatar({ name, src, size, status, className, ...props }: AvatarProps): import("react").JSX.Element;