@jxsuite/studio 0.28.2 → 0.28.4

package/src/canvas/canvas-helpers.ts

@@ -5,11 +5,12 @@
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath } from "../store";
+import { canvasPanels, elToPath, getNodeAtPath, parentElementPath, pathsEqual } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { isInlineInContext } from "../editor/inline-edit";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { CanvasPanel } from "../panels/canvas-dnd.js";
 
 let _ctx: { getCanvasMode: () => string; getZoom: () => number } | null = null;
 
@@ -30,14 +31,33 @@ export function effectiveZoom() {
     : (ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
 }
 
+/**
+ * Convert a canvas panel's mediaName to an activeMedia value. Panels without a breakpoint (content
+ * mode, single-panel docs) carry "" or "base" — both mean the base style context (null).
+ *
+ * @param {string | null | undefined} mediaName
+ * @returns {string | null}
+ */
+export function panelMediaToActiveMedia(mediaName: string | null | undefined) {
+  return !mediaName || mediaName === "base" ? null : mediaName;
+}
+
 /** Return the active canvas panel based on the current activeMedia setting. */
 export function getActivePanel() {
-  if (canvasPanels.length === 0) return null;
-  if (canvasPanels.length === 1) return canvasPanels[0];
+  if (canvasPanels.length === 0) {
+    return null;
+  }
+  if (canvasPanels.length === 1) {
+    return canvasPanels[0];
+  }
   const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    if (activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) return p;
-    if (p.mediaName === activeMedia) return p;
+    if (activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) {
+      return p;
+    }
+    if (p.mediaName === activeMedia) {
+      return p;
+    }
   }
   return canvasPanels[0];
 }
@@ -50,16 +70,22 @@ export function getActivePanel() {
  * @param {JxPath} path
  */
 export function bubbleInlinePath(doc: JxMutableNode | undefined, path: JxPath) {
-  if (!doc) return path;
+  if (!doc) {
+    return path;
+  }
   let currentPath = path;
   while (currentPath.length >= 2) {
     const node = getNodeAtPath(doc, currentPath);
     const pPath = parentElementPath(currentPath);
     const parentNode = pPath ? getNodeAtPath(doc, pPath) : null;
-    if (!node || !parentNode) break;
+    if (!node || !parentNode) {
+      break;
+    }
     const childTag = (node.tagName ?? "div").toLowerCase();
     const parentTag = (parentNode.tagName ?? "div").toLowerCase();
-    if (!isInlineInContext(childTag, parentTag)) break;
+    if (!isInlineInContext(childTag, parentTag)) {
+      break;
+    }
     currentPath = pPath as JxPath;
   }
   return currentPath;
@@ -74,11 +100,17 @@ export function bubbleInlinePath(doc: JxMutableNode | undefined, path: JxPath) {
  */
 export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
   let el: HTMLElement | null | undefined = canvasEl.firstElementChild as HTMLElement | null;
-  if (!el) return null;
-  if (path.length === 0) return el;
+  if (!el) {
+    return null;
+  }
+  if (path.length === 0) {
+    return el;
+  }
 
   for (let i = 0; i < path.length; i += 2) {
-    if (path[i] !== "children" && path[i] !== "cases") return null;
+    if (path[i] !== "children" && path[i] !== "cases") {
+      return null;
+    }
     const idx = path[i + 1];
     if (idx === undefined) {
       el = el.children[0] as HTMLElement | undefined;
@@ -87,17 +119,23 @@ export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
     } else {
       el = el.children[idx as number] as HTMLElement | undefined;
     }
-    if (!el) break;
+    if (!el) {
+      break;
+    }
   }
 
   if (el) {
     const elPath = elToPath.get(el);
-    if (elPath && pathsEqual(elPath, path)) return el;
+    if (elPath && pathsEqual(elPath, path)) {
+      return el;
+    }
   }
 
   for (const candidate of canvasEl.querySelectorAll("*")) {
     const p = elToPath.get(candidate);
-    if (p && pathsEqual(p, path)) return candidate as HTMLElement;
+    if (p && pathsEqual(p, path)) {
+      return candidate as HTMLElement;
+    }
   }
   return null;
 }
@@ -109,20 +147,16 @@ export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
  * @param {string} type
  * @param {import("../panels/canvas-dnd.js").CanvasPanel} panel
  */
-export function overlayBoxDescriptor(
-  el: Element,
-  type: string,
-  panel: import("../panels/canvas-dnd.js").CanvasPanel,
-) {
+export function overlayBoxDescriptor(el: Element, type: string, panel: CanvasPanel) {
   const viewport = panel.viewport as HTMLElement;
   const vpRect = viewport.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   const scale = effectiveZoom();
   return {
     cls: `overlay-box overlay-${type}`,
-    top: `${(elRect.top - vpRect.top + viewport.scrollTop) / scale}px`,
+    height: `${elRect.height / scale}px`,
     left: `${(elRect.left - vpRect.left + viewport.scrollLeft) / scale}px`,
+    top: `${(elRect.top - vpRect.top + viewport.scrollTop) / scale}px`,
     width: `${elRect.width / scale}px`,
-    height: `${elRect.height / scale}px`,
   };
 }

package/src/canvas/canvas-live-render.ts

@@ -6,33 +6,35 @@
  * mapping ($map remapping), site-level style injection, and $head element injection.
  */
 
-import { elToPath, stripEventHandlers, projectState } from "../store";
+import { elToPath, projectState, stripEventHandlers } from "../store";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 import { toRaw } from "../reactivity";
 import {
-  renderNode as runtimeRenderNode,
   buildScope,
   defineElement,
+  renderNode as runtimeRenderNode,
   setSkipServerFunctions,
 } from "@jxsuite/runtime";
 import {
+  distributePageIntoLayout,
   getEffectiveElements,
-  getEffectiveImports,
-  getEffectiveMedia,
   getEffectiveHead,
+  getEffectiveImports,
   getEffectiveLayoutPath,
+  getEffectiveMedia,
   resolveLayoutDoc,
-  distributePageIntoLayout,
 } from "../site-context";
 import { componentRegistry, computeRelativePath } from "../files/components";
 import { prepareForEditMode } from "../utils/edit-display";
 import { getActiveElement } from "../editor/inline-edit";
 import { buildNestedSiteCSS } from "./nested-site-style";
 
-export { buildNestedSiteCSS } from "./nested-site-style";
+import type { JxDocument, JxElement, JxMutableNode } from "@jxsuite/schema/types";
+import type { ComponentEntry } from "../files/components.js";
 
-import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
+export { buildNestedSiteCSS } from "./nested-site-style";
 
 /** @param {Event} e */
 function _preventNav(e: Event) {
@@ -67,10 +69,11 @@ function findPageContentPrefix(
   node: JxMutableNode,
   path: (string | number)[] = [],
 ): (string | number)[] | null {
-  if (!node || typeof node !== "object") return null;
+  if (!node || typeof node !== "object") {
+    return null;
+  }
   if (Array.isArray(node.children)) {
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
+    for (const child of node.children) {
       if (child && typeof child === "object" && !child.$__layout) {
         return [...path, "children"];
       }
@@ -79,7 +82,9 @@ function findPageContentPrefix(
       const child = node.children[i];
       if (child && typeof child === "object" && child.$__layout) {
         const found = findPageContentPrefix(child, [...path, "children", i]);
-        if (found) return found;
+        if (found) {
+          return found;
+        }
       }
     }
   }
@@ -94,17 +99,23 @@ export let activeLayoutPath = null as string | null;
  * rendered DOM elements came from the layout vs page content.
  */
 function markLayoutNodes(node: JxMutableNode) {
-  if (!node || typeof node !== "object") return;
+  if (!node || typeof node !== "object") {
+    return;
+  }
   node.$__layout = true;
   if (Array.isArray(node.children)) {
     for (const child of node.children) {
-      if (typeof child === "string") continue;
+      if (typeof child === "string") {
+        continue;
+      }
       markLayoutNodes(child);
     }
   }
   if (node.$elements) {
     for (const el of node.$elements) {
-      if (typeof el !== "string") markLayoutNodes(el);
+      if (typeof el !== "string") {
+        markLayoutNodes(el as JxMutableNode);
+      }
     }
   }
 }
@@ -132,9 +143,9 @@ export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
 export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl: HTMLElement) {
   const tab = activeTab.value;
   const S = {
+    document: tab?.doc.document,
     documentPath: tab?.documentPath,
     mode: tab?.doc.mode,
-    document: tab?.doc.document,
   };
   const canvasMode = _ctx!.getCanvasMode();
 
@@ -144,8 +155,8 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
   }
 
   // Suppress server function resolution in non-preview modes to avoid
-  // failed proxy calls and infinite reactive retries (also covers
-  // async custom element connectedCallbacks that run after this function returns)
+  // Failed proxy calls and infinite reactive retries (also covers
+  // Async custom element connectedCallbacks that run after this function returns)
   setSkipServerFunctions(canvasMode !== "preview");
 
   let renderDoc =
@@ -172,7 +183,9 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
     if (layoutPath) {
       const layoutDoc = await resolveLayoutDoc(layoutPath);
       if (layoutDoc) {
-        if (gen !== view.renderGeneration) return null;
+        if (gen !== view.renderGeneration) {
+          return null;
+        }
         activeLayoutPath = layoutPath.replace(/^\.\//, "");
         markLayoutNodes(layoutDoc);
         const pageForSlots = canvasMode === "preview" ? structuredClone(toRaw(doc)) : renderDoc;
@@ -186,11 +199,13 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
   }
 
   // In edit mode, collect paths where $map templates were inlined as children[0]
-  // so we can remap runtime paths (children,0,...) → (children,map,...)
+  // So we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
   if (canvasMode === "design" || canvasMode === "edit") {
     (function findMapParents(node: JxMutableNode, path: (string | number)[]) {
-      if (!node || typeof node !== "object") return;
+      if (!node || typeof node !== "object") {
+        return;
+      }
       if (
         node.children &&
         typeof node.children === "object" &&
@@ -201,7 +216,9 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       if (Array.isArray(node.children)) {
         for (let i = 0; i < node.children.length; i++) {
           const child = node.children[i];
-          if (typeof child === "string") continue;
+          if (typeof child === "string") {
+            continue;
+          }
           findMapParents(child, [...path, "children", i]);
         }
       }
@@ -219,32 +236,38 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
     const docBase = S.documentPath ? `${location.origin}/${docPrefix}${S.documentPath}` : undefined;
 
     // Register custom elements so the runtime can render them
-    let effectiveElements = getEffectiveElements(renderDoc.$elements as (JxElement | string)[]);
+    const effectiveElements = getEffectiveElements(renderDoc.$elements as (JxElement | string)[]);
 
     // In content mode (markdown) or when a layout is applied, auto-discover components
-    // for custom elements that have no explicit $elements registration.
+    // For custom elements that have no explicit $elements registration.
     if ((S.mode === "content" || layoutWrapped) && componentRegistry.length > 0) {
       const existingRefs = new Set(
         effectiveElements.map((e: JxElement | string) => (typeof e === "string" ? e : e?.$ref)),
       );
       /** @param {JxMutableNode} node */
       const collectTags = (node: JxMutableNode) => {
-        const tags: Set<string> = new Set();
-        if (!node || typeof node !== "object") return tags;
-        if (node.tagName) tags.add(node.tagName);
+        const tags = new Set<string>();
+        if (!node || typeof node !== "object") {
+          return tags;
+        }
+        if (node.tagName) {
+          tags.add(node.tagName);
+        }
         if (Array.isArray(node.children)) {
           for (const child of node.children) {
-            if (typeof child === "string") continue;
-            for (const t of collectTags(child)) tags.add(t);
+            if (typeof child === "string") {
+              continue;
+            }
+            for (const t of collectTags(child)) {
+              tags.add(t);
+            }
           }
         }
         return tags;
       };
       for (const tag of collectTags(renderDoc)) {
-        const comp = componentRegistry.find(
-          (c: import("../files/components.js").ComponentEntry) => c.tagName === tag,
-        );
-        if (comp && comp.source !== "npm") {
+        const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tag);
+        if (comp && comp.source !== "npm" && comp.path) {
           const relPath = computeRelativePath(S.documentPath ?? null, comp.path);
           if (!existingRefs.has(relPath)) {
             effectiveElements.push({ $ref: relPath });
@@ -254,7 +277,7 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       }
     }
 
-    if (effectiveElements.length) {
+    if (effectiveElements.length > 0) {
       renderDoc.$elements = effectiveElements as (string | JxMutableNode | { $ref: string })[];
       for (const entry of effectiveElements) {
         if (typeof entry === "string") {
@@ -262,39 +285,43 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
             const specifier =
               entry.startsWith("/") || entry.startsWith(".") ? entry : `/node_modules/${entry}`;
             await import(specifier);
-          } catch (e) {
-            console.warn("Studio: failed to import package", entry, e);
+          } catch (error) {
+            console.warn("Studio: failed to import package", entry, error);
           }
         } else if (entry?.$ref) {
           let href;
           try {
-            href = new URL(entry.$ref, docBase).href;
-          } catch (urlErr) {
-            console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
+            ({ href } = new URL(entry.$ref, docBase));
+          } catch (error) {
+            console.warn("Studio: invalid element URL", { docBase, ref: entry.$ref }, error);
+            continue;
+          }
+          if (_failedElements.has(href)) {
             continue;
           }
-          if (_failedElements.has(href)) continue;
           try {
             await defineElement(href);
-          } catch (e) {
+          } catch (error) {
             _failedElements.add(href);
-            console.warn("Studio: failed to register element", entry.$ref, e);
+            console.warn("Studio: failed to register element", entry.$ref, error);
           }
         }
       }
     }
 
     // Bail out if a newer render started while we were importing elements
-    if (gen !== view.renderGeneration) return null;
+    if (gen !== view.renderGeneration) {
+      return null;
+    }
 
     // Inject site-level imports so buildScope can resolve $prototype names
     renderDoc.imports = getEffectiveImports(renderDoc.imports);
 
     // Apply project-level styles mirroring the compiler convention:
-    //   viewport ≈ :root  → CSS custom properties (they inherit down)
-    //   canvasEl ≈ body   → regular CSS properties (inline beats CSS defaults)
+    //   Viewport ≈ :root  → CSS custom properties (they inherit down)
+    //   CanvasEl ≈ body   → regular CSS properties (inline beats CSS defaults)
     // This ensures project font-family, color, etc. override the
-    // content-mode fallback typography rules in the stylesheet.
+    // Content-mode fallback typography rules in the stylesheet.
     // In edit mode, propagate to the .content-edit-canvas wrapper for seamless appearance.
     const viewport = canvasEl.closest(".canvas-panel-viewport") as HTMLElement | null;
     const editSurface =
@@ -306,7 +333,9 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       viewport.style.cssText = "";
       if (siteStyle && typeof siteStyle === "object") {
         for (const [k, v] of Object.entries(siteStyle)) {
-          if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
+          if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+            continue;
+          }
           if (k.startsWith("--")) {
             viewport.style.setProperty(k, String(v));
           } else {
@@ -315,21 +344,23 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
         }
       }
     }
-    if (editSurface) {
-      if (siteStyle && typeof siteStyle === "object") {
-        for (const [k, v] of Object.entries(siteStyle)) {
-          if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
-          if (k.startsWith("--")) {
-            editSurface.style.setProperty(k, String(v));
-          } else {
-            (editSurface.style as unknown as Record<string, string>)[k] = String(v);
-          }
+    if (editSurface && siteStyle && typeof siteStyle === "object") {
+      for (const [k, v] of Object.entries(siteStyle)) {
+        if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+          continue;
+        }
+        if (k.startsWith("--")) {
+          editSurface.style.setProperty(k, String(v));
+        } else {
+          (editSurface.style as unknown as Record<string, string>)[k] = String(v);
         }
       }
     }
     if (siteStyle && typeof siteStyle === "object") {
       for (const [k, v] of Object.entries(siteStyle)) {
-        if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
+        if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+          continue;
+        }
         if (!k.startsWith("--")) {
           (canvasEl.style as unknown as Record<string, string>)[k] = String(v);
         }
@@ -343,12 +374,14 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       const css = buildNestedSiteCSS(siteStyle, `[${scopeAttr}]`);
 
       if (css) {
-        const existingStyleEl = document.getElementById("jx-site-style");
-        if (existingStyleEl) existingStyleEl.remove();
+        const existingStyleEl = document.querySelector("#jx-site-style");
+        if (existingStyleEl) {
+          existingStyleEl.remove();
+        }
         const styleEl = document.createElement("style");
         styleEl.id = "jx-site-style";
         styleEl.textContent = css;
-        document.head.appendChild(styleEl);
+        document.head.append(styleEl);
       }
     }
 
@@ -357,13 +390,17 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
 
     // Inject $head elements (link/meta/script) into document.head
     const effectiveHead = getEffectiveHead(renderDoc.$head);
-    if (effectiveHead.length) {
+    if (effectiveHead.length > 0) {
       for (const entry of effectiveHead) {
-        if (!entry?.tagName) continue;
+        if (!entry?.tagName) {
+          continue;
+        }
         const tag = entry.tagName.toLowerCase();
         // Skip inline scripts — they can contain arbitrary JS/HTML that throws
-        // when the browser tries to execute it in the studio context
-        if (tag === "script" && !entry.attributes?.src) continue;
+        // When the browser tries to execute it in the studio context
+        if (tag === "script" && !entry.attributes?.src) {
+          continue;
+        }
         const attrs = { ...entry.attributes };
         for (const key of ["href", "src"]) {
           const val = attrs[key];
@@ -377,34 +414,45 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
           }
         }
         const selector = `${tag}${attrs.href ? `[href="${attrs.href}"]` : ""}${attrs.src ? `[src="${attrs.src}"]` : ""}`;
-        if (selector !== tag && document.head.querySelector(selector)) continue;
+        if (selector !== tag && document.head.querySelector(selector)) {
+          continue;
+        }
         const el = document.createElement(tag);
-        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
-        if (entry.textContent) el.textContent = entry.textContent;
-        document.head.appendChild(el);
+        for (const [k, v] of Object.entries(attrs)) {
+          el.setAttribute(k, String(v));
+        }
+        if (entry.textContent) {
+          el.textContent = entry.textContent;
+        }
+        document.head.append(el);
       }
     }
 
-    const $defs = await buildScope(renderDoc, {}, docBase);
+    const $defs = await buildScope(renderDoc as JxDocument, {}, docBase);
     // Bail out if a newer render started while buildScope was running
-    if (gen !== view.renderGeneration) return null;
+    if (gen !== view.renderGeneration) {
+      return null;
+    }
     const el = /** @type {HTMLElement} */ runtimeRenderNode(renderDoc, $defs, {
+      _path: [],
       onNodeCreated(
-        el: HTMLElement | Text,
+        created: HTMLElement | Text,
         path: (string | number)[],
-        def: Record<string, unknown>,
+        def: JxElement | string,
       ) {
-        if (!(el instanceof HTMLElement)) return;
+        if (!(created instanceof HTMLElement)) {
+          return;
+        }
         // Track layout-originated elements — don't store in elToPath to avoid
-        // path collisions with remapped page content paths
-        if (layoutWrapped && def?.$__layout) {
-          layoutElements.add(el);
-          if (el.setAttribute) el.setAttribute("data-jx-layout", "");
+        // Path collisions with remapped page content paths
+        if (layoutWrapped && typeof def === "object" && def?.$__layout) {
+          layoutElements.add(created);
+          created.dataset.jxLayout = "";
           return;
         }
 
         // Remap layout-wrapped paths: strip the layout prefix so paths are
-        // relative to the original page document (which is what S.document holds)
+        // Relative to the original page document (which is what S.document holds)
         let mappedPath = path;
         if (layoutWrapped && pageContentPrefix) {
           const pfx = pageContentPrefix;
@@ -417,7 +465,7 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
         }
 
         // Remap $map paths: wrapper and template children → real document paths
-        // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
+        // PrepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
         // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
         if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
           for (let i = 0; i < mappedPath.length - 1; i++) {
@@ -443,11 +491,10 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
             }
           }
         }
-        elToPath.set(el, mappedPath);
+        elToPath.set(created, mappedPath);
       },
-      _path: [],
     });
-    if (canvasMode === "design" || canvasMode === "edit") {
+    if ((canvasMode === "design" || canvasMode === "edit") && el instanceof HTMLElement) {
       // Disable pointer events on all rendered elements for edit mode
       el.style.pointerEvents = "none";
       for (const child of el.querySelectorAll("*")) {
@@ -455,15 +502,15 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       }
     }
     // Clear and append atomically — ensures the canvas is never left empty if a
-    // newer render starts and this one would have bailed after clearing.
+    // Newer render starts and this one would have bailed after clearing.
     canvasEl.innerHTML = "";
     if (S.mode === "content") {
-      canvasEl.setAttribute("data-content-mode", "");
+      canvasEl.dataset.contentMode = "";
     } else {
-      canvasEl.removeAttribute("data-content-mode");
+      delete canvasEl.dataset.contentMode;
     }
 
-    canvasEl.appendChild(el);
+    canvasEl.append(el);
 
     // Delegated click handler prevents link navigation in all canvas modes.
     // Attached once per canvasEl (survives reactive re-renders that replace children).
@@ -476,15 +523,19 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
       requestAnimationFrame(() => {
         const editingEl = getActiveElement();
         for (const child of canvasEl.querySelectorAll("*")) {
-          if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
-          if (editingEl && child === editingEl) continue;
+          if (view.componentInlineEdit && child === view.componentInlineEdit.el) {
+            continue;
+          }
+          if (editingEl && child === editingEl) {
+            continue;
+          }
           (child as HTMLElement).style.pointerEvents = "none";
         }
       });
     }
     return $defs;
-  } catch (err) {
-    console.warn("renderCanvasLive failed:", (err as Error).message, err);
+  } catch (error) {
+    console.warn("renderCanvasLive failed:", errorMessage(error), error);
     return null;
   }
 }