@exponential-at/ui 0.0.0-stage → 0.1.0

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,48 @@
+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 "./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";

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/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;

package/dist/types/src/web/primitives/scroll-area.d.ts

@@ -0,0 +1,49 @@
+export declare const SCROLL_AREA_CLASSES: {
+    readonly root: "relative";
+    readonly viewport: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1";
+    readonly scrollbar: "flex touch-none p-px transition-colors select-none";
+    readonly orientations: {
+        readonly vertical: "h-full w-2.5 border-l border-l-transparent";
+        readonly horizontal: "h-2.5 flex-col border-t border-t-transparent";
+    };
+    readonly thumb: "relative flex-1 rounded-full bg-border";
+};
+export type ScrollAreaDir = `ltr` | `rtl`;
+export type ScrollAreaOrientation = `vertical` | `horizontal`;
+/** Radix's viewport <style>: the native scrollbar hidden. */
+export declare const SCROLL_AREA_VIEWPORT_CSS = "[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}";
+export declare function scrollAreaRootStyle(cornerWidth: number, cornerHeight: number): Record<string, string>;
+export declare function scrollAreaViewportStyle(xEnabled: boolean, yEnabled: boolean): Record<string, string>;
+/** The viewport's `display: table` sizer. */
+export declare const SCROLL_AREA_CONTENT_STYLE: {
+    readonly "min-width": "100%";
+    readonly display: "table";
+};
+export declare function scrollAreaScrollbarStyle(orientation: ScrollAreaOrientation, dir: ScrollAreaDir, thumbSize: number): Record<string, string>;
+export declare const SCROLL_AREA_THUMB_STYLE: {
+    readonly width: "var(--radix-scroll-area-thumb-width)";
+    readonly height: "var(--radix-scroll-area-thumb-height)";
+};
+export declare function scrollAreaCornerStyle(width: number, height: number, dir: ScrollAreaDir): Record<string, string>;
+/** A scrollbar's / thumb's `data-state`. */
+export declare const scrollAreaVisibility: (visible: boolean) => `visible` | `hidden`;
+export type ScrollAreaScrollState = `hidden` | `scrolling` | `interacting` | `idle`;
+/** Radix's `type="scroll"` machine. */
+export declare const SCROLL_AREA_SCROLL_MACHINE: Record<ScrollAreaScrollState, Partial<Record<string, ScrollAreaScrollState>>>;
+export declare const SCROLL_AREA_SCROLL_INITIAL: ScrollAreaScrollState;
+export interface ScrollAreaSizes {
+    content: number;
+    viewport: number;
+    scrollbar: {
+        size: number;
+        paddingStart: number;
+        paddingEnd: number;
+    };
+}
+export declare const scrollAreaThumbRatio: (viewport: number, content: number) => number;
+/** Radix's `getThumbSize`: the ratio of the track, at least 18px. */
+export declare function scrollAreaThumbSize(sizes: ScrollAreaSizes): number;
+/** Radix's `getScrollPositionFromPointer`. */
+export declare function scrollAreaScrollFromPointer(pointer: number, pointerOffset: number, sizes: ScrollAreaSizes, dir?: ScrollAreaDir): number;
+/** Radix's `getThumbOffsetFromScroll`. */
+export declare function scrollAreaThumbOffset(scroll: number, sizes: ScrollAreaSizes, dir?: ScrollAreaDir): number;

package/dist/types/src/web/primitives/segmented-control.d.ts

@@ -0,0 +1,5 @@
+export declare const SEGMENTED_CONTROL_CLASSES: {
+    readonly trigger: "px-3";
+    /** `fill`: span the container instead of the capsule's natural `w-fit`. */
+    readonly fill: "w-full";
+};

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

@@ -0,0 +1,47 @@
+export declare const SELECT_CLASSES: {
+    readonly trigger: "flex w-fit items-center justify-between gap-2 rounded-lg border border-glass-stroke-card bg-glass-card px-3 py-2 text-sm whitespace-nowrap shadow-none transition-[color,border-color] duration-fast outline-none hover:bg-glass-active/50 focus-visible:border-glass-stroke-active focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-foreground/50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--menu-icon-size) [&_svg:not([class*='text-'])]:text-muted-foreground";
+    readonly triggerIcon: "size-4 opacity-50";
+    readonly content: "z-50 rounded-lg border border-glass-stroke-card bg-glass-card-opaque text-popover-foreground motion-popover relative max-h-(--radix-select-content-available-height) min-w-(--menu-min-width) max-w-(--menu-max-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto";
+    /** `position="popper"` only. */
+    readonly contentPopper: "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
+    readonly viewport: "p-(--menu-surface-padding)";
+    /** `position="popper"` only. */
+    readonly viewportPopper: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1";
+    readonly label: "px-(--menu-item-padding-x) py-1.5 text-xs text-muted-foreground";
+    readonly item: "relative flex min-h-(--menu-item-height) w-full cursor-pointer items-center gap-(--menu-item-gap) rounded-sm py-1 pr-8 pl-(--menu-item-padding-x) 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) [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
+    readonly itemIndicator: "absolute right-2 flex size-3.5 items-center justify-center";
+    readonly itemCheck: "size-4";
+    readonly separator: "pointer-events-none -mx-1 my-1 h-px bg-glass-stroke";
+    readonly scrollButton: "flex cursor-default items-center justify-center py-1";
+    readonly scrollIcon: "size-4";
+};
+export declare const SELECT_INLINE: {
+    readonly value: {
+        readonly "pointer-events": "none";
+    };
+    /** The item-aligned position's fixed wrapper (before `position()` runs). */
+    readonly wrapper: {
+        readonly display: "flex";
+        readonly "flex-direction": "column";
+        readonly position: "fixed";
+    };
+    readonly viewport: {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly overflow: "hidden auto";
+    };
+    readonly scrollButton: {
+        readonly "flex-shrink": "0";
+    };
+    /** The wrapper's `justify-content` once an expand-on-scroll pinned it to the bottom. */
+    readonly expandEnd: "flex-end";
+};
+export declare const SELECT_VIEWPORT_ATTR = "data-radix-select-viewport";
+/** Radix Select's viewport sheet (the native scrollbar hidden). */
+export declare const SELECT_VIEWPORT_CSS = "[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}";
+/** The content's style, `item-aligned`: box sizing + max height, the
+ *  dismissable layer's pointer events, the flex column, no outline. */
+export declare function selectItemAlignedContentStyle(pointerEvents: string | undefined): Record<string, string | undefined>;
+/** The content's style, `popper`: Radix's PopperContent order (its
+ *  `--radix-select-*` aliases, `animation: none` until placed). */
+export declare function selectPopperContentStyle(pointerEvents: string | undefined, positioned: boolean): Record<string, string | undefined>;

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

@@ -0,0 +1,3 @@
+export declare const SEPARATOR_CLASSES: {
+    readonly root: "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px";
+};

package/dist/types/src/web/primitives/sheet-chrome.d.ts

@@ -0,0 +1,4 @@
+export declare const SHEET_CHROME_CLASSES: {
+    /** The pill at the top edge of a sheet. Purely decorative, but it drags. */
+    readonly grabber: "mx-auto mt-2 -mb-1 h-1 w-9 shrink-0 rounded-full bg-foreground/30";
+};

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

@@ -0,0 +1,20 @@
+export type SheetSide = `top` | `right` | `bottom` | `left`;
+export declare const SHEET_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-standard data-[state=closed]:ease-accelerate data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-slow data-[state=open]:ease-decelerate";
+    readonly content: "group/sheet fixed z-50 flex flex-col gap-4 border-glass-stroke-card shadow-lg motion-sheet";
+    readonly sides: {
+        right: string;
+        left: string;
+        top: string;
+        bottom: string;
+    };
+    /** 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-secondary";
+    readonly closeIcon: "size-4";
+    readonly srOnly: "sr-only";
+    readonly header: "flex flex-col gap-1.5 p-4 text-left";
+    readonly footer: "mt-auto flex flex-col gap-2 p-4";
+    readonly title: "font-semibold text-foreground max-sm:group-data-[side=bottom]/sheet:text-lg max-sm:group-data-[side=bottom]/sheet:leading-none";
+    readonly description: "text-sm text-muted-foreground";
+};

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

@@ -0,0 +1,3 @@
+export declare const SKELETON_CLASSES: {
+    readonly root: "animate-pulse rounded-md bg-accent";
+};

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

@@ -0,0 +1,3 @@
+export declare const SPINNER_CLASSES: {
+    readonly root: "shrink-0 animate-spin text-muted-foreground";
+};

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

@@ -0,0 +1,4 @@
+export declare const SWITCH_CLASSES: {
+    readonly root: "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-none transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-glass-active";
+    readonly thumb: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%+2px)] dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground";
+};

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

@@ -0,0 +1,11 @@
+export declare const TABLE_CLASSES: {
+    readonly container: "relative w-full overflow-x-auto";
+    readonly root: "w-full caption-bottom border-collapse text-sm";
+    readonly header: "[&_tr]:hover:bg-transparent";
+    readonly body: "[&_tr:last-child]:border-0";
+    readonly footer: "border-t border-border font-medium [&>tr]:last:border-b-0";
+    readonly row: "border-b border-border transition-colors duration-fast hover:bg-glass-row data-[state=selected]:bg-glass-active";
+    readonly head: "px-3 py-2 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0";
+    readonly cell: "px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0";
+    readonly caption: "mt-4 text-sm text-muted-foreground";
+};