@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/left-panel.js

@@ -24,15 +24,15 @@ import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
  * @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;
+ *   renderImportsTemplate: Function;
+ *   renderFilesTemplate: Function;
+ *   renderSignalsTemplate: Function;
+ *   renderDataExplorerTemplate: Function;
+ *   renderHeadTemplate: Function;
+ *   renderGitPanel: Function;
  *   renderCanvas: () => void;
- *   defCategory: (tag: string) => string;
- *   defBadgeLabel: (tag: string) => string;
+ *   defCategory: (def: unknown) => string;
+ *   defBadgeLabel: (def: unknown) => string;
  *   navigateToComponent: (path: string) => void;
  *   webdata: object;
  *   defaultDef: (tag: string) => object;
@@ -40,7 +40,9 @@ import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
  *   registerElementsDnD: () => void;
  *   registerComponentsDnD: () => void;
  *   setupTreeKeyboard: (tree: HTMLElement) => void;
- *   setGitDiffState: (state: any) => void;
+ *   registerFileTreeDnD: (ctx: { renderLeftPanel: () => void }) => void;
+ *   setGitDiffState: (state: import("../canvas/canvas-render.js").GitDiffState | null) => void;
+ *   cloneRepository?: () => void;
  * }} LeftPanelCtx
  */
 
@@ -52,6 +54,16 @@ let _scope = null;
 
 let _rendering = false;
 let _scheduled = false;
+let _hasFocus = false;
+
+function _onFocusIn() {
+  _hasFocus = true;
+}
+
+function _onFocusOut() {
+  _hasFocus = false;
+  render();
+}
 
 /**
  * Mount the left panel orchestrator.
@@ -60,20 +72,25 @@ let _scheduled = false;
  */
 export function mount(ctx) {
   _ctx = ctx;
+  leftPanel.addEventListener("focusin", _onFocusIn);
+  leftPanel.addEventListener("focusout", _onFocusOut);
   _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;
-      void tab.session.ui.gitStatus;
-      void tab.session.ui.gitLoading;
-      void tab.session.ui.gitError;
-      render();
+      if (tab) {
+        // Track properties the left panel reads
+        void tab.doc.document;
+        void tab.doc.mode;
+        void tab.session.selection;
+        void tab.session.ui.settingsTab;
+        void tab.session.ui.gitStatus;
+        void tab.session.ui.gitLoading;
+        void tab.session.ui.gitError;
+      }
+      if (!_hasFocus) {
+        render();
+      }
     });
   });
 }
@@ -82,6 +99,9 @@ export function unmount() {
   _scope?.stop();
   _scope = null;
   _ctx = null;
+  leftPanel.removeEventListener("focusin", _onFocusIn);
+  leftPanel.removeEventListener("focusout", _onFocusOut);
+  _hasFocus = false;
 }
 
 export function render() {
@@ -122,26 +142,78 @@ function _flush() {
 
 function _render() {
   const ctx = /** @type {LeftPanelCtx} */ (_ctx);
+  const tab = view.leftTab;
+
+  // ── Project-level panels: render based on projectState, independent of active tab ──
+
+  if (tab === "files") {
+    litRender(html`<div class="panel-body">${ctx.renderFilesTemplate()}</div>`, leftPanel);
+    const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
+    if (tree) ctx.setupTreeKeyboard(tree);
+    ctx.registerFileTreeDnD({ renderLeftPanel: render });
+    return;
+  }
+
+  if (tab === "git") {
+    const aTab = activeTab.value;
+    const S = aTab ? { ui: aTab.session.ui } : { ui: {} };
+    litRender(html`<div class="panel-body">${ctx.renderGitPanel(S, ctx)}</div>`, leftPanel);
+    return;
+  }
+
+  if (tab === "blocks") {
+    const content = renderElementsTemplate(
+      /** @type {Parameters<typeof renderElementsTemplate>[0]} */ ({
+        webdata: ctx.webdata,
+        defaultDef: ctx.defaultDef,
+        rerender: render,
+      }),
+    );
+    litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
+    ctx.registerElementsDnD();
+    ctx.registerComponentsDnD();
+    return;
+  }
+
+  // ── Document-level panels: require an active tab ──
+
   const aTab = activeTab.value;
-  if (!aTab) return;
-  const S = /** @type {any} */ ({
+  if (!aTab) {
+    litRender(html`<div class="panel-body"></div>`, leftPanel);
+    return;
+  }
+
+  const S = /**
+   * @type {{
+   *   ui: unknown;
+   *   document: JxMutableNode;
+   *   mode: string;
+   *   selection: JxPath | null;
+   *   canvas: { scope?: object } | null;
+   *   content?: { frontmatter?: Record<string, unknown> };
+   *   documentPath?: string;
+   * }}
+   */ ({
     ui: aTab.session.ui,
     document: aTab.doc.document,
     mode: aTab.doc.mode,
     selection: aTab.session.selection,
     canvas: aTab.session.canvas,
+    content: aTab.doc.content,
+    documentPath: aTab.documentPath,
   });
-  const tab = view.leftTab;
 
   /** @type {TemplateResult | typeof nothing} */
   let content;
   if (tab === "layers")
     content =
       ctx.getCanvasMode() === "stylebook"
-        ? renderStylebookLayersTemplate({
-            selectStylebookTag,
-            stylebookMeta,
-          })
+        ? renderStylebookLayersTemplate(
+            /** @type {Parameters<typeof renderStylebookLayersTemplate>[0]} */ ({
+              selectStylebookTag,
+              stylebookMeta,
+            }),
+          )
         : renderLayersTemplate({
             navigateToComponent: ctx.navigateToComponent,
             rerender: render,
@@ -155,13 +227,6 @@ function _render() {
         transact(activeTab.value, fn);
       },
     });
-  else if (tab === "files") content = ctx.renderFilesTemplate();
-  else if (tab === "blocks")
-    content = renderElementsTemplate({
-      webdata: ctx.webdata,
-      defaultDef: ctx.defaultDef,
-      rerender: render,
-    });
   else if (tab === "state")
     content = ctx.renderSignalsTemplate(S, {
       renderLeftPanel: render,
@@ -184,33 +249,25 @@ function _render() {
       applyMutation: isContent
         ? (/** @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 };
+            const fm = /** @type {Record<string, unknown>} */ (tab.doc.content?.frontmatter ?? {});
+            const fmHead = /** @type {unknown[] | undefined} */ (fm.$head);
+            const tmp = { title: fm.title, $head: fmHead ? [...fmHead] : undefined };
             fn(tmp);
             if (tmp.title !== fm.title)
-              mutateUpdateFrontmatter(tab, "title", /** @type {any} */ (tmp.title));
+              mutateUpdateFrontmatter(tab, "title", /** @type {JsonValue} */ (tmp.title));
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            mutateUpdateFrontmatter(tab, "$head", newHead);
+            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ (newHead));
+            render();
           }
         : (/** @type {(doc: object) => void} */ fn) => {
             transact(activeTab.value, fn);
           },
       renderLeftPanel: render,
     });
-  } else if (tab === "git") content = ctx.renderGitPanel(S, ctx);
-  else content = nothing;
+  } else content = nothing;
 
   litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
   if (tab === "layers" && ctx.getCanvasMode() !== "stylebook") ctx.registerLayersDnD();
-  else if (tab === "imports") {
-    /* no post-render DnD needed */
-  } else if (tab === "blocks") {
-    ctx.registerElementsDnD();
-    ctx.registerComponentsDnD();
-  } else if (tab === "files") {
-    const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
-    if (tree) ctx.setupTreeKeyboard(tree);
-  }
 }

package/src/panels/overlays.js

@@ -118,6 +118,7 @@ function _flush() {
     const boxes = [];
 
     // Batch layout reads: read viewport geometry once per panel
+    if (!p.viewport) continue;
     const vpRect = p.viewport.getBoundingClientRect();
     const scrollTop = p.viewport.scrollTop;
     const scrollLeft = p.viewport.scrollLeft;

package/src/panels/panel-events.js

@@ -22,32 +22,39 @@ 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} */
+/** @type {PanelEventsCtx | null} */
 let _ctx = null;
 
+/**
+ * @typedef {{
+ *   getCanvasMode: () => string;
+ *   enterInlineEdit: (el: HTMLElement, path: JxPath) => void;
+ *   navigateToComponent: (path: string) => void;
+ * }} PanelEventsCtx
+ */
+
 /**
  * Initialize the panel events module.
  *
- * @param {{
- *   getCanvasMode: () => string;
- *   enterInlineEdit: (el: any, path: any) => void;
- *   navigateToComponent: (path: any) => void;
- * }} ctx
+ * @param {PanelEventsCtx} ctx
  */
 export function initPanelEvents(ctx) {
   _ctx = ctx;
 }
 
-/** @param {any} panel */
+/** @param {import("../canvas/canvas-render.js").CanvasPanel} panel */
 export function registerPanelEvents(panel) {
-  const { canvas, overlayClk, mediaName } = panel;
+  const ctx = /** @type {PanelEventsCtx} */ (_ctx);
+  const canvas = /** @type {HTMLElement} */ (panel.canvas);
+  const overlayClk = /** @type {HTMLElement} */ (panel.overlayClk);
+  const { mediaName } = panel;
   const ac = new AbortController();
   const opts = { signal: ac.signal };
   view.canvasEventCleanups.push(() => ac.abort());
 
-  /** @param {any} fn */
+  /** @param {Function} fn */
   function withPanelPointerEvents(fn) {
-    const els = canvas.querySelectorAll("*");
+    const els = /** @type {NodeListOf<HTMLElement>} */ (canvas.querySelectorAll("*"));
     for (const el of els) el.style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const result = fn();
@@ -58,7 +65,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "click",
-    (/** @type {any} */ e) => {
+    (/** @type {MouseEvent} */ e) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -75,10 +82,10 @@ export function registerPanelEvents(panel) {
       }
 
       const tab = activeTab.value;
-      const canvasMode = _ctx.getCanvasMode();
+      const canvasMode = ctx.getCanvasMode();
 
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
+      const elements = /** @type {Element[]} */ (
+        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
       );
 
       if (!tab) return;
@@ -99,7 +106,9 @@ export function registerPanelEvents(panel) {
             let path = bubbleInlinePath(tab.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
 
-            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+            const resolvedEl = /** @type {HTMLElement} */ (
+              path === originalPath ? el : findCanvasElement(path, canvas) || el
+            );
 
             if (
               pathsEqual(path, tab.session.selection) &&
@@ -107,7 +116,7 @@ export function registerPanelEvents(panel) {
               (canvasMode === "edit" || tab.doc.mode === "content")
             ) {
               tab.session.ui.activeMedia = newMedia;
-              _ctx.enterInlineEdit(resolvedEl, path);
+              ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
 
@@ -131,7 +140,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "dblclick",
-    (/** @type {any} */ e) => {
+    (/** @type {MouseEvent} */ e) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -143,12 +152,12 @@ export function registerPanelEvents(panel) {
         )
           return;
       }
-      const canvasMode = _ctx.getCanvasMode();
+      const canvasMode = ctx.getCanvasMode();
       if (canvasMode !== "edit" && canvasMode !== "design") return;
 
       const tab = activeTab.value;
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
+      const elements = /** @type {Element[]} */ (
+        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
       );
 
       if (!tab) return;
@@ -158,12 +167,14 @@ export function registerPanelEvents(panel) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
             const path = bubbleInlinePath(tab.doc.document, originalPath);
-            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+            const resolvedEl = /** @type {HTMLElement} */ (
+              path === originalPath ? el : findCanvasElement(path, canvas) || el
+            );
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
               tab.session.ui.activeMedia = newMedia;
               tab.session.selection = path;
-              _ctx.enterInlineEdit(resolvedEl, path);
+              ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
           }
@@ -175,7 +186,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "contextmenu",
-    (/** @type {any} */ e) => {
+    (/** @type {MouseEvent} */ e) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -188,15 +199,15 @@ export function registerPanelEvents(panel) {
           return;
       }
       const tab = activeTab.value;
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
+      const elements = /** @type {Element[]} */ (
+        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
       );
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
           if (path) {
             path = bubbleInlinePath(tab?.doc.document, path);
-            showContextMenu(e, path, { onEditComponent: _ctx.navigateToComponent });
+            showContextMenu(e, path, { onEditComponent: ctx.navigateToComponent });
             return;
           }
         }
@@ -208,7 +219,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "mousemove",
-    (/** @type {any} */ e) => {
+    (/** @type {MouseEvent} */ e) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -222,7 +233,9 @@ export function registerPanelEvents(panel) {
       }
       const tab = activeTab.value;
       if (!tab) return;
-      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+      const el = /** @type {Element | null} */ (
+        withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY))
+      );
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
@@ -252,7 +265,7 @@ export function registerPanelEvents(panel) {
   );
 
   insertionHelper.mount({
-    getCanvasMode: _ctx.getCanvasMode,
+    getCanvasMode: ctx.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom: effectiveZoom,
     defaultDef,
@@ -260,7 +273,9 @@ export function registerPanelEvents(panel) {
     childIndex,
     getNodeAtPath,
     elToPath,
-    panel,
+    panel: /** @type {import("../editor/insertion-helper.js").CanvasPanel} */ (
+      /** @type {unknown} */ (panel)
+    ),
   });
   view.canvasEventCleanups.push(() => insertionHelper.unmount());
 }

package/src/panels/preview-render.js

@@ -12,11 +12,11 @@ import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
  * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
  * breakpoint/feature overrides.
  *
- * @param {any} node
- * @param {any} path
- * @param {any} parent
- * @param {any} activeBreakpoints
- * @param {any} featureToggles
+ * @param {JxMutableNode | string | number | boolean | null | undefined} node
+ * @param {JxPath} path
+ * @param {HTMLElement} parent
+ * @param {Set<string>} activeBreakpoints
+ * @param {Record<string, boolean>} featureToggles
  */
 export function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles) {
   if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
@@ -32,15 +32,15 @@ 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,
-      activeTab.value?.doc.document?.state,
-    );
-    el.textContent = resolved;
-    el.style.opacity = "0.7";
-    el.style.fontStyle = "italic";
-    el.title = `Bound: ${node.textContent.$ref}`;
+  } else if (typeof node.textContent === "object" && node.textContent !== null) {
+    const tc = /** @type {Record<string, unknown>} */ (node.textContent);
+    if (tc.$ref) {
+      const resolved = resolveDefaultForCanvas(tc, activeTab.value?.doc.document?.state);
+      el.textContent = /** @type {string | null} */ (resolved);
+      el.style.opacity = "0.7";
+      el.style.fontStyle = "italic";
+      el.title = `Bound: ${tc.$ref}`;
+    }
   }
 
   if (node.id) el.id = node.id;
@@ -51,9 +51,13 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   if (node.attributes && typeof node.attributes === "object") {
     for (const [attr, val] of Object.entries(node.attributes)) {
       try {
-        if (typeof val === "object" && val?.$ref) {
+        if (
+          typeof val === "object" &&
+          val !== null &&
+          /** @type {Record<string, unknown>} */ (val).$ref
+        ) {
           const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
-          el.setAttribute(attr, resolved);
+          el.setAttribute(attr, /** @type {string} */ (resolved));
         } else {
           el.setAttribute(attr, val);
         }
@@ -74,9 +78,10 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   } else if (
     node.children &&
     typeof node.children === "object" &&
-    node.children.$prototype === "Array"
+    /** @type {Record<string, unknown>} */ (node.children).$prototype === "Array"
   ) {
-    const template = node.children.map;
+    const childrenObj = /** @type {Record<string, unknown>} */ (node.children);
+    const template = childrenObj.map;
     if (template && typeof template === "object") {
       const wrapper = document.createElement("div");
       wrapper.className = "repeater-perimeter";