@jxsuite/studio 0.28.5 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.28.5",
+  "version": "0.30.1",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -23,18 +23,19 @@
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
+    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun run scripts/build-workers.ts",
+    "build:metafile": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked --metafile=metafile.json",
     "gen:webdata": "bun run scripts/gen-webdata.js",
     "test": "bun test --isolate",
     "test:coverage": "bun test --isolate --coverage",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
-    "@jxsuite/parser": "^0.28.5",
-    "@jxsuite/runtime": "^0.28.5",
-    "@jxsuite/schema": "^0.28.5",
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
+    "@jxsuite/parser": "^0.30.1",
+    "@jxsuite/runtime": "^0.30.1",
+    "@jxsuite/schema": "^0.30.1",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -78,11 +79,11 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.10.2",
+    "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.5.8",
+    "@webref/css": "^8.6.0",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.0"
+    "@webref/idl": "^3.81.1"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/browse/browse-modal.ts

@@ -40,10 +40,10 @@ export function openBrowseModal() {
         ${ref((el) => {
           if (el) {
             requestAnimationFrame(() => {
-              renderBrowse(el as HTMLElement, {
+              void renderBrowse(el as HTMLElement, {
                 openFile: (path: string) => {
                   closeBrowseModal();
-                  openFileInTab(path);
+                  void openFileInTab(path);
                 },
               });
             });

package/src/browse/browse.ts

@@ -14,6 +14,7 @@ import { repeat } from "lit-html/directives/repeat.js";
 import { getPlatform } from "../platform";
 import { projectState } from "../store";
 import { yamlDefault } from "../settings/schema-field-ui";
+import type { SchemaProperty } from "../settings/schema-field-ui";
 import { invalidateMediaCache } from "../ui/media-picker";
 import { statusMessage } from "../panels/statusbar";
 import { componentRegistry } from "../files/components";
@@ -31,7 +32,7 @@ import {
 } from "../format/format-host";
 
 import type { ComponentEntry } from "../files/components";
-import type { ContentTypeDef } from "@jxsuite/schema/types";
+import type { ContentTypeDef, JxDocument } from "@jxsuite/schema/types";
 
 // ─── Category definitions ────────────────────────────────────────────────────
 
@@ -267,9 +268,9 @@ function buildFrontmatterYaml(contentTypeName: string) {
   }
 
   let yaml = "";
-  for (const [field, def] of Object.entries(col.schema.properties)) {
-    const d = /** @type {{ type?: string; format?: string }} */ def;
-    yaml += `${field}: ${yamlDefault(d.type || "", d.format || "")}\n`;
+  const props = col.schema.properties as Record<string, SchemaProperty>;
+  for (const [field, def] of Object.entries(props)) {
+    yaml += `${field}: ${yamlDefault(def.type || "", def.format || "")}\n`;
   }
   return yaml || "title: Untitled\n";
 }
@@ -311,7 +312,7 @@ function getContentTypeTypes() {
  */
 async function handleNewEntity(
   typeKey: string,
-  container: HTMLElement,
+  _container: HTMLElement,
   ctx: { openFile: (path: string) => void },
 ) {
   const isContentType = typeKey.startsWith("contentType:");
@@ -384,7 +385,7 @@ async function handleUpload(
   }
   invalidateBrowseCache();
   invalidateMediaCache();
-  renderBrowse(container, ctx);
+  void renderBrowse(container, ctx);
 }
 
 // ─── Context menu ───────────────────────────────────────────────────────────
@@ -467,7 +468,7 @@ function showBrowseContextMenu(
                 style=${item.danger ? "color: var(--danger)" : ""}
                 @click=${() => {
                   dismissBrowseContextMenu();
-                  item.action?.();
+                  void item.action?.();
                 }}
                 >${item.label}</sp-menu-item
               >`,
@@ -505,7 +506,7 @@ async function browseRenameFile(
     const platform = getPlatform();
     await platform.renameFile(file.path, newPath);
     invalidateBrowseCache();
-    renderBrowse(container, ctx);
+    void renderBrowse(container, ctx);
     statusMessage(`Renamed to ${newName}`);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -533,7 +534,7 @@ async function browseDuplicateFile(
     const content = await platform.readFile(file.path);
     await platform.writeFile(copyPath, content);
     invalidateBrowseCache();
-    renderBrowse(container, ctx);
+    void renderBrowse(container, ctx);
     statusMessage(`Duplicated as ${copyName}`);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -558,7 +559,7 @@ async function browseDeleteFile(
     const platform = getPlatform();
     await platform.deleteFile(file.path);
     invalidateBrowseCache();
-    renderBrowse(container, ctx);
+    void renderBrowse(container, ctx);
     statusMessage(`Deleted ${file.name}`);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -669,9 +670,9 @@ async function renderDocPreview(filePath: string) {
     let doc;
     if (formatForPath(filePath)) {
       const result = await parseSourceForPath(filePath, content);
-      doc = result.document;
+      doc = result.document as JxDocument;
     } else {
-      doc = JSON.parse(content);
+      doc = JSON.parse(content) as JxDocument;
     }
     const scope = await buildScope(doc, {}, location.href);
     const el = renderNode(doc, scope);
@@ -748,7 +749,7 @@ function renderCard(
         ${needsPreview
           ? ref((el: Element | undefined) => {
               if (el) {
-                loadPreview(el, file);
+                void loadPreview(el, file);
               }
             })
           : nothing}
@@ -798,7 +799,7 @@ export async function renderBrowse(
             ?selected=${activeCategory === cat.key}
             @click=${() => {
               activeCategory = cat.key;
-              renderBrowse(container, ctx);
+              void renderBrowse(container, ctx);
             }}
           >
             ${cat.label}
@@ -812,7 +813,7 @@ export async function renderBrowse(
       .value=${searchQuery}
       @input=${(e: Event) => {
         searchQuery = (e.target as HTMLInputElement).value;
-        renderBrowse(container, ctx);
+        void renderBrowse(container, ctx);
       }}
       @submit=${(e: Event) => e.preventDefault()}
     ></sp-search>
@@ -856,7 +857,7 @@ export async function renderBrowse(
       @change=${(e: Event) => {
         const input = e.target as HTMLInputElement;
         if (input.files?.length) {
-          handleUpload(input.files, container, ctx);
+          void handleUpload(input.files, container, ctx);
         }
         input.value = "";
       }}
@@ -867,7 +868,7 @@ export async function renderBrowse(
         ?selected=${viewMode === "grid"}
         @click=${() => {
           viewMode = "grid";
-          renderBrowse(container, ctx);
+          void renderBrowse(container, ctx);
         }}
         title="Grid view"
       >
@@ -878,7 +879,7 @@ export async function renderBrowse(
         ?selected=${viewMode === "table"}
         @click=${() => {
           viewMode = "table";
-          renderBrowse(container, ctx);
+          void renderBrowse(container, ctx);
         }}
         title="Table view"
       >
@@ -956,7 +957,7 @@ export async function renderBrowse(
         (e.currentTarget as HTMLElement).classList.remove("browse-drop-active");
         const droppedFiles = e.dataTransfer?.files;
         if (droppedFiles?.length) {
-          handleUpload(droppedFiles, container, ctx);
+          void handleUpload(droppedFiles, container, ctx);
         }
       }}
     >

package/src/canvas/canvas-diff.ts

@@ -93,7 +93,7 @@ function markRecursive(
   const children = elementChildren(node);
   for (let i = 0; i < children.length; i++) {
     const childPath = `${path}/children/${i}`;
-    markRecursive(children[i], status, childPath, diffMap, allPaths);
+    markRecursive(children[i]!, status, childPath, diffMap, allPaths);
   }
 }
 
@@ -151,7 +151,7 @@ export function computeDocumentDiff(
       const children = elementChildren(currNode);
       for (let i = 0; i < children.length; i++) {
         const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
-        markRecursive(children[i], "added", childPath, diffMap, allPaths);
+        markRecursive(children[i]!, "added", childPath, diffMap, allPaths);
       }
       return;
     }
@@ -162,7 +162,7 @@ export function computeDocumentDiff(
       const children = elementChildren(origNode);
       for (let i = 0; i < children.length; i++) {
         const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
-        markRecursive(children[i], "removed", childPath, diffMap, allPaths);
+        markRecursive(children[i]!, "removed", childPath, diffMap, allPaths);
       }
     }
   };

package/src/canvas/canvas-helpers.ts

@@ -107,14 +107,26 @@ export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
     return el;
   }
 
-  for (let i = 0; i < path.length; i += 2) {
-    if (path[i] !== "children" && path[i] !== "cases") {
+  let i = 0;
+  while (i < path.length) {
+    const seg = path[i];
+    // A lone "map" segment steps into a repeater perimeter's single template child.
+    if (seg === "map") {
+      el = el.children[0] as HTMLElement | undefined;
+      i += 1;
+      if (!el) {
+        break;
+      }
+      continue;
+    }
+    if (seg !== "children" && seg !== "cases") {
       return null;
     }
     const idx = path[i + 1];
     if (idx === undefined) {
       el = el.children[0] as HTMLElement | undefined;
     } else if (idx === "map") {
+      // Legacy whole-children template `[..., "children", "map"]`: perimeter at child[0].
       el = el.children[0]?.children[0] as HTMLElement | undefined;
     } else {
       el = el.children[idx as number] as HTMLElement | undefined;
@@ -122,6 +134,7 @@ export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
     if (!el) {
       break;
     }
+    i += 2;
   }
 
   if (el) {

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

@@ -6,11 +6,11 @@
  * mapping ($map remapping), site-level style injection, and $head element injection.
  */
 
-import { elToPath, projectState, stripEventHandlers } from "../store";
+import { elToPath, elToScope, projectState, stripEventHandlers } from "../store";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { toRaw } from "../reactivity";
+import { effectScope, toRaw } from "../reactivity";
 import {
   buildScope,
   defineElement,
@@ -33,6 +33,8 @@ import { buildNestedSiteCSS } from "./nested-site-style";
 
 import type { JxDocument, JxElement, JxMutableNode } from "@jxsuite/schema/types";
 import type { ComponentEntry } from "../files/components.js";
+import type { CanvasPanel } from "../types";
+import type { EffectScope } from "../reactivity";
 
 export { buildNestedSiteCSS } from "./nested-site-style";
 
@@ -57,26 +59,31 @@ const _failedElements = new Set();
 let _failedElementsDocPath: string | null = null;
 
 /**
- * Walk the merged document tree to find the path prefix where page children were distributed into
- * the layout slot. Returns the path to the container whose children are the page content (first
- * non-$__layout children array).
+ * Walk the merged document tree to find where page children were distributed into the layout slot.
+ * Returns the `prefix` path to the container whose children hold the page content (first container
+ * with a non-$__layout child), plus the `offset` — the index of the first page-content child within
+ * that container's children array. The offset is non-zero when the layout places sibling nodes
+ * (e.g. a `<noscript>`) before the `<slot>`, which shifts every page child's render index relative
+ * to its page-document index. The path mapper subtracts this offset so canvas paths line up with
+ * the page document (and thus the layers panel).
  *
  * @param {JxMutableNode} node
  * @param {(string | number)[]} [path]
- * @returns {(string | number)[] | null}
+ * @returns {{ prefix: (string | number)[]; offset: number } | null}
  */
 function findPageContentPrefix(
   node: JxMutableNode,
   path: (string | number)[] = [],
-): (string | number)[] | null {
+): { prefix: (string | number)[]; offset: number } | null {
   if (!node || typeof node !== "object") {
     return null;
   }
   if (Array.isArray(node.children)) {
-    for (const child of node.children) {
-      if (child && typeof child === "object" && !child.$__layout) {
-        return [...path, "children"];
-      }
+    const firstPageIdx = node.children.findIndex(
+      (child) => child && typeof child === "object" && !child.$__layout,
+    );
+    if (firstPageIdx !== -1) {
+      return { offset: firstPageIdx, prefix: [...path, "children"] };
     }
     for (let i = 0; i < node.children.length; i++) {
       const child = node.children[i];
@@ -131,6 +138,92 @@ export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
   _ctx = ctx;
 }
 
+/** Context needed to map runtime render paths back to document paths. */
+export interface PathMapperCtx {
+  canvasMode: string;
+  layoutWrapped: boolean;
+  pageContentPrefix: (string | number)[] | null;
+  /** Index of the first page-content child within the slot container (leading layout siblings). */
+  pageContentOffset?: number;
+  /** Document paths of every mapped-array node, used to remap edit-mode repeater perimeters. */
+  arrayPaths: Set<string>;
+}
+
+/**
+ * Build the onNodeCreated callback that records each rendered element's document path in elToPath.
+ * Handles layout-prefix stripping and repeater-perimeter/template remapping. Shared by full panel
+ * renders and isolated subtree re-renders so path bookkeeping stays consistent.
+ */
+export function makePathMapper(ctx: PathMapperCtx) {
+  const { canvasMode, layoutWrapped, pageContentPrefix, pageContentOffset, arrayPaths } = ctx;
+  return function onNodeCreated(
+    created: Node,
+    path: (string | number)[],
+    def: unknown,
+    state?: Record<string, unknown>,
+  ) {
+    if (!(created instanceof HTMLElement)) {
+      return;
+    }
+    if (state) {
+      elToScope.set(created, state);
+    }
+    // Track layout-originated elements — don't store in elToPath to avoid
+    // Path collisions with remapped page content paths
+    if (layoutWrapped && typeof def === "object" && (def as JxMutableNode)?.$__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)
+    let mappedPath = path;
+    if (layoutWrapped && pageContentPrefix) {
+      const pfx = pageContentPrefix;
+      if (
+        path.length >= pfx.length &&
+        pfx.every((seg: string | number, i: number) => path[i] === seg)
+      ) {
+        // Page children render at container indices [offset, offset+1, …] when the layout places
+        // Sibling nodes before the <slot>. Subtract the offset so they map back to the page
+        // Document's 0-based child indices (what flattenTree / the layers panel use).
+        const rest = path.slice(pfx.length);
+        const [containerIdx] = rest;
+        mappedPath =
+          typeof containerIdx === "number"
+            ? ["children", containerIdx - (pageContentOffset ?? 0), ...rest.slice(1)]
+            : ["children", ...rest];
+      }
+    }
+
+    // Remap repeater perimeters: prepareForEditMode renders each mapped-array node as a
+    // `<div class="repeater-perimeter">` at the array's own child index, with the map template as
+    // Its single child[0]. The perimeter's render path already equals the array's document path,
+    // So only the template hop needs collapsing: for any array document path P, a render path of
+    // `[...P, "children", 0, ...rest]` maps to `[...P, "map", ...rest]`. Looping handles nested
+    // Repeaters (an array whose template contains another array).
+    if ((canvasMode === "design" || canvasMode === "edit") && arrayPaths.size > 0) {
+      let changed = true;
+      while (changed) {
+        changed = false;
+        for (let i = 1; i < mappedPath.length - 1; i++) {
+          if (
+            mappedPath[i] === "children" &&
+            mappedPath[i + 1] === 0 &&
+            arrayPaths.has(mappedPath.slice(0, i).join("/"))
+          ) {
+            mappedPath = [...mappedPath.slice(0, i), "map", ...mappedPath.slice(i + 2)];
+            changed = true;
+            break;
+          }
+        }
+      }
+    }
+    elToPath.set(created, mappedPath);
+  };
+}
+
 /**
  * Render a Jx document into a canvas element using the real runtime. Populates elToPath for each
  * created element via onNodeCreated callback. Returns the live state scope on success, null on
@@ -139,8 +232,14 @@ export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
  * @param {number} gen - Render generation for staleness detection
  * @param {JxMutableNode} doc
  * @param {HTMLElement} canvasEl
+ * @param {CanvasPanel | null} [panel] - Panel to persist render context on (for surgical patches)
  */
-export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl: HTMLElement) {
+export async function renderCanvasLive(
+  gen: number,
+  doc: JxMutableNode,
+  canvasEl: HTMLElement,
+  panel: CanvasPanel | null = null,
+) {
   const tab = activeTab.value;
   const S = {
     document: tab?.doc.document,
@@ -177,11 +276,13 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
 
   /** @type {(string | number)[] | null} Path prefix in merged doc where page children live */
   let pageContentPrefix = null;
+  /** Index of the first page child within the slot container (offset by leading layout siblings). */
+  let pageContentOffset = 0;
 
   if (isPage) {
     const layoutPath = getEffectiveLayoutPath(doc.$layout);
     if (layoutPath) {
-      const layoutDoc = await resolveLayoutDoc(layoutPath);
+      const layoutDoc = (await resolveLayoutDoc(layoutPath)) as JxMutableNode | null;
       if (layoutDoc) {
         if (gen !== view.renderGeneration) {
           return null;
@@ -193,25 +294,30 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
         renderDoc =
           canvasMode === "preview" ? merged : prepareForEditMode(stripEventHandlers(merged));
         layoutWrapped = true;
-        pageContentPrefix = findPageContentPrefix(merged);
+        const pageContent = findPageContentPrefix(merged);
+        pageContentPrefix = pageContent?.prefix ?? null;
+        pageContentOffset = pageContent?.offset ?? 0;
       }
     }
   }
 
-  // In edit mode, collect paths where $map templates were inlined as children[0]
-  // So we can remap runtime paths (children,0,...) → (children,map,...)
-  const mapParentPaths = new Set();
+  // In edit mode, collect the document path of every mapped-array node so the path mapper can
+  // Remap their edit-mode perimeters (and templates) back to document paths.
+  const arrayPaths = new Set<string>();
+  let renderScope: EffectScope | null = null;
   if (canvasMode === "design" || canvasMode === "edit") {
-    (function findMapParents(node: JxMutableNode, path: (string | number)[]) {
+    (function findArrayPaths(node: JxMutableNode, path: (string | number)[]) {
       if (!node || typeof node !== "object") {
         return;
       }
-      if (
-        node.children &&
-        typeof node.children === "object" &&
-        (node.children as unknown as { $prototype?: string }).$prototype === "Array"
-      ) {
-        mapParentPaths.add(path.join("/"));
+      // The node itself is a mapped array (reached as a member or whole-children slot).
+      if ((node as unknown as { $prototype?: string }).$prototype === "Array") {
+        arrayPaths.add(path.join("/"));
+        const mapDef = (node as JxMutableNode).map;
+        if (mapDef && typeof mapDef === "object") {
+          findArrayPaths(mapDef, [...path, "map"]);
+        }
+        return;
       }
       if (Array.isArray(node.children)) {
         for (let i = 0; i < node.children.length; i++) {
@@ -219,12 +325,19 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
           if (typeof child === "string") {
             continue;
           }
-          findMapParents(child, [...path, "children", i]);
+          findArrayPaths(child!, [...path, "children", i]);
         }
+      } else if (
+        node.children &&
+        typeof node.children === "object" &&
+        (node.children as unknown as { $prototype?: string }).$prototype === "Array"
+      ) {
+        // Legacy whole-children repeater.
+        findArrayPaths(node.children as JxMutableNode, [...path, "children"]);
       }
       if (node.$switch && node.cases) {
         for (const [k, v] of Object.entries(node.cases)) {
-          findMapParents(v, [...path, "cases", k]);
+          findArrayPaths(v, [...path, "cases", k]);
         }
       }
     })(doc, []);
@@ -433,67 +546,22 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
     if (gen !== view.renderGeneration) {
       return null;
     }
-    const el = /** @type {HTMLElement} */ runtimeRenderNode(renderDoc, $defs, {
-      _path: [],
-      onNodeCreated(
-        created: HTMLElement | Text,
-        path: (string | number)[],
-        def: JxElement | string,
-      ) {
-        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 && 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)
-        let mappedPath = path;
-        if (layoutWrapped && pageContentPrefix) {
-          const pfx = pageContentPrefix;
-          if (
-            path.length >= pfx.length &&
-            pfx.every((seg: string | number, i: number) => path[i] === seg)
-          ) {
-            mappedPath = ["children", ...path.slice(pfx.length)];
-          }
-        }
-
-        // Remap $map paths: wrapper and template children → real document paths
-        // 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++) {
-            if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
-              const parentKey = mappedPath.slice(0, i).join("/");
-              if (mapParentPaths.has(parentKey)) {
-                if (mappedPath.length === i + 2) {
-                  mappedPath = mappedPath.slice(0, i + 1);
-                } else if (
-                  mappedPath.length >= i + 4 &&
-                  mappedPath[i + 2] === "children" &&
-                  mappedPath[i + 3] === 0
-                ) {
-                  mappedPath = [
-                    ...mappedPath.slice(0, i),
-                    "children",
-                    "map",
-                    ...mappedPath.slice(i + 4),
-                  ];
-                }
-                break;
-              }
-            }
-          }
-        }
-        elToPath.set(created, mappedPath);
-      },
+    const pathMapper = makePathMapper({
+      arrayPaths,
+      canvasMode,
+      layoutWrapped,
+      pageContentOffset,
+      pageContentPrefix,
     });
+    // Render inside a detached effect scope so the tree's reactive effects (template bindings,
+    // $map/$switch containers) can be disposed when the panel is rebuilt, instead of leaking.
+    renderScope = effectScope(true);
+    const el = /** @type {HTMLElement} */ renderScope.run(() =>
+      runtimeRenderNode(renderDoc, $defs, {
+        _path: [],
+        onNodeCreated: pathMapper,
+      }),
+    )!;
     if ((canvasMode === "design" || canvasMode === "edit") && el instanceof HTMLElement) {
       // Disable pointer events on all rendered elements for edit mode
       el.style.pointerEvents = "none";
@@ -533,8 +601,22 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
         }
       });
     }
+    if (panel) {
+      panel.renderScope?.stop();
+      panel.renderScope = renderScope;
+      panel.liveCtx = {
+        arrayPaths,
+        canvasMode,
+        layoutWrapped,
+        pageContentOffset,
+        pageContentPrefix,
+        pathMapper,
+        scope: $defs as Record<string, unknown>,
+      };
+    }
     return $defs;
   } catch (error) {
+    renderScope?.stop();
     console.warn("renderCanvasLive failed:", errorMessage(error), error);
     return null;
   }