@jxsuite/studio 0.10.2 → 0.13.0

package/src/canvas/canvas-render.js

@@ -8,6 +8,7 @@ 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 { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import {
   canvasPanelTemplate,
@@ -29,6 +30,7 @@ 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 { computeDocumentDiff } from "./canvas-diff.js";
 import { updateForcedPseudoPreview } from "../panels/pseudo-preview.js";
 import { renderStylebookMode } from "../panels/stylebook-panel.js";
 import { dismissLinkPopover, dismissBlockActionBar } from "../panels/block-action-bar.js";
@@ -49,10 +51,10 @@ let _ctx = null;
  * @param {{
  *   getCanvasMode: () => string;
  *   setCanvasMode: (mode: string) => void;
- *   getState: () => any;
- *   update: (s: any) => void;
  *   openFileFromTree: (path: string) => void;
  *   exportFile: () => void;
+ *   gitDiffState: any;
+ *   setGitDiffState: (state: any) => void;
  * }} ctx
  */
 export function initCanvasRender(ctx) {
@@ -60,7 +62,9 @@ export function initCanvasRender(ctx) {
 }
 
 export function renderCanvas() {
-  const S = _ctx.getState();
+  const tab = activeTab.value;
+  if (!tab) return;
+  const S = { document: tab.doc.document, ui: tab.session.ui, mode: tab.doc.mode };
   const canvasMode = _ctx.getCanvasMode();
 
   // Advance render generation so stale async renders from the previous cycle bail out
@@ -230,7 +234,9 @@ export function renderCanvas() {
       debounce = setTimeout(() => {
         try {
           const parsed = JSON.parse(view.monacoEditor.getValue());
-          _ctx.update({ ..._ctx.getState(), document: parsed, dirty: true });
+          const tab = activeTab.value;
+          tab.doc.document = parsed;
+          tab.doc.dirty = true;
         } catch {
           // Invalid JSON — don't update state
         }
@@ -239,6 +245,75 @@ export function renderCanvas() {
     return;
   }
 
+  // Git diff mode — render original (left) and current (right) side-by-side
+  if (canvasMode === "git-diff") {
+    if (!_ctx.gitDiffState) {
+      // Fallback to design mode if diff state is missing
+      _ctx.setCanvasMode("design");
+      renderCanvas();
+      return;
+    }
+
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "hidden";
+
+    const gitDiffState = _ctx.gitDiffState;
+    const { tpl: origPanelTpl, panel: origPanel } = canvasPanelTemplate(
+      "git-diff-original",
+      "Original",
+      false,
+      "50%",
+    );
+    const { tpl: currPanelTpl, panel: currPanel } = canvasPanelTemplate(
+      "git-diff-current",
+      "Current",
+      false,
+      "50%",
+    );
+
+    const diffTpl = html`
+      <div style="display: flex; height: 100%; gap: 0;">
+        <div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+          ${origPanelTpl}
+        </div>
+        <div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+          ${currPanelTpl}
+        </div>
+      </div>
+    `;
+
+    litRender(diffTpl, canvasWrap);
+    canvasPanels.push(/** @type {any} */ (origPanel));
+    canvasPanels.push(/** @type {any} */ (currPanel));
+
+    // Parse original document from git content
+    let originalDoc = null;
+    try {
+      if (gitDiffState.isMarkdown) {
+        // For markdown, we need to convert it to Jx format
+        // For now, use a simple placeholder until we have markdown parsing
+        originalDoc = {
+          tagName: "div",
+          children: [{ tagName: "p", textContent: "Original (markdown)" }],
+        };
+      } else {
+        // Parse as JSON
+        originalDoc = JSON.parse(gitDiffState.originalContent);
+      }
+    } catch {
+      originalDoc = {
+        tagName: "div",
+        children: [{ tagName: "p", textContent: "Failed to parse original" }],
+      };
+    }
+
+    const currDoc = S.document;
+
+    renderCanvasIntoPanel(origPanel, new Set(), S.ui.featureToggles, originalDoc, gitDiffState);
+    renderCanvasIntoPanel(currPanel, new Set(), S.ui.featureToggles, currDoc, gitDiffState);
+    return;
+  }
+
   // Edit (content) mode — centered column, no panzoom, always 100%
   if (canvasMode === "edit") {
     if (modeChanged) {
@@ -249,14 +324,15 @@ export function renderCanvas() {
       resetZoomIndicator();
     }
 
+    const { baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
     const editTpl = html`
       <div class="content-edit-canvas">
-        <div class="content-edit-column">${panelTpl}</div>
+        <div class="content-edit-column" style="max-width:${baseWidth}px">${panelTpl}</div>
       </div>
     `;
     litRender(editTpl, canvasWrap);
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
     return;
   }
@@ -301,7 +377,7 @@ export function renderCanvas() {
       `,
       canvasWrap,
     );
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), featureToggles);
     applyTransform();
     if (modeChanged) {
@@ -353,7 +429,7 @@ export function renderCanvas() {
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, activeSet, featureToggles);
   }
 
@@ -375,29 +451,51 @@ export function renderCanvas() {
  * structural preview.
  *
  * @param {any} panel
- * @param {any} activeBreakpoints
+ * @param {Set<string>} activeBreakpoints
  * @param {any} featureToggles
+ * @param {any} [docOverride] - Optional document to render (for diff mode). Uses active tab doc if
+ *   not provided.
+ * @param {any} [gitDiffState] - Optional diff state. If provided, computes and applies diff
+ *   highlighting.
  */
-function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
+function renderCanvasIntoPanel(
+  panel,
+  activeBreakpoints,
+  featureToggles,
+  docOverride = null,
+  gitDiffState = null,
+) {
   const gen = view.renderGeneration;
-  const S = _ctx.getState();
-  renderCanvasLive(gen, S.document, panel.canvas).then((/** @type {any} */ scope) => {
+  const tab = activeTab.value;
+  const docToRender = docOverride || tab?.doc.document;
+
+  renderCanvasLive(gen, docToRender, 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);
+
+      // Apply diff highlighting if in git-diff mode
+      if (gitDiffState && docOverride) {
+        // Determine which document is original and which is current
+        const isOriginal = docOverride === (gitDiffState.originalDoc || gitDiffState.original);
+        const origDoc = isOriginal ? docOverride : gitDiffState.currentDoc || tab?.doc.document;
+        const currDoc = isOriginal ? gitDiffState.currentDoc || tab?.doc.document : docOverride;
+
+        const { byPath: diffMap } = computeDocumentDiff(origDoc, currDoc);
+
+        // Can't iterate WeakMap, so apply styling by walking the canvas
+        const { elToPath } = scope;
+        if (elToPath instanceof WeakMap) {
+          applyDiffHighlightToCanvas(panel.canvas, diffMap);
+        }
+      }
     } else {
       // Fallback to structural preview
       updateCanvas({ status: "ready", scope: null, error: null });
-      renderCanvasNode(
-        _ctx.getState().document,
-        [],
-        panel.canvas,
-        activeBreakpoints,
-        featureToggles,
-      );
+      renderCanvasNode(docToRender, [], panel.canvas, activeBreakpoints, featureToggles);
     }
     registerPanelDnD(panel);
     registerPanelEvents(panel);
@@ -406,6 +504,40 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
   });
 }
 
+/**
+ * Apply diff highlighting to canvas elements based on elToPath mapping. Walks the canvas DOM and
+ * applies classes based on diff status.
+ *
+ * @param {HTMLElement} canvas
+ * @param {Map<string, "added" | "removed" | "modified">} diffMap
+ */
+function applyDiffHighlightToCanvas(canvas, diffMap) {
+  if (!diffMap || diffMap.size === 0) return;
+
+  // Walk all elements in canvas and check their data attributes or other markers
+  const walkCanvas = (/** @type {HTMLElement} */ el, /** @type {string} */ path = "") => {
+    const pathKey = path || "/";
+
+    if (diffMap.has(pathKey)) {
+      const status = diffMap.get(pathKey);
+      if (status === "added") el.classList.add("element-diff-added");
+      else if (status === "removed") el.classList.add("element-diff-removed");
+      else if (status === "modified") el.classList.add("element-diff-modified");
+    }
+
+    // Check for child elements (heuristic: children array markers)
+    let childIdx = 0;
+    for (const child of el.children) {
+      const childPath =
+        pathKey === "/" ? `children/${childIdx}` : `${pathKey}/children/${childIdx}`;
+      walkCanvas(/** @type {HTMLElement} */ (child), childPath);
+      childIdx++;
+    }
+  };
+
+  walkCanvas(canvas, "");
+}
+
 /**
  * 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
@@ -416,8 +548,9 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
  */
 function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
   if (!activeBreakpoints.size) return;
-  const S = _ctx.getState();
-  const docMedia = getEffectiveMedia(S.document.$media || {});
+  const tab = activeTab.value;
+  if (!tab) return;
+  const docMedia = getEffectiveMedia(tab.doc.document.$media || {});
   const validBreakpoints = new Set();
   for (const name of activeBreakpoints) {
     if (docMedia[name]) validBreakpoints.add(name);

package/src/canvas/canvas-utils.js

@@ -8,8 +8,8 @@ import { ref } from "lit-html/directives/ref.js";
 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 { renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 
 /** @type {any} */
@@ -44,14 +44,14 @@ export function initCanvasUtils(ctx) {
 export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
   /**
    * @type {{
-   *   mediaName: any;
-   *   element: Element | null;
-   *   canvas: Element | null;
-   *   overlay: Element | null;
-   *   overlayClk: Element | null;
-   *   viewport: Element | null;
-   *   dropLine: Element | null;
-   *   _width: any;
+   *   mediaName: string;
+   *   element: HTMLElement | null;
+   *   canvas: HTMLElement | null;
+   *   overlay: HTMLElement | null;
+   *   overlayClk: HTMLElement | null;
+   *   viewport: HTMLElement | null;
+   *   dropLine: HTMLElement | null;
+   *   _width: number | null;
    * }}
    */
   const panel = {
@@ -69,7 +69,7 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
       class=${`canvas-panel${fullWidth ? " full-width" : ""}`}
       data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
       ${ref((el) => {
-        if (el) panel.element = el;
+        if (el) panel.element = /** @type {HTMLElement} */ (el);
       })}
     >
       ${label
@@ -88,34 +88,34 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
         class="canvas-panel-viewport"
         style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
         ${ref((el) => {
-          if (el) panel.viewport = el;
+          if (el) panel.viewport = /** @type {HTMLElement} */ (el);
         })}
       >
         <div
           class="canvas-panel-canvas"
           style=${styleMap({ width: width ? `${width}px` : "" })}
           ${ref((el) => {
-            if (el) panel.canvas = el;
+            if (el) panel.canvas = /** @type {HTMLElement} */ (el);
           })}
         ></div>
         <div
           class="canvas-panel-overlay"
           ${ref((el) => {
-            if (el) panel.overlay = el;
+            if (el) panel.overlay = /** @type {HTMLElement} */ (el);
           })}
         >
           <div
             class="canvas-drop-indicator"
             style="display:none"
             ${ref((el) => {
-              if (el) panel.dropLine = el;
+              if (el) panel.dropLine = /** @type {HTMLElement} */ (el);
             })}
           ></div>
         </div>
         <div
           class="canvas-panel-click"
           ${ref((el) => {
-            if (el) panel.overlayClk = el;
+            if (el) panel.overlayClk = /** @type {HTMLElement} */ (el);
           })}
         ></div>
       </div>
@@ -207,7 +207,6 @@ export function fitToScreen() {
 
 /** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
 export function resetZoomIndicator() {
-  ensureLitState(zoomIndicatorHost);
   litRender(nothing, zoomIndicatorHost);
 }
 
@@ -220,7 +219,6 @@ export function renderZoomIndicator() {
   if (!zoomIndicatorHost.isConnected) {
     document.body.appendChild(zoomIndicatorHost);
   }
-  ensureLitState(zoomIndicatorHost);
   litRender(
     html`
       <div class="zoom-indicator">
@@ -263,14 +261,14 @@ export function positionZoomIndicator() {
 
 /** Toggle "active" class on canvas panel headers based on activeMedia. */
 export function updateActivePanelHeaders() {
-  const S = getState();
+  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    const header = p.element.querySelector(".canvas-panel-header");
+    const header = p.element?.querySelector(".canvas-panel-header");
     if (header) {
       const isActive =
-        (S.ui.activeMedia === null && p.mediaName === "base") ||
-        (S.ui.activeMedia === null && p.mediaName === null) ||
-        S.ui.activeMedia === p.mediaName;
+        (activeMedia === null && p.mediaName === "base") ||
+        (activeMedia === null && p.mediaName === null) ||
+        activeMedia === p.mediaName;
       header.classList.toggle("active", isActive);
     }
   }

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

@@ -5,19 +5,21 @@
 
 import {
   getState,
-  update,
   updateUi,
   renderOnly,
   getNodeAtPath,
-  selectNode,
-  removeNode,
-  insertNode,
-  updateProperty,
   parentElementPath,
   childIndex,
   canvasPanels,
   elToPath,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import {
+  transactDoc,
+  mutateRemoveNode,
+  mutateInsertNode,
+  mutateUpdateProperty,
+} from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.js";
 import { renderBlockActionBar } from "../panels/block-action-bar.js";
@@ -59,7 +61,9 @@ export function enterComponentInlineEdit(el, path) {
   if (voids.has(node.tagName)) return;
 
   for (const p of canvasPanels) {
-    const boxes = p.overlay.querySelectorAll(".overlay-box");
+    const boxes = /** @type {NodeListOf<HTMLElement>} */ (
+      p.overlay.querySelectorAll(".overlay-box")
+    );
     for (const box of boxes) {
       box.style.border = "none";
     }
@@ -104,10 +108,11 @@ export function enterComponentInlineEdit(el, path) {
     if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
     document.removeEventListener("mousedown", outsideHandler, true);
 
+    /** @type {(string | number)[] | null} */
     let hitPath = null,
       hitMedia = null;
     for (const p of canvasPanels) {
-      const els = p.canvas.querySelectorAll("*");
+      const els = /** @type {NodeListOf<HTMLElement>} */ (p.canvas.querySelectorAll("*"));
       for (const el of els) el.style.pointerEvents = "auto";
       p.overlayClk.style.display = "none";
       const found = document.elementsFromPoint(evt.clientX, evt.clientY);
@@ -132,37 +137,44 @@ export function enterComponentInlineEdit(el, path) {
 
     const isEmpty = !newText;
     const pPath = parentElementPath(editPath);
-    const S = getState();
 
     if (hitPath) {
+      let hp = hitPath;
       const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
-      const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
+      updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+      activeTab.value.session.ui.activeMedia = media;
       if (isEmpty && pPath) {
-        let s = removeNode(withMedia, editPath);
-        const removedIdx = /** @type {number} */ (childIndex(editPath));
-        const hitIdx = /** @type {number} */ (childIndex(hitPath));
-        const hitParent = parentElementPath(hitPath);
-        if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
-          hitPath = [...pPath, "children", hitIdx - 1];
-          updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
-        }
-        update(selectNode(s, hitPath));
+        transactDoc(activeTab.value, (t) => {
+          mutateRemoveNode(t, editPath);
+          const removedIdx = /** @type {number} */ (childIndex(editPath));
+          const hitIdx = /** @type {number} */ (childIndex(hp));
+          const hitParent = parentElementPath(hp);
+          if (
+            hitParent &&
+            pPath &&
+            hitParent.join("/") === pPath.join("/") &&
+            hitIdx > removedIdx
+          ) {
+            hp = [...pPath, "children", hitIdx - 1];
+            updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+          }
+          t.session.selection = hp;
+        });
       } else if (newText !== originalText) {
-        update(
-          selectNode(
-            updateProperty(withMedia, editPath, "textContent", newText || undefined),
-            hitPath,
-          ),
-        );
+        transactDoc(activeTab.value, (t) => {
+          mutateUpdateProperty(t, editPath, "textContent", newText || undefined);
+          t.session.selection = hp;
+        });
       } else {
-        update(selectNode(withMedia, hitPath));
+        activeTab.value.session.selection = hp;
       }
     } else {
       if (isEmpty && pPath) {
-        update(removeNode(S, editPath));
+        transactDoc(activeTab.value, (t) => mutateRemoveNode(t, editPath));
       } else if (newText !== originalText) {
-        update(updateProperty(S, editPath, "textContent", newText || undefined));
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateProperty(t, editPath, "textContent", newText || undefined),
+        );
       } else {
         renderOnly("canvas");
         renderOnly("overlays");
@@ -219,13 +231,13 @@ function splitParagraph() {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
-  let s = updateProperty(S, path, "textContent", textBefore || undefined);
-  s = insertNode(s, pPath, idx + 1, newDef);
-  s = selectNode(s, newPath);
+  transactDoc(activeTab.value, (t) => {
+    mutateUpdateProperty(t, path, "textContent", textBefore || undefined);
+    mutateInsertNode(t, pPath, idx + 1, newDef);
+    t.session.selection = newPath;
+  });
 
   updateUi("pendingInlineEdit", { path: newPath, mediaName });
-  update(s);
 }
 
 function _commitComponentInlineEdit() {
@@ -235,12 +247,13 @@ function _commitComponentInlineEdit() {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
   const pPath = parentElementPath(path);
   if (!newText && pPath) {
-    update(removeNode(S, path));
+    transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path));
   } else if (newText !== originalText) {
-    update(updateProperty(S, path, "textContent", newText || undefined));
+    transactDoc(activeTab.value, (t) =>
+      mutateUpdateProperty(t, path, "textContent", newText || undefined),
+    );
   } else {
     renderOnly("canvas");
     renderOnly("overlays");
@@ -303,15 +316,15 @@ function handleComponentSlashSelect(cmd) {
 
   cleanupComponentInlineEdit(el);
 
-  const S = getState();
   const newDef = defaultDef(cmd.tag);
   const newPath = [...pPath, "children", idx];
 
-  let s = removeNode(S, path);
-  s = insertNode(s, pPath, idx, newDef);
-  s = selectNode(s, newPath);
+  transactDoc(activeTab.value, (t) => {
+    mutateRemoveNode(t, path);
+    mutateInsertNode(t, pPath, idx, newDef);
+    t.session.selection = newPath;
+  });
 
   const hasText = newDef.textContent != null;
   if (hasText) updateUi("pendingInlineEdit", { path: newPath, mediaName });
-  update(s);
 }