@unoverse-platform/studio 0.1.103 → 0.1.104

package/vendor/sdk/lib/dom/app.ts

@@ -0,0 +1,546 @@
+/**
+ * AN APP, in plain DOM: draws an app or template definition and fills its slots, places,
+ * mounted templates and conversation from the store.
+ *
+ * A template owns nothing (UNOVERSE_SPEC.md §2e-0): it reads the shared state and arranges
+ * what it finds. Each instance it places is drawn by the same component everywhere
+ * (./component), which follows its own slice. The app draws again only when the store's
+ * STRUCTURE moves (turns placed, app state, lifecycle), never per streamed chunk.
+ */
+import type { ResolvedTheme, UnoverseDefinition, UnoverseNode } from "../core/types";
+import type { ComponentStore } from "../core/store";
+import { dispatchAction } from "../core/actions";
+import {
+  collectSurfacedViews,
+  cssWidth,
+  formatRelative,
+  isViewField,
+  mountAliases,
+  orderedClaims,
+  placeWidthStyle,
+  propDefaults,
+  resolveActiveLayout,
+  resolveActiveView,
+  selectPointers,
+  viewOf,
+} from "../core/apps";
+import { decideCommit, type Arrangement } from "../transition/decide";
+import { guestHeldPointers } from "../transition/guestHold";
+import { keyframesCss, styleToCss, type CssStyle } from "../style";
+import type { ActionHandler } from "../actions";
+import { mountComponent, type ComponentMount, type DefinitionSource } from "./component";
+import { setChildren, setStyle } from "./element";
+import { isolatedRoot } from "./isolate";
+import { mountQueue } from "./mounted";
+import { regionView, type Leaf, type Region, type SlotCompute } from "./region";
+import { ensureFontStylesheets, fetchTheme } from "./theme";
+import type { Data } from "./types";
+
+/** The voice native service's three verbs (UNOVERSE_SPEC §2e-1), answered here for every host. */
+export interface VoiceVerbs {
+  startCall(): void;
+  endCall(): void;
+  toggleMute(): void;
+}
+
+export interface AppOptions {
+  client: DefinitionSource;
+  store: ComponentStore;
+  /** e.g. "unoverse://apps/acme/KeyService/definition" */
+  uri: string;
+  onAction?: ActionHandler;
+  theme?: ResolvedTheme;
+  /** Host overrides for the definition's declared props (per-tenant logo, brand name). */
+  props?: Data;
+  /** Draw inside a shadow root (default true). */
+  isolate?: boolean;
+  /** DEV CHROME ON A CONTAINER: drawn above a Container's content (Studio's state tabs). */
+  templateChrome?: (info: { name: string; states: string[]; active?: string; set: (state: string) => void }) => Node | null;
+  /** The voice service, for an app whose buttons start and end a call. */
+  voice?: VoiceVerbs;
+  doc?: Document;
+}
+
+export interface AppMount {
+  readonly nodes: Node[];
+  update(next: Partial<AppOptions>): void;
+  destroy(): void;
+}
+
+/** A held-back change commits anyway after this long without a boundary (§13.5). */
+const GRACE_MS = 4000;
+
+/** 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)];
+}
+
+/** The commit IS the animation (§13.4): with theme motion, the boundary commit runs inside the
+ *  browser's View Transitions API; otherwise, and on failure, it lands at once. */
+function commitArrangement(doc: Document, commit: () => void, motion: boolean): void {
+  const start = (doc as unknown as { startViewTransition?: (cb: () => void) => unknown }).startViewTransition;
+  if (!motion || typeof start !== "function") return commit();
+  queueMicrotask(() => {
+    try {
+      start.call(doc, commit);
+    } catch {
+      commit();
+    }
+  });
+}
+
+export function mountApp(options: AppOptions): AppMount {
+  let o: AppOptions = { ...options };
+  // Isolated unless a host says `false`: a prop left out arrives as `undefined` and keeps the default.
+  const isolated = () => o.isolate !== false;
+  const doc = o.doc ?? document;
+  let def: UnoverseDefinition | null = null;
+  let error: string | null = null;
+  let mounted: Record<string, UnoverseDefinition> = {};
+  let fetched: ResolvedTheme | null = null;
+  let themeName: string | null = null;
+  let alive = true;
+  let version = -1;
+  let loadToken = 0;
+  // THE DOUBLE BUFFER per mounted template place (§13.3): the committed arrangement and the
+  // fail-open grace timer. Render-layer state, deliberately: never in the store.
+  const buffers = new Map<string, { committed: Arrangement | null; grace: ReturnType<typeof setTimeout> | null }>();
+  const fetching = new Set<string>();
+
+  let nodes: Node[] = [];
+  const iso = isolatedRoot(doc);
+  const plain = doc.createElement("div");
+  const keyframes = doc.createElement("style");
+  const onPage = mountQueue(() => (isolated() ? iso.host.isConnected : keyframes.isConnected));
+  const tree = regionView(doc, onPage);
+
+  const show = (next: Node[]) => {
+    const at = nodes[0];
+    const parent = at?.parentNode;
+    if (parent && (next.length !== nodes.length || next.some((n, i) => n !== nodes[i]))) {
+      for (const n of next) parent.insertBefore(n, at);
+      for (const n of nodes) if (!next.includes(n)) n.parentNode?.removeChild(n);
+    }
+    nodes = next;
+  };
+
+  const load = () => {
+    const token = ++loadToken;
+    def = null;
+    error = null;
+    mounted = {};
+    o.client
+      .readDefinition(o.uri)
+      .then((d) => {
+        if (!alive || token !== loadToken) return;
+        def = d;
+        // MOUNTED TEMPLATES: an entry naming a template definition, fetched once per app.
+        for (const entry of Object.values((d as { templates?: Record<string, { template?: string }> }).templates ?? {})) {
+          const use = entry?.template;
+          if (!use) continue;
+          const turi = use.includes("://") ? use : `unoverse://templates/${use}`;
+          // A failed fetch may be a transient (a dev-server restart): retry once, never silently.
+          o.client
+            .readDefinition(turi)
+            .catch(() => new Promise((r) => setTimeout(r, 1500)).then(() => o.client.readDefinition(turi)))
+            .then((t) => {
+              if (!alive || token !== loadToken || !t) return;
+              mounted = { ...mounted, [use]: t };
+              draw();
+            })
+            .catch((e) => console.warn(`[unoverse] mounted template "${use}" failed to load:`, e));
+        }
+        draw();
+      })
+      .catch((e) => {
+        if (!alive || token !== loadToken) return;
+        error = String(e?.message ?? e);
+        draw();
+      });
+  };
+
+  const loadTheme = () => {
+    if (o.theme || !def) return;
+    const name = def.org ? `${def.org}/light` : "light";
+    if (name === themeName) return;
+    themeName = name;
+    fetchTheme(o.client, name)
+      .then((t) => {
+        if (!alive || themeName !== name) return;
+        fetched = t;
+        draw();
+      })
+      .catch(() => {});
+  };
+
+  /** The store work a draw leads to, run after it (as the old renderer's effects were). */
+  const afterDraw = () => {
+    const store = o.store;
+    // A PAGE THAT STREAMED IN: its address names its template; learn what it claims.
+    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] || fetching.has(key)) continue;
+      fetching.add(key);
+      o.client
+        .readDefinition(url)
+        .then((t) => {
+          fetching.delete(key);
+          if (!alive || !t || mounted[key]) return;
+          mounted = { ...mounted, [key]: t };
+          draw();
+        })
+        .catch((e) => {
+          fetching.delete(key);
+          console.warn(`[unoverse] streamed template "${key}" failed to load:`, e);
+        });
+    }
+    if (!def || def.places?.length) return;
+    // ARRIVAL PLACEMENT (STATE_MODEL v2 §5 rule 3): the host places each arrival once, in
+    // its declared initial if this template has it, else the first shared state.
+    const order = def.stateOrder;
+    if (order?.length)
+      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 Data | 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 } });
+        }
+    // RULE 4: a winner a DELIVERY put there clears the states below it.
+    const ladder = resolveActiveView(def, store, surfacedViews());
+    if (ladder.view && !ladder.byGuest) {
+      const claims = orderedClaims(def);
+      store.cancelBelow(ladder.view, claims, mountAliases(def, new Set(claims)));
+    }
+  };
+
+  /** The states this app reacts to (claims), so a claimed instance is kept out of the flow. */
+  const surfacedViews = (): Set<string> => {
+    const views = new Set<string>(orderedClaims(def));
+    const activeRoot = def ? resolveActiveLayout(def, o.store) : undefined;
+    if (activeRoot) collectSurfacedViews(activeRoot, views, def?.defs as Record<string, unknown> | undefined);
+    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.
+      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: the universal fallback face, drawn in the flow.
+    views.delete("inline");
+    return views;
+  };
+
+  // ONE action interpreter for the whole tree; template chrome has no component slice.
+  const dispatch: ActionHandler = (action, data, meta) => {
+    const store = o.store;
+    // VOICE NATIVE-SERVICE actions are answered by the shared service, never forwarded.
+    if (typeof action === "string" && o.voice) {
+      if (action === "startCall") return void o.voice.startCall();
+      if (action === "endCall") return void o.voice.endCall();
+      if (action === "toggleMute") return void o.voice.toggleMute();
+      if (action === "backToChat") o.voice.endCall();
+    }
+    // GUEST CLOSE from TEMPLATE CHROME: a ✕ on the layout itself un-surfaces the current view.
+    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 Data, {
+      store,
+      chatId: "",
+      nodeId: "",
+      sendToServer: o.onAction ? (t, payload) => o.onAction!(t, payload, meta) : undefined,
+    });
+  };
+
+  const draw = () => {
+    if (!alive) return;
+    const store = o.store;
+    version = store.getStructureVersion();
+    loadTheme();
+    const theme = o.theme ?? fetched;
+    ensureFontStylesheets(theme, doc);
+    const say = (text: string) => {
+      tree.destroy();
+      const d = doc.createElement("div");
+      d.textContent = text;
+      show([d]);
+    };
+    if (error) return say(`Unoverse error: ${error}`);
+    if (!def || !theme) return say(`Loading ${o.uri}…`);
+    const app = def;
+    const views = surfacedViews();
+    const surfacedView = resolveActiveView(app, store, views).view;
+    const ctx = { theme, onAction: dispatch, defs: app.defs };
+
+    const leaf = (pointer: string, extraData?: Data, fill?: boolean) => {
+      const { chatId, nodeId } = store.split(pointer);
+      const opts = { client: o.client, store, chatId, nodeId, onAction: dispatch, theme, extraData, fill, doc };
+      // Keyed by the INSTANCE: one re-delivered later keeps its elements (no flicker).
+      return { key: nodeId, make: (): Leaf => mountComponent(opts), refresh: (l: Leaf) => (l as ComponentMount).update(opts) };
+    };
+    // THE STATE THE SCREEN PLACED IT IN: a place draws each interface in that face.
+    const placed = (p: string): Data | undefined => {
+      const state = store.placedState(p);
+      return state ? { state } : undefined;
+    };
+    const fallback = (node: UnoverseNode): Region =>
+      node.fallback ? { kind: "tree", key: "fallback", node: node.fallback, data: {}, ctx } : { kind: "none" };
+
+    // WHAT A SLOT OR A PLACE HOLDS: its fallback when empty; else its frame around the
+    // instances, a single occupant filling the frame; else the instances as a list.
+    const drawPointers = (node: UnoverseNode, pointers: string[], fill: boolean): Region => {
+      if (!pointers.length) return fallback(node);
+      if (node.frame) {
+        // A panel declares its width ONCE (core/apps placeWidthStyle).
+        const placeStyle = placeWidthStyle((node as { appWidth?: string }).appWidth, theme.appSize);
+        const frame = placeStyle ? ({ ...node.frame, style: { ...(node.frame.style ?? {}), ...placeStyle } } as UnoverseNode) : node.frame;
+        const inner: SlotCompute = () =>
+          fill
+            ? { kind: "list", key: "fill", flip: false, items: pointers.map((p) => leaf(p, placed(p), fill)) }
+            : { kind: "list", key: "flip", flip: true, items: pointers.map((p) => leaf(p, placed(p))) };
+        return { kind: "tree", key: "frame", node: frame, data: store.getAppState() as Data, ctx, slot: inner };
+      }
+      return { kind: "list", key: "flip", flip: true, items: pointers.map((p) => leaf(p, placed(p))) };
+    };
+
+    const makeSlot = (scope?: Set<string>): SlotCompute => {
+      const slot: SlotCompute = (node) => {
+        // A PLACE draws what the screen document put in it.
+        if (node.type === "Place") return drawPointers(node, [...store.placeItems(String((node as { name?: string }).name ?? ""))], node.holds === "one");
+        if (node.type === "Template") {
+          const cname = (node as { name?: string }).name ?? "";
+          const spec = (app as { templates?: Record<string, { template?: string; states?: Record<string, { interface?: string; width?: string }>; interface?: string; director?: unknown }> }).templates?.[cname];
+          // THE MOUNT: the place names a template definition, whose own machinery runs here.
+          if (spec?.template) return mountedTemplate(node, cname, spec, mounted[spec.template]);
+          const stateNames = spec?.states ? Object.keys(spec.states) : [];
+          const appState = store.getAppState() as Data;
+          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).
+          const emptyState = Boolean(spec?.states) && !heldInterface;
+          const holder = {
+            ...node,
+            type: "ComponentSlot",
+            select: heldInterface ? { type: heldInterface, limit: 1 } : emptyState ? { limit: 0 } : (node.select ?? {}),
+          } as UnoverseNode;
+          if (o.templateChrome && spec) {
+            const set = (state: string) => store.mergeAppState({ [`template:${cname}`]: state });
+            const declaredW = spec.states?.[active ?? ""]?.width;
+            const stateW = declaredW ? (cssWidth(theme.appSize?.[declaredW] ?? declaredW) ?? declaredW) : undefined;
+            const chrome = o.templateChrome({ name: cname, states: stateNames, active, set });
+            return {
+              kind: "box",
+              key: `chrome:${cname}`,
+              style: { display: "flex", flexDirection: "column", minHeight: 0, height: "100%", ...(stateW ? { width: stateW, flex: "0 0 auto", overflow: "hidden" } : {}) },
+              parts: [
+                chrome ? { kind: "nodes", key: "chrome", nodes: [chrome] } : { kind: "none" },
+                { kind: "box", key: "inner", style: { flex: 1, minHeight: 0, overflow: "auto" }, parts: [slot(holder, {})] },
+              ],
+            };
+          }
+          node = holder;
+        }
+        // DECLARE = REARRANGE, CLAIM = FILL: a claim on a DECLARED reaction state fills only
+        // while that view is the app's active state; an undeclared claim is a container.
+        const claim = node.select?.where;
+        const declared = typeof claim?.eq === "string" && (app.stateOrder ?? []).includes(claim.eq);
+        if (isViewField(claim?.field) && typeof claim?.eq === "string" && declared && claim.eq !== surfacedView) return fallback(node);
+        return drawPointers(node, selectPointers(store, node, scope), node.select?.limit === 1);
+      };
+      return slot;
+    };
+
+    /** A mounted template: its own layouts and slots over the shared store, double-buffered. */
+    const mountedTemplate = (node: UnoverseNode, cname: string, spec: { director?: unknown }, tpl: UnoverseDefinition | undefined): Region => {
+      if (!tpl) return { kind: "none" };
+      // HOLD: LATEST: the current delivery, narrowed by a judged verdict; the guest's open
+      // detail stays in scope through deliveries (the guest's hand outranks the settle).
+      const active = resolveActiveLayout(tpl, store);
+      const delivery = store.currentDeliveryPointers();
+      const dirScope = store.directorScope(delivery);
+      const tplLayouts = (tpl as { layouts?: Record<string, UnoverseNode> }).layouts ?? {};
+      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 Data | undefined);
+          },
+        },
+        layoutNames,
+        baseLayout,
+      );
+      const scope = guestHeld.length ? new Set([...(dirScope ?? delivery), ...guestHeld]) : (dirScope ?? delivery);
+      const next: Arrangement = {
+        layoutName: active ? (Object.entries(tplLayouts).find(([, t]) => t === active)?.[0] ?? null) : null,
+        held: active ? collectSlotPointers(active, store, scope) : [],
+        verdictSig: dirScope ? [...dirScope].sort().join("|") : null,
+      };
+      const directed =
+        Object.values((tpl as { sections?: Record<string, { kind?: string }[]> }).sections ?? {}).flat().some((s) => s?.kind === "director") ||
+        Boolean(spec.director);
+      const motion = ((theme as { motion?: { mount?: string } }).motion?.mount ?? "") === "transition";
+      // THE TRANSITION MODEL (§13): commit the next arrangement only at a boundary.
+      const buf = buffers.get(cname) ?? { committed: null, grace: null };
+      buffers.set(cname, buf);
+      const decision = decideCommit(buf.committed, next, directed);
+      if (decision === "hold") {
+        buf.grace ??= setTimeout(() => {
+          buf.grace = null;
+          buf.committed = next;
+          draw();
+        }, GRACE_MS);
+      } else if (decision !== "none") {
+        if (buf.grace) clearTimeout(buf.grace);
+        buf.grace = null;
+        if (decision === "transition")
+          commitArrangement(doc, () => {
+            buf.committed = next;
+            draw();
+          }, motion);
+        else buf.committed = next;
+      }
+      const arr = buf.committed ?? next;
+      if (!arr.held.length) return { kind: "none" };
+      const arrActive = (arr.layoutName ? tplLayouts[arr.layoutName] : undefined) ?? active;
+      if (!arrActive) return { kind: "none" };
+      const inner: Region = { kind: "tree", key: `tpl:${arr.layoutName}`, node: arrActive, data: store.getAppState() as Data, ctx: { theme, onAction: dispatch, defs: tpl.defs }, slot: makeSlot(new Set(arr.held)) };
+      // A PLACE DECLARES ITS WIDTH ONCE (core/apps placeWidthStyle).
+      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;
+        return { kind: "tree", key: `frame:${cname}`, node: frame, data: store.getAppState() as Data, ctx, slot: () => inner };
+      }
+      return { kind: "box", key: `mount:${cname}`, style: { display: "flex", flexDirection: "column", minHeight: 0, ...((placeStyle ?? {}) as CssStyle) }, parts: [inner] };
+    };
+
+    // Timeline: a GENERIC iterator over the turns, drawing the `user` / `assistant` subtree
+    // per turn. The assistant subtree's slot holds that turn's UNCLAIMED components.
+    const timeline = (node: UnoverseNode): Region => {
+      const inChat = app.places?.length ? new Set(store.placeItems("chat")) : null;
+      const turns: Region[] = store.getTimeline().map((turn) => {
+        const sub = turn.role === "user" ? node.user : node.assistant;
+        if (!sub) return { kind: "none" };
+        // One instance, one placeholder: an instance a surface shows is not drawn here too.
+        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 Data | undefined);
+                return !view || !views.has(view);
+              })
+            : [];
+        const streaming = turn.role === "assistant" && turn.streamingState === "streaming";
+        const turnSlot: SlotCompute = (slotNode) => {
+          let ptrs = [...shown];
+          if (slotNode.select?.limit != null) ptrs = ptrs.slice(0, slotNode.select.limit);
+          if (!ptrs.length) return fallback(slotNode);
+          return { kind: "list", key: "turn", flip: false, items: ptrs.map((p) => leaf(p, { streaming, ...placed(p) })) };
+        };
+        // The turn's scope: the author's static data and NEUTRAL facts, never UX policy.
+        const time = formatRelative(turn.createdAt);
+        const data =
+          turn.role === "user"
+            ? { ...(node.userData ?? {}), text: turn.text, time }
+            : {
+                ...(node.assistantData ?? {}),
+                time,
+                streaming,
+                empty: shown.length === 0,
+                active: turn.streamingState === "streaming" || shown.length > 0,
+              };
+        return { kind: "tree", key: `turn:${turn.id}:${turn.role}`, node: sub, data, ctx, slot: turnSlot };
+      });
+      return { kind: "box", key: "timeline", style: styleToCss(node.style, theme), parts: turns };
+    };
+
+    const appSlot = makeSlot();
+    const resolve: SlotCompute = (node, data) => (node.type === "Timeline" ? timeline(node) : appSlot(node, data));
+
+    // Root scope: declared prop defaults, the host's overrides, the app's own state, and
+    // conversation facts read off the store, never stored.
+    const isEmpty = store.getTimeline().length === 0;
+    const lifecycle = store.getLifecycle();
+    const rootData: Data = {
+      ...propDefaults(app.props),
+      ...((app as { state?: Data }).state ?? {}),
+      ...(o.props ?? {}),
+      ...store.getAppState(),
+      isEmpty,
+      hasMessages: !isEmpty,
+      surfacedView,
+      lifecycle,
+      isThinking: lifecycle === "thinking",
+      isStreaming: lifecycle === "thinking" || lifecycle === "streaming",
+    };
+    const rootNode = (resolveActiveLayout(app, store) ?? app.root) as UnoverseNode;
+    tree.set({ kind: "tree", key: "app", node: rootNode, data: rootData, ctx, slot: resolve });
+    keyframes.textContent = keyframesCss(theme);
+    // A template is a SURFACE: its root fills the box the host gives it.
+    const surfaceRoot = { ...(theme.root as Record<string, string>), height: "100%" };
+    if (isolated()) {
+      setStyle(iso.root, surfaceRoot);
+      setChildren(iso.root, [keyframes, ...tree.nodes]);
+      show([iso.host]);
+    } else {
+      setStyle(plain, { display: "contents", ...surfaceRoot });
+      setChildren(plain, tree.nodes);
+      show([keyframes, plain]);
+    }
+    queueMicrotask(() => alive && afterDraw());
+  };
+
+  const unsubscribe = o.store.subscribe(() => {
+    if (o.store.getStructureVersion() !== version) draw();
+  });
+  load();
+  draw();
+
+  return {
+    get nodes() {
+      return nodes;
+    },
+    update(next) {
+      const reload = next.uri !== undefined && next.uri !== o.uri;
+      o = { ...o, ...next };
+      if (reload) load();
+      draw();
+    },
+    destroy() {
+      alive = false;
+      unsubscribe();
+      for (const b of buffers.values()) if (b.grace) clearTimeout(b.grace);
+      tree.destroy();
+    },
+  };
+}

package/vendor/sdk/lib/dom/chrome.ts

@@ -0,0 +1,125 @@
+/**
+ * The per-element "chrome" shared by the interactive primitives: the base inline style, the
+ * interaction-state rules (hover, active), the container-query rules (hideBelow, hideAbove,
+ * span stacking, a grid's own stackBelow, a columns map) and the data-driven disabled state.
+ * Inline styles cannot express pseudo-classes or container queries, so those become scoped
+ * rules in `<style>` elements. Every value is served; this file authors none.
+ */
+import type { ResolvedTheme, UnoverseNode } from "../core/types";
+import { styleToCss, cssDecls, type CssStyle } from "../style";
+import type { Data } from "./types";
+
+/** Stable class name from a string (identical specs share one rule). */
+export function hashStr(s: string): string {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
+  return (h >>> 0).toString(36);
+}
+
+const INTERACTION_STATES: [string, string][] = [
+  ["hover", ":hover"],
+  ["active", ":active"],
+];
+
+// A state rule is a pure function of (spec, theme), and specs come from cached definitions.
+const stateRuleCache = new WeakMap<ResolvedTheme, WeakMap<object, { cls: string; rule: string }>>();
+function stateRule(theme: ResolvedTheme, spec: Record<string, unknown>, key: string, pseudo: string) {
+  let bySpec = stateRuleCache.get(theme);
+  if (!bySpec) {
+    bySpec = new WeakMap();
+    stateRuleCache.set(theme, bySpec);
+  }
+  let hit = bySpec.get(spec);
+  if (!hit) {
+    // !important: the base style is inline, which beats a class selector otherwise.
+    const decls = cssDecls(styleToCss(spec, theme), true);
+    const cls = `uno-${key}-${hashStr(decls)}`;
+    hit = { cls, rule: `.${cls}${pseudo}{${decls}}` };
+    bySpec.set(spec, hit);
+  }
+  return hit;
+}
+
+export interface Chrome {
+  className: string | undefined;
+  rules: string[];
+  style: CssStyle;
+  disabled: boolean;
+}
+
+export function nodeChrome(node: UnoverseNode, data: Data, theme: ResolvedTheme): Chrome {
+  const base = styleToCss(node.style, theme, data);
+  const disabled = node.disabledWhen ? !!data[node.disabledWhen] : false;
+  const style = disabled && node.style?.disabled ? { ...base, ...styleToCss(node.style.disabled as Record<string, unknown>, theme) } : base;
+  const classes: string[] = [];
+  const rules: string[] = [];
+  const s = node.style as Record<string, unknown> | undefined;
+  for (const [key, pseudo] of INTERACTION_STATES) {
+    const spec = s?.[key];
+    if (!spec) continue;
+    const { cls, rule } = stateRule(theme, spec as Record<string, unknown>, key, pseudo);
+    classes.push(cls);
+    rules.push(rule);
+  }
+  // `hideBelow`: hidden while the nearest container is narrower than a served width.
+  if (s?.hideBelow) {
+    const w = theme.space[s.hideBelow as string] ?? theme.layout?.[s.hideBelow as string] ?? (s.hideBelow as string);
+    const cls = `uno-hidebelow-${hashStr(String(w))}`;
+    classes.push(cls);
+    rules.push(`@container (max-width:${w}){.${cls}{display:none !important}}`);
+  }
+  // `span` stacks: below the served threshold a spanning child takes the whole row of its grid.
+  if (s?.span) {
+    const raw = theme.grid?.stackBelow ?? "";
+    const w = theme.space[raw] ?? theme.layout?.[raw] ?? raw;
+    if (w) {
+      const cls = `uno-stack-${hashStr(String(w))}`;
+      classes.push(cls);
+      rules.push(`@container (max-width:${w}){.${cls}:not(.uno-gridstack > *){grid-column:1 / -1 !important}}`);
+    }
+  }
+  // A grid's own `stackBelow`: below it every child takes the whole row.
+  if (s?.columns && s.stackBelow) {
+    const raw = s.stackBelow as string;
+    const w = theme.space[raw] ?? theme.layout?.[raw] ?? raw;
+    const cls = `uno-gridstack-${hashStr(String(w))}`;
+    classes.push("uno-gridstack", cls);
+    rules.push(`@container (max-width:${w}){.${cls} > *{grid-column:1 / -1 !important}}`);
+  }
+  // `columns` as a breakpoint map: column counts per served band, by container width.
+  if (s?.columns && typeof s.columns === "object") {
+    const map = s.columns as Record<string, unknown>;
+    const first = map.mobile ?? map.tablet ?? map.desktop ?? map.full;
+    if (first != null) {
+      const cls = `uno-cols-${hashStr(JSON.stringify(map))}`;
+      let css = `.${cls}{display:grid;grid-template-columns:repeat(${String(first)},minmax(0,1fr));align-content:start;container-type:inline-size}`;
+      for (const band of ["tablet", "desktop", "full"] as const) {
+        const w = theme.breakpoint?.[band];
+        if (map[band] != null && w) css += `@container (min-width:${w}){.${cls}{grid-template-columns:repeat(${String(map[band])},minmax(0,1fr))}}`;
+      }
+      classes.push(cls);
+      rules.push(css);
+    }
+  }
+  // `hideAbove`: the mirror, hidden while the container is wider than the width.
+  if (s?.hideAbove) {
+    const w = theme.space[s.hideAbove as string] ?? theme.layout?.[s.hideAbove as string] ?? (s.hideAbove as string);
+    const cls = `uno-hideabove-${hashStr(String(w))}`;
+    classes.push(cls);
+    rules.push(`@container (min-width:${w}){.${cls}{display:none !important}}`);
+  }
+  return { className: classes.join(" ") || undefined, rules, style, disabled };
+}
+
+/** The `<style>` elements an element carries for its rules, reused as the rules change. */
+export function styleEls(doc: Document) {
+  const els: HTMLStyleElement[] = [];
+  return (rules: string[]): Node[] => {
+    while (els.length > rules.length) els.pop();
+    rules.forEach((rule, i) => {
+      const el = (els[i] ??= doc.createElement("style"));
+      if (el.textContent !== rule) el.textContent = rule;
+    });
+    return els.slice();
+  };
+}