@teamofsilicons/silicon-ui 0.2.0 → 0.3.0

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,16 +1,86 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+/** The menu's state. Uncontrolled by default; pass `open` and `onOpenChange` to control it. */
+export declare function DropdownMenuRoot(props: ComponentPropsWithoutRef<typeof DropdownPrimitive.Root>): import("react").JSX.Element;
+export interface DropdownMenuTriggerProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Trigger> {
+    /** Render your own trigger (an icon-only Button with an aria-label, an avatar and name) instead of the default one. */
+    asChild?: boolean;
+}
+/** What opens the menu. Without `asChild` it is the default outlined trigger with a chevron. */
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Content> {
+    /** Which side of the trigger it opens on (default bottom). */
+    side?: "top" | "right" | "bottom" | "left";
+    /** How it lines up with the trigger (default end). */
+    align?: "start" | "center" | "end";
+}
+/** The menu itself. One highlight glides between items for the pointer and jumps instantly for the keyboard. */
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Item> {
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+    /** A keyboard shortcut hint after the label, such as "⌘D". Shown only; bind the keys yourself. */
+    shortcut?: string;
+    /** A destructive action (delete, remove): shown in the danger colour. */
+    destructive?: boolean;
+    /** Make your own element the item, such as a link: `<DropdownMenuItem asChild><a href="/q3">Q3 2026</a></DropdownMenuItem>`.
+     *  Its children become the label, and Enter follows the link. */
+    asChild?: boolean;
+}
+/** One action, or with `asChild` one link. */
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuCheckboxItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.CheckboxItem> {
+    /** A keyboard shortcut hint after the label. */
+    shortcut?: string;
+}
+/** An on/off setting, such as "Full width". A check shows in the icon column while it is on. */
+export declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/** One choice out of several (the current space, a sort order). Wrap DropdownMenuRadioItems in it. */
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuRadioItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem> {
+    /** A 16px icon or avatar before the label; the check shows at the end while this is the current choice. */
+    icon?: ReactNode;
+}
+/** One of the choices in a DropdownMenuRadioGroup. The current choice shows a check at the end. */
+export declare const DropdownMenuRadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A section heading inside the menu, such as "Spaces". Not focusable. */
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** A hairline between groups of items. */
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Groups items for assistive technology, without visual change. */
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A nested menu: a DropdownMenuSubTrigger and its DropdownMenuSubContent. */
+export declare const DropdownMenuSub: import("react").FC<DropdownPrimitive.DropdownMenuSubProps>;
+export interface DropdownMenuSubTriggerProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.SubTrigger> {
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+}
+/** The item that opens a submenu (on hover, click, or the right arrow key). */
+export declare const DropdownMenuSubTrigger: import("react").ForwardRefExoticComponent<DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+/** The submenu's own menu, opening beside its trigger. */
+export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface DropdownItem {
+    /** The item's text. */
     label: string;
+    /** Runs when the item is chosen. */
     onSelect?: () => void;
+    /** Shown but not choosable. */
     disabled?: boolean;
+    /** A 16px icon before the label. */
     icon?: ReactNode;
+    /** A destructive action, shown in the danger colour. */
     destructive?: boolean;
+    /** Draws a separator above this item. */
     separatorBefore?: boolean;
 }
 export interface DropdownMenuProps {
+    /** The trigger's text; when it names the current choice, a new label rises in and the trigger springs to its width. */
     label: string;
+    /** The actions, in order. */
     items: DropdownItem[];
+    /** An icon before the trigger's text. */
     icon?: ReactNode;
 }
+/** The shorthand: a labelled trigger and a flat list of actions, built from the parts above. */
 export declare function DropdownMenu({ label, items, icon }: DropdownMenuProps): import("react").JSX.Element;
 export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.js

@@ -1,12 +1,107 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useLayoutEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Dropdown menu: a list of actions behind a trigger.
+ *
+ * Two ways to use it:
+ *
+ *   // Shorthand: a labelled trigger and a flat list.
+ *   <DropdownMenu label="Manage silicon" items={[{ label: "Rename", onSelect: rename }, …]} />
+ *
+ *   // Composable (experimental): any trigger, labels, checked and radio items, shortcuts and submenus.
+ *   <DropdownMenuRoot>
+ *     <DropdownMenuTrigger asChild><Button variant="ghost" aria-label="Page options"><Ellipsis /></Button></DropdownMenuTrigger>
+ *     <DropdownMenuContent align="end">
+ *       <DropdownMenuLabel>Page</DropdownMenuLabel>
+ *       <DropdownMenuItem icon={<Copy />} shortcut="⌘D" onSelect={duplicate}>Duplicate</DropdownMenuItem>
+ *       <DropdownMenuCheckboxItem checked={wide} onCheckedChange={setWide}>Full width</DropdownMenuCheckboxItem>
+ *       <DropdownMenuSub>
+ *         <DropdownMenuSubTrigger icon={<FolderInput />}>Move to</DropdownMenuSubTrigger>
+ *         <DropdownMenuSubContent>…</DropdownMenuSubContent>
+ *       </DropdownMenuSub>
+ *       <DropdownMenuSeparator />
+ *       <DropdownMenuItem destructive icon={<Trash2 />} onSelect={remove}>Delete</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenuRoot>
+ *
+ * Every part shares one look: the same surface, the gliding highlight, the entrance that grows from the trigger.
+ */
+import { Fragment, cloneElement, forwardRef, isValidElement, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { ChevronDown } from "lucide-react";
+import { Check, ChevronDown, ChevronRight } from "lucide-react";
 import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./dropdown-menu.module.css";
+const ITEMS = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+const cx = (...names) => names.filter(Boolean).join(" ");
+/** A menu surface's own ref, also handed to the caller's ref. It numbers the items in order, so their entrance
+ *  staggers whatever groups and parts they sit in. */
+function useSurfaceRef(forwarded) {
+    const own = useRef(null);
+    useImperativeHandle(forwarded, () => own.current, []);
+    useLayoutEffect(() => {
+        own.current?.querySelectorAll(ITEMS).forEach((item, index) => item.style.setProperty("--i", String(index)));
+    });
+    return own;
+}
+/* ------------------------------------------------------------------------------------------------------------------ */
+/* Composable parts                                                                                                    */
+/* ------------------------------------------------------------------------------------------------------------------ */
+/** The menu's state. Uncontrolled by default; pass `open` and `onOpenChange` to control it. */
+export function DropdownMenuRoot(props) {
+    return _jsx(DropdownPrimitive.Root, { ...props });
+}
+/** What opens the menu. Without `asChild` it is the default outlined trigger with a chevron. */
+export const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger({ asChild, className, children, ...props }, ref) {
+    if (asChild)
+        return _jsx(DropdownPrimitive.Trigger, { ...props, ref: ref, asChild: true, children: children });
+    return (_jsxs(DropdownPrimitive.Trigger, { ...props, ref: ref, type: "button", className: cx(styles.trigger, className), children: [children, _jsx(ChevronDown, { className: styles.chevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }));
+});
+/** The menu itself. One highlight glides between items for the pointer and jumps instantly for the keyboard. */
+export const DropdownMenuContent = forwardRef(function DropdownMenuContent({ className, children, side = "bottom", align = "end", sideOffset = 6, collisionPadding = 12, ...props }, ref) {
+    const { highlight, contentProps } = useMenuHighlight(ITEMS);
+    const surface = useSurfaceRef(ref);
+    return (_jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { ...props, ...contentProps, ref: surface, side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, loop: true, className: cx(styles.menu, className), children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), children] }) }));
+});
+/** One action, or with `asChild` one link. */
+export const DropdownMenuItem = forwardRef(function DropdownMenuItem({ icon, shortcut, destructive, asChild, className, children, ...props }, ref) {
+    const content = (label) => _jsxs(_Fragment, { children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: label }), shortcut ? _jsx("kbd", { className: styles.shortcut, children: shortcut }) : null] });
+    const own = asChild && isValidElement(children) ? children : null;
+    return (_jsx(DropdownPrimitive.Item, { ...props, ref: ref, asChild: !!own, className: cx(styles.item, destructive && styles.destructive, className), "data-tone": destructive ? "danger" : undefined, children: own ? cloneElement(own, undefined, content(own.props.children)) : content(children) }));
+});
+/** An on/off setting, such as "Full width". A check shows in the icon column while it is on. */
+export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ shortcut, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.CheckboxItem, { ...props, ref: ref, className: cx(styles.item, className), children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(DropdownPrimitive.ItemIndicator, { children: _jsx(Check, { size: 16, strokeWidth: 2 }) }) }), _jsx("span", { className: styles.itemLabel, children: children }), shortcut ? _jsx("kbd", { className: styles.shortcut, children: shortcut }) : null] }));
+});
+/** One choice out of several (the current space, a sort order). Wrap DropdownMenuRadioItems in it. */
+export const DropdownMenuRadioGroup = DropdownPrimitive.RadioGroup;
+/** One of the choices in a DropdownMenuRadioGroup. The current choice shows a check at the end. */
+export const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({ icon, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.RadioItem, { ...props, ref: ref, className: cx(styles.item, className), children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: children }), _jsx("span", { className: styles.indicator, "aria-hidden": "true", children: _jsx(DropdownPrimitive.ItemIndicator, { children: _jsx(Check, { size: 16, strokeWidth: 2 }) }) })] }));
+});
+/** A section heading inside the menu, such as "Spaces". Not focusable. */
+export const DropdownMenuLabel = forwardRef(function DropdownMenuLabel({ className, ...props }, ref) {
+    return _jsx(DropdownPrimitive.Label, { ...props, ref: ref, className: cx(styles.sectionLabel, className) });
+});
+/** A hairline between groups of items. */
+export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
+    return _jsx(DropdownPrimitive.Separator, { ...props, ref: ref, className: cx(styles.separator, className) });
+});
+/** Groups items for assistive technology, without visual change. */
+export const DropdownMenuGroup = DropdownPrimitive.Group;
+/** A nested menu: a DropdownMenuSubTrigger and its DropdownMenuSubContent. */
+export const DropdownMenuSub = DropdownPrimitive.Sub;
+/** The item that opens a submenu (on hover, click, or the right arrow key). */
+export const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger({ icon, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.SubTrigger, { ...props, ref: ref, className: cx(styles.item, styles.subTrigger, className), children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: children }), _jsx(ChevronRight, { className: styles.subChevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }));
+});
+/** The submenu's own menu, opening beside its trigger. */
+export const DropdownMenuSubContent = forwardRef(function DropdownMenuSubContent({ className, children, sideOffset = 6, collisionPadding = 12, ...props }, ref) {
+    const { highlight, contentProps } = useMenuHighlight(ITEMS);
+    const surface = useSurfaceRef(ref);
+    return (_jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.SubContent, { ...props, ...contentProps, ref: surface, sideOffset: sideOffset, collisionPadding: collisionPadding, loop: true, className: cx(styles.menu, className), children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), children] }) }));
+});
 /** A new trigger label rises in while the old one leaves, and the trigger width springs to the measured text instead of snapping. */
 function TriggerLabel({ text }) {
     const reduced = useReducedMotion();
@@ -31,9 +126,8 @@ function TriggerLabel({ text }) {
     }, []);
     return _jsxs(motion.span, { className: styles.label, initial: false, animate: { width: size.width }, transition: size.animate && !reduced ? motionTokens.spring.morph : { duration: 0 }, children: [_jsx("span", { ref: measure, className: styles.labelMeasure, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.labelText, initial: reduced ? false : { opacity: 0, y: "0.3em", 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.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: text }, text) })] });
 }
+/** The shorthand: a labelled trigger and a flat list of actions, built from the parts above. */
 export function DropdownMenu({ label, items, icon }) {
-    const { highlight, reset, contentProps } = useMenuHighlight();
-    return _jsxs(DropdownPrimitive.Root, { onOpenChange: open => { if (open)
-            reset(); }, children: [_jsxs(DropdownPrimitive.Trigger, { className: styles.trigger, type: "button", children: [icon && _jsx("span", { className: styles.triggerIcon, "aria-hidden": "true", children: icon }), _jsx(TriggerLabel, { text: label }), _jsx(ChevronDown, { className: styles.chevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }), _jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { className: styles.menu, sideOffset: 6, align: "end", collisionPadding: 12, loop: true, ...contentProps, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), items.map((item, index) => _jsxs(Fragment, { children: [item.separatorBefore && _jsx(DropdownPrimitive.Separator, { className: styles.separator }), _jsxs(DropdownPrimitive.Item, { className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, onSelect: item.onSelect, children: [item.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), item.label] })] }, item.label))] }) })] });
+    return (_jsxs(DropdownMenuRoot, { children: [_jsxs(DropdownMenuTrigger, { children: [icon ? _jsx("span", { className: styles.triggerIcon, "aria-hidden": "true", children: icon }) : null, _jsx(TriggerLabel, { text: label })] }), _jsx(DropdownMenuContent, { children: items.map(item => (_jsxs(Fragment, { children: [item.separatorBefore ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(DropdownMenuItem, { icon: item.icon, destructive: item.destructive, disabled: item.disabled, onSelect: item.onSelect, children: item.label })] }, item.label))) })] }));
 }
 export default DropdownMenu;

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

@@ -12,7 +12,7 @@
 .trigger[data-state="open"] .chevron { transform: rotate(180deg); }
 /* The menu grows from the trigger edge: offset toward the trigger, scale from the Radix origin, fade quickly.
    Transitions instead of keyframes, so a close that interrupts the open (or a reopen during the close) reverses from where it is. */
-.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: 60; min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: var(--layer-dropdown); min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
 .menu[data-side="top"] { --menu-y: 5px; }
 .menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
 .menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
@@ -21,11 +21,21 @@
   .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
 }
 /* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
-.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
-.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: menu-exit var(--duration-instant) linear both; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: var(--space-tight); left: var(--space-tight); border-radius: calc(var(--radius-container) - var(--space-related)); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
-.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
-.icon { display: inline-flex; width: 17px; color: var(--text-secondary); }
+/* An item may be a link (asChild), which keeps the item's look. */
+.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); color: var(--foreground); font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * var(--stagger-item)), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * var(--stagger-item)); }
+/* At least the 16px icon's column; wider content (an avatar) takes the room it needs. */
+.icon { display: inline-flex; min-width: 17px; flex: none; color: var(--text-secondary); }
+/* The composable parts. The label takes the free width, so a shortcut or check sits at the end of the row. */
+.itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shortcut { flex: none; padding-left: var(--space-group); color: var(--text-muted); font: inherit; font-size: var(--text-xs); letter-spacing: var(--tracking-body); }
+.indicator { display: inline-flex; flex: none; color: var(--foreground); }
+.sectionLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
+.subChevron { flex: none; color: var(--text-muted); }
+/* While its submenu is open, the item that opened it keeps a quiet fill, so the path stays visible. */
+.subTrigger[data-state="open"] { background: var(--surface-muted); }
 .separator { height: 1px; margin: var(--space-tight) calc(var(--space-tight) * -1); background: var(--border-subtle); }
 .destructive { color: var(--danger); }
 .destructive .icon { color: var(--danger); }

package/components/elastic-slider/elastic-slider.module.css

@@ -15,7 +15,7 @@
 /* Only the band stretches. Ticks, thumb, and tag ride along without distorting. */
 .track { position: absolute; inset: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-track); will-change: transform; }
 .fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--control-fill); }
-.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: calc(var(--space-hair) * -1) 0 0 calc(var(--space-hair) * -1); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .tick[data-on] { background: color-mix(in oklab, var(--control-glyph) 60%, transparent); }
 .thumbs { position: absolute; inset: 0 calc(var(--elastic-thumb) / 2); container-type: inline-size; pointer-events: none; }
 /* Each layer is as wide as the rail and slides by a percentage of itself, so placing the thumb needs no measuring. */
@@ -23,11 +23,11 @@
 .shift { position: absolute; inset: 0; }
 .thumb { position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--elastic-thumb); height: var(--elastic-thumb); translate: 50% -50%; border: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); pointer-events: auto; cursor: grab; outline: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
 /* A generous invisible hit area for fingertips. */
-.thumb::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; corner-shape: inherit; }
+.thumb::after { content: ""; position: absolute; inset: calc(var(--space-group) * -1); border-radius: inherit; corner-shape: inherit; }
 .root[data-dragging], .root[data-dragging] .control, .root[data-dragging] .thumb { cursor: grabbing; }
 /* The tag centers on the thumb until it would pass the component's edge, then holds there. It hangs from its bottom edge, so a swing pivots on the thumb. */
-.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + 10px); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
-@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + 20px); } }
+.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-group)); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
+@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-comfort)); } }
 .bubble { display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 130%; }
 .marks { position: relative; grid-area: 2 / 2; height: 1.25rem; margin: 0 calc(var(--elastic-thumb) / 2); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .markLabel { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }

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

@@ -10,7 +10,7 @@
 .trigger:active { background: var(--surface-muted); }
 .copy { min-width: 0; }
 .copy strong { display: block; font-size: var(--text-sm); font-weight: 500; }
-.description { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.description { display: block; margin-top: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .roll { position: relative; display: block; }
 .word { display: inline-block; white-space: pre; }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/expanding-button-group/expanding-button-group.module.css

@@ -1,5 +1,5 @@
 /* A flat pill on the surface. Geometry comes from the component as --ebg-* variables, so the measured widths and the CSS agree. */
-.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: 2px; padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
+.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: var(--space-hair); padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
 
 /* The box never scales: its width is the animation, so a press answers with the icon and with color. The label overflows to the
    right of the icon and the clipped width reveals it. min-width keeps the spring's settle from pinching a collapsed button. */

package/components/expanding-search/expanding-search.module.css

@@ -16,24 +16,24 @@
 .trigger { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; corner-shape: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .trigger:focus-visible { outline: none; }
 /* The glass sits at the leading edge, so it is centered in the circle and rides that edge to its place in the open field. */
-.icon { position: absolute; top: calc(50% - 9px); left: calc(var(--control-height-md) / 2 - 10px); pointer-events: none; }
-.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 40px 0 38px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
+.icon { position: absolute; top: calc(50% - var(--space-related)); left: calc(var(--control-height-md) / 2 - var(--space-group)); pointer-events: none; }
+.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 var(--space-page) 0 var(--space-block); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
 .input:focus-visible { outline: none; }
 .input::placeholder { color: var(--text-muted); opacity: 1; }
 .input[inert] { pointer-events: none; }
-.clear { position: absolute; z-index: 1; top: calc(50% - 14px); right: 7px; display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; 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); -webkit-tap-highlight-color: transparent; }
+.clear { position: absolute; z-index: 1; top: calc(50% - var(--space-inset)); right: var(--space-related); display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; 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); -webkit-tap-highlight-color: transparent; }
 
 /* A floating layer: its width is the field's, so it unfolds from the field on first open; its content keeps the final width and rides the leading edge. */
-.panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
+.panel { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
 .root[data-anchor="start"] .panel { right: auto; left: 0; }
-.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
+.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-related); scrollbar-width: thin; }
 .view { position: relative; }
 /* A flex gap, not margins: a group popping out while it leaves never lets the next one's margin collapse through the list. */
-.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; }
+.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-tight); }
 .group { position: relative; }
-.groupLabel { padding: 8px 12px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+.groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
 /* Nested corners step down from the panel by its inset. The highlight paints under every row's content, so text never hides while it travels. */
-.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
 .highlight { position: absolute; z-index: -1; inset: 0; border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--foreground) 6%, transparent); pointer-events: none; }
 .optionIcon { display: grid; flex: none; width: 18px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active] .optionIcon { color: var(--foreground); }
@@ -42,7 +42,7 @@
 .optionTitle { color: var(--foreground); font-size: var(--text-sm); }
 .optionMeta { color: var(--text-muted); font-size: var(--text-xs); }
 .mark { background: none; color: var(--foreground); font-weight: 500; }
-.empty { display: grid; gap: 2px; padding: 12px 12px 14px; }
+.empty { display: grid; gap: var(--space-hair); padding: var(--space-group) var(--space-group) var(--space-inset); }
 .emptyTitle { margin: 0; overflow-wrap: anywhere; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .emptyHint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

package/components/file-dropzone/file-dropzone.module.css

@@ -4,9 +4,9 @@
 /* A folded prompt is a slimmer surface, so its corners step down to the panel radius. */
 .dropzone.compact { border-radius: var(--radius-container); corner-shape: var(--corner-shape); }
 /* The edge is a drawn stroke, fitted to the perimeter in script, so a drag can close its dashes into one line. */
-.edge { position: absolute; top: .5px; left: .5px; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
+.edge { position: absolute; top: var(--space-hair); left: var(--space-hair); width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
 .edge rect { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3.5 3.5; stroke-dashoffset: 0; transition: stroke var(--duration-fast) var(--ease-standard), stroke-dasharray var(--duration-standard) var(--ease-standard), stroke-dashoffset var(--duration-standard) var(--ease-standard); }
-.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: 34px var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
+.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: var(--space-block) var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
 .trigger > * { pointer-events: none; }
 @media (hover: hover) and (pointer: fine) {
   .dropzone:has(.trigger:hover) { background: var(--surface-muted); }
@@ -19,24 +19,24 @@
 @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
 /* Light that follows the pointer: a wash inside, and a brighter stretch of the edge nearest the file. */
 .wash, .glow { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-standard) var(--ease-standard); }
-.glow { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
+.glow { padding: var(--space-hair); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
 .dragging .wash, .dragging .glow { opacity: 1; }
 .dragging .edge rect { stroke: color-mix(in oklab, var(--accent) 40%, var(--border)); stroke-dasharray: 7 0; stroke-dashoffset: 1.75; }
 /* No gaps between the prompt's parts: each slot carries its own space, so a folding slot takes its space with it. */
 .iconSlot, .noteSlot { display: flex; flex-direction: column; overflow: hidden; }
 /* Three sheets of paper, the target's one illustration. The slot's top margin is room for them to lift without clipping. */
-.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: 10px 0 14px; }
+.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: var(--space-group) 0 var(--space-inset); }
 .sheet {
   --r: 0deg; --x: 0px; --y: 0px;
-  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 5px;
+  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 var(--space-tight);
   border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--text-muted);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / .05), 0 3px 8px oklch(0% 0 0 / .04);
+  box-shadow: var(--shadow-thumb);
   transform: translate(var(--x), var(--y)) rotate(var(--r));
   transform-origin: 50% 100%;
   transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
 }
-.sheet::before, .sheet::after { position: absolute; top: 8px; left: 7px; width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
-.sheet::after { top: 13px; width: 11px; }
+.sheet::before, .sheet::after { position: absolute; top: var(--space-related); left: var(--space-related); width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
+.sheet::after { top: var(--space-group); width: 11px; }
 .sheet > svg { transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .sheet > svg { transform: translateY(-3px); }
 .sheet[data-sheet="back"] { --r: -10deg; --x: -9px; --y: 2px; }
@@ -53,31 +53,31 @@
 /* Full width and centered text: the label box never moves, so an outgoing label leaves from exactly where it was. */
 .label { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .labelText { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
-.hint { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
-.note { padding-top: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { margin-top: var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.note { padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 .messageSlot { overflow: hidden; }
-.error { display: flex; align-items: flex-start; gap: 6px; padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
+.error { display: flex; align-items: flex-start; gap: var(--space-related); padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
 /* The icon sits on the first line's optical center, so a wrapped message keeps it at the top. */
-.errorIcon { flex: 0 0 auto; margin-top: 3px; }
+.errorIcon { flex: 0 0 auto; margin-top: var(--space-tight); }
 .errorCopy { position: relative; min-width: 0; flex: 1; }
 
 .list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; container: dropzone-list / inline-size; }
-.inside .list { padding-inline: 12px; }
+.inside .list { padding-inline: var(--space-group); }
 /* Rows animate height; the gap lives inside the clipped row as margin, so a closing row reaches a true zero. */
 .item { min-width: 0; overflow: hidden; }
-.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 58px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 8px 8px 8px 9px; background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
+.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-group); min-height: 58px; margin-top: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-related); background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
 .row.isFailed { border-color: color-mix(in oklab, var(--danger) 26%, var(--border)); }
 .fileIcon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--text-secondary); }
-.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .06); }
+.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: var(--edge-inset); }
 .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .copy { display: grid; min-width: 0; }
 .name { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .meta { display: flex; min-width: 0; align-items: center; margin-top: 1px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.dot { padding-inline: 6px; }
+.dot { padding-inline: var(--space-related); }
 /* The outgoing status is measured against this box when it pops out to leave. */
 .phase { position: relative; display: flex; min-width: 0; flex: 1; }
-.state { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
+.state { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-tight); }
 .uploaded { color: var(--text-secondary); }
 .uploaded .stateIcon { color: var(--success); }
 .failed { color: var(--danger); }
@@ -85,18 +85,18 @@
 .reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .percent { font-variant-numeric: tabular-nums; }
 .barFrame { display: block; overflow: hidden; }
-.bar { display: block; height: 4px; margin: 7px 0 2px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 4px; margin: var(--space-related) 0 var(--space-hair); overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 /* The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value. */
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .actions { display: flex; align-items: center; }
 .retrySlot { display: flex; overflow: hidden; }
-.retryInner { display: flex; padding: 3px 6px 3px 3px; }
+.retryInner { display: flex; padding: var(--space-tight) var(--space-related) var(--space-tight) var(--space-tight); }
 .retry, .remove { display: grid; place-items: center; border: 0; color: var(--text-secondary); font: inherit; cursor: pointer; 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-spring) var(--ease-spring); }
-.retry { display: flex; height: 30px; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 12px 0 10px; background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
+.retry { display: flex; height: 30px; align-items: center; gap: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 var(--space-group) 0 var(--space-group); background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 /* On narrow lists Retry keeps only its icon, so the failure reason keeps the room to be read in full. */
 @container dropzone-list (max-width: 440px) { .retry { width: 30px; justify-content: center; padding: 0; } .retryLabel { display: none; } }
 /* On the narrowest lists the type icon steps aside for the name and status. */
-@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } .fileIcon, .thumb { display: none; } }
+@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--space-inset); } .fileIcon, .thumb { display: none; } }
 .remove { width: 32px; height: 32px; border-radius: var(--radius-full); corner-shape: round; background: transparent; }
 @media (hover: hover) and (pointer: fine) {
   .retry:hover { border-color: var(--border-strong); background: var(--surface-muted); }

package/components/file-upload/file-upload.module.css

@@ -1,38 +1,38 @@
 .root { display: grid; width: 100%; min-width: 0; color: var(--foreground); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
 /* A full-width drop target: press feedback is color only, never a scale. */
-.dropzone { display: flex; min-height: 92px; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.dropzone { display: flex; min-height: 92px; align-items: center; gap: var(--space-group); padding: var(--space-inset); border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
 .dropzone.dragging, .dropzone:not(.disabled):active { border-color: var(--accent); background: var(--accent-subtle); }
 .dropzone.disabled { cursor: not-allowed; opacity: .52; }
 .uploadIcon, .fileIcon { display: grid; flex: 0 0 auto; place-items: center; color: var(--accent-strong); }
 /* The cloud lifts toward the file while it hovers over the drop target. */
 .uploadIcon { width: 24px; height: 24px; transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .uploadIcon { transform: translateY(-3px); }
-.copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
+.copy { display: grid; min-width: 0; gap: var(--space-tight); flex: 1; }
 .copy strong { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .label { position: relative; display: block; min-width: 0; }
 .labelText { display: block; }
 .copy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
 .browse { flex: 0 0 auto; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 500; }
 .statusFrame { overflow: hidden; }
-.status { position: relative; min-height: 16px; margin: 0; padding-top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.status { position: relative; min-height: 16px; margin: 0; padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .statusText { display: block; }
 .fileList { display: grid; margin: 0; padding: 0; list-style: none; }
 /* The gap lives inside the clipped row, so a collapsing row reaches zero height instead of stopping at its padding. */
 .fileRow { overflow: hidden; }
-.fileItem { display: flex; margin-top: 6px; min-width: 0; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.fileItem { display: flex; margin-top: var(--space-related); min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-group) var(--space-group) var(--space-group) var(--space-group); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
 .fileIcon { width: 24px; height: 24px; color: var(--text-secondary); }
-.fileCopy { display: grid; min-width: 0; flex: 1; gap: 2px; }
+.fileCopy { display: grid; min-width: 0; flex: 1; gap: var(--space-hair); }
 .fileCopy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .fileCopy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .meta { display: flex; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.dot { padding-inline: 5px; }
+.dot { padding-inline: var(--space-tight); }
 .phase { position: relative; display: inline-block; }
 .phaseText { display: block; }
 .percent { display: inline-block; min-width: 4ch; }
 .fileCopy .error { color: var(--danger); }
 .barFrame { display: block; }
-.bar { display: block; height: 3px; margin: 5px 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 3px; margin: var(--space-tight) 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .statusSlot { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; }
 .retrySlot { display: grid; place-items: center; }

package/components/filter-toolbar/filter-toolbar.module.css

@@ -24,7 +24,7 @@
 /* Add filter: the trigger is transparent and the surface behind it is the button's rounded rectangle.
    Opening springs that same surface to the panel size, so the button itself becomes the menu. */
 .menu { position: relative; display: inline-flex; flex: none; isolation: isolate; }
-.menu:not([data-state="closed"]) { z-index: 30; }
+.menu:not([data-state="closed"]) { z-index: var(--layer-dropdown); }
 .trigger { position: relative; z-index: 1; display: inline-flex; min-height: var(--control-height-sm); align-items: center; padding: 0 var(--space-group); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .menu[data-state="open"] .trigger { pointer-events: none; }
 .face { display: inline-flex; align-items: center; gap: var(--space-related); }
@@ -38,24 +38,24 @@
 @media (hover: hover) and (pointer: fine) {
   .menu[data-state="closed"] .trigger:hover + .surface { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
 }
-.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: 6px 6px 6px; outline: none; }
+.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: var(--space-related) var(--space-related) var(--space-related); outline: none; }
 .menu[data-y="up"] .panel { top: auto; bottom: 0; }
 .menu[data-state="closed"] .panel { visibility: hidden; }
-.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 10px; }
-.menu[data-y="up"] .head { margin-top: 4px; }
-.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: -6px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 var(--space-group); }
+.menu[data-y="up"] .head { margin-top: var(--space-tight); }
+.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: calc(var(--space-related) * -1); padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 .back:active { background: var(--surface-muted); color: var(--foreground); }
 .title { position: relative; display: flex; min-width: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 .titleText { display: block; }
-.stage { position: relative; margin-top: 2px; }
+.stage { position: relative; margin-top: var(--space-hair); }
 .step { width: 100%; }
 .list { position: relative; display: grid; max-height: min(20rem, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
-.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
 .item:focus-visible { outline: none; }
-.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
+.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
 .itemIcon { display: inline-flex; min-width: 16px; flex: none; align-items: center; justify-content: center; color: var(--text-secondary); }
 .itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: 6px; max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: var(--space-related); max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .metaValue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hint { min-width: 2ch; text-align: right; }
 .check { display: inline-flex; width: 15px; color: var(--foreground); opacity: 0; }