@unoverse-platform/studio 0.1.102 → 0.1.104

package/vendor/sdk/lib/app.tsx

@@ -1,730 +0,0 @@
-/**
- * <StreamedUnoverseApp> — renders a TEMPLATE definition (the layout) and
- * fills its ComponentSlots from the store's timeline.
- *
- * A template owns nothing (UNOVERSE_SPEC.md §2e-0): it reads the shared state
- * and arranges what it finds. This component is that arrangement —
- *   - 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 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.
- */
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from "react";
-import {
-  collectSurfacedViews,
-  cssWidth,
-  placeWidthStyle,
-  dispatchAction,
-  formatRelative,
-  isViewField,
-  mountAliases,
-  orderedClaims,
-  propDefaults,
-  resolveActiveLayout,
-  resolveActiveView,
-  selectPointers,
-  viewOf,
-  type ComponentStore,
-  type ResolvedTheme,
-  type UnoverseClient,
-  type UnoverseDefinition,
-  type UnoverseNode,
-} from "./core";
-import { renderNode, styleToCss, keyframesCss, type ActionHandler, type SlotResolver } from "./render";
-
-// The pure template derivations moved to core/apps.ts (the portable brain —
-// framework-agnostic, guarded by sdk-core-portable.test.ts). Re-exported here so
-// existing consumers keep their import path.
-export { collectSurfacedViews, computeAppWidth, orderedClaims, resolveActiveLayout, resolveActiveView, selectPointers, viewOf } from "./core";
-import { UnoverseComponent } from "./UnoverseComponent";
-import { MountArrangement } from "./transition/index";
-import { guestHeldPointers } from "./transition/guestHold";
-
-/**
- * FLIP wrapper for a multi-occupant slot: when arrivals reorder the list (a refreshed
- * card floating to the front, a new card pushing the rest along), the existing cards
- * SLIDE to their new position instead of jumping. Generic list behavior, no styling
- * owned: each child sits in an unstyled measuring div; on every commit the previous
- * rect is compared by key and the delta is played back as a transform that eases to
- * identity. A key seen for the first time animates nothing (arrivals appear in place).
- */
-function FlipList({ items }: { items: { key: string; node: ReactNode }[] }) {
-  const positions = useRef(new Map<string, { left: number; top: number }>());
-  const order = useRef("");
-  const els = useRef(new Map<string, HTMLDivElement>());
-  useLayoutEffect(() => {
-    // ANIMATE ONLY A REORDER. The template re-renders for plenty of reasons that are not
-    // this list (typing writes the draft into template state every keystroke), and chrome
-    // above the list growing or the page scrolling shifts every measured position a
-    // little — playing those back made the cards wobble while the guest typed. Order is
-    // the thing this animates, so unchanged order = remeasure silently and do nothing.
-    // Positions are layout-relative (offsetLeft/Top), not viewport-relative, for the
-    // same reason: scroll must not read as movement.
-    const nextOrder = items.map((i) => i.key).join(" ");
-    // The guest's OS-level reduce-motion setting wins outright: reorders land instantly.
-    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-    const moved = !reduced && order.current !== "" && order.current !== nextOrder;
-    const next = new Map<string, { left: number; top: number }>();
-    for (const [k, el] of els.current) {
-      const pos = { left: el.offsetLeft, top: el.offsetTop };
-      next.set(k, pos);
-      const prev = positions.current.get(k);
-      const dx = prev && moved ? prev.left - pos.left : 0;
-      const dy = prev && moved ? prev.top - pos.top : 0;
-      if (dx || dy) {
-        el.style.transition = "none";
-        el.style.transform = `translate(${dx}px, ${dy}px)`;
-        requestAnimationFrame(() => {
-          el.style.transition = "transform 240ms ease";
-          el.style.transform = "";
-        });
-      }
-    }
-    positions.current = next;
-    order.current = nextOrder;
-  });
-  return (
-    <>
-      {items.map(({ key, node }) => (
-        <div
-          key={key}
-          ref={(el) => {
-            if (el) els.current.set(key, el);
-            else els.current.delete(key);
-          }}
-        >
-          {node}
-        </div>
-      ))}
-    </>
-  );
-}
-import { useUnoverseTheme, ensureFontStylesheets } from "./theme";
-import { IsolatedRoot } from "./isolate";
-import { useVoiceService, type UseVoiceServiceConfig, type VoiceService } from "./voice";
-
-export interface StreamedUnoverseAppProps {
-  client: UnoverseClient;
-  store: ComponentStore;
-  /** e.g. "unoverse://apps/acme/KeyService/definition" */
-  uri: string;
-  onAction?: ActionHandler;
-  theme?: ResolvedTheme;
-  /** Channel overrides for the template's declared props (e.g. per-tenant logoUrl/brandName).
-   *  Merged OVER the definition's own `props` defaults into the root data scope. */
-  props?: Record<string, unknown>;
-  /** Render inside a Shadow DOM for full CSS isolation (default true). See UnoverseComponent. */
-  isolate?: boolean;
-  /** DEV CHROME ON A CONTAINER (UNOVERSE_INTERFACE_MODEL §3): a host-supplied render
-   *  hook drawn ABOVE a Container's content — Studio uses it for per-container state
-   *  tabs. The SDK stays styleless: it hands the facts (name, the container's states,
-   *  the held interface's active state, a setter) and draws whatever comes back. */
-  templateChrome?: (info: { name: string; states: string[]; active?: string; set: (state: string) => void }) => ReactNode;
-  /** The `voice` NATIVE SERVICE config (UNOVERSE_SPEC §2e-1). Present ONLY for a
-   *  `service: "voice"` app — the host supplies the connection identity (apiUrl/wsUrl/
-   *  token/session) it already holds; the renderer OWNS the service so every host is
-   *  identical. Absent → the service is inert (no mic/WS ever opens). This is the ONE
-   *  shared home for the voice buttons: `startCall`/`endCall`/`toggleMute` are answered
-   *  HERE, not hand-wired per host (that drift is what broke the demo's Start Call). */
-  voice?: UseVoiceServiceConfig;
-  /** The voice service itself, when the host already runs one to share with the page's own
-   *  templates (appEngine). Given, the renderer uses it instead of starting a second. */
-  voiceService?: VoiceService;
-}
-
-/** Inert voice config for non-voice templates — the hook is called unconditionally
- *  (rules of hooks) but nothing opens until a `startCall` this template never fires.
- *  No `store` → not a producer, so it writes no callState into ordinary templates. */
-export const INERT_VOICE: UseVoiceServiceConfig = {
-  apiUrl: "",
-  session: { userId: "", conversationId: "", workflowId: "", targetTriggerNode: "" },
-};
-
-/** Every pointer a mounted template layout's slots currently select — its occupancy. */
-function collectSlotPointers(node: unknown, store: ComponentStore, scope?: Set<string>): string[] {
-  const out: string[] = [];
-  const walk = (n: unknown): void => {
-    if (!n || typeof n !== "object") return;
-    const un = n as UnoverseNode & { children?: unknown[]; item?: unknown; frame?: unknown; cases?: Record<string, unknown> };
-    if (un.type === "ComponentSlot") out.push(...selectPointers(store, un, scope));
-    (un.children ?? []).forEach(walk);
-    if (un.item) walk(un.item);
-    if (un.frame) walk(un.frame);
-    if (un.cases) Object.values(un.cases).forEach(walk);
-  };
-  walk(node);
-  return [...new Set(out)];
-}
-
-export function StreamedUnoverseApp({ client, store, uri, onAction, theme: themeProp, props, isolate = true, voice: voiceConfig, voiceService, templateChrome }: StreamedUnoverseAppProps) {
-  const [def, setDef] = useState<UnoverseDefinition | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  // MOUNTED TEMPLATES: an app entry with `use:` names a template definition; it is
-  // fetched once per app def and its own machinery runs inside the Template place.
-  const [mounted, setMounted] = useState<Record<string, UnoverseDefinition>>({});
-  // The voice native service lives HERE (shared), not in each host. Called every render
-  // (rules of hooks); inert until a `startCall` only a voice template has a button for.
-  // The audio WS lane travels WITH the SDK: derive it from the client's own server origin
-  // (same server that hosts /mcp + /stream + /ws/gravity), NEVER from the host — a host's
-  // `location.origin` is "null" in a sandboxed srcdoc iframe. Overrides any host wsUrl.
-  const own = useVoiceService(
-    voiceConfig && !voiceService ? { ...voiceConfig, wsUrl: client.serverOrigin.replace(/^http/, "ws") } : INERT_VOICE,
-  );
-  const voice = voiceService ?? own;
-  // No theme passed → fetch from the server (the SDK owns zero token values). The
-  // theme REF comes from the definition itself: a template belongs to a client org,
-  // and that org names its theme — `<org>/light`. Wait for the def before fetching
-  // (null = no fetch) so the wrong theme never flashes.
-  const fetched = useUnoverseTheme(client, themeProp ? null : def ? (def.org ? `${def.org}/light` : "light") : null);
-  const theme = themeProp ?? fetched;
-  // Register the theme's webfonts (served DATA) at document level — see ensureFontStylesheets.
-  useEffect(() => ensureFontStylesheets(theme), [theme]);
-
-  // Re-render on STRUCTURE changes only (turns placed/completed, template state,
-  // lifecycle). COMPONENT_DATA merges don't move the timeline — the leaves subscribe
-  // to their own slices — so streaming chunks never re-walk the whole template tree.
-  // Stable subscribe fn: an inline arrow would tear down + re-create the subscription
-  // every render.
-  const structureVersion = useSyncExternalStore(
-    useCallback((cb) => store.subscribe(cb), [store]),
-    useCallback(() => store.getStructureVersion(), [store]),
-  );
-
-  useEffect(() => {
-    let alive = true;
-    setDef(null);
-    setError(null);
-    setMounted({});
-    client
-      .readDefinition(uri)
-      .then((d) => {
-        if (!alive) return;
-        setDef(d);
-        const entries = ((d as { templates?: Record<string, { template?: string }> }).templates ?? {});
-        for (const entry of Object.values(entries)) {
-          const use = entry?.template;
-          if (!use) continue;
-          // A failed fetch may be a transient (dev-server restart mid-selection):
-          // retry once, and never fail SILENTLY — an empty mount with no console
-          // trace cost a debugging session (2026-08-28).
-          const turi = use.includes("://") ? use : `unoverse://templates/${use}`;
-          client
-            .readDefinition(turi)
-            .catch(() => new Promise((r) => setTimeout(r, 1500)).then(() => client.readDefinition(turi)))
-            .then((t) => alive && t && setMounted((m) => ({ ...m, [use]: t })))
-            .catch((e) => console.warn(`[unoverse] mounted template "${use}" failed to load:`, e));
-        }
-      })
-      .catch((e) => alive && setError(String(e?.message ?? e)));
-    return () => {
-      alive = false;
-    };
-  }, [client, uri]);
-
-  // A PAGE THAT STREAMED IN is on screen exactly like a mounted one, and claims exactly
-  // as much — but the app never named it, so nothing has fetched its definition. Its
-  // ADDRESS says what it is (`unoverse://templates/…`, §9c), which is all the SDK needs
-  // to learn what it claims. Fetched once per instance, into the same map the mounts use.
-  useEffect(() => {
-    let alive = true;
-    for (const p of store.getResponses().flatMap((r) => r.components)) {
-      const { chatId: c, nodeId: n } = store.split(p);
-      const url = store.getComponentUrl(c, n);
-      if (!url || !url.includes("://templates/")) continue;
-      const key = url.replace(/^unoverse:\/\/templates\//, "");
-      if (mounted[key]) continue;
-      client
-        .readDefinition(url)
-        .then((t) => alive && t && setMounted((m) => (m[key] ? m : { ...m, [key]: t })))
-        .catch((e) => console.warn(`[unoverse] streamed template "${key}" failed to load:`, e));
-    }
-    return () => {
-      alive = false;
-    };
-  }, [client, store, structureVersion, mounted]);
-
-
-  // ARRIVAL PLACEMENT (STATE_MODEL v2 §5 rule 3): nobody sends a state — the HOST
-  // places the actor at spawn. For each arrived component whose slice has no view yet:
-  //   1. the component's DECLARED INITIAL, if this template has a state for it (the
-  //      component's preference stands whenever the host can honor it);
-  //   2. else the SCAN — the first name in THIS template's declared order that the
-  //      component's public menu (`publicStates`, server-injected at init) also has;
-  //   3. no overlap at all → leave unset: the component wakes in its own initial and
-  //      rides inline (rule 6).
-  // The write is a data merge (never an interaction touch — placement is not the
-  // guest's hand), it happens ONCE per instance (a placed slice has a view), and the
-  // component owns the axis from then on: the template never writes it again.
-  useEffect(() => {
-    // An app with places is drawn by the screen document: nothing is placed by a scan.
-    if (def?.places?.length) return;
-    const order = def?.stateOrder;
-    if (!order?.length) return;
-    for (const turn of store.getResponses())
-      for (const p of turn.components) {
-        const { chatId, nodeId } = store.split(p);
-        const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
-        if (!slice || viewOf(slice) !== undefined) continue;
-        const menu = Array.isArray(slice.publicStates) ? (slice.publicStates as unknown[]) : undefined;
-        if (!menu) continue;
-        const initial = typeof slice.initialView === "string" ? slice.initialView : undefined;
-        const face = initial && order.includes(initial) ? initial : order.find((s) => menu.includes(s));
-        if (face) store.apply({ type: "COMPONENT_DATA", chatId, nodeId, data: { state: face } });
-      }
-  }, [def, store, structureVersion]);
-
-  // STATE OWNS LAYOUT (STATE_MODEL v2): the tree this template presents — the active
-  // state's layout (multi-layout templates), else the classic root. The resolved node
-  // is a stable per-def object, so downstream memos key off it.
-  const activeRoot = def ? resolveActiveLayout(def, store) : undefined;
-
-  // The CLAIM set — the states this template reacts to. v2: the declared order
-  // (stateOrder) IS the claim list; legacy defs fall back to layout names + surface
-  // claims. The timeline uses it to keep a claimed instance out of the flow (one
-  // instance → one placeholder).
-  const surfacedViews = useMemo(() => {
-    const views = new Set<string>(orderedClaims(def));
-    if (activeRoot) collectSurfacedViews(activeRoot, views, def?.defs as Record<string, unknown> | undefined);
-    // A MOUNTED template claims every state it declares (base included): instances
-    // it holds must not also render in the flow — one instance, one placeholder.
-    for (const tpl of Object.values(mounted)) {
-      for (const name of Object.keys(tpl.layouts ?? {})) views.add(name);
-      // A TEMPLATE CLAIMS WHAT ITS SECTIONS CLAIM, not just its state names. A grid-page
-      // holds its content in its own states, so the names were enough; a rich page holds
-      // its content in PARTS — a written hero, a section head, the band's cards — and
-      // each wears the section's face. Without these the parts are unclaimed at app
-      // level, so the SDK draws the page in its surface AND every piece of it again in
-      // the conversation flow (observed live 2026-08-30: the whole page, twice).
-      for (const secs of Object.values((tpl as { sections?: Record<string, { face?: string }[]> }).sections ?? {}))
-        for (const sec of secs) if (sec?.face) views.add(sec.face);
-    }
-    // `inline` IS NEVER A CLAIM: it is the universal fallback face, drawn in the flow. A
-    // streamed template's own `inline` layout (its compact chip) marked it claimed, so the
-    // flow skipped the chip (observed live 2026-09-06).
-    views.delete("inline");
-    return views;
-  }, [activeRoot, def, mounted]);
-
-  // RULE 4: the winner clears the states below it — WHEN A DELIVERY PUT IT THERE.
-  // An arrival taking a higher rung means the screen has moved on, so stale claims below
-  // it let go and rule 6's re-walk lands on the base. The guest's own navigation is not
-  // that: tapping a rail card to open its page must leave the rail's claims intact, or
-  // closing the page has nothing to return to. Priority still decides what SHOWS in both
-  // cases; this only decides what gets thrown away. Derived above the loading guards so
-  // this stays a hook, and off the SAME derivation the render path uses.
-  const ladder = def ? resolveActiveView(def, store, surfacedViews) : { view: "", byGuest: false };
-  useEffect(() => {
-    if (def?.places?.length) return;
-    if (ladder.view && !ladder.byGuest) {
-      const order = orderedClaims(def);
-      store.cancelBelow(ladder.view, order, mountAliases(def, new Set(order)));
-    }
-    // `structureVersion`: EVERY arrival re-runs this, not only the ones that change the
-    // winner. A card landing while a higher state is ALREADY active would otherwise keep
-    // its claim forever — the walk never re-ran — and closing the higher state dropped
-    // straight onto it (observed: a rail still there after a focus surface closed, because
-    // the card's render landed two seconds after the finder took focus). `cancelBelow`
-    // only bumps when it changed something, so this settles in one extra pass.
-  }, [ladder.view, ladder.byGuest, def, store, structureVersion]);
-
-
-  // Loading/error hints carry NO styling — the SDK owns zero styles.
-  if (error) return <div>Unoverse error: {error}</div>;
-  if (!def || !theme) return <div>Loading {uri}…</div>;
-
-  // ONE action interpreter for the whole tree: template chrome runs the same
-  // `dispatchAction` (core/actions.ts) every leaf runs — `setAppValue` writes
-  // template state, `then` chains, anything else routes to the channel. Template
-  // chrome has NO component slice, so `setValue` here is an authoring error (it
-  // belongs on the component); the empty ids make that write inert.
-  const dispatch: ActionHandler = (action, data, meta) => {
-    // VOICE NATIVE-SERVICE actions are answered by the shared service (§2e-1) — never
-    // forwarded to the host/workflow. This is the single wiring point that makes every
-    // host behave identically; audio rides the /ws/gravity lane, not the component stream.
-    if (typeof action === "string") {
-      if (action === "startCall") return void voice.startCall();
-      if (action === "endCall") return void voice.endCall();
-      if (action === "toggleMute") return void voice.toggleMute();
-      // "back to chat" leaves the voice surface — tear the call down first, then let the
-      // host handle any navigation it owns (falls through).
-      if (action === "backToChat") voice.endCall();
-    }
-    // GUEST CLOSE from TEMPLATE CHROME: a ✕ on the layout itself (a rail/panel header —
-    // not inside a single card) fires the CloseButton atom's `setValue view:"inline"`
-    // (legacy defs write `defaultState`). Template chrome has no card slice to write, so
-    // that write would be inert; instead it means "un-surface the current view" → the
-    // store retracts every surface to its declared base (the same reset a new turn
-    // runs). A card that closes ITSELF keeps using the plain component write (real
-    // ids), untouched. `then` still chains via dispatchAction below.
-    if (
-      action && typeof action === "object" &&
-      (action as { type?: string }).type === "setValue" &&
-      (action as { values?: { key?: string; value?: unknown }[] }).values?.some(
-        (v) => isViewField(v.key) && v.value === "inline",
-      )
-    ) {
-      store.closeSurfaces();
-      return;
-    }
-    dispatchAction(action as Parameters<typeof dispatchAction>[0], (data ?? {}) as Record<string, unknown>, {
-      store,
-      chatId: "",
-      nodeId: "",
-      sendToServer: onAction ? (t, payload) => onAction(t, payload, meta) : undefined,
-    });
-  };
-
-  const leaf = (pointer: string, extraData?: Record<string, unknown>, fill?: boolean) => {
-    const { chatId, nodeId } = store.split(pointer);
-    // Keyed by the INSTANCE (nodeId), not the pointer: the same instance re-delivered in
-    // a later turn keeps its React identity, so a refresh reconciles in place instead of
-    // remounting (the remount was the visible flicker). Unique among siblings — a turn's
-    // nodeIds are unique, and selectPointers dedupes cross-turn copies to one.
-    return <UnoverseComponent key={nodeId} 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 —
-  // the most recently surfaced view ("" = the conversation/welcome base). DERIVED off
-  // the store, never stored. Exactly one reaction surface renders: the active state's.
-  //
-  // PINNED LAYOUTS — the guest-control law: a layout authored `"pinned": true` changes
-  // ONLY by the guest's hand. While a pinned view is surfaced, background arrivals
-  // (cards from later searches, streamed renders) cannot displace it (observed live:
-  // the panel flapped between a card rail and the composing page). It yields to a
-  // GUEST write anywhere (tap-to-focus, its own ✕), to its component leaving the view,
-  // or to a template swap. Authored in the layout file — the SDK only enforces it.
-  // SAME derivation as resolveActiveLayout (resolveActiveView) — the layout on screen
-  // and the state its surfaces gate against must NEVER come from two different loops.
-  const surfacedView = resolveActiveView(def, store, surfacedViews).view;
-
-  // ComponentSlot — filter the timeline to matching component pointers (KeyService).
-  // A FACTORY: a mounted template's slots select within a SCOPE (the current
-  // delivery — hold: latest, basic form); the app's own slots stay unscoped.
-  // THE STATE THE SCREEN PLACED IT IN (docs/unoverse/design/screen/UNOVERSE_SCREEN.md §2.6): a place draws
-  // each interface in that face, so a guest's tap shows once the screen has placed it, and an open
-  // task can never draw in the conversation.
-  const placed = (p: string): Record<string, unknown> | undefined => {
-    const state = store.placedState(p);
-    return state ? { state } : undefined;
-  };
-  // WHAT A SLOT OR A PLACE HOLDS, drawn: its fallback when empty; else its frame around the
-  // leaves, a single occupant filling the frame; else the leaves as a list.
-  const drawPointers = (node: UnoverseNode, pointers: string[], key: React.Key | undefined, fill: boolean): ReactNode => {
-    if (pointers.length === 0) {
-      return node.fallback ? renderNode(node.fallback, {}, dispatch, theme, key ?? "fallback", undefined, def?.defs) : null;
-    }
-    // `frame` — chrome that exists ONLY because the slot matched (fallback's twin).
-    // The frame subtree renders with a slot resolver that serves the outer slot's
-    // matches to any bare nested ComponentSlot — so a focus overlay is BORN when a
-    // component enters the state and DIES when it leaves (§5b: derived, not stored).
-    if (node.frame) {
-      // A SURFACE'S SINGLE OCCUPANT FILLS THE SURFACE (docs/design/05): a limit-1
-      // surface (detail panel, focus overlay) gives its occupant the frame's full
-      // height — the component's `height: "full"` finally has a definite container,
-      // with zero per-face styling. Multi-occupant surfaces (a rail) stay content-sized.
-      // Multi-occupant surfaces (a rail) animate reorders; a single occupant fills its
-      // frame directly — a measuring wrapper there would break the height chain.
-      const innerSlot: SlotResolver = () =>
-        fill
-          ? pointers.map((p) => leaf(p, placed(p), fill))
-          : <FlipList items={pointers.map((p) => ({ key: store.split(p).nodeId, node: leaf(p, placed(p)) }))} />;
-      // A panel declares its width ONCE (docs/design/05): `appWidth` grows the app
-      // (computeAppWidth) AND sizes the frame box here — the two can never disagree.
-      // Named sizes resolve via theme.appSize like any token; unresolvable → no width.
-      // `flex: 0 0 auto` — a panel is its declared width ALWAYS. A container that
-      // can't fit the sum clips at the edge; panels never compress into garbage.
-      // ONE WIDTH LAW (core/apps placeWidthStyle), the same as a template place and
-      // computeAppWidth. This frame once had its own copy without the `flex` word, and the
-      // task surface rendered in a zero-width frame beside a full-width app the moment the
-      // org's flex token went (SAB's comparison, blank, 2026-09-07).
-      const placeStyle = placeWidthStyle((node as { appWidth?: string }).appWidth, theme.appSize);
-      const frame = placeStyle ? ({ ...node.frame, style: { ...(node.frame.style ?? {}), ...placeStyle } } as UnoverseNode) : node.frame;
-      return renderNode(frame, store.getAppState() as Record<string, unknown>, dispatch, theme, key ?? "frame", innerSlot, def?.defs);
-    }
-    return <FlipList key={key ?? "slot"} items={pointers.map((p) => ({ key: store.split(p).nodeId, node: leaf(p, placed(p)) }))} />;
-  };
-
-  const makeResolveSlot = (scope?: Set<string>): SlotResolver => {
-  const resolveSlot: SlotResolver = (node: UnoverseNode, key?: React.Key): ReactNode => {
-    // A PLACE draws what the screen document put in it (docs/unoverse/design/screen/UNOVERSE_SCREEN.md).
-    if (node.type === "Place") return drawPointers(node, [...store.placeItems(String((node as { name?: string }).name ?? ""))], key, node.holds === "one");
-    // A TEMPLATE PLACE (the container noun folded into templates, 2026-08-28): the
-    // layout places it by NAME and owns its width; the manifest's `templates:` block
-    // owns what it holds. An entry with `use:` MOUNTS a template definition (its own
-    // states, shapes and slots run here over the shared store); an entry with
-    // states/interface keeps the old holder behavior (a template with one shape).
-    if (node.type === "Template") {
-      const cname = (node as { name?: string }).name ?? "";
-      const spec = (def as { templates?: Record<string, { template?: string; states?: Record<string, { interface?: string; width?: string }>; interface?: string }> } | null)
-        ?.templates?.[cname];
-      // THE MOUNT: `template:` names a template definition (the holder grammar:
-      // a place names what it holds); its OWN machinery runs —
-      // resolveActiveLayout derives its state from the instances' faces, its slots
-      // claim by face, sub-states stay contained in each instance's slice. EMPTY
-      // COLLAPSES: nothing held → nothing drawn (frame included) — a place with
-      // nothing collapses.
-      if (spec?.template) {
-        const tpl = mounted[spec.template];
-        if (!tpl) return null;
-        // HOLD: LATEST (basic form, UNOVERSE_TEMPLATE_MODEL §9b): the mount holds
-        // only the CURRENT delivery — spent by the settle or the clear, never the
-        // guest's send. A judged DIRECTOR_VERDICT narrows it further (§7); no
-        // verdict, or a verdict holding nothing that survives, falls back to the
-        // whole delivery.
-        const active = resolveActiveLayout(tpl, store);
-        const delivery = store.currentDeliveryPointers();
-        const dirScope = store.directorScope(delivery);
-        const tplLayouts = (tpl as { layouts?: Record<string, UnoverseNode> }).layouts ?? {};
-        // THE GUEST'S HAND OUTRANKS THE SETTLE (§6b rule 3, state priority): an
-        // instance the guest holds open in a non-base face (Detail View) stays in
-        // the mount's scope through deliveries and settles — a new batch landing
-        // below must not unseat it. The hold releases when the guest writes the
-        // face back to the base (✕), and the CURRENT arrangement takes over.
-        const layoutNames = Object.keys(tplLayouts);
-        const baseLayout = (tpl as { defaultLayout?: string }).defaultLayout ?? layoutNames[0] ?? null;
-        const guestHeld = guestHeldPointers(
-          store.getResponses().flatMap((r) => r.components),
-          {
-            touchOf: (p) => store.touchOf(p),
-            interactionTouchOf: (p) => store.interactionTouchOf(p),
-            viewOf: (p) => {
-              const { chatId, nodeId } = store.split(p);
-              return viewOf(store.get(chatId, nodeId) as Record<string, unknown> | undefined);
-            },
-          },
-          layoutNames,
-          baseLayout,
-        );
-        const scope = guestHeld.length ? new Set([...(dirScope ?? delivery), ...guestHeld]) : (dirScope ?? delivery);
-        const held = active ? collectSlotPointers(active, store, scope) : [];
-        // THE TRANSITION MODEL (§13): the mount double-buffers — this render
-        // derives the NEXT arrangement; MountArrangement commits it only at a
-        // boundary (verdict change, guest layout change, un-directed mount), so
-        // a data ripple can never move the shelf, and EMPTY COLLAPSES only when
-        // an arrangement holding nothing is COMMITTED. Content inside held
-        // instances stays live: the closure reads slices at render time.
-        const nextArrangement = {
-          layoutName: active ? (Object.entries(tplLayouts).find(([, t]) => t === active)?.[0] ?? null) : null,
-          held,
-          verdictSig: dirScope ? [...dirScope].sort().join("|") : null,
-        };
-        const motion = ((theme as { motion?: { mount?: string } }).motion?.mount ?? "") === "transition";
-        return (
-          <MountArrangement
-            key={key ?? cname}
-            next={nextArrangement}
-            directed={
-              // THE ONE HOME (§9b clause 5): the grant is the template's own
-              // director SECTION, compiled into the served def's `sections`;
-              // the placement's `director:` block is the legacy fallback.
-              Object.values(((tpl as { sections?: Record<string, { kind?: string }[]> }).sections ?? {}))
-                .flat()
-                .some((s) => s?.kind === "director") || Boolean((spec as { director?: unknown }).director)
-            }
-            motion={motion}
-            render={(arr) => {
-              if (!arr.held.length) return null;
-              const arrActive = (arr.layoutName ? tplLayouts[arr.layoutName] : undefined) ?? active;
-              if (!arrActive) return null;
-              const arrScope = new Set(arr.held);
-              const tree = renderNode(arrActive, store.getAppState() as Record<string, unknown>, dispatch, theme, `${String(key ?? cname)}-tpl`, makeResolveSlot(arrScope), tpl.defs);
-              // A PLACE DECLARES ITS WIDTH ONCE (docs/design/05), same law as a slot
-              // panel: `appWidth` resolves via theme.appSize and sizes the frame box —
-              // `flex` is the served "all remaining space" name. Without it the frame's
-              // own styles decide (and a width-less frame beside a fixed-width chat
-              // collapsed to its padding — observed live 2026-08-28).
-              // ONE WIDTH LAW (core/apps placeWidthStyle): a named size or raw CSS sizes the
-              // place; `flex` with no token is the SDK's own word, fill the remaining host space
-              // (an unresolved name once collapsed the place to its padding, 2026-08-28).
-              const placeStyle = placeWidthStyle((node as { appWidth?: string }).appWidth, theme.appSize);
-              const rawFrame = (node as { frame?: UnoverseNode }).frame;
-              if (rawFrame) {
-                const frame = placeStyle ? ({ ...rawFrame, style: { ...(rawFrame.style ?? {}), ...placeStyle } } as UnoverseNode) : rawFrame;
-                const innerSlot: SlotResolver = () => tree;
-                return renderNode(frame, store.getAppState() as Record<string, unknown>, dispatch, theme, `${String(key ?? cname)}-frame`, innerSlot, def?.defs);
-              }
-              return <div style={{ display: "flex", flexDirection: "column", minHeight: 0, ...((placeStyle ?? {}) as React.CSSProperties) }}>{tree}</div>;
-            }}
-          />
-        );
-      }
-      const stateNames = spec?.states ? Object.keys(spec.states) : [];
-      const appState = store.getAppState() as Record<string, unknown>;
-      const active = (appState[`template:${cname}`] as string | undefined) ?? stateNames[0];
-      const heldInterface = spec?.states ? spec.states[active ?? ""]?.interface : spec?.interface;
-      // AN EMPTY STATE HOLDS NOTHING (`closed: {}` is a collapsed drawer): a declared
-      // container whose active state names no interface renders EMPTY — never a bare
-      // slot, which would grab every interface in the store and un-collapse the drawer.
-      const emptyState = Boolean(spec?.states) && !heldInterface;
-      // (legacy holder path continues below unchanged)
-      node = {
-        ...node,
-        type: "ComponentSlot",
-        select: heldInterface
-          ? ({ type: heldInterface, limit: 1 } as never)
-          : emptyState
-            ? ({ limit: 0 } as never)
-            : (node.select ?? {}),
-      } as UnoverseNode;
-      if (templateChrome && spec) {
-        const set = (state: string) => store.mergeAppState({ [`template:${cname}`]: state });
-        const inner = node;
-        // THE STATE'S WIDTH: a container state may declare one (a collapsed drawer's slim
-        // edge). Resolved like every panel width (app-size name, else raw CSS); absent,
-        // the wrapper hugs the held interface, whose active state owns its size.
-        const declaredW = spec?.states?.[active ?? ""]?.width;
-        const stateW = declaredW ? (cssWidth(theme.appSize?.[declaredW] ?? declaredW) ?? declaredW) : undefined;
-        return (
-          <div key={key} style={{ display: "flex", flexDirection: "column", minHeight: 0, height: "100%", ...(stateW ? { width: stateW, flex: "0 0 auto", overflow: "hidden" } : {}) }}>
-            {templateChrome({ name: cname, states: stateNames, active, set })}
-            <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>{resolveSlot(inner, `${String(key ?? cname)}-inner`)}</div>
-          </div>
-        );
-      }
-    }
-    // DECLARE = REARRANGE, CLAIM = FILL (UNOVERSE_INTERFACE_MODEL §4). A claim on a
-    // DECLARED reaction state renders only while that view IS the app's active state:
-    // those surfaces are what the app rearranges around, and they never stack. A claim
-    // on an UNDECLARED view is a CONTAINER: it fills whenever an interface holds that
-    // view, independent of every other region — which is how a base arrangement holds
-    // a list and an open page at once. Until 2026-08-25 the gate applied to every
-    // claim, so a base layout's claimed regions could never fill at all.
-    const claim = node.select?.where;
-    const declaredClaim = typeof claim?.eq === "string" && (def?.stateOrder ?? []).includes(claim.eq);
-    if (isViewField(claim?.field) && typeof claim?.eq === "string" && declaredClaim && claim.eq !== surfacedView) {
-      return node.fallback ? renderNode(node.fallback, {}, dispatch, theme, key ?? "fallback", undefined, def?.defs) : null;
-    }
-    return drawPointers(node, selectPointers(store, node, scope), key, node.select?.limit === 1);
-  };
-  return resolveSlot;
-  };
-  const resolveSlot = makeResolveSlot();
-
-  // Timeline — GENERIC iterator. Walks the timeline and renders the `user` / `assistant`
-  // DATA sub-tree per turn. Zero chat UX in the SDK: bubbles, alignment, structure all live
-  // in those sub-trees (design/templates/chatlayout/*.json). The assistant sub-tree's ComponentSlot
-  // is scoped to THAT turn's components.
-  const resolveTimeline = (node: UnoverseNode, key?: React.Key): ReactNode => {
-    // An app with places shows in the conversation exactly what the screen put there.
-    const inChat = def.places?.length ? new Set(store.placeItems("chat")) : null;
-    return (
-      <div key={key} style={styleToCss(node.style, theme)}>
-        {store.getTimeline().map((turn) => {
-          const sub = turn.role === "user" ? node.user : node.assistant;
-          if (!sub) return null;
-          // One instance → one placeholder (STATE_MODEL §5b). An instance whose active
-          // VIEW a reaction surface is showing is CLAIMED — the flow (the `inline`
-          // placeholder) must not render it too, or the same card paints twice. Instances
-          // in a view no surface claims stay here (the fallback). This is what makes "a
-          // component lifts into its surface" true instead of double-rendering it inline.
-          const shown =
-            turn.role === "assistant"
-              ? turn.components.filter((p) => {
-                  if (inChat) return inChat.has(p);
-                  const { chatId, nodeId } = store.split(p);
-                  const view = viewOf(store.get(chatId, nodeId) as Record<string, unknown> | undefined);
-                  return !view || !surfacedViews.has(view);
-                })
-              : [];
-          // Slot scoped to this turn's UNCLAIMED components (assistant turns only).
-          const turnSlot: SlotResolver = (slotNode, k) => {
-            let ptrs = [...shown];
-            if (slotNode.select?.limit != null) ptrs = ptrs.slice(0, slotNode.select.limit);
-            if (ptrs.length === 0) return slotNode.fallback ? renderNode(slotNode.fallback, {}, dispatch, theme, k ?? "fb", undefined, def?.defs) : null;
-            // Pass the turn's streaming state into each component's scope so a streamed
-            // component (e.g. StreamingText) can stop its own loading dots when complete.
-            const streaming = turn.role === "assistant" && turn.streamingState === "streaming";
-            return ptrs.map((p) => leaf(p, { streaming, ...placed(p) }));
-          };
-          // Data scope per turn = author's static data (avatarUrl, thinkingText…)
-          // + NEUTRAL projections of the timeline model. The SDK exposes facts, never
-          // UX policy: `text` (user message), `streaming` (the turn's streamingState),
-          // `empty` (no components yet). It does NOT decide "show a thinking indicator" —
-          // the definition composes that from `streaming` + `empty` (nested visibleWhen =
-          // AND). Static author data is forwarded verbatim; the SDK interprets none of it.
-          const time = formatRelative(turn.createdAt);
-          const data =
-            turn.role === "user"
-              ? { ...(node.userData ?? {}), text: turn.text, time }
-              : {
-                  ...(node.assistantData ?? {}),
-                  time,
-                  streaming: turn.streamingState === "streaming",
-                  // `empty`/`active` count only UNCLAIMED components: a turn whose sole card
-                  // lifted into a surface goes inactive (the definition hides it) rather than
-                  // leaving an empty avatar behind; a still-streaming turn stays active.
-                  empty: shown.length === 0,
-                  // `active` = in progress OR has visible content. A completed-empty turn is
-                  // inactive → the definition hides it (legacy ChatHistoryItem null-returns).
-                  active: turn.streamingState === "streaming" || shown.length > 0,
-                };
-          return renderNode(sub, data, dispatch, theme, turn.id, turnSlot, def?.defs);
-        })}
-      </div>
-    );
-  };
-
-  // One resolver for all store-backed template primitives.
-  const resolve: SlotResolver = (node, key) =>
-    node.type === "Timeline" ? resolveTimeline(node, key) : resolveSlot(node, key);
-
-  // Root data scope = the author's declared prop defaults (logoUrl, brandName, suggestions…)
-  // + channel overrides + NEUTRAL conversation-level facts derived from the store (isEmpty/
-  // hasMessages). This is what lets the page AROUND the message list (header, welcome screen,
-  // suggestion cards) bind + show/hide — the whole-template counterpart of the per-turn scope
-  // Timeline injects. The SDK adds no UX policy: just author content + model projections.
-  const isEmpty = store.getTimeline().length === 0;
-  const rootData: Record<string, unknown> = {
-    ...propDefaults(def.props),
-    ...((def as { state?: Record<string, unknown> }).state ?? {}),
-    ...(props ?? {}),
-    // The active template's OWN state — one generic bag of the DEV's chosen keys (draft,
-    // openPanel, suggestions data, focusMode, voice call state, …). No per-feature
-    // projections; the engine knows no key names (UNOVERSE_STATE_MODEL §2).
-    ...store.getAppState(),
-    // Conversation-derived facts — READ OFF the timeline / lifecycle, never stored.
-    isEmpty,
-    hasMessages: !isEmpty,
-    surfacedView,
-    lifecycle: store.getLifecycle(),
-    isThinking: store.getLifecycle() === "thinking",
-    isStreaming: store.getLifecycle() === "thinking" || store.getLifecycle() === "streaming",
-  };
-
-  // Inject the served keyframes ONCE for this render root so any `style.animation` in a
-  // definition resolves (the SDK animates generically — no per-animation primitive).
-  // The wrapper applies the SERVED base render settings (theme.root — font-smoothing, etc.):
-  // `display: contents` keeps it out of layout while its inherited props cascade to the tree.
-  // The SDK authors only `display: contents` (structure); every value comes from theme.root.
-  // Isolated → theme.root on the shadow-root container (reliable cascade); else → display:contents.
-  const keyframes = <style>{keyframesCss(theme)}</style>;
-  // A layout root never carries `appWidth` (guard-enforced) — panels inside it do.
-  const rootNode = (activeRoot ?? def.root) as UnoverseNode;
-  // The template's own shared pieces, threaded into every branch it draws: chrome, a
-  // slot's fallback, a timeline turn. A reference in any of them resolves against the
-  // same map rather than rendering nothing.
-  const tree = renderNode(rootNode, rootData, dispatch, theme, undefined, resolve, def?.defs);
-  // A template is a SURFACE: its render-root fills the box the host gives it, so a root
-  // that declares `height: "full"` (DATA) can resolve. This only fills when the host's box
-  // is definite-height; when the host sizes to content the 100% resolves to content — so a
-  // content-sized app (fluidHeight:false) still wraps its component. The SDK adds no layout
-  // policy beyond "a template fills its container"; the template DATA owns everything else.
-  const surfaceRoot = { ...(theme.root as CSSProperties), height: "100%" };
-  if (isolate) {
-    return (
-      <IsolatedRoot rootStyle={surfaceRoot}>
-        {keyframes}
-        {tree}
-      </IsolatedRoot>
-    );
-  }
-  return (
-    <>
-      {keyframes}
-      <div style={{ display: "contents", ...surfaceRoot }}>{tree}</div>
-    </>
-  );
-}