@jxsuite/studio 2.0.0 → 2.1.0

package/src/browse/library-preview.ts

@@ -0,0 +1,252 @@
+/// <reference lib="dom" />
+/**
+ * Library previews — a live document render is expensive, so it is capped, lazy, and evictable.
+ *
+ * Four limits, each answering a different way the old Manage view fell over on a large project:
+ *
+ * 1. **Lazy.** A preview is built when its card INTERSECTS the viewport, not when the card is created.
+ *    Scrolling a 300-item Library therefore builds a preview per card actually looked at.
+ * 2. **Capped.** {@link createPreviewCache} is an LRU with a hard limit. The predecessor's
+ *    `_previewCache` was an unbounded `Map<string, HTMLElement>` of live runtime subtrees, so a
+ *    long browse leaked every document it had ever shown until the tab closed.
+ * 3. **Cancellable.** A preview whose card left the window before its read resolved is dropped on
+ *    arrival rather than appended to a detached node.
+ * 4. **Released.** The visibility gate keeps a set too, and it is the same leak one level down: a card
+ *    observed and then scrolled past before it ever intersected was retained for the life of the
+ *    pane. {@link PreviewObserver.releaseDetached} is how the window gives those back.
+ *
+ * The renders themselves go through `platform.readFile`, which the PAL counts, so `probe.idle()`
+ * already knows a preview is in flight without this module declaring an idle source of its own.
+ */
+
+import { buildScope, renderNode, setSkipServerFunctions } from "@jxsuite/runtime";
+import { componentRegistry } from "../files/components";
+import { getPlatform } from "../platform";
+import { loadFormats, formatForPath } from "../format/format-host";
+import { parseSourceForPath } from "../files/file-ops";
+import { renderComponentPreview } from "../panels/component-preview";
+import type { ComponentEntry } from "../files/components";
+import type { JxDocument } from "@jxsuite/schema/types";
+
+/**
+ * How many rendered previews stay alive at once.
+ *
+ * **The cap must exceed one window, or it thrashes against itself.** The first value tried here was
+ * 48, and the 300-page measurement caught it immediately: a 1180×700 pane of cards renders 55 items
+ * (11 rows of 5, overscan included), so the cache evicted documents that were still on screen and
+ * re-rendered them on the next repaint — 560 reads for 300 documents. 150 clears a nine-column,
+ * twelve-row window on a wide display with room to spare, so eviction is only ever reached by
+ * SCROLLING, which is what an LRU is for.
+ *
+ * It remains a fixed cost rather than a function of project size, which is the whole point: the
+ * predecessor's cache was unbounded, so a long browse retained every document it had ever shown.
+ */
+export const PREVIEW_CACHE_LIMIT = 150;
+
+export interface PreviewCache {
+  /** Fetch and mark as most-recently-used. */
+  get: (key: string) => HTMLElement | undefined;
+  /** Insert, evicting the least-recently-used entry when over the limit. */
+  set: (key: string, value: HTMLElement) => void;
+  has: (key: string) => boolean;
+  /** Live entry count — what the perf test asserts stays bounded. */
+  size: () => number;
+  /** Keys, least-recently-used first. */
+  keys: () => string[];
+  clear: () => void;
+}
+
+/**
+ * A least-recently-used cache over rendered previews.
+ *
+ * `Map` iterates in insertion order, so re-inserting on read is the whole LRU: the oldest key is
+ * always the first one the iterator yields. Evicted subtrees are removed from the DOM as they go —
+ * an evicted preview that stayed attached would keep its runtime alive and defeat the cap.
+ */
+export function createPreviewCache(limit: number = PREVIEW_CACHE_LIMIT): PreviewCache {
+  const entries = new Map<string, HTMLElement>();
+
+  function evict() {
+    // `size > limit` guarantees a first key, so the iterator result is never `done` here.
+    while (entries.size > limit) {
+      const oldest = entries.keys().next().value as string;
+      const stale = entries.get(oldest);
+      entries.delete(oldest);
+      stale?.remove();
+    }
+  }
+
+  return {
+    clear() {
+      for (const element of entries.values()) {
+        element.remove();
+      }
+      entries.clear();
+    },
+    get(key) {
+      const value = entries.get(key);
+      if (value !== undefined) {
+        entries.delete(key);
+        entries.set(key, value);
+      }
+      return value;
+    },
+    has: (key) => entries.has(key),
+    keys: () => [...entries.keys()],
+    set(key, value) {
+      entries.delete(key);
+      entries.set(key, value);
+      evict();
+    },
+    size: () => entries.size,
+  };
+}
+
+// ─── Rendering one preview ───────────────────────────────────────────────────
+
+/**
+ * Render a page/layout/content document to a detached element, or null when it cannot be rendered.
+ *
+ * Returning null rather than throwing is deliberate: a document that fails to parse is a real state
+ * of the project, and the card shows a document glyph for it. The Problems list is for failures the
+ * author must ACT on; an in-progress file that does not parse yet is not one.
+ */
+export async function renderDocPreview(filePath: string): Promise<HTMLElement | null> {
+  try {
+    const content = await getPlatform().readFile(filePath);
+    setSkipServerFunctions(true);
+    await loadFormats();
+    let document_: JxDocument;
+    if (formatForPath(filePath)) {
+      const parsed = await parseSourceForPath(filePath, content);
+      document_ = parsed.document as JxDocument;
+    } else {
+      document_ = JSON.parse(content) as JxDocument;
+    }
+    const scope = await buildScope(document_, {}, location.href);
+    const element = renderNode(document_, scope);
+    return element instanceof HTMLElement ? element : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The preview for one file — a registered component's own preview when there is one, the document
+ * render otherwise. Cached; a cache hit does no work at all.
+ */
+export async function previewFor(
+  path: string,
+  cache: PreviewCache,
+): Promise<HTMLElement | undefined> {
+  const cached = cache.get(path);
+  if (cached) {
+    return cached;
+  }
+  let rendered: HTMLElement | null | undefined;
+  try {
+    const component = componentRegistry.find((c: ComponentEntry) => c.path === path);
+    rendered = component
+      ? ((await renderComponentPreview(component)) as HTMLElement | undefined)
+      : await renderDocPreview(path);
+  } catch {
+    return undefined;
+  }
+  if (!rendered) {
+    return undefined;
+  }
+  cache.set(path, rendered);
+  return rendered;
+}
+
+// ─── Visibility ──────────────────────────────────────────────────────────────
+
+export interface PreviewObserver {
+  /** Start watching a card. Safe to call repeatedly for the same element. */
+  observe: (element: Element) => void;
+  /**
+   * Stop watching every card the document no longer contains; answers how many went.
+   *
+   * The caller is whoever re-renders the window: once lit has committed, a card outside the new
+   * window is detached, and an observation of a detached node can never fire again. It is pure cost
+   * — the browser still walks it on every scroll frame — and it is unreachable garbage that pins
+   * the card's whole subtree.
+   *
+   * **The one release path, deliberately.** There is no per-element `unobserve` here: the previous
+   * shape had one, nothing ever called it, and "a card left the window" is a fact the WINDOW knows
+   * and an individual card never does. One caller, at one moment, over the whole set.
+   */
+  releaseDetached: () => number;
+  destroy: () => void;
+}
+
+/**
+ * Watch cards for viewport entry and report each one ONCE.
+ *
+ * **Every observation is owned here, not by the caller.** The first version of this module let the
+ * intersect callback be the only release path, which is only ever taken by a card that actually
+ * came into view: scroll fast enough that the callback never runs and nothing is ever released.
+ * Four sweeps of the same 300-page list retained 805 → 1310 → 1815 → 2320 cards with zero
+ * `unobserve` calls, every one of them a node no longer in the document — the very leak the LRU
+ * above was written to end, one level down. So the `watched` set is kept here, and
+ * {@link PreviewObserver.releaseDetached} sweeps it; `tests/library-observer-leak.test.ts` is the
+ * measurement, and it fails on the shape this replaced.
+ *
+ * Where `IntersectionObserver` is unavailable — happy-dom, and any host that has not implemented it
+ * — every observed element is reported immediately. That is the honest degradation: the window
+ * already bounds how many cards exist, so "all of them" is at most one screen plus the overscan,
+ * and a Library that silently showed no previews would look broken rather than slow. Nothing is
+ * retained on that path, so there is nothing for the sweep to find.
+ */
+export function createPreviewObserver(onVisible: (element: Element) => void): PreviewObserver {
+  if (typeof IntersectionObserver !== "function") {
+    return {
+      destroy() {
+        /* Nothing to disconnect. */
+      },
+      observe: (element) => onVisible(element),
+      releaseDetached: () => 0,
+    };
+  }
+  const watched = new Set<Element>();
+  const observer = new IntersectionObserver(
+    (records) => {
+      for (const record of records) {
+        if (record.isIntersecting) {
+          watched.delete(record.target);
+          observer.unobserve(record.target);
+          onVisible(record.target);
+        }
+      }
+    },
+    // One card-height of lead-in, so a preview is usually ready by the time it is looked at.
+    { rootMargin: "200px" },
+  );
+  return {
+    destroy() {
+      observer.disconnect();
+      watched.clear();
+    },
+    observe(element) {
+      // Re-observing is a no-op in the browser, but the repaint that follows every scroll frame
+      // Hands the same slot back, and a call per card per frame is work nobody needs.
+      if (watched.has(element)) {
+        return;
+      }
+      watched.add(element);
+      observer.observe(element);
+    },
+    releaseDetached() {
+      let released = 0;
+      // Deleting the current key during a `Set` iteration is defined; later keys are still visited.
+      for (const element of watched) {
+        if (!element.isConnected) {
+          watched.delete(element);
+          observer.unobserve(element);
+          released += 1;
+        }
+      }
+      return released;
+    },
+  };
+}

package/src/browse/library-source.ts

@@ -0,0 +1,150 @@
+/**
+ * The Library as a {@link GridSource}.
+ *
+ * The Library is one more source over the same contract the CSV, collection, pages and connector
+ * grids already use, which is what makes Table a real grid rather than a fifth hand-written table:
+ * columns come from {@link libraryColumns}, rows are the scan, and every layout — Cards, Media,
+ * Calendar, Board — draws the SAME rows through a different arrangement. A layout switch never
+ * re-reads the project.
+ *
+ * It is a **read-only** source, and says so rather than pretending. Renaming, duplicating and
+ * deleting a file are real operations with real consequences (a rename rewrites references; a
+ * delete needs the reference count in its confirmation), and they belong to the commands that
+ * already do that work correctly. A grid cell that silently renamed a file on blur would bypass
+ * both. {@link LibrarySource.commit} therefore refuses, naming the surface that can.
+ */
+
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import { makeGridTabId } from "../grid/grid-source";
+import { scanLibrary } from "./library-model";
+import type { LibraryFile, LibraryScan, ScanFailure } from "./library-model";
+import type {
+  CommitResult,
+  GridColumn,
+  GridEditBatch,
+  GridRow,
+  GridRowsResult,
+  GridSource,
+} from "../grid/grid-source";
+
+/** Why a cell edit is refused — printed by the grid, so the author is told where to go instead. */
+export const LIBRARY_READ_ONLY =
+  "The Library lists files; it does not edit them. Rename, duplicate or delete from the file's " +
+  "context menu, or open the file to edit it.";
+
+/** The Table layout's columns. `path` is the row key and is never editable. */
+export function libraryColumns(): GridColumn[] {
+  return [
+    { editable: false, field: "name", kind: "string", pk: true, title: "Name", widthHint: 260 },
+    { editable: false, field: "category", kind: "string", title: "Category", widthHint: 120 },
+    { editable: false, field: "locale", kind: "string", title: "Locale", widthHint: 90 },
+    { editable: false, field: "type", kind: "string", title: "Type", widthHint: 120 },
+    { editable: false, field: "size", kind: "number", title: "Size", widthHint: 90 },
+    { editable: false, field: "modified", kind: "date", title: "Modified", widthHint: 160 },
+    { editable: false, field: "path", kind: "readonly", title: "Path", widthHint: 320 },
+  ];
+}
+
+/** One scanned file as a grid row. */
+export function libraryRow(file: LibraryFile): GridRow {
+  return {
+    cells: {
+      category: file.category,
+      // Null, not "": the platform reported no locale directory for this file, and a grid cell
+      // Distinguishes "no value" from "the empty string" everywhere else in this contract.
+      locale: file.locale ?? null,
+      modified: file.modified ?? null,
+      name: file.name,
+      path: file.path,
+      size: file.size ?? null,
+      type: file.type,
+    },
+    key: file.path,
+  };
+}
+
+/**
+ * A Library source, plus the two questions a grid source cannot ask but the Library must answer:
+ * what the scan could not read, and the files behind the rows (the non-table layouts want the typed
+ * record, not a cell bag).
+ */
+export interface LibrarySource extends GridSource {
+  /** The scanned files, in path order. Empty before the first {@link GridSource.rows} call. */
+  files: () => readonly LibraryFile[];
+  /** Directories the last scan could not read. NON-EMPTY MEANS THE LISTING IS INCOMPLETE. */
+  failures: () => readonly ScanFailure[];
+  /** Whether a scan has completed at least once — "not loaded yet" is not "empty". */
+  scanned: () => boolean;
+}
+
+/** The Library's tab id. One Library per window; category and layout are view state, not identity. */
+export function libraryTabId(): string {
+  return makeGridTabId({ kind: "library" });
+}
+
+/**
+ * Build the Library source. The scan is lazy: nothing is read until the first `rows()`.
+ *
+ * @param {() => readonly string[]} [dirs] Project directories to scan, injectable for tests and for
+ *   the perf measurement; defaults to the open project's own list.
+ */
+export function createLibrarySource(dirs?: () => readonly string[]): LibrarySource {
+  let scan: LibraryScan | null = null;
+  let inFlight: Promise<LibraryScan> | null = null;
+
+  const projectDirs = dirs ?? (() => (projectState?.projectDirs ?? []) as readonly string[]);
+
+  async function ensureScan(): Promise<LibraryScan> {
+    if (scan) {
+      return scan;
+    }
+    // Coalesce: five layouts and a command can all ask at once on the first paint, and the answer
+    // Is one walk of the project, not six.
+    inFlight ??= scanLibrary(projectDirs(), getPlatform()).then((result) => {
+      scan = result;
+      inFlight = null;
+      return result;
+    });
+    return inFlight;
+  }
+
+  return {
+    capabilities: { delete: false, insert: false, remotePaging: false, remoteSort: false },
+    columns: () => Promise.resolve(libraryColumns()),
+    commit(batch: GridEditBatch): Promise<CommitResult> {
+      return Promise.resolve({
+        cells: batch.cells.map((cell) => ({
+          error: LIBRARY_READ_ONLY,
+          field: cell.field,
+          ok: false,
+          rowKey: cell.rowKey,
+        })),
+        deletes: batch.deletes.map((row) => ({
+          error: LIBRARY_READ_ONLY,
+          ok: false,
+          rowKey: row.rowKey,
+        })),
+        inserts: batch.inserts.map((row) => ({
+          error: LIBRARY_READ_ONLY,
+          ok: false,
+          tempKey: row.tempKey,
+        })),
+      });
+    },
+    failures: () => scan?.failures ?? [],
+    files: () => scan?.files ?? [],
+    id: libraryTabId(),
+    label: "Library",
+    async refresh() {
+      scan = null;
+      inFlight = null;
+      await ensureScan();
+    },
+    async rows(): Promise<GridRowsResult> {
+      const result = await ensureScan();
+      return { rows: result.files.map((file) => libraryRow(file)), total: result.files.length };
+    },
+    scanned: () => scan !== null,
+  };
+}

package/src/canvas/canvas-helpers.ts

@@ -5,9 +5,12 @@
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import { canvasPanels, getNodeAtPath, parentElementPath } from "../store";
-import { activeTab } from "../workspace/workspace";
+import { getNodeAtPath, parentElementPath } from "../store";
+import { displayTagName } from "@jxsuite/schema/guards";
+import { activeCanvasSurface, activeMediaOfPane } from "./canvas-surface";
 import { isInlineInContext } from "../editor/inline-edit";
+import type { CanvasSurface } from "./canvas-surface";
+import type { CanvasPanel } from "../types";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 
@@ -22,15 +25,26 @@ 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() {
+/**
+ * The active canvas panel of ONE pane's stage, from that pane's own `activeMedia`.
+ *
+ * The breakpoint a stage is showing is a fact about the tab in it — `session.ui.activeMedia` — so
+ * this reads it from `surface.paneId`'s tab and never from the focus. {@link getActivePanel} is this
+ * function applied to the focused pane, which is what "the active panel" means when nobody says
+ * which one.
+ *
+ * @param {CanvasSurface} surface
+ * @returns {CanvasPanel | null}
+ */
+export function panelOfSurface(surface: CanvasSurface): CanvasPanel | null {
+  const canvasPanels = surface.panels;
   if (canvasPanels.length === 0) {
     return null;
   }
   if (canvasPanels.length === 1) {
-    return canvasPanels[0];
+    return canvasPanels[0]!;
   }
-  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
+  const activeMedia = activeMediaOfPane(surface.paneId);
   for (const p of canvasPanels) {
     if (activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) {
       return p;
@@ -39,7 +53,17 @@ export function getActivePanel() {
       return p;
     }
   }
-  return canvasPanels[0];
+  return canvasPanels[0]!;
+}
+
+/**
+ * Return the active canvas panel of the FOCUSED pane, based on its activeMedia setting.
+ *
+ * Panels belong to a pane's stage (`canvas-surface.ts`), so "the active panel" is only answerable
+ * relative to one — this is the pane whose artboards the person is looking at.
+ */
+export function getActivePanel() {
+  return panelOfSurface(activeCanvasSurface());
 }
 
 /**
@@ -61,8 +85,8 @@ export function bubbleInlinePath(doc: JxMutableNode | undefined, path: JxPath) {
     if (!node || !parentNode) {
       break;
     }
-    const childTag = (node.tagName ?? "div").toLowerCase();
-    const parentTag = (parentNode.tagName ?? "div").toLowerCase();
+    const childTag = (displayTagName(node.tagName) || "div").toLowerCase();
+    const parentTag = (displayTagName(parentNode.tagName) || "div").toLowerCase();
     if (!isInlineInContext(childTag, parentTag)) {
       break;
     }

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

@@ -7,7 +7,8 @@
  */
 
 import { projectState, stripEventHandlers } from "../store";
-import { activeTab } from "../workspace/workspace";
+import { displayTagName } from "@jxsuite/schema/guards";
+import { canvasModeOfTab } from "./canvas-surface";
 import { toRaw } from "../reactivity";
 import {
   distributePageIntoLayout,
@@ -29,13 +30,13 @@ import {
 import { isComponentDoc, substitutePreviewProps } from "../component-props";
 import { rewriteContentAssets } from "./content-assets";
 
-import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
+import type { JxElement, JxMutableNode, JxPath } from "@jxsuite/schema/types";
 import type { ComponentEntry } from "../files/components.js";
 import type { ContentSectionEntry } from "../types";
+import type { LayoutMarker } from "./path-mapping";
+import type { Tab } from "../tabs/tab";
 import type { WireMapperCtx } from "./iframe-protocol";
 
-let _ctx: { getCanvasMode: () => string } | null = null;
-
 /**
  * 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
@@ -77,58 +78,71 @@ function findPageContentPrefix(
 }
 
 /**
- * Recursively mark all nodes in a layout doc tree with $__layout: true so we can identify which
- * rendered DOM elements came from the layout vs page content.
+ * Recursively mark every node of a layout doc tree with its ORIGIN — `$__layout: { file, path }` —
+ * so the renderer can both tell layout nodes apart from page content and say which node of which
+ * file each one is. The marker used to be a bare `true`, which made a layout node identifiable but
+ * unaddressable: the canvas could tell you had clicked something it could not edit, but not what
+ * you had clicked or where to go to edit it. `path` is the node's own path inside `file`, so the
+ * editor can open the layout with that node selected. See {@link LayoutMarker}.
  */
-function markLayoutNodes(node: JxMutableNode) {
+export function markLayoutNodes(node: JxMutableNode, file: string, path: JxPath = []) {
   if (!node || typeof node !== "object") {
     return;
   }
-  node.$__layout = true;
+  node.$__layout = { file, path } satisfies LayoutMarker;
   if (Array.isArray(node.children)) {
-    for (const child of node.children) {
+    for (const [i, child] of node.children.entries()) {
       if (typeof child === "string") {
         continue;
       }
-      markLayoutNodes(child);
+      markLayoutNodes(child, file, [...path, "children", i]);
     }
   }
-  if (node.$elements) {
-    for (const el of node.$elements) {
+  if (Array.isArray(node.$elements)) {
+    for (const [i, el] of node.$elements.entries()) {
       if (typeof el !== "string") {
-        markLayoutNodes(el as JxMutableNode);
+        markLayoutNodes(el as JxMutableNode, file, [...path, "$elements", i]);
       }
     }
   }
 }
 
-/**
- * Initialize the canvas live render module.
- *
- * @param {{
- *   getCanvasMode: () => string;
- * }} ctx
- */
-export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
-  _ctx = ctx;
-}
-
 /**
  * Resolve a document into the form the iframe canvas renders: layout-distributed, edit-transformed,
  * with components/imports/$media/$head merged in, plus the path-mapper context and site style. This
  * is the "parent resolves, iframe renders" split — the realm-specific work (defineElement,
  * injecting $head/site-style into the DOM, buildScope/renderNode) happens inside the iframe from
  * this result.
+ *
+ * **`tab` is the tab the render is FOR, and it is a parameter because it is not "the active tab".**
+ * This function opened with `const tab = activeTab.value` and took its mode from an injected
+ * `getCanvasMode()` — the focused pane's, one layer down — which threw away everything the caller
+ * had already resolved correctly: `canvas-render.ts` picks the document with
+ * `tabOfPane(surface.paneId)` and threads that tab's id through `mountIframeCanvas` →
+ * `preparePassRender`. Six values came from the wrong tab whenever the pane being drawn was not the
+ * focused one: `documentPath` (hence `docBase` and the `isPage` test), `showLayout`,
+ * `previewParams`, `previewProps`, and the composed `canvasMode`.
+ *
+ * The mode is the one with teeth. `mountIframeCanvas` ends with `setHostPreview(state, message.mode
+ * === "preview")`, so a side pane in Edit whose neighbour was in Preview got a PREVIEW frame — no
+ * overlay, no editing messages honoured — and a pane being previewed beside an editing one got an
+ * editable frame for a document nobody was editing. `canvasModeOfTab(tab)` is the same composition
+ * every other gate reads, applied to the tab that is actually being drawn.
+ *
+ * @param {JxMutableNode} doc
+ * @param {Tab | null} tab — the tab whose document and view settings this render is of.
  */
-export async function resolveCanvasDocument(doc: JxMutableNode): Promise<{
+export async function resolveCanvasDocument(
+  doc: JxMutableNode,
+  tab: Tab | null,
+): Promise<{
   renderDoc: JxMutableNode;
   docBase: string | undefined;
   mapperCtx: WireMapperCtx;
   siteStyle: Record<string, unknown> | null;
 }> {
-  const tab = activeTab.value;
   const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode };
-  const canvasMode = _ctx!.getCanvasMode();
+  const canvasMode = canvasModeOfTab(tab);
 
   let renderDoc =
     canvasMode === "preview"
@@ -150,7 +164,9 @@ export async function resolveCanvasDocument(doc: JxMutableNode): Promise<{
     if (layoutPath) {
       const layoutDoc = (await resolveLayoutDoc(layoutPath)) as JxMutableNode | null;
       if (layoutDoc) {
-        markLayoutNodes(layoutDoc);
+        // The SAME normalization resolveLayoutDoc reads the file with, so the marker's `file` is a
+        // Path the editor can hand straight to navigateToComponent when the author asks to open it.
+        markLayoutNodes(layoutDoc, layoutPath.replace(/^\.\//, ""));
         const pageForSlots = canvasMode === "preview" ? structuredClone(toRaw(doc)) : renderDoc;
         const merged = distributePageIntoLayout(layoutDoc, pageForSlots);
         renderDoc =
@@ -262,7 +278,7 @@ export async function resolveCanvasDocument(doc: JxMutableNode): Promise<{
         return tags;
       }
       if (node.tagName) {
-        tags.add(node.tagName);
+        tags.add(displayTagName(node.tagName));
       }
       if (Array.isArray(node.children)) {
         for (const child of node.children) {