@jxsuite/studio 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.14.0",
+  "version": "0.16.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.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-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/editor/context-menu.js

@@ -1,13 +1,14 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
+import { activeTab, workspace } from "../workspace/workspace.js";
 import {
   transactDoc,
   mutateInsertNode,
   mutateRemoveNode,
   mutateDuplicateNode,
   mutateWrapNode,
+  mutateReplaceStyle,
 } from "../tabs/transact.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { convertToComponent } from "./convert-to-component.js";
@@ -21,9 +22,6 @@ import { componentRegistry } from "../files/components.js";
  * @typedef {import("../state.js").JxNode} JxNode
  */
 
-/** @type {JxNode | null} */
-let clipboard = null;
-
 // ─── Clipboard ────────────────────────────────────────────────────────────────
 
 export function copyNode() {
@@ -31,7 +29,7 @@ export function copyNode() {
   if (!tab?.session.selection) return;
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return;
-  clipboard = structuredClone(node);
+  workspace.clipboard = structuredClone(node);
   statusMessage("Copied");
 }
 
@@ -41,16 +39,16 @@ export function cutNode() {
   const sel = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, sel);
   if (!node) return;
-  clipboard = structuredClone(node);
+  workspace.clipboard = structuredClone(node);
   transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
 export function pasteNode() {
-  if (!clipboard) return;
+  if (!workspace.clipboard) return;
   const tab = activeTab.value;
   if (!tab) return;
-  const clip = clipboard;
+  const clip = workspace.clipboard;
   const pPath = tab.session.selection || [];
   const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent) return;
@@ -66,6 +64,25 @@ export function pasteNode() {
   statusMessage("Pasted");
 }
 
+export function copyStyles() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
+  if (!node?.style) return;
+  workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+  statusMessage("Styles copied");
+}
+
+export function pasteStyles() {
+  if (!workspace.styleClipboard) return;
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+  const sel = /** @type {JxPath} */ (tab.session.selection);
+  transactDoc(tab, (t) => mutateReplaceStyle(t, sel, style));
+  statusMessage("Styles pasted");
+}
+
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
 const ctxMenu = document.createElement("sp-popover");
@@ -109,6 +126,26 @@ export function showContextMenu(e, path, opts = {}) {
       label: "Duplicate",
       action: () => transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, path)),
     });
+    if (node.style) {
+      items.push({
+        label: "Copy styles",
+        action: () => {
+          workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+          statusMessage("Styles copied");
+        },
+      });
+    }
+    if (workspace.styleClipboard) {
+      items.push({
+        label: "Paste styles",
+        action: () => {
+          if (!workspace.styleClipboard) return;
+          const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+          transactDoc(activeTab.value, (t) => mutateReplaceStyle(t, path, style));
+          statusMessage("Styles pasted");
+        },
+      });
+    }
     items.push({ label: "—" }); // separator
     items.push({
       label: "Insert before",
@@ -162,8 +199,8 @@ export function showContextMenu(e, path, opts = {}) {
       danger: true,
     });
   }
-  if (clipboard) {
-    const clip = clipboard;
+  if (workspace.clipboard) {
+    const clip = workspace.clipboard;
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",

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

@@ -383,83 +383,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();
     });
   });