@jxsuite/studio 0.15.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "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.12.0",
+    "@jxsuite/runtime": "^0.15.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

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

@@ -390,38 +390,12 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       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 —
-      // sweep again after they've had a chance to run
       requestAnimationFrame(() => {
         const editingEl = getActiveElement();
         for (const child of canvasEl.querySelectorAll("*")) {
-          // Preserve pointer-events on the actively-edited element
           if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
           if (editingEl && child === editingEl) continue;
           /** @type {any} */ (child).style.pointerEvents = "none";

package/src/canvas/canvas-render.js

@@ -10,6 +10,7 @@ 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 { loadMarkdown } from "../files/file-ops.js";
 import {
   canvasPanelTemplate,
   applyTransform,
@@ -144,6 +145,7 @@ export function renderCanvas() {
     // Reset inline style overrides from other modes
     canvasWrap.style.padding = "";
     canvasWrap.style.alignItems = "";
+    canvasWrap.style.flexDirection = "";
     canvasWrap.style.display = "";
     canvasWrap.style.overflow = "";
     canvasWrap.style.overflow = "";
@@ -247,72 +249,79 @@ export function renderCanvas() {
     return;
   }
 
-  // Git diff mode — render original (left) and current (right) side-by-side
+  // Git diff mode — render original (left) and current (right) side-by-side on panzoom surface
   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";
+    if (modeChanged) {
+      canvasWrap.style.padding = "0";
+      canvasWrap.style.overflow = "hidden";
+    }
 
     const gitDiffState = _ctx.gitDiffState;
-    const { tpl: origPanelTpl, panel: origPanel } = canvasPanelTemplate(
+    const panelWidth = 800;
+
+    const { tpl: origTpl, panel: origPanel } = canvasPanelTemplate(
       "git-diff-original",
       "Original",
       false,
-      "50%",
+      panelWidth,
     );
-    const { tpl: currPanelTpl, panel: currPanel } = canvasPanelTemplate(
+    const { tpl: currTpl, panel: currPanel } = canvasPanelTemplate(
       "git-diff-current",
       "Current",
       false,
-      "50%",
+      panelWidth,
     );
 
-    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}
+    litRender(
+      html`
+        <div
+          class="panzoom-wrap"
+          style="transform-origin:0 0"
+          ${ref((el) => {
+            if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
+          })}
+        >
+          ${origTpl} ${currTpl}
         </div>
-      </div>
-    `;
+      `,
+      canvasWrap,
+    );
 
-    litRender(diffTpl, canvasWrap);
     canvasPanels.push(/** @type {any} */ (origPanel));
     canvasPanels.push(/** @type {any} */ (currPanel));
 
-    // Parse original document from git content
-    let originalDoc = null;
-    try {
+    /** @param {string} content */
+    const parseContent = (content) => {
       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);
+        return loadMarkdown(content).then((r) => r.document);
       }
-    } catch {
-      originalDoc = {
-        tagName: "div",
-        children: [{ tagName: "p", textContent: "Failed to parse original" }],
-      };
-    }
-
-    const currDoc = S.document;
+      return Promise.resolve().then(() => {
+        try {
+          return JSON.parse(content);
+        } catch {
+          return { tagName: "div", children: [{ tagName: "p", textContent: "Failed to parse" }] };
+        }
+      });
+    };
+
+    const featureToggles = S.ui.featureToggles;
+    Promise.all([
+      parseContent(gitDiffState.originalContent || ""),
+      parseContent(gitDiffState.currentContent || ""),
+    ]).then(([originalDoc, currentDoc]) => {
+      renderCanvasIntoPanel(origPanel, new Set(), featureToggles, originalDoc, gitDiffState);
+      renderCanvasIntoPanel(currPanel, new Set(), featureToggles, currentDoc, gitDiffState);
+    });
 
-    renderCanvasIntoPanel(origPanel, new Set(), S.ui.featureToggles, originalDoc, gitDiffState);
-    renderCanvasIntoPanel(currPanel, new Set(), S.ui.featureToggles, currDoc, gitDiffState);
+    applyTransform();
+    if (modeChanged) observeCenterUntilStable();
+    renderZoomIndicator();
     return;
   }
 
@@ -498,6 +507,7 @@ function renderCanvasIntoPanel(
     } else {
       // Fallback to structural preview
       updateCanvas({ status: "ready", scope: null, error: null });
+      panel.canvas.innerHTML = "";
       renderCanvasNode(docToRender, [], panel.canvas, activeBreakpoints, featureToggles);
     }
     registerPanelDnD(panel);

package/src/files/file-ops.js

@@ -174,9 +174,11 @@ export async function exportFile() {
  * @param {import("../tabs/tab.js").Tab} tab
  * @returns {string}
  */
-function serializeDocument(tab) {
+export function serializeDocument(tab) {
   if (tab.doc.sourceFormat === "md") {
-    return jxDocToMd(tab.doc.document);
+    const fm = tab.doc.content?.frontmatter || {};
+    const fullDoc = { ...fm, children: tab.doc.document.children ?? [] };
+    return jxDocToMd(fullDoc);
   }
   if (tab.doc.mode === "content") {
     const mdast = jxToMd(tab.doc.document);

package/src/files/files.js

@@ -15,7 +15,7 @@ import { createState, projectState, setProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
-import { workspace, openTab, activateTab } from "../workspace/workspace.js";
+import { workspace, openTab, activateTab, replaceAllTabs } from "../workspace/workspace.js";
 import { loadMarkdown } from "./file-ops.js";
 import { view } from "../view.js";
 
@@ -92,6 +92,8 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
 
     const { config, handle } = result;
 
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+
     setProjectState({
       ...projectState,
       projectRoot: handle.root,
@@ -383,83 +385,83 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
 /** @type {HTMLElement | null} */
-let fileContextPopover = null;
+let _fileCtxHost = null;
+
+function getFileCtxHost() {
+  if (!_fileCtxHost) {
+    _fileCtxHost = document.createElement("div");
+    _fileCtxHost.style.display = "contents";
+    (document.querySelector("sp-theme") || document.body).appendChild(_fileCtxHost);
+    document.addEventListener("click", dismissFileContextMenu);
+  }
+  return _fileCtxHost;
+}
+
+function dismissFileContextMenu() {
+  const host = _fileCtxHost;
+  if (!host) return;
+  const popover = host.querySelector("sp-popover");
+  if (popover) popover.removeAttribute("open");
+}
 
 function showFileContextMenu(
   /** @type {MouseEvent} */ e,
   /** @type {{ name: string; path: string; type: string }} */ entry,
   /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
 ) {
-  if (fileContextPopover) {
-    fileContextPopover.remove();
-    fileContextPopover = null;
-  }
-
+  e.preventDefault();
+  const host = getFileCtxHost();
   const isDir = entry.type === "directory";
-  fileContextPopover = document.createElement("div");
-
-  const tpl = html`
-    <sp-popover
-      placement="right-start"
-      open
-      style="position:fixed;left:${e.clientX}px;top:${e.clientY}px;z-index:9999"
-    >
-      <sp-menu style="min-width:160px">
-        ${!isDir
-          ? html`<sp-menu-item
-              @click=${() => {
-                closeFileContextMenu();
-                ctx.openFileFn(entry.path);
-              }}
-              >Open</sp-menu-item
-            >`
-          : nothing}
-        ${isDir
-          ? html`<sp-menu-item
-              @click=${() => {
-                closeFileContextMenu();
-                createNewFile(entry.path, ctx.renderLeftPanel);
-              }}
-              >New File…</sp-menu-item
-            >`
-          : nothing}
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item
-          @click=${() => {
-            closeFileContextMenu();
-            renameFile(entry, ctx.renderLeftPanel);
-          }}
-          >Rename…</sp-menu-item
-        >
-        <sp-menu-item
-          style="color:var(--danger)"
-          @click=${() => {
-            closeFileContextMenu();
-            deleteFile(entry, ctx.renderLeftPanel);
-          }}
-          >Delete</sp-menu-item
-        >
-      </sp-menu>
-    </sp-popover>
-  `;
-
-  litRender(tpl, fileContextPopover);
-  document.body.appendChild(fileContextPopover);
 
-  const closeHandler = (/** @type {MouseEvent} */ ev) => {
-    if (!fileContextPopover?.contains(/** @type {Node} */ (ev.target))) {
-      closeFileContextMenu();
-      document.removeEventListener("mousedown", closeHandler, true);
-    }
-  };
-  setTimeout(() => document.addEventListener("mousedown", closeHandler, true), 0);
-}
+  /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
+  const items = [];
 
-function closeFileContextMenu() {
-  if (fileContextPopover) {
-    fileContextPopover.remove();
-    fileContextPopover = null;
+  if (!isDir) {
+    items.push({ label: "Open", action: () => ctx.openFileFn(entry.path) });
+  }
+  if (isDir) {
+    items.push({
+      label: "New File\u2026",
+      action: () => createNewFile(entry.path, ctx.renderLeftPanel),
+    });
   }
+  items.push({ label: "\u2014" });
+  items.push({ label: "Rename\u2026", action: () => renameFile(entry, ctx.renderLeftPanel) });
+  items.push({
+    label: "Delete",
+    action: () => deleteFile(entry, ctx.renderLeftPanel),
+    danger: true,
+  });
+
+  litRender(
+    html`<sp-popover style="position:fixed;z-index:10000">
+      <sp-menu>
+        ${items.map((item) =>
+          item.label === "\u2014"
+            ? html`<sp-menu-divider></sp-menu-divider>`
+            : html`<sp-menu-item
+                style=${item.danger ? "color: var(--danger)" : ""}
+                @click=${() => {
+                  dismissFileContextMenu();
+                  item.action?.();
+                }}
+                >${item.label}</sp-menu-item
+              >`,
+        )}
+      </sp-menu>
+    </sp-popover>`,
+    host,
+  );
+
+  const popover = /** @type {HTMLElement} */ (host.querySelector("sp-popover"));
+  popover.setAttribute("open", "");
+  const menuRect = popover.getBoundingClientRect();
+  let x = e.clientX,
+    y = e.clientY;
+  if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+  if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
+  popover.style.left = `${x}px`;
+  popover.style.top = `${y}px`;
 }
 
 // ─── File CRUD ────────────────────────────────────────────────────────────────

package/src/panels/editors.js

@@ -57,6 +57,8 @@ export function renderFunctionEditor() {
 
   litRender(nothing, canvasWrap);
   canvasWrap.style.padding = "0";
+  canvasWrap.style.flexDirection = "column";
+  canvasWrap.style.alignItems = "stretch";
 
   // Toolbar breadcrumb handles context display — re-render it
   renderOnly("toolbar");
@@ -65,12 +67,14 @@ export function renderFunctionEditor() {
   /** @type {HTMLDivElement | null} */
   let editorContainer = null;
   litRender(
-    html`<div
-      class="source-editor"
-      ${ref((el) => {
-        if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
-      })}
-    ></div>`,
+    html`<div class="source-wrap">
+      <div
+        class="source-editor"
+        ${ref((el) => {
+          if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
+        })}
+      ></div>
+    </div>`,
     canvasWrap,
   );
 

package/src/panels/git-panel.js

@@ -7,6 +7,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { getPlatform } from "../platform.js";
 import { updateUi, renderOnly } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 
 async function refreshGitStatus() {
@@ -70,7 +71,8 @@ export function renderGitPanel(S, ctx) {
   const totalChanges = status?.files?.length || 0;
 
   const doCommit = async () => {
-    const msg = S.ui.gitCommitMessage?.trim();
+    const tab = activeTab.value;
+    const msg = tab?.session.ui.gitCommitMessage?.trim();
     if (!msg) return;
     updateUi("gitCommitMessage", "");
     await gitAction("gitCommit", msg);
@@ -145,11 +147,7 @@ export function renderGitPanel(S, ctx) {
           }
         }}
       ></sp-textfield>
-      <sp-action-button
-        class="git-commit-btn"
-        @click=${doCommit}
-        ?disabled=${!S.ui.gitCommitMessage?.trim() || loading}
-      >
+      <sp-action-button class="git-commit-btn" @click=${doCommit} ?disabled=${loading}>
         <sp-icon-checkmark slot="icon" size="xs"></sp-icon-checkmark>
         Commit
       </sp-action-button>
@@ -162,29 +160,33 @@ export function renderGitPanel(S, ctx) {
     const dir = parts.join("/");
 
     const onFileClick = async () => {
-      // Only support diff for modified/added files
       if (file.status !== "M" && file.status !== "A") return;
       if (!file.path.endsWith(".md") && !file.path.endsWith(".json")) return;
 
       try {
         const plat = getPlatform();
         updateUi("gitLoading", true);
-        const originalContent = await plat.gitShow({ path: file.path, ref: "HEAD" });
 
-        // Determine if it's markdown or JSON
-        const isMarkdown = file.path.endsWith(".md");
+        const [originalContent, currentContent] = await Promise.all([
+          file.status === "A"
+            ? Promise.resolve("")
+            : plat.gitShow({ path: file.path, ref: "HEAD" }),
+          plat.readFile(file.path),
+        ]);
 
-        // For now, we'll need to pass the original content to the canvas
-        // This requires state management which we'll add to studio.js
-        updateUi("gitDiffState", {
+        const isMarkdown = file.path.endsWith(".md");
+        const diffState = {
           filePath: file.path,
           originalContent,
+          currentContent,
           isMarkdown,
           fileStatus: file.status,
-        });
+        };
+
+        updateUi("gitDiffState", diffState);
 
-        // Trigger diff mode via context
         if (ctx?.setCanvasMode) {
+          if (ctx.setGitDiffState) ctx.setGitDiffState(diffState);
           ctx.setCanvasMode("git-diff");
         }
       } catch (/** @type {any} */ e) {

package/src/panels/left-panel.js

@@ -40,6 +40,7 @@ import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
  *   registerElementsDnD: () => void;
  *   registerComponentsDnD: () => void;
  *   setupTreeKeyboard: (tree: HTMLElement) => void;
+ *   setGitDiffState: (state: any) => void;
  * }} LeftPanelCtx
  */
 
@@ -69,6 +70,9 @@ export function mount(ctx) {
       void tab.doc.mode;
       void tab.session.selection;
       void tab.session.ui.settingsTab;
+      void tab.session.ui.gitStatus;
+      void tab.session.ui.gitLoading;
+      void tab.session.ui.gitError;
       render();
     });
   });

package/src/panels/panel-events.js

@@ -81,12 +81,14 @@ export function registerPanelEvents(panel) {
         document.elementsFromPoint(e.clientX, e.clientY),
       );
 
+      if (!tab) return;
+
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           // Layout element clicked — show layout info instead of selecting in page doc
           if (layoutElements.has(el)) {
             view.layoutSelection = { el, layoutPath: activeLayoutPath };
-            activeTab.value.session.selection = null;
+            tab.session.selection = null;
             renderOnly("rightPanel");
             return;
           }
@@ -94,35 +96,35 @@ export function registerPanelEvents(panel) {
 
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = bubbleInlinePath(tab?.doc.document, originalPath);
+            let path = bubbleInlinePath(tab.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
 
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
-              pathsEqual(path, tab?.session.selection) &&
+              pathsEqual(path, tab.session.selection) &&
               isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || tab?.doc.mode === "content")
+              (canvasMode === "edit" || tab.doc.mode === "content")
             ) {
-              activeTab.value.session.ui.activeMedia = newMedia;
+              tab.session.ui.activeMedia = newMedia;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
 
-            if (canvasMode === "design" && tab?.doc.mode !== "content") {
+            if (canvasMode === "design" && tab.doc.mode !== "content") {
               updateUi("pendingInlineEdit", { path, mediaName });
-              activeTab.value.session.ui.activeMedia = newMedia;
-              activeTab.value.session.selection = path;
+              tab.session.ui.activeMedia = newMedia;
+              tab.session.selection = path;
               return;
             }
 
-            activeTab.value.session.ui.activeMedia = newMedia;
-            activeTab.value.session.selection = path;
+            tab.session.ui.activeMedia = newMedia;
+            tab.session.selection = path;
             return;
           }
         }
       }
-      activeTab.value.session.selection = null;
+      tab.session.selection = null;
     },
     opts,
   );
@@ -149,16 +151,18 @@ export function registerPanelEvents(panel) {
         document.elementsFromPoint(e.clientX, e.clientY),
       );
 
+      if (!tab) return;
+
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = bubbleInlinePath(tab?.doc.document, originalPath);
+            const path = bubbleInlinePath(tab.doc.document, originalPath);
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-              activeTab.value.session.ui.activeMedia = newMedia;
-              activeTab.value.session.selection = path;
+              tab.session.ui.activeMedia = newMedia;
+              tab.session.selection = path;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
@@ -217,18 +221,19 @@ export function registerPanelEvents(panel) {
           return;
       }
       const tab = activeTab.value;
+      if (!tab) return;
       const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
-          path = bubbleInlinePath(tab?.doc.document, path);
-          if (!pathsEqual(path, tab?.session.hover)) {
-            activeTab.value.session.hover = path;
+          path = bubbleInlinePath(tab.doc.document, path);
+          if (!pathsEqual(path, tab.session.hover)) {
+            tab.session.hover = path;
             renderOnly("overlays");
           }
         }
-      } else if (tab?.session.hover) {
-        activeTab.value.session.hover = null;
+      } else if (tab.session.hover) {
+        tab.session.hover = null;
         renderOnly("overlays");
       }
     },

package/src/panels/properties-panel.js

@@ -222,16 +222,16 @@ function renderFrontmatterOnlyPanel() {
       fields.push({ field, entry: fieldSchema, value: fm[field] });
     }
     for (const [field, value] of Object.entries(fm)) {
-      if (!schemaProps[field]) {
-        fields.push({
-          field,
-          entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-          value,
-        });
-      }
+      if (schemaProps[field] || field.startsWith("$")) continue;
+      fields.push({
+        field,
+        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+        value,
+      });
     }
   } else {
     for (const [field, value] of Object.entries(fm)) {
+      if (field.startsWith("$")) continue;
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
@@ -1656,16 +1656,16 @@ export function renderPropertiesPanelTemplate(ctx) {
               fields.push({ field, entry: fieldSchema, value: fm[field] });
             }
             for (const [field, value] of Object.entries(fm)) {
-              if (!schemaProps[field]) {
-                fields.push({
-                  field,
-                  entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-                  value,
-                });
-              }
+              if (schemaProps[field] || field.startsWith("$")) continue;
+              fields.push({
+                field,
+                entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+                value,
+              });
             }
           } else {
             for (const [field, value] of Object.entries(fm)) {
+              if (field.startsWith("$")) continue;
               fields.push({
                 field,
                 entry: { type: typeof value === "boolean" ? "boolean" : "string" },