@jxsuite/studio 0.23.1 → 0.24.0

package/src/canvas/{canvas-diff.js → canvas-diff.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Canvas Diff — computes visual diff between original and current Jx documents.
  *
@@ -5,13 +6,14 @@
  * "modified" status up the tree for structural changes (children added/removed/reordered).
  */
 
-/**
- * @typedef {JxMutableNode} JxNode
- *
- * @typedef {"added" | "removed" | "modified"} DiffStatus
- *
- * @typedef {{ byPath: Map<string, DiffStatus>; allPaths: Set<string> }} DiffResult
- */
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+type DiffStatus = "added" | "removed" | "modified";
+
+interface DiffResult {
+  byPath: Map<string, DiffStatus>;
+  allPaths: Set<string>;
+}
 
 /**
  * Deep equality check for two values. Ignores function and ref properties.
@@ -20,31 +22,27 @@
  * @param {unknown} b
  * @returns {boolean}
  */
-function valuesEqual(a, b) {
+function valuesEqual(a: unknown, b: unknown): boolean {
   if (a === b) return true;
   if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
   if (Array.isArray(a) !== Array.isArray(b)) return false;
 
   if (Array.isArray(a)) {
-    const bArr = /** @type {unknown[]} */ (b);
+    const bArr = b as unknown[];
     if (a.length !== bArr.length) return false;
-    return a.every((/** @type {unknown} */ v, /** @type {number} */ i) => valuesEqual(v, bArr[i]));
+    return a.every((v: unknown, i: number) => valuesEqual(v, bArr[i]));
   }
 
-  const aObj = /** @type {Record<string, unknown>} */ (a);
-  const bObj = /** @type {Record<string, unknown>} */ (b);
+  const aObj = a as Record<string, unknown>;
+  const bObj = b as Record<string, unknown>;
 
-  const keysA = Object.keys(aObj).filter(
-    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
-  );
-  const keysB = Object.keys(bObj).filter(
-    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
-  );
+  const keysA = Object.keys(aObj).filter((k: string) => !k.startsWith("on") && k !== "$ref");
+  const keysB = Object.keys(bObj).filter((k: string) => !k.startsWith("on") && k !== "$ref");
 
   if (keysA.length !== keysB.length) return false;
-  if (!keysA.every((/** @type {string} */ k) => keysB.includes(k))) return false;
+  if (!keysA.every((k: string) => keysB.includes(k))) return false;
 
-  return keysA.every((/** @type {string} */ k) => valuesEqual(aObj[k], bObj[k]));
+  return keysA.every((k: string) => valuesEqual(aObj[k], bObj[k]));
 }
 
 /**
@@ -53,13 +51,11 @@ function valuesEqual(a, b) {
  * @param {JxMutableNode | undefined} node
  * @returns {JxMutableNode[]}
  */
-function elementChildren(node) {
+function elementChildren(node: JxMutableNode | undefined) {
   if (!node?.children || !Array.isArray(node.children)) return [];
-  return /** @type {JxMutableNode[]} */ (
-    node.children.filter(
-      (/** @type {JxMutableNode | string} */ c) => c != null && typeof c === "object",
-    )
-  );
+  return node.children.filter(
+    (c: JxMutableNode | string) => c != null && typeof c === "object",
+  ) as JxMutableNode[];
 }
 
 /**
@@ -71,7 +67,13 @@ function elementChildren(node) {
  * @param {Map<string, DiffStatus>} diffMap
  * @param {Set<string>} allPaths
  */
-function markRecursive(node, status, path, diffMap, allPaths) {
+function markRecursive(
+  node: JxMutableNode,
+  status: DiffStatus,
+  path: string,
+  diffMap: Map<string, DiffStatus>,
+  allPaths: Set<string>,
+) {
   allPaths.add(path);
   diffMap.set(path, status);
   const children = elementChildren(node);
@@ -88,11 +90,12 @@ function markRecursive(node, status, path, diffMap, allPaths) {
  * @param {JxMutableNode | undefined} currentDoc - Current document (in memory/on disk)
  * @returns {DiffResult}
  */
-export function computeDocumentDiff(originalDoc, currentDoc) {
-  /** @type {Map<string, DiffStatus>} */
-  const diffMap = new Map();
-  /** @type {Set<string>} */
-  const allPaths = new Set();
+export function computeDocumentDiff(
+  originalDoc: JxMutableNode | undefined,
+  currentDoc: JxMutableNode | undefined,
+): DiffResult {
+  const diffMap: Map<string, DiffStatus> = new Map();
+  const allPaths: Set<string> = new Set();
 
   /**
    * Walk both trees in parallel and mark differences.
@@ -101,7 +104,11 @@ export function computeDocumentDiff(originalDoc, currentDoc) {
    * @param {JxMutableNode | undefined} currNode
    * @param {string} path
    */
-  const walk = (origNode, currNode, path = "") => {
+  const walk = (
+    origNode: JxMutableNode | undefined,
+    currNode: JxMutableNode | undefined,
+    path: string = "",
+  ) => {
     const pathKey = path || "/";
     allPaths.add(pathKey);
 
@@ -183,10 +190,10 @@ export function computeDocumentDiff(originalDoc, currentDoc) {
  *
  * @param {HTMLElement} canvas
  */
-export function clearDiffHighlight(canvas) {
+export function clearDiffHighlight(canvas: HTMLElement) {
   canvas
     .querySelectorAll(".element-diff-added, .element-diff-removed, .element-diff-modified")
-    .forEach((/** @type {Element} */ el) => {
+    .forEach((el: Element) => {
       el.classList.remove("element-diff-added", "element-diff-removed", "element-diff-modified");
     });
 }

package/src/canvas/{canvas-helpers.js → canvas-helpers.ts}

@@ -1,27 +1,30 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /**
  * Canvas helpers — extracted from studio.js (Phase 4n). Shared query/utility functions used by
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { isInlineInContext } from "../editor/inline-edit.js";
+import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath } 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";
 
-/** @type {{ getCanvasMode: () => string; getZoom: () => number } | null} */
-let _ctx = null;
+let _ctx: { getCanvasMode: () => string; getZoom: () => number } | null = null;
 
 /**
  * Initialize the canvas helpers module.
  *
  * @param {{ getCanvasMode: () => string; getZoom: () => number }} ctx
  */
-export function initCanvasHelpers(ctx) {
+export function initCanvasHelpers(ctx: { getCanvasMode: () => string; getZoom: () => number }) {
   _ctx = ctx;
 }
 
 /** Effective zoom scale — always 1 in edit (content) mode, actual zoom otherwise. */
 export function effectiveZoom() {
-  const ctx = /** @type {{ getCanvasMode: () => string; getZoom: () => number }} */ (_ctx);
+  const ctx = _ctx!;
   return ctx.getCanvasMode() === "edit"
     ? 1
     : (ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
@@ -46,7 +49,7 @@ export function getActivePanel() {
  * @param {JxMutableNode | undefined} doc
  * @param {JxPath} path
  */
-export function bubbleInlinePath(doc, path) {
+export function bubbleInlinePath(doc: JxMutableNode | undefined, path: JxPath) {
   if (!doc) return path;
   let currentPath = path;
   while (currentPath.length >= 2) {
@@ -57,7 +60,7 @@ export function bubbleInlinePath(doc, path) {
     const childTag = (node.tagName ?? "div").toLowerCase();
     const parentTag = (parentNode.tagName ?? "div").toLowerCase();
     if (!isInlineInContext(childTag, parentTag)) break;
-    currentPath = /** @type {JxPath} */ (pPath);
+    currentPath = pPath as JxPath;
   }
   return currentPath;
 }
@@ -69,9 +72,8 @@ export function bubbleInlinePath(doc, path) {
  * @param {HTMLElement} canvasEl
  * @returns {HTMLElement | null}
  */
-export function findCanvasElement(path, canvasEl) {
-  /** @type {HTMLElement | null | undefined} */
-  let el = /** @type {HTMLElement | null} */ (canvasEl.firstElementChild);
+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;
 
@@ -79,11 +81,11 @@ export function findCanvasElement(path, canvasEl) {
     if (path[i] !== "children" && path[i] !== "cases") return null;
     const idx = path[i + 1];
     if (idx === undefined) {
-      el = /** @type {HTMLElement | undefined} */ (el.children[0]);
+      el = el.children[0] as HTMLElement | undefined;
     } else if (idx === "map") {
-      el = /** @type {HTMLElement | undefined} */ (el.children[0]?.children[0]);
+      el = el.children[0]?.children[0] as HTMLElement | undefined;
     } else {
-      el = /** @type {HTMLElement | undefined} */ (el.children[/** @type {number} */ (idx)]);
+      el = el.children[idx as number] as HTMLElement | undefined;
     }
     if (!el) break;
   }
@@ -95,7 +97,7 @@ export function findCanvasElement(path, canvasEl) {
 
   for (const candidate of canvasEl.querySelectorAll("*")) {
     const p = elToPath.get(candidate);
-    if (p && pathsEqual(p, path)) return /** @type {HTMLElement} */ (candidate);
+    if (p && pathsEqual(p, path)) return candidate as HTMLElement;
   }
   return null;
 }
@@ -105,10 +107,14 @@ export function findCanvasElement(path, canvasEl) {
  *
  * @param {Element} el
  * @param {string} type
- * @param {import("./canvas-render.js").CanvasPanel} panel
+ * @param {import("../panels/canvas-dnd.js").CanvasPanel} panel
  */
-export function overlayBoxDescriptor(el, type, panel) {
-  const viewport = /** @type {HTMLElement} */ (panel.viewport);
+export function overlayBoxDescriptor(
+  el: Element,
+  type: string,
+  panel: import("../panels/canvas-dnd.js").CanvasPanel,
+) {
+  const viewport = panel.viewport as HTMLElement;
   const vpRect = viewport.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   const scale = effectiveZoom();

package/src/canvas/{canvas-live-render.js → canvas-live-render.ts}

@@ -1,13 +1,15 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /**
  * Canvas live render — extracted from studio.js (Phase 4p). Async runtime rendering pipeline that
  * builds live canvas DOM using @jxsuite/runtime. Handles element registration, scope building, path
  * mapping ($map remapping), site-level style injection, and $head element injection.
  */
 
-import { elToPath, stripEventHandlers, projectState } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { toRaw } from "../reactivity.js";
+import { elToPath, stripEventHandlers, projectState } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { toRaw } from "../reactivity";
 import {
   renderNode as runtimeRenderNode,
   buildScope,
@@ -22,17 +24,19 @@ import {
   getEffectiveLayoutPath,
   resolveLayoutDoc,
   distributePageIntoLayout,
-} from "../site-context.js";
-import { componentRegistry, computeRelativePath } from "../files/components.js";
-import { prepareForEditMode } from "../utils/edit-display.js";
-import { getActiveElement } from "../editor/inline-edit.js";
-import { buildNestedSiteCSS } from "./nested-site-style.js";
+} 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.js";
+export { buildNestedSiteCSS } from "./nested-site-style";
+
+import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 
 /** @param {Event} e */
-function _preventNav(e) {
-  if (/** @type {HTMLElement} */ (e.target).closest("a[href]")) {
+function _preventNav(e: Event) {
+  if ((e.target as HTMLElement).closest("a[href]")) {
     e.preventDefault();
   }
 }
@@ -40,8 +44,7 @@ function _preventNav(e) {
 /** Canvas elements that already have the delegated nav guard listener. */
 const _navGuarded = new WeakSet();
 
-/** @type {{ getCanvasMode: () => string } | null} */
-let _ctx = null;
+let _ctx: { getCanvasMode: () => string } | null = null;
 
 /** Set of DOM elements that originated from the layout (not page content). */
 export const layoutElements = new WeakSet();
@@ -49,8 +52,7 @@ export const layoutElements = new WeakSet();
 /** Cache of element HREFs that failed to load — prevents infinite retry loops. */
 const _failedElements = new Set();
 
-/** @type {string | null} */
-let _failedElementsDocPath = null;
+let _failedElementsDocPath: string | null = null;
 
 /**
  * Walk the merged document tree to find the path prefix where page children were distributed into
@@ -61,7 +63,10 @@ let _failedElementsDocPath = null;
  * @param {(string | number)[]} [path]
  * @returns {(string | number)[] | null}
  */
-function findPageContentPrefix(node, path = []) {
+function findPageContentPrefix(
+  node: JxMutableNode,
+  path: (string | number)[] = [],
+): (string | number)[] | null {
   if (!node || typeof node !== "object") return null;
   if (Array.isArray(node.children)) {
     for (let i = 0; i < node.children.length; i++) {
@@ -82,13 +87,13 @@ function findPageContentPrefix(node, path = []) {
 }
 
 /** The path of the currently active layout file, or null. */
-export let activeLayoutPath = /** @type {string | null} */ (null);
+export let activeLayoutPath = null as string | null;
 
 /**
  * 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.
  */
-function markLayoutNodes(/** @type {JxMutableNode} */ node) {
+function markLayoutNodes(node: JxMutableNode) {
   if (!node || typeof node !== "object") return;
   node.$__layout = true;
   if (Array.isArray(node.children)) {
@@ -111,7 +116,7 @@ function markLayoutNodes(/** @type {JxMutableNode} */ node) {
  *   getCanvasMode: () => string;
  * }} ctx
  */
-export function initCanvasLiveRender(ctx) {
+export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
   _ctx = ctx;
 }
 
@@ -124,10 +129,10 @@ export function initCanvasLiveRender(ctx) {
  * @param {JxMutableNode} doc
  * @param {HTMLElement} canvasEl
  */
-export async function renderCanvasLive(gen, doc, canvasEl) {
+export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl: HTMLElement) {
   const tab = activeTab.value;
   const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode, document: tab?.doc.document };
-  const canvasMode = /** @type {{ getCanvasMode: () => string }} */ (_ctx).getCanvasMode();
+  const canvasMode = _ctx!.getCanvasMode();
 
   if (S.documentPath !== _failedElementsDocPath) {
     _failedElements.clear();
@@ -180,15 +185,12 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   // so we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
   if (canvasMode === "design" || canvasMode === "edit") {
-    (function findMapParents(
-      /** @type {JxMutableNode} */ node,
-      /** @type {(string | number)[]} */ path,
-    ) {
+    (function findMapParents(node: JxMutableNode, path: (string | number)[]) {
       if (!node || typeof node !== "object") return;
       if (
         node.children &&
         typeof node.children === "object" &&
-        /** @type {{ $prototype?: string }} */ (node.children).$prototype === "Array"
+        (node.children as unknown as { $prototype?: string }).$prototype === "Array"
       ) {
         mapParentPaths.add(path.join("/"));
       }
@@ -213,22 +215,17 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     const docBase = S.documentPath ? `${location.origin}/${docPrefix}${S.documentPath}` : undefined;
 
     // Register custom elements so the runtime can render them
-    let effectiveElements = getEffectiveElements(
-      /** @type {(JxElement | string)[]} */ (renderDoc.$elements),
-    );
+    let 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.
     if ((S.mode === "content" || layoutWrapped) && componentRegistry.length > 0) {
       const existingRefs = new Set(
-        effectiveElements.map((/** @type {JxElement | string} */ e) =>
-          typeof e === "string" ? e : e?.$ref,
-        ),
+        effectiveElements.map((e: JxElement | string) => (typeof e === "string" ? e : e?.$ref)),
       );
       /** @param {JxMutableNode} node */
-      const collectTags = (node) => {
-        /** @type {Set<string>} */
-        const tags = new Set();
+      const collectTags = (node: JxMutableNode) => {
+        const tags: Set<string> = new Set();
         if (!node || typeof node !== "object") return tags;
         if (node.tagName) tags.add(node.tagName);
         if (Array.isArray(node.children)) {
@@ -241,10 +238,10 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       };
       for (const tag of collectTags(renderDoc)) {
         const comp = componentRegistry.find(
-          (/** @type {import("../files/components.js").ComponentEntry} */ c) => c.tagName === tag,
+          (c: import("../files/components.js").ComponentEntry) => c.tagName === tag,
         );
         if (comp && comp.source !== "npm") {
-          const relPath = computeRelativePath(S.documentPath, comp.path);
+          const relPath = computeRelativePath(S.documentPath ?? null, comp.path);
           if (!existingRefs.has(relPath)) {
             effectiveElements.push({ $ref: relPath });
             existingRefs.add(relPath);
@@ -254,30 +251,28 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     }
 
     if (effectiveElements.length) {
-      renderDoc.$elements = /** @type {(JxMutableNode | string | { $ref: string })[]} */ (
-        /** @type {unknown} */ (effectiveElements)
-      );
+      renderDoc.$elements = effectiveElements as (string | JxMutableNode | { $ref: string })[];
       for (const entry of effectiveElements) {
         if (typeof entry === "string") {
           try {
             const specifier =
               entry.startsWith("/") || entry.startsWith(".") ? entry : `/node_modules/${entry}`;
             await import(specifier);
-          } catch (/** @type {unknown} */ e) {
+          } catch (e) {
             console.warn("Studio: failed to import package", entry, e);
           }
         } else if (entry?.$ref) {
           let href;
           try {
             href = new URL(entry.$ref, docBase).href;
-          } catch (/** @type {unknown} */ urlErr) {
+          } catch (urlErr) {
             console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
             continue;
           }
           if (_failedElements.has(href)) continue;
           try {
             await defineElement(href);
-          } catch (/** @type {unknown} */ e) {
+          } catch (e) {
             _failedElements.add(href);
             console.warn("Studio: failed to register element", entry.$ref, e);
           }
@@ -297,10 +292,10 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     // This ensures project font-family, color, etc. override the
     // content-mode fallback typography rules in the stylesheet.
     // In edit mode, propagate to the .content-edit-canvas wrapper for seamless appearance.
-    const viewport = /** @type {HTMLElement | null} */ (canvasEl.closest(".canvas-panel-viewport"));
+    const viewport = canvasEl.closest(".canvas-panel-viewport") as HTMLElement | null;
     const editSurface =
       canvasMode === "edit"
-        ? /** @type {HTMLElement | null} */ (canvasEl.closest(".content-edit-canvas"))
+        ? (canvasEl.closest(".content-edit-canvas") as HTMLElement | null)
         : null;
     const siteStyle = projectState?.projectConfig?.style;
     if (viewport) {
@@ -311,8 +306,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
           if (k.startsWith("--")) {
             viewport.style.setProperty(k, String(v));
           } else {
-            /** @type {Record<string, string>} */ (/** @type {unknown} */ (viewport.style))[k] =
-              String(v);
+            (viewport.style as unknown as Record<string, string>)[k] = String(v);
           }
         }
       }
@@ -324,8 +318,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
           if (k.startsWith("--")) {
             editSurface.style.setProperty(k, String(v));
           } else {
-            /** @type {Record<string, string>} */ (/** @type {unknown} */ (editSurface.style))[k] =
-              String(v);
+            (editSurface.style as unknown as Record<string, string>)[k] = String(v);
           }
         }
       }
@@ -334,8 +327,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       for (const [k, v] of Object.entries(siteStyle)) {
         if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
         if (!k.startsWith("--")) {
-          /** @type {Record<string, string>} */ (/** @type {unknown} */ (canvasEl.style))[k] =
-            String(v);
+          (canvasEl.style as unknown as Record<string, string>)[k] = String(v);
         }
       }
     }
@@ -383,7 +375,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
         const selector = `${tag}${attrs.href ? `[href="${attrs.href}"]` : ""}${attrs.src ? `[src="${attrs.src}"]` : ""}`;
         if (selector !== tag && document.head.querySelector(selector)) continue;
         const el = document.createElement(tag);
-        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, /** @type {string} */ (v));
+        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
         if (entry.textContent) el.textContent = entry.textContent;
         document.head.appendChild(el);
       }
@@ -395,9 +387,9 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
         onNodeCreated(
-          /** @type {HTMLElement | Text} */ el,
-          /** @type {(string | number)[]} */ path,
-          /** @type {Record<string, unknown>} */ def,
+          el: HTMLElement | Text,
+          path: (string | number)[],
+          def: Record<string, unknown>,
         ) {
           if (!(el instanceof HTMLElement)) return;
           // Track layout-originated elements — don't store in elToPath to avoid
@@ -415,9 +407,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
             const pfx = pageContentPrefix;
             if (
               path.length >= pfx.length &&
-              pfx.every(
-                (/** @type {string | number} */ seg, /** @type {number} */ i) => path[i] === seg,
-              )
+              pfx.every((seg: string | number, i: number) => path[i] === seg)
             ) {
               mappedPath = ["children", ...path.slice(pfx.length)];
             }
@@ -459,7 +449,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       // Disable pointer events on all rendered elements for edit mode
       el.style.pointerEvents = "none";
       for (const child of el.querySelectorAll("*")) {
-        /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
+        (child as HTMLElement).style.pointerEvents = "none";
       }
     }
     // Clear and append atomically — ensures the canvas is never left empty if a
@@ -486,13 +476,13 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
         for (const child of canvasEl.querySelectorAll("*")) {
           if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
           if (editingEl && child === editingEl) continue;
-          /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
+          (child as HTMLElement).style.pointerEvents = "none";
         }
       });
     }
     return $defs;
-  } catch (/** @type {unknown} */ err) {
-    console.warn("renderCanvasLive failed:", /** @type {Error} */ (err).message, err);
+  } catch (err) {
+    console.warn("renderCanvasLive failed:", (err as Error).message, err);
     return null;
   }
 }