@unoverse-platform/studio 0.1.116 → 0.1.117

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

@@ -29,7 +29,7 @@ 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 { printWhenStill, setChildren, setStyle } from "./element";
 import { isolatedRoot } from "./isolate";
 import { mountQueue } from "./mounted";
 import { regionView, type Leaf, type Region, type SlotCompute } from "./region";
@@ -273,6 +273,7 @@ export function mountApp(options: AppOptions): AppMount {
       chatId: "",
       nodeId: "",
       sendToServer: o.onAction ? (t, payload) => o.onAction!(t, payload, meta) : undefined,
+      print: printWhenStill,
     });
   };
 
@@ -298,7 +299,7 @@ export function mountApp(options: AppOptions): AppMount {
 
     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 };
+      const opts = { client: o.client, store, chatId, nodeId, onAction: dispatch, theme, extraData, fill, doc, appStore: store };
       // 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) };
     };

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

@@ -16,7 +16,7 @@ import { matches } from "../core/conditions";
 import { heldPointer, stateOfUri } from "../core/apps";
 import { keyframesCss } from "../style";
 import type { ActionHandler } from "../actions";
-import { setChildren, setStyle } from "./element";
+import { printWhenStill, setChildren, setStyle } from "./element";
 import { isolatedRoot } from "./isolate";
 import { mountQueue } from "./mounted";
 import { regionView, type Leaf, type Region } from "./region";
@@ -26,6 +26,8 @@ import type { Data } from "./types";
 /** What reads definitions and themes: the MCP client, or anything answering the same calls. */
 export interface DefinitionSource extends ThemeSource {
   readDefinition(address: string): Promise<UnoverseDefinition>;
+  /** Runs the task a component carries (its lifecycle hook) as the viewer; absent, no hook runs here. */
+  runTask?(uri: string, phase: "onStart" | "onEnterView", props?: Record<string, unknown>, state?: string): Promise<Record<string, unknown>>;
 }
 
 export interface ComponentOptions {
@@ -129,6 +131,7 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
         appStore,
         // Server actions carry the INSTANCE context (which component, its current slice).
         sendToServer: onAction ? (t, payload) => onAction(t, payload, { chatId, nodeId, type: store.getType(chatId, nodeId), state: store.get(chatId, nodeId) }) : undefined,
+        print: printWhenStill,
       });
       return;
     }
@@ -138,6 +141,10 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
       if (values.length) {
         localSlice = { ...localSlice, ...Object.fromEntries(values.map((v) => [v.key, v.value])) };
         draw();
+        // A CHANGED VIEW IS NEWS here too: a live card's stream reports it and the server runs
+        // the `onEnterView` hook; a card drawn from a record asks for the same hook itself.
+        const face = values.find((v) => v.key === "state" || v.key === "view" || v.key === "defaultState");
+        if (face && typeof face.value === "string" && face.value) enterView(face.value);
       }
     }
     o.onAction?.(action, scope, meta);
@@ -190,6 +197,7 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
         def = d;
         defaults = Object.fromEntries(Object.entries((d.props ?? {}) as Record<string, { default?: unknown }>).map(([k, v]) => [k, v?.default]));
         draw();
+        runHooks(asked);
       })
       .catch((e) => {
         if (!alive || defUri !== asked) return;
@@ -198,6 +206,35 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
       });
   };
 
+  /**
+   * A COMPONENT FETCHES ITS OWN DATA WHEREVER IT IS DRAWN (docs/design/lifecycle-hooks.md). A live
+   * card's hooks run on the app's stream: `onStart` when the server renders it, `onEnterView` when
+   * its state changes. A card drawn from a record has no stream, so it asks the server to run the
+   * same hooks here, with the record's fields as `props`: `onStart`, then `onEnterView` for the
+   * state it opens in. What comes back merges into the drawing as it arrives, as on the stream.
+   * Fire-and-forget: the drawing never waits, and a failed hook leaves the card as it was.
+   */
+  const mergeTask = (uri: string) => (fields: Record<string, unknown>) => {
+    if (!alive || defUri !== uri || !fields || !Object.keys(fields).length) return;
+    localSlice = { ...localSlice, ...fields };
+    draw();
+  };
+  const quietTask = (uri: string) => (e: unknown) => console.warn(`[unoverse] "${uri}" task failed:`, e);
+  /** The `onEnterView` hook for a state this record-drawn card just entered, with its fields so far. */
+  const enterView = (state: string) => {
+    const uri = defUri;
+    if (o.store || !o.client.runTask || !uri) return;
+    const data = { ...defaults, ...(def?.state ?? {}), ...(sourceData() ?? {}), ...localSlice } as Data;
+    o.client.runTask(uri, "onEnterView", data, state).then(mergeTask(uri)).catch(quietTask(uri));
+  };
+  const runHooks = (uri: string) => {
+    if (o.store || !o.client.runTask) return;
+    const data = (sourceData() ?? {}) as Data;
+    const opening = String(data.state ?? (def?.state as Data | undefined)?.state ?? "");
+    o.client.runTask(uri, "onStart", data).then(mergeTask(uri)).catch(quietTask(uri));
+    if (opening) enterView(opening);
+  };
+
   const loadTheme = () => {
     if (o.theme || !def) return;
     const name = def.org ? `${def.org}/light` : "light";

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

@@ -63,6 +63,29 @@ export function setChildren(parent: Node, nodes: Node[]): void {
   while (parent.childNodes.length > i) parent.removeChild(parent.lastChild!);
 }
 
+/**
+ * The web host's `print` action: print once the screen is still (fullscreen ended, no animation
+ * running, a view transition included, and the document unchanged for 300ms), so the preview never
+ * captures a page mid-change. Resolves when the dialog closes. Capped at five seconds.
+ */
+export function printWhenStill(): Promise<void> {
+  return new Promise((done) => {
+    let quietSince = performance.now();
+    const mo = new MutationObserver(() => (quietSince = performance.now()));
+    mo.observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
+    const started = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const animating = (document.getAnimations?.() ?? []).some((a) => a.playState === "running");
+      const busy = document.fullscreenElement || animating || now - quietSince < 300;
+      if (busy && now - started < 5000) return void requestAnimationFrame(tick);
+      mo.disconnect();
+      requestAnimationFrame(() => { window.print(); done(); });
+    };
+    requestAnimationFrame(tick);
+  });
+}
+
 /** A text node whose content follows the value (strings and numbers; anything else is empty). */
 export function textOf(v: unknown): string {
   return typeof v === "string" ? v : typeof v === "number" || typeof v === "bigint" ? String(v) : "";

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

@@ -116,9 +116,13 @@ export function boxView(ctx: RenderCtx): Prim {
     setChildren(host, [...styles(rules), ...kids, ...(!stageSize && sel && pick && chip ? [chip] : [])]);
   };
 
+  // The stage scales to its frame in CSS where the browser can (container units), so a layout
+  // the observer never sees, print above all, still scales right; the measured scale is the fallback.
+  const cssScale = typeof CSS !== "undefined" && CSS.supports?.("transform", "scale(calc(100cqw / 1px))");
   const applyStage = () => {
     if (!host || !stageSize) return;
-    setStyle(host, { ...hostStyle, position: "absolute", top: 0, left: 0, width: stageSize[0], height: stageSize[1], transform: `scale(${scale})`, transformOrigin: "0 0" });
+    const transform = cssScale ? `scale(calc(100cqw / ${stageSize[0]}px))` : `scale(${scale})`;
+    setStyle(host, { ...hostStyle, position: "absolute", top: 0, left: 0, width: stageSize[0], height: stageSize[1], transform, transformOrigin: "0 0" });
   };
 
   const selection: Behaviour = (el) => {
@@ -149,6 +153,91 @@ export function boxView(ctx: RenderCtx): Prim {
     return () => d.removeEventListener("mouseup", up);
   };
 
+  // `pan`: DRAG TO MOVE AROUND a box whose content is larger than it (a zoomed map, a wide table).
+  // Press and drag scrolls the box's own overflow, the way a map pans; the wheel, a trackpad and a
+  // touch drag already do. When the content grows or shrinks (zoomed in or out), the view keeps the
+  // same point in its centre. Opt-in per box (`pan: true`); generic, it knows no content.
+  const pan: Behaviour = (el) => {
+    let drag: { x: number; y: number; left: number; top: number; id: number } | null = null;
+    let moved = false;
+    const down = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      drag = { x: e.clientX, y: e.clientY, left: el.scrollLeft, top: el.scrollTop, id: e.pointerId };
+      moved = false;
+    };
+    // A DRAG SELECTS NOTHING: no text highlight and no picture picked up and dragged off, which the
+    // browser otherwise does to whatever the pointer passes over.
+    const noDrag = (e: Event) => e.preventDefault();
+    const move = (e: PointerEvent) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      const dx = e.clientX - drag.x;
+      const dy = e.clientY - drag.y;
+      if (!moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+      if (!moved) {
+        moved = true;
+        el.setPointerCapture?.(drag.id);
+        el.style.cursor = "grabbing";
+        el.ownerDocument.getSelection?.()?.removeAllRanges();
+      }
+      el.scrollLeft = drag.left - dx;
+      el.scrollTop = drag.top - dy;
+    };
+    const up = (e: PointerEvent) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      if (moved) el.releasePointerCapture?.(drag.id);
+      drag = null;
+      el.style.cursor = "grab";
+    };
+    // A drag is not a tap: the click that ends a drag never reaches what was under the pointer.
+    const swallow = (e: MouseEvent) => {
+      if (!moved) return;
+      e.stopPropagation();
+      e.preventDefault();
+      moved = false;
+    };
+    // KEEP THE CENTRE through a change of content size.
+    let w = el.scrollWidth;
+    let h = el.scrollHeight;
+    const ro = new ResizeObserver(() => {
+      const nw = el.scrollWidth;
+      const nh = el.scrollHeight;
+      if (nw === w && nh === h) return;
+      const cx = (el.scrollLeft + el.clientWidth / 2) / (w || 1);
+      const cy = (el.scrollTop + el.clientHeight / 2) / (h || 1);
+      el.scrollLeft = cx * nw - el.clientWidth / 2;
+      el.scrollTop = cy * nh - el.clientHeight / 2;
+      w = nw;
+      h = nh;
+    });
+    for (const kid of Array.from(el.children)) ro.observe(kid);
+    // IT OPENS ON THE MIDDLE of its content, not the top-left corner.
+    el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+    el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+    el.style.cursor = "grab";
+    el.style.userSelect = "none";
+    el.style.setProperty("-webkit-user-select", "none");
+    el.addEventListener("dragstart", noDrag);
+    el.addEventListener("selectstart", noDrag);
+    el.addEventListener("pointerdown", down);
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+    el.addEventListener("click", swallow, true);
+    return () => {
+      ro.disconnect();
+      el.style.cursor = "";
+      el.style.userSelect = "";
+      el.style.removeProperty("-webkit-user-select");
+      el.removeEventListener("dragstart", noDrag);
+      el.removeEventListener("selectstart", noDrag);
+      el.removeEventListener("pointerdown", down);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+      el.removeEventListener("click", swallow, true);
+    };
+  };
+
   const autoScroll: Behaviour = (el) => {
     const nearBottom = () => el.scrollHeight - el.scrollTop - el.clientHeight < 140;
     const stick = () => {
@@ -222,22 +311,24 @@ export function boxView(ctx: RenderCtx): Prim {
       setAttr(host, "class", chrome.className);
       setAttr(host, "data-unoverse-id", inspectId(n));
       if (stageEl && size) {
-        setStyle(stageEl, { position: "relative", width: "100%", aspectRatio: `${size[0]} / ${size[1]}` });
+        setStyle(stageEl, { position: "relative", width: "100%", aspectRatio: `${size[0]} / ${size[1]}`, containerType: "inline-size" });
         applyStage();
         const outer = stageEl;
         stageWatch.set(`stage:${size[0]}`, outer, (el) => {
-          const ro = new ResizeObserver(() => {
+          const measure = () => {
             scale = el.clientWidth / (stageSize?.[0] ?? 1);
             applyStage();
-          });
+          };
+          const ro = new ResizeObserver(measure);
           ro.observe(el);
           return () => ro.disconnect();
         });
       } else {
         setStyle(host, hostStyle);
         // One behaviour per element, in this order (the element can carry only one).
-        const which = n.autoScroll === true ? "autoScroll" : n.revealOnStick === true ? "revealOnStick" : sel ? "selection" : null;
-        behaviour.set(which, host, which === "autoScroll" ? autoScroll : which === "revealOnStick" ? revealOnStick : selection);
+        const which =
+          n.autoScroll === true ? "autoScroll" : n.revealOnStick === true ? "revealOnStick" : n.pan === true ? "pan" : sel ? "selection" : null;
+        behaviour.set(which, host, which === "autoScroll" ? autoScroll : which === "revealOnStick" ? revealOnStick : which === "pan" ? pan : selection);
         if (!sel) pick = null;
       }
       fill();

package/vendor/sdk/lib/voiceService.ts

@@ -25,6 +25,8 @@ export interface VoiceSession {
   chatId?: string;
   workflowId: string;
   targetTriggerNode: string;
+  /** The task the page's address names (docs/mcp/MCP_TASKS.md § 5c): carried with the call. */
+  task?: string;
 }
 
 export interface VoiceServiceConfig {
@@ -273,7 +275,7 @@ export function createVoiceService(config: VoiceServiceConfig): VoiceService {
               userId: session.userId,
               providerId: "gravity-voice",
               isAudio: true,
-              metadata: { ...(start?.metadata ?? {}), targetTriggerNode, action: "START_CALL", isAction: true, workflowId, continuousStream: true },
+              metadata: { ...(session.task ? { task: session.task } : {}), ...(start?.metadata ?? {}), targetTriggerNode, action: "START_CALL", isAction: true, workflowId, continuousStream: true },
             },
             conversationId: session.conversationId,
           }),

package/vendor/sdk/main.ts

@@ -1,7 +1,7 @@
 /**
  * ⛔ NO REACT ANYWHERE IN THIS SDK (owner, 2026-10-01; web/sdk/CLAUDE.md).
  *
- * The `ui://` app entry (§6d): what a HOST loads (the unoverse server's SAB host in an iframe,
+ * The `ui://` app entry (§6d): what a HOST loads (the unoverse server's a host in an iframe,
  * or Claude/ChatGPT). Boots the app engine on the LOCAL vendored SDK. The host provides config
  * (server, bearer, session facts) via `window.__UNOVERSE_APP_CONFIG` or a postMessage
  * `{ type: "unoverse:config", config }` (also the token-refresh channel).