@exponential-at/ui 0.0.0-stage → 0.1.0

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/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-at/ui";
+export declare const LAYERS = "@layer xui-base, xui-recipe, xui-node, xui-part;";
+/** `$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;

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

@@ -0,0 +1,21 @@
+import { type MediaRequest, type UrlPolicy } from "@exponential-at/ui";
+import type { AnyHostPlugin as HostPlugin } from "./host-types.js";
+/** VAPP-107: the page's OWN host when it is private (a dev server on
+ *  localhost): the renderer opts it in on top of the host's `allowPrivate`,
+ *  exactly as the Exponential app's hosts opt their own origin in. The page
+ *  already runs there; nothing else private is reached. */
+export declare function ownPrivateHosts(): string[];
+/** The URL policy a plugin's hrefs pass. */
+export declare function urlPolicyOf(host: HostPlugin): UrlPolicy;
+/** The href a link may navigate to, or undefined (paint it as text). */
+export declare function linkHref(host: HostPlugin, href: unknown): string | undefined;
+/** The media request for a src (`resolveUrl` rewrites first; the host's
+ *  `mediaRequest` or the plugin's `media` options build it), re-checked
+ *  against the media schemes/hosts so a host hook cannot widen them. Null =
+ *  nothing loads. */
+export declare function mediaRequestOf(host: HostPlugin, src: unknown): MediaRequest | null;
+/** Does an absolute media url pass the media schemes, hosts and private
+ *  opt-ins (VAPP-107; the page's own private host counts as opted in)? */
+export declare function mediaUrlAllowed(host: HostPlugin, url: string): boolean;
+/** The default opener: only what the policy allows, in a new tab. */
+export declare function openAllowed(host: HostPlugin, url: string): void;