@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/in-view-title/in-view-title.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./in-view-title.module.css";
+const subscribeHydration = () => () => { };
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+/** Matches the delay of the stylesheet fallback: when scripts arrive later than this, the fallback has already shown the title, so it stays put instead of animating again. */
+const FALLBACK_MS = 2400;
+const lateBoot = typeof window !== "undefined" && performance.now() > FALLBACK_MS;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** Horizontal distance each letter travels per step from its word's center in the tracking variant. */
+const TRACK_EM = .06;
+/** Transform settles longest, blur clears sooner, and opacity leads, so text is readable before it has fully arrived. Hiding is a quick fade with no stagger. */
+function reveal(instant, visible, delay, settle = .8) {
+    if (instant)
+        return { duration: 0 };
+    if (!visible)
+        return { duration: motionTokens.duration.exit, ease: standard };
+    const track = (duration, ease = enter) => ({ duration, delay, ease });
+    return { y: track(settle), x: track(settle), "--wipe": track(settle, standard), filter: track(settle * .78), opacity: track(settle * .56, standard) };
+}
+export function InViewTitle({ text, variant = "blur", as = "h2", lines, className, id, once = true }) {
+    const ref = useRef(null);
+    const inView = useInView(ref, { once, amount: .45 });
+    const [passed, setPassed] = useState(false);
+    useEffect(() => {
+        if (inView || passed)
+            return;
+        const revealPassedTitle = () => {
+            if (ref.current && ref.current.getBoundingClientRect().top < 0)
+                setPassed(true);
+        };
+        revealPassedTitle();
+        window.addEventListener("scroll", revealPassedTitle, { passive: true });
+        return () => window.removeEventListener("scroll", revealPassedTitle);
+    }, [inView, passed]);
+    const prefersReduced = useReducedMotion();
+    const hydrated = useSyncExternalStore(subscribeHydration, clientSnapshot, serverSnapshot);
+    const [serverRendered] = useState(!hydrated);
+    const reduced = hydrated && prefersReduced;
+    const late = hydrated && serverRendered && lateBoot;
+    const visible = reduced || late || inView || passed;
+    const instant = Boolean(reduced || late);
+    const Tag = as;
+    const wrapperClass = [styles.wrap, hydrated ? "" : styles.pending, className].filter(Boolean).join(" ");
+    const words = text.split(" ").filter(Boolean);
+    const step = Math.min(motionTokens.stagger.word * 1.5, .4 / Math.max(words.length, 1));
+    if (variant === "word")
+        return _jsx("div", { ref: ref, className: wrapperClass, children: _jsx(Tag, { id: id, "aria-label": text, children: words.map((word, index) => _jsxs(Fragment, { children: [_jsx("span", { className: styles.clip, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.part, initial: false, animate: visible ? { y: "0em", opacity: 1 } : { y: "0.9em", opacity: 0 }, transition: reveal(instant, visible, index * step), children: word }) }), index < words.length - 1 ? " " : null] }, `${word}-${index}`)) }) });
+    if (variant === "line") {
+        const titleLines = lines?.length ? lines : [text];
+        return _jsx("div", { ref: ref, className: wrapperClass, children: _jsx(Tag, { id: id, "aria-label": text, children: titleLines.map((line, index) => _jsx("span", { className: styles.lineClip, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.part, initial: false, animate: visible ? { y: "0%", opacity: 1 } : { y: "112%", opacity: 0 }, transition: reveal(instant, visible, index * motionTokens.stagger.line, .86), children: line }) }, `${line}-${index}`)) }) });
+    }
+    if (variant === "blur")
+        return _jsx("div", { ref: ref, className: wrapperClass, children: _jsx(Tag, { id: id, "aria-label": text, children: words.map((word, index) => _jsxs(Fragment, { children: [_jsx(motion.span, { className: `${styles.blurWord} ${styles.part}`, "aria-hidden": "true", initial: false, animate: visible ? { opacity: 1, y: "0em", filter: "blur(0px)" } : { opacity: 0, y: "0.2em", filter: `blur(${motionTokens.blur.text}px)` }, transition: reveal(instant, visible, index * step), children: word }), index < words.length - 1 ? " " : null] }, `${word}-${index}`)) }) });
+    if (variant === "tracking")
+        return _jsx("div", { ref: ref, className: wrapperClass, children: _jsx(Tag, { id: id, "aria-label": text, children: words.map((word, index) => {
+                    const letters = Array.from(word);
+                    const center = (letters.length - 1) / 2;
+                    const delay = index * motionTokens.stagger.char * 2;
+                    return _jsxs(Fragment, { children: [_jsx(motion.span, { className: `${styles.trackWord} ${styles.part}`, "aria-hidden": "true", initial: false, animate: visible ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: `blur(${motionTokens.blur.soft}px)` }, transition: reveal(instant, visible, delay, .9), children: letters.map((letter, letterIndex) => _jsx(motion.span, { className: styles.part, initial: false, animate: { x: visible ? "0em" : `${(center - letterIndex) * TRACK_EM}em` }, transition: reveal(instant, visible, delay, 1), children: letter }, letterIndex)) }), index < words.length - 1 ? " " : null] }, `${word}-${index}`);
+                }) }) });
+    // A soft edged mask sweeps across the title instead of a hard clip, so no letter is ever cut mid stroke.
+    return _jsx("div", { ref: ref, className: wrapperClass, children: _jsx(motion.div, { className: `${styles.wipe} ${styles.part}`, initial: false, animate: visible ? { "--wipe": "0%", x: "0em" } : { "--wipe": "100%", x: "-0.12em" }, transition: reveal(instant, visible, 0, .9), children: _jsx(Tag, { id: id, children: text }) }) });
+}
+export default InViewTitle;

package/components/in-view-title/in-view-title.module.css

@@ -0,0 +1,13 @@
+.wrap { min-width: 0; color: var(--foreground); }
+/* Clips hide the rise; padding with matching negative margins leaves room for descenders and blur without changing layout. */
+.clip { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .14em .2em; margin: -.08em -.14em -.2em; }
+.lineClip { display: block; overflow: hidden; padding: .06em .12em .18em; margin: -.06em -.12em -.18em; }
+.clip > span, .lineClip > span, .blurWord, .trackWord, .trackWord > span { display: inline-block; }
+.trackWord { white-space: nowrap; }
+/* The wipe mask is 2.3 times the title's width with a feathered middle, so the soft edge sits fully outside the title at both ends of the sweep.
+   Padding with matching negative margins keeps descenders and overhangs inside the masked box without changing layout. */
+.wipe { padding: .1em .12em .22em; margin: -.1em -.12em -.22em; mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-size: 230% 100%; mask-repeat: no-repeat; mask-position: var(--wipe, 0%) 0; }
+/* Server rendered titles start hidden. If scripts have not taken over after 2.4s, show them anyway; the class is removed on hydration. */
+.pending .part { animation: settle .4s var(--ease-enter) 2.4s forwards; }
+@keyframes settle { to { opacity: 1; transform: none; filter: none; --wipe: 0%; mask-image: none; } }
+@media (prefers-reduced-motion: reduce) { .part { opacity: 1 !important; transform: none !important; filter: none !important; mask-image: none !important; } .pending .part { animation: none; } }

package/components/inline-edit/inline-edit.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Click-to-edit text for names and short fields that are read far more often than they change, such as a project name or its description.
+ * The text turns into a field in place with the same metrics, so nothing around it moves, and the box grows with what you type. Enter saves
+ * optimistically and a check draws once the save lands; Escape rolls the text back. A failed save restores the last saved value and says why.
+ * Use a regular form when several fields must be saved together.
+ */
+export interface InlineEditProps {
+    /** The saved value. A new value from outside replaces the text while it is not being edited. */
+    value: string;
+    /** Persists the new value. Return a promise to show the saving state, and reject it to roll back. */
+    onSave: (next: string) => void | Promise<unknown>;
+    /** Accessible name, for example “Project name”. */
+    label: string;
+    /** Returns a message when the draft cannot be saved. */
+    validate?: (next: string) => string | null | undefined;
+    /** Shown when the value is empty. */
+    placeholder?: string;
+    /** Wraps onto several lines and grows in height. Enter still saves; Shift+Enter adds a line break. */
+    multiline?: boolean;
+    /** `title` for names and headings, `body` for descriptions. */
+    variant?: "title" | "body";
+    /** The element that holds the text, so a title can stay a heading. */
+    as?: "span" | "p" | "h1" | "h2" | "h3";
+    className?: string;
+}
+export declare function InlineEdit({ value, onSave, label, validate, placeholder, multiline, variant, as: Tag, className }: InlineEditProps): import("react").JSX.Element;
+export default InlineEdit;

package/components/inline-edit/inline-edit.js

@@ -0,0 +1,315 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, CircleAlert, Pencil, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./inline-edit.module.css";
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const blur = (px) => `blur(${px}px)`;
+const noop = () => () => { };
+/** Typing retargets many times a second, so the frame follows on a quicker spring without overshoot and keeps up with a fast typist. */
+const typingSpring = { ...motionTokens.spring.snappy, visualDuration: motionTokens.duration.fast, bounce: 0 };
+/** Reduced motion only counts after hydration, so the server and the first client render always agree. */
+function useReduced() {
+    const hydrated = useSyncExternalStore(noop, () => true, () => false);
+    const reduced = useReducedMotion() ?? false;
+    return hydrated && reduced;
+}
+/** Text rises in from a soft blur. A rollback runs the other way, dropping the old words down and the saved ones in from above. */
+const textMotion = {
+    enter: (direction) => ({ opacity: 0, y: `${direction * .3}em`, filter: blur(motionTokens.blur.soft) }),
+    rest: { opacity: 1, y: "0em", filter: blur(0), transition: { duration: motionTokens.duration.standard, ease: enter } },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -.3}em`, filter: blur(motionTokens.blur.subtle), transition: { duration: motionTokens.duration.fast, ease: standard } }),
+};
+const textFade = { enter: { opacity: 0 }, rest: { opacity: 1, transition: { duration: motionTokens.duration.fast } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
+const rest = { opacity: 1, scale: 1, filter: blur(0) };
+const iconIn = { opacity: 0, scale: .6, filter: blur(motionTokens.blur.subtle) };
+const iconOut = { ...iconIn, transition: { duration: motionTokens.duration.fast, ease: standard } };
+const fadeIn = { opacity: 0 };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Scale rides the spring; opacity and blur tween so the blur never overshoots below zero. */
+const iconEnter = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter }, filter: { duration: motionTokens.duration.fast, ease: enter } };
+/** The tick draws itself from its short stroke, the way a hand would write it. */
+function DrawnCheck({ reduced }) {
+    return _jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx(motion.path, { d: "M4 12.5l5 5L20 6.5", initial: reduced ? false : { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 1 }, transition: { pathLength: { duration: .32, ease: enter, delay: .06 }, opacity: { duration: .05, delay: .06 } } }) });
+}
+/** A message row that opens and closes its height on a spring while the words rise in, so an error never pushes the page in one frame. */
+function Reveal({ id, message, reduced }) {
+    const inner = useRef(null);
+    const height = useMotionValue(0);
+    useEffect(() => {
+        const node = inner.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let measured = false;
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            if (!measured || reduced) {
+                measured = true;
+                height.jump(next);
+                return;
+            }
+            animate(height, next, motionTokens.spring.smooth);
+        });
+        observer.observe(node, { box: "border-box" });
+        return () => { observer.disconnect(); height.stop(); };
+    }, [height, reduced]);
+    return _jsx(motion.span, { className: styles.reveal, style: { height }, children: _jsx("span", { ref: inner, id: id, className: styles.revealInner, "aria-live": "polite", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: 1, children: message && _jsx(motion.span, { className: styles.message, "data-tone": message.tone, custom: 1, variants: reduced ? textFade : textMotion, initial: "enter", animate: "rest", exit: "exit", children: message.node }, message.key) }) }) });
+}
+export function InlineEdit({ value, onSave, label, validate, placeholder = "", multiline = false, variant = "title", as: Tag = "span", className }) {
+    const reduced = useReduced();
+    const ids = useId();
+    const displayHintId = `${ids}-display`, editHintId = `${ids}-edit`, messageId = `${ids}-message`;
+    const [committed, setCommitted] = useState(value);
+    const [shown, setShown] = useState(value);
+    const [seen, setSeen] = useState(value);
+    const [layer, setLayer] = useState({ key: 0, direction: 1 });
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const [phase, setPhase] = useState("idle");
+    const [error, setError] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const root = useRef(null);
+    const display = useRef(null);
+    const control = useRef(null);
+    const selection = useRef(null);
+    const focusDisplay = useRef(false);
+    const saveRun = useRef(0);
+    const timers = useRef([]);
+    const frame = useRef(null);
+    const box = useRef(null);
+    // Single line: the layout box and the input take a new width at once, so the input never scrolls, while the visible frame springs after it.
+    // Multiline: the box's height springs, so content below glides, while the textarea already has the room its text needs.
+    // Both start at their natural size ("100%", "auto"), so the server markup is already right before any script runs.
+    const frameWidth = useMotionValue("100%");
+    const boxHeight = useMotionValue("auto");
+    const size = useRef(0);
+    const wasEditing = useRef(false);
+    // A new value from outside replaces the text, unless the person is typing or a save is still in flight.
+    if (value !== seen) {
+        setSeen(value);
+        if (value !== committed) {
+            setCommitted(value);
+            if (!editing && phase !== "saving" && value !== shown) {
+                setShown(value);
+                setLayer(current => ({ key: current.key + 1, direction: 1 }));
+            }
+        }
+    }
+    const layerText = editing ? draft : shown;
+    const saving = phase === "saving";
+    const later = (fn, ms) => { timers.current.push(setTimeout(fn, ms)); };
+    useEffect(() => () => timers.current.forEach(clearTimeout), []);
+    const naturalSize = () => { const node = display.current; return node ? parseFloat(getComputedStyle(node)[multiline ? "height" : "width"]) : 0; };
+    /** Written straight to the DOM before paint, because a motion value only reaches the style on its next frame, and one frame at the wrong size shows. */
+    const snap = (next) => {
+        const field = control.current;
+        if (multiline && field) {
+            field.style.height = `${next}px`;
+            field.scrollTop = 0;
+        }
+        const surface = multiline ? box.current : frame.current;
+        if (surface)
+            surface.style[multiline ? "height" : "width"] = `${next}px`;
+        (multiline ? boxHeight : frameWidth).jump(next);
+    };
+    // Changes the person caused (typing, switching modes, a rollback) spring from the size on screen. Measured in a layout effect, so no frame shows the new size early.
+    const onContentChange = useEffectEvent(() => {
+        const next = naturalSize();
+        const previous = size.current;
+        const typing = editing && wasEditing.current;
+        size.current = next;
+        wasEditing.current = editing;
+        if (!next)
+            return;
+        const field = control.current;
+        if (multiline && field) {
+            field.style.height = `${next}px`;
+            field.scrollTop = 0;
+        }
+        const target = multiline ? boxHeight : frameWidth;
+        if (!previous || reduced || typeof target.get() !== "number") {
+            snap(next);
+            return;
+        }
+        if (Math.abs(next - previous) < .1)
+            return;
+        animate(target, next, multiline ? motionTokens.spring.smooth : typing ? typingSpring : motionTokens.spring.morph);
+    });
+    useLayoutEffect(() => { onContentChange(); }, [layerText, editing, multiline, reduced]);
+    // A late web font or a resized container follows at once instead of animating.
+    const onResize = useEffectEvent(() => {
+        const next = naturalSize();
+        if (!next || Math.abs(next - size.current) < .1)
+            return;
+        size.current = next;
+        snap(next);
+    });
+    useEffect(() => {
+        const node = display.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        // Border box, so the room added while editing (padding, not content) is noticed too.
+        const observer = new ResizeObserver(() => onResize());
+        observer.observe(node, { box: "border-box" });
+        return () => observer.disconnect();
+    }, []);
+    // Focus follows the mode: into the field with the caret where the text was clicked, and back to the text after Enter or Escape.
+    useLayoutEffect(() => {
+        const field = control.current;
+        if (editing && field && selection.current !== null) {
+            const at = selection.current;
+            selection.current = null;
+            field.focus({ preventScroll: true });
+            if (at === "all")
+                field.select();
+            else
+                field.setSelectionRange(at, at);
+        }
+        if (!editing && focusDisplay.current) {
+            focusDisplay.current = false;
+            display.current?.focus({ preventScroll: true });
+        }
+    });
+    function startEdit(at, text = shown) {
+        if (editing || saving)
+            return;
+        setDraft(text);
+        setEditing(true);
+        setError(null);
+        setFailed(null);
+        setFlash(null);
+        if (phase !== "idle")
+            setPhase("idle");
+        selection.current = at;
+    }
+    /** The caret lands on the character that was clicked, the way it would in a text field. */
+    function caretAt(x, y) {
+        const node = display.current?.querySelector(`[data-layer="${layer.key}"]`)?.firstChild;
+        if (!node || !shown)
+            return shown.length;
+        const doc = document;
+        const position = doc.caretPositionFromPoint?.(x, y);
+        if (position)
+            return position.offsetNode === node ? Math.min(position.offset, shown.length) : shown.length;
+        const range = doc.caretRangeFromPoint?.(x, y);
+        return range && range.startContainer === node ? Math.min(range.startOffset, shown.length) : shown.length;
+    }
+    function onDisplayClick(event) {
+        if (saving)
+            return;
+        // A keyboard activation selects everything, ready to retype; a click puts the caret where it landed.
+        startEdit(event.detail === 0 ? "all" : caretAt(event.clientX, event.clientY));
+    }
+    const clean = (text) => multiline ? text.trim() : text.replace(/\s+/g, " ").trim();
+    function submit(source) {
+        const next = clean(draft);
+        const problem = validate?.(next) || null;
+        if (problem) {
+            setError(problem);
+            if (source !== "blur")
+                control.current?.focus();
+            return;
+        }
+        setEditing(false);
+        setError(null);
+        if (source !== "blur")
+            focusDisplay.current = true;
+        // Trimmed spaces would shift the text in one frame, so a cleaned value arrives with the text motion instead.
+        if (next !== draft)
+            setLayer(current => ({ key: current.key + 1, direction: 1 }));
+        if (next === shown)
+            return;
+        const previous = committed;
+        const run = ++saveRun.current;
+        setShown(next);
+        setPhase("saving");
+        setAnnouncement(`Saving ${label.toLowerCase()}`);
+        Promise.resolve().then(() => onSave(next)).then(() => {
+            if (run !== saveRun.current)
+                return;
+            setCommitted(next);
+            setPhase("saved");
+            setAnnouncement(`${label} saved`);
+            later(() => setPhase(current => current === "saved" ? "idle" : current), 1800);
+        }, () => {
+            if (run !== saveRun.current)
+                return;
+            setShown(previous);
+            setLayer(current => ({ key: current.key + 1, direction: -1 }));
+            setPhase("failed");
+            setFailed(next);
+            setFlash("on");
+            setAnnouncement("");
+            later(() => setFlash(current => current === "on" ? "off" : current), 1400);
+            later(() => setFlash(current => current === "off" ? null : current), 2000);
+        });
+    }
+    function cancel() {
+        setEditing(false);
+        setError(null);
+        focusDisplay.current = true;
+        if (draft !== shown)
+            setLayer(current => ({ key: current.key + 1, direction: -1 }));
+    }
+    function retry() {
+        if (!failed)
+            return;
+        startEdit(failed.length, failed);
+    }
+    function onChange(event) {
+        const next = event.target.value;
+        setDraft(next);
+        if (error)
+            setError(validate?.(clean(next)) || null);
+    }
+    function onKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            cancel();
+            return;
+        }
+        if (event.key === "Enter" && !event.nativeEvent.isComposing && !(multiline && event.shiftKey)) {
+            event.preventDefault();
+            submit("key");
+        }
+    }
+    // Leaving the component saves, the way a rename does; switching windows does not.
+    function onBlur(event) {
+        if (!editing)
+            return;
+        const next = event.relatedTarget;
+        if (next && root.current?.contains(next))
+            return;
+        if (!next && !document.hasFocus())
+            return;
+        submit("blur");
+    }
+    const noun = label.toLowerCase();
+    const message = error
+        ? { key: `error:${error}`, tone: "error", node: _jsxs(_Fragment, { children: [_jsx(CircleAlert, { className: styles.messageIcon, size: 14, strokeWidth: 2, "aria-hidden": "true" }), _jsx("span", { children: error })] }) }
+        : failed && !editing
+            ? { key: `failed:${failed}`, tone: "failed", node: _jsxs(_Fragment, { children: [_jsx(CircleAlert, { className: styles.messageIcon, size: 14, strokeWidth: 2, "aria-hidden": "true" }), _jsxs("span", { children: [`Couldn’t save “${failed}”, so the last saved ${noun} is back.`, " ", _jsx("button", { type: "button", className: styles.retry, onClick: retry, children: "Try again" })] })] }) }
+            : null;
+    const slot = editing ? "edit" : phase;
+    const describedBy = (hint) => [hint, message ? messageId : null].filter(Boolean).join(" ");
+    const fieldProps = {
+        className: styles.control, value: draft, onChange, onKeyDown, placeholder, "aria-label": label, "aria-invalid": error ? true : undefined,
+        "aria-describedby": describedBy(editHintId), autoComplete: "off", spellCheck: variant === "body",
+    };
+    return _jsxs("div", { ref: root, className: [styles.root, className].filter(Boolean).join(" "), "data-variant": variant, "data-multiline": multiline || undefined, "data-editing": editing || undefined, "data-phase": phase, "data-invalid": error ? "" : undefined, "data-flash": flash ?? undefined, onBlur: onBlur, children: [_jsx(Tag, { className: styles.line, children: _jsxs(motion.span, { ref: box, className: styles.box, style: multiline ? { height: boxHeight } : undefined, children: [_jsx("button", { ref: display, type: "button", className: styles.display, onClick: onDisplayClick, tabIndex: editing ? -1 : undefined, "aria-label": `${label}: ${shown || placeholder}`, "aria-describedby": describedBy(displayHintId), "aria-disabled": saving || undefined, children: _jsx("span", { className: styles.layer, "data-empty": layerText ? undefined : "", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: layer.direction, children: _jsx(motion.span, { "data-layer": layer.key, className: styles.text, custom: layer.direction, variants: reduced ? textFade : textMotion, initial: "enter", animate: "rest", exit: "exit", children: (layerText || placeholder || "\u200b") + (multiline && editing ? "\u200b" : "") }, layer.key) }) }) }), editing && (multiline
+                            ? _jsx("textarea", { ref: node => { control.current = node; }, ...fieldProps, rows: 1, enterKeyHint: "done" })
+                            : _jsx("input", { ref: node => { control.current = node; }, ...fieldProps, type: "text", enterKeyHint: "done" })), _jsx(motion.span, { ref: frame, className: styles.frame, style: multiline ? undefined : { width: frameWidth }, children: _jsx("span", { className: styles.slot, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.slotItem, initial: reduced ? fadeIn : iconIn, animate: rest, exit: reduced ? fadeOut : iconOut, transition: reduced ? { duration: motionTokens.duration.fast } : iconEnter, children: slot === "edit" ? _jsxs("span", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.save, "aria-label": `Save ${noun}`, onPointerDown: event => event.preventDefault(), onClick: () => submit("button"), children: _jsx(Check, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: styles.cancel, "aria-label": "Cancel editing", onPointerDown: event => event.preventDefault(), onClick: cancel, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] })
+                                            : slot === "saving" ? _jsx("span", { className: styles.spinner, "aria-hidden": "true" })
+                                                : slot === "saved" ? _jsx("span", { className: styles.saved, "aria-hidden": "true", children: _jsx(DrawnCheck, { reduced: reduced }) })
+                                                    : slot === "failed" ? _jsx(CircleAlert, { className: styles.failedIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+                                                        : _jsx(Pencil, { className: styles.pencil, size: 14, strokeWidth: 1.75, "aria-hidden": "true", onClick: () => startEdit(shown.length) }) }, slot) }) }) })] }) }), _jsx(Reveal, { id: messageId, message: message, reduced: reduced }), _jsx("span", { id: displayHintId, className: styles.srOnly, children: "Activate to edit." }), _jsx("span", { id: editHintId, className: styles.srOnly, children: multiline ? "Enter saves, Shift+Enter adds a line break, Escape cancels." : "Enter saves, Escape cancels." }), _jsx("span", { className: styles.srOnly, role: "status", children: announcement })] });
+}
+export default InlineEdit;

package/components/inline-edit/inline-edit.module.css

@@ -0,0 +1,73 @@
+/* The box sits a border and padding outside the text, so the text lines up with the content around it and the hover surface reaches past it. */
+.root { --pad-x: 8px; --pad-y: 3px; position: relative; display: grid; min-width: 0; margin-inline-start: calc(-1 * (var(--pad-x) + 1px)); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+/* Whole-pixel line heights: an input centres its text by rounding, so a fractional line would sit the field a pixel below the display. */
+.root[data-variant="title"] { --size: var(--text-xl); --leading: round(var(--size) * 1.3, 2px); --weight: 500; --ink: var(--foreground); }
+.root[data-variant="body"] { --pad-y: 5px; --size: var(--text-sm); --leading: round(var(--size) * 1.5, 1px); --weight: 400; --ink: var(--text-secondary); }
+/* Room for the actions is reserved in every state, so the text never rewraps when editing starts. */
+/* Inter at every size here: a heading host keeps its semantics but not the display face. */
+.line { display: block; min-width: 0; margin: 0; padding-inline-end: 66px; color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
+.root[data-multiline] .line { padding-inline-end: 38px; }
+.box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+.root[data-multiline] .box { display: block; }
+
+/* Display and field share every metric: border, padding, font, and line height. Only the frame behind them changes. */
+.display, .control { box-sizing: border-box; margin: 0; padding: var(--pad-y) var(--pad-x); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: inherit; font: inherit; font-feature-settings: inherit; letter-spacing: inherit; word-spacing: inherit; line-height: var(--leading); text-align: left; text-indent: 0; text-transform: none; -webkit-tap-highlight-color: transparent; }
+.display { position: relative; z-index: 1; display: block; max-width: 100%; cursor: text; }
+.root[data-multiline] .display { width: 100%; }
+.root[data-editing] .display { visibility: hidden; }
+/* While editing, a single line keeps a little extra room, so the next character never has to wait for the box. */
+.root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + 16px); }
+.display[aria-disabled="true"] { cursor: progress; }
+.layer { position: relative; display: block; transition: opacity var(--duration-standard) var(--ease-standard); }
+.layer[data-empty] { color: var(--text-muted); }
+/* An optimistic save shows the new text at once, a little quieter until the save lands; then it settles to full strength. */
+.root[data-phase="saving"] .layer { opacity: .5; transition-duration: var(--duration-fast); }
+.text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
+.root[data-multiline] .text { overflow: visible; white-space: pre-wrap; overflow-wrap: break-word; }
+.control { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; outline: none; resize: none; overflow: hidden; caret-color: var(--foreground); }
+/* The frame carries the focus ring for the field, so the field itself never draws a second one. */
+.control:focus-visible { outline: none; }
+.control::placeholder { color: var(--text-muted); opacity: 1; }
+textarea.control { white-space: pre-wrap; overflow-wrap: break-word; }
+
+/* The frame is the only surface: a hover tint at rest, a bordered field while editing, a soft danger wash when a save fails. */
+.frame { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
+.root[data-multiline] .frame { right: 0; }
+@media (hover: hover) and (pointer: fine) {
+  .display:not([aria-disabled="true"]):hover ~ .frame { background: var(--surface-muted); }
+  .pencil { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
+  .display:hover ~ .frame .pencil, .display:focus-visible ~ .frame .pencil, .pencil:hover { opacity: 1; }
+}
+.root[data-editing] .frame { border-color: var(--foreground); background: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }
+.root[data-invalid] .frame { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 24%, transparent); }
+.root[data-flash="on"] .frame { border-color: color-mix(in oklab, var(--danger) 30%, transparent); background: color-mix(in oklab, var(--danger) 9%, transparent); }
+/* The wash leaves slowly, without any movement, once the message has been read. */
+.root[data-flash="off"] .frame { transition-duration: var(--duration-considered); }
+
+/* The slot rides on the frame's edge, so it follows the width morph instead of jumping to the new width. */
+.slot { position: absolute; top: 50%; left: calc(100% + 6px); display: grid; min-height: 28px; margin-top: -14px; pointer-events: auto; }
+.root[data-multiline] .slot { top: 0; left: calc(100% + 8px); margin-top: calc(var(--pad-y) + var(--leading) / 2 - 13px); }
+.slotItem { display: grid; grid-area: 1 / 1; min-height: 28px; place-items: center start; }
+.actions { display: flex; gap: 4px; }
+.root[data-multiline] .actions { flex-direction: column; }
+.save, .cancel { display: grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.save { background: var(--foreground); color: var(--background); }
+.cancel { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
+.save:active, .cancel:active { transform: scale(.96); }
+@media (hover: hover) and (pointer: fine) { .save:hover { background: color-mix(in oklab, var(--foreground) 86%, var(--background)); } .cancel:hover { border-color: var(--border-strong); background: var(--surface-muted); color: var(--foreground); } }
+.pencil { margin-left: 2px; color: var(--text-muted); cursor: pointer; }
+.spinner { display: block; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
+.saved { display: grid; margin-left: 1px; place-items: center; color: var(--success); }
+.failedIcon { margin-left: 1px; color: var(--danger); }
+
+/* The message row opens from a true zero; its spacing lives inside the clipped slot. */
+.reveal { display: block; overflow: hidden; }
+.revealInner { position: relative; display: block; }
+.message { display: flex; align-items: flex-start; gap: 6px; padding: 6px var(--pad-x) 4px calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
+.message[data-tone="error"] { color: var(--danger); }
+.messageIcon { flex: none; margin-top: 2px; color: var(--danger); }
+.retry { margin: 0 0 0 2px; padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
+@media (hover: hover) and (pointer: fine) { .retry:hover { text-decoration-color: currentColor; } }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: var(--text-muted); border-top-color: transparent; } .layer, .save, .cancel, .pencil { transition: none; } }

package/components/input/input.d.ts

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

package/components/input/input.js

@@ -0,0 +1,60 @@
+"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 "./input.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.exit, 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();
+    }, []);
+    // Reduced motion mounts the row at full height: a zero-duration open would still paint one collapsed frame. The presence starts
+    // with initial={false}, so rows present at hydration render the same on server and client either way.
+    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 Input = forwardRef(function Input({ 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;
+    const describedBy = [props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || undefined;
+    return _jsxs("div", { className: styles.field, children: [_jsx("label", { className: styles.label, htmlFor: controlId, children: label }), _jsx("input", { ...props, id: controlId, ref: ref, className: [styles.input, className].filter(Boolean).join(" "), "aria-invalid": error ? true : props["aria-invalid"], "aria-describedby": describedBy }), _jsx(FieldMessage, { id: hintId, text: description, className: styles.description }), _jsx(FieldMessage, { id: errorId, text: error, className: styles.error, alert: true })] });
+});
+Input.displayName = "Input";

package/components/input/input.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; }
+.label { margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+/* Focus answers with the border colour alone (no rings or halos); the field itself never changes size. */
+.input { width: 100%; min-height: var(--control-height-md); padding: 0 var(--space-group); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.input::placeholder { color: var(--text-muted); }
+@media (hover: hover) and (pointer: fine) { .input:hover:not(:disabled, [aria-invalid="true"]) { border-color: var(--foreground); } }
+.input:focus-visible { border-color: var(--foreground); }
+.input[aria-invalid="true"] { border-color: var(--danger); }
+.input:disabled { cursor: not-allowed; opacity: .5; background: var(--surface-muted); }
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { display: block; overflow: hidden; }
+.description, .error { display: block; padding-top: var(--space-related); font-size: var(--text-xs); line-height: var(--leading-body); }
+.description { 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) { .input { transition-duration: .01ms; } }