@jxsuite/studio 0.9.0 → 0.10.1

package/src/panels/block-action-bar.js

@@ -23,6 +23,7 @@ import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
 import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -32,8 +33,6 @@ let _ctx = null;
  *
  * @param {{
  *   getCanvasMode: () => string;
- *   findCanvasElement: Function;
- *   getActivePanel: Function;
  *   navigateToComponent: Function;
  *   createFloatingContainer: Function;
  * }} ctx
@@ -186,6 +185,11 @@ export function dismissLinkPopover() {
   if (view.linkPopoverHost) litRender(nothing, view.linkPopoverHost);
 }
 
+/** Dismiss the block action bar. */
+export function dismissBlockActionBar() {
+  if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
+}
+
 /** @param {any} anchorBtn */
 function showLinkPopover(anchorBtn) {
   litRender(nothing, view.linkPopoverHost);
@@ -312,12 +316,12 @@ export function renderBlockActionBar() {
     return;
   }
 
-  const activePanel = _ctx.getActivePanel();
+  const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = _ctx.findCanvasElement(S.selection, activePanel.canvas);
+  const el = findCanvasElement(S.selection, activePanel.canvas);
   const node = el && getNodeAtPath(S.document, S.selection);
   if (!el || !node) {
     litRender(nothing, view.blockActionBarEl);

package/src/panels/canvas-dnd.js

@@ -18,18 +18,7 @@ import {
 } from "../store.js";
 import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
-
-/** @type {any} */
-let _ctx = null;
-
-/**
- * Initialize the canvas DnD module.
- *
- * @param {{ effectiveZoom: () => number }} ctx
- */
-export function initCanvasDnD(ctx) {
-  _ctx = ctx;
-}
+import { effectiveZoom } from "../canvas/canvas-helpers.js";
 
 /**
  * Register all canvas elements in a panel as DnD drop targets.
@@ -133,7 +122,7 @@ function showCanvasDropIndicator(el, elPath, isVoid, panel) {
     return;
   }
 
-  const scale = _ctx.effectiveZoom();
+  const scale = effectiveZoom();
   const wrapRect = viewport.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;

package/src/panels/left-panel.js

@@ -15,7 +15,6 @@ import {
   applyMutation,
   updateFrontmatter,
 } from "../store.js";
-import { view } from "../view.js";
 import { ensureLitState } from "./shared.js";
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
@@ -96,7 +95,7 @@ function _render() {
       updateSession,
     });
   else if (tab === "data")
-    content = _ctx.renderDataExplorerTemplate(S.document.state, view.liveScope, {
+    content = _ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
       renderCanvas: _ctx.renderCanvas,
       renderLeftPanel: render,
       defCategory: _ctx.defCategory,

package/src/panels/overlays.js

@@ -6,6 +6,11 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
 import { view } from "../view.js";
+import {
+  findCanvasElement,
+  getActivePanel,
+  overlayBoxDescriptor,
+} from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -16,8 +21,7 @@ let _unsub = null;
 /**
  * Mount the overlays panel.
  *
- * @param {any} ctx — { effectiveZoom, getCanvasMode, isEditing, renderBlockActionBar,
- *   findCanvasElement, getActivePanel }
+ * @param {any} ctx — { getCanvasMode, isEditing, renderBlockActionBar }
  */
 export function mount(ctx) {
   _ctx = ctx;
@@ -32,24 +36,6 @@ export function unmount() {
   _ctx = null;
 }
 
-/**
- * @param {any} el
- * @param {any} type
- * @param {any} panel
- */
-function overlayBoxDescriptor(el, type, panel) {
-  const vpRect = panel.viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const scale = _ctx.effectiveZoom();
-  return {
-    cls: `overlay-box overlay-${type}`,
-    top: `${(elRect.top - vpRect.top + panel.viewport.scrollTop) / scale}px`,
-    left: `${(elRect.left - vpRect.left + panel.viewport.scrollLeft) / scale}px`,
-    width: `${elRect.width / scale}px`,
-    height: `${elRect.height / scale}px`,
-  };
-}
-
 export function render() {
   if (!_ctx) return;
   const S = getState();
@@ -98,12 +84,12 @@ export function render() {
     const boxes = [];
 
     if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = _ctx.findCanvasElement(S.hover, p.canvas);
+      const el = findCanvasElement(S.hover, p.canvas);
       if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
     }
 
-    if (S.selection && p === _ctx.getActivePanel()) {
-      const el = _ctx.findCanvasElement(S.selection, p.canvas);
+    if (S.selection && p === getActivePanel()) {
+      const el = findCanvasElement(S.selection, p.canvas);
       if (el) {
         const desc = overlayBoxDescriptor(el, "selection", p);
         if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";

package/src/panels/panel-events.js

@@ -6,6 +6,7 @@
 
 import {
   update,
+  updateUi,
   selectNode,
   hoverNode,
   elToPath,
@@ -21,6 +22,7 @@ import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.j
 import { showContextMenu } from "../editor/context-menu.js";
 import * as insertionHelper from "../editor/insertion-helper.js";
 import { defaultDef } from "../panels/shared.js";
+import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -32,11 +34,8 @@ let _ctx = null;
  *   getState: () => any;
  *   setState: (s: any) => void;
  *   getCanvasMode: () => string;
- *   bubbleInlinePath: (doc: any, path: any) => any;
- *   findCanvasElement: (path: any, canvasEl: any) => any;
  *   enterInlineEdit: (el: any, path: any) => void;
  *   navigateToComponent: (path: any) => void;
- *   effectiveZoom: () => number;
  * }} ctx
  */
 export function initPanelEvents(ctx) {
@@ -90,12 +89,11 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = _ctx.bubbleInlinePath(S.document, originalPath);
+            let path = bubbleInlinePath(S.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
             const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
 
-            const resolvedEl =
-              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
               pathsEqual(path, S.selection) &&
@@ -108,7 +106,7 @@ export function registerPanelEvents(panel) {
             }
 
             if (canvasMode === "design" && S.mode !== "content") {
-              view.pendingInlineEdit = { path, mediaName };
+              updateUi("pendingInlineEdit", { path, mediaName });
               update(selectNode(withMedia, path));
               return;
             }
@@ -149,9 +147,8 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = _ctx.bubbleInlinePath(S.document, originalPath);
-            const resolvedEl =
-              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+            const path = bubbleInlinePath(S.document, originalPath);
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
               const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
@@ -188,7 +185,7 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
           if (path) {
-            path = _ctx.bubbleInlinePath(S.document, path);
+            path = bubbleInlinePath(S.document, path);
             showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
             return;
           }
@@ -218,7 +215,7 @@ export function registerPanelEvents(panel) {
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
-          path = _ctx.bubbleInlinePath(S.document, path);
+          path = bubbleInlinePath(S.document, path);
           if (!pathsEqual(path, S.hover)) {
             _ctx.setState(hoverNode(S, path));
             renderOnly("overlays");
@@ -249,7 +246,7 @@ export function registerPanelEvents(panel) {
     update,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
-    effectiveZoom: _ctx.effectiveZoom,
+    effectiveZoom: effectiveZoom,
     defaultDef,
     insertNode,
     selectNode,

package/src/panels/pseudo-preview.js

@@ -5,18 +5,11 @@
 
 import { getState, getNodeAtPath } from "../store.js";
 import { view } from "../view.js";
+import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers.js";
 
-/** @type {any} */
-let _ctx = null;
-
-/**
- * Initialize the pseudo-preview module.
- *
- * @param {{ getActivePanel: Function; findCanvasElement: Function }} ctx
- */
-export function initPseudoPreview(ctx) {
-  _ctx = ctx;
-}
+const pseudoStyleHost = document.createElement("div");
+pseudoStyleHost.style.display = "contents";
+(document.querySelector("sp-theme") || document.body).appendChild(pseudoStyleHost);
 
 export function updateForcedPseudoPreview() {
   if (view.forcedStyleTag) {
@@ -32,9 +25,9 @@ export function updateForcedPseudoPreview() {
   const sel = S.ui?.activeSelector;
   if (!sel || !sel.startsWith(":") || !S.selection) return;
 
-  const panel = _ctx.getActivePanel();
+  const panel = getActivePanel();
   if (!panel) return;
-  const el = _ctx.findCanvasElement(S.selection, panel.canvas);
+  const el = findCanvasElement(S.selection, panel.canvas);
   if (!el) return;
 
   const node = getNodeAtPath(S.document, S.selection);
@@ -59,6 +52,6 @@ export function updateForcedPseudoPreview() {
 
   const tag = document.createElement("style");
   tag.textContent = `[data-studio-forced] { ${cssProps} }`;
-  document.head.appendChild(tag);
+  pseudoStyleHost.appendChild(tag);
   view.forcedStyleTag = tag;
 }

package/src/panels/shared.js

@@ -31,7 +31,7 @@ export function ensureLitState(container) {
   const start = part._$startNode;
   const end = part._$endNode;
   const startBad = start && start.parentNode !== container;
-  const endBad = end && end !== container && end.parentNode !== container;
+  const endBad = (end && end !== container && end.parentNode !== container) || (!end && start);
   if (startBad || endBad) {
     console.warn("ensureLitState: clearing corrupted Lit state on", container.id || container);
     container.textContent = "";

package/src/platform.js

@@ -5,27 +5,30 @@
  * platform adapter at startup. All file I/O, project loading, and component discovery goes through
  * this interface.
  *
+ * Uses window.__jxPlatform so the platform can be registered from a separate script bundle (e.g.
+ * init.js) before studio.js loads.
+ *
  * See spec/desktop.md §3 for the full StudioPlatform interface.
  */
 
 /** @typedef {Record<string, any>} StudioPlatform */
 
-/** @type {StudioPlatform | null} */
-let _platform = null;
+/** @type {any} */
+const g = globalThis;
 
 /** @param {StudioPlatform} platform */
 export function registerPlatform(platform) {
-  _platform = platform;
+  g.__jxPlatform = platform;
 }
 
 /** @returns {StudioPlatform} */
 export function getPlatform() {
-  if (!_platform)
+  if (!g.__jxPlatform)
     throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
-  return _platform;
+  return g.__jxPlatform;
 }
 
 /** @returns {boolean} */
 export function hasPlatform() {
-  return _platform !== null;
+  return g.__jxPlatform != null;
 }

package/src/state.js

@@ -29,6 +29,7 @@
  *   mode: string;
  *   content: { frontmatter: Record<string, any> };
  *   ui: Record<string, any>;
+ *   canvas: { status: string; scope: any; error: string | null };
  * }} StudioState
  */
 
@@ -234,6 +235,12 @@ export function createState(doc) {
       gitCommitMessage: "", // commit message input
       gitLoading: false, // loading indicator during async ops
       gitError: null, // error message string
+      pendingInlineEdit: null, // null | { path, mediaName } — deferred inline edit awaiting canvas readiness
+    },
+    canvas: {
+      status: "idle", // "idle" | "loading" | "ready" | "error"
+      scope: null, // $defs scope from runtime buildScope
+      error: null, // error message on failure
     },
   };
 }
@@ -272,6 +279,7 @@ export function fromFlat(S) {
     selection,
     hover,
     ui,
+    canvas,
   } = S;
   return {
     doc: {
@@ -286,7 +294,7 @@ export function fromFlat(S) {
       history,
       historyIndex,
     },
-    session: { selection, hover, ui },
+    session: { selection, hover, ui, canvas },
   };
 }
 

package/src/store.js

@@ -324,6 +324,15 @@ export function updateUi(field, value) {
   _updateSessionFn({ ui: { [field]: value } });
 }
 
+/**
+ * Update the canvas async state (status, scope, error).
+ *
+ * @param {any} patch
+ */
+export function updateCanvas(patch) {
+  _updateSessionFn({ canvas: patch });
+}
+
 // ─── Subscription system ────────────────────────────────────────────────────
 // Panels subscribe to state changes and decide when to re-render, rather than
 // being called unconditionally from _update/_updateSession.