@exponential_app/eui 0.0.0-stage → 0.2.0

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";
+};

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

@@ -0,0 +1,13 @@
+export declare const SEGMENTED_LIST = "inline-flex h-9 w-fit items-center justify-center rounded-full border border-glass-stroke-section bg-glass-section p-[3px] text-muted-foreground";
+export declare const SEGMENTED_ROW = "flex shrink-0 items-center justify-between gap-2 px-4 pt-3 pb-2 md:px-6";
+export declare const SEGMENTED_ROW_COMPACT = "flex shrink-0 items-center justify-between gap-2 px-2 pt-2 pb-2";
+/** The ONE trigger sizing both strips use — no per-surface `h-8`/`text-xs`
+ *  overrides, or the two drift by a pixel again. */
+export declare const SEGMENTED_TAB = "px-3";
+export declare const SEGMENTED_ITEM = "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export declare const TABS_CLASSES: {
+    readonly root: "flex flex-col gap-2";
+    readonly list: "inline-flex h-9 w-fit items-center justify-center rounded-full border border-glass-stroke-section bg-glass-section p-[3px] text-muted-foreground";
+    readonly trigger: "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-[calc(100%-1px)] flex-1 text-foreground dark:text-muted-foreground dark:data-[state=active]:border-glass-stroke-active dark:data-[state=active]:bg-glass-active dark:data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50";
+    readonly content: "flex-1 outline-none";
+};

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

@@ -0,0 +1,3 @@
+export declare const TEXTAREA_CLASSES: {
+    readonly root: "flex field-sizing-content min-h-16 w-full resize-y [@supports(field-sizing:content)]:resize-none rounded-lg border border-glass-stroke-card bg-glass-card px-3 py-2 text-base shadow-none transition-[color,border-color] duration-fast outline-none placeholder:text-foreground/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 md:text-sm dark:aria-invalid:ring-destructive/40";
+};

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

@@ -0,0 +1,163 @@
+export declare const TOAST_CONSTANTS: {
+    width: number;
+    gap: number;
+    peek: number;
+    scaleStep: number;
+    visible: number;
+    durationMs: number;
+    swipeThreshold: number;
+    viewportOffset: number;
+    mobileViewportOffset: number;
+    placement: {
+        pointer: string;
+        touch: string;
+    };
+    touchMaxWidth: number;
+    kinds: string[];
+};
+export type ToastKind = `success` | `error` | `info` | `warning`;
+export type ToastPlacement = `bottom-right` | `top-center`;
+export declare const TOAST_KINDS: readonly ToastKind[];
+/** Touch = up to and including `touchMaxWidth` (the fixture's phone breakpoint). */
+export declare const TOAST_TOUCH_QUERY: string;
+export declare const TOAST_CLASSES: {
+    /** The fixed region (`<section>`), per placement: `viewportOffset` from
+     *  the corner on a pointer, `mobileViewportOffset` below the status bar
+     *  on touch. */
+    readonly region: "pointer-events-none fixed z-[100] flex";
+    readonly regionPlacement: {
+        "bottom-right": string;
+        "top-center": string;
+    };
+    /** The stack box (`<ol>`): `width` wide, its height = the geometry's. */
+    readonly list: "pointer-events-auto relative m-0 w-[356px] max-w-full list-none p-0 transition-[height] duration-standard ease-standard";
+    readonly listPlacement: {
+        "bottom-right": string;
+        "top-center": string;
+    };
+    /** The card: the opaque glass card at radius lg, no shadow; placed by its
+     *  `--offset`/`--scale`. A collapsed back toast hides its contents behind
+     *  the front one; a toast past `visible` draws nothing. */
+    readonly toast: "absolute inset-x-0 top-(--offset) flex items-start gap-3 rounded-lg border border-glass-stroke-card bg-glass-card-opaque p-4 font-sans text-sm text-foreground scale-(--scale) transition-[top,scale,opacity] duration-standard ease-standard data-[expanded=false]:data-[front=false]:*:opacity-0 data-[visible=false]:pointer-events-none data-[visible=false]:opacity-0";
+    /** A back card shrinks about the edge that PEEKS OUT: the top on a bottom
+     *  stack, the bottom on a top stack. */
+    readonly toastOrigin: {
+        readonly bottom: "origin-top";
+        readonly top: "origin-bottom";
+    };
+    readonly content: "flex min-w-0 flex-1 flex-col gap-0.5";
+    readonly title: "leading-5 font-medium text-foreground";
+    readonly description: "leading-5 text-muted-foreground";
+    readonly action: "inline-flex h-6 shrink-0 cursor-pointer items-center rounded-md border-0 bg-primary px-2 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90";
+    /** The close glyph: last in the row. */
+    readonly close: "order-last inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground [&_svg]:size-3.5";
+    readonly iconSlot: "flex h-5 shrink-0 items-center";
+    readonly icon: "size-4 shrink-0";
+    /** The ONLY place a toast wears its kind. */
+    readonly kindIcon: {
+        success: string;
+        error: string;
+        info: string;
+        warning: string;
+    };
+};
+/** The Lucide glyph each kind paints (the app's concept icons
+ *  `ui-success`/`ui-error`/`ui-info`/`ui-warning`, packages/icons/icons.json). */
+export declare const TOAST_KIND_GLYPH: {
+    readonly success: "circle-check";
+    readonly error: "circle-x";
+    readonly info: "info";
+    readonly warning: "triangle-alert";
+};
+/** The fixture's `placement`: bottom-right on a pointer, top-centre on touch;
+ *  a bottom stack measures its peek above the front toast. */
+export declare function toastPlacement(isTouch: boolean): {
+    placement: ToastPlacement;
+    anchoredBottom: boolean;
+};
+export interface ToastStackItem {
+    /** The item's top inside the stack box. */
+    offset: number;
+    /** Its width factor. */
+    scale: number;
+    /** Whether it draws at all. */
+    visible: boolean;
+}
+/** The numbers a stack is drawn from (the toast's, the Dock pile's). */
+export interface StackConstants {
+    /** How far an older item peeks out behind the one in front of it. */
+    peek: number;
+    /** How much smaller each rank behind the front draws. */
+    scaleStep: number;
+    /** How many items draw at all while collapsed. */
+    visible: number;
+    /** The space between items while expanded. */
+    gap: number;
+}
+/** THE stack geometry ×4 (fixtures/toast-stack.json `geometry`; N-12: the
+ *  Dock pile draws it too): `heights` oldest first (the newest is in front).
+ *  Collapsed, the item of rank r (0 = front) sits r × `peek` from the
+ *  anchoring edge, shrunk by `scaleStep` per rank (clamped at the last
+ *  visible rank), `visible` of them drawn; expanded, every item at full
+ *  size, `gap` apart. */
+export declare function stackGeometry(heights: readonly number[], expanded: boolean, anchoredBottom: boolean, constants: StackConstants): {
+    height: number;
+    items: ToastStackItem[];
+};
+/** The toast's stack (`stackGeometry` with the toast's numbers). */
+export declare function toastStackGeometry(heights: readonly number[], expanded: boolean, anchoredBottom: boolean): {
+    height: number;
+    items: ToastStackItem[];
+};
+export interface ToastAction {
+    label: string;
+    onClick?: (event: Event) => void;
+}
+export interface ToastOptions {
+    /** A fixed id (else the store generates `toast-<n>`); re-using a live id
+     *  replaces that toast. */
+    id?: string;
+    kind?: ToastKind;
+    description?: string;
+    action?: ToastAction;
+    /** The auto-dismiss clock in ms (default `durationMs`); `Infinity` = sticky. */
+    duration?: number;
+    /** A fixed height for the stack geometry (else the renderer measures). */
+    height?: number;
+    onDismiss?: (toast: ToastRecord) => void;
+}
+export interface ToastRecord {
+    id: string;
+    kind?: ToastKind;
+    title: string;
+    description?: string;
+    action?: ToastAction;
+    duration: number;
+    height?: number;
+}
+export interface ToastFn {
+    (title: string, options?: ToastOptions): string;
+    (options: ToastOptions & {
+        title: string;
+    }): string;
+    success: (title: string, options?: Omit<ToastOptions, `kind`>) => string;
+    error: (title: string, options?: Omit<ToastOptions, `kind`>) => string;
+    info: (title: string, options?: Omit<ToastOptions, `kind`>) => string;
+    warning: (title: string, options?: Omit<ToastOptions, `kind`>) => string;
+}
+export interface ToastStore {
+    toast: ToastFn;
+    /** Removes one toast, or every toast without an id. */
+    dismiss: (id?: string) => void;
+    /** The live toasts, oldest first. */
+    toasts: () => readonly ToastRecord[];
+    /** Called with the toasts on every change; returns the unsubscribe. */
+    subscribe: (listener: (toasts: readonly ToastRecord[]) => void) => () => void;
+    /** Stops every clock (the stack expanded), keeping what is left of each. */
+    pauseAll: () => void;
+    /** Restarts every clock with its remaining time. */
+    resumeAll: () => void;
+    readonly paused: boolean;
+}
+/** A toast store: the queue, the per-toast clocks and their pause. */
+export declare function createToastStore(): ToastStore;

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

@@ -0,0 +1,3 @@
+export declare const TOOLTIP_CLASSES: {
+    readonly content: "glass-panel z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-3 py-1.5 text-xs text-balance text-popover-foreground motion-popover";
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Shorten `value` to at most `max` characters by replacing its middle with an
+ * ellipsis, keeping both ends visible (the tail slightly longer, since that is
+ * where the filename lives). Shorter values, and any `max` too small to hold a
+ * character on each side of the ellipsis, are returned unchanged.
+ */
+export declare function middleTruncate(value: string, max: number): string;

package/dist/types/src/web/primitives/typeahead-portal.d.ts

@@ -0,0 +1,12 @@
+/** The attribute the anchored arm stamps on its portal. It lives outside the
+ *  host's subtree, so a Radix modal would take a click on it as an OUTSIDE
+ *  interaction and close: dialog hosts whitelist this selector in their
+ *  `onInteractOutside`, and treat a mounted one as "a menu is open" when
+ *  routing Escape. */
+export declare const TYPEAHEAD_PORTAL_SELECTOR = "[data-editor-autocomplete]";
+/** Whether a Radix outside-interaction (its `target` is the pointed-at
+ *  node) landed inside the anchored arm's portal. `DialogContent` and
+ *  `SheetContent` ignore that one by default. */
+export declare function isTypeaheadPortalInteraction(event: {
+    target: EventTarget | null;
+}): boolean;

package/dist/types/src/web/primitives/voice-wave.d.ts

@@ -0,0 +1,50 @@
+import type { VoiceWaveActivity } from "../../voice-wave.js";
+export type { VoiceWaveActivity, VoiceWaveRingName } from "../../voice-wave.js";
+export declare const VOICE_WAVE_SIZES: readonly ["sm", "md", "lg", "xl"];
+export type VoiceWaveSize = (typeof VOICE_WAVE_SIZES)[number];
+/** The box edge per size (px): the `VoiceWave/root` recipe's width. */
+export declare const VOICE_WAVE_SIZE_PX: Readonly<Record<VoiceWaveSize, number>>;
+/** Whether `activity` moves the waves (listening, thinking, speaking). */
+export declare function voiceWaveAnimates(activity: VoiceWaveActivity): boolean;
+/** Idle and muted paint quiet: muted colours, the wave at .35 opacity (an
+ *  unknown activity is idle, as in the core). */
+export declare function voiceWaveQuiet(activity: VoiceWaveActivity): boolean;
+/** The accessible name (a11y.json `VoiceWave`): the label with the activity
+ *  appended (`Voice, listening`); none without a label (decorative). */
+export declare function voiceWaveName(label: string | undefined, activity: VoiceWaveActivity): string | undefined;
+/** Calls `onFrame(elapsed seconds)` on every animation frame after the
+ *  first (the first frame is the clock's zero, already painted); returns
+ *  the stop. Without `requestAnimationFrame` (SSR) it never ticks. */
+export declare function voiceWaveClock(onFrame: (elapsed: number) => void): () => void;
+/** THE CHILD RULE's painter half (catalog/style.json `voiceWave`): the child
+ *  is laid out centred at its own size; this measures its own (untransformed)
+ *  border box and draws it scaled about its centre (= the box centre) by
+ *  `scaleOf(its size)` (the core's `voiceWaveChildBox(size, child).scale`:
+ *  min(1, childSize / its longer edge), 0 at `sm`). Re-measures on every
+ *  resize (ResizeObserver: before the first paint); without one (SSR,
+ *  jsdom) it measures once. Returns the stop. */
+export declare function voiceWaveFitChild(el: HTMLElement, scaleOf: (child: {
+    width: number;
+    height: number;
+}) => number): () => void;
+export declare const VOICE_WAVE_CLASSES: {
+    readonly root: "relative inline-flex shrink-0 items-center justify-center";
+    readonly quiet: "opacity-35";
+    readonly size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    readonly svg: "pointer-events-none absolute inset-0 size-full overflow-visible";
+    readonly ring: {
+        outer: string;
+        mid: string;
+        inner: string;
+    };
+    readonly ringQuiet: "text-muted-foreground";
+    readonly child: "relative flex shrink-0 items-center justify-center text-foreground";
+    /** At `sm` (childSize 0): kept, painted nothing, no hit target. */
+    readonly childHidden: "invisible pointer-events-none";
+    readonly childMuted: "text-muted-foreground";
+};

package/dist/types/src/web/round5.d.ts

@@ -0,0 +1,107 @@
+import { type QrMatrix } from "@exponential_app/eui";
+/** style.json `qrScanner` (the viewfinder geometry). */
+export declare const QR_SCANNER: {
+    $comment: string;
+    maxWidth: number;
+    aspectRatio: number;
+    cornerLength: number;
+    cornerStroke: number;
+    feedAlpha: number;
+    scanLineHeight: number;
+    scanLineInset: number;
+    sweepMs: number;
+    hintGap: number;
+    placeholderIcon: string;
+    placeholderIconSize: number;
+};
+export interface QrPaint {
+    /** The core's matrix (null = the empty plate). */
+    matrix: QrMatrix | null;
+    /** The SVG viewBox edge in MODULES (n + 2 × quietZone); 0 without a matrix. */
+    modules: number;
+    /** One path of every dark module run in module units (quiet zone
+     *  included), so `shape-rendering: crispEdges` snaps the edges to device
+     *  pixels while the outer size stays the exact `size`. */
+    path: string;
+    /** The resolved colours after THE SWAP: the lighter fills the plate. */
+    plate: string;
+    module: string;
+}
+/** The QrCode paint of `value` at `level` (style.json `qrCode`): the core's
+ *  `qrMatrix`, never a platform QR library; of the two recipe colours the
+ *  lighter (relative luminance) is the plate, the darker the modules, so a
+ *  dark theme still scans. A colour the parser cannot read keeps its role. */
+export declare function qrPaint(value: string, level: unknown, plateColour: string, moduleColour: string): QrPaint;
+/** THE web renderers' camera hook (the `qrScanner` host option; never
+ *  catalog/host.json): the host renders its live feed into `feed` (an empty
+ *  element filling the viewfinder; append a `<video>`), decodes codes of
+ *  `formats` (default `["qr"]`) and calls `onValue` with every decoded
+ *  string; the renderer dispatches `scanned {value}` once per distinct
+ *  value. `start` returns the stop (called on unmount, on `disabled` and
+ *  when the formats change); returning `false` (or throwing) = no camera
+ *  (the placeholder shows). */
+export interface QrScannerHost {
+    start(feed: HTMLElement, formats: readonly string[], onValue: (value: string) => void): (() => void) | false | void;
+}
+/** One reporter per mounted scanner: forwards a decoded value only when it
+ *  differs from the last one reported (a code held in view reports once). */
+export declare function qrScanReporter(report: (value: string) => void): (value: string) => void;
+export declare const QR_CORNERS: readonly ["tl", "tr", "bl", "br"];
+export type QrCorner = (typeof QR_CORNERS)[number];
+/** One corner bracket as an SVG path in its own cornerLength-px square
+ *  (placed flush in that corner of the viewfinder): two strokes of
+ *  cornerStroke px whose outer edge follows the viewfinder radius `radius`
+ *  (the stroke's centre line runs half a stroke inside). Draw it with
+ *  round caps and `overflow: visible`. */
+export declare function qrCornerPath(corner: QrCorner, radius: number): string;
+/** The empty viewfinder's fill: the `feed` recipe colour at feedAlpha. */
+export declare function qrFeedColour(colour: string): string;
+/** The formats a scanner asks the host for (style: the catalog default). */
+export declare function qrScanFormats(raw: unknown): string[];
+/** A `bar` item's badge text: the number, `99+` above 99; null (no badge)
+ *  at 0, unset or not a number. */
+export declare function segmentedBadge(raw: unknown): string | null;
+/** THE slop: how far (px) a held pointer may wander outside the box. */
+export declare const HOLD_SLOP = 24;
+export type HoldEvent = `holdStart` | `holdEnd` | `holdCancel`;
+export interface HoldRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** Whether (x, y) lies within the box grown by the slop on every side. */
+export declare function withinSlop(rect: HoldRect, x: number, y: number, slop?: number): boolean;
+/** THE hold machine of a `hold: true` Button, framework-free. The painter
+ *  forwards its DOM events; `fire` gets the catalog event, `pressed` the
+ *  painted state. A press never fires `press` here (the painter skips its
+ *  click while `hold`). */
+export declare class ButtonHold {
+    private readonly fire;
+    private readonly pressed;
+    private readonly disabled;
+    /** `pointer`, the key that started the hold, or null when idle. */
+    private by;
+    private pointerId;
+    constructor(fire: (event: HoldEvent) => void, pressed: (pressed: boolean) => void, disabled: () => boolean);
+    get active(): boolean;
+    private start;
+    private finish;
+    /** Pointer down (primary button): starts the hold; true = claim the
+     *  pointer (capture it, prevent the long-press / scroll defaults). */
+    pointerDown(pointerId?: number | null): boolean;
+    /** A move of the holding pointer: past the slop = the slide away. */
+    pointerMove(rect: HoldRect, x: number, y: number, pointerId?: number | null): void;
+    /** The holding pointer released: within the slop ends, past it cancels. */
+    pointerUp(rect: HoldRect, x: number, y: number, pointerId?: number | null): void;
+    pointerCancel(pointerId?: number | null): void;
+    /** Key down: Space/Enter start (repeat ignored), Escape cancels. True =
+     *  the key was handled (prevent its default: no click, no scroll). */
+    keyDown(key: string, repeat?: boolean): boolean;
+    /** Key up of the key that started the hold ends it. */
+    keyUp(key: string): boolean;
+    blur(): void;
+    /** Unmount or `disabled` mid-hold: drop it silently. */
+    reset(): void;
+    private samePointer;
+}

package/dist/types/src/web/share.d.ts

@@ -0,0 +1,6 @@
+/** `next` with every part deep-equal to `prev`'s replaced by `prev`'s
+ *  object (arrays of nodes matched by `id`, other arrays by index): a
+ *  re-reduce (`updateComponents`) hands every unchanged node its old
+ *  object, so the renderers skip it. Plain JSON only; anything else is
+ *  taken as it is. */
+export declare function share<T>(prev: unknown, next: T): T;

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

@@ -0,0 +1,20 @@
+export interface TableColumn {
+    key: string;
+    /** The header text (a slot or checkbox column may have none). */
+    label?: string;
+    type?: `text` | `number` | `date` | `boolean` | `badge` | `slot` | `currency` | `percent` | `relativeTime`;
+    slot?: string;
+    /** ISO 4217 code of a `currency` column. */
+    currency?: string;
+    /** Fixed fraction digits of a number / currency / percent column. */
+    decimals?: number;
+    width?: number;
+    align?: `start` | `center` | `end`;
+    sortable?: boolean;
+}
+export interface TableSort {
+    key: string;
+    direction: `asc` | `desc`;
+}
+/** The renderer's local order of `rows` for a sort (unbound sort). */
+export declare function sortRows(rows: readonly Record<string, unknown>[], sort: TableSort | null, column: TableColumn | undefined, locale: string): number[];

package/dist/types/src/web/theme-css.d.ts

@@ -0,0 +1,69 @@
+import type { FontSpec, RecipeRule, ResolvedTheme } from "@exponential_app/eui";
+export declare const LAYERS = "@layer xui-base, xui-recipe, xui-node, xui-part, xui-author;";
+/** `$color.primary` → `--xui-color-primary`; `$type.lineHeight.sm` →
+ *  `--xui-type-lineHeight-sm` (the group path verbatim); `$type.family.sans`
+ *  → `--xui-font-sans`. */
+export declare function tokenVarName(ref: string): string | null;
+export declare function tokenVar(ref: string): string | null;
+/** One style value → its CSS text; `null` = nothing to emit. */
+export declare function cssValue(key: string, value: unknown, fonts?: Record<string, FontSpec>): string | null;
+/** Flat declarations (`prop:value` pairs) for one condition-free style. A
+ *  border width without a `borderStyle` is solid (contract §2). An
+ *  animation that moves opacity MULTIPLIES the node's own (round 2 §2): the
+ *  keyframes move `--xui-a-opacity` and `opacity` = own ×
+ *  `var(--xui-a-opacity, 1)`. `base` = the style a condition block cascades
+ *  over, so a block that adds only the animation (or only the opacity)
+ *  still multiplies the other's value. */
+export declare function declarations(style: Record<string, unknown>, fonts?: Record<string, FontSpec>, base?: Record<string, unknown>): [string, string][];
+/** `animation: <name>` as CSS longhands over `@keyframes xui-<name>`
+ *  (base-css.ts): duration = the motion token × the set's factor (an
+ *  `animationDuration` token replaces the token, the factor kept), easing
+ *  per segment = `animation-timing-function`, fill both. An unknown name =
+ *  no animation. Reduced motion zeroes the duration (base-css.ts), which
+ *  shows each set's rest frame. */
+export declare function animationDeclarations(name: unknown, durationToken?: unknown): [string, string][];
+/** The shimmer BAND of `animation: shimmer` (style.json `animations.shimmer`
+ *  `band`): an `::after` over the box, a gradient of the band colour at
+ *  alpha 0 → .5 → 0, one box wide, at `--xui-band` box widths (the
+ *  keyframes move it −1 → 1), clipped to the box. Empty for anything else. */
+export declare function shimmerRule(selector: string, style: Record<string, unknown>): string;
+export declare const rule: (selector: string, decls: [string, string][]) => string;
+/** Every way an element can be in a state: the pseudo-class or the attribute
+ *  Radix sets, plus the forced marker the recipe sheet writes. */
+export declare const STATE_SELECTORS: Record<string, string[]>;
+/** A native's recipe props ride as `data-r-<prop>`, a macro part's as
+ *  `data-m-<prop>`: a Badge's label is a Text, and both key on `variant`. */
+export declare const propAttribute: (macro: boolean, prop: string) => string;
+/** The selectors one recipe rule applies to, for the part's class. */
+export declare function ruleSelectors(base: string, rule: RecipeRule, macro?: boolean): string[];
+export interface CompiledTheme {
+    /** The class on the surface root AND on every element it paints. */
+    scope: string;
+    /** The whole sheet: layer order, variables (both modes), recipes. */
+    css: string;
+    theme: ResolvedTheme;
+}
+export declare function themeScope(theme: ResolvedTheme): string;
+/** Whether a component's parts go in the `xui-part` layer (macro parts win
+ *  over an author's style) or the `xui-recipe` layer (a native's own look
+ *  yields to it). Extension macros are listed by the caller. */
+export declare function isMacroComponent(component: string, extensionMacros?: ReadonlySet<string>): boolean;
+export declare const partClass: (component: string, part: string) => string;
+export declare function compileTheme(theme: ResolvedTheme, options?: {
+    extensionMacros?: ReadonlySet<string>;
+}): CompiledTheme;
+/** `compileTheme`, memoized per resolved theme object (the common case:
+ *  a built-in or a theme the host loaded once). */
+export declare function compiledTheme(theme: ResolvedTheme, options?: {
+    extensionMacros?: ReadonlySet<string>;
+}): CompiledTheme;
+/** FEED-128: the theme as an app's UNSCOPED shadcn globals: the shadcn /
+ *  Tailwind variable names (the same `SHADCN_ALIASES` the surface sheet
+ *  maps) with LITERAL values (hex colours, px radius, font stacks; never a
+ *  `var(--xui-*)`), light under `:root` and dark under `.dark` by default.
+ *  A non-Exponential-UI app (shadcn-solid, plain Tailwind) pastes it as its
+ *  globals.css and wears the theme. */
+export declare function globalsCss(theme: ResolvedTheme, options?: {
+    light?: string;
+    dark?: string;
+}): string;