@jxsuite/studio 0.37.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.37.1",
+  "version": "1.1.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -39,63 +39,65 @@
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
     "@jxsuite/ai": "^0.33.0",
-    "@jxsuite/collab": "^0.2.1",
-    "@jxsuite/create": "^0.36.0",
-    "@jxsuite/parser": "^0.35.1",
-    "@jxsuite/protocol": "^0.3.1",
-    "@jxsuite/runtime": "^0.34.2",
-    "@jxsuite/schema": "^0.35.0",
-    "@spectrum-web-components/accordion": "^1.12.1",
-    "@spectrum-web-components/action-bar": "1.12.1",
-    "@spectrum-web-components/action-button": "^1.12.1",
-    "@spectrum-web-components/action-group": "^1.12.1",
-    "@spectrum-web-components/base": "^1.12.1",
-    "@spectrum-web-components/button": "^1.12.1",
-    "@spectrum-web-components/checkbox": "^1.12.1",
-    "@spectrum-web-components/color-area": "^1.12.1",
-    "@spectrum-web-components/color-handle": "^1.12.1",
-    "@spectrum-web-components/color-slider": "^1.12.1",
-    "@spectrum-web-components/combobox": "^1.12.1",
-    "@spectrum-web-components/dialog": "^1.12.1",
-    "@spectrum-web-components/divider": "^1.12.1",
-    "@spectrum-web-components/field-label": "^1.12.1",
-    "@spectrum-web-components/help-text": "^1.12.1",
-    "@spectrum-web-components/icon": "^1.12.1",
-    "@spectrum-web-components/icons-ui": "^1.12.1",
-    "@spectrum-web-components/icons-workflow": "^1.12.1",
-    "@spectrum-web-components/menu": "^1.12.1",
-    "@spectrum-web-components/number-field": "^1.12.1",
-    "@spectrum-web-components/overlay": "^1.12.1",
+    "@jxsuite/collab": "^0.4.0",
+    "@jxsuite/create": "^1.1.0",
+    "@jxsuite/formulas": "^0.0.2",
+    "@jxsuite/markup": "^0.3.0",
+    "@jxsuite/protocol": "^0.5.0",
+    "@jxsuite/runtime": "^1.1.0",
+    "@jxsuite/schema": "^1.1.0",
+    "@spectrum-web-components/accordion": "^1.12.2",
+    "@spectrum-web-components/action-bar": "1.12.2",
+    "@spectrum-web-components/action-button": "^1.12.2",
+    "@spectrum-web-components/action-group": "^1.12.2",
+    "@spectrum-web-components/base": "^1.12.2",
+    "@spectrum-web-components/button": "^1.12.2",
+    "@spectrum-web-components/checkbox": "^1.12.2",
+    "@spectrum-web-components/color-area": "^1.12.2",
+    "@spectrum-web-components/color-handle": "^1.12.2",
+    "@spectrum-web-components/color-slider": "^1.12.2",
+    "@spectrum-web-components/combobox": "^1.12.2",
+    "@spectrum-web-components/dialog": "^1.12.2",
+    "@spectrum-web-components/divider": "^1.12.2",
+    "@spectrum-web-components/field-label": "^1.12.2",
+    "@spectrum-web-components/help-text": "^1.12.2",
+    "@spectrum-web-components/icon": "^1.12.2",
+    "@spectrum-web-components/icons-ui": "^1.12.2",
+    "@spectrum-web-components/icons-workflow": "^1.12.2",
+    "@spectrum-web-components/menu": "^1.12.2",
+    "@spectrum-web-components/number-field": "^1.12.2",
+    "@spectrum-web-components/overlay": "^1.12.2",
     "@spectrum-web-components/overlay-trigger": "^0.1.7",
-    "@spectrum-web-components/picker": "^1.12.1",
-    "@spectrum-web-components/picker-button": "^1.12.1",
-    "@spectrum-web-components/popover": "^1.12.1",
-    "@spectrum-web-components/progress-circle": "^1.12.1",
-    "@spectrum-web-components/search": "^1.12.1",
-    "@spectrum-web-components/swatch": "^1.12.1",
-    "@spectrum-web-components/switch": "^1.12.1",
-    "@spectrum-web-components/table": "^1.12.1",
-    "@spectrum-web-components/tabs": "^1.12.1",
-    "@spectrum-web-components/textfield": "^1.12.1",
-    "@spectrum-web-components/theme": "^1.12.1",
-    "@spectrum-web-components/toast": "^1.12.1",
-    "@spectrum-web-components/tooltip": "^1.12.1",
-    "@spectrum-web-components/underlay": "^1.12.1",
-    "@vue/reactivity": "3.5.39",
+    "@spectrum-web-components/picker": "^1.12.2",
+    "@spectrum-web-components/picker-button": "^1.12.2",
+    "@spectrum-web-components/popover": "^1.12.2",
+    "@spectrum-web-components/progress-circle": "^1.12.2",
+    "@spectrum-web-components/search": "^1.12.2",
+    "@spectrum-web-components/swatch": "^1.12.2",
+    "@spectrum-web-components/switch": "^1.12.2",
+    "@spectrum-web-components/table": "^1.12.2",
+    "@spectrum-web-components/tabs": "^1.12.2",
+    "@spectrum-web-components/textfield": "^1.12.2",
+    "@spectrum-web-components/theme": "^1.12.2",
+    "@spectrum-web-components/toast": "^1.12.2",
+    "@spectrum-web-components/tooltip": "^1.12.2",
+    "@spectrum-web-components/underlay": "^1.12.2",
+    "@vue/reactivity": "3.5.40",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "lit": "^3.3.3",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
+    "tabulator-tables": "^6.5",
     "y-monaco": "^0.1.6",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.6.1",
+    "@webref/css": "^8.7.0",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.2"
+    "@webref/idl": "^3.82.0"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/account-status.ts

@@ -0,0 +1,39 @@
+/**
+ * Account onboarding status — a synchronous render cache over the optional
+ * `platform.getAccountStatus` PAL member (cloud GitHub-App installations). Hydrated once at boot
+ * (studio.ts) like the project-list cache; the welcome screen reads it synchronously to prompt
+ * "install the GitHub App" when the user has no repository access yet.
+ */
+import { getPlatform, hasPlatform } from "./platform";
+import type { AccountStatus } from "./types";
+
+let cache: AccountStatus | null = null;
+
+/** Refresh the cache from the platform; null when unsupported, failing, or unknown. */
+export async function hydrateAccountStatus(): Promise<void> {
+  if (!hasPlatform() || typeof getPlatform().getAccountStatus !== "function") {
+    cache = null;
+    return;
+  }
+  try {
+    cache = (await getPlatform().getAccountStatus?.()) ?? null;
+  } catch {
+    // Onboarding prompts are progressive enhancement; unknown status never nags.
+    cache = null;
+  }
+}
+
+/** Synchronous snapshot for render paths (never awaits); null = unknown. */
+export function getAccountStatus(): AccountStatus | null {
+  return cache;
+}
+
+/** True when the account verifiably has no repository access yet and we know where to fix it. */
+export function needsAppInstall(): boolean {
+  return cache !== null && cache.installations.length === 0 && Boolean(cache.appInstallUrl);
+}
+
+/** Reset seam for tests. */
+export function resetAccountStatus(): void {
+  cache = null;
+}

package/src/browse/browse.ts

@@ -34,7 +34,8 @@ import {
 } from "../format/format-host";
 
 import type { ComponentEntry } from "../files/components";
-import type { ContentTypeDef, JxDocument } from "@jxsuite/schema/types";
+import type { ContentSectionEntry } from "../types";
+import type { JxDocument } from "@jxsuite/schema/types";
 
 // ─── Category definitions ────────────────────────────────────────────────────
 
@@ -184,19 +185,16 @@ async function collectFiles(
 }
 
 /**
- * Match a file path against project contentTypes source directories to find its content type name.
- * Returns the content type name (capitalized) or null if no match.
+ * Match a file path against the project `content` section's source directories to find its content
+ * type name. Returns the content type name (capitalized) or null if no match.
  *
  * @param {string} filePath
  * @returns {string | null}
  */
 function contentTypeFor(filePath: string) {
   const config = projectState?.projectConfig;
-  if (!config?.contentTypes) {
-    return null;
-  }
-  for (const [name, def] of Object.entries(config.contentTypes)) {
-    const d = def as ContentTypeDef;
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  for (const [name, d] of Object.entries(content)) {
     if (!d.source) {
       continue;
     }
@@ -264,7 +262,8 @@ function getEntityTypes() {
  */
 function buildFrontmatterYaml(contentTypeName: string) {
   const config = projectState?.projectConfig;
-  const col = config?.contentTypes?.[contentTypeName];
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  const col = content[contentTypeName];
   if (!col?.schema?.properties) {
     return "title: Untitled\n";
   }
@@ -284,11 +283,8 @@ function buildFrontmatterYaml(contentTypeName: string) {
  */
 function getContentTypeTypes() {
   const config = projectState?.projectConfig;
-  if (!config?.contentTypes) {
-    return [];
-  }
-  return Object.entries(config.contentTypes).map(([name, def]) => {
-    const d = def as ContentTypeDef;
+  const content = (config?.content ?? {}) as Record<string, ContentSectionEntry>;
+  return Object.entries(content).map(([name, d]) => {
     const dir = d.source ? d.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       contentTypeName: name,

package/src/canvas/canvas-live-render.ts

@@ -26,6 +26,7 @@ import {
   resolveParamBoundState,
   substitutePreviewParams,
 } from "../page-params";
+import { isComponentDoc, substitutePreviewProps } from "../component-props";
 
 import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 import type { ComponentEntry } from "../files/components.js";
@@ -182,6 +183,17 @@ export async function resolveCanvasDocument(doc: JxMutableNode): Promise<{
     }
   }
 
+  // Component definition docs (non-page): seed chosen test-prop values into the render doc's state
+  // So a non-instantiated component previews with real data — templates, dataScope snapshots, and
+  // Live/snapshot expression previews all see the values (M6, the previewParams mirror). Pure
+  // Rebuild for the same reason as substitutePreviewParams above.
+  if (!isPage && tab && isComponentDoc(renderDoc)) {
+    const { previewProps } = tab.session.ui;
+    if (previewProps && Object.keys(previewProps).length > 0) {
+      renderDoc = substitutePreviewProps(renderDoc, previewProps);
+    }
+  }
+
   const arrayPaths = new Set<string>();
   if (canvasMode === "design" || canvasMode === "edit") {
     (function findArrayPaths(node: JxMutableNode, path: (string | number)[]) {
@@ -219,9 +231,16 @@ export async function resolveCanvasDocument(doc: JxMutableNode): Promise<{
     })(doc, []);
   }
 
-  // Component auto-discovery (content mode or layout) — mirrors the legacy render path.
+  // Component auto-discovery (content mode, wrapped layout, or a layout opened on its own) —
+  // Mirrors the legacy render path. A directly-opened layout is neither a page (so it never
+  // Sets layoutWrapped) nor content mode (a plain .json file skips the mode-setting parse),
+  // So it needs its own gate; scoping to layouts/ avoids the single-component-edit path, where
+  // The doc's own root tag would otherwise inject a $ref to itself.
+  const isLayoutDoc =
+    S.documentPath != null &&
+    (S.documentPath.startsWith("layouts/") || S.documentPath.startsWith("./layouts/"));
   const effectiveElements = getEffectiveElements(renderDoc.$elements as (JxElement | string)[]);
-  if ((S.mode === "content" || layoutWrapped) && componentRegistry.length > 0) {
+  if ((S.mode === "content" || layoutWrapped || isLayoutDoc) && componentRegistry.length > 0) {
     const existingRefs = new Set(
       effectiveElements.map((e: JxElement | string) => (typeof e === "string" ? e : e?.$ref)),
     );

package/src/canvas/canvas-render.ts

@@ -15,15 +15,15 @@ import { attachCursorStyles } from "../collab/monaco-cursors";
 import type { AwarenessLike } from "../collab/monaco-cursors";
 import { view } from "../view";
 import { parseSourceForPath, serializeDocument } from "../files/file-ops";
+import { detachGridPanel, gridPanelMounted, renderGridMode } from "../grid/grid-panel";
 import { formatByName, formatForPath } from "../format/format-host";
 import { renderWelcome } from "../panels/welcome-screen";
 import { projectState } from "../state";
 import {
+  applyEditZoom,
   applyTransform,
   canvasPanelTemplate,
   observeCenterUntilStable,
-  renderZoomIndicator,
-  resetZoomIndicator,
   updateActivePanelHeaders,
 } from "./canvas-utils";
 import { parseMediaEntries } from "../utils/canvas-media";
@@ -40,6 +40,7 @@ import { dismissBlockActionBar, dismissLinkPopover } from "../panels/block-actio
 import { dismissContextMenu } from "../editor/context-menu";
 import { dismissSlashMenu } from "../editor/slash-menu";
 import { renderFunctionEditor } from "../panels/editors";
+import { renderFormulaWorkspace } from "../panels/formula-workspace";
 import { mediaDisplayName } from "../panels/shared";
 import { statusMessage } from "../panels/statusbar";
 import * as overlaysPanel from "../panels/overlays";
@@ -174,6 +175,7 @@ function resetCanvasView() {
     view.functionEditor.dispose();
     view.functionEditor = null;
   }
+  detachGridPanel();
   disposeSourceCollab();
   if (view.monacoEditor) {
     view.monacoEditor.getModel()?.dispose();
@@ -206,7 +208,6 @@ function resetCanvasView() {
   canvasWrap.style.flexDirection = "";
   canvasWrap.style.display = "";
   canvasWrap.style.overflow = "";
-  resetZoomIndicator();
   dismissBlockActionBar();
   dismissLinkPopover();
   dismissContextMenu();
@@ -266,6 +267,13 @@ export function renderCanvas() {
     view.functionEditor = null;
   }
 
+  // Formula workspace mode: full-screen structured editing of an $expression (the function editor
+  // Takes precedence when both targets are set).
+  if (S.ui.editingFormula) {
+    renderFormulaWorkspace();
+    return;
+  }
+
   // Source mode: update existing Monaco editor without recreating. Don't replace the buffer while
   // The user is actively typing in it — that would reformat under the cursor (the source view is
   // The editing surface here, mirroring the panel draft-state behaviour).
@@ -287,6 +295,12 @@ export function renderCanvas() {
     return;
   }
 
+  // Grid fast-path: the grid panel runs its own effect scope (toolbar + engine stay live), so a
+  // Same-tab re-render while the panel is mounted needs nothing from the canvas pipeline.
+  if (canvasMode === "grid" && gridPanelMounted(tab)) {
+    return;
+  }
+
   // Stylebook fast-path: a style edit re-applies IN PLACE via the bridge (the iframe re-runs the
   // Runtime's style applier on the specimen root — real @media, no re-render, no iframe reload).
   // Filter/Customized changes fall through to the full rebuild (they change which specimens exist),
@@ -344,6 +358,9 @@ export function renderCanvas() {
       view.centerObserver = null;
     }
 
+    // Destroy the grid panel if switching away from grid mode
+    detachGridPanel();
+
     // Dispose Monaco editor if switching away from source mode
     disposeSourceCollab();
     if (view.monacoEditor) {
@@ -362,9 +379,6 @@ export function renderCanvas() {
     canvasWrap.style.overflow = "";
     canvasWrap.style.overflow = "";
 
-    // Clear zoom indicator (only re-rendered by design/stylebook)
-    resetZoomIndicator();
-
     // Dismiss open popovers/toolbars that are no longer relevant
     dismissBlockActionBar();
     dismissLinkPopover();
@@ -380,12 +394,20 @@ export function renderCanvas() {
       applyTransform,
       canvasPanelTemplate,
       observeCenterUntilStable,
-      renderZoomIndicator,
       updateActivePanelHeaders,
     });
     return;
   }
 
+  // Grid mode: spreadsheet editor over the tab's grid source (mirrors the Monaco/stylebook
+  // Non-iframe-editor pattern; the panel owns its own reactivity from here).
+  if (canvasMode === "grid") {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.display = "block";
+    renderGridMode(canvasWrap, tab);
+    return;
+  }
+
   // Source mode: create Monaco editor instead of canvas
   if (canvasMode === "source") {
     canvasWrap.style.padding = "0";
@@ -599,18 +621,15 @@ export function renderCanvas() {
     if (modeChanged) {
       observeCenterUntilStable();
     }
-    renderZoomIndicator();
     return;
   }
 
-  // Edit (content) mode — centered column, no panzoom, always 100%
+  // Edit (content) mode — centered column, no panzoom; `ui.editZoom` reflows content at the zoomed
+  // Effective width while the on-screen footprint stays fixed (browser-page-zoom semantics).
   if (canvasMode === "edit") {
     if (modeChanged) {
       canvasWrap.style.padding = "0";
       canvasWrap.style.overflow = "hidden";
-
-      // Remove zoom indicator left over from design mode
-      resetZoomIndicator();
     }
 
     const { baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
@@ -633,6 +652,10 @@ export function renderCanvas() {
     litRender(editTpl, canvasWrap);
     canvasPanels.push(panel as unknown as CanvasPanel);
     renderCanvasIntoPanel(panel as unknown as CanvasPanel, S.ui.featureToggles);
+    // The column must exist in the DOM before the zoom's live width measurement — so the zoom is
+    // Applied after the render rather than baked into the template (the panel mounts fluid and is
+    // Immediately re-fitted; the iframe hasn't painted yet, so nothing visibly jumps).
+    applyEditZoom();
     return;
   }
 
@@ -684,7 +707,6 @@ export function renderCanvas() {
     if (modeChanged) {
       observeCenterUntilStable();
     }
-    renderZoomIndicator();
     return;
   }
 
@@ -747,9 +769,6 @@ export function renderCanvas() {
   if (modeChanged) {
     observeCenterUntilStable();
   }
-
-  // Floating zoom indicator
-  renderZoomIndicator();
 }
 
 /**

package/src/canvas/canvas-utils.ts

@@ -4,7 +4,7 @@
  * template creation, centering, transform application, zoom indicator, and fit-to-screen.
  */
 
-import { html, render as litRender, nothing } from "lit-html";
+import { html, nothing } from "lit-html";
 import type { CanvasPanel } from "../types";
 import { ref } from "lit-html/directives/ref.js";
 import { classMap } from "lit-html/directives/class-map.js";
@@ -14,7 +14,6 @@ import { ifDefined } from "lit-html/directives/if-defined.js";
 import { canvasPanels, canvasWrap, renderOnly, updateUi } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { getLayerSlot } from "../ui/layers";
 import { findCanvasElement, getActivePanel, panelMediaToActiveMedia } from "./canvas-helpers";
 import { rectOf } from "../utils/geometry";
 import type { TemplateResult } from "lit-html";
@@ -25,8 +24,6 @@ let _ctx: {
   setZoomDirect: (zoom: number) => void;
 };
 
-let _zoomIndicatorEl: HTMLElement | null = null;
-
 /**
  * Initialize the canvas utils module.
  *
@@ -162,12 +159,127 @@ export function applyTransform() {
   }
   const zoom = _ctx.getZoom();
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
-  renderZoomIndicator();
   // Overlays live INSIDE the scaled panzoom-wrap (iframe hosts draw there), so no per-mode redraw
-  // Is needed here — the flush only re-anchors the fixed block-action-bar.
+  // Is needed here — the flush only re-anchors the fixed block-action-bar. The tab-bar zoom widget
+  // Tracks `ui.zoom` reactively, so no explicit indicator refresh is needed either.
+  renderOnly("overlays");
+}
+
+// ─── Edit-mode content zoom ──────────────────────────────────────────────────
+// Browser-page-zoom semantics: the canvas footprint stays fixed while the CONTENT reflows at the
+// Zoomed effective width — unlike design mode's panzoom, which visually scales a fixed layout.
+
+export const EDIT_ZOOM_MIN = 0.25;
+
+export const EDIT_ZOOM_MAX = 3;
+
+/** Clamp an edit-zoom value to the supported range. */
+export function clampEditZoom(zoom: number): number {
+  return Math.min(EDIT_ZOOM_MAX, Math.max(EDIT_ZOOM_MIN, zoom));
+}
+
+/**
+ * Apply the active tab's edit-mode content zoom to the single edit panel.
+ *
+ * Mechanism: a parent-side transform on the iframe never reflows the iframe's internal document (it
+ * is its own layout viewport), so genuine reflow requires resizing the iframe's REAL CSS width to
+ * `renderWidth / editZoom` — and a compensating `scale(editZoom)` on the canvas element brings the
+ * rendered footprint back to exactly `renderWidth`. The overlay layer (the iframe's DOM sibling
+ * inside the canvas element) inherits the transform, so overlay boxes stay drawn at scale 1 (D-2),
+ * and `hostDragGeometry`'s empirical `rect.width / clientWidth` evaluates to exactly `editZoom`
+ * with no bridge changes.
+ *
+ * `renderWidth` is measured live from `.content-edit-column` (already `min(baseWidth, available)`
+ * via normal block layout) — the nominal `$media["--"]` width would overflow a narrow studio
+ * window.
+ *
+ * HARD INVARIANT: never trigger a canvas re-render from here (`renderCanvas`/`mountIframeCanvas`) —
+ * a re-render rebuilds the iframe DOM and would destroy a live inline-edit session. Live zoom is
+ * bare style writes only; the iframe's own ResizeObserver re-posts `contentHeight` after the
+ * reflow, which also finalizes the viewport height.
+ */
+export function applyEditZoom() {
+  if (_ctx.getCanvasMode() !== "edit") {
+    return;
+  }
+  const [panel] = canvasPanels;
+  if (!panel?.canvas || !panel.viewport) {
+    return;
+  }
+  const canvasEl = panel.canvas;
+  const iframe = canvasEl.querySelector("iframe");
+  const editZoom = activeTab.value?.session.ui.editZoom ?? 1;
+  if (editZoom === 1) {
+    // Exactly today's fluid behavior — no inline width, no transform, auto viewport height.
+    panel._width = null;
+    canvasEl.style.width = "";
+    canvasEl.style.transform = "";
+    canvasEl.style.transformOrigin = "";
+    if (iframe) {
+      iframe.style.width = "100%";
+    }
+    panel.viewport.style.height = "";
+  } else {
+    const column = canvasWrap.querySelector<HTMLElement>(".content-edit-column");
+    if (!column) {
+      return;
+    }
+    // The column width is parent-driven (width:100%, max-width:baseWidth), so it is independent of
+    // The canvas content — measuring it mid-zoom is stable. No rounding: layoutWidth * editZoom
+    // Must equal renderWidth exactly.
+    const renderWidth = rectOf(column).width;
+    if (renderWidth <= 0) {
+      return;
+    }
+    const layoutWidth = renderWidth / editZoom;
+    panel._width = layoutWidth;
+    canvasEl.style.width = `${layoutWidth}px`;
+    canvasEl.style.transform = `scale(${editZoom})`;
+    canvasEl.style.transformOrigin = "top left";
+    if (iframe) {
+      iframe.style.width = `${layoutWidth}px`;
+      // Transforms don't affect an ancestor's auto-height, so the viewport (the white "page"
+      // Surface) needs its height pinned to the SCALED content height. offsetHeight is the
+      // Pre-measurement approximation; the next contentHeight message writes the exact value.
+      panel.viewport.style.height = `${iframe.offsetHeight * editZoom}px`;
+    }
+  }
+  // Re-anchor the fixed block-action-bar over the rescaled canvas.
   renderOnly("overlays");
 }
 
+/** Set the active tab's edit zoom (clamped) and apply it synchronously. */
+export function setEditZoom(zoom: number) {
+  const tab = activeTab.value;
+  if (!tab) {
+    return;
+  }
+  tab.session.ui.editZoom = clampEditZoom(zoom);
+  applyEditZoom();
+}
+
+let _editZoomRaf = 0;
+
+/**
+ * Wheel-rate edit-zoom setter: the reactive `editZoom` write lands immediately (the tab-bar label
+ * tracks it), but the DOM work — an iframe width resize, i.e. a real reflow — is coalesced to one
+ * `applyEditZoom()` per animation frame so a fast ctrl+scroll burst doesn't thrash layout.
+ */
+export function requestEditZoom(zoom: number) {
+  const tab = activeTab.value;
+  if (!tab) {
+    return;
+  }
+  tab.session.ui.editZoom = clampEditZoom(zoom);
+  if (_editZoomRaf) {
+    return;
+  }
+  _editZoomRaf = requestAnimationFrame(() => {
+    _editZoomRaf = 0;
+    applyEditZoom();
+  });
+}
+
 /** Calculate zoom + pan to fit all panels within the viewport. */
 export function fitToScreen() {
   if (!view.panzoomWrap) {
@@ -209,12 +321,6 @@ export function resetZoom() {
   _ctx.setZoomDirect(1);
   centerCanvas();
   applyTransform();
-  renderZoomIndicator();
-}
-
-/** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
-export function resetZoomIndicator() {
-  litRender(nothing, getLayerSlot("popover", "zoom-indicator"));
 }
 
 /**
@@ -286,66 +392,6 @@ export function panToElement(path: (string | number)[]) {
   _panToEl(el, panel);
 }
 
-/**
- * Render the floating zoom indicator at the bottom center of canvas-wrap. Uses position: fixed,
- * computed from canvas-wrap bounds.
- */
-export function renderZoomIndicator() {
-  const zoom = _ctx.getZoom();
-  const host = getLayerSlot("popover", "zoom-indicator");
-  litRender(
-    html`
-      <div
-        class="zoom-indicator"
-        ${ref((el: Element | undefined) => {
-          _zoomIndicatorEl = (el as HTMLElement) || null;
-        })}
-      >
-        <span class="zoom-indicator-action" title="Reset to 100%" @click=${resetZoom}>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <circle cx="8" cy="8" r="5.5" />
-            <path d="M8 5.5v5M5.5 8h5" />
-          </svg>
-        </span>
-        <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
-        <span class="zoom-indicator-action" title="Fit to screen" @click=${fitToScreen}>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <rect x="2" y="2" width="12" height="12" rx="1" />
-            <path d="M2 6h12M6 2v12" />
-          </svg>
-        </span>
-      </div>
-    `,
-    host,
-  );
-  positionZoomIndicator();
-}
-
-/** Position the zoom indicator relative to canvas-wrap bounds. */
-export function positionZoomIndicator() {
-  if (!_zoomIndicatorEl) {
-    return;
-  }
-  const rect = rectOf(canvasWrap);
-  _zoomIndicatorEl.style.left = `${rect.left + rect.width / 2}px`;
-  _zoomIndicatorEl.style.top = `${rect.bottom - 32}px`;
-  _zoomIndicatorEl.style.transform = "translateX(-50%)";
-}
-
 /** Toggle "active" class on canvas panel headers based on activeMedia. */
 export function updateActivePanelHeaders() {
   const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;