@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/mention-input/mention-input.js

@@ -0,0 +1,417 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Hash } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./mention-input.module.css";
+const EMPTY = { text: "", mentions: [] };
+const SYMBOL = { person: "@", channel: "#" };
+const POPOVER_WIDTH = 272;
+const { spring, duration, ease } = motionTokens;
+const enter = [...ease.enter];
+const standard = [...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 GLIDE = physical(.3, .1), GROW = physical(spring.smooth.visualDuration, 0);
+/** First placements. A jump made in the commit that mounts its element never reaches the DOM; an instant animation lands on the first frame. */
+const INSTANT = { duration: 0 };
+export const mentionText = (kind, label) => `${SYMBOL[kind]}${label}`;
+/** Turns a value into storage friendly text, `<@id>` for people and `<#id>` for channels by default. */
+export function serializeMentions(value, format = mention => `<${SYMBOL[mention.kind]}${mention.id}>`) {
+    let out = "", at = 0;
+    for (const mention of [...value.mentions].sort((a, b) => a.start - b.start)) {
+        out += value.text.slice(at, mention.start) + format(mention);
+        at = mention.end;
+    }
+    return out + value.text.slice(at);
+}
+/** Moves mentions along with an edit and drops any the edit touched. `hint` is the caret before the edit, which settles repeated characters. */
+function reconcile(previous, text, hint) {
+    const a = previous.text;
+    let prefix = 0;
+    const maxPrefix = Math.min(a.length, text.length, Math.max(0, hint));
+    while (prefix < maxPrefix && a[prefix] === text[prefix])
+        prefix++;
+    let suffix = 0;
+    while (suffix < a.length - prefix && suffix < text.length - prefix && a[a.length - 1 - suffix] === text[text.length - 1 - suffix])
+        suffix++;
+    const oldEnd = a.length - suffix, delta = text.length - a.length;
+    return previous.mentions.flatMap(mention => {
+        if (mention.end <= prefix)
+            return [mention];
+        if (mention.start >= oldEnd)
+            return [{ ...mention, start: mention.start + delta, end: mention.end + delta }];
+        return [];
+    }).filter(mention => text.slice(mention.start, mention.end) === mentionText(mention.kind, mention.label));
+}
+function findTrigger(text, caret, mentions, kinds) {
+    for (let index = caret - 1; index >= 0 && index >= caret - 48; index--) {
+        const char = text[index];
+        if (char === "\n")
+            return null;
+        if (char !== "@" && char !== "#")
+            continue;
+        const kind = char === "@" ? "person" : "channel";
+        if (!kinds[kind])
+            return null;
+        if (index > 0 && !/[\s([{"']/.test(text[index - 1]))
+            return null;
+        if (mentions.some(mention => index >= mention.start && index < mention.end))
+            return null;
+        const query = text.slice(index + 1, caret);
+        const shape = kind === "person" ? /^[^\s@#]*( [^\s@#]*)?$/ : /^[^\s@#]*$/;
+        return shape.test(query) ? { kind, start: index, query } : null;
+    }
+    return null;
+}
+function rank(label, extra, query) {
+    const name = label.toLowerCase();
+    if (!query)
+        return 1;
+    if (name.startsWith(query))
+        return 4;
+    if (name.split(/[\s\-_.]+/).some(word => word.startsWith(query)))
+        return 3;
+    if (name.includes(query))
+        return 2;
+    return extra.toLowerCase().includes(query) ? 1 : 0;
+}
+function initials(name) {
+    return name.split(/\s+/).filter(Boolean).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+}
+/** The matched part of a label reads in full contrast; the rest stays quiet. */
+function Highlight({ text, query }) {
+    const at = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
+    if (at < 0)
+        return _jsx(_Fragment, { children: text });
+    return _jsxs(_Fragment, { children: [text.slice(0, at), _jsx("mark", { className: styles.match, children: text.slice(at, at + query.length) }), text.slice(at + query.length)] });
+}
+/**
+ * A textarea with `@` people and `#` channel mentions. Mentions are atomic: the caret steps over them and one Backspace removes the whole token.
+ * The value carries plain text plus a structured `mentions` array with offsets, ready to store or notify.
+ */
+export const MentionInput = forwardRef(function MentionInput({ value: valueProp, defaultValue, onChange, people, channels, onMentionAdd, onSubmit, submitOnEnter = false, placeholder, minRows = 1, maxRows = 8, placement = "auto", maxSuggestions = 6, disabled, name, id, "aria-label": ariaLabel, "aria-describedby": describedBy, className, }, ref) {
+    const reduced = !!useReducedMotion();
+    const uid = useId();
+    const listId = `${uid}-list`;
+    const [inner, setInner] = useState(defaultValue ?? EMPTY);
+    const value = valueProp ?? inner;
+    const live = useRef(value);
+    useLayoutEffect(() => { live.current = value; });
+    const rootRef = useRef(null);
+    const fieldRef = useRef(null);
+    const areaRef = useRef(null);
+    const backdropRef = useRef(null);
+    const lastCaret = useRef(0);
+    const pending = useRef(null);
+    const [caret, setCaret] = useState(null);
+    const [focused, setFocused] = useState(false);
+    const [dismissed, setDismissed] = useState(null);
+    const [active, setActive] = useState(0);
+    const commit = useCallback((next) => {
+        if (valueProp === undefined)
+            setInner(next);
+        onChange?.(next);
+    }, [onChange, valueProp]);
+    const kinds = useMemo(() => ({ person: !!people?.length, channel: !!channels?.length }), [channels, people]);
+    const trigger = useMemo(() => caret === null ? null : findTrigger(value.text, caret, value.mentions, kinds), [caret, kinds, value.mentions, value.text]);
+    const suggestions = useMemo(() => {
+        if (!trigger)
+            return [];
+        const query = trigger.query.toLowerCase().trim();
+        const scored = trigger.kind === "person"
+            ? (people ?? []).map(item => ({ entry: { kind: "person", item }, score: rank(item.name, item.role ?? "", query) }))
+            : (channels ?? []).map(item => ({ entry: { kind: "channel", item }, score: rank(item.name, item.description ?? "", query) }));
+        return scored.filter(entry => entry.score > 0).sort((a, b) => b.score - a.score).slice(0, maxSuggestions).map(entry => entry.entry);
+    }, [channels, maxSuggestions, people, trigger]);
+    // A sentence that simply continues after an unmatched name closes the list instead of showing an empty state.
+    const open = focused && !disabled && !!trigger && trigger.start !== dismissed && (suggestions.length > 0 || !trigger.query.includes(" "));
+    const activeIndex = Math.min(active, Math.max(0, suggestions.length - 1));
+    const queryKey = trigger ? `${trigger.start}:${trigger.query}` : "";
+    const [lastQueryKey, setLastQueryKey] = useState(queryKey);
+    if (lastQueryKey !== queryKey) {
+        setLastQueryKey(queryKey);
+        setActive(0);
+    }
+    if (dismissed !== null && trigger?.start !== dismissed)
+        setDismissed(null);
+    /* Selection: the caret never rests inside a token. Arrow keys hop over it; a click lands on the nearest edge. */
+    const onSelect = () => {
+        const area = areaRef.current;
+        if (!area)
+            return;
+        let start = area.selectionStart, end = area.selectionEnd;
+        const collapsed = start === end;
+        for (const mention of live.current.mentions) {
+            if (collapsed && start > mention.start && start < mention.end) {
+                const stepped = Math.abs(start - lastCaret.current) === 1;
+                const forward = start > lastCaret.current;
+                start = end = stepped ? (forward ? mention.end : mention.start) : (start - mention.start < mention.end - start ? mention.start : mention.end);
+            }
+            else if (!collapsed) {
+                if (start > mention.start && start < mention.end)
+                    start = mention.start;
+                if (end > mention.start && end < mention.end)
+                    end = mention.end;
+            }
+        }
+        if (start !== area.selectionStart || end !== area.selectionEnd)
+            area.setSelectionRange(start, end, area.selectionDirection);
+        lastCaret.current = area.selectionStart;
+        setCaret(collapsed ? start : null);
+    };
+    const onInput = (event) => {
+        const text = event.target.value;
+        const mentions = reconcile(live.current, text, lastCaret.current);
+        const added = pending.current;
+        pending.current = null;
+        if (added && text.slice(added.start, added.end) === mentionText(added.kind, added.label)) {
+            mentions.push(added);
+            mentions.sort((a, b) => a.start - b.start);
+        }
+        const next = { text, mentions };
+        live.current = next;
+        commit(next);
+        if (added)
+            onMentionAdd?.(added);
+        lastCaret.current = event.target.selectionStart;
+        setCaret(event.target.selectionStart === event.target.selectionEnd ? event.target.selectionStart : null);
+    };
+    /** Types through the browser so the change joins the native undo stack; falls back to a direct edit. */
+    const typeText = useCallback((text, from, to) => {
+        const area = areaRef.current;
+        if (!area)
+            return;
+        area.focus({ preventScroll: true });
+        if (from !== undefined)
+            area.setSelectionRange(from, to ?? from);
+        lastCaret.current = area.selectionStart;
+        const typed = typeof document.execCommand === "function" && document.execCommand("insertText", false, text);
+        if (typed)
+            return;
+        const start = area.selectionStart, end = area.selectionEnd, current = live.current;
+        const nextText = current.text.slice(0, start) + text + current.text.slice(end);
+        const mentions = reconcile(current, nextText, start);
+        const added = pending.current;
+        pending.current = null;
+        if (added)
+            mentions.push(added);
+        mentions.sort((a, b) => a.start - b.start);
+        const next = { text: nextText, mentions };
+        live.current = next;
+        commit(next);
+        if (added)
+            onMentionAdd?.(added);
+        requestAnimationFrame(() => { area.setSelectionRange(start + text.length, start + text.length); setCaret(start + text.length); });
+    }, [commit, onMentionAdd]);
+    const choose = (suggestion) => {
+        if (!suggestion || !trigger || caret === null)
+            return;
+        const label = suggestion.item.name;
+        const token = mentionText(suggestion.kind, label);
+        pending.current = { kind: suggestion.kind, id: suggestion.item.id, label, start: trigger.start, end: trigger.start + token.length };
+        const after = value.text[caret];
+        typeText(after === undefined || !/\s/.test(after) ? `${token} ` : token, trigger.start, caret);
+    };
+    const onKeyDown = (event) => {
+        const area = event.currentTarget;
+        lastCaret.current = area.selectionStart;
+        if (open) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                if (suggestions.length)
+                    setActive((activeIndex + (event.key === "ArrowDown" ? 1 : -1) + suggestions.length) % suggestions.length);
+                return;
+            }
+            if ((event.key === "Enter" || event.key === "Tab") && suggestions.length && !event.shiftKey) {
+                event.preventDefault();
+                choose(suggestions[activeIndex]);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                setDismissed(trigger?.start ?? null);
+                return;
+            }
+        }
+        const start = area.selectionStart, end = area.selectionEnd;
+        if (start === end && !event.metaKey && (event.key === "Backspace" || event.key === "Delete")) {
+            // Select the whole token and let the native delete run, so one keystroke removes it and undo restores it.
+            const hit = live.current.mentions.find(mention => event.key === "Backspace" ? start > mention.start && start <= mention.end : start >= mention.start && start < mention.end);
+            if (hit)
+                area.setSelectionRange(hit.start, hit.end);
+            return;
+        }
+        if (event.key === "Enter" && submitOnEnter && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            if (live.current.text.trim())
+                onSubmit?.(live.current);
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        focus: () => areaRef.current?.focus(),
+        insert: text => typeText(text),
+        openSuggestions: kind => {
+            const area = areaRef.current;
+            if (!area)
+                return;
+            const at = document.activeElement === area ? area.selectionStart : live.current.text.length;
+            const before = live.current.text[at - 1];
+            setDismissed(null);
+            typeText(`${before && !/\s/.test(before) ? " " : ""}${SYMBOL[kind]}`, at, document.activeElement === area ? area.selectionEnd : at);
+        },
+        clear: () => {
+            commit(EMPTY);
+            live.current = EMPTY;
+            setCaret(0);
+        },
+        get textarea() { return areaRef.current; },
+    }), [commit, typeText]);
+    /* Autosize: the backdrop mirrors the text, so its height is the content height. The field springs to it within the row limits. */
+    const height = useMotionValue("auto");
+    const [limits, setLimits] = useState({ min: 0, max: Infinity });
+    const measured = useRef(false);
+    useLayoutEffect(() => {
+        const backdrop = backdropRef.current;
+        if (!backdrop)
+            return;
+        const style = getComputedStyle(backdrop);
+        const line = parseFloat(style.lineHeight) || 24;
+        const pad = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+        const next = { min: line * minRows + pad, max: line * Math.max(minRows, maxRows) + pad };
+        setLimits(current => current.min === next.min && current.max === next.max ? current : next);
+    }, [maxRows, minRows]);
+    useLayoutEffect(() => {
+        const backdrop = backdropRef.current;
+        if (!backdrop || !limits.min)
+            return;
+        const fit = () => {
+            const target = Math.min(limits.max, Math.max(limits.min, backdrop.offsetHeight));
+            const current = height.get();
+            if (!measured.current || reduced || typeof current !== "number") {
+                animate(height, target, INSTANT);
+                measured.current = true;
+                return;
+            }
+            if (Math.abs(current - target) > .5)
+                animate(height, target, GROW);
+        };
+        fit();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(backdrop);
+        return () => observer.disconnect();
+    }, [height, limits, reduced]);
+    /* The popover hangs from the trigger character, measured from a marker in the mirrored text. */
+    const [anchor, setAnchor] = useState(null);
+    const measureAnchor = useCallback(() => {
+        const marker = backdropRef.current?.querySelector("[data-anchor]");
+        const root = rootRef.current, field = fieldRef.current, area = areaRef.current;
+        if (!marker || !root || !field || !area) {
+            setAnchor(null);
+            return;
+        }
+        const line = parseFloat(getComputedStyle(marker.parentElement ?? marker).lineHeight) || 24;
+        const x = Math.max(0, Math.min(field.offsetLeft + marker.offsetLeft - 10, root.offsetWidth - POPOVER_WIDTH));
+        const top = field.offsetTop + marker.offsetTop - area.scrollTop;
+        const box = root.getBoundingClientRect();
+        const roomBelow = window.innerHeight - (box.top + top + line);
+        const above = placement === "top" || (placement === "auto" && roomBelow < 300 && box.top + top > roomBelow);
+        const y = above ? top - 6 : top + line + 6;
+        setAnchor(current => current && current.x === x && current.y === y && current.above === above && current.line === line ? current : { x, y, line, above });
+    }, [placement]);
+    useLayoutEffect(() => { if (open)
+        measureAnchor(); }, [measureAnchor, open, trigger?.start, value.text]);
+    // The popover mounts one commit after `open`, once the anchor is measured; the effects below wait for it.
+    const shown = open && !!anchor;
+    const onScroll = (event) => {
+        const backdrop = backdropRef.current;
+        if (backdrop)
+            backdrop.style.transform = `translateY(${-event.currentTarget.scrollTop}px)`;
+        measureAnchor();
+    };
+    /* The list's highlight glides between rows; the panel springs its height as matches come and go. */
+    const listRef = useRef(null);
+    const hy = useMotionValue(0), hh = useMotionValue(0);
+    const placed = useRef(false);
+    const panelHeight = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const row = listRef.current?.querySelector(`[data-index="${activeIndex}"]`);
+        if (!row)
+            return;
+        if (reduced || !placed.current) {
+            animate(hy, row.offsetTop, INSTANT);
+            animate(hh, row.offsetHeight, INSTANT);
+            placed.current = true;
+            return;
+        }
+        animate(hy, row.offsetTop, GLIDE);
+        animate(hh, row.offsetHeight, GLIDE);
+    }, [activeIndex, hh, hy, reduced, shown, suggestions]);
+    const bodyRef = useRef(null);
+    const panelSized = useRef(false);
+    useLayoutEffect(() => {
+        // The leaving list keeps its highlight while it fades; the next open places it fresh.
+        if (!shown) {
+            panelSized.current = false;
+            placed.current = false;
+            return;
+        }
+        const body = bodyRef.current;
+        if (!body)
+            return;
+        const fit = () => {
+            const target = body.offsetHeight;
+            if (!panelSized.current || reduced) {
+                animate(panelHeight, target, INSTANT);
+                panelSized.current = true;
+                return;
+            }
+            animate(panelHeight, target, GROW);
+        };
+        fit();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(body);
+        return () => observer.disconnect();
+    }, [panelHeight, reduced, shown, trigger?.start]);
+    /* Mirror: the same text as the textarea, with tokens drawn in place and a marker at the open trigger. */
+    const mirror = useMemo(() => {
+        const parts = [];
+        const markAt = open && trigger ? trigger.start : -1;
+        let at = 0;
+        const pushText = (from, to) => {
+            if (markAt >= from && markAt < to) {
+                parts.push(value.text.slice(from, markAt), _jsx("span", { "data-anchor": "" }, "anchor"), value.text.slice(markAt, to));
+            }
+            else
+                parts.push(value.text.slice(from, to));
+        };
+        for (const mention of value.mentions) {
+            pushText(at, mention.start);
+            parts.push(_jsx("span", { className: styles.token, "data-kind": mention.kind, children: value.text.slice(mention.start, mention.end) }, `${mention.start}-${mention.id}`));
+            at = mention.end;
+        }
+        pushText(at, value.text.length);
+        return parts;
+    }, [open, trigger, value.mentions, value.text]);
+    const optionId = (index) => `${uid}-option-${index}`;
+    const popIn = reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: anchor?.above ? 4 : -4 };
+    const countLabel = open ? (suggestions.length ? `${suggestions.length} ${trigger?.kind === "person" ? (suggestions.length === 1 ? "person" : "people") : (suggestions.length === 1 ? "channel" : "channels")}` : "No matches") : "";
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsxs(motion.div, { ref: fieldRef, className: styles.field, style: { height }, "data-focused": focused || undefined, children: [_jsxs("div", { ref: backdropRef, className: styles.backdrop, "aria-hidden": "true", children: [mirror, "\u200b"] }), _jsx("textarea", { ref: areaRef, id: id, name: name, className: styles.textarea, value: value.text, placeholder: placeholder, disabled: disabled, rows: minRows, spellCheck: true, role: "combobox", "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : undefined, onChange: onInput, onSelect: onSelect, onKeyDown: onKeyDown, onScroll: onScroll, onFocus: () => setFocused(true), onBlur: () => { setFocused(false); setCaret(null); } })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: countLabel }), _jsx(AnimatePresence, { children: open && anchor && _jsx(motion.div, { className: styles.popover, "data-above": anchor.above || undefined, style: { left: anchor.x, top: anchor.y, height: panelHeight, transformOrigin: anchor.above ? "14px 100%" : "14px 0" }, initial: popIn, animate: { opacity: 1, scale: 1, y: 0, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } } }, exit: { ...popIn, transition: { duration: duration.exit * .7, ease: standard } }, onMouseDown: event => event.preventDefault(), children: _jsx("div", { ref: bodyRef, className: styles.popoverBody, children: suggestions.length ? _jsxs("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": trigger?.kind === "person" ? "People" : "Channels", className: styles.list, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.highlight, style: { y: hy, height: hh } }), suggestions.map((suggestion, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, "data-index": index, className: styles.option, onPointerMove: () => { if (index !== activeIndex)
+                                        setActive(index); }, onClick: () => choose(suggestion), children: [suggestion.kind === "person"
+                                            ? _jsx("span", { className: styles.avatar, "aria-hidden": "true", children: suggestion.item.avatar
+                                                    // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic
+                                                    ? _jsx("img", { src: suggestion.item.avatar, alt: "", width: 28, height: 28, loading: "lazy" })
+                                                    : initials(suggestion.item.name) })
+                                            : _jsx("span", { className: styles.glyph, "aria-hidden": "true", children: _jsx(Hash, { size: 16, strokeWidth: 1.75 }) }), _jsxs("span", { className: styles.optionText, children: [_jsx("span", { className: styles.optionLabel, children: _jsx(Highlight, { text: suggestion.item.name, query: trigger?.query.trim() ?? "" }) }), suggestion.kind === "person"
+                                                    ? suggestion.item.role && _jsx("span", { className: styles.optionMeta, children: suggestion.item.role })
+                                                    : suggestion.item.description && _jsx("span", { className: styles.optionMeta, children: suggestion.item.description })] }), suggestion.kind === "channel" && suggestion.item.members !== undefined && _jsx("span", { className: styles.count, children: suggestion.item.members })] }, `${suggestion.kind}-${suggestion.item.id}`))] }) : _jsxs("p", { className: styles.empty, children: ["No ", trigger?.kind === "person" ? "people" : "channels", " match \u201C", trigger?.query, "\u201D"] }) }) }, trigger?.start) })] });
+});
+export default MentionInput;

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

@@ -0,0 +1,134 @@
+.root {
+  position: relative;
+  width: 100%;
+  color: var(--foreground);
+  font-family: var(--font-body);
+  letter-spacing: var(--tracking-body);
+}
+.root[data-disabled] { opacity: .55; }
+
+/* The field's height springs to its text. The mirror and the textarea share every metric so tokens sit exactly under their characters. */
+.field {
+  position: relative;
+  box-sizing: content-box;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: var(--surface);
+  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.field[data-focused] { border-color: var(--border-strong); }
+
+.backdrop,
+.textarea {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 11px 14px;
+  border: 0;
+  font: inherit;
+  font-size: var(--text-base);
+  letter-spacing: var(--tracking-body);
+  line-height: 24px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+  tab-size: 4;
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--foreground);
+  pointer-events: none;
+  will-change: transform;
+}
+
+.textarea {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  display: block;
+  resize: none;
+  overflow-y: auto;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--foreground);
+  outline: none;
+  scrollbar-width: none;
+  -webkit-text-fill-color: transparent;
+}
+.textarea::-webkit-scrollbar { display: none; }
+.textarea::placeholder { color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); opacity: 1; }
+.textarea::selection { background: color-mix(in oklab, var(--accent) 24%, transparent); }
+.textarea:disabled { cursor: not-allowed; }
+
+/* A token is tinted around its own glyphs; the negative margin keeps every character where the textarea put it. */
+.token {
+  margin: 0 -3px;
+  padding: 1px 3px;
+  border-radius: var(--radius-detail); corner-shape: var(--corner-shape);
+  background: var(--accent-subtle);
+  color: var(--accent-strong);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.token[data-kind="channel"] { background: color-mix(in oklab, var(--foreground) 7%, transparent); color: var(--foreground); }
+
+.popover {
+  position: absolute;
+  z-index: 30;
+  width: 272px;
+  max-width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-floating);
+}
+.popover[data-above] { translate: 0 -100%; }
+.popoverBody { padding: 6px; }
+
+.list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
+
+.option {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px 7px 8px;
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.avatar {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 50%; corner-shape: round;
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.glyph { display: grid; width: 28px; height: 28px; flex: none; place-items: center; color: var(--text-secondary); }
+
+.optionText { display: grid; min-width: 0; flex: 1; }
+.optionLabel { overflow: hidden; color: var(--text-secondary); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.option[aria-selected="true"] .optionLabel { color: var(--foreground); }
+.match { background: none; color: var(--foreground); }
+.optionMeta { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.count { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+
+.empty { margin: 0; padding: 10px 10px; color: var(--text-secondary); font-size: var(--text-sm); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

@@ -0,0 +1,8 @@
+export interface MetricCardProps {
+    label: string;
+    value: number;
+    suffix?: string;
+    context: string;
+    change?: string;
+}
+export declare function MetricCard({ label, value, suffix, context, change }: MetricCardProps): import("react").JSX.Element;

package/components/metric-card/metric-card.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { AnimatedCounter } from "../animated-counter/animated-counter.js";
+import styles from "./metric-card.module.css";
+/** Copy that holds a number enters from the side it moved toward: a larger value rises from below, a smaller one drops from above. */
+const rise = { hidden: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, filter: `blur(${motionTokens.blur.soft}px)` }), shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: (direction) => ({ opacity: 0, y: `${-.3 * direction}em`, 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 amountIn = (text) => Number(text.replace(/,/g, "").match(/-?\d+(?:\.\d+)?/)?.[0] ?? NaN);
+/** New copy rises in while the old copy leaves; `morph` springs the wrapper to the new text's width instead of letting it snap. */
+function Swap({ text, morph = false, block = false }) {
+    const reduceMotion = !!useReducedMotion();
+    const sizer = useRef(null);
+    const width = useMotionValue("auto");
+    const [shown, setShown] = useState({ text, direction: 1 });
+    if (shown.text !== text)
+        setShown({ text, direction: amountIn(text) < amountIn(shown.text) ? -1 : 1 });
+    useEffect(() => {
+        const node = sizer.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let measured = null;
+        // Layout size, not the transformed rect, so a scaling parent never leaves the text clipped. Only a new text springs; font loads jump.
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth;
+            if (next && measured !== null && measured !== node.textContent && !reduceMotion)
+                animate(width, next, motionTokens.spring.morph);
+            else
+                width.jump(next || "auto");
+            measured = next ? node.textContent : null;
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [morph, reduceMotion, width]);
+    return _jsxs(motion.span, { className: block ? styles.swapBlock : styles.swap, style: morph ? { width } : undefined, children: [morph && _jsx("span", { ref: sizer, className: styles.sizer, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: shown.direction, children: _jsx(motion.span, { className: styles.text, custom: shown.direction, variants: reduceMotion ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", children: text }, text) })] });
+}
+export function MetricCard({ label, value, suffix, context, change }) {
+    const reduceMotion = !!useReducedMotion();
+    return _jsxs("article", { className: styles.card, children: [_jsxs("div", { className: styles.top, children: [_jsx("span", { children: _jsx(Swap, { text: label, block: true }) }), _jsx(AnimatePresence, { initial: false, children: change && _jsx(motion.small, { "data-trend": /^[+]/.test(change) ? "up" : /^[-−]/.test(change) ? "down" : undefined, initial: { opacity: 0, scale: reduceMotion ? 1 : .96 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: reduceMotion ? 1 : .96, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(Swap, { text: change, morph: true }) }, "change") })] }), _jsx(AnimatedCounter, { value: value, suffix: suffix, animateOnView: true }), _jsx("p", { children: _jsx(Swap, { text: context, block: true }) })] });
+}

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

@@ -0,0 +1,18 @@
+.card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); padding: var(--space-section); background: var(--surface); box-shadow: var(--shadow-resting); }
+.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-block); }
+.top span { color: var(--text-secondary); font-size: var(--text-sm); }
+.top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 3px 8px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
+.card p { margin: var(--space-inset) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
+@media (max-width: 380px) { .card { padding: var(--space-inset); } .top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-section); } }
+/* Text swaps: the outgoing copy is popped out of flow so the wrapper never holds both widths. */
+.swap, .swapBlock { position: relative; max-width: 100%; }
+.swap { display: inline-flex; overflow-x: clip; white-space: nowrap; vertical-align: top; }
+.swapBlock { display: block; }
+.swap > .text { display: inline-block; }
+.swapBlock > .text { display: block; }
+.sizer { position: absolute; top: 0; left: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
+/* A signed change reads its direction in color as well as sign: a faint tint behind, the color on the text. */
+.top small[data-trend] span { color: inherit; }
+.top small[data-trend] { border-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.top small[data-trend="up"] { background: color-mix(in oklab, var(--success) 11%, transparent); color: var(--success); }
+.top small[data-trend="down"] { background: color-mix(in oklab, var(--danger) 11%, transparent); color: var(--danger); }