@jxsuite/studio 0.11.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.10.2",
+    "@jxsuite/runtime": "^0.12.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -60,6 +60,7 @@
     "@spectrum-web-components/theme": "^1.12.1",
     "@spectrum-web-components/toast": "^1.12.1",
     "@spectrum-web-components/tooltip": "^1.12.1",
+    "@vue/reactivity": "3.5.34",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",
@@ -75,5 +76,6 @@
     "@webref/css": "^8.5.6",
     "@webref/elements": "^2.7.1",
     "@webref/idl": "^3.78.0"
-  }
+  },
+  "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/canvas/canvas-diff.js

@@ -0,0 +1,184 @@
+/**
+ * Canvas Diff — computes visual diff between original and current Jx documents.
+ *
+ * Compares two document trees recursively, marking nodes as added/removed/modified, and propagates
+ * "modified" status up the tree for structural changes (children added/removed/reordered).
+ */
+
+/**
+ * @typedef {Record<string, any>} JxNode
+ *
+ * @typedef {"added" | "removed" | "modified"} DiffStatus
+ *
+ * @typedef {{ byPath: Map<string, DiffStatus>; allPaths: Set<string> }} DiffResult
+ */
+
+/**
+ * Deep equality check for two values. Ignores function and ref properties.
+ *
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  if (Array.isArray(a)) {
+    if (a.length !== b.length) return false;
+    return a.every((/** @type {any} */ v, /** @type {number} */ i) => valuesEqual(v, b[i]));
+  }
+
+  const keysA = Object.keys(a).filter(
+    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
+  );
+  const keysB = Object.keys(b).filter(
+    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
+  );
+
+  if (keysA.length !== keysB.length) return false;
+  if (!keysA.every((/** @type {string} */ k) => keysB.includes(k))) return false;
+
+  return keysA.every((/** @type {string} */ k) => valuesEqual(a[k], b[k]));
+}
+
+/**
+ * Filter element children from a node's children array.
+ *
+ * @param {any} node
+ * @returns {any[]}
+ */
+function elementChildren(node) {
+  if (!node?.children || !Array.isArray(node.children)) return [];
+  return node.children.filter((/** @type {any} */ c) => c != null && typeof c === "object");
+}
+
+/**
+ * Mark an entire subtree with a diff status.
+ *
+ * @param {any} node
+ * @param {DiffStatus} status
+ * @param {string} path
+ * @param {Map<string, DiffStatus>} diffMap
+ * @param {Set<string>} allPaths
+ */
+function markRecursive(node, status, path, diffMap, allPaths) {
+  allPaths.add(path);
+  diffMap.set(path, status);
+  const children = elementChildren(node);
+  for (let i = 0; i < children.length; i++) {
+    const childPath = `${path}/children/${i}`;
+    markRecursive(children[i], status, childPath, diffMap, allPaths);
+  }
+}
+
+/**
+ * Compute structural diff between original and current documents.
+ *
+ * @param {any} originalDoc - Original document (from git)
+ * @param {any} currentDoc - Current document (in memory/on disk)
+ * @returns {DiffResult}
+ */
+export function computeDocumentDiff(originalDoc, currentDoc) {
+  /** @type {Map<string, DiffStatus>} */
+  const diffMap = new Map();
+  /** @type {Set<string>} */
+  const allPaths = new Set();
+
+  /**
+   * Walk both trees in parallel and mark differences.
+   *
+   * @param {any} origNode
+   * @param {any} currNode
+   * @param {string} path
+   */
+  const walk = (origNode, currNode, path = "") => {
+    const pathKey = path || "/";
+    allPaths.add(pathKey);
+
+    // Both exist but differ
+    if (origNode != null && currNode != null) {
+      if (!valuesEqual(origNode, currNode)) {
+        diffMap.set(pathKey, "modified");
+      }
+
+      // Walk children
+      if (origNode.children && currNode.children) {
+        const origChildren = elementChildren(origNode);
+        const currChildren = elementChildren(currNode);
+
+        for (let i = 0; i < Math.max(origChildren.length, currChildren.length); i++) {
+          const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+          walk(origChildren[i], currChildren[i], childPath);
+        }
+      }
+      return;
+    }
+
+    // In current only (added)
+    if (currNode != null && origNode == null) {
+      diffMap.set(pathKey, "added");
+      const children = elementChildren(currNode);
+      for (let i = 0; i < children.length; i++) {
+        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+        markRecursive(children[i], "added", childPath, diffMap, allPaths);
+      }
+      return;
+    }
+
+    // In original only (removed)
+    if (origNode != null && currNode == null) {
+      diffMap.set(pathKey, "removed");
+      const children = elementChildren(origNode);
+      for (let i = 0; i < children.length; i++) {
+        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+        markRecursive(children[i], "removed", childPath, diffMap, allPaths);
+      }
+      return;
+    }
+  };
+
+  // Start comparison
+  walk(originalDoc, currentDoc, "");
+
+  // Propagate "modified" status to parents of added/removed children
+  const propagateModified = () => {
+    let changed = false;
+    for (const [path, status] of diffMap.entries()) {
+      if ((status === "added" || status === "removed") && path !== "/") {
+        const parentPath = path.split("/").slice(0, -2).join("/") || "/";
+        if (parentPath !== "/") {
+          const parentStatus = diffMap.get(parentPath);
+          if (
+            parentStatus !== "modified" &&
+            parentStatus !== "added" &&
+            parentStatus !== "removed"
+          ) {
+            diffMap.set(parentPath, "modified");
+            changed = true;
+          }
+        }
+      }
+    }
+    return changed;
+  };
+
+  // Propagate upwards until no more changes
+  while (propagateModified()) {}
+
+  return { byPath: diffMap, allPaths };
+}
+
+/**
+ * Clear diff highlighting from all elements in a canvas.
+ *
+ * @param {HTMLElement} canvas
+ */
+export function clearDiffHighlight(canvas) {
+  canvas
+    .querySelectorAll(".element-diff-added, .element-diff-removed, .element-diff-modified")
+    .forEach((/** @type {Element} */ el) => {
+      el.classList.remove("element-diff-added", "element-diff-removed", "element-diff-modified");
+    });
+}

package/src/canvas/canvas-helpers.js

@@ -3,14 +3,8 @@
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import {
-  getState,
-  canvasPanels,
-  elToPath,
-  pathsEqual,
-  getNodeAtPath,
-  parentElementPath,
-} from "../store.js";
+import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { isInlineInContext } from "../editor/inline-edit.js";
 
 /** @type {any} */
@@ -19,25 +13,27 @@ let _ctx = null;
 /**
  * Initialize the canvas helpers module.
  *
- * @param {{ getCanvasMode: () => string }} ctx
+ * @param {{ getCanvasMode: () => string; getZoom: () => number }} ctx
  */
 export function initCanvasHelpers(ctx) {
   _ctx = ctx;
 }
 
-/** Effective zoom scale — always 1 in edit (content) mode, S.ui.zoom otherwise. */
+/** Effective zoom scale — always 1 in edit (content) mode, actual zoom otherwise. */
 export function effectiveZoom() {
-  return _ctx.getCanvasMode() === "edit" ? 1 : getState().ui.zoom;
+  return _ctx.getCanvasMode() === "edit"
+    ? 1
+    : (_ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
 }
 
 /** Return the active canvas panel based on the current activeMedia setting. */
 export function getActivePanel() {
   if (canvasPanels.length === 0) return null;
   if (canvasPanels.length === 1) return canvasPanels[0];
-  const S = getState();
+  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    if (S.ui.activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) return p;
-    if (p.mediaName === S.ui.activeMedia) return p;
+    if (activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) return p;
+    if (p.mediaName === activeMedia) return p;
   }
   return canvasPanels[0];
 }

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

@@ -5,6 +5,7 @@
  */
 
 import { elToPath, stripEventHandlers, projectState } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import {
   renderNode as runtimeRenderNode,
@@ -82,7 +83,6 @@ function markLayoutNodes(/** @type {any} */ node) {
  * Initialize the canvas live render module.
  *
  * @param {{
- *   getState: () => any;
  *   getCanvasMode: () => string;
  * }} ctx
  */
@@ -100,7 +100,8 @@ export function initCanvasLiveRender(ctx) {
  * @param {any} canvasEl
  */
 export async function renderCanvasLive(gen, doc, canvasEl) {
-  const S = _ctx.getState();
+  const tab = activeTab.value;
+  const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode, document: tab?.doc.document };
   const canvasMode = _ctx.getCanvasMode();
 
   // Suppress server function resolution in non-preview modes to avoid
@@ -388,6 +389,31 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     } else {
       canvasEl.removeAttribute("data-content-mode");
     }
+
+    // Resolve relative asset URLs through the PAL for environments that can't
+    // serve project files natively (e.g. ElectroBun's views:// scheme).
+    const platform = /** @type {any} */ (globalThis).__jxPlatform;
+    if (platform?.resolveAssetUrl && docBase) {
+      const mediaEls = el.querySelectorAll("img[src], video[src], source[src], video[poster]");
+      for (const node of mediaEls) {
+        for (const attr of ["src", "poster"]) {
+          const val = node.getAttribute(attr);
+          if (
+            val &&
+            !val.startsWith("data:") &&
+            !val.startsWith("blob:") &&
+            !val.startsWith("http")
+          ) {
+            try {
+              const resolved = new URL(val, docBase).pathname.replace(/^\//, "");
+              const dataUrl = await platform.resolveAssetUrl(resolved);
+              if (dataUrl) node.setAttribute(attr, dataUrl);
+            } catch {}
+          }
+        }
+      }
+    }
+
     canvasEl.appendChild(el);
     if (canvasMode === "design" || canvasMode === "edit") {
       // Custom element connectedCallbacks render children asynchronously —

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,7 +30,10 @@ 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 { findCanvasElement } from "./canvas-helpers.js";
+import { enterComponentInlineEdit } from "../editor/component-inline-edit.js";
 import { renderStylebookMode } from "../panels/stylebook-panel.js";
 import { dismissLinkPopover, dismissBlockActionBar } from "../panels/block-action-bar.js";
 import { dismissContextMenu } from "../editor/context-menu.js";
@@ -49,10 +53,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 +64,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 +236,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 +247,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) {
@@ -257,7 +334,7 @@ export function renderCanvas() {
       </div>
     `;
     litRender(editTpl, canvasWrap);
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
     return;
   }
@@ -302,7 +379,7 @@ export function renderCanvas() {
       `,
       canvasWrap,
     );
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), featureToggles);
     applyTransform();
     if (modeChanged) {
@@ -354,7 +431,7 @@ export function renderCanvas() {
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, activeSet, featureToggles);
   }
 
@@ -376,37 +453,109 @@ 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 _tab = activeTab.value;
+        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);
     renderOverlays();
     updateForcedPseudoPreview();
+
+    // Process pending inline edit when canvas becomes ready
+    const currentTab = activeTab.value;
+    if (currentTab?.session.ui?.pendingInlineEdit) {
+      const { path, mediaName: mn } = /** @type {{ path: any; mediaName: string }} */ (
+        currentTab.session.ui.pendingInlineEdit
+      );
+      currentTab.session.ui.pendingInlineEdit = null;
+      const targetPanel =
+        canvasPanels.find((/** @type {any} */ p) => p.mediaName === mn) || canvasPanels[0];
+      if (targetPanel) {
+        const el = findCanvasElement(path, targetPanel.canvas);
+        if (el) enterComponentInlineEdit(el, path);
+      }
+    }
   });
 }
 
+/**
+ * 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
@@ -417,8 +566,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);