@exponential_app/eui 0.0.0-stage → 0.2.1

package/dist/types/src/web/primitives/button.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "text" | "default" | "secondary" | "outline" | "ghost" | "destructive" | "glass" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "xs" | "icon-sm" | "icon-xs" | "icon-lg" | "inline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/dist/types/src/web/primitives/calendar.d.ts

@@ -0,0 +1,43 @@
+export declare const CALENDAR_CLASSES: {
+    readonly root: string;
+    readonly classNames: {
+        readonly root: "w-fit";
+        readonly months: "relative flex flex-col gap-4 md:flex-row";
+        readonly month: "flex w-full flex-col gap-4";
+        readonly nav: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1";
+        readonly button_previous: "size-(--cell-size) p-0 select-none aria-disabled:opacity-50";
+        readonly button_next: "size-(--cell-size) p-0 select-none aria-disabled:opacity-50";
+        readonly month_caption: "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)";
+        readonly dropdowns: "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium";
+        readonly dropdown_root: "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50";
+        readonly dropdown: "absolute inset-0 bg-popover opacity-0";
+        readonly caption_label: "font-medium select-none";
+        readonly table: "w-full border-collapse";
+        readonly weekdays: "flex";
+        readonly weekday: "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none";
+        readonly week: "mt-2 flex w-full";
+        readonly week_number_header: "w-(--cell-size) select-none";
+        readonly week_number: "text-[0.8rem] text-muted-foreground select-none";
+        readonly day: "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md";
+        readonly range_start: "rounded-l-md bg-accent";
+        readonly range_middle: "rounded-none";
+        readonly range_end: "rounded-r-md bg-accent";
+        readonly today: "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none";
+        readonly outside: "text-muted-foreground aria-selected:text-muted-foreground";
+        readonly disabled: "text-muted-foreground opacity-50";
+        readonly hidden: "invisible";
+    };
+    /** `caption_label` per `captionLayout`: `label`, else a dropdown. */
+    readonly captionLabel: {
+        readonly label: "text-sm";
+        readonly dropdown: "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground";
+    };
+    /** The `day` cell's first-selected corner, with or without week numbers. */
+    readonly dayFirst: {
+        readonly weekNumbers: "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md";
+        readonly plain: "[&:first-child[data-selected=true]_button]:rounded-l-md";
+    };
+    readonly chevron: "size-4";
+    readonly weekNumber: "flex size-(--cell-size) items-center justify-center text-center";
+    readonly dayButton: "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70";
+};

package/dist/types/src/web/primitives/card.d.ts

@@ -0,0 +1,9 @@
+export declare const CARD_CLASSES: {
+    readonly root: "rounded-xl border border-glass-stroke-card bg-glass-card-opaque flex flex-col gap-6 backdrop-blur-md py-6 text-card-foreground shadow-sm";
+    readonly header: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6";
+    readonly title: "leading-none font-semibold";
+    readonly description: "text-sm text-muted-foreground";
+    readonly action: "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
+    readonly content: "px-6";
+    readonly footer: "flex items-center px-6 [.border-t]:pt-6";
+};

package/dist/types/src/web/primitives/checkbox.d.ts

@@ -0,0 +1,5 @@
+export declare const CHECKBOX_CLASSES: {
+    readonly root: "peer size-4 shrink-0 rounded-[4px] border border-glass-stroke-strong bg-glass-row shadow-none transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary";
+    readonly indicator: "grid place-content-center text-current transition-none";
+    readonly icon: "size-3.5";
+};

package/dist/types/src/web/primitives/choice-tiles.d.ts

@@ -0,0 +1,32 @@
+export interface ChoiceTileOption {
+    value: string;
+    label: string;
+    description?: string | null;
+    /** The picture's url (a relative `/api/attachments/{id}` resolves in the
+     *  app through `renderImage`). */
+    image?: string | null;
+    disabled?: boolean;
+}
+/** `columns` clamped to 1–4 (default 2). */
+export declare function choiceColumns(columns: unknown): number;
+/** The values a comma-joined eUI `value` picks (single: the whole string). */
+export declare function choiceValues(value: unknown, multiple: boolean): string[];
+/** A press on `value`: single picks it; multiple toggles it, the list kept in
+ *  OPTION order (fixtures/interactions-round1.json `choiceTiles`). */
+export declare function choiceToggle(picked: readonly string[], value: string, multiple: boolean, order: readonly string[]): string[];
+export interface TileState {
+    index: number;
+    selected: boolean;
+    disabled: boolean;
+}
+export declare const CHOICE_TILES_CLASSES: {
+    readonly root: "gap-[8px]";
+    readonly tile: "flex min-w-0 cursor-pointer flex-col gap-[4px] rounded-[10px] border-[1px] border-border bg-card p-[8px] text-start outline-none transition-colors hover:bg-secondary focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50";
+    readonly tileSelected: "border-[2px] border-primary bg-accent p-[7px] hover:bg-accent";
+    readonly tileInvalid: "border-destructive";
+    readonly picture: "relative flex aspect-[1.6] w-full shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-muted text-muted-foreground";
+    readonly image: "absolute inset-0 size-full object-cover";
+    readonly placeholder: "size-[20px] opacity-60";
+    readonly label: "min-w-0 text-sm leading-5 font-medium text-foreground";
+    readonly description: "min-w-0 text-xs leading-4 text-muted-foreground";
+};

package/dist/types/src/web/primitives/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function getInitials(value: string): string;

package/dist/types/src/web/primitives/code-block.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CodeBlockVariantProps = VariantProps<typeof codeBlockVariants>;
+/** The catalog's `codeToken` kinds, painted with the app's code palette
+ *  (`--hljs-*`, the diff view's and the editor's); a destructive block drops
+ *  the colours for its own. */
+export declare const CODE_TOKEN_CLASS: Record<string, string>;
+export declare const codeBlockLineVariants: (props?: ({
+    variant?: "default" | "added" | "removed" | "highlighted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CodeBlockLineVariantProps = VariantProps<typeof codeBlockLineVariants>;
+export declare const CODE_BLOCK_CLASSES: {
+    readonly header: "flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0";
+    readonly title: "min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5";
+    readonly actions: "-my-1 ms-auto -me-1 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10";
+    readonly srOnly: "sr-only";
+    readonly content: "min-h-0 min-w-0 scroll-fade-x overflow-auto overscroll-contain px-3 py-3 text-start font-mono leading-relaxed outline-none [--code-block-pad:calc(var(--spacing)*6)] group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-has-data-[slot=code-block-header]/code-block:[--code-block-pad:calc(var(--spacing)*5)] group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:[--code-block-pad:calc(var(--spacing)*5)] group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:[--code-block-pad:calc(var(--spacing)*4)] data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap";
+    readonly code: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0";
+    readonly token: "group-data-[variant=destructive]/code-block:text-current";
+    readonly lineContent: "min-w-0";
+    readonly footer: "flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5";
+};

package/dist/types/src/web/primitives/command.d.ts

@@ -0,0 +1,134 @@
+export declare const COMMAND_CLASSES: {
+    readonly root: "flex h-full w-full flex-col overflow-hidden rounded-md bg-transparent text-popover-foreground";
+    readonly inputWrapper: "flex h-9 items-center gap-2 border-b border-glass-stroke px-3";
+    readonly inputGlyph: "size-4 shrink-0 opacity-50";
+    readonly input: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-foreground/50 disabled:cursor-not-allowed disabled:opacity-50";
+    readonly inputClear: string;
+    readonly list: "max-h-[18.75rem] scroll-py-1 overflow-x-hidden overflow-y-auto";
+    readonly empty: "py-6 text-center text-sm";
+    readonly group: "overflow-hidden p-(--menu-surface-padding) text-foreground";
+    readonly groupHeading: "px-(--menu-item-padding-x) py-1.5 text-xs font-medium text-muted-foreground";
+    readonly item: "relative flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm text-foreground/90 outline-hidden select-none data-[disabled=true]:cursor-default data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-glass-active data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground";
+    readonly separator: "-mx-(--menu-surface-padding) my-(--menu-surface-padding) h-px bg-glass-stroke";
+    readonly shortcut: "ml-auto text-xs tracking-widest text-muted-foreground";
+};
+/** cmdk's visually hidden `<label>` (its inline style, in its order). */
+export declare const COMMAND_LABEL_STYLE: {
+    readonly position: "absolute";
+    readonly width: "1px";
+    readonly height: "1px";
+    readonly padding: "0";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly clip: "rect(0, 0, 0, 0)";
+    readonly whiteSpace: "nowrap";
+    readonly borderWidth: "0";
+};
+/** cmdk's `command-score`: 1 = exact, prefix > word boundary > fuzzy,
+ *  0 = no match. `keywords` extend the value (`value + " " + keywords`). */
+export declare function commandScore(value: string, query: string, keywords?: readonly string[]): number;
+export type CommandFilter = (value: string, query: string, keywords?: readonly string[]) => number;
+export interface CommandFilterItem {
+    id: string;
+    value: string;
+    keywords?: readonly string[];
+    /** The group's id; none = an ungrouped item. */
+    group?: string;
+    disabled?: boolean;
+    /** Always visible, never counted (cmdk's `forceMount`). */
+    forceMount?: boolean;
+}
+export interface CommandFilterResult {
+    /** Matching (non-forced) items: 0 = the empty state. */
+    count: number;
+    /** Ungrouped items first, then the groups by their best score; ids by score. */
+    groups: {
+        group: string | undefined;
+        ids: string[];
+    }[];
+    scores: Map<string, number>;
+}
+/** The visible ids per group, in display order. An empty query keeps the
+ *  registration order and shows everything; otherwise score > 0 shows,
+ *  items sort by score (stable), groups by their best item. */
+export declare function filterCommandItems(items: readonly CommandFilterItem[], query: string, filter?: CommandFilter): CommandFilterResult;
+export declare const COMMAND_SELECT_EVENT = "command-item-select";
+type Kind = `item` | `group` | `separator`;
+interface Entry {
+    id: string;
+    kind: Kind;
+    seq: number;
+    el: HTMLElement | null;
+    value: string;
+    keywords?: string[];
+    group?: string;
+    disabled?: boolean;
+    forceMount?: boolean;
+}
+export interface CommandStoreOptions {
+    /** The root's live props. */
+    props: () => {
+        value?: string;
+        onValueChange?: (value: string) => void;
+        filter?: CommandFilter;
+        shouldFilter?: boolean;
+        loop?: boolean;
+    };
+    /** Ask the renderer for a flush after the DOM caught up (React: a root
+     *  re-render + layout effect; Solid: a microtask). */
+    schedule: () => void;
+}
+/** The command root's state (cmdk's store), framework-free: the query, the
+ *  selected value, the registry (items, groups, separators in creation
+ *  order) and the post-render pass (`flush`: DOM order, first-item
+ *  selection, the active descendant, scroll). Renderers subscribe and
+ *  re-render on `emit`. */
+export declare function createCommandStore(o: CommandStoreOptions): {
+    readonly version: number;
+    readonly search: string;
+    readonly value: string;
+    readonly selectedId: string | undefined;
+    subscribe(listener: () => void): () => undefined;
+    nextSeq: () => number;
+    /** The query (the input); `silent` = during the first render. */
+    setSearch(next: string, silent?: boolean): void;
+    setValue: (next: string, opts?: {
+        pointer?: boolean;
+    }) => void;
+    /** Re-read the controlled `value` prop (no callback). */
+    syncValue(): boolean;
+    setSizer(el: HTMLElement | null): void;
+    filtering: () => boolean;
+    /** An item's score now (1 when nothing filters). */
+    score(itemValue: string, keywords?: readonly string[]): number;
+    /** Whether a group shows (some registered item of it matches). */
+    groupVisible(groupId: string): boolean;
+    /** The empty state: no matching (non-forced) item. */
+    empty(): boolean;
+    register(entry: {
+        id: string;
+        kind: Kind;
+        seq: number;
+        value?: string;
+        keywords?: string[];
+        group?: string;
+        disabled?: boolean;
+        forceMount?: boolean;
+    }): () => void;
+    /** An entry's element (null = not rendered) or item fields. */
+    update(id: string, patch: Partial<Pick<Entry, `el` | `value` | `keywords` | `disabled`>>): void;
+    /** The post-render pass: DOM order, the first item selected (after a
+     *  query change or when nothing is selected), the active descendant,
+     *  the selected item scrolled into view. Idempotent. */
+    flush(): void;
+    /** cmdk's root keys. */
+    onKeyDown(e: KeyboardEvent): void;
+};
+export type CommandStore = ReturnType<typeof createCommandStore>;
+/** An item's value: the `value` prop, else string children, else the
+ *  rendered text (trimmed), else the last known one. */
+export declare function commandItemValue(value: string | undefined, children: unknown, el: Element | null | undefined, known: string): string;
+/** CommandList's `--cmdk-list-height` (cmdk: the sizer's offsetHeight,
+ *  ResizeObserver → rAF). Returns the disposer. */
+export declare function observeCommandListHeight(list: HTMLElement, sizer: HTMLElement): () => void;
+export {};

package/dist/types/src/web/primitives/context-ring.d.ts

@@ -0,0 +1,24 @@
+/** The ring's box, in px — a footer glyph, the size of a small icon. */
+export declare const RING_SIZE = 16;
+/** Stroke width of both the track and the progress arc. */
+export declare const RING_STROKE = 2;
+/** Radius of the stroked circle: the box minus one stroke, halved, so the
+ *  stroke sits fully inside the box (`(16 - 2) / 2 = 7`… minus a hair, so the
+ *  arc's round join never clips). */
+export declare const RING_RADIUS = 6;
+export interface RingGeometry {
+    /** The full circle's length — the dash array. */
+    circumference: number;
+    /** How much of it to hide: the UNfilled remainder. */
+    dashOffset: number;
+}
+/** The arc for `percent`, clamped to 0..100 (a NaN reads as empty). */
+export declare function ringGeometry(percent: number): RingGeometry;
+/** The three tones every usage surface shares — the app maps its thresholds
+ *  (`severity`, lib/agent-usage.ts) onto them, never the other way round. */
+export type RingTone = `normal` | `warning` | `danger`;
+export declare const RING_TONE_CLASS: Record<RingTone, string>;
+export declare const CONTEXT_RING_CLASSES: {
+    readonly root: "shrink-0";
+    readonly svg: "-rotate-90";
+};

package/dist/types/src/web/primitives/dialog-arms.d.ts

@@ -0,0 +1,6 @@
+export declare const MOBILE_SHEET = "max-sm:inset-x-0 max-sm:bottom-0 max-sm:w-full max-sm:rounded-t-3xl max-sm:border-t max-sm:border-glass-stroke-card max-sm:bg-glass-bottom max-sm:px-4 max-sm:pt-0 max-sm:pb-[max(1rem,env(safe-area-inset-bottom))] max-sm:motion-sheet max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom sm:p-6 max-sm:h-auto max-sm:max-h-[90dvh]";
+export declare const MOBILE_SHEET_FULL = "max-sm:inset-x-0 max-sm:bottom-0 max-sm:w-full max-sm:rounded-t-3xl max-sm:border-t max-sm:border-glass-stroke-card max-sm:bg-glass-bottom max-sm:px-4 max-sm:pt-0 max-sm:pb-[max(1rem,env(safe-area-inset-bottom))] max-sm:motion-sheet max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom sm:p-6 max-sm:h-[94dvh]";
+export declare const MOBILE_ALERT = "max-sm:top-1/2 max-sm:left-1/2 max-sm:w-[calc(100%-3rem)] max-sm:max-w-sm max-sm:max-h-[calc(100dvh-3rem)] max-sm:-translate-x-1/2 max-sm:-translate-y-1/2 max-sm:rounded-2xl max-sm:border max-sm:border-glass-stroke-card max-sm:bg-glass-bottom max-sm:p-5 sm:p-6";
+export declare const MOBILE_PAGE = "max-sm:inset-0 max-sm:w-full max-sm:bg-background max-sm:p-6 sm:p-6";
+export type DialogMobileArm = `sheet` | `sheet-full` | `alert` | `page`;
+export declare const MOBILE_ARMS: Record<DialogMobileArm, string>;

package/dist/types/src/web/primitives/dialog.d.ts

@@ -0,0 +1,24 @@
+/** Below `sm` a sheet-arm dialog IS the bottom sheet (EXP-687 → the UI
+ *  cleanup batch's "one phone sheet"). */
+export declare const DIALOG_PHONE_QUERY = "(max-width: 639px)";
+export declare const DIALOG_CLASSES: {
+    readonly overlay: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-fast data-[state=closed]:ease-accelerate data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-standard data-[state=open]:ease-decelerate";
+    readonly phoneSheet: "gap-4 overflow-hidden px-4 pt-0 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none";
+    readonly phoneSheetFull: "h-[94dvh] max-h-[94dvh]";
+    readonly content: "fixed z-50 flex flex-col gap-4 overflow-hidden shadow-lg outline-none motion-dialog sm:inset-auto sm:top-[50%] sm:left-[50%] sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100%-2rem)] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-2xl sm:border sm:border-glass-stroke-card sm:bg-card/85 sm:shadow-2xl sm:shadow-black/40 sm:backdrop-blur-2xl";
+    /** The sheet arms' grabber on the centred panel: a phone only. */
+    readonly grabber: "hidden max-sm:block";
+    /** The hidden Close a drag-to-dismiss clicks. */
+    readonly dragClose: "hidden";
+    readonly close: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+    readonly closePhoneHidden: "max-sm:hidden";
+    readonly srOnly: "sr-only";
+    readonly header: "flex flex-col gap-2 text-left";
+    readonly body: "min-h-0 flex-1 overflow-y-auto";
+    readonly footer: "flex flex-col-reverse gap-2 max-sm:[&>[data-slot=button]]:h-10 max-sm:[&>[data-slot=button]]:w-full max-sm:[&>[data-slot=button]]:px-6 sm:flex-row sm:justify-end";
+    /** The Cancel of a sheet arm on a phone (EXP-687): hidden, a sheet is
+     *  dismissed by dragging it down or tapping outside; `alert`/`page` keep it. */
+    readonly cancelPhoneHidden: "max-sm:hidden";
+    readonly title: "text-lg leading-none font-semibold";
+    readonly description: "text-sm text-muted-foreground";
+};

package/dist/types/src/web/primitives/disclosure-header.d.ts

@@ -0,0 +1,5 @@
+export declare const DISCLOSURE_HEADER_CLASSES: {
+    readonly root: "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-sm text-left text-muted-foreground transition-colors duration-fast outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50";
+    readonly chevron: "size-3 shrink-0";
+    readonly chevronTrailing: "ml-auto";
+};

package/dist/types/src/web/primitives/dock.d.ts

@@ -0,0 +1,42 @@
+import { type StackConstants, type ToastStackItem } from "./toast.js";
+export declare const DOCK_PILE_CONSTANTS: StackConstants;
+export type DockCardTint = `plan` | `question` | `muted` | `warning`;
+export declare const DOCK_CARD_CLASSES: {
+    /** THE card: the glass card (ONE gray: the opaque card fill under the
+     *  card hairline), padded. */
+    readonly root: "rounded-xl border border-glass-stroke-card bg-glass-card-opaque block w-full p-3 text-left outline-none";
+    /** A card that opens (a press, Enter or Space). */
+    readonly pressable: "cursor-pointer transition-colors duration-fast hover:bg-glass-active focus-visible:ring-[3px] focus-visible:ring-ring/50";
+    /** The glyph + text row; a card behind the front one hides its words. */
+    readonly body: "flex items-start gap-2 data-[hidden=true]:opacity-0";
+    readonly icon: "mt-0.5 size-3.5 shrink-0";
+    readonly text: "min-w-0 flex-1";
+    readonly header: "mb-1 flex items-center gap-2";
+    readonly label: "truncate text-xs font-medium";
+    readonly caption: "min-w-0 truncate text-xs text-muted-foreground";
+    readonly meta: "ml-auto shrink-0 text-xs text-muted-foreground";
+    readonly row: "flex min-w-0 items-center gap-2";
+    readonly title: "min-w-0 flex-1 truncate text-sm text-foreground/90";
+    readonly chevron: "size-3.5 shrink-0 text-muted-foreground";
+    readonly trailing: "shrink-0";
+    /** The tint sits on the glyph and the label alone. */
+    readonly tint: {
+        plan: string;
+        question: string;
+        muted: string;
+        warning: string;
+    };
+};
+export declare const DOCK_PILE_CLASSES: {
+    /** The pile box: its height = the geometry's, animated over `slow`. */
+    readonly root: "relative transition-[height] duration-slow ease-standard motion-reduce:transition-none";
+    /** One card, placed by `--offset`/`--scale`; it shrinks about the TOP
+     *  edge (the one that peeks out above the front card). */
+    readonly item: "absolute inset-x-0 top-(--offset) origin-top scale-(--scale) transition-[top,scale,opacity] duration-slow ease-standard motion-reduce:transition-none data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0";
+};
+/** The pile's geometry: `stackGeometry` with the Dock's numbers, anchored
+ *  at the bottom (the front card is the LAST height). */
+export declare function dockPileGeometry(heights: readonly number[], expanded: boolean): {
+    height: number;
+    items: ToastStackItem[];
+};

package/dist/types/src/web/primitives/dropdown-menu.d.ts

@@ -0,0 +1,14 @@
+export declare const DROPDOWN_MENU_CLASSES: {
+    readonly content: "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover min-w-(--menu-min-width) max-w-(--menu-max-width) p-(--menu-surface-padding) max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto";
+    readonly item: "relative flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+    readonly checkItem: "relative flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size)";
+    readonly itemIndicator: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center";
+    readonly checkIcon: "size-4";
+    readonly radioIcon: "size-2 fill-current";
+    readonly label: "px-(--menu-item-padding-x) py-1.5 text-sm font-medium data-[inset]:pl-8";
+    readonly separator: "-mx-(--menu-surface-padding) my-(--menu-surface-padding) h-px bg-glass-stroke";
+    readonly shortcut: "ml-auto text-xs tracking-widest text-muted-foreground";
+    readonly subTrigger: "flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! whitespace-nowrap data-[state=open]:bg-glass-active data-[variant=destructive]:data-[state=open]:bg-destructive/10 data-[variant=destructive]:data-[state=open]:text-destructive [&>span+svg:last-child]:ml-0";
+    readonly subChevron: "ml-auto size-(--menu-icon-size) shrink-0";
+    readonly subContent: "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover min-w-(--menu-min-width) max-w-(--menu-max-width) p-(--menu-surface-padding) origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden";
+};

package/dist/types/src/web/primitives/empty-state.d.ts

@@ -0,0 +1,15 @@
+export declare const EMPTY_STATE_SIZES: readonly ["page", "list"];
+export type EmptyStateSize = (typeof EMPTY_STATE_SIZES)[number];
+export declare const EMPTY_STATE_CLASSES: {
+    readonly list: "flex w-full flex-col items-center gap-1.5 px-3 py-6 text-center text-sm text-muted-foreground";
+    readonly listIcon: "size-5 shrink-0 text-muted-foreground/60";
+    readonly page: "mx-auto flex max-w-md flex-col items-center gap-3 px-6 py-12 text-center";
+    readonly pageTitle: "text-lg font-semibold";
+    readonly pageDescription: "text-sm text-muted-foreground";
+    readonly pageActions: "mt-2 flex flex-wrap items-center justify-center gap-2";
+    readonly listEmpty: "px-3 py-6 text-center text-sm text-muted-foreground";
+    readonly cta: "flex w-full cursor-pointer flex-col items-start gap-1 rounded-md border border-dashed border-glass-stroke-strong p-3 text-left text-sm text-muted-foreground transition-colors duration-fast outline-none hover:bg-glass-row hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50";
+    readonly ctaTitle: "flex items-center gap-2";
+    readonly ctaIcon: "size-4 shrink-0";
+    readonly ctaDescription: "text-xs";
+};

package/dist/types/src/web/primitives/glass-card.d.ts

@@ -0,0 +1,4 @@
+export declare const GLASS_CARD_CLASS = "rounded-xl border border-glass-stroke-card bg-glass-card-opaque";
+export declare const GLASS_CARD_CLASSES: {
+    readonly root: "rounded-xl border border-glass-stroke-card bg-glass-card-opaque";
+};

package/dist/types/src/web/primitives/hover-card.d.ts

@@ -0,0 +1,7 @@
+export declare const HOVER_CARD_DELAYS: {
+    readonly openDelay: 400;
+    readonly closeDelay: 100;
+};
+export declare const HOVER_CARD_CLASSES: {
+    readonly content: "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover w-80 origin-(--radix-hover-card-content-transform-origin) p-3 outline-hidden";
+};

package/dist/types/src/web/primitives/icon-disc.d.ts

@@ -0,0 +1,12 @@
+export declare const ICON_DISC_TONES: readonly ["primary", "success", "danger", "muted"];
+export type IconDiscTone = (typeof ICON_DISC_TONES)[number];
+export declare const ICON_DISC_CLASSES: {
+    readonly root: "flex size-12 shrink-0 items-center justify-center rounded-full";
+    readonly tones: {
+        primary: string;
+        success: string;
+        danger: string;
+        muted: string;
+    };
+    readonly icon: "size-6";
+};

package/dist/types/src/web/primitives/index.d.ts

@@ -0,0 +1,50 @@
+export * from "./alert-dialog.js";
+export * from "./alert.js";
+export * from "./avatar-color.js";
+export * from "./avatar.js";
+export * from "./badge.js";
+export * from "./breadcrumb.js";
+export * from "./button.js";
+export * from "./calendar.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+export * from "./choice-tiles.js";
+export * from "./cn.js";
+export * from "./code-block.js";
+export * from "./command.js";
+export * from "./context-ring.js";
+export * from "./dialog-arms.js";
+export * from "./dialog.js";
+export * from "./disclosure-header.js";
+export * from "./dock.js";
+export * from "./dropdown-menu.js";
+export * from "./empty-state.js";
+export * from "./glass-card.js";
+export * from "./hover-card.js";
+export * from "./icon-disc.js";
+export * from "./input.js";
+export * from "./measure.js";
+export * from "./kbd.js";
+export * from "./label.js";
+export * from "./menu-surface.js";
+export * from "./meter.js";
+export * from "./popover.js";
+export * from "./progress-ring.js";
+export * from "./progress.js";
+export * from "./scroll-area.js";
+export * from "./segmented-control.js";
+export * from "./select.js";
+export * from "./separator.js";
+export * from "./sheet-chrome.js";
+export * from "./sheet.js";
+export * from "./skeleton.js";
+export * from "./spinner.js";
+export * from "./switch.js";
+export * from "./table.js";
+export * from "./tabs.js";
+export * from "./textarea.js";
+export * from "./toast.js";
+export * from "./tooltip.js";
+export * from "./truncate.js";
+export * from "./typeahead-portal.js";
+export * from "./voice-wave.js";

package/dist/types/src/web/primitives/input.d.ts

@@ -0,0 +1,5 @@
+export declare const BARE_FIELD_CLASS = "h-auto min-w-0 flex-1 rounded-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:border-0 focus-visible:ring-0 md:text-sm";
+export declare const FIELD_CHROME_CLASS = "h-9 w-full min-w-0 rounded-lg border border-glass-stroke-card bg-glass-card px-3 py-1 text-base shadow-none transition-[color,border-color] duration-fast outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-glass-stroke-active focus-visible:ring-0";
+export declare const INPUT_CLASSES: {
+    readonly root: "h-9 w-full min-w-0 rounded-lg border border-glass-stroke-card bg-glass-card px-3 py-1 text-base shadow-none transition-[color,border-color] duration-fast outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-glass-stroke-active focus-visible:ring-0 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
+};

package/dist/types/src/web/primitives/kbd.d.ts

@@ -0,0 +1,4 @@
+export declare const KBD_CLASSES: {
+    readonly root: "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3";
+    readonly group: "inline-flex items-center gap-1";
+};

package/dist/types/src/web/primitives/label.d.ts

@@ -0,0 +1,3 @@
+export declare const LABEL_CLASSES: {
+    readonly root: "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+};

package/dist/types/src/web/primitives/measure.d.ts

@@ -0,0 +1,16 @@
+export interface LayoutSize {
+    width: number;
+    height: number;
+}
+/** An element's border box in layout (unzoomed, untransformed) CSS px.
+ *  `entry` = the ResizeObserver entry of this element, when there is one. */
+export declare function layoutSize(el: HTMLElement, entry?: ResizeObserverEntry): LayoutSize;
+/** Visual px per layout px on one axis: 1 when they agree within a pixel
+ *  (an unscaled element maps byte-identically), else `visual / layout`.
+ *  Divide a visual delta (a pointer offset, a rect difference) by it. */
+export declare function visualScale(visual: number, layout: number): number;
+/** `visualScale` of an element: its rect over its offset box. */
+export declare function elementScale(el: HTMLElement, rect?: DOMRect): {
+    x: number;
+    y: number;
+};

package/dist/types/src/web/primitives/menu-surface.d.ts

@@ -0,0 +1,17 @@
+export declare const MENU_SURFACE_CLASS = "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover";
+export declare const MENU_CONTENT_CLASS = "min-w-(--menu-min-width) max-w-(--menu-max-width) p-(--menu-surface-padding)";
+export declare const MENU_ITEM_CLASS = "relative flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+/** A submenu's label never wraps: the value beside it truncates instead.
+ *  The value (a `MENU_VALUE_CLASS` span) and the chevron both push right;
+ *  with a value present the chevron gives up its auto margin, so every value
+ *  ends flush against the chevron column instead of floating mid-row. */
+export declare const MENU_SUB_TRIGGER_CLASS = "flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! whitespace-nowrap data-[state=open]:bg-glass-active data-[variant=destructive]:data-[state=open]:bg-destructive/10 data-[variant=destructive]:data-[state=open]:text-destructive [&>span+svg:last-child]:ml-0";
+/** The checkbox / radio rows: the indicator sits in the `pl-8` inset. */
+export declare const MENU_CHECK_ITEM_CLASS = "relative flex min-h-(--menu-item-height) cursor-pointer items-center gap-(--menu-item-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm text-foreground/90 outline-hidden select-none focus:bg-glass-active focus:text-foreground data-[disabled]:cursor-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size)";
+export declare const MENU_LABEL_CLASS = "px-(--menu-item-padding-x) py-1.5 text-sm font-medium data-[inset]:pl-8";
+export declare const MENU_SEPARATOR_CLASS = "-mx-(--menu-surface-padding) my-(--menu-surface-padding) h-px bg-glass-stroke";
+export declare const MENU_SHORTCUT_CLASS = "ml-auto text-xs tracking-widest text-muted-foreground";
+/** The current VALUE beside a submenu's label ("Status  Backlog ›"): takes
+ *  what is left of the row and truncates, never the label's room. */
+export declare const MENU_VALUE_CLASS = "min-w-0 max-w-[7rem] shrink text-right normal-case tracking-normal truncate";
+export declare const MENU_CHEVRON_CLASS = "ml-auto size-(--menu-icon-size) shrink-0";

package/dist/types/src/web/primitives/meter.d.ts

@@ -0,0 +1,21 @@
+/** EXP-909: the ONE bar every usage surface draws — the rate-limit windows,
+ * the run's context, and the tiny three-bar mini line. Before this there were
+ * two: a bare `Progress` (primary fill, no tone) under the Context block and a
+ * hand-rolled `<span>` track with its own tone map inside the usage cards, so
+ * the same 67% was two different colours two rows apart.
+ *
+ * It IS `Progress` — the Radix root, its track and its indicator — with the
+ * severity tone painted on the indicator (`lib/agent-usage.ts` `severity`,
+ * hand-mirrored ×4 with the desktop's `usage_bar::meter`, iOS `AgentUsageTrack`
+ * and Android `UsageTrack`). Height comes from `className` (`h-1` for the mini
+ * line, `h-1.5` for a full window), never from a prop: the tone is the only
+ * thing a caller has to think about. */
+export type MeterTone = `normal` | `warning` | `danger`;
+export declare const METER_CLASSES: {
+    readonly root: "h-1.5 bg-glass-stroke-strong";
+    readonly tones: {
+        normal: string;
+        warning: string;
+        danger: string;
+    };
+};

package/dist/types/src/web/primitives/popover.d.ts

@@ -0,0 +1,3 @@
+export declare const POPOVER_CLASSES: {
+    readonly content: "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover w-72 origin-(--radix-popover-content-transform-origin) p-4 outline-hidden";
+};

package/dist/types/src/web/primitives/progress-ring.d.ts

@@ -0,0 +1,5 @@
+/** The filled share of the ring, 0..100 (an empty or nonsensical total = 0). */
+export declare function progressRingPercent(done: number, total: number): number;
+export declare const PROGRESS_RING_CLASSES: {
+    readonly root: "shrink-0 -rotate-90";
+};

package/dist/types/src/web/primitives/progress.d.ts

@@ -0,0 +1,8 @@
+export declare const PROGRESS_CLASSES: {
+    readonly root: "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full";
+    readonly indicator: "bg-primary h-full flex-1 transition-all";
+    readonly indicatorIndeterminate: "w-1/3 motion-safe:animate-progress-indeterminate motion-reduce:opacity-60";
+    readonly indicatorDeterminate: "w-full";
+};
+/** The determinate indicator's offset for `value` (0-100). */
+export declare function progressIndicatorTransform(value: number | null | undefined): string;