@unoverse-platform/studio 0.1.3 → 0.1.5

package/vendor/sdk/lib/UnoverseComponent.tsx

@@ -1,19 +1,54 @@
 /**
  * <UnoverseComponent> — reads a definition by URI from the Unoverse MCP server
- * (via ./core) and renders it natively with the given data.
+ * (via ./core) and renders it natively.
+ *
+ * ONE COMPONENT, TWO DATA SOURCES. A definition cannot tell which is rendering it, so the
+ * SDK stopped pretending they were different things:
+ *
+ *   data source          give it                        state lives in
+ *   a plain object       `uri` + `data`                 a local slice, here
+ *   the live stream      `store` + `chatId` + `nodeId`  the store's slice
+ *
+ * The split used to be two exported components, and a host had to know which one it was
+ * holding. It never mattered to the component: the same `renderNode` walks the same
+ * definition, and `setValue` writes the same instance either way.
  */
-import { useEffect, useMemo, useState, type CSSProperties } from "react";
-import type { ResolvedTheme, UnoverseClient, UnoverseDefinition } from "./core";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, type CSSProperties } from "react";
+import { dispatchAction, type ComponentStore, type ResolvedTheme, type UnoverseClient, type UnoverseDefinition } from "./core";
 import { renderNode, keyframesCss, type ActionHandler } from "./render";
 import { useUnoverseTheme, ensureFontStylesheets } from "./theme";
 import { IsolatedRoot } from "./isolate";
 
+/** Subscribe to an instance in the store, re-rendering when a merge lands. Snapshots THIS
+ *  instance's slice (merge() gives it a fresh identity), so chunks for other components bail
+ *  out in React instead of re-rendering everyone. Tolerates no store: the static path calls
+ *  the same hook, because hooks cannot be conditional. */
+export function useUnoverseInstance(store?: ComponentStore, chatId = "", nodeId = "") {
+  const subscribe = useCallback((cb: () => void) => (store ? store.subscribe(cb) : () => {}), [store]);
+  const data = useSyncExternalStore(
+    subscribe,
+    useCallback(() => (store ? store.get(chatId, nodeId) : undefined), [store, chatId, nodeId]),
+  );
+  const type = useSyncExternalStore(
+    subscribe,
+    useCallback(() => (store ? store.getType(chatId, nodeId) : undefined), [store, chatId, nodeId]),
+  );
+  return { type, data };
+}
+
 export interface UnoverseComponentProps {
   client: UnoverseClient;
-  /** e.g. "unoverse://components/Card" */
-  uri: string;
-  /** instance data bound into the definition (the streamed props) */
+  /** STATIC source: the definition to render, e.g. "unoverse://components/Card". */
+  uri?: string;
+  /** STATIC source: instance data bound into the definition. */
   data?: Record<string, unknown>;
+  /** LIVE source: the merge-state store. With it, `uri` and `data` come from the instance. */
+  store?: ComponentStore;
+  chatId?: string;
+  nodeId?: string;
+  /** Neutral turn state merged into the data scope (e.g. `streaming`), so a component can
+   *  reflect it. Live source only. */
+  extraData?: Record<string, unknown>;
   onAction?: ActionHandler;
   /**
    * Resolved theme. Optional — if omitted, the SDK FETCHES it from the server
@@ -36,9 +71,20 @@ export interface UnoverseComponentProps {
   fill?: boolean;
 }
 
-export function UnoverseComponent({ client, uri, data, onAction, theme, isolate = true, fill = false }: UnoverseComponentProps) {
+export function UnoverseComponent({ client, uri, data, store, chatId, nodeId, extraData, onAction, theme, isolate = true, fill = false }: UnoverseComponentProps) {
   const [def, setDef] = useState<UnoverseDefinition | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // A component's OWN view state (a tab, a step, an expanded face) moves by writing its own
+  // slice. That write is not a host concern: a tab click should work wherever a component
+  // renders, without every surface wiring a handler for it. So the renderer keeps the slice
+  // and applies `setValue` to it, and STILL forwards every action to `onAction` for hosts
+  // that care (a channel persisting state, a workflow answering a submit).
+  const [localSlice, setLocalSlice] = useState<Record<string, unknown>>({});
+  // LIVE SOURCE. The hook runs either way (hooks cannot be conditional) and no-ops without a
+  // store, so one component serves both paths without a wrapper deciding for it.
+  const live = useUnoverseInstance(store, chatId, nodeId);
+  const resolvedUri = store ? (live.type ? `unoverse://components/${live.type}` : null) : (uri ?? null);
+  const sourceData = store ? (extraData ? { ...(live.data ?? {}), ...extraData } : live.data) : data;
   // No theme passed → fetch it from the server (the SDK owns zero token values). The
   // theme REF comes from the definition itself: a template's `org` names its client's
   // theme (`<org>/light`); a universal component previews under the default set
@@ -53,14 +99,16 @@ export function UnoverseComponent({ client, uri, data, onAction, theme, isolate
     let alive = true;
     setDef(null);
     setError(null);
+    setLocalSlice({});
+    if (!resolvedUri) return;
     client
-      .readDefinition(uri)
+      .readDefinition(resolvedUri)
       .then((d) => alive && setDef(d))
       .catch((e) => alive && setError(String(e?.message ?? e)));
     return () => {
       alive = false;
     };
-  }, [client, uri]);
+  }, [client, resolvedUri]);
 
   // Fill props the instance didn't provide from the definition's defaults; instance `data`
   // overrides. This is what lets a partially-emitted component still render its declared
@@ -77,20 +125,61 @@ export function UnoverseComponent({ client, uri, data, onAction, theme, isolate
     [def],
   );
 
+  // ONE ACTION RULE, TWO OWNERS OF THE SLICE. `setValue` writes THIS instance's keys; where
+  // they land is the only difference between the two sources, and the component never knows.
+  const handleAction = useMemo<ActionHandler>(
+    () =>
+      store
+        ? (action, scope) =>
+            dispatchAction(action, scope, {
+              store,
+              chatId: chatId ?? "",
+              nodeId: nodeId ?? "",
+              // Server actions carry the INSTANCE context (which component + its current
+              // slice) so the channel can forward the submitted state with the action.
+              sendToServer: onAction
+                ? (t, payload) =>
+                    onAction(t, payload, {
+                      chatId,
+                      nodeId,
+                      type: live.type,
+                      state: store.get(chatId ?? "", nodeId ?? ""),
+                    })
+                : undefined,
+            })
+        : (action, payload, meta) => {
+            // No store, so the slice is local. This is what makes a tab work in a preview,
+            // a content panel or an email-shaped host with no state code in between.
+            if (action && typeof action === "object" && (action as { type?: string }).type === "setValue") {
+              const values = ((action as { values?: { key: string; value: unknown }[] }).values ?? []).filter(
+                (v) => v && typeof v.key === "string",
+              );
+              if (values.length)
+                setLocalSlice((prev) => ({ ...prev, ...Object.fromEntries(values.map((v) => [v.key, v.value])) }));
+            }
+            onAction?.(action, payload, meta);
+          },
+    [store, chatId, nodeId, onAction, live.type],
+  );
+
   // Loading/error hints carry NO styling — the SDK owns zero styles (tokens or hints).
   if (error) return <div>Unoverse error: {error}</div>;
-  if (!def || !activeTheme) return <div>Loading {uri}…</div>;
+  if (store && !live.type) return <div>waiting for COMPONENT_INIT…</div>;
+  if (!def || !activeTheme) return <div>Loading {resolvedUri ?? "component"}…</div>;
   // Internal state initial values (def.state) sit beneath the live slice — the
   // microapp's own keys (step/phase/…) start at their authored values and move only
   // when its actions write them. Props stay the EXTERNAL contract.
-  const merged = { ...propDefaults, ...(def?.state ?? {}), ...(data ?? {}) };
+  // The local slice sits ON TOP: a value the component wrote itself is the current one.
+  const merged = store
+    ? { ...propDefaults, ...(def?.state ?? {}), ...(sourceData ?? {}) }
+    : { ...propDefaults, ...(def?.state ?? {}), ...(sourceData ?? {}), ...localSlice };
   // Inject the served keyframes + apply the SERVED base render-root (theme.root — DS typography
   // + font-smoothing). When ISOLATED, theme.root is applied to the shadow-root container inside
   // IsolatedRoot (a REAL box — reliable font cascade in the shadow tree). When NOT isolated the
   // host owns isolation, so apply it here on a `display:contents` wrapper (out of layout while
   // its inherited props cascade) — the design-system baseline either way.
   const keyframes = <style>{keyframesCss(activeTheme)}</style>;
-  const tree = renderNode(def.root, merged, onAction, activeTheme);
+  const tree = renderNode(def.root, merged, handleAction, activeTheme);
   // The isolation container MIRRORS the component root's declared sizing intent (§4a:
   // the component owns its size; the host responds). A root that declares
   // `height: "full"` needs a definite chain — the container passes the host's height

package/vendor/sdk/lib/core/actions.ts

@@ -53,6 +53,12 @@ export function dispatchAction(
     // Structure-bumping write (not the deferred COMPONENT_DATA path): templates re-resolve
     // their `select.where` slots the moment a component changes its own state (§5b).
     ctx.store.mergeComponentState(ctx.chatId, ctx.nodeId, patch);
+    // A CHANGED LAYOUT IS NEWS. `defaultState` is the view a component is showing, so a
+    // write to it means this instance just entered a different face — the moment an
+    // `onEnterView` hook exists for. Reported on the channel path every other server
+    // action already uses; the server decides whether any hook cares. Nothing to author:
+    // the setValue already carries the fact, so no component repeats it in a `then`.
+    if (ctx.nodeId && "defaultState" in patch) ctx.sendToServer?.("viewEntered", { layout: patch.defaultState });
   } else if (spec.type === "setTemplateValue") {
     // Write the dev's chosen keys into TEMPLATE state — the template-state twin of setValue.
     // No component scope. The dev builds disclosure / focus / etc. from a key THEY name

package/vendor/sdk/lib/core/client.ts

@@ -79,18 +79,46 @@ export class UnoverseClient {
     return this.connecting;
   }
 
+
+  /**
+   * A SERVER RESTART kills every session it was holding, and the client cannot know: it
+   * keeps a live-looking transport whose session id the server has never heard of, so every
+   * later call returns "No valid session" until the page is reloaded. One dropped session
+   * should not require a reload of every open tab.
+   *
+   * So a call that fails that way reconnects ONCE and runs again. Anything else rethrows,
+   * because a retry loop around a real error hides it.
+   */
+  private async withSession<T>(run: () => Promise<T>): Promise<T> {
+    await this.connect();
+    try {
+      return await run();
+    } catch (err) {
+      if (!/No valid session|session not found/i.test(String((err as Error)?.message ?? err))) throw err;
+      this.connected = false;
+      this.connecting = null;
+      // The SAME construction as the constructor, validator included: that validator is
+      // deliberate (a CSP that forbids `new Function` breaks the default one), and a
+      // reconnect that quietly dropped it would fail only on the strictest host.
+      this.client = new Client(
+        { name: "unoverse-core", version: "0.0.1" },
+        { jsonSchemaValidator: new CfWorkerJsonSchemaValidator() },
+      );
+      await this.connect();
+      return run();
+    }
+  }
+
   /** Generic tools/call passthrough (e.g. `user_action` component submissions). */
   async callTool(name: string, args: Record<string, unknown>): Promise<unknown> {
-    await this.connect();
-    return this.client.callTool({ name, arguments: args });
+    return this.withSession(() => this.client.callTool({ name, arguments: args }));
   }
 
   /** resources/read a definition by URI (e.g. unoverse://components/Card). Cached. */
   async readDefinition(uri: string): Promise<UnoverseDefinition> {
     const cached = this.cache.get(uri);
     if (cached) return cached;
-    await this.connect();
-    const res = await this.client.readResource({ uri });
+    const res = await this.withSession(() => this.client.readResource({ uri }));
     const first = res.contents[0] as { text?: string };
     if (!first?.text) throw new Error(`No definition content for ${uri}`);
     const def = JSON.parse(first.text) as UnoverseDefinition;
@@ -105,8 +133,7 @@ export class UnoverseClient {
   async readTheme(name = "light"): Promise<ResolvedTheme> {
     const cached = this.themeCache.get(name);
     if (cached) return cached;
-    await this.connect();
-    const res = await this.client.readResource({ uri: `unoverse://theme/${name}` });
+    const res = await this.withSession(() => this.client.readResource({ uri: `unoverse://theme/${name}` }));
     const first = res.contents[0] as { text?: string };
     if (!first?.text) throw new Error(`No theme content for ${name}`);
     const theme = JSON.parse(first.text) as ResolvedTheme;

package/vendor/sdk/lib/primitives.tsx

@@ -112,12 +112,30 @@ function nodeChrome(node: UnoverseNode, data: Record<string, unknown>, theme: Re
 
 /** `Box`/`Stack`/`Row`/`Column` — the generic container (`<div>`). Children are
  *  pre-rendered by the dispatcher; layout/look come entirely from node.style. */
+/**
+ * INSPECTABILITY: a node carrying `$id` stamps it on the element it renders.
+ *
+ * Nothing in the SDK reads it back and nothing looks different without it. It exists so a
+ * TOOL can ask "which element did this node produce" — an authoring surface boxing the node
+ * under the cursor, for instance. The renderer is the only place that can answer, because
+ * `Switch`, `Each` and `visibleWhen` mean the rendered tree is not the definition tree, so
+ * the link is made while rendering or not at all.
+ *
+ * `$id` is assigned by whoever supplies the definition, never by an author. This is a
+ * generic behaviour, not a style and not a UX shape: no primitive is added, no layout
+ * decision is taken, and a definition without `$id` renders byte-identically.
+ */
+const inspectId = (node: UnoverseNode): string | undefined => {
+  const id = (node as { $id?: unknown }).$id;
+  return typeof id === "string" ? id : undefined;
+};
+
 export function BoxView({ node, data, theme, children }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; children?: ReactNode }): ReactNode {
   const { className, styleEls, style } = nodeChrome(node, data, theme);
   const scrollRef = useAutoScrollToEnd(node.autoScroll === true);
   const revealRef = useRevealWhenStuck(node.revealOnStick === true);
   return (
-    <div ref={scrollRef ?? revealRef} className={className} style={style}>
+    <div ref={scrollRef ?? revealRef} className={className} style={style} data-unoverse-id={inspectId(node)}>
       {styleEls}
       {children}
     </div>
@@ -203,12 +221,12 @@ function useRevealWhenStuck(enabled: boolean) {
 export function TextView({ node, data, theme }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
   // Literal `value` fallback: components are microapps — static copy is HARDCODED in the
   // def, props exist only for state (UNOVERSE_AUTHORING.md). bind wins when present.
-  return <span style={styleToCss(node.style, theme, data)}>{bound(node.bind?.value, data) ?? (node.value as ReactNode)}</span>;
+  return <span style={styleToCss(node.style, theme, data)} data-unoverse-id={inspectId(node)}>{bound(node.bind?.value, data) ?? (node.value as ReactNode)}</span>;
 }
 
 /** `Image` — a bound OR literal src (`<img>`). */
 export function ImageView({ node, data, theme }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
-  return <img style={styleToCss(node.style, theme, data)} src={bound(node.bind?.src, data) ?? node.src} alt={bound(node.bind?.alt, data) ?? node.alt ?? ""} />;
+  return <img data-unoverse-id={inspectId(node)} style={styleToCss(node.style, theme, data)} src={bound(node.bind?.src, data) ?? node.src} alt={bound(node.bind?.alt, data) ?? node.alt ?? ""} />;
 }
 
 /** `Button` — fires `onAction(node.action, data)`. Content is a bound label OR composed
@@ -216,7 +234,7 @@ export function ImageView({ node, data, theme }: { node: UnoverseNode; data: Rec
 export function ButtonView({ node, data, theme, onAction, children }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler; children?: ReactNode }): ReactNode {
   const { className, styleEls, style, disabled } = nodeChrome(node, data, theme);
   return (
-    <button className={className} style={style} disabled={disabled} onClick={() => onAction?.(node.action ?? "click", data)}>
+    <button className={className} style={style} disabled={disabled} data-unoverse-id={inspectId(node)} onClick={() => onAction?.(node.action ?? "click", data)}>
       {styleEls}
       {node.children?.length ? children : bound(node.bind?.label, data)}
     </button>
@@ -418,6 +436,17 @@ function buildMarkdownOverrides(theme: ResolvedTheme, inheritLinkColor = false)
     a: { component: ExternalLink },
     table: { component: ScrollableTable },
     img: { component: MarkdownImage },
+    // INLINE MARKS and BLOCKS. Authored copy uses all of these (a bolded access code, a
+    // rule between sections, a quoted term), and an element absent from this map renders
+    // at the browser's default — the one place a definition's look escapes the token
+    // layer. Each maps to a served recipe key; the VALUES live in rx/styles/semantic/prose.
+    strong: { props: { style: s("strong") } },
+    em: { props: { style: s("emphasis") } },
+    del: { props: { style: s("strikethrough") } },
+    code: { props: { style: s("code") } },
+    pre: { props: { style: s("codeBlock") } },
+    blockquote: { props: { style: s("blockquote") } },
+    hr: { props: { style: s("rule") } },
     th: { props: { style: { ...s("cell"), ...s("headerCell") } } },
     td: { props: { style: s("cell") } },
     ul: { props: { style: { ...s("list"), listStyleType: p.bulletStyle as string } } },

package/vendor/sdk/lib/render.tsx

@@ -50,6 +50,8 @@ export { styleToCss, keyframesCss } from "./style";
 export interface ActionMeta {
   chatId?: string;
   nodeId?: string;
+  /** Which component this instance is — so the server needs no registry to find out. */
+  type?: string;
   state?: Record<string, unknown>;
 }
 
@@ -111,7 +113,12 @@ export function renderNode(
 
   // Store-backed / leaf primitives → dispatch to ./primitives.
   if (node.type === "Skeleton") return <SkeletonView key={key} variant={node.variant} theme={theme} />;
-  if (node.type === "Icon") return <IconView key={key} name={node.bind?.name ? (data[node.bind.name] as string) : node.icon} style={node.style} theme={theme} />;
+  // Icon: DATA path reads `bind.name`; LITERAL path reads the `icon` attribute. `name` is
+  // read as a literal too, because an atom that binds `name` (the only spelling the data
+  // path reads) has that bind turned INTO a `name` attribute when a Ref supplies the glyph
+  // through `with` — so without this an atom can be data-driven or literal, never both.
+  if (node.type === "Icon")
+    return <IconView key={key} name={node.bind?.name ? (data[node.bind.name] as string) : (node.icon ?? node.name)} style={node.style} theme={theme} />;
   if (node.type === "Input") return <InputView key={key} node={node} data={data} theme={theme} onAction={onAction} />;
   if (node.type === "Markdown") return <MarkdownView key={key} node={node} data={data} theme={theme} />;
   if (node.type === "ComponentSlot" || node.type === "Timeline") return slot ? slot(node, key) : null;
@@ -136,9 +143,17 @@ export function renderNode(
     const src = node.bind?.items ? data[node.bind.items] : node.items;
     const items = Array.isArray(src) ? src : [];
     const tpl = node.template;
-    const scopeOf = (item: unknown): Record<string, unknown> =>
-      item != null && typeof item === "object" ? (item as Record<string, unknown>) : { value: item };
-    const rendered = tpl ? items.map((item, i) => renderNode(tpl, scopeOf(item), onAction, theme, i, slot)) : null;
+    // WHERE AN ITEM SITS is something only the renderer knows, and a numbered list cannot
+    // be authored without it: the data carries no ordinal, and a template cannot count.
+    // `index` is 0-based for logic, `position` 1-based because that is what a reader sees.
+    // The item's own fields always win, so data that carries either name is untouched.
+    const scopeOf = (item: unknown, i: number): Record<string, unknown> => {
+      const base = { index: i, position: i + 1 };
+      return item != null && typeof item === "object"
+        ? { ...base, ...(item as Record<string, unknown>) }
+        : { ...base, value: item };
+    };
+    const rendered = tpl ? items.map((item, i) => renderNode(tpl, scopeOf(item, i), onAction, theme, i, slot)) : null;
     return (
       <BoxView key={key} node={node} data={data} theme={theme}>
         {rendered}

package/vendor/sdk/lib/streamed.tsx

@@ -1,27 +1,15 @@
 /**
- * Streaming binding: subscribe to the merge-state store and render the
- * component instance, re-rendering when COMPONENT_INIT/COMPONENT_DATA merge in.
+ * DEPRECATED ALIAS. `UnoverseComponent` now renders from either a plain `data` object or a
+ * live store, so the streamed variant is the same component with the store props filled in.
+ *
+ * Kept so existing channels keep working while their call sites move over. Nothing here
+ * decides anything: it forwards.
  */
-import { useCallback, useMemo, useSyncExternalStore } from "react";
-import { dispatchAction, type ComponentStore, type ResolvedTheme, type UnoverseClient } from "./core";
-import { UnoverseComponent } from "./UnoverseComponent";
+import { UnoverseComponent, useUnoverseInstance } from "./UnoverseComponent";
+import type { ComponentStore, ResolvedTheme, UnoverseClient } from "./core";
 import type { ActionHandler } from "./render";
 
-/** Subscribe to a component instance in the store (re-renders on merge).
- *  Snapshots THIS instance's slice (merge() gives it a fresh identity per merge),
- *  so chunks for other components bail out in React instead of re-rendering everyone. */
-export function useUnoverseInstance(store: ComponentStore, chatId: string, nodeId: string) {
-  const subscribe = useCallback((cb: () => void) => store.subscribe(cb), [store]);
-  const data = useSyncExternalStore(
-    subscribe,
-    useCallback(() => store.get(chatId, nodeId), [store, chatId, nodeId]),
-  );
-  const type = useSyncExternalStore(
-    subscribe,
-    useCallback(() => store.getType(chatId, nodeId), [store, chatId, nodeId]),
-  );
-  return { type, data };
-}
+export { useUnoverseInstance };
 
 export interface StreamedUnoverseComponentProps {
   client: UnoverseClient;
@@ -30,36 +18,13 @@ export interface StreamedUnoverseComponentProps {
   nodeId: string;
   onAction?: ActionHandler;
   theme?: ResolvedTheme;
-  /** Neutral turn state merged into the component's data scope (e.g. `streaming`), so a
-   *  component can reflect it — like legacy passing `streamingState` to StreamingText. */
+  /** Neutral turn state merged into the component's data scope (e.g. `streaming`). */
   extraData?: Record<string, unknown>;
   /** A surface's single occupant fills the surface — see UnoverseComponent.fill. */
   fill?: boolean;
 }
 
-/** Resolves `type` from the store → its definition → renders with merged data. */
-export function StreamedUnoverseComponent({ client, store, chatId, nodeId, onAction, theme, extraData, fill }: StreamedUnoverseComponentProps) {
-  const { type, data } = useUnoverseInstance(store, chatId, nodeId);
-  // Interpret the action envelope (§2e-3): `setValue` writes THIS instance's slice
-  // locally (the ported `updateData`); any other type routes to the channel handler
-  // (the workflow). `then` chains. The component never sees the store directly.
-  const handleAction = useMemo<ActionHandler>(
-    () => (action, scope) =>
-      dispatchAction(action, scope, {
-        store,
-        chatId,
-        nodeId,
-        // Server actions carry the INSTANCE context (which component + its current slice)
-        // so the channel can forward the submitted state — e.g. a wizard's collected
-        // answers — with the action. Transport metadata only; nothing is interpreted here.
-        sendToServer: onAction ? (t, payload) => onAction(t, payload, { chatId, nodeId, state: store.get(chatId, nodeId) }) : undefined,
-      }),
-    [store, chatId, nodeId, onAction],
-  );
-  if (!type) return <div>waiting for COMPONENT_INIT…</div>;
-  // No focus/displayState injection: a component's inline/focused look is its OWN state,
-  // written via the `setValue` action into this slice and read via `visibleWhen` — the SDK
-  // hardcodes no focus concept (UNOVERSE_STATE_MODEL §2). It's just another data field.
-  const merged = extraData ? { ...data, ...extraData } : data;
-  return <UnoverseComponent client={client} uri={`unoverse://components/${type}`} data={merged} onAction={handleAction} theme={theme} fill={fill} />;
+/** @deprecated Render `UnoverseComponent` with `store`, `chatId` and `nodeId`. */
+export function StreamedUnoverseComponent(props: StreamedUnoverseComponentProps) {
+  return <UnoverseComponent {...props} />;
 }

package/vendor/sdk/lib/template.tsx

@@ -7,7 +7,7 @@
  *   - reads the template recipe by URI (resources/read, via the client),
  *   - subscribes to the store so it re-renders as components stream in,
  *   - resolves each ComponentSlot against the timeline and renders the matched
- *     leaves with the SAME StreamedUnoverseComponent used everywhere else.
+ *     leaves with the SAME UnoverseComponent used everywhere else (store-backed).
  *
  * This slice handles ComponentSlot + Skeleton (Tier-1, e.g. KeyService). The
  * chat primitives (Conversation/Input/…) come in later slices.
@@ -15,7 +15,7 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from "react";
 import { dispatchAction, type ComponentStore, type ResolvedTheme, type UnoverseClient, type UnoverseDefinition, type UnoverseNode } from "./core";
 import { renderNode, styleToCss, keyframesCss, cssWidth, type ActionHandler, type SlotResolver } from "./render";
-import { StreamedUnoverseComponent } from "./streamed";
+import { UnoverseComponent } from "./UnoverseComponent";
 import { useUnoverseTheme, ensureFontStylesheets } from "./theme";
 import { IsolatedRoot } from "./isolate";
 import { useVoiceService, type UseVoiceServiceConfig } from "./voice";
@@ -351,7 +351,7 @@ export function StreamedUnoverseTemplate({ client, store, uri, onAction, theme:
 
   const leaf = (pointer: string, extraData?: Record<string, unknown>, fill?: boolean) => {
     const { chatId, nodeId } = store.split(pointer);
-    return <StreamedUnoverseComponent key={pointer} client={client} store={store} chatId={chatId} nodeId={nodeId} onAction={dispatch} theme={theme} extraData={extraData} fill={fill} />;
+    return <UnoverseComponent key={pointer} client={client} store={store} chatId={chatId} nodeId={nodeId} onAction={dispatch} theme={theme} extraData={extraData} fill={fill} />;
   };
 
   // THE ACTIVE STATE (docs/design/04): a template is in exactly ONE state at a time —

package/vendor/skills/unoverse-create/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: unoverse-create
+description: Create or edit Unoverse platform artifacts — UI components (including briefed/AI-filled components), templates, atoms and styles (rx/), agent skills and prompt blocks (prompts/), custom workflow nodes (nodes/), and workflows built live on the Canvas via the builder MCP. Use when the user wants to create, add, build, or modify a component, template, theme, agent skill, prompt block, custom node, or workflow in an Unoverse starter repo.
+---
+
+# Creating Unoverse Artifacts
+
+You are helping a developer build in the **Unoverse developer carve-out** — the three
+editable folders mounted into the running platform:
+
+| Folder | What lives there |
+|---|---|
+| `apps/unoverse/rx/` | **Design** (data, not code): components, atoms, org-scoped templates + styles |
+| `apps/unoverse/prompts/` | **Behavior**: agent skills (`skills/`) + prompt blocks (`blocks/`) |
+| `apps/unoverse/nodes/` | **Logic**: custom workflow nodes, authored as YAML |
+
+## Step 1 — Identify the artifact, read its playbook
+
+Decide what the user is creating, then **read the matching reference file before writing
+anything**:
+
+| The user wants… | Read |
+|---|---|
+| A UI component or shared atom — incl. a page/card the AI fills with content (briefed) | `references/component.md` (§Briefs for AI-filled) |
+| A template / app layout (chat surface, wizard shell) | `references/template.md` |
+| A style / theme / token change | `references/component.md` §Tokens |
+| An agent skill (behavior guide the AI follows) | `references/agent-skill.md` |
+| A prompt block (reusable prompt fragment) | `references/block.md` |
+| A custom workflow node (integration, tool, logic) | `references/node.md` |
+| A workflow (wire nodes into an agent/pipeline on the Canvas) | `references/workflow.md` |
+
+Workflows are the one artifact that is NOT files: they are built live on the running
+platform through the `canvas` MCP (registered by this repo's `.mcp.json`) —
+the playbook covers the bind/build/test contract.
+
+If it's ambiguous (e.g. "add a card that shows weather"), it's usually a **component**
+(the UI) plus possibly a **node** (the data source) — confirm the scope with the user.
+
+**New to design artifacts?** The guided learning journey at `docs/design/` (README →
+quick-start → … → troubleshooting) teaches components, templates, the state model
+(incl. locked voice/native state), tokens, Studio, and validation in order;
+`docs/design/CLAUDE.md` is the condensed agent rulebook. The playbooks here assume that
+material.
+
+## Step 2 — Hard rules (apply to every artifact)
+
+1. **Only edit the three carve-out folders.** Never touch, vendor, or work around the
+   SDK, engine, or server — they are not yours to change. If a task seems to require an
+   SDK change, the answer is almost always "express it as data" — re-read the playbook.
+2. **Docs are the source of truth.** The playbooks name the design journey and the deep
+   references ([UNOVERSE_AUTHORING](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_AUTHORING.md), [UNOVERSE_STATE_MODEL](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_STATE_MODEL.md), [UNOVERSE_LAYERS](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_LAYERS.md),
+   [UNOVERSE_CONFORMANCE](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_CONFORMANCE.md)). They live in the docs repo
+   (https://github.com/unoverse-platform/docs), not in your repo. When the user's request goes beyond the playbook, read the named section rather
+   than improvising conventions.
+3. **UI is data.** No pixels, hex colors, or CSS anywhere — token names only. No logic
+   in definitions — anything computed (totals, formatting, chosen colors) is computed in
+   the node and sent as a plain field.
+4. **Audit before you're done.** Every component/template must pass the conformance
+   checklist ([UNOVERSE_AUTHORING](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_AUTHORING.md) §9). Walk it item by item.
+5. **Discovery meta is ranked, not read.** Any spatially-discoverable artifact — a
+   component or template with a manifest, an agent skill, a node — is selected by
+   embedding `title`/`name` + `whenToUse`/`description` + `category` against the user's
+   own words (or the planner's task). The strict contract is
+   `docs/nodes/node-discoverability.md`: outcome-first, utterance-shaped, opening
+   words dominate, disqualify by property (never name a sibling). Each playbook carries
+   the summary; read doc 14 before writing any meta.
+
+## Step 3 — Deploy loop (after the artifact is written)
+
+Components and templates have NO scaffold command — author them from the references
+(mirror the closest existing artifact). Validation lives in Studio: its publish step
+lints every definition before anything leaves the machine (0 errors required, doc-cited
+messages; justify any warning), and the conformance checklist is
+[UNOVERSE_CONFORMANCE](https://github.com/unoverse-platform/docs/blob/main/unoverse/UNOVERSE_CONFORMANCE.md).
+
+| Artifact | To see it live |
+|---|---|
+| Component / atom / template / style | Preview in Studio (`unoverse studio`), then publish from Studio — the publish lint gates it |
+| Existing component restyle/edit only | takes effect live (the SDK reads `rx/` directly) |
+| Agent skill / prompt block | publish from Studio, same gate |
+| Node | Studio's Nodes screen: Load sample → Run. A node is YAML; running it is the only proof (no build) |
+
+Verify the platform with `unoverse check` (services, schema, environment). Studio opens
+on :4108 (`unoverse studio` from the project folder).
+
+> In the platform monorepo (not the starter), the node docs live at
+> `packages/docs/nodes/`, the design journey at `packages/docs/design/`, and the dev loop
+> is just `npm run dev` — component nodes synthesize from rx/ definitions at boot.

package/vendor/skills/unoverse-create/references/agent-skill.md

@@ -0,0 +1,65 @@
+# Playbook — Agent Skills (prompts/skills)
+
+An agent skill is a markdown behavior guide the platform's AI agents discover and follow
+at runtime (e.g. how to handle complaints, how to walk a user through a process). It is
+**prose for an agent**, not code.
+
+## Where files go
+
+```
+apps/unoverse/prompts/skills/<skill-name>/
+  SKILL.md           # required — frontmatter + instructions
+```
+
+The runtime scans this folder and serves skills to agents; agents match on the
+`description` and `triggers`.
+
+## SKILL.md format
+
+```markdown
+---
+name: skill-name                # required: lowercase, numbers, hyphens; max 64 chars
+title: Skill Name               # human display name — shows as the item's title in listings
+description: What this skill IS — ONE short line (≤ 120 chars), the listing subtitle
+whenToUse: The SELECTION text — outcome-first, in the user's vocabulary; ranked against intent for spatial discovery. See docs/nodes/node-discoverability.md — the node rules apply verbatim.
+version: 1.0.0                  # optional, semver
+category: ai                    # optional: ai | integration | workflow | utility
+triggers:                       # optional, max 20 keywords/phrases (2–50 chars each)
+  - keyword or phrase
+credentials: []                 # optional: credential types the skill's flow needs
+nodeTypes: []                   # optional: workflow node types the skill relies on
+---
+
+# Skill Name
+
+## When to Use This Skill
+[The situations that should activate this behavior]
+
+## Approach / Instructions
+[Clear, step-by-step guidance. Concrete do/don't phrasing beats abstractions —
+include example lines the agent can use verbatim where tone matters.]
+
+## Examples
+[Concrete before/after or dialogue examples]
+```
+
+Stick to the keys above. The markdown body must exist — a skill with frontmatter only
+is invalid.
+
+## Writing rules
+
+1. **`whenToUse` does the routing; `description` says what it is.** Never blend them
+   into one field. `whenToUse` is embedded and ranked against user intent (spatial
+   discovery / findIntent) — write it **outcome-first in the user's vocabulary**
+   ("Handle an unhappy customer — a complaint, frustration, or a request to
+   escalate…"), never mechanism-first. The full rules are
+   `docs/nodes/node-discoverability.md` — they apply to skills verbatim.
+2. **Study an existing skill** in `prompts/skills/` and match its voice and structure.
+3. Keep instructions outcome-focused and scannable: short sections, bulleted do/don't
+   lists, explicit escalation/stop conditions.
+4. One skill = one behavior. If you're writing "and also…", split it.
+
+## Ship
+
+`docker compose restart unoverse` — the runtime rescans skills at boot. Verify the
+skill appears via the platform's skill listing (`unoverse check` for overall health).