@unoverse-platform/studio 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Unoverse Studio: the local authoring app. Reads your own rx/ folder, no backend.",
   "scripts": {
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.0",
-    "@unoverse-platform/base": "^0.2.0",
+    "@unoverse-platform/base": "^0.3.0",
     "@unoverse-platform/marketplace": "*",
     "@vitejs/plugin-react": "^4.3.4",
     "oidc-client-ts": "^3.4.1",

package/screens/NativeAppHost.tsx

@@ -32,6 +32,21 @@ export function NativeAppHost({
   const [html, setHtml] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const frame = useRef<HTMLIFrameElement>(null);
+  // STATE-OWNED APP WIDTH (docs/design/05): the app computes its width off the active
+  // layout and posts it up as `unoverse:size` (appEngine.tsx) — the HOST owns the resize.
+  // Without this listener the frame never widens and a panel surface renders clipped.
+  const [appWidth, setAppWidth] = useState<string | null>(null);
+  useEffect(() => {
+    const onSize = (e: MessageEvent) => {
+      if (e.source === frame.current?.contentWindow && e.data?.type === "unoverse:size" && e.data.width) {
+        setAppWidth(String(e.data.width));
+      }
+    };
+    window.addEventListener("message", onSize);
+    return () => window.removeEventListener("message", onSize);
+  }, []);
+  // A different app starts back at the host default until it reports.
+  useEffect(() => setAppWidth(null), [templateId]);
 
   // Pull the app shell from the universe — one resources/read, then the client closes.
   useEffect(() => {
@@ -94,13 +109,24 @@ export function NativeAppHost({
   if (!html)
     return <div className="flex h-full items-center justify-center text-sm opacity-60">Loading the app from the universe…</div>;
   return (
-    <iframe
-      ref={frame}
-      srcDoc={html}
-      onLoad={postConfig}
-      title="unoverse app"
-      style={{ width: "100%", height: "100%", border: 0, display: "block" }}
-      allow="microphone; autoplay"
-    />
+    <div style={{ width: "100%", height: "100%", display: "flex", justifyContent: "center" }}>
+      <iframe
+        ref={frame}
+        srcDoc={html}
+        onLoad={postConfig}
+        title="unoverse app"
+        // The app's reported width wins (panel surfaces widen it); capped at the pane.
+        // The host animates the resize (appEngine contract).
+        style={{
+          width: appWidth ?? "100%",
+          maxWidth: "100%",
+          height: "100%",
+          border: 0,
+          display: "block",
+          transition: "width 300ms ease",
+        }}
+        allow="microphone; autoplay"
+      />
+    </div>
   );
 }

package/screens/TemplatesView.tsx

@@ -285,6 +285,19 @@ export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: {
   // because Mock rendering shares this machinery (store, states, width).
   const liveIsNative = live && Boolean(binding?.workflow) && (!hasAuth || Boolean(auth?.isAuthenticated));
   const canConnect = false;
+  // NATIVE width authority: the app computes its width off ITS live store and posts
+  // `unoverse:size` up (appEngine contract). The in-page store below is DEAD by design
+  // (canConnect=false), so computeAppWidth against it pins the wrapper at the base
+  // layout's width forever — the wrapper must follow the app's reported width instead.
+  const [nativeWidth, setNativeWidth] = useState<string | null>(null);
+  useEffect(() => {
+    const onSize = (e: MessageEvent) => {
+      if (e.data?.type === "unoverse:size" && e.data.width) setNativeWidth(String(e.data.width));
+    };
+    window.addEventListener("message", onSize);
+    return () => window.removeEventListener("message", onSize);
+  }, []);
+  useEffect(() => setNativeWidth(null), [selected, live]);
   const rawConn = useUnoverseConnection(config, session, store, { enabled: canConnect });
   // HARD INVARIANT (workbench doc Mode A — "Mock does not connect with server"): a Mock
   // session must NEVER reach the backend. The SDK only gates the inbound SSE stream on
@@ -871,7 +884,11 @@ export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: {
                   // TRUE width, never clamped: a panel is its declared width always, so
                   // an app wider than the device box CLIPS at the edge (like a real
                   // too-small screen) — it must never squeeze into garbage.
-                  width: computeAppWidth(resolveActiveLayout(selectedDef as never, store), store, theme?.appSize) ?? "100%",
+                  // NATIVE mode: the app's own reported width wins (unoverse:size) — the
+                  // in-page store is dead there and computeAppWidth against it lies.
+                  width: liveIsNative
+                    ? (nativeWidth ?? "100%")
+                    : (computeAppWidth(resolveActiveLayout(selectedDef as never, store), store, theme?.appSize) ?? "100%"),
                   margin: "0 auto",
                   transition: "width 200ms",
                   ...((selectedDef?.fluidHeight ?? true) ? { height: "100%" } : {}),

package/vendor/sdk/lib/connection.tsx

@@ -154,6 +154,9 @@ export function useUnoverseConnection(
         };
       });
     });
+    // The SDK fire-and-forgets the standalone GET SSE open on `initialized`; a failure
+    // lands ONLY here. Unset, a dead inbound stream is invisible — no events, no error.
+    client.onerror = (e) => console.error("[unoverse] client error:", e);
     clientRef.current = client;
 
     // The server pushes the live stream as `notifications/unoverse/event` over the

package/vendor/sdk/lib/template.tsx

@@ -129,7 +129,12 @@ export function computeAppWidth(root: unknown, store: ComponentStore, appSize?:
     if (n !== r) {
       if (n.type === "ComponentSlot") {
         const claim = n.select?.where;
-        if (claim?.field === "defaultState" && typeof claim.eq === "string") surfaces.set(claim.eq, rw(n.appWidth));
+        // `appWidth: flex` — the surface takes the REMAINING host space. DATA WINS: an
+        // org may define `flex` as a real appSize token (bpp: calc(100% − chat)) and
+        // that resolves like any name; the marker below is the theme-free fallback,
+        // resolved as "fill the host" when the view is active.
+        if (claim?.field === "defaultState" && typeof claim.eq === "string")
+          surfaces.set(claim.eq, rw(n.appWidth) ?? (n.appWidth === "flex" ? "flex" : undefined));
       } else if (n.appWidth !== undefined) {
         const w = rw(n.appWidth);
         if (w) widths.push(w); // a plain panel (the core column) is ALWAYS open
@@ -153,6 +158,9 @@ export function computeAppWidth(root: unknown, store: ComponentStore, appSize?:
       }
     }
   const activePanel = active ? surfaces.get(active) : undefined;
+  // An ACTIVE flex surface fills the host viewport (the host caps at its pane); the
+  // surface flexes into whatever the fixed panels leave.
+  if (activePanel === "flex") return "100%";
   if (activePanel) widths.push(activePanel);
   if (!widths.length) return undefined;
   return widths.length === 1 ? widths[0] : `calc(${widths.join(" + ")})`;

package/vite.config.ts

@@ -44,8 +44,11 @@ export default defineConfig({
       // path resolves to nothing). The old order preferred vendor — so the moment a
       // publish ran vendor-sdk.mjs, the monorepo's own Studio silently switched onto a
       // FROZEN SDK copy and live SDK edits stopped appearing (2026-07-28).
-      "@unoverse/sdk": existsSync(resolve(__dirname, "../unoverse/web/sdk/src/lib/index.ts"))
-        ? resolve(__dirname, "../unoverse/web/sdk/src/lib/index.ts")
+      // apps/, not packages/. This said "../unoverse/..." (packages/unoverse, which does
+      // not exist), so existsSync was always false and the monorepo's own Studio silently
+      // ran on the STALE vendored copy — the exact failure the comment above warns about.
+      "@unoverse/sdk": existsSync(resolve(__dirname, "../../apps/unoverse/web/sdk/src/lib/index.ts"))
+        ? resolve(__dirname, "../../apps/unoverse/web/sdk/src/lib/index.ts")
         : resolve(__dirname, "vendor/sdk/lib/index.ts"),
     },
   },