@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/user-menu/user-menu.js

@@ -0,0 +1,316 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown, LoaderCircle, LogOut, Monitor, Moon, Sun, SunMoon } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./user-menu.module.css";
+/** Statuses in menu order. Each one has its own dot shape as well as color: solid, barred, or hollow. */
+export const userStatuses = [
+    { value: "available", label: "Available" },
+    { value: "busy", label: "Busy" },
+    { value: "away", label: "Away" },
+];
+const themes = [
+    { value: "light", label: "Light", icon: _jsx(Sun, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) },
+    { value: "dark", label: "Dark", icon: _jsx(Moon, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) },
+    { value: "system", label: "System", icon: _jsx(Monitor, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) },
+];
+const compactQuery = "(max-width: 639px)";
+const subscribeCompact = (change) => { const query = window.matchMedia(compactQuery); query.addEventListener("change", change); return () => query.removeEventListener("change", change); };
+const subscribeNothing = () => () => { };
+const statusLabel = (status) => userStatuses.find(option => option.value === status)?.label ?? status;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const exitEase = [0.4, 0, 1, 1];
+/** The panel grows out of the trigger on a critically damped spring; rows follow a beat later. Closing is a short fade. */
+const panelMotion = {
+    closed: { opacity: 0, scale: .94 },
+    open: { opacity: 1, scale: 1, transition: { type: "spring", visualDuration: .3, bounce: 0, opacity: { duration: motionTokens.duration.fast, ease: enter }, delayChildren: .03, staggerChildren: .016 } },
+    exit: { opacity: 0, scale: .97, transition: { duration: motionTokens.duration.instant, ease: exitEase } },
+};
+const sheetMotion = {
+    closed: { y: "100%" },
+    open: { y: 0, transition: { ...motionTokens.spring.smooth, visualDuration: .36, delayChildren: .06, staggerChildren: .02 } },
+    exit: { y: "100%", transition: { duration: .22, ease: exitEase } },
+};
+const stillMotion = { closed: { opacity: 0 }, open: { opacity: 1, transition: { duration: motionTokens.duration.instant } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
+const rowMotion = { closed: { opacity: 0, y: 3 }, open: { opacity: 1, y: 0, transition: { duration: .2, ease: enter } } };
+/** A presence mark that morphs between statuses: the color crossfades while a hole opens for away and a bar slides in for busy. */
+export function PresenceDot({ status, className }) {
+    return _jsx("span", { className: [styles.dot, className].filter(Boolean).join(" "), "data-status": status, "aria-hidden": "true" });
+}
+function Portrait({ user }) {
+    const [failed, setFailed] = useState();
+    if (!user.avatarSrc || failed === user.avatarSrc) {
+        const initials = user.name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+        return _jsx("span", { className: `${styles.portrait} ${styles.initials}`, "aria-hidden": "true", children: initials });
+    }
+    // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic; pass optimized URLs as avatarSrc and avatarSrcSet.
+    return _jsx("img", { className: styles.portrait, src: user.avatarSrc, srcSet: user.avatarSrcSet, alt: "", decoding: "async", draggable: false, onError: () => setFailed(user.avatarSrc) });
+}
+function Face({ user, status, size }) {
+    return _jsxs("span", { className: styles.face, "data-size": size, children: [_jsx(Portrait, { user: user }), status && _jsx(PresenceDot, { status: status })] });
+}
+/** Changing text rises out of a small blur while the old text lifts away. */
+function Rise({ text, reduced }) {
+    return _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.rise, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.35em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: standard } }, transition: reduced ? { duration: 0 } : { duration: motionTokens.duration.standard, ease: enter }, children: text }, text) });
+}
+function Keys({ keys }) {
+    return _jsx("kbd", { className: styles.keys, "aria-hidden": "true", children: keys.map((key, index) => _jsx("kbd", { className: styles.key, children: key }, `${key}-${index}`)) });
+}
+/** A compact inline switch. It is one stop in the menu: up and down pass over it, left and right choose within it. */
+function Segmented({ label, icon, value, options, onChange, variants }) {
+    const index = Math.max(0, options.findIndex(option => option.value === value));
+    return _jsxs(motion.div, { className: styles.row, "data-stop": "group", "data-label": label, variants: variants, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }), _jsx("span", { className: styles.rowLabel, "aria-hidden": "true", children: label }), _jsxs("div", { className: styles.segments, role: "group", "aria-label": label, style: { "--index": index, "--count": options.length }, children: [_jsx("span", { className: styles.thumb, "aria-hidden": "true" }), options.map(option => _jsx("button", { type: "button", role: "menuitemradio", tabIndex: -1, "aria-checked": option.value === value, "aria-label": option.label, title: option.label, className: styles.segment, onClick: () => onChange(option.value), children: option.icon }, option.value))] })] });
+}
+const getStops = (root) => Array.from(root?.querySelectorAll("[data-stop]") ?? []);
+function focusStop(stop) {
+    if (!stop)
+        return;
+    const target = stop.dataset.stop === "group" ? stop.querySelector('[aria-checked="true"]') ?? stop.querySelector("button") : stop;
+    target?.focus({ preventScroll: true });
+}
+export function UserMenu({ user, status: statusProp, defaultStatus = "available", onStatusChange, theme: themeProp, defaultTheme = "system", onThemeChange, showTheme = true, items = [], onSignOut, signOutKeys, align = "end", showName = false, open: openProp, defaultOpen = false, onOpenChange, portal = true, ref, className }) {
+    const id = useId();
+    const menuId = `${id}-menu`;
+    const triggerId = `${id}-trigger`;
+    const reduced = !!useReducedMotion();
+    const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+    const compact = useSyncExternalStore(subscribeCompact, () => window.matchMedia(compactQuery).matches, () => false);
+    const [innerOpen, setInnerOpen] = useState(defaultOpen);
+    const [innerStatus, setInnerStatus] = useState(defaultStatus);
+    const [innerTheme, setInnerTheme] = useState(defaultTheme);
+    const [signingOut, setSigningOut] = useState(false);
+    const [highlight, setHighlight] = useState(null);
+    const open = openProp ?? innerOpen;
+    const showStatus = statusProp !== undefined || onStatusChange !== undefined;
+    const status = statusProp ?? innerStatus;
+    const theme = themeProp ?? innerTheme;
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const listRef = useRef(null);
+    const reason = useRef(null);
+    const typed = useRef({ text: "", timer: 0 });
+    const mounted = useRef(true);
+    const pending = useRef(false);
+    const sheet = hydrated && compact;
+    const inline = !portal && !sheet;
+    useEffect(() => { mounted.current = true; const current = typed.current; return () => { mounted.current = false; window.clearTimeout(current.timer); }; }, []);
+    function setTriggerRef(node) {
+        triggerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }
+    function setOpen(next, why = null) {
+        reason.current = next ? why : null;
+        if (next)
+            setSigningOut(pending.current);
+        setHighlight(null);
+        setInnerOpen(next);
+        onOpenChange?.(next);
+    }
+    function close(returnFocus) {
+        setOpen(false);
+        if (returnFocus)
+            triggerRef.current?.focus({ preventScroll: true });
+    }
+    // Focus moves in only when a person opened the menu, so a menu that starts open never steals focus or scrolls the page.
+    useEffect(() => {
+        if (!open)
+            return;
+        const why = reason.current;
+        reason.current = null;
+        if (!why)
+            return;
+        const frame = requestAnimationFrame(() => {
+            const stops = getStops(listRef.current);
+            if (why === "first")
+                focusStop(stops[0]);
+            else if (why === "last")
+                focusStop(stops.at(-1));
+            else
+                surfaceRef.current?.focus({ preventScroll: true });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [open, sheet]);
+    // The panel is placed against the trigger and scales from the avatar's center, flipping above when there is no room below.
+    useLayoutEffect(() => {
+        if (!open || sheet)
+            return;
+        const place = () => {
+            const panel = surfaceRef.current, trigger = triggerRef.current;
+            if (!panel || !trigger)
+                return;
+            const rect = trigger.getBoundingClientRect();
+            const width = panel.offsetWidth, height = panel.offsetHeight;
+            let left, top;
+            if (inline) {
+                const root = rootRef.current?.getBoundingClientRect();
+                left = (root?.left ?? 0) + panel.offsetLeft;
+                top = (root?.top ?? 0) + panel.offsetTop;
+            }
+            else {
+                const wanted = align === "start" ? rect.left : align === "center" ? rect.left + rect.width / 2 - width / 2 : rect.right - width;
+                left = Math.min(Math.max(12, wanted), window.innerWidth - width - 12);
+                const below = rect.bottom + 8;
+                top = below + height > window.innerHeight - 12 && rect.top - 8 - height > 12 ? rect.top - 8 - height : below;
+                panel.style.left = `${left}px`;
+                panel.style.top = `${top}px`;
+            }
+            const faceCenter = rect.left + Math.min(rect.width, 40) / 2;
+            const originX = align === "end" && rect.width > 40 ? rect.right - 20 - left : faceCenter - left;
+            panel.style.setProperty("--origin-x", `${Math.min(Math.max(0, originX), width)}px`);
+            panel.style.setProperty("--origin-y", top < rect.top ? `${height}px` : "0px");
+        };
+        place();
+        if (inline)
+            return;
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => { window.removeEventListener("resize", place); window.removeEventListener("scroll", place, true); };
+    }, [open, sheet, inline, align]);
+    // Outside presses close the panel. The sheet has its own scrim.
+    useEffect(() => {
+        if (!open || sheet)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (surfaceRef.current?.contains(target) || triggerRef.current?.contains(target))
+                return;
+            reason.current = null;
+            setHighlight(null);
+            setInnerOpen(false);
+            onOpenChange?.(false);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => document.removeEventListener("pointerdown", onPointerDown, true);
+    }, [open, sheet, onOpenChange]);
+    // The page behind the sheet stays put.
+    useEffect(() => {
+        if (!open || !sheet)
+            return;
+        const root = document.documentElement;
+        const previous = root.style.overflow;
+        root.style.overflow = "hidden";
+        return () => { root.style.overflow = previous; };
+    }, [open, sheet]);
+    function changeStatus(value) { setInnerStatus(value); onStatusChange?.(value); }
+    function changeTheme(value) { setInnerTheme(value); onThemeChange?.(value); }
+    function signOut() {
+        if (pending.current)
+            return;
+        const result = onSignOut?.();
+        if (!result || typeof result.then !== "function") {
+            close(true);
+            return;
+        }
+        // Async sign out keeps the menu open with its progress on the item, then closes once it settles.
+        pending.current = true;
+        setSigningOut(true);
+        const done = () => { pending.current = false; if (mounted.current)
+            close(false); };
+        result.then(done, done);
+    }
+    function onListFocus(event) {
+        const stop = event.target instanceof HTMLElement ? event.target.closest("[data-stop]") : null;
+        if (!stop) {
+            setHighlight(null);
+            return;
+        }
+        setHighlight(current => ({ top: stop.offsetTop, height: stop.offsetHeight, tone: stop.dataset.tone, glide: current !== null }));
+    }
+    // Focus follows a mouse or pen, so the keyboard carries on from wherever the pointer left the highlight.
+    function onItemPointerMove(event) {
+        if (event.pointerType === "touch")
+            return;
+        if (document.activeElement !== event.currentTarget)
+            event.currentTarget.focus({ preventScroll: true });
+    }
+    // The inline switches are not rows, so the pointer over them releases the highlight instead of dragging it along.
+    function onListPointerMove(event) {
+        if (event.pointerType === "touch" || !highlight)
+            return;
+        const group = event.target instanceof HTMLElement ? event.target.closest('[data-stop="group"]') : null;
+        if (!group || group.contains(document.activeElement))
+            return;
+        setHighlight(null);
+        surfaceRef.current?.focus({ preventScroll: true });
+    }
+    function onListPointerLeave(event) {
+        if (event.pointerType === "touch")
+            return;
+        setHighlight(null);
+        surfaceRef.current?.focus({ preventScroll: true });
+    }
+    function onKeyDown(event) {
+        const stops = getStops(listRef.current);
+        const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const current = active?.closest("[data-stop]") ?? null;
+        const index = current ? stops.indexOf(current) : -1;
+        const step = (to) => { event.preventDefault(); focusStop(to); };
+        switch (event.key) {
+            case "ArrowDown": return step(stops[(index + 1) % stops.length]);
+            case "ArrowUp": return step(stops[index <= 0 ? stops.length - 1 : index - 1]);
+            case "Home": return step(stops[0]);
+            case "End": return step(stops.at(-1));
+            case "Escape":
+            case "Tab":
+                event.preventDefault();
+                return close(true);
+            case "ArrowLeft":
+            case "ArrowRight": {
+                if (current?.dataset.stop !== "group")
+                    return;
+                event.preventDefault();
+                const segments = Array.from(current.querySelectorAll('[role="menuitemradio"]'));
+                const at = Math.max(0, segments.findIndex(segment => segment.getAttribute("aria-checked") === "true"));
+                const next = segments[(at + (event.key === "ArrowRight" ? 1 : -1) + segments.length) % segments.length];
+                next?.focus({ preventScroll: true });
+                next?.click();
+                return;
+            }
+        }
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || event.key === " ")
+            return;
+        // Typeahead: letters jump to the next row whose label starts with what was typed.
+        const memory = typed.current;
+        window.clearTimeout(memory.timer);
+        memory.text += event.key.toLowerCase();
+        memory.timer = window.setTimeout(() => { memory.text = ""; }, 500);
+        const ordered = [...stops.slice(index + 1), ...stops.slice(0, index + 1)];
+        const search = memory.text.length > 1 && current?.dataset.label?.toLowerCase().startsWith(memory.text) ? [current] : ordered;
+        const match = search.find(stop => stop.dataset.label?.toLowerCase().startsWith(memory.text));
+        if (match)
+            step(match);
+    }
+    function onTriggerClick(event) {
+        if (open) {
+            close(false);
+            return;
+        }
+        setOpen(true, event.detail === 0 ? "first" : "pointer");
+    }
+    function onTriggerKeyDown(event) {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+            return;
+        event.preventDefault();
+        setOpen(true, event.key === "ArrowDown" ? "first" : "last");
+    }
+    function onDragEnd(_, info) {
+        if (info.offset.y > 80 || info.velocity.y > 500)
+            close(true);
+    }
+    const glide = highlight?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 };
+    const row = reduced ? undefined : rowMotion;
+    const menuProps = { id: menuId, role: "menu", "aria-labelledby": triggerId, tabIndex: -1, onKeyDown };
+    const content = _jsxs(_Fragment, { children: [_jsxs(motion.div, { className: styles.header, variants: row, children: [_jsx(Face, { user: user, status: showStatus ? status : undefined, size: "md" }), _jsxs("div", { className: styles.identity, children: [_jsxs("div", { className: styles.nameRow, children: [_jsx("span", { className: styles.name, children: user.name }), user.plan && _jsx("span", { className: styles.plan, children: user.plan })] }), _jsx("span", { className: styles.email, title: user.email, children: user.email })] })] }), _jsxs("div", { ref: listRef, className: styles.list, onFocus: onListFocus, onPointerMove: onListPointerMove, onPointerLeave: onListPointerLeave, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.tone, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: glide, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.length > 0 && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), items.map(item => _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-label": item.label, variants: row, onPointerMove: onItemPointerMove, onClick: () => { close(true); item.onSelect?.(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), _jsx("span", { className: styles.itemLabel, children: item.label }), item.keys && _jsx(Keys, { keys: item.keys })] }, item.label))] }), (showTheme || showStatus) && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), showStatus && _jsx(Segmented, { label: "Status", icon: _jsx(PresenceDot, { status: status }), value: status, onChange: changeStatus, options: userStatuses.map(option => ({ ...option, icon: _jsx(PresenceDot, { status: option.value }) })), variants: row }), showTheme && _jsx(Segmented, { label: "Theme", icon: _jsx(SunMoon, { size: 16, strokeWidth: 1.75 }), value: theme, onChange: changeTheme, options: themes, variants: row })] }), _jsx("div", { className: styles.separator, role: "separator" }), _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-tone": "danger", "data-label": "Sign out", variants: row, "aria-busy": signingOut || undefined, onPointerMove: onItemPointerMove, onClick: signOut, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: signingOut ? _jsx(LoaderCircle, { className: styles.spinner, size: 16, strokeWidth: 1.75 }) : _jsx(LogOut, { size: 16, strokeWidth: 1.75 }) }), _jsx("span", { className: styles.itemLabel, children: _jsx(Rise, { text: signingOut ? "Signing out" : "Sign out", reduced: reduced }) }), signOutKeys && _jsx(Keys, { keys: signOutKeys })] })] })] });
+    const panel = _jsx(AnimatePresence, { children: open && !sheet && _jsx(motion.div, { ref: surfaceRef, ...menuProps, className: styles.panel, "data-inline": inline || undefined, "data-align": align, variants: reduced ? stillMotion : panelMotion, initial: "closed", animate: "open", exit: "exit", children: content }, "panel") });
+    const bottomSheet = _jsxs(AnimatePresence, { children: [open && sheet && _jsx(motion.div, { className: styles.scrim, "aria-hidden": "true", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduced ? .1 : .2, ease: standard }, onClick: () => close(true) }, "scrim"), open && sheet && _jsxs(motion.div, { ref: surfaceRef, ...menuProps, className: `${styles.panel} ${styles.sheet}`, "aria-modal": "true", variants: reduced ? stillMotion : sheetMotion, initial: "closed", animate: "open", exit: "exit", drag: reduced ? false : "y", dragConstraints: { top: 0, bottom: 0 }, dragElastic: { top: .04, bottom: .9 }, dragMomentum: false, onDragEnd: onDragEnd, children: [_jsx("span", { className: styles.handle, "aria-hidden": "true" }), content] }, "sheet")] });
+    return _jsxs("span", { ref: rootRef, className: styles.root, children: [_jsxs("button", { ref: setTriggerRef, id: triggerId, type: "button", className: [styles.trigger, className].filter(Boolean).join(" "), "data-state": open ? "open" : "closed", "data-name": showName || undefined, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, "aria-label": `Account menu, ${user.name}, ${user.name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("")}${showStatus ? `, ${statusLabel(status)}` : ""}`, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown, children: [_jsx(Face, { user: user, status: showStatus ? status : undefined, size: "sm" }), showName && _jsxs(_Fragment, { children: [_jsx("span", { className: styles.triggerName, children: user.name }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] })] }), sheet ? createPortal(bottomSheet, document.body) : inline ? panel : hydrated ? createPortal(panel, document.body) : null] });
+}
+export default UserMenu;

package/components/user-menu/user-menu.module.css

@@ -0,0 +1,97 @@
+.root { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
+
+/* The trigger anchors the menu, so it answers hover and press with color, never with scale. */
+.trigger { --presence-surface: var(--user-menu-surface, var(--surface)); position: relative; display: inline-flex; height: 40px; flex: none; align-items: center; gap: var(--space-related); margin: 0; padding: 4px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); font: inherit; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+.trigger[data-name] { padding-right: 10px; }
+@media (hover: hover) and (pointer: fine) { .trigger:hover { --presence-surface: var(--surface-muted); background: var(--surface-muted); } }
+.trigger[data-state="open"] { --presence-surface: var(--surface-muted); background: var(--surface-muted); }
+.trigger:active { --presence-surface: color-mix(in oklab, var(--surface-muted), var(--foreground) 8%); background: color-mix(in oklab, var(--surface-muted), var(--foreground) 8%); }
+.triggerName { max-width: 11rem; overflow: hidden; font-weight: 500; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
+.chevron { flex: none; margin-left: -2px; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
+.trigger:hover .chevron, .trigger[data-state="open"] .chevron { color: var(--foreground); }
+.trigger[data-state="open"] .chevron { transform: rotate(180deg); }
+@media (max-width: 639px) {
+  .trigger[data-name] { padding-right: 4px; }
+  .triggerName, .chevron { display: none; }
+}
+
+.face { position: relative; display: inline-grid; width: var(--face-size); height: var(--face-size); flex: none; }
+.face[data-size="sm"] { --face-size: 32px; --dot-size: 11px; }
+.face[data-size="md"] { --face-size: 34px; --dot-size: 10px; }
+.portrait { display: block; width: 100%; height: 100%; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); background: var(--surface-muted); object-fit: cover; object-position: 50% 15%; outline: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent); outline-offset: -1px; user-select: none; }
+.initials { display: grid; place-items: center; color: var(--text-secondary); font-size: calc(var(--face-size) * .36); font-weight: 500; line-height: 1; }
+.face .dot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--presence-surface, var(--surface)); }
+
+/* One mark, three shapes: solid for available, a bar for busy, a ring for away. Color and shape change together, so status never rests on color alone. */
+.dot { --dot-color: var(--success); position: relative; display: inline-block; width: var(--dot-size, 10px); height: var(--dot-size, 10px); flex: none; border-radius: var(--radius-full); corner-shape: round; background: var(--dot-color); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.dot::before, .dot::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--presence-surface, var(--surface)); transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard); }
+.dot::before { width: 46%; height: 46%; border-radius: var(--radius-full); corner-shape: round; transform: scale(0); }
+.dot::after { width: 58%; height: 22%; min-height: 1.5px; border-radius: var(--radius-full); corner-shape: round; transform: scaleX(0); }
+.dot[data-status="busy"] { --dot-color: var(--danger); }
+.dot[data-status="busy"]::after { transform: scaleX(1); }
+.dot[data-status="away"] { --dot-color: var(--warning); }
+.dot[data-status="away"]::before, .dot[data-status="offline"]::before { transform: scale(1); }
+.dot[data-status="offline"] { --dot-color: var(--text-muted); }
+
+/* The panel scales out of the avatar it belongs to; the component sets the origin once it is placed. */
+.panel { --presence-surface: var(--surface-raised); --row: 32px; --inset: 4px; --menu-radius: var(--radius-detail); --menu-line: color-mix(in oklab, var(--foreground) 9%, transparent); position: fixed; top: 0; left: 0; z-index: 60; box-sizing: border-box; width: 15.5rem; max-width: calc(100vw - 24px); padding: var(--inset); border: .5px solid var(--border); border-radius: var(--menu-radius); background: var(--surface-raised); box-shadow: var(--shadow-floating); color: var(--foreground); font-family: var(--font-body); letter-spacing: -.01em; line-height: 1.3; text-align: left; outline: none; transform-origin: var(--origin-x, 100%) var(--origin-y, 0px); }
+.panel[data-inline] { position: absolute; top: calc(100% + 8px); left: auto; }
+.panel[data-inline][data-align="end"] { right: 0; }
+.panel[data-inline][data-align="start"] { left: 0; }
+.panel[data-inline][data-align="center"] { left: 50%; margin-left: -7.75rem; }
+
+.header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px; }
+.identity { display: grid; min-width: 0; flex: 1; gap: 2px; }
+/* The name keeps its room; a long plan or role shrinks and truncates first. */
+.nameRow { display: flex; min-width: 0; align-items: center; gap: 6px; }
+.name { min-width: 0; flex: 0 1 auto; overflow: hidden; color: var(--foreground); font-size: 13px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
+.plan { display: inline-block; min-width: 0; max-width: 55%; flex: 0 100 auto; overflow: hidden; height: 17px; padding: 0 5px; border: .5px solid var(--menu-line); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 4%, transparent); color: var(--text-secondary); font-size: 11px; font-weight: 500; letter-spacing: -.005em; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
+.email { overflow: hidden; color: var(--text-muted); font-size: 12px; letter-spacing: -.008em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
+
+.list { position: relative; }
+.separator { height: .5px; margin: var(--inset) calc(var(--inset) * -1); background: var(--menu-line); }
+@media (max-resolution: 1dppx) { .separator { height: 1px; background: color-mix(in oklab, var(--foreground) 6%, transparent); } }
+
+/* One highlight follows the pointer and the keyboard. It is the only hover treatment in the menu. */
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
+
+.item { position: relative; display: flex; width: 100%; height: var(--row); box-sizing: border-box; align-items: center; gap: 10px; margin: 0; padding: 0 8px; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: 13px; text-align: left; cursor: pointer; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
+.icon { display: inline-grid; width: 16px; flex: none; place-items: center; color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-standard); }
+.item:focus .icon { color: var(--foreground); }
+.itemLabel { position: relative; display: inline-flex; min-width: 0; flex: 1; }
+.rise { display: inline-block; white-space: nowrap; }
+/* Sign out is not destructive, so it stays neutral like every other row. */
+@media (hover: none) { .item:active { background: var(--surface-muted); } }
+
+.keys { display: inline-flex; flex: none; align-items: center; gap: 1px; margin-left: auto; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; opacity: .8; font-variant-numeric: tabular-nums; }
+.key { display: inline-block; min-width: 1.05em; font: inherit; text-align: center; }
+
+.row { position: relative; display: flex; height: 36px; align-items: center; gap: 10px; padding: 0 4px 0 8px; }
+.rowLabel { flex: 1; color: var(--foreground); font-size: 13px; }
+.row .icon .dot { --dot-size: 10px; }
+/* The thumb slides under the icons; the group owns the stacking context. */
+.segments { --segment: 28px; position: relative; isolation: isolate; display: inline-grid; height: 26px; flex: none; grid-auto-columns: var(--segment); grid-auto-flow: column; padding: 2px; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
+.thumb { position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: var(--segment); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: 0 1px 1.5px oklch(0% 0 0 / .08), 0 0 0 .5px var(--menu-line); transform: translateX(calc(var(--index) * 100%)); transition: transform var(--duration-spring) var(--ease-spring); }
+:global([data-theme="dark"]) .thumb { background: color-mix(in oklab, var(--foreground) 20%, var(--surface-raised)); box-shadow: none; }
+.segment { display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: transparent; color: var(--text-muted); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
+.segment .dot { --dot-size: 9px; --presence-surface: var(--surface-raised); }
+@media (hover: hover) and (pointer: fine) { .segment:hover { color: var(--text-secondary); } }
+.segment[aria-checked="true"] { color: var(--foreground); }
+
+.spinner { animation: user-menu-spin .8s linear infinite; }
+@keyframes user-menu-spin { to { transform: rotate(360deg); } }
+
+/* Below 640px the same content rises as a bottom sheet with larger rows. */
+.scrim { position: fixed; inset: 0; z-index: 70; background: oklch(0% 0 0 / .32); -webkit-tap-highlight-color: transparent; }
+.sheet { --row: 46px; --inset: 10px; position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 71; width: auto; max-width: none; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--inset) calc(12px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: var(--radius-container) var(--radius-container) 0 0; corner-shape: var(--corner-shape); }
+.handle { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); cursor: grab; }
+.sheet .header { padding: 4px 8px 12px; }
+.sheet .item, .sheet .rowLabel { font-size: var(--text-base); }
+.sheet .row { height: 52px; }
+.sheet .segments { --segment: 40px; height: 34px; }
+.sheet .keys { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .trigger, .chevron, .dot, .dot::before, .dot::after, .segment, .thumb, .item, .icon { transition: none; }
+  .spinner { animation-duration: 2.4s; }
+}

package/components/waffle-chart/waffle-chart.d.ts

@@ -0,0 +1,39 @@
+import { type Ref } from "react";
+export interface WaffleCategory {
+    /** Stable identity. Cells keep following their category when the data changes, so a new dataset flows instead of repainting. */
+    key: string;
+    /** Name in the legend, the tooltip, and the data table. */
+    label: string;
+    /** Raw amount. Shares are computed from the total; negatives count as zero. */
+    value: number;
+    /** Any CSS color. Defaults to the first series for accentKey, the supporting series for the next three, then neutral steps. */
+    color?: string;
+}
+/** A unit chart: every cell is one share of the whole, so parts of a total read as countable squares. */
+export interface WaffleChartProps {
+    /** Categories in fill order. The first fills from the bottom-left corner, column by column. */
+    data: WaffleCategory[];
+    /** What the whole is, such as "Electricity generation, 2023". Names the chart for assistive technology. */
+    label: string;
+    /** Unit after each raw value in the tooltip and table, such as "TWh". */
+    unit?: string;
+    formatValue?: (value: number, category: WaffleCategory) => string;
+    /** Grid rows. rows × columns cells make the whole; 10 × 10 means one cell per percent. */
+    rows?: number;
+    columns?: number;
+    /** The category painted in the accent. Pass null to keep every category neutral. Defaults to the first category. */
+    accentKey?: string | null;
+    /** Controlled focused category. Others dim while one is focused. */
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onActiveChange?: (key: string | null) => void;
+    /** Category list with shares that roll to their new value. */
+    legend?: boolean;
+    /** Decimal places for shares. */
+    decimals?: number;
+    emptyLabel?: string;
+    ref?: Ref<HTMLElement>;
+    className?: string;
+}
+export declare function WaffleChart({ data, label, unit, formatValue, rows, columns, accentKey, activeKey, defaultActiveKey, onActiveChange, legend, decimals, emptyLabel, ref, className }: WaffleChartProps): import("react").JSX.Element;
+export default WaffleChart;