@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/multi-select/multi-select.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown, X } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./multi-select.module.css";
+const enter = motionTokens.ease.enter;
+const standard = motionTokens.ease.standard;
+/** Each chip sits in a slot whose width opens and collapses on a spring, so neighbours travel with it and nothing overlaps. */
+const slot = {
+    hidden: { width: 0, opacity: 0 },
+    shown: { width: "auto", opacity: 1, transition: { width: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast, ease: enter } } },
+    gone: { width: 0, opacity: 0, transition: { width: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant, ease: standard } } },
+};
+/** The chip itself grows in from .9 with a soft blur and shrinks back as it leaves. */
+const chip = {
+    hidden: { scale: 0.9, filter: `blur(${motionTokens.blur.soft}px)` },
+    shown: { scale: 1, filter: "blur(0px)", transition: { ...motionTokens.spring.snappy, filter: { duration: motionTokens.duration.standard, ease: enter } } },
+    gone: { scale: 0.9, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } },
+};
+/** Reduced motion keeps short crossfades; resting states match the moving variants so server and client markup agree. */
+const fade = { hidden: { opacity: 0 }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
+const slotFade = { hidden: { opacity: 0 }, shown: { width: "auto", opacity: 1, transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
+const chipStill = { hidden: { scale: 1, filter: "blur(0px)" }, shown: { scale: 1, filter: "blur(0px)" }, gone: { scale: 1, filter: "blur(0px)" } };
+/** The overflow count rolls: a larger number rises from below, a smaller one drops from above. */
+const roll = {
+    hidden: (direction) => ({ opacity: 0, y: `${direction * 0.5}em`, filter: `blur(${motionTokens.blur.subtle}px)` }),
+    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: enter } },
+    gone: (direction) => ({ opacity: 0, y: `${direction * -0.5}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } }),
+};
+/** A check that draws itself when an option is picked and retracts when it is removed. */
+function CheckMark({ reduce }) {
+    return _jsx("svg", { className: styles.check, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx(motion.path, { d: "M4 12.5 9 17.5 20 6.5", initial: reduce ? { opacity: 0 } : { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 1 }, exit: reduce ? { opacity: 0 } : { pathLength: 0, opacity: 0 }, transition: reduce ? { duration: motionTokens.duration.instant } : { pathLength: { duration: motionTokens.duration.standard, ease: enter }, opacity: { duration: motionTokens.duration.instant } } }) });
+}
+export function MultiSelect({ label, options, value, defaultValue = [], onValueChange, placeholder = "Select options", description, maxVisible = 2, disabled = false, className }) {
+    const id = useId();
+    const labelId = `${id}-label`;
+    const valueId = `${id}-value`;
+    const rootRef = useRef(null);
+    const [internal, setInternal] = useState(defaultValue);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const selected = value ?? internal;
+    const selectedSet = useMemo(() => new Set(selected), [selected]);
+    const labelFor = (item) => options.find((option) => option.value === item)?.label ?? item;
+    const visible = selected.slice(0, maxVisible).map((item) => ({ value: item, label: labelFor(item) }));
+    const remaining = Math.max(0, selected.length - visible.length);
+    // A closed menu forgets its highlight, so the next open starts clean instead of on a stale hovered row.
+    const [wasOpen, setWasOpen] = useState(open);
+    if (wasOpen !== open) {
+        setWasOpen(open);
+        if (!open)
+            setActiveIndex(-1);
+    }
+    const [previousRemaining, setPreviousRemaining] = useState(remaining);
+    const [countDirection, setCountDirection] = useState(1);
+    if (previousRemaining !== remaining) {
+        setPreviousRemaining(remaining);
+        setCountDirection(remaining > previousRemaining ? 1 : -1);
+    }
+    useEffect(() => {
+        const close = (event) => { if (!rootRef.current?.contains(event.target))
+            setOpen(false); };
+        document.addEventListener("pointerdown", close);
+        return () => document.removeEventListener("pointerdown", close);
+    }, []);
+    const update = (next) => { if (value === undefined)
+        setInternal(next); onValueChange?.(next); };
+    const toggle = (option) => {
+        if (disabled || option.disabled)
+            return;
+        update(selectedSet.has(option.value) ? selected.filter((item) => item !== option.value) : [...selected, option.value]);
+    };
+    const clear = () => { update([]); setOpen(false); };
+    const enabled = options.map((option, index) => option.disabled ? -1 : index).filter((index) => index >= 0);
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === "Enter" && open && activeIndex >= 0) {
+            event.preventDefault();
+            toggle(options[activeIndex]);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setOpen((current) => !current);
+            return;
+        }
+        if (event.key === "Escape") {
+            setOpen(false);
+            return;
+        }
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp") && enabled.length) {
+            event.preventDefault();
+            setOpen(true);
+            const current = enabled.indexOf(activeIndex);
+            const next = current < 0 ? (event.key === "ArrowDown" ? 0 : enabled.length - 1) : event.key === "ArrowDown" ? (current + 1) % enabled.length : (current - 1 + enabled.length) % enabled.length;
+            setActiveIndex(enabled[next]);
+        }
+    };
+    const reduce = useReducedMotion();
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.control, children: [_jsxs("button", { type: "button", className: `${styles.trigger} ${selected.length ? styles.hasClear : ""}`, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => setOpen((current) => !current), onKeyDown: onKeyDown, children: [_jsx("span", { id: valueId, className: styles.srOnly, children: selected.length ? selected.map(labelFor).join(", ") : placeholder }), _jsx("span", { className: styles.value, "aria-hidden": "true", children: _jsxs(AnimatePresence, { initial: false, children: [visible.map((item) => _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsx(motion.span, { className: styles.chip, variants: reduce ? chipStill : chip, children: item.label }) }, `chip-${item.value}`)), remaining > 0 && _jsx(motion.span, { className: styles.slot, variants: reduce ? slotFade : slot, initial: "hidden", animate: "shown", exit: "gone", children: _jsxs(motion.span, { className: styles.more, variants: reduce ? chipStill : chip, children: ["+", _jsx("span", { className: styles.count, children: _jsx(AnimatePresence, { initial: false, custom: countDirection, children: _jsx(motion.span, { custom: countDirection, variants: reduce ? fade : roll, initial: "hidden", animate: "shown", exit: "gone", children: remaining }, remaining) }) })] }) }, "more"), !selected.length && _jsx(motion.span, { className: styles.placeholder, variants: fade, initial: "hidden", animate: "shown", exit: "gone", children: placeholder }, "placeholder")] }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: selected.length > 0 && !disabled && _jsx(motion.button, { type: "button", "aria-label": "Clear selections", className: styles.clear, onClick: clear, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduce ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: standard } }, whileTap: { scale: reduce ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: standard } }, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }) }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": label, "aria-multiselectable": "true", initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { type: "button", role: "option", "aria-selected": selectedSet.has(option.value), "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": activeIndex === index, disabled: option.disabled, onPointerMove: () => { if (activeIndex !== index)
+                                    setActiveIndex(index); }, onClick: () => toggle(option), children: [_jsx("span", { children: option.label }), _jsx(AnimatePresence, { initial: false, children: selectedSet.has(option.value) && _jsx(CheckMark, { reduce: reduce }, "check") })] }, option.value)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
+}

package/components/multi-select/multi-select.module.css

@@ -0,0 +1,37 @@
+.field { position: relative; display: grid; gap: var(--space-related); min-width: 0; }
+.control { position: relative; min-width: 0; }
+.label { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+/* The trigger anchors the menu, so press feedback stays in color; it never scales. */
+.trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 5px 11px 5px 12px; background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
+.trigger:active:not(:disabled), .trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-muted); }
+.trigger:disabled { opacity: .5; cursor: not-allowed; }
+/* The chevron stays pinned to the trailing edge; a selection only reserves room for the clear button beside it, so nothing jumps. */
+.hasClear .chevron { margin-left: 26px; }
+.value { position: relative; display: flex; min-width: 0; min-height: 26px; flex: 1; align-items: center; overflow: hidden; }
+.placeholder, .description { color: var(--text-muted); }
+/* The placeholder sits outside the flow so the first chip can open its slot from the leading edge. */
+.placeholder { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
+/* The slot clips while its width springs open or closed; the chip keeps its natural width so the label never re-truncates mid-flight. */
+.slot { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; }
+.slot:has(.more) { flex-shrink: 0; }
+.chip, .more { box-sizing: border-box; flex: 0 0 auto; max-width: 9rem; overflow: hidden; margin-right: 5px; border-radius: var(--radius-full); corner-shape: round; padding: 4px 8px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); transition: background-color var(--duration-fast) var(--ease-standard); }
+.trigger[aria-expanded="true"] .chip, .trigger[aria-expanded="true"] .more { background: var(--surface); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) .chip, .trigger:hover:not(:disabled) .more { background: var(--surface); } }
+.more { display: inline-flex; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+.count { display: inline-grid; }
+.count > span { grid-area: 1 / 1; }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.clear { position: absolute; top: 0; bottom: 0; right: 36px; display: grid; width: 22px; height: 22px; margin: auto 0; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .clear:hover { background: var(--surface); color: var(--foreground); } }
+.chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
+.trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
+.description { font-size: var(--text-xs); }
+.menu { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: 5px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
+/* Arrow keys move the highlight often, so it changes almost instantly. Selection is shown by the check, not by weight, so labels never reflow. */
+.option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: calc(var(--radius-container) - 5px); corner-shape: var(--corner-shape); padding: 0 11px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
+.option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.option[data-active="true"] { background: var(--surface-muted); }
+.option:disabled { opacity: .42; cursor: not-allowed; }
+.check { flex: 0 0 auto; }
+@media (prefers-reduced-motion: reduce) { .trigger, .chevron, .option, .clear, .chip, .more { transition: none; } }

package/components/notification-center/notification-center.d.ts

@@ -0,0 +1,24 @@
+export interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    time: string;
+    read?: boolean;
+    tone?: "info" | "success" | "warning";
+    /** A local portrait asset for person-generated updates. */
+    actor?: {
+        name: string;
+        photo: string;
+    };
+}
+export interface NotificationCenterProps {
+    notifications: NotificationItem[];
+    label?: string;
+    onReadChange?: (notification: NotificationItem, read: boolean) => void;
+    onDismiss?: (notification: NotificationItem) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    avoidCollisions?: boolean;
+}
+export declare function NotificationCenter({ notifications: initial, label, onReadChange, onDismiss, open, onOpenChange, avoidCollisions }: NotificationCenterProps): import("react").JSX.Element;
+export default NotificationCenter;

package/components/notification-center/notification-center.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { Bell, Check, CheckCheck, CircleCheck, CircleDot, MessageCircle, TriangleAlert, X } from "lucide-react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Avatar } from "../avatar/avatar.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./notification-center.module.css";
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const instant = { duration: 0 };
+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 } };
+/** Bulk actions cascade down the list, capped so the whole sweep stays under a quarter second. */
+const cascade = (index) => Math.min(index * motionTokens.stagger.item, .2);
+/** Outgoing copies are hidden from assistive tech while they fade, so live text reads only the current value. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+function SwapText({ children, reduce }) {
+    return _jsx("span", { className: styles.swap, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.swapLine, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: reduce ? instant : enter, children: children }, children) }) });
+}
+const rollVariants = {
+    enter: (direction) => ({ opacity: 0, y: direction >= 0 ? "0.7em" : "-0.7em", filter: `blur(${motionTokens.blur.subtle}px)` }),
+    center: { opacity: 1, y: "0em", filter: "blur(0px)" },
+    exit: (direction) => ({ opacity: 0, y: direction >= 0 ? "-0.7em" : "0.7em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast }),
+};
+/** Counts roll like an odometer: a higher number rises from below, a lower one drops from above. */
+function RollingCount({ value, display = String(value), reduce }) {
+    const [previous, setPrevious] = useState(value);
+    const [direction, setDirection] = useState(0);
+    if (value !== previous) {
+        setDirection(value > previous ? 1 : -1);
+        setPrevious(value);
+    }
+    return _jsx("span", { className: styles.roll, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(Swap, { className: styles.rollValue, custom: direction, variants: reduce ? undefined : rollVariants, initial: reduce ? { opacity: 0 } : "enter", animate: reduce ? { opacity: 1 } : "center", exit: reduce ? fadeOut : "exit", transition: reduce ? instant : { y: motionTokens.spring.snappy, opacity: exitFast, filter: exitFast }, children: display }, display) }) });
+}
+/** Follows the width of its content. After `morphKey` changes the width springs from the old size to the new one, then returns to auto, so a longer label grows the control instead of snapping it. */
+function MorphWidth({ reduce, morphKey, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const width = 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 = () => { width.jump("auto"); if (frame.current)
+            frame.current.style.width = "auto"; };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth;
+            const current = width.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 width before this frame paints, then spring to the new one.
+            if (frame.current)
+                frame.current.style.width = `${from}px`;
+            controls = animate(width, [from, next], { ...motionTokens.spring.morph, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [width, reduce]);
+    return _jsx(motion.span, { ref: frame, className: styles.morph, style: { width }, children: _jsx("span", { ref: content, className: styles.morphContent, children: children }) });
+}
+function NotificationVisual({ item }) {
+    if (item.actor)
+        return _jsx(Avatar, { name: item.actor.name, src: item.actor.photo, size: "md" });
+    return _jsx("span", { className: [styles.eventIcon, styles[item.tone ?? "info"]].join(" "), "aria-hidden": "true", children: item.tone === "warning" ? _jsx(TriangleAlert, { size: 18, strokeWidth: 1.7 }) : item.tone === "success" ? _jsx(CircleCheck, { size: 18, strokeWidth: 1.7 }) : _jsx(MessageCircle, { size: 18, strokeWidth: 1.7 }) });
+}
+export function NotificationCenter({ notifications: initial, label = "Notifications", onReadChange, onDismiss, open, onOpenChange, avoidCollisions = true }) {
+    const reduce = useReducedMotion();
+    const layoutId = useId();
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [items, setItems] = useState(initial);
+    const [view, setView] = useState("all");
+    const [expandedId, setExpandedId] = useState(null);
+    const [bulk, setBulk] = useState(false);
+    const itemRefs = useRef(new Map());
+    const allTabRef = useRef(null);
+    const unreadTabRef = useRef(null);
+    const isOpen = open ?? internalOpen;
+    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);
+    const readCount = items.length - unreadCount;
+    const visible = view === "unread" ? items.filter((item) => !item.read) : items;
+    const summary = unreadCount ? `${unreadCount} update${unreadCount === 1 ? "" : "s"} waiting for you` : "You’re all caught up";
+    function setOpen(next) {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }
+    function toggleRead(item) {
+        const next = !item.read;
+        if (next && view === "unread") {
+            const index = visible.findIndex((entry) => entry.id === item.id);
+            const nextId = visible[index + 1]?.id ?? visible[index - 1]?.id;
+            requestAnimationFrame(() => nextId ? itemRefs.current.get(nextId)?.focus() : unreadTabRef.current?.focus());
+        }
+        setBulk(false);
+        setItems((current) => current.map((entry) => entry.id === item.id ? { ...entry, read: next } : entry));
+        if (next && view === "unread")
+            setExpandedId(null);
+        onReadChange?.(item, next);
+    }
+    function markAllRead() {
+        items.filter((item) => !item.read).forEach((item) => onReadChange?.(item, true));
+        setBulk(true);
+        setItems((current) => current.map((item) => ({ ...item, read: true })));
+        setExpandedId(null);
+        requestAnimationFrame(() => (view === "unread" ? unreadTabRef : allTabRef).current?.focus());
+    }
+    function dismiss(item) {
+        const index = visible.findIndex((entry) => entry.id === item.id);
+        const nextId = visible[index + 1]?.id ?? visible[index - 1]?.id;
+        requestAnimationFrame(() => nextId ? itemRefs.current.get(nextId)?.focus() : unreadTabRef.current?.focus());
+        setBulk(false);
+        setItems((current) => current.filter((entry) => entry.id !== item.id));
+        if (expandedId === item.id)
+            setExpandedId(null);
+        onDismiss?.(item);
+    }
+    function clearRead() {
+        items.filter((item) => item.read).forEach((item) => onDismiss?.(item));
+        setBulk(true);
+        setItems((current) => current.filter((item) => !item.read));
+        requestAnimationFrame(() => allTabRef.current?.focus());
+    }
+    const height = reduce ? instant : { height: motionTokens.spring.smooth, opacity: enter };
+    return _jsxs(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { className: styles.trigger, type: "button", "aria-label": `${label}${unreadCount ? `, ${unreadCount} unread` : ""}`, children: [_jsx(motion.span, { animate: { rotate: isOpen && !reduce ? -12 : 0 }, transition: reduce ? instant : motionTokens.spring.snappy, children: _jsx(Bell, { size: 19, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx(AnimatePresence, { initial: false, children: unreadCount > 0 && _jsx(motion.span, { className: styles.badge, "aria-hidden": "true", initial: reduce ? { opacity: 0 } : { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: reduce ? fadeOut : { opacity: 0, scale: .6, transition: exitFast }, transition: reduce ? instant : motionTokens.spring.snappy, children: _jsx(RollingCount, { value: unreadCount, display: unreadCount > 9 ? "9+" : String(unreadCount), reduce: reduce }) }, "badge") })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { className: styles.panel, align: "center", side: "bottom", sideOffset: 12, collisionPadding: 12, avoidCollisions: avoidCollisions, "aria-label": label, children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { children: [_jsxs("div", { className: styles.heading, children: [_jsx("h2", { children: label }), _jsx("span", { className: styles.count, children: _jsx(RollingCount, { value: unreadCount, reduce: reduce }) })] }), _jsx("p", { "aria-live": "polite", children: _jsx(SwapText, { reduce: reduce, children: summary }) })] }), _jsx(PopoverPrimitive.Close, { className: styles.close, "aria-label": "Close notifications", children: _jsx(X, { size: 17, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: styles.toolbar, children: [_jsx("div", { className: styles.viewSwitch, role: "group", "aria-label": "Show notifications", children: ["all", "unread"].map((next) => _jsxs("button", { ref: next === "unread" ? unreadTabRef : allTabRef, type: "button", className: view === next ? styles.viewActive : undefined, "aria-pressed": view === next, onClick: () => { setBulk(false); setView(next); setExpandedId(null); }, children: [view === next && _jsx(motion.span, { className: styles.viewHighlight, layoutId: `${layoutId}-view`, transition: reduce ? instant : motionTokens.spring.morph }), _jsx("span", { children: next === "all" ? "All" : "Unread" })] }, next)) }), _jsx(AnimatePresence, { initial: false, children: unreadCount > 0 && _jsxs(motion.button, { type: "button", className: styles.markAll, onClick: markAllRead, initial: reduce ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: reduce ? fadeOut : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast }, transition: reduce ? instant : enter, children: [_jsx(CheckCheck, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { children: "Mark all read" })] }, "mark-all") })] }), _jsx("div", { className: styles.list, role: "list", "aria-label": view === "all" ? "All notifications" : "Unread notifications", children: _jsxs(AnimatePresence, { initial: false, custom: bulk, children: [visible.map((item, index) => _jsx(motion.div, { role: "listitem", className: styles.row, custom: bulk, variants: { exit: (isBulk) => reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: { ...motionTokens.spring.smooth, delay: isBulk ? cascade(index) : 0 }, opacity: { ...exitFast, delay: isBulk ? cascade(index) : 0 } } } }, initial: reduce ? { opacity: 0 } : { height: 0 }, animate: { height: "auto", opacity: 1 }, exit: "exit", transition: height, children: _jsxs("article", { className: [styles.item, item.read ? styles.itemRead : "", expandedId === item.id ? styles.itemExpanded : ""].filter(Boolean).join(" "), style: { "--index": Math.min(index, 7) }, children: [_jsxs("div", { className: styles.itemMain, children: [_jsx(NotificationVisual, { item: item }), _jsxs("button", { ref: (node) => { if (node)
+                                                                itemRefs.current.set(item.id, node);
+                                                            else
+                                                                itemRefs.current.delete(item.id); }, type: "button", className: styles.itemToggle, "aria-expanded": expandedId === item.id, "aria-label": `${item.title}${item.read ? "" : ", unread"}. ${expandedId === item.id ? "Hide details" : "Show details"}`, onClick: () => setExpandedId((current) => current === item.id ? null : item.id), children: [_jsxs("span", { className: styles.itemTitle, children: [_jsx("strong", { children: item.title }), _jsx(AnimatePresence, { initial: false, custom: bulk, children: !item.read && _jsx(motion.span, { className: styles.unreadDot, "aria-hidden": "true", custom: bulk, variants: { exit: (isBulk) => reduce ? fadeOut : { opacity: 0, scale: .3, transition: { ...exitFast, delay: isBulk ? cascade(index) : 0 } } }, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: .3 }, animate: { opacity: 1, scale: 1 }, exit: "exit", transition: reduce ? instant : motionTokens.spring.snappy }, "dot") })] }), _jsx("span", { className: styles.itemPreview, children: item.description ?? (item.actor ? `From ${item.actor.name}` : "View update details") })] }), _jsx("time", { className: styles.time, children: item.time })] }), _jsx(AnimatePresence, { initial: false, children: expandedId === item.id && _jsxs(motion.div, { className: styles.details, initial: reduce ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: motionTokens.spring.smooth, opacity: exitFast } }, transition: height, children: [_jsx("p", { children: item.description ?? (item.actor ? `${item.actor.name} shared an update with you.` : "This update is ready to review.") }), _jsxs("div", { className: styles.itemActions, children: [_jsx("button", { type: "button", onClick: () => toggleRead(item), children: _jsxs(MorphWidth, { reduce: reduce, morphKey: item.read ? "read" : "unread", children: [_jsx("span", { className: styles.actionIcon, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.actionGlyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? instant : motionTokens.spring.snappy, children: item.read ? _jsx(CircleDot, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) : _jsx(Check, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, item.read ? "unread" : "read") }) }), _jsx(SwapText, { reduce: reduce, children: item.read ? "Mark unread" : "Mark read" })] }) }), _jsxs("button", { type: "button", onClick: () => dismiss(item), children: [_jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), "Dismiss"] })] })] }) })] }) }, item.id)), visible.length === 0 && _jsx(motion.div, { className: styles.emptyFrame, initial: reduce ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: motionTokens.spring.smooth, opacity: exitFast } }, transition: reduce ? instant : { height: { ...motionTokens.spring.smooth, delay: bulk ? cascade(3) : 0 }, opacity: { ...enter, delay: motionTokens.duration.fast } }, children: _jsxs(motion.div, { className: styles.empty, initial: reduce ? false : { y: 6 }, animate: { y: 0 }, transition: reduce ? instant : { ...enter, delay: motionTokens.duration.fast }, children: [_jsx(CircleCheck, { size: 24, strokeWidth: 1.5, "aria-hidden": "true" }), _jsx("strong", { children: _jsx(SwapText, { reduce: reduce, children: view === "unread" ? "Nothing unread" : "All clear" }) }), _jsx("p", { children: _jsx(SwapText, { reduce: reduce, children: view === "unread" ? "You’ve seen every update." : "New updates will appear here." }) }), view === "unread" && items.length > 0 && _jsx("button", { type: "button", onClick: () => { setBulk(false); setView("all"); }, children: "View all updates" })] }) }, "empty")] }) }), _jsx(AnimatePresence, { initial: false, children: readCount > 0 && _jsx(motion.div, { className: styles.footerFrame, initial: reduce ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: motionTokens.spring.smooth, opacity: exitFast } }, transition: height, children: _jsxs("div", { className: styles.footer, children: [_jsxs("span", { children: [_jsx(RollingCount, { value: readCount, reduce: reduce }), " read"] }), _jsx("button", { type: "button", onClick: clearRead, children: "Clear read" })] }) }, "footer") })] }) })] });
+}
+export default NotificationCenter;

package/components/notification-center/notification-center.module.css

@@ -0,0 +1,79 @@
+.trigger { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); color: var(--foreground); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
+.trigger[data-state="open"], .trigger:active { border-color: var(--border-strong); background: var(--surface-muted); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover { border-color: var(--border-strong); background: var(--surface-muted); } }
+.trigger > span:first-child { display: grid; place-items: center; }
+.badge { position: absolute; top: -6px; right: -6px; display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; overflow: hidden; border: 2px solid var(--surface); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
+.panel { z-index: 90; display: flex; flex-direction: column; width: min(424px, calc(100vw - 24px)); max-height: min(590px, calc(100vh - 24px)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); }
+/* The panel grows out of the bell: it starts a few pixels toward the trigger on whichever side Radix placed it, and leaves faster than it arrives. */
+.panel { --panel-x: 0px; --panel-y: -6px; }
+.panel[data-side="top"] { --panel-y: 6px; }
+.panel[data-side="left"] { --panel-x: 6px; --panel-y: 0px; }
+.panel[data-side="right"] { --panel-x: -6px; --panel-y: 0px; }
+.panel[data-state="open"] { animation: panel-open var(--duration-standard) var(--ease-enter) both; }
+.panel[data-state="closed"] { animation: panel-close var(--duration-instant) var(--ease-standard) both; }
+.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 23px 24px 18px; }
+.heading { display: flex; align-items: center; gap: var(--space-related); }
+.heading h2 { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.2; }
+.count { display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
+.header p { position: relative; margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
+.close { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
+.close:active { transform: scale(.96); }
+.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 17px 13px 20px; border-bottom: 1px solid var(--border-subtle); }
+.viewSwitch { display: inline-flex; align-items: center; gap: 3px; }
+.viewSwitch button { position: relative; isolation: isolate; min-width: 61px; height: 31px; padding: 0 10px; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }
+.viewSwitch .viewActive { color: var(--foreground); }
+.viewSwitch button > span:last-child { position: relative; z-index: 1; }
+.viewHighlight { position: absolute; z-index: -1; inset: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.markAll { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.markAll:active { transform: scale(.97); }
+.list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 11px 10px; scrollbar-width: none; }
+.list::-webkit-scrollbar { display: none; }
+.row { overflow: hidden; }
+/* Rows settle in with a short cascade when the panel opens or a view adds them. */
+.item { position: relative; padding: 10px; border-radius: calc(var(--radius-container) - 12px); corner-shape: var(--corner-shape); transition: background var(--duration-fast) var(--ease-standard); animation: item-in var(--duration-standard) var(--ease-enter) calc(var(--index, 0) * 35ms) both; }
+.itemExpanded { background: var(--surface-muted); }
+.itemRead .itemTitle strong { color: var(--text-secondary); }
+.itemMain { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
+.eventIcon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--accent); }
+.eventIcon.success { color: var(--success); }
+.eventIcon.warning { color: var(--warning); }
+.itemToggle { display: grid; min-width: 0; flex: 1; gap: 4px; padding: 2px 0 0; border: 0; background: transparent; color: var(--foreground); text-align: left; font: inherit; cursor: pointer; }
+.itemTitle { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; }
+.itemTitle strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
+.unreadDot { display: block; width: 6px; height: 6px; flex: none; border-radius: 50%; corner-shape: round; background: var(--foreground); }
+.itemPreview { overflow: hidden; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
+.time { flex: none; padding-top: 4px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.details { overflow: hidden; padding-left: 47px; }
+.details p { margin: 12px 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); }
+.itemActions { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 5px; }
+.itemActions button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
+.itemActions button:active { transform: scale(.97); }
+/* Quick press, spring release: the resting transition above carries the spring back. */
+.close:active, .markAll:active, .itemActions button:active, .footer button:active { transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+.morph { display: inline-flex; align-items: center; }
+.morphContent { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
+.actionIcon, .actionGlyph { position: relative; display: grid; place-items: center; }
+.swap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+.swapLine { display: block; }
+.roll { position: relative; display: inline-grid; vertical-align: top; }
+.rollValue { display: block; }
+.emptyFrame { overflow: hidden; }
+.empty { display: grid; justify-items: center; align-content: center; min-height: 190px; padding: 22px 12px; text-align: center; }
+.empty > svg { margin-bottom: 13px; color: var(--text-muted); }
+.empty strong { font-size: var(--text-sm); font-weight: 500; }
+.empty p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
+.empty button { margin-top: 16px; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.footerFrame { flex: none; overflow: hidden; }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 22px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-xs); }
+.footer button { padding: 4px 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.footer button:active { transform: scale(.97); }
+@media (hover: hover) and (pointer: fine) {
+  .close:hover, .item:hover { background: var(--surface-muted); }
+  .close:hover, .viewSwitch button:hover, .markAll:hover, .footer button:hover { color: var(--foreground); }
+  .itemActions button:hover { border-color: var(--border-strong); background: var(--surface); }
+}
+@keyframes panel-open { from { opacity: 0; transform: translate(var(--panel-x), var(--panel-y)) scale(.97); } }
+@keyframes panel-close { to { opacity: 0; transform: translate(calc(var(--panel-x) / 2), calc(var(--panel-y) / 2)) scale(.98); } }
+@keyframes item-in { from { opacity: 0; transform: translateY(4px); } }
+@media (max-width: 380px) { .header { padding: 20px 16px 16px; } .heading h2 { font-size: var(--text-lg); } .toolbar { align-items: flex-start; padding: 0 12px 12px; } .list { padding: 8px 5px; } .item { padding-inline: 7px; } .itemMain { gap: 7px; } .details { padding-left: 43px; } .itemActions { gap: 5px; } .itemActions button { padding-inline: 7px; } .markAll span { display: none; } .footer { padding-inline: 16px; } }
+@media (prefers-reduced-motion: reduce) { .panel[data-state], .trigger, .close, .viewSwitch button, .markAll, .item, .itemActions button, .footer button { animation: none; transition-duration: 0ms; } .close:active, .markAll:active, .itemActions button:active, .footer button:active { transform: none; } }

package/components/number-field/number-field.d.ts

@@ -0,0 +1,41 @@
+/** Text shown beside the number. A function receives the value, so a unit can follow it: `n => n === 1 ? " seat" : " seats"`. */
+export type NumberFieldAffix = string | ((value: number) => string);
+export interface NumberFieldProps {
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** PageUp, PageDown, and Shift with an arrow move this far. Defaults to ten steps. */
+    largeStep?: number;
+    description?: string;
+    disabled?: boolean;
+    id?: string;
+    /** Text before the number, such as "$". */
+    prefix?: NumberFieldAffix;
+    /** Text after the number, such as " seats". */
+    suffix?: NumberFieldAffix;
+    /** Drag the label sideways to scrub the value, one step every few pixels. */
+    scrub?: boolean;
+    /** Formatting locale. Fixed by default so server and client render the same digits. */
+    locale?: string;
+    /** Fraction digits and grouping. Fraction digits follow the precision of `step` by default. */
+    formatOptions?: {
+        minimumFractionDigits?: number;
+        maximumFractionDigits?: number;
+        useGrouping?: boolean;
+    };
+    /** Control height, type size, and default width. */
+    size?: NumberFieldSize;
+    /** A short note beside the label when a press meets a limit or a typed value passes one. `false` hides it; a function writes the copy. */
+    limitHint?: boolean | ((edge: "min" | "max", limit: number) => string);
+}
+export type NumberFieldSize = "sm" | "md" | "lg";
+/**
+ * A bounded number with odometer digits. Buttons and arrow keys repeat and speed up while held, PageUp and PageDown take
+ * large steps, Home and End jump to the limits, and `scrub` lets the label be dragged. Typing edits a plain draft that
+ * applies live while valid; the rolling digits return once it commits on Enter, blur, or the next step.
+ */
+export declare function NumberField({ label, value, defaultValue, onValueChange, min, max, step: stepProp, largeStep, description, disabled, id, prefix, suffix, scrub, locale, formatOptions, size, limitHint }: NumberFieldProps): import("react").JSX.Element;