@jxsuite/studio 0.33.0 → 0.34.0

package/src/panels/tab-bar.ts

@@ -1,20 +1,23 @@
 /// <reference lib="dom" />
 /**
- * Tab bar — a per-tab contextual action bar rendered between the tab strip and the edit content.
- * Standardizes Back/breadcrumb navigation, media feature toggles, and mode actions (Code-mode
- * Export) into a single bar shared identically by every edit mode.
+ * Tab bar — a persistent per-tab settings bar rendered between the tab strip and the edit content.
+ * Standardizes Back/breadcrumb navigation, the view settings cluster (preview toggle, layout
+ * visibility, dynamic route-param pickers — shown in the edit/design base modes), media feature
+ * toggles, and mode actions (Code-mode Export) into a single bar shared by every edit mode.
  *
  * Follows the same module shape as tab-strip.ts: mount(host, ctx) → effectScope/effect → render().
- * The bar collapses (renders `nothing`, so `#tab-bar:empty` hides the row) when there is nothing
- * contextual to show.
+ * The bar renders `nothing` (so `#tab-bar:empty` hides the row) only when no tab is active.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateUi } from "../store";
+import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import { getEffectiveMedia } from "../site-context";
+import { getEffectiveLayoutPath, getEffectiveMedia } from "../site-context";
+import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
 import { mediaDisplayName } from "./shared";
+import type { ParamValues } from "../page-params";
+import type { Tab } from "../tabs/tab";
 import type { DocumentStackEntry, FunctionEditDef } from "../types";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -59,12 +62,16 @@ export function mount(host: HTMLElement, ctx: TabBarCtx) {
       if (tab) {
         // Read reactive properties to establish tracking — mirrors the toolbar's subset
         void tab.doc.document;
+        void tab.doc.document?.$layout;
         void tab.doc.mode;
         void tab.documentPath;
         void tab.session.documentStack.length;
         void tab.session.ui.canvasMode;
         void tab.session.ui.editingFunction;
         void tab.session.ui.featureToggles;
+        void tab.session.ui.preview;
+        void tab.session.ui.previewParams;
+        void tab.session.ui.showLayout;
       }
       render();
     });
@@ -143,6 +150,55 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     `;
   }
 
+  // ── Right region: view settings cluster (edit/design base modes only) ──
+  // Gates on the BASE mode (not the effective mode): the cluster stays visible while the preview
+  // Toggle is on so it can be toggled back off.
+  const baseMode = S.ui.canvasMode;
+  const isPage = Boolean(
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/")),
+  );
+  let settingsTpl: TemplateResult | typeof nothing = nothing;
+  if (!editing && (baseMode === "edit" || baseMode === "design")) {
+    const canPreview = tab.capabilities.modes.includes("preview");
+    const hasLayout = isPage && Boolean(getEffectiveLayoutPath(S.document?.$layout));
+    const pickersTpl = isPage ? paramPickersTpl(tab) : nothing;
+    const previewTpl = canPreview
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Preview resolved values"
+            ?selected=${Boolean(S.ui.preview)}
+            @click=${() => updateUi("preview", !S.ui.preview)}
+          >
+            <sp-icon-preview slot="icon"></sp-icon-preview>
+            Preview
+          </sp-action-button>
+        `
+      : nothing;
+    const layoutTpl = hasLayout
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Show layout elements"
+            ?selected=${S.ui.showLayout !== false}
+            @click=${() => updateUi("showLayout", S.ui.showLayout === false)}
+          >
+            Layout
+          </sp-action-button>
+        `
+      : nothing;
+    if (pickersTpl !== nothing || previewTpl !== nothing || layoutTpl !== nothing) {
+      settingsTpl = html`
+        ${pickersTpl}
+        <sp-action-group compact size="s">${layoutTpl} ${previewTpl}</sp-action-group>
+      `;
+    }
+  }
+
   // ── Right region: media feature toggles ──
   const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document?.$media));
   const togglesTpl =
@@ -183,16 +239,106 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
         `
       : nothing;
 
-  // Collapse the bar entirely when there is nothing contextual to show.
-  if (navTpl === nothing && togglesTpl === nothing && exportTpl === nothing) {
-    return nothing;
-  }
-
   return html`
     <div class="tab-bar">
       ${navTpl}
       <div class="tb-spacer"></div>
-      ${togglesTpl} ${exportTpl}
+      ${settingsTpl} ${togglesTpl} ${exportTpl}
     </div>
   `;
 }
+
+// ── Dynamic route-param pickers ──────────────────────────────────────────────
+// Candidate values load asynchronously (ContentCollection resolution / data-file read); the module
+// Caches the last result per (documentPath, $paths) and re-renders when it lands — the same lazy
+// Fill pattern as head-panel's loadLayoutEntries. When values arrive, any param without a chosen
+// Value auto-selects the first candidate (matching the compiler, whose first expanded route is the
+// First path entry).
+
+let _paramValues: ParamValues | null = null;
+
+let _paramValuesKey: string | null = null;
+
+/**
+ * @param {Tab} tab
+ * @returns {ParamValues | null} — null while loading (or when the doc declares no params)
+ */
+function paramValuesFor(tab: Tab): ParamValues | null {
+  const pathsDef = pagePathsDef({
+    document: tab.doc.document,
+    frontmatter: tab.doc.content.frontmatter,
+  });
+  if (!pathsDef && dynamicRouteParams(tab.documentPath).length === 0) {
+    return null;
+  }
+  const key = `${tab.documentPath ?? ""}::${JSON.stringify(pathsDef)}`;
+  if (_paramValuesKey === key) {
+    return _paramValues;
+  }
+  _paramValuesKey = key;
+  _paramValues = null;
+  void loadParamValues(tab.documentPath, pathsDef).then((values) => {
+    if (_paramValuesKey !== key || activeTab.value !== tab) {
+      return;
+    }
+    _paramValues = values;
+    autoSelectParams(tab, values);
+    render();
+  });
+  return _paramValues;
+}
+
+/**
+ * @param {Tab} tab
+ * @param {ParamValues} values
+ */
+function autoSelectParams(tab: Tab, values: ParamValues) {
+  const current = tab.session.ui.previewParams ?? {};
+  const additions: Record<string, string> = {};
+  for (const [name, list] of Object.entries(values)) {
+    if (!current[name] && list.length > 0) {
+      additions[name] = list[0]!;
+    }
+  }
+  if (Object.keys(additions).length > 0) {
+    updateUi("previewParams", { ...current, ...additions });
+  }
+}
+
+/**
+ * @param {Tab} tab
+ * @returns {TemplateResult | typeof nothing}
+ */
+function paramPickersTpl(tab: Tab): TemplateResult | typeof nothing {
+  const values = paramValuesFor(tab);
+  const names = new Set(dynamicRouteParams(tab.documentPath));
+  for (const name of Object.keys(values ?? {})) {
+    names.add(name);
+  }
+  if (names.size === 0) {
+    return nothing;
+  }
+  const { previewParams } = tab.session.ui;
+  return html`
+    ${[...names].map(
+      (name) => html`
+        <sp-picker
+          size="s"
+          quiet
+          class="tab-bar-param"
+          label=${name}
+          title=${`Preview value for [${name}]`}
+          value=${previewParams?.[name] ?? ""}
+          @change=${(e: Event) => {
+            const { value } = e.target as HTMLInputElement;
+            updateUi("previewParams", { ...tab.session.ui.previewParams, [name]: value });
+          }}
+        >
+          ${(values?.[name] ?? []).map(
+            (v: string) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`,
+          )}
+        </sp-picker>
+      `,
+    )}
+  `;
+}

package/src/panels/toolbar.ts

@@ -305,7 +305,6 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
 const modes = [
   { iconTag: "sp-icon-edit", key: "edit", label: "Edit" },
   { iconTag: "sp-icon-artboard", key: "design", label: "Design" },
-  { iconTag: "sp-icon-preview", key: "preview", label: "Preview" },
   { iconTag: "sp-icon-code", key: "source", label: "Code" },
   { iconTag: "sp-icon-brush", key: "stylebook", label: "Stylebook" },
 ];
@@ -333,7 +332,9 @@ function toolbarTemplate() {
     selection: tab.session.selection,
     ui: tab.session.ui,
   };
-  const canvasMode = ctx.getCanvasMode();
+  // Base mode, not the effective mode: the switcher keeps Edit/Design highlighted while the
+  // Tab-bar preview toggle is on (preview is no longer a switchable mode).
+  const { canvasMode } = tab.session.ui;
 
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>

package/src/platforms/devserver.ts

@@ -588,6 +588,21 @@ export function createDevServerPlatform() {
       return schema;
     },
 
+    // ─── Class resolution (dev-proxy) ─────────────────────────────────────
+
+    /** @param {Record<string, unknown>} body */
+    async resolveClass(body: Record<string, unknown>) {
+      const res = await fetch("/__jx_resolve__", {
+        body: JSON.stringify(body),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(`Class resolution failed: ${res.status}`);
+      }
+      return await readJson<unknown>(res);
+    },
+
     // ─── Git operations ──────────────────────────────────────────────────
 
     async gitStatus() {

package/src/services/monaco-setup.ts

@@ -23,6 +23,18 @@ self.MonacoEnvironment = {
   },
 };
 
+/* Monaco caches glyph widths when an editor is created. JetBrains Mono is a
+   vendored webfont (index.html @font-face) and may finish loading after the
+   first editor mounts, so remeasure once all document fonts are ready to keep
+   cursor and selection alignment correct. */
+if (typeof document !== "undefined" && document.fonts?.ready) {
+  // oxlint-disable-next-line unicorn/prefer-top-level-await -- fire-and-forget: awaiting fonts.ready at top level would block module evaluation (and studio startup) until webfonts load
+  void document.fonts.ready.then(async () => {
+    const monaco = await import("monaco-editor/esm/vs/editor/editor.api.js");
+    monaco.editor.remeasureFonts();
+  });
+}
+
 // oxlint-disable-next-line typescript/no-unsafe-call, typescript/no-unsafe-member-access -- jsonDefaults is imported from Monaco's untyped ESM contribution (see @ts-expect-error above); no type declarations exist for this named export
 jsonDefaults.setDiagnosticsOptions({
   allowComments: false,

package/src/services/render-critic.ts

@@ -13,9 +13,8 @@
  * @license MIT
  */
 
-import { buildScope, renderNode, setSkipServerFunctions } from "@jxsuite/runtime";
+import { buildScope, renderNode, runScoped, setSkipServerFunctions } from "@jxsuite/runtime";
 import type { JxDocument } from "@jxsuite/schema/types";
-import { effectScope } from "../reactivity";
 
 /**
  * Translate a render-time error into an actionable message the model can fix.
@@ -51,25 +50,26 @@ function translateRenderError(err: Error): string {
 export async function renderCheck(
   doc: JxDocument,
 ): Promise<{ ok: true } | { ok: false; error: string }> {
-  const scope = effectScope();
+  let stopRender: (() => void) | null = null;
   try {
     setSkipServerFunctions(true);
 
     const state = await buildScope(doc, {});
 
     const container = document.createElement("div");
-    scope.run(() => {
+    const { stop } = runScoped(() => {
       container.append(renderNode(doc, state));
     });
+    stopRender = stop;
 
     return { ok: true };
   } catch (error) {
     return { ok: false, error: translateRenderError(error as Error) };
   } finally {
-    // Dispose all effects created synchronously by renderNode. Effects from the async
-    // BuildScope (prototype/computed setup) escape the scope because Vue tracks the active
-    // Scope synchronously — they're GC-eligible once the throwaway state/container are
-    // Unreferenced. This bounded leak is acceptable for v1.
-    scope.stop();
+    // Dispose all effects created synchronously by renderNode via the RUNTIME's runScoped — scope
+    // Collection is per @vue/reactivity module instance, so a studio effectScope here would collect
+    // Nothing. Effects from the async buildScope (prototype/computed setup) still escape the scope;
+    // They're GC-eligible once the throwaway state/container are unreferenced. Bounded, acceptable.
+    stopRender?.();
   }
 }

package/src/settings/css-vars-editor.ts

@@ -114,7 +114,7 @@ function renderColorSection(
             <div class="css-var-swatch" style="background:${val}">
               <input
                 type="color"
-                .value=${val && String(val).startsWith("#") ? val : "#007acc"}
+                .value=${val && String(val).startsWith("#") ? val : "#3b82f6"}
                 @input=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               />
             </div>
@@ -131,7 +131,7 @@ function renderColorSection(
           </div>
         `,
       )}
-      ${renderAddRow("--color-", "Primary Blue", "#007acc", addVar)}
+      ${renderAddRow("--color-", "Primary Blue", "#3b82f6", addVar)}
     </div>
   `;
 }

package/src/store.ts

@@ -10,10 +10,9 @@
 // ─── Re-exports from state.js ────────────────────────────────────────────────
 
 import { activeTab } from "./workspace/workspace";
-import { isEventBinding } from "@jxsuite/schema/guards";
 import type { JxPath } from "./state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
-import type { CanvasPanel } from "./panels/canvas-dnd.js";
+import type { CanvasPanel } from "./types";
 
 export {
   createState,
@@ -52,20 +51,6 @@ export function initShellRefs() {
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
-export const elToPath = new WeakMap<Element, JxPath>();
-
-/**
- * Canvas element → the runtime scope its children render with. Captured during live renders so the
- * canvas patcher can re-render a subtree in isolation with the same prototype-chained scope.
- */
-export const elToScope = new WeakMap<Element, Record<string, unknown>>();
-
-/**
- * Subtree root element → the effect scope created for its surgical render. Stopped when the subtree
- * is replaced or removed so render-time reactive effects don't accumulate.
- */
-export const elToRenderScope = new WeakMap<Element, { stop: () => void }>();
-
 export const canvasPanels: CanvasPanel[] = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
@@ -139,52 +124,9 @@ export function cancelStyleDebounce(prop: string) {
   _styleDebounceTimers.delete(prop);
 }
 
-/**
- * Strip all on* event handler properties from a Jx document tree (deep clone).
- *
- * @param {JxMutableNode} node
- * @returns {JxMutableNode}
- */
-export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
-  if (!node || typeof node !== "object") {
-    return node;
-  }
-  if (Array.isArray(node)) {
-    // Arrays of nodes round-trip element-wise; the array itself is not a node.
-    return node.map((n: JxMutableNode) => stripEventHandlers(n)) as unknown as JxMutableNode;
-  }
-  const out: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(node)) {
-    if (k.startsWith("on") && isEventBinding(v)) {
-      continue;
-    }
-    if (k === "children") {
-      out.children = Array.isArray(v)
-        ? v.map((c: JxMutableNode) => stripEventHandlers(c))
-        : stripEventHandlers(v as JxMutableNode);
-    } else if (k === "cases" && typeof v === "object") {
-      const cases: Record<string, unknown> = {};
-      for (const [ck, cv] of Object.entries(v as Record<string, unknown>)) {
-        cases[ck] = stripEventHandlers(cv as JxMutableNode);
-      }
-      out.cases = cases;
-    } else if (k === "state" && typeof v === "object" && v !== null) {
-      const state: Record<string, unknown> = {};
-      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
-        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server") {
-          continue;
-        }
-        state[sk] = sv;
-      }
-      out.state = state;
-    } else if (k === "style" || k === "attributes" || k === "$media") {
-      out[k] = v;
-    } else {
-      out[k] = v;
-    }
-  }
-  return out;
-}
+// `stripEventHandlers` moved to ./utils/strip-events (dependency-light, shared with the iframe
+// Subtree renderer); re-exported here so existing `from "../store"` imports keep working.
+export { stripEventHandlers } from "./utils/strip-events";
 
 // ─── Render orchestration ────────────────────────────────────────────────────
 

package/src/studio.ts

@@ -19,6 +19,7 @@ import {
   requireProjectState,
   setProjectState,
   toolbarEl,
+  updateSession,
   updateUi,
 } from "./store";
 
@@ -28,20 +29,28 @@ import { effect } from "./reactivity";
 
 import { view } from "./view";
 
-import { isEditableBlock, isEditing } from "./editor/inline-edit";
-import { enterComponentInlineEdit, initComponentInlineEdit } from "./editor/component-inline-edit";
-import { enterInlineEdit } from "./editor/content-inline-edit";
+import { isEditing } from "./editor/inline-edit";
 import { applyTransform, initCanvasUtils, positionZoomIndicator } from "./canvas/canvas-utils";
-import { findCanvasElement, getActivePanel, initCanvasHelpers } from "./canvas/canvas-helpers";
 import {
-  applyCanvasMediaOverrides,
   initCanvasRender,
   renderCanvas,
   renderOverlays,
   scheduleCanvasRender,
 } from "./canvas/canvas-render";
 import { consumePatchedDocument, initCanvasPatcher } from "./canvas/canvas-patcher";
-import { registerSubtreeDnD } from "./panels/canvas-dnd";
+import {
+  commitActiveEditSession,
+  getEditSnapshot,
+  setCanvasContextMenuHandler,
+  setCanvasSlashHandler,
+  setIframePatchEscalation,
+  setInsertZoneClickHandler,
+  setStylebookHitHandler,
+  setToolbarRefresh,
+} from "./canvas/iframe-host";
+import { runInsertZoneAction } from "./editor/insert-zone-action";
+import { canvasSlashHandler } from "./editor/canvas-slash-bridge";
+import { makeCanvasContextMenuHandler } from "./editor/canvas-context-menu";
 import { initCanvasLiveRender } from "./canvas/canvas-live-render";
 import {
   mountStatusbar,
@@ -50,7 +59,12 @@ import {
   statusMessage,
 } from "./panels/statusbar";
 import { exportFile, parseSourceForPath, saveFile, serializeDocument } from "./files/file-ops";
-import { documentExtensions, formatForPath, loadFormats } from "./format/format-host";
+import {
+  documentExtensions,
+  formatForPath,
+  loadFormats,
+  refreshFormats,
+} from "./format/format-host";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
@@ -97,14 +111,17 @@ import * as rightPanelMod from "./panels/right-panel";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
 import * as tabBar from "./panels/tab-bar";
-import { renderStylebookOverlays } from "./panels/stylebook-panel";
+import { selectStylebookTag } from "./panels/stylebook-panel";
 import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd";
+import { registerCanvasDndBridge } from "./panels/canvas-dnd-bridge";
 import { defaultDef } from "./panels/shared";
 import { registerFunctionCompletions } from "./panels/editors";
-import { renderBlockActionBar, initBlockActionBar } from "./panels/block-action-bar";
+import {
+  initBlockActionBar,
+  isEditChromeTarget,
+  renderBlockActionBar,
+} from "./panels/block-action-bar";
 import { initCssData } from "./panels/style-utils";
-import { updateForcedPseudoPreview } from "./panels/pseudo-preview";
-import { initPanelEvents } from "./panels/panel-events";
 import { initQuickSearch } from "./panels/quick-search";
 import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
 import { initWelcome } from "./panels/welcome-screen";
@@ -119,8 +136,14 @@ void _swc;
 // These mutable variables are local to studio.js for now. As sections are extracted
 // Into their own modules, they will migrate to ctx in store.js.
 
+// Effective canvas mode: the per-tab preview toggle composes with an edit/design base mode and
+// Presents as "preview" to every downstream gate (doc resolution, iframe flags, interaction
+// Surfaces). Consumers needing the base mode (toolbar switcher selection, canvas host layout)
+// Read tab.session.ui.canvasMode directly.
 function getCanvasMode() {
-  return activeTab.value?.session.ui.canvasMode ?? "design";
+  const ui = activeTab.value?.session.ui;
+  const base = ui?.canvasMode ?? "design";
+  return ui?.preview && (base === "edit" || base === "design") ? "preview" : base;
 }
 
 /** @param {string} mode */
@@ -361,39 +384,58 @@ initBlockActionBar({
   getCanvasMode,
   navigateToComponent,
 });
-
-initComponentInlineEdit({ findCanvasElement });
-initCanvasHelpers({
-  getCanvasMode,
-  getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
+// The iframe's re-emitted selection snapshot drives the parent format toolbar refresh (4b-2).
+setToolbarRefresh(renderBlockActionBar);
+// The cross-origin insertion "+" click runs the parent-realm slash-menu → mutateInsertNode flow.
+setInsertZoneClickHandler(runInsertZoneAction);
+// The in-iframe "/" trigger drives the parent-realm Spectrum slash menu across the bridge.
+setCanvasSlashHandler(canvasSlashHandler);
+// Canvas right-clicks show the parent-realm Jx element context menu across the bridge.
+setCanvasContextMenuHandler(makeCanvasContextMenuHandler({ navigateToComponent }));
+// Stylebook hits decode to a TAG in the host and route here (null = clicked chrome/empty space).
+setStylebookHitHandler((tag, media) => {
+  if (tag) {
+    selectStylebookTag(tag, media);
+  } else {
+    updateSession({ ui: { activeSelector: null, stylebookSelection: null } });
+  }
 });
+// Commit-on-parent-click: a pointerdown in PARENT chrome outside the edit-session chrome (format
+// Toolbar / link popover / slash menu) ends the live inline-edit session — the iframe can't observe
+// Parent-realm pointer events (layers panel, tab strip, right panel…). Pointerdowns over the canvas
+// Land inside the cross-origin iframe and never reach this listener, so it can't double-fire with
+// The iframe's own click-away commit.
+document.addEventListener(
+  "pointerdown",
+  (e) => {
+    if (getEditSnapshot().editing && !isEditChromeTarget(e.target)) {
+      commitActiveEditSession();
+    }
+  },
+  true,
+);
+
 initCanvasUtils({
   getCanvasMode,
   getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
-  renderStylebookOverlays,
   setZoomDirect: (zoom) => {
     if (activeTab.value) {
       activeTab.value.session.ui.zoom = zoom;
     }
   },
 });
-initPanelEvents({
-  enterInlineEdit,
-  getCanvasMode,
-  navigateToComponent,
-});
 initCanvasLiveRender({
   getCanvasMode,
 });
 initCanvasPatcher({
-  applyCanvasMediaOverrides,
-  enterComponentInlineEdit,
   getCanvasMode,
-  registerSubtreeDnD,
   renderOverlays,
   scheduleCanvasRender,
-  updateForcedPseudoPreview,
 });
+// When the iframe canvas can't apply a posted patch surgically, fall back to a full render.
+setIframePatchEscalation(scheduleCanvasRender);
+// One global coordinator monitor drives cross-frame palette→canvas drops (Phase 4c).
+registerCanvasDndBridge();
 initCanvasRender({
   getCanvasMode,
   get gitDiffState() {
@@ -441,7 +483,10 @@ effect(() => {
     void tab.session.ui.canvasMode;
     void tab.session.ui.editingFunction;
     void tab.session.ui.featureToggles;
+    void tab.session.ui.preview;
+    void tab.session.ui.previewParams;
     void tab.session.ui.settingsTab;
+    void tab.session.ui.showLayout;
     void tab.session.ui.stylebookTab;
     void tab.session.ui.stylebookFilter;
     void tab.session.ui.stylebookCustomizedOnly;
@@ -453,7 +498,6 @@ rightPanelMod.mount({
   getCanvasMode,
   navigateToComponent,
   renderCanvas: () => renderCanvas(),
-  updateForcedPseudoPreview,
 });
 
 leftPanelMod.mount({
@@ -520,6 +564,19 @@ function ensureFsSync() {
 const _urlParams = new URLSearchParams(location.search);
 const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
+if (!_projectParam) {
+  // Electrobun (and other non-?project= hosts) load their project over RPC, so the ?project= branch
+  // Below — which is the only place that calls platform.activate() — is skipped. Kick off activate()
+  // Here UNCONDITIONALLY so this window's loopback canvasUrl is fetched on boot (the canvas iframe
+  // Needs it); a render() once it resolves lets ensureHost swap an early default iframe for the
+  // Loopback one (see iframe-host ensureHost's canvasUrl-changed rebuild).
+  const _bootPlatform = getPlatform();
+  // oxlint-disable-next-line unicorn/prefer-top-level-await -- fire-and-forget: must not block the initial render
+  void _bootPlatform.activate?.()?.then(() => {
+    render();
+  });
+}
+
 if (_projectParam) {
   // ?project= mode: skip normal loadProject, set up site context from the path
   const isAbsPath =
@@ -708,6 +765,11 @@ async function openRecentProject(root: string) {
     }
 
     platform.projectRoot = root;
+    // The format registry is cached per project — the previous root's registry (often empty on a
+    // Fresh desktop launch) must not answer for this project, or non-JSON documents fail with
+    // "No format class imported" until a reload. Mirrors openProject in files.ts.
+    refreshFormats();
+    void loadFormats();
     const content = await platform.readFile("project.json");
     const config = JSON.parse(content) as ProjectConfig;
 
@@ -779,18 +841,6 @@ function openFileFromTree(path: string) {
 initShortcuts(() => ({
   applyTransform,
   canvasMode: getCanvasMode(),
-  componentInlineEdit: view.componentInlineEdit,
-  enterEditOnPath(path) {
-    requestAnimationFrame(() => {
-      const activePanel = getActivePanel();
-      if (activePanel) {
-        const el = findCanvasElement(path, activePanel.canvas);
-        if (el && isEditableBlock(el)) {
-          enterInlineEdit(el, path);
-        }
-      }
-    });
-  },
   openProject,
   panX: view.panX,
   panY: view.panY,