@jxsuite/studio 0.10.2 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.10.2",
+  "version": "0.13.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.1",
+    "@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",
@@ -58,7 +58,9 @@
     "@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",
+    "@vue/reactivity": "3.5.34",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",
@@ -74,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/browse/browse.js

@@ -95,11 +95,14 @@ async function collectFiles(dir, platform) {
         results.push(...sub);
       } else {
         const ext = extOf(entry.name);
+        const category = categoryFor(entry.path, ext);
+        const type =
+          category === "Content" ? contentTypeFor(entry.path) || ext || "file" : ext || "file";
         results.push({
           name: entry.name,
           path: entry.path,
-          type: ext || "file",
-          category: categoryFor(entry.path, ext),
+          type,
+          category,
           ext,
         });
       }
@@ -110,6 +113,27 @@ async function collectFiles(dir, platform) {
   return results;
 }
 
+/**
+ * Match a file path against project contentTypes source globs 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) {
+  const config = projectState?.projectConfig;
+  if (!config?.contentTypes) return null;
+  for (const [name, def] of Object.entries(config.contentTypes)) {
+    const d = /** @type {any} */ (def);
+    if (!d.source) continue;
+    const prefix = d.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    if (filePath.startsWith(prefix + "/") || filePath === prefix) {
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+  }
+  return null;
+}
+
 // ─── Data loading ────────────────────────────────────────────────────────────
 
 async function loadFiles() {
@@ -376,7 +400,7 @@ export async function renderBrowse(container, ctx) {
                 >
                   <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
                   <sp-table-cell>${f.category}</sp-table-cell>
-                  <sp-table-cell>${f.ext || "—"}</sp-table-cell>
+                  <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>
                 </sp-table-row>
               `,

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,13 +5,22 @@
  */
 
 import { elToPath, stripEventHandlers, projectState } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
-import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxsuite/runtime";
+import {
+  renderNode as runtimeRenderNode,
+  buildScope,
+  defineElement,
+  setSkipServerFunctions,
+} from "@jxsuite/runtime";
 import {
   getEffectiveElements,
   getEffectiveImports,
   getEffectiveMedia,
   getEffectiveHead,
+  getEffectiveLayoutPath,
+  resolveLayoutDoc,
+  distributePageIntoLayout,
 } from "../site-context.js";
 import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { prepareForEditMode } from "../utils/edit-display.js";
@@ -20,11 +29,60 @@ import { getActiveElement } from "../editor/inline-edit.js";
 /** @type {any} */
 let _ctx = null;
 
+/** Set of DOM elements that originated from the layout (not page content). */
+export const layoutElements = new WeakSet();
+
+/**
+ * Walk the merged document tree to find the path prefix where page children were distributed into
+ * the layout slot. Returns the path to the container whose children are the page content (first
+ * non-$__layout children array).
+ *
+ * @param {any} node
+ * @param {any[]} [path]
+ * @returns {any[] | null}
+ */
+function findPageContentPrefix(node, path = []) {
+  if (!node || typeof node !== "object") return null;
+  if (Array.isArray(node.children)) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && !child.$__layout) {
+        return [...path, "children"];
+      }
+    }
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && child.$__layout) {
+        const found = findPageContentPrefix(child, [...path, "children", i]);
+        if (found) return found;
+      }
+    }
+  }
+  return null;
+}
+
+/** The path of the currently active layout file, or null. */
+export let activeLayoutPath = /** @type {string | null} */ (null);
+
+/**
+ * Recursively mark all nodes in a layout doc tree with $__layout: true so we can identify which
+ * rendered DOM elements came from the layout vs page content.
+ */
+function markLayoutNodes(/** @type {any} */ node) {
+  if (!node || typeof node !== "object") return;
+  node.$__layout = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) markLayoutNodes(child);
+  }
+  if (node.$elements) {
+    for (const el of node.$elements) markLayoutNodes(el);
+  }
+}
+
 /**
  * Initialize the canvas live render module.
  *
  * @param {{
- *   getState: () => any;
  *   getCanvasMode: () => string;
  * }} ctx
  */
@@ -42,12 +100,50 @@ 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();
 
-  const renderDoc =
+  // Suppress server function resolution in non-preview modes to avoid
+  // failed proxy calls and infinite reactive retries (also covers
+  // async custom element connectedCallbacks that run after this function returns)
+  setSkipServerFunctions(canvasMode !== "preview");
+
+  let renderDoc =
     canvasMode === "preview" ? structuredClone(doc) : prepareForEditMode(stripEventHandlers(doc));
 
+  // ─── Layout wrapping ────────────────────────────────────────────────────
+  // For page documents, resolve the layout and wrap content in the layout shell.
+  // Layout-originated nodes are marked with $__layout so we can distinguish them.
+  let layoutWrapped = false;
+  activeLayoutPath = null;
+
+  const isPage =
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/"));
+
+  /** @type {any[] | null} Path prefix in merged doc where page children live */
+  let pageContentPrefix = null;
+
+  if (isPage) {
+    const layoutPath = getEffectiveLayoutPath(doc.$layout);
+    if (layoutPath) {
+      const layoutDoc = await resolveLayoutDoc(layoutPath);
+      if (layoutDoc) {
+        if (gen !== view.renderGeneration) return null;
+        activeLayoutPath = layoutPath.replace(/^\.\//, "");
+        markLayoutNodes(layoutDoc);
+        const pageForSlots = canvasMode === "preview" ? structuredClone(doc) : renderDoc;
+        const merged = distributePageIntoLayout(layoutDoc, pageForSlots);
+        renderDoc =
+          canvasMode === "preview" ? merged : prepareForEditMode(stripEventHandlers(merged));
+        layoutWrapped = true;
+        pageContentPrefix = findPageContentPrefix(merged);
+      }
+    }
+  }
+
   // In edit mode, collect paths where $map templates were inlined as children[0]
   // so we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
@@ -224,26 +320,49 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     if (gen !== view.renderGeneration) return null;
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
-        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path) {
+        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path, /** @type {any} */ def) {
+          // Track layout-originated elements — don't store in elToPath to avoid
+          // path collisions with remapped page content paths
+          if (layoutWrapped && def?.$__layout) {
+            layoutElements.add(el);
+            if (el.setAttribute) el.setAttribute("data-jx-layout", "");
+            return;
+          }
+
+          // Remap layout-wrapped paths: strip the layout prefix so paths are
+          // relative to the original page document (which is what S.document holds)
+          let mappedPath = path;
+          if (layoutWrapped && pageContentPrefix) {
+            const pfx = pageContentPrefix;
+            if (
+              path.length >= pfx.length &&
+              pfx.every((/** @type {any} */ seg, /** @type {number} */ i) => path[i] === seg)
+            ) {
+              mappedPath = ["children", ...path.slice(pfx.length)];
+            }
+          }
+
           // Remap $map paths: wrapper and template children → real document paths
           // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
           // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
-          let mappedPath = path;
           if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
-            for (let i = 0; i < path.length - 1; i++) {
-              if (path[i] === "children" && path[i + 1] === 0) {
-                const parentKey = path.slice(0, i).join("/");
+            for (let i = 0; i < mappedPath.length - 1; i++) {
+              if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
+                const parentKey = mappedPath.slice(0, i).join("/");
                 if (mapParentPaths.has(parentKey)) {
-                  if (path.length === i + 2) {
-                    // Wrapper div itself → $map container path
-                    mappedPath = path.slice(0, i + 1);
+                  if (mappedPath.length === i + 2) {
+                    mappedPath = mappedPath.slice(0, i + 1);
                   } else if (
-                    path.length >= i + 4 &&
-                    path[i + 2] === "children" &&
-                    path[i + 3] === 0
+                    mappedPath.length >= i + 4 &&
+                    mappedPath[i + 2] === "children" &&
+                    mappedPath[i + 3] === 0
                   ) {
-                    // Template or its descendants → children/map/...rest
-                    mappedPath = [...path.slice(0, i), "children", "map", ...path.slice(i + 4)];
+                    mappedPath = [
+                      ...mappedPath.slice(0, i),
+                      "children",
+                      "map",
+                      ...mappedPath.slice(i + 4),
+                    ];
                   }
                   break;
                 }