@jxsuite/studio 0.23.1 → 0.24.0

package/src/panels/{imports-panel.js → imports-panel.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Imports panel — context-aware import manager with cherry-pick component selection.
  *
@@ -8,24 +9,23 @@
  */
 
 import { html, nothing } from "lit-html";
-import { componentRegistry, computeRelativePath } from "../files/components.js";
-import { projectState } from "../store.js";
-import { updateSiteConfig } from "../site-context.js";
-import { getPlatform } from "../platform.js";
-import { showConfirmDialog } from "../ui/layers.js";
+import { componentRegistry, computeRelativePath } from "../files/components";
+import { projectState } from "../store";
+import { updateSiteConfig } from "../site-context";
+import { getPlatform } from "../platform";
+import { showConfirmDialog } from "../ui/layers";
 
-/** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
+import type { ComponentEntry } from "../files/components";
+import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 
-/** @typedef {string | JxMutableNode | { $ref: string }} ElementsEntry */
+interface ImportsContext {
+  renderLeftPanel: () => void;
+  documentPath: string | null;
+  documentElements: ElementsEntry[];
+  applyMutation: (fn: (doc: JxMutableNode) => void) => void;
+}
 
-/**
- * @typedef {{
- *   renderLeftPanel: () => void;
- *   documentPath: string | null;
- *   documentElements: ElementsEntry[];
- *   applyMutation: (fn: (doc: JxMutableNode) => void) => void;
- * }} ImportsContext
- */
+export type ElementsEntry = string | JxMutableNode | { $ref: string };
 
 /**
  * Build the subpath specifier for a component: `<package>/<modulePath>`
@@ -33,7 +33,7 @@ import { showConfirmDialog } from "../ui/layers.js";
  * @param {ComponentEntry} comp
  * @returns {string}
  */
-function componentSpecifier(comp) {
+function componentSpecifier(comp: ComponentEntry) {
   return `${comp.package}/${comp.modulePath}`;
 }
 
@@ -45,7 +45,7 @@ function componentSpecifier(comp) {
  * @param {ElementsEntry[]} elements
  * @returns {boolean}
  */
-function isComponentEnabled(comp, elements) {
+function isComponentEnabled(comp: ComponentEntry, elements: ElementsEntry[]) {
   if (!elements?.length) return false;
   const specifier = componentSpecifier(comp);
   for (const entry of elements) {
@@ -64,8 +64,7 @@ function isComponentEnabled(comp, elements) {
  * @returns {Map<string, ComponentEntry[]>}
  */
 function groupByPackage() {
-  /** @type {Map<string, ComponentEntry[]>} */
-  const groups = new Map();
+  const groups: Map<string, ComponentEntry[]> = new Map();
   for (const comp of componentRegistry) {
     if (comp.source !== "npm" || !comp.package || !comp.modulePath) continue;
     if (!groups.has(comp.package)) groups.set(comp.package, []);
@@ -83,7 +82,7 @@ export function renderImportsTemplate({
   documentPath,
   documentElements,
   applyMutation,
-}) {
+}: ImportsContext) {
   const isSiteLevel = documentPath?.endsWith("project.json");
 
   if (isSiteLevel) {
@@ -101,12 +100,10 @@ export function renderImportsTemplate({
 // ─── Site-level: Class Imports + Dependencies + Component Cherry-pick ─────────
 
 /** @param {() => void} renderLeftPanel */
-function renderSiteLevelImports(renderLeftPanel) {
+function renderSiteLevelImports(renderLeftPanel: () => void) {
   const siteImports = projectState?.projectConfig?.imports || {};
   const entries = Object.entries(siteImports);
-  const siteElements = /** @type {ElementsEntry[]} */ (
-    projectState?.projectConfig?.$elements || []
-  );
+  const siteElements = (projectState?.projectConfig?.$elements || []) as ElementsEntry[];
 
   const packageGroups = groupByPackage();
 
@@ -124,7 +121,7 @@ function renderSiteLevelImports(renderLeftPanel) {
                 ${entries.map(
                   ([name, path]) => html`
                     <div class="import-row">
-                      <span class="import-name" title=${/** @type {string} */ (path)}>${name}</span>
+                      <span class="import-name" title=${path as string}>${name}</span>
                       <span class="import-path">${path}</span>
                       <sp-action-button
                         quiet
@@ -152,14 +149,10 @@ function renderSiteLevelImports(renderLeftPanel) {
             quiet
             size="xs"
             title="Add import"
-            @click=${async (/** @type {Event} */ e) => {
-              const form = /** @type {HTMLElement} */ (e.target).closest(".import-add-form");
-              const nameField = /** @type {HTMLInputElement} */ (
-                form?.querySelector(".import-add-name")
-              );
-              const pathField = /** @type {HTMLInputElement} */ (
-                form?.querySelector(".import-add-path")
-              );
+            @click=${async (e: Event) => {
+              const form = (e.target as HTMLElement).closest(".import-add-form");
+              const nameField = form?.querySelector(".import-add-name") as HTMLInputElement;
+              const pathField = form?.querySelector(".import-add-path") as HTMLInputElement;
               const name = nameField?.value?.trim();
               const path = pathField?.value?.trim();
               if (!name || !path) return;
@@ -196,16 +189,15 @@ function renderSiteLevelImports(renderLeftPanel) {
                     await platform.removePackage(pkg);
                     // Also remove all cherry-picked elements for this package
                     const updatedElements = siteElements.filter(
-                      (/** @type {ElementsEntry} */ e) =>
-                        typeof e !== "string" || !e.startsWith(pkg + "/"),
+                      (e: ElementsEntry) => typeof e !== "string" || !e.startsWith(pkg + "/"),
                     );
                     const { loadComponentRegistry } = await import("../files/components.js");
                     await loadComponentRegistry();
                     await updateSiteConfig({
-                      $elements: /** @type {(string | JxElement)[]} */ (updatedElements),
+                      $elements: updatedElements as (string | JxElement)[],
                     });
                     renderLeftPanel();
-                  } catch (/** @type {unknown} */ e) {
+                  } catch (e) {
                     console.error("Failed to remove package:", e);
                   }
                 }}
@@ -214,7 +206,7 @@ function renderSiteLevelImports(renderLeftPanel) {
               </sp-action-button>
             </div>
             <div class="imports-list imports-component-list">
-              ${comps.map((/** @type {ComponentEntry} */ comp) => {
+              ${comps.map((comp: ComponentEntry) => {
                 const enabled = isComponentEnabled(comp, siteElements);
                 const specifier = componentSpecifier(comp);
                 return html`
@@ -222,19 +214,17 @@ function renderSiteLevelImports(renderLeftPanel) {
                     <sp-checkbox
                       size="s"
                       .checked=${enabled}
-                      @change=${async (/** @type {Event} */ e) => {
-                        let updated = [...siteElements];
+                      @change=${async (e: Event) => {
+                        let updated: ElementsEntry[] = [...siteElements];
                         // Remove legacy full-package import if present
-                        updated = updated.filter((/** @type {ElementsEntry} */ el) => el !== pkg);
-                        if (/** @type {HTMLInputElement} */ (e.target).checked) {
+                        updated = updated.filter((el: ElementsEntry) => el !== pkg);
+                        if ((e.target as HTMLInputElement).checked) {
                           if (!updated.includes(specifier)) updated.push(specifier);
                         } else {
-                          updated = updated.filter(
-                            (/** @type {ElementsEntry} */ el) => el !== specifier,
-                          );
+                          updated = updated.filter((el: ElementsEntry) => el !== specifier);
                         }
                         await updateSiteConfig({
-                          $elements: /** @type {(string | JxElement)[]} */ (updated),
+                          $elements: updated as (string | JxElement)[],
                         });
                         renderLeftPanel();
                       }}
@@ -259,18 +249,18 @@ function renderSiteLevelImports(renderLeftPanel) {
             placeholder="Package name…"
             size="s"
             style="flex:1"
-            @keydown=${async (/** @type {KeyboardEvent} */ e) => {
+            @keydown=${async (e: KeyboardEvent) => {
               if (e.key !== "Enter") return;
-              const name = /** @type {HTMLInputElement} */ (e.target).value?.trim();
+              const name = (e.target as HTMLInputElement).value?.trim();
               if (!name) return;
-              /** @type {HTMLInputElement} */ (e.target).value = "";
+              (e.target as HTMLInputElement).value = "";
               try {
                 const platform = getPlatform();
                 await platform.addPackage(name);
                 const { loadComponentRegistry } = await import("../files/components.js");
                 await loadComponentRegistry();
                 renderLeftPanel();
-              } catch (/** @type {unknown} */ err) {
+              } catch (err) {
                 console.error("Failed to add package:", err);
               }
             }}
@@ -279,20 +269,20 @@ function renderSiteLevelImports(renderLeftPanel) {
             quiet
             size="xs"
             title="Add package"
-            @click=${async (/** @type {Event} */ e) => {
-              const input = /** @type {HTMLElement} */ (e.target)
+            @click=${async (e: Event) => {
+              const input = (e.target as HTMLElement)
                 .closest(".import-add-form")
                 ?.querySelector("sp-textfield");
-              const name = /** @type {HTMLInputElement | null} */ (input)?.value?.trim();
+              const name = (input as HTMLInputElement | null)?.value?.trim();
               if (!name) return;
-              /** @type {HTMLInputElement} */ (input).value = "";
+              (input as HTMLInputElement).value = "";
               try {
                 const platform = getPlatform();
                 await platform.addPackage(name);
                 const { loadComponentRegistry } = await import("../files/components.js");
                 await loadComponentRegistry();
                 renderLeftPanel();
-              } catch (/** @type {unknown} */ err) {
+              } catch (err) {
                 console.error("Failed to add package:", err);
               }
             }}
@@ -313,30 +303,26 @@ function renderDocumentLevelImports({
   documentPath,
   documentElements,
   applyMutation,
-}) {
+}: ImportsContext) {
   const refEntries = documentElements.filter(
-    (/** @type {ElementsEntry} */ e) => e && typeof e === "object" && e.$ref,
-  );
-  const npmEntries = documentElements.filter(
-    (/** @type {ElementsEntry} */ e) => typeof e === "string",
+    (e: ElementsEntry) => e && typeof e === "object" && e.$ref,
   );
+  const npmEntries = documentElements.filter((e: ElementsEntry) => typeof e === "string");
 
   // Available JX components not yet imported
-  const importedRefs = new Set(
-    refEntries.map((/** @type {ElementsEntry} */ e) => /** @type {{ $ref: string }} */ (e).$ref),
-  );
+  const importedRefs = new Set(refEntries.map((e: ElementsEntry) => (e as { $ref: string }).$ref));
   const availableComponents = componentRegistry.filter(
-    (/** @type {ComponentEntry} */ c) =>
+    (c: ComponentEntry) =>
       c.source !== "npm" && !importedRefs.has(`./${c.path}`) && !importedRefs.has(c.path),
   );
 
   const packageGroups = groupByPackage();
 
   /** @param {string} ref */
-  const removeRef = (ref) => {
-    applyMutation((/** @type {JxMutableNode} */ doc) => {
+  const removeRef = (ref: string) => {
+    applyMutation((doc: JxMutableNode) => {
       doc.$elements = (doc.$elements || []).filter(
-        (/** @type {ElementsEntry} */ e) => !(e && typeof e === "object" && e.$ref === ref),
+        (e: ElementsEntry) => !(e && typeof e === "object" && e.$ref === ref),
       );
     });
     renderLeftPanel();
@@ -354,18 +340,16 @@ function renderDocumentLevelImports({
           ? html`
               <div class="imports-list">
                 ${refEntries.map(
-                  (/** @type {ElementsEntry} */ entry) => html`
+                  (entry: ElementsEntry) => html`
                     <div class="import-row">
-                      <span
-                        class="import-path"
-                        title=${/** @type {{ $ref: string }} */ (entry).$ref}
-                        >${/** @type {{ $ref: string }} */ (entry).$ref}</span
+                      <span class="import-path" title=${(entry as { $ref: string }).$ref}
+                        >${(entry as { $ref: string }).$ref}</span
                       >
                       <sp-action-button
                         quiet
                         size="xs"
                         title="Remove"
-                        @click=${() => removeRef(/** @type {{ $ref: string }} */ (entry).$ref)}
+                        @click=${() => removeRef((entry as { $ref: string }).$ref)}
                       >
                         <sp-icon-close slot="icon" size="xs"></sp-icon-close>
                       </sp-action-button>
@@ -382,16 +366,14 @@ function renderDocumentLevelImports({
                   size="s"
                   label="Add component…"
                   class="import-picker"
-                  @change=${(/** @type {Event} */ e) => {
-                    const tag = /** @type {HTMLInputElement} */ (e.target).value;
+                  @change=${(e: Event) => {
+                    const tag = (e.target as HTMLInputElement).value;
                     if (!tag) return;
-                    /** @type {HTMLInputElement} */ (e.target).value = "";
-                    const comp = componentRegistry.find(
-                      (/** @type {ComponentEntry} */ c) => c.tagName === tag,
-                    );
+                    (e.target as HTMLInputElement).value = "";
+                    const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tag);
                     if (!comp) return;
                     const relPath = computeRelativePath(documentPath, comp.path);
-                    applyMutation((/** @type {JxMutableNode} */ doc) => {
+                    applyMutation((doc: JxMutableNode) => {
                       if (!doc.$elements) doc.$elements = [];
                       doc.$elements.push({ $ref: relPath });
                     });
@@ -399,7 +381,7 @@ function renderDocumentLevelImports({
                   }}
                 >
                   ${availableComponents.map(
-                    (/** @type {ComponentEntry} */ c) =>
+                    (c: ComponentEntry) =>
                       html`<sp-menu-item value=${c.tagName}>&lt;${c.tagName}&gt;</sp-menu-item>`,
                   )}
                 </sp-picker>
@@ -416,7 +398,7 @@ function renderDocumentLevelImports({
               <span class="imports-section-title import-mono">${pkg}</span>
             </div>
             <div class="imports-list imports-component-list">
-              ${comps.map((/** @type {ComponentEntry} */ comp) => {
+              ${comps.map((comp: ComponentEntry) => {
                 const enabled = isComponentEnabled(comp, npmEntries);
                 const specifier = componentSpecifier(comp);
                 return html`
@@ -424,18 +406,16 @@ function renderDocumentLevelImports({
                     <sp-checkbox
                       size="s"
                       .checked=${enabled}
-                      @change=${(/** @type {Event} */ e) => {
-                        applyMutation((/** @type {JxMutableNode} */ doc) => {
+                      @change=${(e: Event) => {
+                        applyMutation((doc: JxMutableNode) => {
                           if (!doc.$elements) doc.$elements = [];
                           // Remove legacy full-package import if present
-                          doc.$elements = doc.$elements.filter(
-                            (/** @type {ElementsEntry} */ el) => el !== pkg,
-                          );
-                          if (/** @type {HTMLInputElement} */ (e.target).checked) {
+                          doc.$elements = doc.$elements.filter((el: ElementsEntry) => el !== pkg);
+                          if ((e.target as HTMLInputElement).checked) {
                             if (!doc.$elements.includes(specifier)) doc.$elements.push(specifier);
                           } else {
                             doc.$elements = doc.$elements.filter(
-                              (/** @type {ElementsEntry} */ el) => el !== specifier,
+                              (el: ElementsEntry) => el !== specifier,
                             );
                           }
                         });

package/src/panels/{layers-panel.js → layers-panel.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Layers panel — document tree view showing element hierarchy with collapse, selection, move
  * actions, and drag-and-drop reordering.
@@ -15,18 +16,20 @@ import {
   childIndex,
   nodeLabel,
   VOID_ELEMENTS,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
+} from "../store";
+import { activeTab } from "../workspace/workspace";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 import {
   transactDoc,
   mutateMoveNode,
   mutateRemoveNode,
   mutateUpdateProperty,
-} from "../tabs/transact.js";
-import { view } from "../view.js";
-import { isInlineElement } from "../editor/inline-edit.js";
-import { showContextMenu } from "../editor/context-menu.js";
-import { panToElement } from "../canvas/canvas-utils.js";
+} from "../tabs/transact";
+import { view } from "../view";
+import { isInlineElement } from "../editor/inline-edit";
+import { showContextMenu } from "../editor/context-menu";
+import { panToElement } from "../canvas/canvas-utils";
 
 /**
  * Start inline title editing on a layer row.
@@ -34,22 +37,24 @@ import { panToElement } from "../canvas/canvas-utils.js";
  * @param {JxPath} path
  * @param {() => void} rerender
  */
-export function startLayerTitleEdit(path, rerender) {
+export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
   const key = pathKey(path);
   const row = document.querySelector(`.layer-row[data-path="${key}"]`);
   if (!row) return;
-  const label = /** @type {HTMLElement | null} */ (row.querySelector(".layer-label"));
+  const label = row.querySelector(".layer-label") as HTMLElement | null;
   if (!label) return;
 
   const tab = activeTab.value;
-  const node = getNodeAtPath(tab?.doc.document, path);
+  if (!tab) return;
+  const node = getNodeAtPath(tab.doc.document, path);
   if (!node) return;
 
   label.style.display = "none";
   const input = document.createElement("input");
   input.className = "layer-title-input";
   input.value = node.$title || "";
-  input.placeholder = nodeLabel({ ...node, $title: undefined });
+  const { $title: _, ...nodeWithoutTitle } = node;
+  input.placeholder = nodeLabel(nodeWithoutTitle);
   label.after(input);
   input.focus();
   input.select();
@@ -64,7 +69,7 @@ export function startLayerTitleEdit(path, rerender) {
     committed = true;
     cleanup();
     const val = input.value.trim();
-    transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "$title", val || undefined));
+    transactDoc(tab, (t) => mutateUpdateProperty(t, path, "$title", val || undefined));
     rerender();
   };
   const cancel = () => {
@@ -74,7 +79,7 @@ export function startLayerTitleEdit(path, rerender) {
     rerender();
   };
   input.addEventListener("blur", commit);
-  input.addEventListener("keydown", (/** @type {KeyboardEvent} */ e) => {
+  input.addEventListener("keydown", (e: KeyboardEvent) => {
     if (e.key === "Enter") {
       e.preventDefault();
       input.blur();
@@ -90,17 +95,19 @@ export function startLayerTitleEdit(path, rerender) {
  * @param {{ navigateToComponent: (path: string) => void; rerender: () => void }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderLayersTemplate(ctx) {
+export function renderLayersTemplate(ctx: {
+  navigateToComponent: (path: string) => void;
+  rerender: () => void;
+}) {
   const tab = activeTab.value;
 
   for (const fn of view.dndCleanups) fn();
   view.dndCleanups = [];
 
-  const rows = flattenTree(tab?.doc.document);
+  const rows = flattenTree(tab!.doc.document);
   const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
 
-  /** @type {import("lit-html").TemplateResult[]} */
-  const layerRows = [];
+  const layerRows: import("lit-html").TemplateResult[] = [];
   for (const { node, path, depth, nodeType } of rows) {
     let hidden = false;
     for (let d = 1; d <= path.length; d++) {
@@ -130,23 +137,21 @@ export function renderLayersTemplate(ctx) {
 
     // After text-node skip, node is guaranteed to be JxMutableNode (not a primitive)
     if (typeof node !== "object" || node === null) continue;
-    /** @type {JxMutableNode} */
-    const jxNode = /** @type {JxMutableNode} */ (node);
+    const jxNode: JxMutableNode = node as JxMutableNode;
 
     if (path.length >= 2 && nodeType === "element") {
       const pPath = parentElementPath(path);
-      const parentNode = pPath ? getNodeAtPath(tab?.doc.document, pPath) : null;
+      const parentNode = pPath ? getNodeAtPath(tab!.doc.document, pPath) : null;
       if (parentNode && isInlineElement(jxNode, parentNode)) continue;
     }
 
     const key = pathKey(path);
-    const isSelected = pathsEqual(path, tab?.session.selection);
+    const isSelected = pathsEqual(path, tab!.session.selection);
     const hasChildren = Array.isArray(jxNode.children) && jxNode.children.length > 0;
     const hasMapChildren =
       jxNode.children &&
       typeof jxNode.children === "object" &&
-      /** @type {{ $prototype?: string }} */ (/** @type {unknown} */ (jxNode.children))
-        .$prototype === "Array";
+      (jxNode.children as unknown as Record<string, unknown>).$prototype === "Array";
     const hasCases =
       jxNode.$switch &&
       jxNode.cases &&
@@ -194,10 +199,9 @@ export function renderLayersTemplate(ctx) {
 
     const isElement = nodeType === "element";
     const isRoot = tab?.doc.mode === "content" ? path.length === 0 : path.length < 2;
-    const idx = isElement ? /** @type {number} */ (childIndex(path)) : 0;
-    const parentPath =
-      isElement && !isRoot ? /** @type {JxPath} */ (parentElementPath(path)) : null;
-    const parentNode = parentPath ? getNodeAtPath(tab?.doc.document, parentPath) : null;
+    const idx = isElement ? (childIndex(path) as number) : 0;
+    const parentPath = isElement && !isRoot ? (parentElementPath(path) as JxPath) : null;
+    const parentNode = parentPath ? getNodeAtPath(tab!.doc.document, parentPath) : null;
     const siblingCount = parentNode?.children?.length || 0;
     const canMoveUp = isElement && !isRoot && idx > 0;
     const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
@@ -209,7 +213,7 @@ export function renderLayersTemplate(ctx) {
       if (!ch) return false;
       if (
         typeof ch === "object" &&
-        /** @type {{ $prototype?: string }} */ (/** @type {unknown} */ (ch)).$prototype === "Array"
+        (ch as unknown as Record<string, unknown>).$prototype === "Array"
       )
         return true;
       if (!Array.isArray(ch)) return false;
@@ -221,7 +225,7 @@ export function renderLayersTemplate(ctx) {
     const canMoveIn = isElement && !isRoot && prevIsContainer;
     const grandparentPath =
       isElement && parentPath && parentPath.length >= 2
-        ? /** @type {JxPath} */ (parentElementPath(parentPath))
+        ? (parentElementPath(parentPath) as JxPath)
         : null;
     const canMoveOut = isElement && !isRoot && !!grandparentPath;
 
@@ -234,17 +238,17 @@ export function renderLayersTemplate(ctx) {
         data-dnd-void=${isElement && isVoidEl ? "" : nothing}
         data-dnd-expanded=${isElement && isExpandable && !collapsed.has(key) ? "" : nothing}
         @click=${() => {
-          activeTab.value.session.selection = path;
+          activeTab.value!.session.selection = path;
           panToElement(path);
         }}
         @dblclick=${isElement
-          ? (/** @type {MouseEvent} */ e) => {
+          ? (e: MouseEvent) => {
               e.stopPropagation();
               startLayerTitleEdit(path, ctx.rerender);
             }
           : nothing}
         @contextmenu=${isElement
-          ? (/** @type {MouseEvent} */ e) =>
+          ? (e: MouseEvent) =>
               showContextMenu(e, path, {
                 onEditComponent: ctx.navigateToComponent,
                 rerender: ctx.rerender,
@@ -274,11 +278,11 @@ export function renderLayersTemplate(ctx) {
                       quiet
                       size="xs"
                       title="Move up"
-                      @click=${(/** @type {MouseEvent} */ e) => {
+                      @click=${(e: MouseEvent) => {
                         e.stopPropagation();
-                        /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        const pp = /** @type {JxPath} */ (parentPath);
-                        transactDoc(activeTab.value, (t) => mutateMoveNode(t, path, pp, idx - 1));
+                        (e.currentTarget as HTMLElement).blur();
+                        const pp = parentPath as JxPath;
+                        transactDoc(activeTab.value!, (t) => mutateMoveNode(t, path, pp, idx - 1));
                       }}
                     >
                       <sp-icon-arrow-up slot="icon"></sp-icon-arrow-up>
@@ -289,11 +293,11 @@ export function renderLayersTemplate(ctx) {
                       quiet
                       size="xs"
                       title="Move down"
-                      @click=${(/** @type {MouseEvent} */ e) => {
+                      @click=${(e: MouseEvent) => {
                         e.stopPropagation();
-                        /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        const pp = /** @type {JxPath} */ (parentPath);
-                        transactDoc(activeTab.value, (t) => mutateMoveNode(t, path, pp, idx + 2));
+                        (e.currentTarget as HTMLElement).blur();
+                        const pp = parentPath as JxPath;
+                        transactDoc(activeTab.value!, (t) => mutateMoveNode(t, path, pp, idx + 2));
                       }}
                     >
                       <sp-icon-arrow-down slot="icon"></sp-icon-arrow-down>
@@ -304,14 +308,16 @@ export function renderLayersTemplate(ctx) {
                       quiet
                       size="xs"
                       title="Move into previous sibling"
-                      @click=${(/** @type {MouseEvent} */ e) => {
+                      @click=${(e: MouseEvent) => {
                         e.stopPropagation();
-                        /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        const pp = /** @type {JxPath} */ (parentPath);
+                        (e.currentTarget as HTMLElement).blur();
+                        const pp = parentPath as JxPath;
                         const prevPath = [...pp, idx - 1];
-                        const prev = getNodeAtPath(activeTab.value?.doc.document, prevPath);
+                        const prev = getNodeAtPath(activeTab.value!.doc.document, prevPath);
                         const len = prev?.children?.length || 0;
-                        transactDoc(activeTab.value, (t) => mutateMoveNode(t, path, prevPath, len));
+                        transactDoc(activeTab.value!, (t) =>
+                          mutateMoveNode(t, path, prevPath, len),
+                        );
                       }}
                     >
                       <sp-icon-arrow-right slot="icon"></sp-icon-arrow-right>
@@ -322,14 +328,12 @@ export function renderLayersTemplate(ctx) {
                       quiet
                       size="xs"
                       title="Move out of parent"
-                      @click=${(/** @type {MouseEvent} */ e) => {
+                      @click=${(e: MouseEvent) => {
                         e.stopPropagation();
-                        /** @type {HTMLElement} */ (e.currentTarget).blur();
-                        const gp = /** @type {JxPath} */ (grandparentPath);
-                        const parentIdx = /** @type {number} */ (
-                          childIndex(/** @type {JxPath} */ (parentPath))
-                        );
-                        transactDoc(activeTab.value, (t) =>
+                        (e.currentTarget as HTMLElement).blur();
+                        const gp = grandparentPath as JxPath;
+                        const parentIdx = childIndex(parentPath!) as number;
+                        transactDoc(activeTab.value!, (t) =>
                           mutateMoveNode(t, path, gp, parentIdx + 1),
                         );
                       }}
@@ -342,9 +346,9 @@ export function renderLayersTemplate(ctx) {
                   size="xs"
                   class="layer-delete"
                   title="Delete"
-                  @click=${(/** @type {MouseEvent} */ e) => {
+                  @click=${(e: MouseEvent) => {
                     e.stopPropagation();
-                    transactDoc(activeTab.value, (t) => mutateRemoveNode(t, path));
+                    transactDoc(activeTab.value!, (t) => mutateRemoveNode(t, path));
                   }}
                 >
                   <sp-icon-close slot="icon"></sp-icon-close>
@@ -360,13 +364,13 @@ export function renderLayersTemplate(ctx) {
     <div class="layers-container" style="position:relative">
       <div
         class="layers-tree"
-        @click=${(/** @type {MouseEvent} */ e) => {
-          const toggle = /** @type {HTMLElement} */ (e.target).closest(".layer-toggle");
+        @click=${(e: MouseEvent) => {
+          const toggle = (e.target as HTMLElement).closest(".layer-toggle");
           if (!toggle) return;
           e.stopPropagation();
           const row = toggle.closest(".layer-row");
           if (!row) return;
-          const key = /** @type {HTMLElement} */ (row).dataset.path;
+          const key = (row as HTMLElement).dataset.path;
           if (!key) return;
           if (collapsed.has(key)) collapsed.delete(key);
           else collapsed.add(key);