@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/spatial/dom.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DOM renderer for the GUI and XR modalities.
+ *
+ * GUI and XR share one React tree — the only difference is the cell sizing and
+ * touch-target scale the primitives read from {@link useSpatialContext}. So the
+ * "renderer" for these two modalities is just a context provider: the spatial
+ * primitives render their own DOM. This is intentional — it keeps GUI/XR in
+ * exact structural parity with each other and with the TUI IR.
+ */
+import { useMemo } from "react";
+import { SpatialContextProvider } from "./context.js";
+/**
+ * Detect the active DOM modality (`gui` vs `xr`).
+ *
+ * The XR view-host (`plugin-facewear` / `plugin-xr`) sets `window.__elizaXRContext`
+ * when a view runs inside a headset — the same signal `getActiveViewModality()`
+ * uses. Mirrored here (without importing `platform/` so the spatial barrel stays
+ * Capacitor-free) so `<SpatialSurface>` picks the surface automatically.
+ */
+export function detectDomModality() {
+    if (typeof window !== "undefined" && window.__elizaXRContext) {
+        return "xr";
+    }
+    return "gui";
+}
+/**
+ * Host for a spatial view on a DOM surface (GUI or XR).
+ *
+ * Omit `modality` and it auto-detects the headset — so a plugin mounts the same
+ * view with `<SpatialSurface>` on both surfaces with zero modality knowledge.
+ *
+ * ```tsx
+ * <SpatialSurface>
+ *   <ProfileView profile={p} />
+ * </SpatialSurface>
+ * ```
+ */
+export function SpatialSurface({ modality, onAction, children, }) {
+    const resolved = modality ?? detectDomModality();
+    const value = useMemo(() => ({ modality: resolved, dispatch: onAction }), [resolved, onAction]);
+    return (_jsx(SpatialContextProvider, { value: value, children: _jsx("div", { "data-spatial-surface": resolved, style: {
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                height: "100%",
+                minHeight: 0,
+                minWidth: 0,
+                boxSizing: "border-box",
+            }, children: children }) }));
+}

package/spatial/evaluate.d.ts

@@ -0,0 +1,67 @@
+/**
+ * React → IR evaluator.
+ *
+ * GUI and XR render the authored React tree directly to DOM. The terminal can't
+ * — there is no DOM in a terminal. This module is the bridge: it evaluates a
+ * React element tree composed of the spatial primitives (plus plain function
+ * components, fragments, arrays and conditionals) into the modality-agnostic
+ * {@link SpatialNode} tree that the TUI layout engine consumes.
+ *
+ * It is a *snapshot* evaluator: it renders one frame. Effects don't run; that's
+ * exactly right for producing a terminal frame. Interactive state works through
+ * the framework hooks ({@link useSpatialState}, {@link useSpatialMemo},
+ * {@link useSpatialRef}), which are backed here by a persistent {@link SpatialStateStore}
+ * the terminal host holds across frames — and which delegate to React's own
+ * hooks when the same component renders on a DOM surface. One component, both
+ * paths, no branching in the view.
+ *
+ * Authoring constraint for cross-terminal views: use the `useSpatial*` hooks for
+ * state, not React's `useState`/`useEffect`/`useContext` — the latter only run on
+ * the DOM surface. Presentational components (props in, primitives out) need no
+ * hooks at all and always work everywhere.
+ */
+import { type ReactNode } from "react";
+import type { SpatialNode } from "./ir.js";
+/** Persistent state for `useSpatial*` hooks, held by the host across frames. */
+export interface SpatialStateStore {
+    has(key: string): boolean;
+    get(key: string): unknown;
+    set(key: string, value: unknown): void;
+}
+/** A plain Map-backed store. */
+export declare function createSpatialStateStore(): SpatialStateStore;
+export interface EvaluateOptions {
+    /** Persistent hook state across frames (omit for a stateless snapshot). */
+    store?: SpatialStateStore;
+    /** Called by a `useSpatialState` setter so the host can re-snapshot. */
+    requestRender?: () => void;
+    /**
+     * When provided, button `onPress` handlers are recorded here keyed by the
+     * button's agent id — so a terminal host can activate a focused button by
+     * firing its handler (the IR itself carries no handlers). Cleared/owned by
+     * the caller.
+     */
+    handlers?: Map<string, () => void>;
+}
+/**
+ * Evaluate a React element into a {@link SpatialNode} tree.
+ *
+ * Returns a single root node. A fragment/array root is wrapped in a column box
+ * so callers always receive one node to lay out.
+ */
+export declare function evaluateToSpatialTree(element: ReactNode, options?: EvaluateOptions): SpatialNode;
+/**
+ * State that works on every surface. On a DOM surface it delegates to React's
+ * `useState`; during IR evaluation it reads/writes the host's persistent store
+ * keyed by component path + hook order, and the setter re-snapshots the frame.
+ */
+export declare function useSpatialState<T>(initial: T | (() => T)): [T, (next: T | ((prev: T) => T)) => void];
+/** Memoised value that works on every surface. */
+export declare function useSpatialMemo<T>(factory: () => T, deps?: readonly unknown[]): T;
+/** Ref that works on every surface. */
+export declare function useSpatialRef<T>(initial: T): {
+    current: T;
+};
+/** True while the current call stack is inside an IR (terminal) evaluation. */
+export declare function isEvaluatingToIR(): boolean;
+//# sourceMappingURL=evaluate.d.ts.map

package/spatial/evaluate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluate.d.ts","sourceRoot":"","sources":["../../../../../src/spatial/evaluate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAIL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAa3C,gFAAgF;AAChF,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxC;AAED,gCAAgC;AAChC,wBAAgB,uBAAuB,IAAI,iBAAiB,CAS3D;AAYD,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;CACpC;AASD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,SAAS,EAClB,OAAO,GAAE,eAAoB,GAC5B,WAAW,CAeb;AAqJD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GACrB,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAsB3C;AAED,kDAAkD;AAClD,wBAAgB,cAAc,CAAC,CAAC,EAC9B,OAAO,EAAE,MAAM,CAAC,EAChB,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,GACxB,CAAC,CAMH;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,CAW3D;AAED,+EAA+E;AAC/E,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C"}

package/spatial/evaluate.js

@@ -0,0 +1,233 @@
+/**
+ * React → IR evaluator.
+ *
+ * GUI and XR render the authored React tree directly to DOM. The terminal can't
+ * — there is no DOM in a terminal. This module is the bridge: it evaluates a
+ * React element tree composed of the spatial primitives (plus plain function
+ * components, fragments, arrays and conditionals) into the modality-agnostic
+ * {@link SpatialNode} tree that the TUI layout engine consumes.
+ *
+ * It is a *snapshot* evaluator: it renders one frame. Effects don't run; that's
+ * exactly right for producing a terminal frame. Interactive state works through
+ * the framework hooks ({@link useSpatialState}, {@link useSpatialMemo},
+ * {@link useSpatialRef}), which are backed here by a persistent {@link SpatialStateStore}
+ * the terminal host holds across frames — and which delegate to React's own
+ * hooks when the same component renders on a DOM surface. One component, both
+ * paths, no branching in the view.
+ *
+ * Authoring constraint for cross-terminal views: use the `useSpatial*` hooks for
+ * state, not React's `useState`/`useEffect`/`useContext` — the latter only run on
+ * the DOM surface. Presentational components (props in, primitives out) need no
+ * hooks at all and always work everywhere.
+ */
+import { Fragment, isValidElement, useMemo as reactUseMemo, useRef as reactUseRef, useState as reactUseState, } from "react";
+import { buildBoxSpec, buildButtonSpec, buildDividerSpec, buildFieldSpec, buildImageSpec, buildSpacerSpec, buildTextSpec, flattenText, getSpatialKind, } from "./primitives.js";
+/** A plain Map-backed store. */
+export function createSpatialStateStore() {
+    const map = new Map();
+    return {
+        has: (k) => map.has(k),
+        get: (k) => map.get(k),
+        set: (k, v) => {
+            map.set(k, v);
+        },
+    };
+}
+/** Set only while a function component is being evaluated into IR. */
+let currentFrame = null;
+/**
+ * Evaluate a React element into a {@link SpatialNode} tree.
+ *
+ * Returns a single root node. A fragment/array root is wrapped in a column box
+ * so callers always receive one node to lay out.
+ */
+export function evaluateToSpatialTree(element, options = {}) {
+    const ctx = {
+        path: "",
+        store: options.store ?? null,
+        requestRender: options.requestRender ?? null,
+        handlers: options.handlers ?? null,
+    };
+    const nodes = evalNode(element, ctx, 0);
+    if (nodes.length === 1)
+        return nodes[0];
+    return {
+        type: "box",
+        direction: "column",
+        gap: 0,
+        children: nodes,
+    };
+}
+function evalChildren(children, ctx) {
+    const out = [];
+    const list = Array.isArray(children) ? children : [children];
+    let index = 0;
+    for (const child of list) {
+        if (Array.isArray(child)) {
+            // Nested arrays (e.g. `.map()` inside a list): keep flattening.
+            out.push(...evalChildren(child, ctx));
+            index += 1;
+            continue;
+        }
+        out.push(...evalNode(child, ctx, index));
+        index += 1;
+    }
+    return out;
+}
+function unwrapComponentType(type) {
+    if (typeof type === "function") {
+        return type;
+    }
+    // memo()/forwardRef() wrappers expose the real component on `.type`/`.render`.
+    if (type && typeof type === "object") {
+        const obj = type;
+        if (typeof obj.type === "function") {
+            return obj.type;
+        }
+        if (typeof obj.render === "function") {
+            return obj.render;
+        }
+    }
+    return null;
+}
+function evalNode(node, ctx, indexHint) {
+    if (node === null || node === undefined || node === false || node === true) {
+        return [];
+    }
+    if (typeof node === "string") {
+        const trimmed = node.trim();
+        return trimmed.length === 0 ? [] : [{ type: "text", value: node }];
+    }
+    if (typeof node === "number") {
+        return [{ type: "text", value: String(node) }];
+    }
+    if (Array.isArray(node)) {
+        return evalChildren(node, ctx);
+    }
+    if (!isValidElement(node)) {
+        return [];
+    }
+    const element = node;
+    const type = element.type;
+    const props = (element.props ?? {});
+    // Fragment: transparent — evaluate its children inline.
+    if (type === Fragment) {
+        return evalChildren(props.children, ctx);
+    }
+    // A branded spatial primitive: build its spec directly from props.
+    const kind = getSpatialKind(type);
+    if (kind) {
+        const built = buildPrimitiveNode(kind, props, ctx);
+        if (element.key != null)
+            built.key = String(element.key);
+        return [built];
+    }
+    // A function component (incl. memo/forwardRef and the HStack/VStack/Card sugar).
+    const component = unwrapComponentType(type);
+    if (component) {
+        const name = component.displayName ||
+            component.name ||
+            "anon";
+        const childPath = `${ctx.path}/${name}#${indexHint}`;
+        const frame = {
+            path: childPath,
+            hookIndex: 0,
+            store: ctx.store,
+            requestRender: ctx.requestRender,
+        };
+        const previous = currentFrame;
+        currentFrame = frame;
+        let rendered;
+        try {
+            rendered = component(props);
+        }
+        finally {
+            currentFrame = previous;
+        }
+        return evalNode(rendered, { ...ctx, path: childPath }, 0);
+    }
+    // Unknown host element (a raw <div> etc.): degrade to its children so text
+    // still flows. Raw DOM has no terminal layout; views should use primitives.
+    return evalChildren(props.children, ctx);
+}
+function buildPrimitiveNode(kind, props, ctx) {
+    switch (kind) {
+        case "box": {
+            const spec = buildBoxSpec(props);
+            return {
+                ...spec,
+                children: evalChildren(props.children, ctx),
+            };
+        }
+        case "text":
+            return buildTextSpec(props, flattenText(props.children));
+        case "button": {
+            const node = buildButtonSpec(props, flattenText(props.children));
+            const onPress = props.onPress;
+            if (ctx.handlers && node.agent?.id && typeof onPress === "function") {
+                ctx.handlers.set(node.agent.id, onPress);
+            }
+            return node;
+        }
+        case "field":
+            return buildFieldSpec(props);
+        case "divider":
+            return buildDividerSpec(props);
+        case "spacer":
+            return buildSpacerSpec(props);
+        case "image":
+            return buildImageSpec(props);
+    }
+}
+// --- Framework hooks (work in both DOM and IR paths) ------------------------
+/**
+ * State that works on every surface. On a DOM surface it delegates to React's
+ * `useState`; during IR evaluation it reads/writes the host's persistent store
+ * keyed by component path + hook order, and the setter re-snapshots the frame.
+ */
+export function useSpatialState(initial) {
+    const frame = currentFrame;
+    if (!frame) {
+        // DOM surface: real React.
+        return reactUseState(initial);
+    }
+    const key = `${frame.path}#${frame.hookIndex++}`;
+    const store = frame.store;
+    const value = store?.has(key)
+        ? store.get(key)
+        : typeof initial === "function"
+            ? initial()
+            : initial;
+    const requestRender = frame.requestRender;
+    const setter = (next) => {
+        const prev = (store?.has(key) ? store.get(key) : value);
+        const resolved = typeof next === "function" ? next(prev) : next;
+        store?.set(key, resolved);
+        requestRender?.();
+    };
+    return [value, setter];
+}
+/** Memoised value that works on every surface. */
+export function useSpatialMemo(factory, deps) {
+    if (!currentFrame) {
+        return reactUseMemo(factory, deps ?? []);
+    }
+    // Snapshot evaluation: recompute each frame (cheap, deterministic).
+    return factory();
+}
+/** Ref that works on every surface. */
+export function useSpatialRef(initial) {
+    const frame = currentFrame;
+    if (!frame) {
+        return reactUseRef(initial);
+    }
+    const key = `${frame.path}#ref#${frame.hookIndex++}`;
+    const store = frame.store;
+    if (store && !store.has(key))
+        store.set(key, { current: initial });
+    return (store?.get(key) ?? { current: initial });
+}
+/** True while the current call stack is inside an IR (terminal) evaluation. */
+export function isEvaluatingToIR() {
+    return currentFrame !== null;
+}

package/spatial/example.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Reference spatial view — authored ONCE, rendered to GUI, XR and TUI.
+ *
+ * This is the worked example for the framework: it uses the full primitive
+ * vocabulary (Card/HStack/List/Text/Field/Divider/Button), cross-modal state
+ * (`useSpatialState`), `.map`, and conditionals — yet carries no per-modality
+ * branching. The same component instance renders to DOM on GUI/XR and to
+ * terminal lines via the IR. See `__tests__/parity.test.tsx`.
+ */
+export interface AgentProfile {
+    name: string;
+    status: "online" | "idle" | "offline";
+    model: string;
+    skills: string[];
+}
+export declare function AgentProfileView({ profile }: {
+    profile: AgentProfile;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=example.d.ts.map

package/spatial/example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../../../../src/spatial/example.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAcH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAQD,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,2CAuCtE"}

package/spatial/example.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reference spatial view — authored ONCE, rendered to GUI, XR and TUI.
+ *
+ * This is the worked example for the framework: it uses the full primitive
+ * vocabulary (Card/HStack/List/Text/Field/Divider/Button), cross-modal state
+ * (`useSpatialState`), `.map`, and conditionals — yet carries no per-modality
+ * branching. The same component instance renders to DOM on GUI/XR and to
+ * terminal lines via the IR. See `__tests__/parity.test.tsx`.
+ */
+import { Button, Card, Divider, Field, HStack, List, Text, useSpatialState, } from "./index.js";
+function statusTone(status) {
+    if (status === "online")
+        return "success";
+    if (status === "idle")
+        return "warning";
+    return "muted";
+}
+export function AgentProfileView({ profile }) {
+    const [expanded, setExpanded] = useSpatialState(false);
+    const visibleSkills = expanded ? profile.skills : profile.skills.slice(0, 2);
+    const hiddenCount = profile.skills.length - visibleSkills.length;
+    return (_jsxs(Card, { title: "Agent", gap: 1, padding: 1, children: [_jsxs(HStack, { gap: 1, align: "center", children: [_jsx(Text, { style: "heading", grow: 1, children: profile.name }), _jsx(Text, { tone: statusTone(profile.status), children: profile.status })] }), _jsx(Field, { label: "Model", value: profile.model, agent: "model-field" }), _jsx(Divider, { label: "skills" }), _jsx(List, { gap: 0, children: visibleSkills.map((skill) => (_jsxs(Text, { tone: "muted", children: ["\u2022 ", skill] }, skill))) }), _jsxs(HStack, { gap: 1, justify: "between", wrap: true, children: [_jsx(Button, { onPress: () => setExpanded((v) => !v), agent: "toggle-skills", children: expanded
+                            ? "Show less"
+                            : hiddenCount > 0
+                                ? `Show ${hiddenCount} more`
+                                : "Show all" }), _jsx(Button, { variant: "outline", tone: "default", agent: "configure", children: "Configure" })] })] }));
+}

package/spatial/gallery.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Screen gallery — representative archetypes covering the app's screen families,
+ * each authored ONCE with the spatial vocabulary. The gallery is the verification
+ * corpus: every screen here is rendered to GUI, XR and TUI (see the stories
+ * harness `stories/src/spatial-gallery.tsx` and `__tests__/gallery.test.tsx`).
+ *
+ * These are presentational (props baked in) so they render identically and
+ * deterministically on every surface with no data fetching.
+ */
+export interface GalleryScreen {
+    id: string;
+    title: string;
+    description: string;
+    /** Authored once; rendered to GUI/XR (DOM) and TUI (terminal) unchanged. */
+    view: () => React.ReactNode;
+    /** Suggested terminal width for the TUI rendering of this screen. */
+    tuiWidth?: number;
+}
+export declare const GALLERY: GalleryScreen[];
+//# sourceMappingURL=gallery.d.ts.map

package/spatial/gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../../../../../src/spatial/gallery.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAeH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,IAAI,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAuUD,eAAO,MAAM,OAAO,EAAE,aAAa,EAyElC,CAAC"}

package/spatial/gallery.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Screen gallery — representative archetypes covering the app's screen families,
+ * each authored ONCE with the spatial vocabulary. The gallery is the verification
+ * corpus: every screen here is rendered to GUI, XR and TUI (see the stories
+ * harness `stories/src/spatial-gallery.tsx` and `__tests__/gallery.test.tsx`).
+ *
+ * These are presentational (props baked in) so they render identically and
+ * deterministically on every surface with no data fetching.
+ */
+import { AgentProfileView } from "./example.js";
+import { Button, Card, Divider, Field, HStack, List, Spacer, Text, VStack, } from "./index.js";
+// 1 — Detail / profile card --------------------------------------------------
+function ProfileScreen() {
+    return (_jsx(AgentProfileView, { profile: {
+            name: "Ada",
+            status: "online",
+            model: "eliza-1",
+            skills: ["research", "coding", "scheduling", "memory"],
+        } }));
+}
+// 2 — Conversation list ------------------------------------------------------
+function MessagesScreen() {
+    const threads = [
+        {
+            name: "Eliza",
+            preview: "Deployed the build — all green.",
+            time: "2m",
+            unread: 2,
+        },
+        {
+            name: "Ops",
+            preview: "headscale route confirmed",
+            time: "1h",
+            unread: 0,
+        },
+        { name: "Research", preview: "3 new papers queued", time: "4h", unread: 1 },
+    ];
+    return (_jsx(Card, { title: "Messages", gap: 1, padding: 1, children: threads.map((t) => (_jsxs(HStack, { gap: 1, align: "center", agent: `thread:${t.name}`, children: [_jsxs(VStack, { gap: 0, grow: 1, children: [_jsxs(HStack, { gap: 1, children: [_jsx(Text, { bold: true, grow: 1, children: t.name }), _jsx(Text, { style: "caption", tone: "muted", children: t.time })] }), _jsx(Text, { style: "caption", tone: "muted", wrap: false, children: t.preview })] }), t.unread > 0 ? _jsx(Text, { tone: "primary", children: `(${t.unread})` }) : null] }, t.name))) }));
+}
+// 3 — Settings form ----------------------------------------------------------
+function SettingsScreen() {
+    return (_jsxs(Card, { title: "Settings", gap: 1, padding: 1, children: [_jsx(Field, { label: "Display name", value: "Ada" }), _jsx(Field, { label: "Model", kind: "select", value: "eliza-1", options: ["eliza-1", "gpt-5.5", "claude"] }), _jsx(Field, { label: "API key", kind: "password", value: "sk-secret" }), _jsx(Divider, {}), _jsxs(HStack, { gap: 1, justify: "between", children: [_jsx(Text, { tone: "muted", style: "caption", grow: 1, children: "Voice replies" }), _jsx(Text, { tone: "success", children: "On" })] }), _jsxs(HStack, { gap: 1, justify: "end", wrap: true, children: [_jsx(Button, { variant: "ghost", tone: "default", agent: "cancel", children: "Cancel" }), _jsx(Button, { agent: "save", children: "Save changes" })] })] }));
+}
+// 4 — Dashboard / stats ------------------------------------------------------
+function DashboardScreen() {
+    const stats = [
+        { label: "Agents", value: "12", tone: "primary" },
+        { label: "Active", value: "9", tone: "success" },
+        { label: "Errors", value: "1", tone: "danger" },
+    ];
+    // Borderless stat blocks (tone-coloured numbers) — no nested boxes.
+    return (_jsxs(Card, { title: "Overview", gap: 1, padding: 1, children: [_jsx(HStack, { gap: 3, wrap: true, children: stats.map((s) => (_jsxs(VStack, { gap: 0, grow: 1, children: [_jsx(Text, { style: "heading", tone: s.tone, children: s.value }), _jsx(Text, { style: "caption", tone: "muted", children: s.label })] }, s.label))) }), _jsx(Divider, { label: "recent" }), _jsxs(List, { gap: 0, children: [_jsx(Text, { tone: "muted", children: "\u2022 deploy #482 succeeded" }), _jsx(Text, { tone: "muted", children: "\u2022 3 messages routed" })] })] }));
+}
+// 5 — Chat transcript --------------------------------------------------------
+function ChatScreen() {
+    // Speaker label + message, no bubble boxes — clean terminal chat rhythm.
+    return (_jsxs(Card, { title: "Chat", gap: 1, padding: 1, children: [_jsxs(VStack, { gap: 0, children: [_jsx(Text, { tone: "muted", style: "caption", children: "you" }), _jsx(Text, { children: "What's the deploy status?" })] }), _jsxs(VStack, { gap: 0, children: [_jsx(Text, { tone: "primary", style: "caption", children: "eliza" }), _jsx(Text, { children: "Build #482 is live. All checks green." })] }), _jsx(Divider, {}), _jsx(Field, { placeholder: "Message\u2026", agent: "composer" })] }));
+}
+// 6 — Empty state ------------------------------------------------------------
+function EmptyScreen() {
+    return (_jsxs(Card, { gap: 1, padding: 2, align: "center", children: [_jsx(Text, { style: "heading", align: "center", children: "No views yet" }), _jsx(Text, { tone: "muted", align: "center", children: "Install an app to add a view to your dashboard." }), _jsx(Spacer, { size: 1 }), _jsx(Button, { agent: "browse", children: "Browse apps" })] }));
+}
+// 7 — Error state ------------------------------------------------------------
+function ErrorScreen() {
+    return (_jsxs(Card, { gap: 1, padding: 2, border: "double", tone: "danger", align: "center", children: [_jsx(Text, { style: "heading", tone: "danger", align: "center", children: "Something went wrong" }), _jsx(Text, { tone: "muted", align: "center", children: "The view failed to load. Check the agent logs and try again." }), _jsxs(HStack, { gap: 1, justify: "center", wrap: true, children: [_jsx(Button, { variant: "outline", tone: "default", agent: "logs", children: "View logs" }), _jsx(Button, { tone: "danger", agent: "retry", children: "Retry" })] })] }));
+}
+// 8 — Connect / login --------------------------------------------------------
+// Full-width stacked actions: `width="100%"` fills the container in every
+// modality, unlike a fixed cell width (which is 0.25rem in DOM but a whole
+// column in the terminal — they don't translate).
+function ConnectScreen() {
+    return (_jsxs(Card, { title: "Connect", gap: 1, padding: 2, children: [_jsx(Text, { style: "heading", align: "center", children: "Sign in to Eliza Cloud" }), _jsx(Text, { tone: "muted", align: "center", style: "caption", children: "Optional \u2014 local mode works without an account." }), _jsx(Spacer, { size: 1 }), _jsx(Button, { width: "100%", agent: "wallet", children: "Continue with wallet" }), _jsx(Button, { variant: "outline", tone: "default", width: "100%", agent: "email", children: "Continue with email" })] }));
+}
+// 9 — Wallet / balance -------------------------------------------------------
+function WalletScreen() {
+    const tokens = [
+        { sym: "SOL", amt: "12.40", fiat: "$1,984" },
+        { sym: "USDC", amt: "350.00", fiat: "$350" },
+    ];
+    return (_jsxs(Card, { title: "Wallet", gap: 1, padding: 1, children: [_jsxs(VStack, { gap: 0, align: "center", children: [_jsx(Text, { style: "heading", children: "$2,334.00" }), _jsx(Text, { style: "caption", tone: "muted", children: "total balance" })] }), _jsx(Divider, {}), _jsx(List, { gap: 0, children: tokens.map((t) => (_jsxs(HStack, { gap: 1, children: [_jsx(Text, { bold: true, grow: 1, children: t.sym }), _jsx(Text, { children: t.amt }), _jsx(Text, { tone: "muted", children: t.fiat })] }, t.sym))) }), _jsxs(HStack, { gap: 1, justify: "between", wrap: true, children: [_jsx(Button, { grow: 1, agent: "send", children: "Send" }), _jsx(Button, { variant: "outline", tone: "default", grow: 1, agent: "receive", children: "Receive" })] })] }));
+}
+// 10 — Data table ------------------------------------------------------------
+function TableScreen() {
+    const rows = [
+        { job: "deploy-482", status: "done", tone: "success" },
+        { job: "deploy-483", status: "building", tone: "warning" },
+        { job: "deploy-484", status: "failed", tone: "danger" },
+    ];
+    return (_jsxs(Card, { title: "Jobs", gap: 0, padding: 1, children: [_jsxs(HStack, { gap: 1, children: [_jsx(Text, { style: "label", tone: "muted", grow: 1, children: "JOB" }), _jsx(Text, { style: "label", tone: "muted", width: 10, children: "STATUS" })] }), _jsx(Divider, {}), rows.map((r) => (_jsxs(HStack, { gap: 1, agent: `row:${r.job}`, children: [_jsx(Text, { grow: 1, children: r.job }), _jsx(Text, { tone: r.tone, width: 10, children: r.status })] }, r.job)))] }));
+}
+// 11 — Confirmation dialog ---------------------------------------------------
+function ConfirmScreen() {
+    return (_jsxs(Card, { title: "Confirm", gap: 1, padding: 2, border: "double", children: [_jsx(Text, { style: "subheading", children: "Delete this agent?" }), _jsx(Text, { tone: "muted", children: "This removes the agent and its memory. This action cannot be undone." }), _jsxs(HStack, { gap: 1, justify: "end", wrap: true, children: [_jsx(Button, { variant: "ghost", tone: "default", agent: "dismiss", children: "Cancel" }), _jsx(Button, { tone: "danger", agent: "confirm-delete", children: "Delete" })] })] }));
+}
+// 12 — Progress / status -----------------------------------------------------
+function ProgressScreen() {
+    const steps = [
+        { label: "Clone repo", done: true },
+        { label: "Build image", done: true },
+        { label: "Provision host", done: false },
+        { label: "Start agent", done: false },
+    ];
+    return (_jsxs(Card, { title: "Deploying\u2026", gap: 1, padding: 1, children: [_jsx(List, { gap: 0, children: steps.map((s) => (_jsxs(HStack, { gap: 1, children: [_jsx(Text, { tone: s.done ? "success" : "muted", children: s.done ? "●" : "○" }), _jsx(Text, { tone: s.done ? "default" : "muted", grow: 1, children: s.label })] }, s.label))) }), _jsx(Divider, {}), _jsxs(HStack, { gap: 1, children: [_jsx(Text, { tone: "muted", style: "caption", grow: 1, children: "2 of 4 complete" }), _jsx(Button, { variant: "ghost", tone: "danger", agent: "abort", children: "Abort" })] })] }));
+}
+export const GALLERY = [
+    {
+        id: "profile",
+        title: "Detail / profile card",
+        description: "header, field, list, actions",
+        view: ProfileScreen,
+    },
+    {
+        id: "messages",
+        title: "Conversation list",
+        description: "rows, unread badges, truncation",
+        view: MessagesScreen,
+    },
+    {
+        id: "settings",
+        title: "Settings form",
+        description: "fields, select, password, actions",
+        view: SettingsScreen,
+    },
+    {
+        id: "dashboard",
+        title: "Dashboard / stats",
+        description: "stat cards, grow, tones",
+        view: DashboardScreen,
+    },
+    {
+        id: "chat",
+        title: "Chat transcript",
+        description: "bubbles, composer field",
+        view: ChatScreen,
+    },
+    {
+        id: "empty",
+        title: "Empty state",
+        description: "centered, single action",
+        view: EmptyScreen,
+    },
+    {
+        id: "error",
+        title: "Error state",
+        description: "double border, danger tone",
+        view: ErrorScreen,
+    },
+    {
+        id: "connect",
+        title: "Connect / login",
+        description: "full-width stacked actions",
+        view: ConnectScreen,
+    },
+    {
+        id: "wallet",
+        title: "Wallet / balance",
+        description: "totals, token rows, actions",
+        view: WalletScreen,
+    },
+    {
+        id: "table",
+        title: "Data table",
+        description: "column headers, status tones",
+        view: TableScreen,
+    },
+    {
+        id: "confirm",
+        title: "Confirmation dialog",
+        description: "destructive confirm",
+        view: ConfirmScreen,
+    },
+    {
+        id: "progress",
+        title: "Progress / status",
+        description: "step checklist",
+        view: ProgressScreen,
+    },
+];

package/spatial/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `@elizaos/ui/spatial` — one view, three modalities.
+ *
+ * Author a view ONCE with the primitives below. The same React tree renders to:
+ *
+ *  - **GUI** — `<SpatialSurface modality="gui">{view}</SpatialSurface>` → DOM.
+ *  - **XR**  — `<SpatialSurface modality="xr">{view}</SpatialSurface>` → the same
+ *    DOM, spatially scaled for a headset.
+ *  - **TUI** — `renderViewToLines(view, width)` (from `@elizaos/ui/spatial/tui`)
+ *    → terminal lines, via the shared layout IR.
+ *
+ * This barrel is browser-safe: it never imports the terminal engine (which pulls
+ * in `@elizaos/tui`). The terminal renderer lives at `@elizaos/ui/spatial/tui`.
+ *
+ * State that must work on every surface uses the `useSpatial*` hooks; plain
+ * presentational components (props → primitives) need no hooks and work as-is.
+ */
+export { type SpatialAction, SpatialContextProvider, type SpatialContextValue, useSpatialContext, } from "./context.js";
+export { detectDomModality, SpatialSurface, type SpatialSurfaceProps, } from "./dom.js";
+export { createSpatialStateStore, type EvaluateOptions, evaluateToSpatialTree, isEvaluatingToIR, type SpatialStateStore, useSpatialMemo, useSpatialRef, useSpatialState, } from "./evaluate.js";
+export type { SpatialAgentMeta, SpatialAlign, SpatialBorder, SpatialBoxNode, SpatialButtonNode, SpatialDirection, SpatialDividerNode, SpatialFieldNode, SpatialImageNode, SpatialJustify, SpatialLength, SpatialModality, SpatialNode, SpatialPadding, SpatialSpacerNode, SpatialTextNode, SpatialTextStyle, SpatialTone, } from "./ir.js";
+export { isContainer, resolvePadding } from "./ir.js";
+export { Button, type ButtonProps, Card, Divider, type DividerProps, Field, type FieldProps, getSpatialKind, HStack, Image, type ImageProps, List, SPATIAL_KIND, Spacer, type SpacerProps, type SpatialKind, Stack, type StackProps, Text, type TextProps, VStack, } from "./primitives.js";
+//# sourceMappingURL=index.d.ts.map

package/spatial/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/spatial/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,KAAK,aAAa,EAClB,sBAAsB,EACtB,KAAK,mBAAmB,EACxB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,uBAAuB,EACvB,KAAK,eAAe,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,iBAAiB,EACtB,cAAc,EACd,aAAa,EACb,eAAe,GAChB,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EACf,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,IAAI,EACJ,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,EACL,KAAK,UAAU,EACf,cAAc,EACd,MAAM,EACN,KAAK,EACL,KAAK,UAAU,EACf,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,UAAU,EACf,IAAI,EACJ,KAAK,SAAS,EACd,MAAM,GACP,MAAM,kBAAkB,CAAC"}