@jxsuite/studio 0.16.0 → 0.16.1

package/package.json

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

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/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,

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" },

package/src/workspace/workspace.js

@@ -84,6 +84,50 @@ export function closeTab(tabId) {
   }
 }
 
+/** Close all open tabs, disposing each. Defers reactivity until fully cleared. */
+export function closeAllTabs() {
+  const tabs = [...workspace.tabs.values()];
+  workspace.tabs.clear();
+  workspace.tabOrder = [];
+  workspace.activeTabId = null;
+  for (const tab of tabs) {
+    disposeTab(tab);
+  }
+}
+
+/**
+ * Replace all existing tabs with a new one atomically. Ensures activeTab is never null during the
+ * transition.
+ *
+ * @param {{
+ *   id: string;
+ *   documentPath?: string | null;
+ *   document: Record<string, any>;
+ *   frontmatter?: Record<string, unknown>;
+ *   sourceFormat?: string | null;
+ * }} newTabOpts
+ * @returns {import("../tabs/tab.js").Tab}
+ */
+export function replaceAllTabs(newTabOpts) {
+  const oldIds = [...workspace.tabs.keys()];
+  const oldTabs = [...workspace.tabs.values()];
+
+  const newTab = createTab(newTabOpts);
+  workspace.tabs.set(newTab.id, newTab);
+  workspace.activeTabId = newTab.id;
+  workspace.tabOrder = [newTab.id];
+
+  for (const id of oldIds) {
+    if (id === newTab.id) continue;
+    workspace.tabs.delete(id);
+  }
+  for (const tab of oldTabs) {
+    disposeTab(tab);
+  }
+
+  return newTab;
+}
+
 /**
  * Switch to an existing tab.
  *