@jxsuite/studio 0.11.0 → 0.14.0

package/src/panels/left-panel.js

@@ -7,40 +7,94 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import {
-  getState,
-  leftPanel,
-  updateSession,
-  update,
-  applyMutation,
-  updateFrontmatter,
-} from "../store.js";
-import { ensureLitState } from "./shared.js";
+import { leftPanel, updateSession } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
+import { view } from "../view.js";
+import { transact, mutateUpdateFrontmatter } from "../tabs/transact.js";
+
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
 import { renderElementsTemplate } from "./elements-panel.js";
 import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
 
-/** @type {any} */
+/** @typedef {import("lit-html").TemplateResult} TemplateResult */
+
+/**
+ * @typedef {{
+ *   getCanvasMode: () => string;
+ *   setCanvasMode: (mode: string) => void;
+ *   renderImportsTemplate: (...args: any[]) => TemplateResult;
+ *   renderFilesTemplate: () => TemplateResult;
+ *   renderSignalsTemplate: (...args: any[]) => TemplateResult;
+ *   renderDataExplorerTemplate: (...args: any[]) => TemplateResult;
+ *   renderHeadTemplate: (...args: any[]) => TemplateResult;
+ *   renderGitPanel: (...args: any[]) => TemplateResult;
+ *   renderCanvas: () => void;
+ *   defCategory: (tag: string) => string;
+ *   defBadgeLabel: (tag: string) => string;
+ *   navigateToComponent: (path: string) => void;
+ *   webdata: object;
+ *   defaultDef: (tag: string) => object;
+ *   registerLayersDnD: () => void;
+ *   registerElementsDnD: () => void;
+ *   registerComponentsDnD: () => void;
+ *   setupTreeKeyboard: (tree: HTMLElement) => void;
+ * }} LeftPanelCtx
+ */
+
+/** @type {LeftPanelCtx | null} */
 let _ctx = null;
 
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+let _rendering = false;
+let _scheduled = false;
+
 /**
  * Mount the left panel orchestrator.
  *
- * @param {any} ctx — callbacks and references that avoid circular dependencies
+ * @param {LeftPanelCtx} ctx
  */
 export function mount(ctx) {
   _ctx = ctx;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Track properties the left panel reads
+      void tab.doc.document;
+      void tab.doc.mode;
+      void tab.session.selection;
+      void tab.session.ui.settingsTab;
+      render();
+    });
+  });
 }
 
 export function unmount() {
+  _scope?.stop();
+  _scope = null;
   _ctx = null;
 }
 
 export function render() {
   if (!_ctx) return;
+  if (_rendering) return;
+  if (!_scheduled) {
+    _scheduled = true;
+    queueMicrotask(_flush);
+  }
+}
+
+function _flush() {
+  _scheduled = false;
+  if (!_ctx) return;
+  if (_rendering) return;
+  _rendering = true;
   try {
-    ensureLitState(leftPanel);
     _render();
   } catch (e) {
     console.error("left-panel render error:", e);
@@ -52,90 +106,101 @@ export function render() {
     } catch (e2) {
       console.error("left-panel retry failed:", e2);
     }
+  } finally {
+    _rendering = false;
   }
 }
 
 function _render() {
-  const S = getState();
-  const tab = S.ui.leftTab;
+  const ctx = /** @type {LeftPanelCtx} */ (_ctx);
+  const aTab = activeTab.value;
+  if (!aTab) return;
+  const S = /** @type {any} */ ({
+    ui: aTab.session.ui,
+    document: aTab.doc.document,
+    mode: aTab.doc.mode,
+    selection: aTab.session.selection,
+  });
+  const tab = view.leftTab;
 
-  /** @type {any} */
+  /** @type {TemplateResult | typeof nothing} */
   let content;
   if (tab === "layers")
     content =
-      _ctx.getCanvasMode() === "settings"
+      ctx.getCanvasMode() === "settings"
         ? renderStylebookLayersTemplate({
             selectStylebookTag,
             stylebookMeta,
           })
         : renderLayersTemplate({
-            navigateToComponent: _ctx.navigateToComponent,
+            navigateToComponent: ctx.navigateToComponent,
             rerender: render,
           });
   else if (tab === "imports")
-    content = _ctx.renderImportsTemplate({
+    content = ctx.renderImportsTemplate({
       renderLeftPanel: render,
       documentPath: S.documentPath,
       documentElements: S.document.$elements || [],
-      applyMutation: (/** @type {any} */ fn) => {
-        update(applyMutation(getState(), fn));
+      applyMutation: (/** @type {(doc: object) => void} */ fn) => {
+        transact(activeTab.value, fn);
       },
     });
-  else if (tab === "files") content = _ctx.renderFilesTemplate();
+  else if (tab === "files") content = ctx.renderFilesTemplate();
   else if (tab === "blocks")
     content = renderElementsTemplate({
-      webdata: _ctx.webdata,
-      defaultDef: _ctx.defaultDef,
+      webdata: ctx.webdata,
+      defaultDef: ctx.defaultDef,
       rerender: render,
     });
   else if (tab === "state")
-    content = _ctx.renderSignalsTemplate(S, {
+    content = ctx.renderSignalsTemplate(S, {
       renderLeftPanel: render,
-      renderCanvas: _ctx.renderCanvas,
+      renderCanvas: ctx.renderCanvas,
       updateSession,
     });
   else if (tab === "data")
-    content = _ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
-      renderCanvas: _ctx.renderCanvas,
+    content = ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
+      renderCanvas: ctx.renderCanvas,
       renderLeftPanel: render,
-      defCategory: _ctx.defCategory,
-      defBadgeLabel: _ctx.defBadgeLabel,
+      defCategory: ctx.defCategory,
+      defBadgeLabel: ctx.defBadgeLabel,
     });
   else if (tab === "head") {
     const isContent = S.mode === "content";
     const fm = S.content?.frontmatter ?? {};
     const headDoc = isContent ? { ...S.document, title: fm.title, $head: fm.$head } : S.document;
-    content = _ctx.renderHeadTemplate({
+    content = ctx.renderHeadTemplate({
       document: headDoc,
       applyMutation: isContent
-        ? (/** @type {any} */ fn) => {
+        ? (/** @type {(doc: object) => void} */ fn) => {
+            const tab = activeTab.value;
+            const fm = /** @type {Record<string, any>} */ (tab.doc.content?.frontmatter ?? {});
             const tmp = { title: fm.title, $head: fm.$head ? [...fm.$head] : undefined };
             fn(tmp);
-            let s = getState();
-            if (tmp.title !== fm.title) s = updateFrontmatter(s, "title", tmp.title);
+            if (tmp.title !== fm.title)
+              mutateUpdateFrontmatter(tab, "title", /** @type {any} */ (tmp.title));
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            s = updateFrontmatter(s, "$head", newHead);
-            update(s);
+            mutateUpdateFrontmatter(tab, "$head", newHead);
           }
-        : (/** @type {any} */ fn) => {
-            update(applyMutation(getState(), fn));
+        : (/** @type {(doc: object) => void} */ fn) => {
+            transact(activeTab.value, fn);
           },
       renderLeftPanel: render,
     });
-  } else if (tab === "git") content = _ctx.renderGitPanel(S);
+  } else if (tab === "git") content = ctx.renderGitPanel(S, ctx);
   else content = nothing;
 
-  litRender(html`<div class="panel-body">${content}</div>`, /** @type {any} */ (leftPanel));
+  litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
-  if (tab === "layers" && _ctx.getCanvasMode() !== "settings") _ctx.registerLayersDnD();
+  if (tab === "layers" && ctx.getCanvasMode() !== "settings") ctx.registerLayersDnD();
   else if (tab === "imports") {
     /* no post-render DnD needed */
   } else if (tab === "blocks") {
-    _ctx.registerElementsDnD();
-    _ctx.registerComponentsDnD();
+    ctx.registerElementsDnD();
+    ctx.registerComponentsDnD();
   } else if (tab === "files") {
-    const tree = /** @type {any} */ (leftPanel)?.querySelector(".file-tree");
-    if (tree) _ctx.setupTreeKeyboard(tree);
+    const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
+    if (tree) ctx.setupTreeKeyboard(tree);
   }
 }

package/src/panels/overlays.js

@@ -4,42 +4,83 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
+import { canvasPanels, pathsEqual } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
-import {
-  findCanvasElement,
-  getActivePanel,
-  overlayBoxDescriptor,
-} from "../canvas/canvas-helpers.js";
+import { findCanvasElement, getActivePanel, effectiveZoom } from "../canvas/canvas-helpers.js";
 import { layoutElements } from "../canvas/canvas-live-render.js";
 
-/** @type {any} */
+/**
+ * @typedef {{
+ *   cls: string;
+ *   top: string;
+ *   left: string;
+ *   width: string;
+ *   height: string;
+ *   border?: string;
+ *   isLayout?: boolean;
+ * }} OverlayBox
+ */
+
+/**
+ * @typedef {{
+ *   getCanvasMode: () => string;
+ *   isEditing: () => boolean;
+ *   renderBlockActionBar: () => void;
+ * }} OverlaysCtx
+ */
+
+/** @type {OverlaysCtx | null} */
 let _ctx = null;
 
-/** @type {(() => void) | null} */
-let _unsub = null;
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+let _scheduled = false;
 
 /**
  * Mount the overlays panel.
  *
- * @param {any} ctx — { getCanvasMode, isEditing, renderBlockActionBar }
+ * @param {OverlaysCtx} ctx
  */
 export function mount(ctx) {
   _ctx = ctx;
-  _unsub = subscribe((change) => {
-    if (change.selection || change.hover || change.mode || change.ui || change.doc) render();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Track selection, hover, and mode
+      void tab.session.selection;
+      void tab.session.hover;
+      void tab.doc.mode;
+      render();
+    });
   });
 }
 
 export function unmount() {
-  _unsub?.();
-  _unsub = null;
+  _scope?.stop();
+  _scope = null;
   _ctx = null;
 }
 
 export function render() {
   if (!_ctx) return;
-  const S = getState();
+  if (!_scheduled) {
+    _scheduled = true;
+    queueMicrotask(_flush);
+  }
+}
+
+function _flush() {
+  _scheduled = false;
+  if (!_ctx) return;
+  const tab = activeTab.value;
+  if (!tab) return;
+  const { selection, hover } = tab.session;
+  const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx.getCanvasMode();
 
   if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "settings") {
@@ -55,7 +96,7 @@ export function render() {
   }
 
   if (canvasMode === "settings") {
-    const enable = S.ui.stylebookTab === "elements";
+    const enable = stylebookTab === "elements";
     for (const p of canvasPanels) {
       p.overlayClk.style.pointerEvents = enable ? "" : "none";
     }
@@ -72,33 +113,46 @@ export function render() {
   }
 
   for (const p of canvasPanels) {
-    /**
-     * @type {{
-     *   cls: string;
-     *   top: string;
-     *   left: string;
-     *   width: string;
-     *   height: string;
-     *   border?: string;
-     * }[]}
-     */
+    /** @type {OverlayBox[]} */
     const boxes = [];
 
-    if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = findCanvasElement(S.hover, p.canvas);
+    // Batch layout reads: read viewport geometry once per panel
+    const vpRect = p.viewport.getBoundingClientRect();
+    const scrollTop = p.viewport.scrollTop;
+    const scrollLeft = p.viewport.scrollLeft;
+    const scale = effectiveZoom();
+
+    if (hover && !pathsEqual(hover, selection)) {
+      const el = findCanvasElement(hover, p.canvas);
       if (el) {
-        const desc = overlayBoxDescriptor(el, "hover", p);
-        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
+        const elRect = el.getBoundingClientRect();
+        /** @type {OverlayBox} */
+        const desc = {
+          cls: "overlay-box overlay-hover",
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          width: `${elRect.width / scale}px`,
+          height: `${elRect.height / scale}px`,
+        };
+        if (layoutElements.has(el)) desc.isLayout = true;
         boxes.push(desc);
       }
     }
 
-    if (S.selection && p === getActivePanel()) {
-      const el = findCanvasElement(S.selection, p.canvas);
+    if (selection && p === getActivePanel()) {
+      const el = findCanvasElement(selection, p.canvas);
       if (el) {
-        const desc = overlayBoxDescriptor(el, "selection", p);
-        if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";
-        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
+        const elRect = el.getBoundingClientRect();
+        /** @type {OverlayBox} */
+        const desc = {
+          cls: "overlay-box overlay-selection",
+          top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
+          left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
+          width: `${elRect.width / scale}px`,
+          height: `${elRect.height / scale}px`,
+        };
+        if (view.componentInlineEdit || _ctx.isEditing()) desc.border = "none";
+        if (layoutElements.has(el)) desc.isLayout = true;
         boxes.push(desc);
       }
     }
@@ -109,16 +163,12 @@ export function render() {
         ${boxes.map(
           (b) => html`
             <div
-              class="${b.cls}${/** @type {any} */ (b).isLayout ? " overlay-layout" : ""}"
+              class="${b.cls}${b.isLayout ? " overlay-layout" : ""}"
               style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}${b.border
                 ? `;border:${b.border}`
                 : ""}"
             >
-              ${
-                /** @type {any} */ (b).isLayout
-                  ? html`<span class="overlay-layout-badge">Layout</span>`
-                  : nothing
-              }
+              ${b.isLayout ? html`<span class="overlay-layout-badge">Layout</span>` : nothing}
             </div>
           `,
         )}

package/src/panels/panel-events.js

@@ -5,18 +5,15 @@
  */
 
 import {
-  update,
   updateUi,
-  selectNode,
-  hoverNode,
   elToPath,
   pathsEqual,
-  insertNode,
   parentElementPath,
   childIndex,
   getNodeAtPath,
   renderOnly,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
 import { showContextMenu } from "../editor/context-menu.js";
@@ -32,8 +29,6 @@ let _ctx = null;
  * Initialize the panel events module.
  *
  * @param {{
- *   getState: () => any;
- *   setState: (s: any) => void;
  *   getCanvasMode: () => string;
  *   enterInlineEdit: (el: any, path: any) => void;
  *   navigateToComponent: (path: any) => void;
@@ -79,7 +74,7 @@ export function registerPanelEvents(panel) {
         stopEditing();
       }
 
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const canvasMode = _ctx.getCanvasMode();
 
       const elements = withPanelPointerEvents(() =>
@@ -91,7 +86,7 @@ export function registerPanelEvents(panel) {
           // Layout element clicked — show layout info instead of selecting in page doc
           if (layoutElements.has(el)) {
             view.layoutSelection = { el, layoutPath: activeLayoutPath };
-            update(selectNode(S, null));
+            activeTab.value.session.selection = null;
             renderOnly("rightPanel");
             return;
           }
@@ -99,34 +94,35 @@ export function registerPanelEvents(panel) {
 
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = bubbleInlinePath(S.document, originalPath);
+            let path = bubbleInlinePath(tab?.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
 
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
-              pathsEqual(path, S.selection) &&
+              pathsEqual(path, tab?.session.selection) &&
               isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || S.mode === "content")
+              (canvasMode === "edit" || tab?.doc.mode === "content")
             ) {
-              _ctx.setState(withMedia);
+              activeTab.value.session.ui.activeMedia = newMedia;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
 
-            if (canvasMode === "design" && S.mode !== "content") {
+            if (canvasMode === "design" && tab?.doc.mode !== "content") {
               updateUi("pendingInlineEdit", { path, mediaName });
-              update(selectNode(withMedia, path));
+              activeTab.value.session.ui.activeMedia = newMedia;
+              activeTab.value.session.selection = path;
               return;
             }
 
-            update(selectNode(withMedia, path));
+            activeTab.value.session.ui.activeMedia = newMedia;
+            activeTab.value.session.selection = path;
             return;
           }
         }
       }
-      update(selectNode(S, null));
+      activeTab.value.session.selection = null;
     },
     opts,
   );
@@ -148,7 +144,7 @@ export function registerPanelEvents(panel) {
       const canvasMode = _ctx.getCanvasMode();
       if (canvasMode !== "edit" && canvasMode !== "design") return;
 
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
         document.elementsFromPoint(e.clientX, e.clientY),
       );
@@ -157,12 +153,12 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = bubbleInlinePath(S.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);
-              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
-              update(selectNode(withMedia, path));
+              activeTab.value.session.ui.activeMedia = newMedia;
+              activeTab.value.session.selection = path;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
@@ -187,7 +183,7 @@ export function registerPanelEvents(panel) {
         )
           return;
       }
-      const S = _ctx.getState();
+      const tab = activeTab.value;
       const elements = withPanelPointerEvents(() =>
         document.elementsFromPoint(e.clientX, e.clientY),
       );
@@ -195,8 +191,8 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
           if (path) {
-            path = bubbleInlinePath(S.document, path);
-            showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
+            path = bubbleInlinePath(tab?.doc.document, path);
+            showContextMenu(e, path, { onEditComponent: _ctx.navigateToComponent });
             return;
           }
         }
@@ -220,19 +216,19 @@ export function registerPanelEvents(panel) {
         )
           return;
       }
-      let S = _ctx.getState();
+      const tab = activeTab.value;
       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(S.document, path);
-          if (!pathsEqual(path, S.hover)) {
-            _ctx.setState(hoverNode(S, path));
+          path = bubbleInlinePath(tab?.doc.document, path);
+          if (!pathsEqual(path, tab?.session.hover)) {
+            activeTab.value.session.hover = path;
             renderOnly("overlays");
           }
         }
-      } else if (S.hover) {
-        _ctx.setState(hoverNode(S, null));
+      } else if (tab?.session.hover) {
+        activeTab.value.session.hover = null;
         renderOnly("overlays");
       }
     },
@@ -242,9 +238,8 @@ export function registerPanelEvents(panel) {
   overlayClk.addEventListener(
     "mouseleave",
     () => {
-      const S = _ctx.getState();
-      if (S.hover) {
-        _ctx.setState(hoverNode(S, null));
+      if (activeTab.value?.session.hover) {
+        activeTab.value.session.hover = null;
         renderOnly("overlays");
       }
     },
@@ -252,14 +247,10 @@ export function registerPanelEvents(panel) {
   );
 
   insertionHelper.mount({
-    getState: _ctx.getState,
-    update,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom: effectiveZoom,
     defaultDef,
-    insertNode,
-    selectNode,
     parentElementPath,
     childIndex,
     getNodeAtPath,

package/src/panels/preview-render.js

@@ -3,7 +3,8 @@
  * DOM from Jx node trees as a fallback when runtime rendering fails.
  */
 
-import { getState, elToPath } from "../store.js";
+import { elToPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { applyCanvasStyle } from "../utils/canvas-media.js";
 import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
 
@@ -32,7 +33,10 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   if (typeof node.textContent === "string") {
     el.textContent = node.textContent;
   } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
-    const resolved = resolveDefaultForCanvas(node.textContent, getState().document.state);
+    const resolved = resolveDefaultForCanvas(
+      node.textContent,
+      activeTab.value?.doc.document?.state,
+    );
     el.textContent = resolved;
     el.style.opacity = "0.7";
     el.style.fontStyle = "italic";
@@ -48,7 +52,7 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
     for (const [attr, val] of Object.entries(node.attributes)) {
       try {
         if (typeof val === "object" && val?.$ref) {
-          const resolved = resolveDefaultForCanvas(val, getState().document.state);
+          const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
           el.setAttribute(attr, resolved);
         } else {
           el.setAttribute(attr, val);