@unoverse-platform/studio 0.1.81 → 0.1.82

package/vendor/sdk/lib/primitives.tsx

@@ -118,6 +118,29 @@ function nodeChrome(node: UnoverseNode, data: Record<string, unknown>, theme: Re
       styleEls.push(<style key="span-stack">{`@container (max-width:${w}){.${cls}{grid-column:1 / -1 !important}}`}</style>);
     }
   }
+  // `columns` AS A BREAKPOINT MAP — the responsive grid: column counts per named band
+  // ({mobile: "1", tablet: "2", desktop: "3", full: "4"}), applied by CONTAINER width
+  // (the nearest `container` ancestor — a grid in a narrow panel stacks on a wide
+  // screen, which is what SDUI needs). `mobile` is the base band; a band not named
+  // inherits the previous one. Thresholds are SERVED (`theme.breakpoint.*`); the SDK
+  // holds no widths. The rule also marks the grid `container-type: inline-size`, so
+  // its own children (`span`) can query it, same as the inline `columns` form.
+  if (s?.columns && typeof s.columns === "object") {
+    const map = s.columns as Record<string, unknown>;
+    const base = map.mobile ?? map.tablet ?? map.desktop ?? map.full;
+    if (base != null) {
+      const cls = `uno-cols-${hashStr(JSON.stringify(map))}`;
+      let rules = `.${cls}{display:grid;grid-template-columns:repeat(${String(base)},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) {
+          rules += `@container (min-width:${w}){.${cls}{grid-template-columns:repeat(${String(map[band])},minmax(0,1fr))}}`;
+        }
+      }
+      classes.push(cls);
+      styleEls.push(<style key="columns">{rules}</style>);
+    }
+  }
   // `hideAbove` — the mirror: hide when the container is WIDER than the width. Together
   // these are the whole layout-switch mechanism for space-responsive components: the
   // compact layout carries hideAbove, the full layout hideBelow, and the container's

package/vendor/sdk/lib/render.tsx

@@ -129,7 +129,10 @@ export function renderNode(
   // nothing elastic remains for a resize to land on. Slot panels are injected at their
   // frame (template.tsx); a layout root never carries appWidth (guard-enforced).
   const panelW = (node as { appWidth?: string }).appWidth;
-  if (panelW && node.type !== "ComponentSlot") {
+  // ComponentSlot AND Template keep their appWidth: both are slot-dispatched places
+  // whose width applies to their FRAME (app.tsx), not to a box of their own —
+  // consuming it here left the mount frame width-less (measured live 2026-08-28).
+  if (panelW && node.type !== "ComponentSlot" && node.type !== "Template") {
     const w = cssWidth(theme.appSize?.[panelW] ?? panelW);
     if (w) node = { ...node, appWidth: undefined, style: { ...(node.style ?? {}), width: w, flex: "0 0 auto" } } as UnoverseNode;
   }
@@ -146,7 +149,7 @@ export function renderNode(
   if (node.type === "Orb") return <OrbView key={key} node={node} data={data} 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" || node.type === "Container") return slot ? slot(node, key) : null;
+  if (node.type === "ComponentSlot" || node.type === "Timeline" || node.type === "Template") return slot ? slot(node, key) : null;
 
   // `Ref` — REFERENCE, NOT COPY. The design system's shared pieces travel once and are
   // cached; a definition names one and specialises it here (core/refs.ts: `props` remap,

package/vendor/sdk/lib/style.ts

@@ -121,7 +121,10 @@ function computeCss(s: Record<string, unknown>, theme: ResolvedTheme, data?: Rec
   // correct for SDUI: the component reacts to its slot, not the page viewport). Value served.
   if (s.container) (css as Record<string, unknown>).containerType = s.container;
   // `columns` → an equal-width CSS grid (generic layout; the welcome card grid uses it).
-  if (s.columns) {
+  // A MAP value ({mobile, tablet, ...}) is the RESPONSIVE form — handled in
+  // primitives.tsx as an injected rule, since inline styles cannot express the
+  // container queries it needs.
+  if (s.columns && typeof s.columns !== "object") {
     css.display = "grid";
     css.gridTemplateColumns = `repeat(${s.columns}, minmax(0, 1fr))`;
     // THE GRID IS ITS OWN CONTAINER, so a child's `span` can collapse against the grid's

package/vendor/sdk/main.tsx

@@ -7,6 +7,7 @@
 import { createRoot, type Root } from "react-dom/client";
 import { AppEngine, type AppConfig } from "./appEngine";
 import { connectMcpAppHost } from "./mcpAppBridge";
+import { ResponseView } from "./responseView";
 
 type HostConfig = Omit<AppConfig, "getAccessToken"> & { token?: string };
 
@@ -82,13 +83,35 @@ connectMcpAppHost((r) => {
   // hardcode/guess it — a baked URL ties the bundle to one environment and hides a
   // missing config. If it's absent, fail loudly and don't mount.
   const serverUrl = (meta["unoverse/serverUrl"] as string) || (out.serverUrl as string);
-  const appId = (out.app as string) || (meta["unoverse/app"] as string);
   const conversationId = (out.conversationId as string) || (meta["unoverse/conversationId"] as string);
   const token = (meta["unoverse/token"] as string) || undefined;
   const userId = (meta["unoverse/userId"] as string) || undefined;
+
+  // THE NAMING RULE (UNOVERSE_MCP_APP_PROTOCOL § THE NAMING RULE): the RESULT names
+  // its interface. `interface.kind === "components"` → render exactly those (the
+  // response view — no app mount, no session, no home). `interface.kind === "app"`
+  // or a legacy `app`/`unoverse/app` boot fact (the app tools' results, internal
+  // hosts) → the named app mounts. Nothing mounts by default: a result naming
+  // nothing renders nothing, loudly.
+  const iface = out.interface as { kind?: string; components?: Record<string, unknown>[]; app?: string } | undefined;
+  if (iface?.kind === "components" && Array.isArray(iface.components)) {
+    if (!serverUrl) {
+      // eslint-disable-next-line no-console
+      console.warn("[unoverse:boot] response result carried no serverUrl — cannot resolve definitions");
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log("[unoverse:boot] rendering RESPONSE from MCP host", { serverUrl, components: iface.components.length });
+    const el = document.getElementById("root")!;
+    if (!root) root = createRoot(el);
+    root.render(<ResponseView serverUrl={serverUrl} events={iface.components} />);
+    return;
+  }
+
+  const appId = (iface?.kind === "app" ? iface.app : undefined) || (out.app as string) || (meta["unoverse/app"] as string);
   if (!appId || !serverUrl) {
     // eslint-disable-next-line no-console
-    console.warn("[unoverse:boot] cannot mount — tool result carried no serverUrl/app", {
+    console.warn("[unoverse:boot] cannot mount — result named no interface (no components, no app)", {
       serverUrl,
       appId,
       structuredContent: out,
@@ -97,6 +120,6 @@ connectMcpAppHost((r) => {
     return;
   }
   // eslint-disable-next-line no-console
-  console.log("[unoverse:boot] mounting from MCP host", { serverUrl, appId, conversationId, userId, hasToken: Boolean(token) });
+  console.log("[unoverse:boot] mounting NAMED app from MCP host", { serverUrl, appId, conversationId, userId, hasToken: Boolean(token) });
   apply({ serverUrl, appId, conversationId, userId, token });
 });

package/vendor/sdk/responseView.tsx

@@ -0,0 +1,82 @@
+/**
+ * THE RESPONSE VIEW — what an UNNAMED result renders (THE NAMING RULE,
+ * docs/mcp/UNOVERSE_MCP_APP_PROTOCOL § THE NAMING RULE).
+ *
+ * An MCP Action's result carries `interface: { kind: "components", components }` —
+ * the component events the run produced. This view renders EXACTLY those: seed a
+ * fresh store with the events, resolve the theme, paint each instance with the
+ * standard renderer. No app mount, no session registration, no home state, no
+ * auto-trigger — an app mounts only when something NAMES it (a channel, a row, or
+ * a result declaring `kind: "app"`).
+ *
+ * Definitions and theme still resolve over the result's serverUrl (`/mcp` reads) —
+ * the response is data; the rendering vocabulary lives on the universe.
+ */
+import { useMemo } from "react";
+import {
+  UnoverseClient,
+  ComponentStore,
+  StreamedUnoverseComponent,
+  useUnoverseTheme,
+  applyServerMessage,
+} from "./lib";
+
+export interface ResponseViewProps {
+  serverUrl: string;
+  /** The run's component events (COMPONENT_INIT / COMPONENT_DATA), as collected
+   *  server-side and carried in the result's `interface.components`. */
+  events: Record<string, unknown>[];
+}
+
+export function ResponseView({ serverUrl, events }: ResponseViewProps) {
+  const client = useMemo(() => new UnoverseClient(`${serverUrl}/mcp`, {}), [serverUrl]);
+
+  // Seed once per result: the same pure mapper the live stream uses, so a seeded
+  // component is indistinguishable from a streamed one (merge-not-replace and all).
+  const store = useMemo(() => {
+    const s = new ComponentStore();
+    const seen = new Set<string>();
+    for (const e of events) {
+      try {
+        applyServerMessage(s, e as never, seen);
+      } catch {
+        /* one malformed event must not blank the whole response */
+      }
+    }
+    return s;
+  }, [events]);
+
+  const theme = useUnoverseTheme(client);
+
+  // One card per INSTANCE, in arrival order (the events carry chatId+nodeId — the
+  // store's own keying — so no pointer parsing).
+  const instances = useMemo(() => {
+    const out: { chatId: string; nodeId: string }[] = [];
+    const seen = new Set<string>();
+    for (const e of events) {
+      const ev = e as { type?: string; chatId?: string; nodeId?: string };
+      if (ev.type !== "COMPONENT_INIT" || !ev.chatId || !ev.nodeId) continue;
+      const key = `${ev.chatId}:${ev.nodeId}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push({ chatId: ev.chatId, nodeId: ev.nodeId });
+    }
+    return out;
+  }, [events]);
+
+  if (!instances.length) return null;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 12 }}>
+      {instances.map((i) => (
+        <StreamedUnoverseComponent
+          key={`${i.chatId}:${i.nodeId}`}
+          client={client}
+          store={store}
+          chatId={i.chatId}
+          nodeId={i.nodeId}
+          theme={theme ?? undefined}
+        />
+      ))}
+    </div>
+  );
+}