@jxsuite/studio 0.10.2 → 0.13.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 { 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.leftTab;
+      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 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 = S.ui.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,41 +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") {
@@ -54,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";
     }
@@ -71,28 +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);
-      if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
+    // 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 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";
+        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);
       }
     }
@@ -103,11 +163,13 @@ export function render() {
         ${boxes.map(
           (b) => html`
             <div
-              class=${b.cls}
+              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}`
                 : ""}"
-            ></div>
+            >
+              ${b.isLayout ? html`<span class="overlay-layout-badge">Layout</span>` : nothing}
+            </div>
           `,
         )}
       `,

package/src/panels/panel-events.js

@@ -5,24 +5,23 @@
  */
 
 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";
 import * as insertionHelper from "../editor/insertion-helper.js";
 import { defaultDef } from "../panels/shared.js";
 import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
+import { layoutElements, activeLayoutPath } from "../canvas/canvas-live-render.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -87,6 +86,15 @@ export function registerPanelEvents(panel) {
 
       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;
+            renderOnly("rightPanel");
+            return;
+          }
+          view.layoutSelection = null;
+
           const originalPath = elToPath.get(el);
           if (originalPath) {
             let path = bubbleInlinePath(S.document, originalPath);
@@ -107,16 +115,18 @@ export function registerPanelEvents(panel) {
 
             if (canvasMode === "design" && S.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,
   );
@@ -151,8 +161,8 @@ export function registerPanelEvents(panel) {
             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;
             }
@@ -243,13 +253,10 @@ export function registerPanelEvents(panel) {
 
   insertionHelper.mount({
     getState: _ctx.getState,
-    update,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom: effectiveZoom,
     defaultDef,
-    insertNode,
-    selectNode,
     parentElementPath,
     childIndex,
     getNodeAtPath,