@jxsuite/studio 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {

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

@@ -389,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

@@ -32,6 +32,8 @@ 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";
@@ -481,8 +483,9 @@ function renderCanvasIntoPanel(
       if (gitDiffState && docOverride) {
         // Determine which document is original and which is current
         const isOriginal = docOverride === (gitDiffState.originalDoc || gitDiffState.original);
-        const origDoc = isOriginal ? docOverride : gitDiffState.currentDoc || tab?.doc.document;
-        const currDoc = isOriginal ? gitDiffState.currentDoc || tab?.doc.document : docOverride;
+        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);
 
@@ -501,6 +504,21 @@ function renderCanvasIntoPanel(
     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);
+      }
+    }
   });
 }
 

package/src/canvas/canvas-utils.js

@@ -168,8 +168,7 @@ export function applyTransform() {
   if (!view.panzoomWrap) return;
   const zoom = _ctx.getZoom();
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
-  const label = document.querySelector(".zoom-indicator-label");
-  if (label) label.textContent = `${Math.round(zoom * 100)}%`;
+  renderZoomIndicator();
   renderOnly("overlays");
   if (_ctx.getCanvasMode() === "settings") _ctx.renderStylebookOverlays();
 }

package/src/editor/component-inline-edit.js

@@ -4,7 +4,6 @@
  */
 
 import {
-  getState,
   updateUi,
   renderOnly,
   getNodeAtPath,
@@ -48,8 +47,7 @@ export function enterComponentInlineEdit(el, path) {
     return;
   }
 
-  const S = getState();
-  const node = getNodeAtPath(S.document, path);
+  const node = getNodeAtPath(activeTab.value?.doc.document, path);
   if (!node) return;
 
   const tc = node.textContent;

package/src/editor/content-inline-edit.js

@@ -4,7 +4,6 @@
  */
 
 import {
-  getState,
   renderOnly,
   getNodeAtPath,
   parentElementPath,
@@ -44,8 +43,7 @@ export function enterInlineEdit(el, path) {
       /** @type {any} */ children,
       /** @type {any} */ textContent,
     ) {
-      const S = getState();
-      const node = getNodeAtPath(S.document, commitPath);
+      const node = getNodeAtPath(activeTab.value?.doc.document, commitPath);
       if (children) {
         if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
         transactDoc(activeTab.value, (t) => {

package/src/editor/context-menu.js

@@ -26,41 +26,42 @@ let clipboard = null;
 
 // ─── Clipboard ────────────────────────────────────────────────────────────────
 
-/** @param {StudioState} S */
-export function copyNode(S) {
-  if (!S.selection) return;
-  const node = getNodeAtPath(S.document, S.selection);
+export function copyNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return;
   clipboard = structuredClone(node);
   statusMessage("Copied");
 }
 
-/** @param {StudioState} S */
-export function cutNode(S) {
-  if (!S.selection || S.selection.length < 2) return;
-  const sel = S.selection;
-  const node = getNodeAtPath(S.document, sel);
+export function cutNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2) return;
+  const sel = tab.session.selection;
+  const node = getNodeAtPath(tab.doc.document, sel);
   if (!node) return;
   clipboard = structuredClone(node);
-  transactDoc(activeTab.value, (t) => mutateRemoveNode(t, sel));
+  transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
-/** @param {StudioState} S */
-export function pasteNode(S) {
+export function pasteNode() {
   if (!clipboard) return;
+  const tab = activeTab.value;
+  if (!tab) return;
   const clip = clipboard;
-  const pPath = S.selection || [];
-  const parent = getNodeAtPath(S.document, pPath);
+  const pPath = tab.session.selection || [];
+  const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent) return;
 
-  if (S.selection && S.selection.length >= 2) {
-    const pp = /** @type {JxPath} */ (parentElementPath(S.selection));
-    const idx = /** @type {number} */ (childIndex(S.selection));
-    transactDoc(activeTab.value, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
+  if (tab.session.selection && tab.session.selection.length >= 2) {
+    const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
+    const idx = /** @type {number} */ (childIndex(tab.session.selection));
+    transactDoc(tab, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
   } else {
     const idx = parent.children ? parent.children.length : 0;
-    transactDoc(activeTab.value, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
+    transactDoc(tab, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
   }
   statusMessage("Pasted");
 }
@@ -85,25 +86,25 @@ export function dismissContextMenu() {
 /**
  * @param {MouseEvent} e
  * @param {JxPath} path
- * @param {StudioState} S
  * @param {{ onEditComponent?: (path: string) => void }} [opts]
  */
-export function showContextMenu(e, path, S, opts = {}) {
+export function showContextMenu(e, path, opts = {}) {
   e.preventDefault();
   ctxMenu.removeAttribute("open");
 
-  const node = getNodeAtPath(S.document, path);
+  const tab = activeTab.value;
+  const node = getNodeAtPath(tab?.doc.document, path);
   if (!node) return;
 
   // Select the node
-  activeTab.value.session.selection = path;
+  tab.session.selection = path;
 
   /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
   const items = [];
 
-  items.push({ label: "Copy", action: () => copyNode(S) });
+  items.push({ label: "Copy", action: () => copyNode() });
   if (path.length >= 2) {
-    items.push({ label: "Cut", action: () => cutNode(S) });
+    items.push({ label: "Cut", action: () => cutNode() });
     items.push({
       label: "Duplicate",
       action: () => transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, path)),

package/src/editor/insertion-helper.js

@@ -33,7 +33,6 @@ import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 
 /**
  * @typedef {Object} InsertionHelperContext
- * @property {() => any} getState - Returns the current editor state.
  * @property {() => string} getCanvasMode - Returns the active canvas mode.
  * @property {(fn: Function) => any} withPanelPointerEvents - Executes fn with pointer-events
  *   temporarily enabled on the canvas.

package/src/editor/shortcuts.js

@@ -18,18 +18,12 @@ import {
 import { isEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 
-/**
- * @typedef {import("../state.js").StudioState} StudioState
- *
- * @typedef {import("../state.js").JxPath} JxPath
- */
+/** @typedef {import("../state.js").JxPath} JxPath */
 
 /**
  * Initialise all keyboard (and wheel/pointer) shortcuts.
  *
  * @param {() => {
- *   S: StudioState;
- *   setS: (s: StudioState) => void;
  *   canvasMode: string;
  *   panX: number;
  *   panY: number;
@@ -47,7 +41,7 @@ export function initShortcuts(getContext) {
   canvasWrap.addEventListener(
     "wheel",
     (/** @type {WheelEvent} */ e) => {
-      const { S, setS, canvasMode, panX, panY, setPan, applyTransform } = getContext();
+      const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
       if (canvasMode === "edit") return;
       e.preventDefault();
@@ -56,13 +50,13 @@ export function initShortcuts(getContext) {
         const rect = canvasWrap.getBoundingClientRect();
         const cursorX = e.clientX - rect.left;
         const cursorY = e.clientY - rect.top;
-        const oldZoom = S.ui.zoom;
+        const oldZoom = activeTab.value?.session.ui.zoom ?? 1;
         const delta = -e.deltaY * 0.005;
         const newZoom = Math.min(5.0, Math.max(0.05, oldZoom * (1 + delta)));
         const ratio = newZoom / oldZoom;
         // Adjust pan so the point under cursor stays stationary
         setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
-        setS({ ...S, ui: { ...S.ui, zoom: newZoom } });
+        activeTab.value.session.ui.zoom = newZoom;
       } else if (e.shiftKey) {
         // Shift+scroll = horizontal pan
         setPan(panX - e.deltaY, panY);
@@ -105,8 +99,6 @@ export function initShortcuts(getContext) {
 
   document.addEventListener("keydown", (e) => {
     const {
-      S,
-      setS,
       canvasMode,
       setPan,
       applyTransform,
@@ -115,6 +107,7 @@ export function initShortcuts(getContext) {
       openProject,
       enterEditOnPath,
     } = getContext();
+    const tab = activeTab.value;
     const mod = e.ctrlKey || e.metaKey;
 
     // Don't intercept when typing in inputs or contenteditable
@@ -182,27 +175,27 @@ export function initShortcuts(getContext) {
           break;
         case "d":
           e.preventDefault();
-          if (S.selection) {
-            const sel = S.selection;
-            transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, sel));
+          if (tab?.session.selection) {
+            const sel = tab.session.selection;
+            transactDoc(tab, (t) => mutateDuplicateNode(t, sel));
           }
           break;
         case "c":
           e.preventDefault();
-          copyNode(S);
+          copyNode();
           break;
         case "x":
           e.preventDefault();
-          cutNode(S);
+          cutNode();
           break;
         case "v":
           e.preventDefault();
-          pasteNode(S);
+          pasteNode();
           break;
         case "0":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: 1 } });
+          activeTab.value.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
           break;
@@ -210,13 +203,13 @@ export function initShortcuts(getContext) {
         case "+":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.min(5.0, S.ui.zoom * 1.2) } });
+          activeTab.value.session.ui.zoom = Math.min(5.0, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
         case "-":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.max(0.05, S.ui.zoom / 1.2) } });
+          activeTab.value.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
       }
@@ -226,22 +219,22 @@ export function initShortcuts(getContext) {
     switch (e.key) {
       case "Delete":
       case "Backspace":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
-          const sel = S.selection;
-          transactDoc(activeTab.value, (t) => mutateRemoveNode(t, sel));
+          const sel = tab.session.selection;
+          transactDoc(tab, (t) => mutateRemoveNode(t, sel));
         }
         break;
       case "Escape":
         activeTab.value.session.selection = null;
         break;
       case "Enter":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
-          const pp = /** @type {JxPath} */ (parentElementPath(S.selection));
-          const idx = /** @type {number} */ (childIndex(S.selection));
+          const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
+          const idx = /** @type {number} */ (childIndex(tab.session.selection));
           const newPath = [...pp, "children", idx + 1];
-          transactDoc(activeTab.value, (t) => {
+          transactDoc(tab, (t) => {
             mutateInsertNode(t, pp, idx + 1, { tagName: "p", textContent: "" });
             t.session.selection = newPath;
           });
@@ -250,24 +243,24 @@ export function initShortcuts(getContext) {
         break;
       case "ArrowUp":
         e.preventDefault();
-        navigateSelection(S);
+        navigateSelection(-1);
         break;
       case "ArrowDown":
         e.preventDefault();
-        navigateSelection(S, 1);
+        navigateSelection(1);
         break;
       case "ArrowLeft":
         e.preventDefault();
-        if (S.selection && S.selection.length >= 2) {
-          activeTab.value.session.selection = parentElementPath(S.selection);
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
+          activeTab.value.session.selection = parentElementPath(tab.session.selection);
         }
         break;
       case "ArrowRight":
         e.preventDefault();
-        if (S.selection) {
-          const node = getNodeAtPath(S.document, S.selection);
+        if (tab?.session.selection) {
+          const node = getNodeAtPath(tab.doc.document, tab.session.selection);
           if (node?.children?.length > 0) {
-            activeTab.value.session.selection = [...S.selection, "children", 0];
+            activeTab.value.session.selection = [...tab.session.selection, "children", 0];
           }
         }
         break;
@@ -286,23 +279,24 @@ export function initShortcuts(getContext) {
   );
 }
 
-/**
- * @param {StudioState} S
- * @param {number} [direction]
- */
-function navigateSelection(S, direction = -1) {
-  if (!S.selection) {
+/** @param {number} [direction] */
+function navigateSelection(direction = -1) {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) {
     activeTab.value.session.selection = [];
     return;
   }
-  if (S.selection.length < 2) return;
+  if (tab.session.selection.length < 2) return;
 
-  const parent = getNodeAtPath(S.document, /** @type {JxPath} */ (parentElementPath(S.selection)));
-  const idx = /** @type {number} */ (childIndex(S.selection));
+  const parent = getNodeAtPath(
+    tab.doc.document,
+    /** @type {JxPath} */ (parentElementPath(tab.session.selection)),
+  );
+  const idx = /** @type {number} */ (childIndex(tab.session.selection));
   const newIdx = idx + direction;
   if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
     activeTab.value.session.selection = [
-      .../** @type {JxPath} */ (parentElementPath(S.selection)),
+      .../** @type {JxPath} */ (parentElementPath(tab.session.selection)),
       "children",
       newIdx,
     ];