@jxsuite/studio 0.9.0 → 0.10.1

package/src/canvas/canvas-render.js

@@ -0,0 +1,429 @@
+/**
+ * Canvas render — extracted from studio.js (Phase 4o). Multi-mode canvas rendering orchestrator:
+ * dispatches to manage/settings/source/edit/design/preview rendering paths.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+
+import { canvasWrap, canvasPanels, updateCanvas } from "../store.js";
+import { view } from "../view.js";
+import {
+  canvasPanelTemplate,
+  applyTransform,
+  observeCenterUntilStable,
+  renderZoomIndicator,
+  resetZoomIndicator,
+  updateActivePanelHeaders,
+} from "./canvas-utils.js";
+import { effectiveZoom, overlayBoxDescriptor } from "./canvas-helpers.js";
+import {
+  parseMediaEntries,
+  activeBreakpointsForWidth,
+  collectMediaOverrides,
+  applyOverridesToCanvas,
+} from "../utils/canvas-media.js";
+import { getEffectiveMedia } from "../site-context.js";
+import { renderCanvasLive } from "./canvas-live-render.js";
+import { renderCanvasNode } from "../panels/preview-render.js";
+import { registerPanelDnD } from "../panels/canvas-dnd.js";
+import { registerPanelEvents } from "../panels/panel-events.js";
+import { updateForcedPseudoPreview } from "../panels/pseudo-preview.js";
+import { renderStylebookMode } from "../panels/stylebook-panel.js";
+import { dismissLinkPopover, dismissBlockActionBar } from "../panels/block-action-bar.js";
+import { dismissContextMenu } from "../editor/context-menu.js";
+import { dismissSlashMenu } from "../editor/slash-menu.js";
+import { renderBrowse } from "../browse/browse.js";
+import { renderFunctionEditor } from "../panels/editors.js";
+import { mediaDisplayName } from "../panels/shared.js";
+import { statusMessage } from "../panels/statusbar.js";
+import * as overlaysPanel from "../panels/overlays.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the canvas render module.
+ *
+ * @param {{
+ *   getCanvasMode: () => string;
+ *   setCanvasMode: (mode: string) => void;
+ *   getState: () => any;
+ *   update: (s: any) => void;
+ *   openFileFromTree: (path: string) => void;
+ *   exportFile: () => void;
+ * }} ctx
+ */
+export function initCanvasRender(ctx) {
+  _ctx = ctx;
+}
+
+export function renderCanvas() {
+  const S = _ctx.getState();
+  const canvasMode = _ctx.getCanvasMode();
+
+  // Advance render generation so stale async renders from the previous cycle bail out
+  ++view.renderGeneration;
+
+  // Always clear Lit's internal state so it builds fresh DOM. Stale async
+  // renderCanvasLive calls from a previous cycle can corrupt nested ChildPart
+  // markers (Comment nodes inside panzoom-wrap) in ways the root-only
+  // ensureLitState check cannot detect.
+  // @ts-ignore
+  if (canvasWrap["_$litPart$"]) {
+    canvasWrap.textContent = "";
+    // @ts-ignore
+    delete canvasWrap["_$litPart$"];
+  }
+
+  // Function editor mode: editing a function body in Monaco (JS)
+  if (S.ui.editingFunction) {
+    renderFunctionEditor();
+    return;
+  }
+
+  // Dispose function editor if switching away
+  if (view.functionEditor) {
+    view.functionEditor.dispose();
+    view.functionEditor = null;
+  }
+
+  // Source mode: update existing Monaco editor without recreating
+  if (canvasMode === "source" && view.monacoEditor) {
+    const jsonStr = JSON.stringify(S.document, null, 2);
+    const currentVal = view.monacoEditor.getValue();
+    if (currentVal !== jsonStr) {
+      view.monacoEditor._ignoreNextChange = true;
+      view.monacoEditor.setValue(jsonStr);
+    }
+    return;
+  }
+
+  // Detect whether this is a mode transition or a content-only re-render
+  const modeChanged = canvasMode !== view.prevCanvasMode;
+  view.prevCanvasMode = canvasMode;
+
+  // DnD handlers are registered on inner canvas elements that get replaced on every
+  // content render, so always clean them up.
+  for (const fn of view.canvasDndCleanups) fn();
+  view.canvasDndCleanups = [];
+
+  // Panel event handlers (click, dblclick, etc.) capture closures over panel references.
+  // Always re-register to keep closures fresh across document switches.
+  for (const fn of view.canvasEventCleanups) fn();
+  view.canvasEventCleanups = [];
+
+  // Panel JS objects are cheap — always clear and repopulate from templates.
+  // The actual DOM elements are preserved by Lit's diffing on content-only re-renders.
+  canvasPanels.length = 0;
+
+  if (modeChanged) {
+    // Full teardown on mode transitions — new panel structure needed
+    if (view.centerObserver) {
+      view.centerObserver.disconnect();
+      view.centerObserver = null;
+    }
+
+    // Dispose Monaco editor if switching away from source mode
+    if (view.monacoEditor) {
+      view.monacoEditor.dispose();
+      view.monacoEditor = null;
+    }
+
+    litRender(nothing, canvasWrap);
+    view.panzoomWrap = null;
+    // Reset inline style overrides from other modes
+    canvasWrap.style.padding = "";
+    canvasWrap.style.alignItems = "";
+    canvasWrap.style.display = "";
+    canvasWrap.style.overflow = "";
+    canvasWrap.style.overflow = "";
+
+    // Clear zoom indicator (only re-rendered by design/preview/stylebook)
+    resetZoomIndicator();
+
+    // Dismiss open popovers/toolbars that are no longer relevant
+    dismissBlockActionBar();
+    dismissLinkPopover();
+    dismissContextMenu();
+    dismissSlashMenu();
+  }
+
+  // Manage mode: project-level file browser table
+  if (canvasMode === "manage") {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "auto";
+    renderBrowse(canvasWrap, {
+      openFile: (/** @type {string} */ path) => {
+        _ctx.setCanvasMode("edit");
+        _ctx.openFileFromTree(path);
+      },
+    });
+    return;
+  }
+
+  // Settings mode: render element catalog with panzoom surface
+  if (canvasMode === "settings") {
+    renderStylebookMode({
+      canvasPanelTemplate,
+      applyTransform,
+      observeCenterUntilStable,
+      renderZoomIndicator,
+      updateActivePanelHeaders,
+      overlayBoxDescriptor,
+      effectiveZoom,
+    });
+    return;
+  }
+
+  // Source mode: create Monaco editor instead of canvas
+  if (canvasMode === "source") {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.display = "block";
+    /** @type {HTMLDivElement | null} */
+    let editorContainer = null;
+    litRender(
+      html`<div class="source-wrap">
+        <div class="source-toolbar">
+          <sp-action-button size="s" @click=${_ctx.exportFile}>
+            <sp-icon-export slot="icon"></sp-icon-export>
+            Export
+          </sp-action-button>
+        </div>
+        <div
+          class="source-editor"
+          ${ref((el) => {
+            if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
+          })}
+        ></div>
+      </div>`,
+      canvasWrap,
+    );
+
+    const jsonStr = JSON.stringify(S.document, null, 2);
+    view.monacoEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
+      value: jsonStr,
+      language: "json",
+      theme: "vs-dark",
+      automaticLayout: true,
+      minimap: { enabled: false },
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+      lineNumbers: "on",
+      scrollBeyondLastLine: false,
+      wordWrap: "on",
+      tabSize: 2,
+    });
+
+    // Debounced sync back to state
+    /** @type {any} */
+    let debounce;
+    view.monacoEditor.onDidChangeModelContent(() => {
+      if (view.monacoEditor._ignoreNextChange) {
+        view.monacoEditor._ignoreNextChange = false;
+        return;
+      }
+      clearTimeout(debounce);
+      debounce = setTimeout(() => {
+        try {
+          const parsed = JSON.parse(view.monacoEditor.getValue());
+          _ctx.update({ ..._ctx.getState(), document: parsed, dirty: true });
+        } catch {
+          // Invalid JSON — don't update state
+        }
+      }, 600);
+    });
+    return;
+  }
+
+  // Edit (content) mode — centered column, no panzoom, always 100%
+  if (canvasMode === "edit") {
+    if (modeChanged) {
+      canvasWrap.style.padding = "0";
+      canvasWrap.style.overflow = "hidden";
+
+      // Remove zoom indicator left over from design/preview mode
+      resetZoomIndicator();
+    }
+
+    const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
+    const editTpl = html`
+      <div class="content-edit-canvas">
+        <div class="content-edit-column">${panelTpl}</div>
+      </div>
+    `;
+    litRender(editTpl, canvasWrap);
+    canvasPanels.push(panel);
+    renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
+    return;
+  }
+
+  // Normal canvas mode (design / preview) — set up panzoom surface
+  if (modeChanged) {
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "hidden";
+  }
+
+  const {
+    sizeBreakpoints,
+    featureQueries: _featureQueries,
+    baseWidth,
+  } = parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const hasMedia = sizeBreakpoints.length > 0;
+  const featureToggles = S.ui.featureToggles;
+
+  // Create panzoom wrapper (the element that gets transformed)
+  if (!hasMedia) {
+    // Single panel — use baseWidth if a custom one is defined, otherwise full-width
+    const effectiveMedia = getEffectiveMedia(S.document.$media);
+    const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
+    const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
+    const { tpl: panelTpl, panel } = canvasPanelTemplate(
+      hasBaseWidth ? "base" : null,
+      label,
+      !hasBaseWidth,
+      hasBaseWidth ? baseWidth : undefined,
+    );
+    litRender(
+      html`
+        <div
+          class="panzoom-wrap"
+          style="transform-origin:0 0"
+          ${ref((el) => {
+            if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
+          })}
+        >
+          ${panelTpl}
+        </div>
+      `,
+      canvasWrap,
+    );
+    canvasPanels.push(panel);
+    renderCanvasIntoPanel(panel, new Set(), featureToggles);
+    applyTransform();
+    if (modeChanged) {
+      observeCenterUntilStable();
+    }
+    renderZoomIndicator();
+    return;
+  }
+
+  // Build all panels: base first, then breakpoints in declared order (ascending for min-width,
+  // descending for max-width — matching the direction of the design's media queries).
+  const allPanelDefs = [
+    {
+      name: "base",
+      displayName: mediaDisplayName("--"),
+      width: baseWidth,
+      activeSet: activeBreakpointsForWidth(sizeBreakpoints, baseWidth),
+    },
+  ];
+  for (const bp of sizeBreakpoints) {
+    allPanelDefs.push({
+      name: bp.name,
+      displayName: mediaDisplayName(bp.name),
+      width: bp.width,
+      activeSet: activeBreakpointsForWidth(sizeBreakpoints, bp.width),
+    });
+  }
+
+  /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
+  const panelEntries = allPanelDefs.map((def) => {
+    const label = `${def.displayName} (${def.width}px)`;
+    const { tpl, panel } = canvasPanelTemplate(def.name, label, false, def.width);
+    return { tpl, panel, activeSet: def.activeSet };
+  });
+
+  litRender(
+    html`
+      <div
+        class="panzoom-wrap"
+        style="transform-origin:0 0"
+        ${ref((el) => {
+          if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
+        })}
+      >
+        ${panelEntries.map((e) => e.tpl)}
+      </div>
+    `,
+    canvasWrap,
+  );
+
+  for (const { panel, activeSet } of panelEntries) {
+    canvasPanels.push(panel);
+    renderCanvasIntoPanel(panel, activeSet, featureToggles);
+  }
+
+  // Highlight active panel header
+  updateActivePanelHeaders();
+
+  // Apply current zoom + pan transform
+  applyTransform();
+  if (modeChanged) {
+    observeCenterUntilStable();
+  }
+
+  // Floating zoom indicator
+  renderZoomIndicator();
+}
+
+/**
+ * Render document into a single canvas panel. Tries runtime rendering first, falls back to
+ * structural preview.
+ *
+ * @param {any} panel
+ * @param {any} activeBreakpoints
+ * @param {any} featureToggles
+ */
+function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
+  const gen = view.renderGeneration;
+  const S = _ctx.getState();
+  renderCanvasLive(gen, S.document, panel.canvas).then((/** @type {any} */ scope) => {
+    // Skip post-render setup if a newer render has started
+    if (gen !== view.renderGeneration) return;
+    if (scope) {
+      updateCanvas({ status: "ready", scope, error: null });
+      applyCanvasMediaOverrides(panel.canvas, activeBreakpoints);
+      statusMessage("Runtime render OK", 1500);
+    } else {
+      // Fallback to structural preview
+      updateCanvas({ status: "ready", scope: null, error: null });
+      renderCanvasNode(
+        _ctx.getState().document,
+        [],
+        panel.canvas,
+        activeBreakpoints,
+        featureToggles,
+      );
+    }
+    registerPanelDnD(panel);
+    registerPanelEvents(panel);
+    renderOverlays();
+    updateForcedPseudoPreview();
+  });
+}
+
+/**
+ * Apply media query overrides as inline styles on matching canvas elements. Needed because the
+ * runtime renders base styles as inline — @media CSS rules in the injected stylesheet can't win
+ * against inline specificity.
+ *
+ * @param {Element} canvasEl
+ * @param {Set<string>} activeBreakpoints
+ */
+function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
+  if (!activeBreakpoints.size) return;
+  const S = _ctx.getState();
+  const docMedia = getEffectiveMedia(S.document.$media || {});
+  const validBreakpoints = new Set();
+  for (const name of activeBreakpoints) {
+    if (docMedia[name]) validBreakpoints.add(name);
+  }
+  const overrides = collectMediaOverrides(document.styleSheets, validBreakpoints);
+  applyOverridesToCanvas(canvasEl, overrides);
+}
+
+export function renderOverlays() {
+  overlaysPanel.render();
+}

package/src/canvas/canvas-utils.js

@@ -9,6 +9,7 @@ import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 
 import { getState, renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
+import { ensureLitState } from "../panels/shared.js";
 import { view } from "../view.js";
 
 /** @type {any} */
@@ -206,14 +207,8 @@ export function fitToScreen() {
 
 /** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
 export function resetZoomIndicator() {
-  try {
-    litRender(nothing, zoomIndicatorHost);
-  } catch {
-    const newHost = document.createElement("div");
-    newHost.style.display = "contents";
-    zoomIndicatorHost.replaceWith(newHost);
-    zoomIndicatorHost = newHost;
-  }
+  ensureLitState(zoomIndicatorHost);
+  litRender(nothing, zoomIndicatorHost);
 }
 
 /**
@@ -221,69 +216,38 @@ export function resetZoomIndicator() {
  * computed from canvas-wrap bounds.
  */
 export function renderZoomIndicator() {
-  if (!zoomIndicatorHost.isConnected) document.body.appendChild(zoomIndicatorHost);
   const zoom = _ctx.getZoom();
-  try {
-    litRender(
-      html`
-        <div class="zoom-indicator">
-          <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
-          <sp-action-button
-            quiet
-            size="s"
-            class="zoom-fit-btn"
-            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>
-          </sp-action-button>
-        </div>
-      `,
-      zoomIndicatorHost,
-    );
-  } catch {
-    const newHost = document.createElement("div");
-    newHost.style.display = "contents";
-    zoomIndicatorHost.replaceWith(newHost);
-    zoomIndicatorHost = newHost;
-    litRender(
-      html`
-        <div class="zoom-indicator">
-          <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
-          <sp-action-button
-            quiet
-            size="s"
-            class="zoom-fit-btn"
-            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>
-          </sp-action-button>
-        </div>
-      `,
-      zoomIndicatorHost,
-    );
+  if (!zoomIndicatorHost.isConnected) {
+    document.body.appendChild(zoomIndicatorHost);
   }
+  ensureLitState(zoomIndicatorHost);
+  litRender(
+    html`
+      <div class="zoom-indicator">
+        <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
+        <sp-action-button
+          quiet
+          size="s"
+          class="zoom-fit-btn"
+          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>
+        </sp-action-button>
+      </div>
+    `,
+    zoomIndicatorHost,
+  );
   positionZoomIndicator();
 }
 

package/src/editor/component-inline-edit.js

@@ -6,6 +6,7 @@
 import {
   getState,
   update,
+  updateUi,
   renderOnly,
   getNodeAtPath,
   selectNode,
@@ -135,7 +136,7 @@ export function enterComponentInlineEdit(el, path) {
 
     if (hitPath) {
       const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+      updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
       const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
       if (isEmpty && pPath) {
         let s = removeNode(withMedia, editPath);
@@ -144,7 +145,7 @@ export function enterComponentInlineEdit(el, path) {
         const hitParent = parentElementPath(hitPath);
         if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
           hitPath = [...pPath, "children", hitIdx - 1];
-          view.pendingInlineEdit = { path: hitPath, mediaName: hitMedia };
+          updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
         }
         update(selectNode(s, hitPath));
       } else if (newText !== originalText) {
@@ -223,7 +224,7 @@ function splitParagraph() {
   s = insertNode(s, pPath, idx + 1, newDef);
   s = selectNode(s, newPath);
 
-  view.pendingInlineEdit = { path: newPath, mediaName };
+  updateUi("pendingInlineEdit", { path: newPath, mediaName });
   update(s);
 }
 
@@ -311,6 +312,6 @@ function handleComponentSlashSelect(cmd) {
   s = selectNode(s, newPath);
 
   const hasText = newDef.textContent != null;
-  if (hasText) view.pendingInlineEdit = { path: newPath, mediaName };
+  if (hasText) updateUi("pendingInlineEdit", { path: newPath, mediaName });
   update(s);
 }

package/src/editor/content-inline-edit.js

@@ -10,6 +10,7 @@ import {
   selectNode,
   insertNode,
   updateProperty,
+  getNodeAtPath,
   parentElementPath,
   childIndex,
   canvasPanels,
@@ -19,18 +20,7 @@ import { startEditing, isEditableBlock } from "./inline-edit.js";
 import { restoreTemplateExpressions } from "../utils/edit-display.js";
 import { renderBlockActionBar } from "../panels/block-action-bar.js";
 import { defaultDef } from "../panels/shared.js";
-
-/** @type {any} */
-let _ctx = null;
-
-/**
- * Initialize the content inline edit module.
- *
- * @param {{ findCanvasElement: Function; getActivePanel: Function }} ctx
- */
-export function initContentInlineEdit(ctx) {
-  _ctx = ctx;
-}
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
 /**
  * Enter rich-text inline editing on a canvas element (edit/content mode).
@@ -57,11 +47,14 @@ export function enterInlineEdit(el, path) {
       /** @type {any} */ textContent,
     ) {
       const S = getState();
+      const node = getNodeAtPath(S.document, commitPath);
       if (children) {
+        if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
         let s = updateProperty(S, commitPath, "textContent", undefined);
         s = updateProperty(s, commitPath, "children", children);
         update(s);
       } else if (textContent != null) {
+        if (node && node.textContent === textContent && !node.children) return;
         let s = updateProperty(S, commitPath, "children", undefined);
         s = updateProperty(s, commitPath, "textContent", textContent);
         update(s);
@@ -100,9 +93,9 @@ export function enterInlineEdit(el, path) {
 
       // Re-enter editing on the new element after render
       requestAnimationFrame(() => {
-        const activePanel = _ctx.getActivePanel();
+        const activePanel = getActivePanel();
         if (activePanel) {
-          const newEl = _ctx.findCanvasElement(newPath, activePanel.canvas);
+          const newEl = findCanvasElement(newPath, activePanel.canvas);
           if (newEl && isEditableBlock(newEl)) {
             enterInlineEdit(newEl, newPath);
             // Place cursor at start of new element
@@ -145,9 +138,9 @@ export function enterInlineEdit(el, path) {
         update(s);
 
         requestAnimationFrame(() => {
-          const activePanel = _ctx.getActivePanel();
+          const activePanel = getActivePanel();
           if (activePanel) {
-            const el = _ctx.findCanvasElement(afterPath, activePanel.canvas);
+            const el = findCanvasElement(afterPath, activePanel.canvas);
             if (el && isEditableBlock(el)) {
               enterInlineEdit(el, afterPath);
             }
@@ -179,9 +172,9 @@ export function enterInlineEdit(el, path) {
 
       // If the inserted element is editable, enter editing
       requestAnimationFrame(() => {
-        const activePanel = _ctx.getActivePanel();
+        const activePanel = getActivePanel();
         if (activePanel) {
-          const newEl = _ctx.findCanvasElement(newPath, activePanel.canvas);
+          const newEl = findCanvasElement(newPath, activePanel.canvas);
           if (newEl && isEditableBlock(newEl)) {
             enterInlineEdit(newEl, newPath);
           }