@jxsuite/studio 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.15.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/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();
     });
   });

package/src/panels/signals-panel.js

@@ -14,6 +14,7 @@ import {
   mutateRenameDef,
 } from "../tabs/transact.js";
 import { renderFieldRow } from "../ui/field-row.js";
+import { renderMediaPicker } from "../ui/media-picker.js";
 import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.js";
 
 // ─── Module-local state ─────────────────────────────────────────────────────
@@ -343,6 +344,9 @@ function renderSignalEditorTemplate(
   /** @type {any} */ def,
   /** @type {any} */ ctx,
 ) {
+  if (typeof def !== "object" || def === null) {
+    def = { default: def };
+  }
   const cat = defCategory(def);
 
   // Helper for picker rows
@@ -470,20 +474,31 @@ function renderSignalEditorTemplate(
               ),
           )
         : nothing}
-      ${signalFieldRow("Default", defaultVal, (/** @type {any} */ v) => {
-        let parsed = v;
-        if (def.type === "integer") parsed = parseInt(v, 10) || 0;
-        else if (def.type === "number") parsed = parseFloat(v) || 0;
-        else if (def.type === "boolean") parsed = v === "true";
-        else if (def.type === "array" || def.type === "object") {
-          try {
-            parsed = JSON.parse(v);
-          } catch {
-            parsed = v;
-          }
-        }
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: parsed }));
-      })}
+      ${def.format === "image"
+        ? renderFieldRow({
+            prop: "Default",
+            label: "Default",
+            hasValue: false,
+            widget: renderMediaPicker("default", defaultVal, (/** @type {any} */ v) => {
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateDef(t, name, { default: v || undefined }),
+              );
+            }),
+          })
+        : signalFieldRow("Default", defaultVal, (/** @type {any} */ v) => {
+            let parsed = v;
+            if (def.type === "integer") parsed = parseInt(v, 10) || 0;
+            else if (def.type === "number") parsed = parseFloat(v) || 0;
+            else if (def.type === "boolean") parsed = v === "true";
+            else if (def.type === "array" || def.type === "object") {
+              try {
+                parsed = JSON.parse(v);
+              } catch {
+                parsed = v;
+              }
+            }
+            transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: parsed }));
+          })}
       ${signalFieldRow("Description", def.description || "", (/** @type {any} */ v) =>
         transactDoc(activeTab.value, (t) =>
           mutateUpdateDef(t, name, { description: v || undefined }),
@@ -644,7 +659,16 @@ function renderFunctionFields(
   /** @type {any} */ textareaRow,
   /** @type {any} */ ctx,
 ) {
-  const srcFields = def.$src
+  const descriptionField = signalFieldRow(
+    "Description",
+    def.description || "",
+    (/** @type {any} */ v) =>
+      transactDoc(activeTab.value, (t) =>
+        mutateUpdateDef(t, name, { description: v || undefined }),
+      ),
+  );
+
+  const bodyField = def.$src
     ? html`
         ${signalFieldRow("Source", def.$src || "", (/** @type {any} */ v) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $src: v || undefined })),
@@ -655,36 +679,35 @@ function renderFunctionFields(
           ),
         )}
       `
-    : textareaRow(
-        "Body",
-        def.body || "",
-        (/** @type {any} */ v) =>
-          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { body: v })),
-        { minHeight: "60px", mono: true },
-      );
-
-  return html`
-    ${srcFields} ${renderParameterEditorTemplate(S, name, def, ctx)}
-    ${isCustomElementDoc(S) ? renderEmitsEditorTemplate(S, name, def) : nothing}
-    ${!def.$src
-      ? html`
-          <button
-            class="kv-add"
-            style="margin-top:4px"
+    : html`
+        <div style="display:flex;align-items:center;gap:4px">
+          <span class="field-label" style="flex:1">Body</span>
+          <sp-action-button
+            size="xs"
+            quiet
+            title="Open in code editor"
             @click=${() => {
               ctx.updateSession({ ui: { editingFunction: { type: "def", defName: name } } });
               ctx.renderCanvas();
             }}
           >
-            Open in editor
-          </button>
-        `
-      : nothing}
-    ${signalFieldRow("Description", def.description || "", (/** @type {any} */ v) =>
-      transactDoc(activeTab.value, (t) =>
-        mutateUpdateDef(t, name, { description: v || undefined }),
-      ),
-    )}
+            <sp-icon-code slot="icon"></sp-icon-code>
+          </sp-action-button>
+        </div>
+        <textarea
+          class="field-input"
+          style="min-height:60px;font-family:monospace;font-size:11px"
+          .value=${def.body || ""}
+          @input=${(/** @type {any} */ e) => {
+            const v = e.target.value;
+            transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { body: v }));
+          }}
+        ></textarea>
+      `;
+
+  return html`
+    ${descriptionField} ${renderParameterEditorTemplate(S, name, def, ctx)}
+    ${isCustomElementDoc(S) ? renderEmitsEditorTemplate(S, name, def) : nothing} ${bodyField}
   `;
 }
 

package/src/platforms/devserver.js

@@ -434,6 +434,16 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
+    /** @param {{ path: string; ref?: string }} opts */
+    async gitShow(opts) {
+      const params = new URLSearchParams({ path: opts.path });
+      if (opts.ref) params.set("ref", opts.ref);
+      const res = await fetch(`/__studio/git/show?${params}`);
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      return data.content;
+    },
+
     /** @param {string[]} files */
     async gitDiscard(files) {
       const res = await fetch("/__studio/git/discard", {

package/src/services/code-services.js

@@ -85,13 +85,13 @@ export function setLintMarkers(editor, diagnostics) {
 
 /**
  * @param {any} editing
- * @param {any} state
+ * @param {any} document
  */
-export function getFunctionArgs(editing, state) {
+export function getFunctionArgs(editing, document) {
   if (editing.type === "def") {
-    return state.document.state?.[editing.defName]?.parameters || ["state", "event"];
+    return document?.state?.[editing.defName]?.parameters || ["state", "event"];
   } else if (editing.type === "event") {
-    const node = getNodeAtPath(state.document, editing.path);
+    const node = getNodeAtPath(document, editing.path);
     return node?.[editing.eventKey]?.parameters || ["state", "event"];
   }
   return ["state", "event"];