@exponential_app/eui-react 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,52 @@
+export * from "./alert.js";
+export * from "./alert-dialog.js";
+export * from "./avatar.js";
+export * from "./avatar-color.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 "./collapsible.js";
+export * from "./command.js";
+export * from "./context-ring.js";
+export * from "./dialog.js";
+export * from "./dialog-arms.js";
+export * from "./disclosure-header.js";
+export * from "./dock-card.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.js";
+export * from "./progress-ring.js";
+export * from "./scroll-area.js";
+export * from "./segmented-control.js";
+export * from "./select.js";
+export * from "./separator.js";
+export * from "./sheet.js";
+export * from "./sheet-chrome.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 "./use-media-query.js";
+export * from "./use-mobile.js";
+export * from "./use-sheet-drag.js";
+export * from "./voice-wave.js";

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+export { BARE_FIELD_CLASS, FIELD_CHROME_CLASS } from "@exponential_app/eui/web/primitives";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Kbd({ className, ...props }: React.ComponentProps<`kbd`>): import("react/jsx-runtime").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<`span`>): import("react/jsx-runtime").JSX.Element;
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };

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

@@ -0,0 +1 @@
+export { MENU_CHECK_ITEM_CLASS, MENU_CHEVRON_CLASS, MENU_CONTENT_CLASS, MENU_ITEM_CLASS, MENU_LABEL_CLASS, MENU_SEPARATOR_CLASS, MENU_SHORTCUT_CLASS, MENU_SUB_TRIGGER_CLASS, MENU_SURFACE_CLASS, MENU_VALUE_CLASS } from "@exponential_app/eui/web/primitives";

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type MeterTone } from "@exponential_app/eui/web/primitives";
+import { Progress } from "./progress.js";
+export type { MeterTone } from "@exponential_app/eui/web/primitives";
+export declare function Meter({ value, tone, className, ...props }: Omit<React.ComponentProps<typeof Progress>, `value`> & {
+    /** 0-100, the caller clamps (`parseWindow` already does). `null` =
+     *  indeterminate: work with a duration but no measurable progress. */
+    value: number | null;
+    tone?: MeterTone;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

@@ -0,0 +1,12 @@
+export { progressRingPercent } from "@exponential_app/eui/web/primitives";
+export declare function ProgressRing({ done, total, size, colorClass, colorHex, className, }: {
+    done: number;
+    total: number;
+    /** Rendered box in px. */
+    size?: number;
+    /** A `text-*` token class — the builtin completed status. */
+    colorClass?: string;
+    /** A synced hex — a custom completed row. Wins over `colorClass`. */
+    colorHex?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Progress };

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+interface SegmentedOption<TValue extends string> {
+    value: TValue;
+    label: React.ReactNode;
+    /** A leading glyph. A concept icon, never a raw lucide import. */
+    icon?: LucideIcon;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<TValue extends string> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    options: readonly SegmentedOption<TValue>[];
+    /** Span the container instead of the capsule's natural `w-fit`, so the
+     *  segments (already `flex-1`) share it equally. For narrow slots — a side
+     *  panel — where the natural width overflows and clips the last label. */
+    fill?: boolean;
+    /** Disables every segment. */
+    disabled?: boolean;
+    /** Extra classes on the strip (the `TabsList`). */
+    className?: string;
+}
+declare function SegmentedControl<TValue extends string>({ value, onValueChange, options, fill, disabled, className, }: SegmentedControlProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export { SegmentedControl };
+export type { SegmentedControlProps, SegmentedOption };

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: `sm` | `default`;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { SheetDragHandleProps } from "./use-sheet-drag.js";
+export declare function SheetDragProvider({ value, children, }: {
+    value: SheetDragHandleProps | null;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The drag props of the enclosing sheet, or `null` outside one (a desktop
+ * panel, a side drawer). Header components spread these so the whole title
+ * area is draggable, not just the 4px bar.
+ */
+export declare function useSheetDragHandleProps(): SheetDragHandleProps | null;
+export declare function SheetGrabber({ className, ...props }: React.ComponentProps<`div`>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import { type SheetSide } from "@exponential_app/eui/web/primitives";
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, showGrabber, ref, onInteractOutside, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: SheetSide;
+    showCloseButton?: boolean;
+    /** The drag pill at the top edge. On by default for `bottom`; the two
+     * page-like bottom sheets (New issue, search) turn it off. */
+    showGrabber?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<`div`>): import("react/jsx-runtime").JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<`div`>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.ComponentProps<`div`>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

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

@@ -0,0 +1,8 @@
+import type * as React from "react";
+declare function Spinner({ size, label, className, ...props }: Omit<React.ComponentProps<`svg`>, `children`> & {
+    size?: number;
+    /** The accessible name; the glyph itself never carries words. */
+    label?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Spinner };

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: `sm` | `default`;
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<`table`>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<`thead`>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<`tbody`>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<`tfoot`>): import("react/jsx-runtime").JSX.Element;
+/** A selected row says so with `data-state="selected"` (shadcn's convention). */
+declare function TableRow({ className, ...props }: React.ComponentProps<`tr`>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<`th`>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<`td`>): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<`caption`>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+export { SEGMENTED_ITEM, SEGMENTED_LIST, SEGMENTED_ROW, SEGMENTED_ROW_COMPACT, SEGMENTED_TAB } from "@exponential_app/eui/web/primitives";
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<`textarea`>): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type ToastStore } from "@exponential_app/eui/web/primitives";
+/** The default store `toast` writes to and `<Toaster />` reads. */
+export declare const toastStore: ToastStore;
+/** `toast("…")`, `toast.success("…", { description, action })`, … on the default store. */
+export declare const toast: import("@exponential_app/eui/web/primitives").ToastFn;
+export type ToasterProps = Omit<React.ComponentProps<`section`>, `children`> & {
+    store?: ToastStore;
+    /** The placement input (default: the `touchMaxWidth` media query). */
+    touch?: boolean;
+    /** The close glyph's label. */
+    closeLabel?: string;
+};
+export declare function Toaster({ store, touch, closeLabel, className, ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { createToastStore, toastStackGeometry, toastPlacement, TOAST_CONSTANTS, TOAST_KINDS, TOAST_TOUCH_QUERY } from "@exponential_app/eui/web/primitives";
+export type { ToastKind, ToastOptions, ToastRecord, ToastStore, ToastAction, ToastPlacement } from "@exponential_app/eui/web/primitives";

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -0,0 +1 @@
+export { middleTruncate } from "@exponential_app/eui/web/primitives";

package/dist/types/primitives/use-media-query.d.ts

@@ -0,0 +1,3 @@
+/** Whether `query` matches right now, following changes. Without a
+ *  `window` (SSR, static markup) or `matchMedia` it answers `false`. */
+export declare function useMediaQuery(query: string): boolean;

package/dist/types/primitives/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/types/primitives/use-sheet-drag.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+/**
+ * Pure decision half of the gesture: did a downward drag of `dy` px over
+ * `dtMs` ms earn a dismissal? Upward drags never do (the panel rubber-bands
+ * back instead).
+ */
+export declare function shouldDismissSheet(dy: number, dtMs: number): boolean;
+export interface SheetDragHandleProps {
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+    style: React.CSSProperties;
+}
+export declare function useSheetDrag({ panelRef, onDismiss, }: {
+    panelRef: React.RefObject<HTMLElement | null>;
+    onDismiss: () => void;
+}): {
+    handleProps: SheetDragHandleProps;
+};

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type VoiceWaveActivity, type VoiceWaveSize } from "@exponential_app/eui/web/primitives";
+export type { VoiceWaveActivity, VoiceWaveSize } from "@exponential_app/eui/web/primitives";
+export interface VoiceWaveProps {
+    activity?: VoiceWaveActivity;
+    /** Loudness 0..1. */
+    level?: number;
+    /** Up to 8 band levels 0..1. */
+    bands?: readonly number[];
+    size?: VoiceWaveSize;
+    /** The accessible name (the activity is appended); none = decorative. */
+    label?: string;
+    className?: string;
+    /** The centre, at its own size, drawn scaled down to the wave's child
+     *  box (never up; kept but not painted at `sm`). */
+    children?: ReactNode;
+}
+/** NEW-77: the Exponential UI `VoiceWave` native as a primitive: three
+ *  closed waves (the core's `voiceWave`) around an optional centre child,
+ *  moving while listening, thinking or speaking (not under reduced motion).
+ *  The frames write the paths' `d` directly, never a re-render. */
+export declare function VoiceWave({ activity, level, bands, size, label, className, children }: VoiceWaveProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/surface.d.ts

@@ -0,0 +1,117 @@
+import { type CSSProperties, type ReactNode, type Ref } from "react";
+import type { ModeName, ResolvedTheme, ScrollAlign, ThemeIssue, ThemeSource, UiNode, SurfaceCommand } from "@exponential_app/eui";
+import { type DataModel } from "@exponential_app/eui/web";
+import { type ReactExtension } from "./extensions.js";
+import type { HostPlugin } from "./host.js";
+import type { SurfaceState } from "./use-surface.js";
+export type ThemeInput = ResolvedTheme | ThemeSource | string;
+/** What a host can ask of a live surface (`SurfaceCommand`, a11y.json). */
+export interface SurfaceHandle {
+    run: (command: SurfaceCommand) => void;
+    /** Focus the node (or its first focusable descendant); false if absent. */
+    focus: (id: string) => boolean;
+    announce: (text: string, live?: `polite` | `assertive`) => void;
+    scrollIntoView: (id: string) => boolean;
+    /** Round 2: item `index` (data order) of the List/Table `id` into view;
+     *  false when no such list is painted. */
+    scrollToIndex: (id: string, index: number, align?: ScrollAlign) => boolean;
+}
+export interface ExponentialSurfaceProps {
+    /** The state from `useSurface` (tree + data + templates)… */
+    surface?: SurfaceState;
+    /** …or a normalized tree (a fixture) with an optional data model… */
+    root?: UiNode | null;
+    /** …and its LIFTED templates (`ReduceResult.templates`, round 2 §4): a
+     *  data template's component lives here, never in the tree. */
+    templates?: Readonly<Record<string, UiNode>>;
+    data?: DataModel;
+    /** A built-in id (`exponential` | `neutral` | `playful` | `orange`), a theme file
+     *  (resolved against the built-ins) or a resolved theme. */
+    theme?: ThemeInput;
+    /** `light | dark | system` (default `system`: the platform's preference,
+     *  followed live). */
+    mode?: ModeName | `system`;
+    /** Scales `$control.*` and `$spacing.*` by the theme's `$density.*`. */
+    density?: `compact` | `default` | `comfortable`;
+    /** `system` (default) follows `prefers-contrast: more`; `high` forces the
+     *  theme's high-contrast overlays. */
+    contrast?: `normal` | `high` | `system`;
+    /** BCP 47 (default `en-US`): formatting, calendar names, week start, the
+     *  default text direction. */
+    locale?: string;
+    /** IANA time zone dates and relative times format in (default the
+     *  platform's). */
+    timeZone?: string;
+    /** Built-in string overrides by id (`catalog/strings.json`). */
+    strings?: Record<string, string>;
+    host?: HostPlugin;
+    extensions?: readonly ReactExtension[];
+    /** Forced interaction states on every node (the builder's recipe sheet). */
+    states?: readonly string[];
+    /** Geometry mode: leaves become fixed boxes of the returned size. */
+    measure?: (node: UiNode) => {
+        w: number;
+        h: number;
+    } | null;
+    /** Default: the locale's direction (`textDirection`). */
+    direction?: `ltr` | `rtl`;
+    /** The surface width; default = the host's box. */
+    width?: number | string;
+    /** The height of the VIEWPORT the surface is shown in: what the height and
+     *  orientation style conditions test (the Rust core's `set_viewport`
+     *  height). Default: an explicit inline `style.height` on the surface,
+     *  else UNKNOWN (orientation = landscape, no min/max-height matches;
+     *  contract §2) — never the surface's CONTENT height (a height rule must
+     *  not feed back into its own measurement). The gpui host passes 0 (=
+     *  unknown) today, so the default keeps web and desktop identical. */
+    viewportHeight?: number;
+    /** An explicit id (defaults to React's `useId`); must be unique per page. */
+    id?: string;
+    /** Host → surface commands (focus, announce, scrollIntoView). */
+    handleRef?: Ref<SurfaceHandle>;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** A theme prop, resolved: the theme to paint with and why the asked one
+ *  was refused (empty when it loaded). */
+export interface ThemeResolution {
+    theme: ResolvedTheme;
+    issues: ThemeIssue[];
+}
+/** A theme prop → the resolved theme (built-ins cached by id, theme files
+ *  resolved against the built-ins and cached by content). NEVER throws
+ *  (round 4, VAPP-103): an unknown built-in id or an invalid theme file
+ *  paints with the default theme and carries its issues, which the surface
+ *  reports through `HostPlugin.onThemeIssues`. */
+export declare function resolveThemeInput(input: ThemeInput | undefined): ThemeResolution;
+/** The theme a surface runs with: density applied, then the contrast
+ *  overlays when asked (memoized per theme, so the compiled sheet is too). */
+export declare function surfaceTheme(theme: ResolvedTheme, density: `compact` | `default` | `comfortable`, highContrast: boolean): ResolvedTheme;
+/** What the surface knows of its box: the measured WIDTH and the condition
+ *  height (an explicit inline height; see `viewportHeight`). */
+export interface SurfaceBox {
+    width: number;
+    /** Undefined = unknown. */
+    height: number | undefined;
+    measured: boolean;
+}
+export interface LayoutInputs {
+    breakpoints: Record<string, number>;
+    queries: readonly string[];
+    viewportHeight: number | undefined;
+    hover: boolean;
+    reducedMotion: boolean;
+}
+/** The only layout facts that reach React: the active breakpoint and the
+ *  matching JS-evaluated conditions (`data-xq`). A resize that changes
+ *  neither re-renders nothing. */
+export declare function surfaceLayout(box: SurfaceBox, inputs: LayoutInputs): {
+    breakpoint: string | null;
+    xq: string;
+};
+/** Structural equality, short-circuiting on identity at every level (an
+ *  inline `data={{ items, filter }}` with stable values costs one pass over
+ *  its top-level keys). */
+export declare function sameData(a: unknown, b: unknown): boolean;
+export declare function ExponentialSurface({ surface, root: rootProp, templates: templatesProp, data: dataProp, theme: themeProp, mode: modeSetting, density, contrast, locale, timeZone, strings: stringOverrides, host, extensions: extensionsProp, states, measure, direction: directionProp, width, viewportHeight, id: idProp, handleRef, className, style, children, }: ExponentialSurfaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/use-surface.d.ts

@@ -0,0 +1,57 @@
+import type { ExtensionDef, FlatComponent, NestedNode, ReduceIssue, ResolvedTheme, UiNode } from "@exponential_app/eui";
+import type { DataModel } from "@exponential_app/eui/web";
+export interface A2uiMessage {
+    version?: string;
+    createSurface?: {
+        surfaceId: string;
+        catalogId: string;
+        theme?: unknown;
+        sendDataModel?: boolean;
+    };
+    updateComponents?: {
+        surfaceId: string;
+        components: FlatComponent[];
+    };
+    updateDataModel?: {
+        surfaceId: string;
+        path?: string;
+        value?: unknown;
+    };
+    deleteSurface?: {
+        surfaceId: string;
+    };
+}
+export interface UseSurfaceOptions {
+    /** The surface id messages must carry; default `main`. */
+    surfaceId?: string;
+    catalogId?: string;
+    extensions?: readonly ExtensionDef[];
+    /** A nested tree to start from (fixtures, static screens). */
+    initial?: NestedNode;
+    /** The initial data model. */
+    data?: DataModel;
+}
+export interface SurfaceState {
+    surfaceId: string;
+    catalogId: string;
+    root: UiNode | null;
+    issues: ReduceIssue[];
+    /** Round 2: the nodes a data `template` renders per item, by component id
+     *  (`ReduceResult.templates`: lifted out of the tree, never painted in
+     *  place). */
+    templates?: Readonly<Record<string, UiNode>>;
+    /** The server's `createSurface.theme`, resolved (a host surface). */
+    theme?: ResolvedTheme;
+    data: DataModel;
+    /** True after `deleteSurface`. */
+    deleted: boolean;
+    /** The flat components (for template children). */
+    components: readonly FlatComponent[];
+    extensions: readonly ExtensionDef[];
+    apply: (message: A2uiMessage) => void;
+    setData: (pointer: string, value: unknown) => void;
+    /** Replace the tree with a nested authoring tree. */
+    setNested: (tree: NestedNode) => void;
+    reset: () => void;
+}
+export declare function useSurface(options?: UseSurfaceOptions): SurfaceState;

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@exponential_app/eui-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.1",
+  "description": "Exponential UI for React: the reference renderer of the core A2UI catalog on Radix with real CSS, runtime themes, extensions, and the shadcn primitive set the Exponential app shares.",
+  "license": "Apache-2.0",
+  "homepage": "https://exponential.at/ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Niach/exponential.git",
+    "directory": "packages/exponential-ui-react"
+  },
+  "keywords": [
+    "a2ui",
+    "generative-ui",
+    "exponential-ui"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/types/primitives/index.d.ts",
+      "import": "./dist/primitives/index.js",
+      "default": "./dist/primitives/index.js"
+    },
+    "./styles.css": "./dist/exponential-ui-react.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@exponential_app/eui": "^0.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}