@jxsuite/studio 0.23.2 → 0.24.0

package/src/editor/{component-inline-edit.js → component-inline-edit.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Component inline edit — extracted from studio.js (Phase 4j). Manages plaintext-only editing on
  * canvas elements in design mode, with slash menu delegation for block insertion.
@@ -11,28 +12,43 @@ import {
   childIndex,
   canvasPanels,
   elToPath,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
+} from "../store";
+import { activeTab } from "../workspace/workspace";
+import type { JxPath } from "../state";
 import {
   transactDoc,
   mutateRemoveNode,
   mutateInsertNode,
   mutateUpdateProperty,
-} from "../tabs/transact.js";
-import { view } from "../view.js";
-import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.js";
-import { renderBlockActionBar } from "../panels/block-action-bar.js";
-import { defaultDef } from "../panels/shared.js";
+} from "../tabs/transact";
+import { view } from "../view";
+import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu";
+import { renderBlockActionBar } from "../panels/block-action-bar";
+import { defaultDef } from "../panels/shared";
 
-/** @type {{ findCanvasElement: Function } | null} */
+/**
+ * @type {{
+ *   findCanvasElement: (
+ *     path: import("../state").JxPath,
+ *     canvasEl: HTMLElement,
+ *   ) => HTMLElement | null;
+ * } | null}
+ */
 let _ctx = null;
 
 /**
  * Initialize the component inline edit module.
  *
- * @param {{ findCanvasElement: Function }} ctx
+ * @param {{
+ *   findCanvasElement: (
+ *     path: import("../state").JxPath,
+ *     canvasEl: HTMLElement,
+ *   ) => HTMLElement | null;
+ * }} ctx
  */
-export function initComponentInlineEdit(ctx) {
+export function initComponentInlineEdit(ctx: {
+  findCanvasElement: (path: JxPath, canvasEl: HTMLElement) => HTMLElement | null;
+}) {
   _ctx = ctx;
 }
 
@@ -42,12 +58,12 @@ export function initComponentInlineEdit(ctx) {
  * @param {HTMLElement} el
  * @param {JxPath} path
  */
-export function enterComponentInlineEdit(el, path) {
+export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
   if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
     return;
   }
 
-  const node = getNodeAtPath(activeTab.value?.doc.document, path);
+  const node = getNodeAtPath(activeTab.value!.doc.document, path);
   if (!node) return;
 
   const tc = node.textContent;
@@ -59,9 +75,7 @@ export function enterComponentInlineEdit(el, path) {
   if (voids.has(node.tagName || "")) return;
 
   for (const p of canvasPanels) {
-    const boxes = /** @type {NodeListOf<HTMLElement>} */ (
-      p.overlay.querySelectorAll(".overlay-box")
-    );
+    const boxes = p.overlay.querySelectorAll(".overlay-box") as NodeListOf<HTMLElement>;
     for (const box of boxes) {
       box.style.border = "none";
     }
@@ -96,22 +110,20 @@ export function enterComponentInlineEdit(el, path) {
   el.addEventListener("keydown", componentInlineKeydown);
   el.addEventListener("input", componentInlineInput);
 
-  const outsideHandler = (/** @type {MouseEvent} */ evt) => {
+  const outsideHandler = (evt: MouseEvent) => {
     if (!view.componentInlineEdit) {
       document.removeEventListener("mousedown", outsideHandler, true);
       return;
     }
-    if (view.componentInlineEdit.el.contains(/** @type {Node} */ (evt.target))) return;
+    if (view.componentInlineEdit.el.contains(evt.target as Node)) return;
     if (isSlashMenuOpen()) return;
-    if (view.blockActionBarEl && view.blockActionBarEl.contains(/** @type {Node} */ (evt.target)))
-      return;
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target as Node)) return;
     document.removeEventListener("mousedown", outsideHandler, true);
 
-    /** @type {(string | number)[] | null} */
-    let hitPath = null,
+    let hitPath: (string | number)[] | null = null,
       hitMedia = null;
     for (const p of canvasPanels) {
-      const els = /** @type {NodeListOf<HTMLElement>} */ (p.canvas.querySelectorAll("*"));
+      const els = p.canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
       for (const el of els) el.style.pointerEvents = "auto";
       p.overlayClk.style.display = "none";
       const found = document.elementsFromPoint(evt.clientX, evt.clientY);
@@ -141,12 +153,12 @@ export function enterComponentInlineEdit(el, path) {
       let hp = hitPath;
       const media = hitMedia === "base" ? null : (hitMedia ?? null);
       updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
-      activeTab.value.session.ui.activeMedia = media;
+      activeTab.value!.session.ui.activeMedia = media;
       if (isEmpty && pPath) {
         transactDoc(activeTab.value, (t) => {
           mutateRemoveNode(t, editPath);
-          const removedIdx = /** @type {number} */ (childIndex(editPath));
-          const hitIdx = /** @type {number} */ (childIndex(hp));
+          const removedIdx = childIndex(editPath) as number;
+          const hitIdx = childIndex(hp) as number;
           const hitParent = parentElementPath(hp);
           if (
             hitParent &&
@@ -165,7 +177,7 @@ export function enterComponentInlineEdit(el, path) {
           t.session.selection = hp;
         });
       } else {
-        activeTab.value.session.selection = hp;
+        activeTab.value!.session.selection = hp;
       }
     } else {
       if (isEmpty && pPath) {
@@ -187,7 +199,7 @@ export function enterComponentInlineEdit(el, path) {
 }
 
 /** @param {KeyboardEvent} e */
-function componentInlineKeydown(e) {
+function componentInlineKeydown(e: KeyboardEvent) {
   if (isSlashMenuOpen()) {
     if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
   }
@@ -206,7 +218,7 @@ function splitParagraph() {
   if (!view.componentInlineEdit) return;
   const { el, path, mediaName } = view.componentInlineEdit;
 
-  const sel = /** @type {Selection | null} */ (el.ownerDocument.defaultView?.getSelection());
+  const sel = el.ownerDocument.defaultView?.getSelection() as Selection | null;
   const fullText = el.textContent || "";
   let offset = fullText.length;
   if (sel && sel.rangeCount) {
@@ -221,8 +233,8 @@ function splitParagraph() {
   const textAfter = fullText.slice(offset);
 
   const tag = "p";
-  const pPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
+  const pPath = parentElementPath(path) as JxPath;
+  const idx = childIndex(path) as number;
   if (!pPath) return;
 
   const newDef = { tagName: tag, textContent: textAfter };
@@ -268,7 +280,7 @@ function cancelComponentInlineEdit() {
 }
 
 /** @param {HTMLElement} el */
-function cleanupComponentInlineEdit(el) {
+function cleanupComponentInlineEdit(el: HTMLElement) {
   el.removeEventListener("keydown", componentInlineKeydown);
   el.removeEventListener("input", componentInlineInput);
   dismissSlashMenu();
@@ -306,11 +318,11 @@ function componentInlineInput() {
 }
 
 /** @param {{ tag: string; label: string; description: string }} cmd */
-function handleComponentSlashSelect(cmd) {
+function handleComponentSlashSelect(cmd: { tag: string; label: string; description: string }) {
   if (!view.componentInlineEdit) return;
   const { el, path, mediaName } = view.componentInlineEdit;
   const pPath = parentElementPath(path);
-  const idx = /** @type {number} */ (childIndex(path));
+  const idx = childIndex(path) as number;
   if (!pPath) return;
 
   cleanupComponentInlineEdit(el);

package/src/editor/{content-inline-edit.js → content-inline-edit.ts}

@@ -1,27 +1,18 @@
-/**
- * Content inline edit bridge — extracted from studio.js (Phase 4k). Rich-text editing entry point
- * for edit/content mode. Bridges startEditing() with Jx document state mutations.
- *
- * @typedef {import("./inline-edit.js").JxContentResult} JxContentResult
- *
- * @typedef {import("./inline-edit.js").SlashCommand} SlashCommand
- */
-
-import {
-  renderOnly,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
-  canvasPanels,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateInsertNode, mutateUpdateProperty } from "../tabs/transact.js";
-import { view } from "../view.js";
-import { startEditing, isEditableBlock } from "./inline-edit.js";
-import { restoreTemplateExpressions } from "../utils/edit-display.js";
-import { renderBlockActionBar } from "../panels/block-action-bar.js";
-import { defaultDef } from "../panels/shared.js";
-import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
+/// <reference lib="dom" />
+import { renderOnly, getNodeAtPath, parentElementPath, childIndex, canvasPanels } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateInsertNode, mutateUpdateProperty } from "../tabs/transact";
+import { view } from "../view";
+import { startEditing, isEditableBlock } from "./inline-edit";
+import { restoreTemplateExpressions } from "../utils/edit-display";
+import { renderBlockActionBar } from "../panels/block-action-bar";
+import { defaultDef } from "../panels/shared";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
+
+import type { JxContentResult } from "./inline-edit";
+import type { SlashCommand } from "./inline-edit";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 /**
  * Enter rich-text inline editing on a canvas element (edit/content mode).
@@ -29,7 +20,7 @@ import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
  * @param {HTMLElement} el
  * @param {JxPath} path
  */
-export function enterInlineEdit(el, path) {
+export function enterInlineEdit(el: HTMLElement, path: JxPath) {
   // Restore raw template expressions before editing.
   // prepareForEditMode renders ${expr} as ❪ expr ❫ for display;
   // revert so the user edits the real syntax and commits it back intact.
@@ -43,11 +34,11 @@ export function enterInlineEdit(el, path) {
 
   startEditing(el, path, {
     onCommit(
-      /** @type {JxPath} */ commitPath,
-      /** @type {(JxMutableNode | string)[] | null} */ children,
-      /** @type {string | null} */ textContent,
+      commitPath: JxPath,
+      children: (JxMutableNode | string)[] | null,
+      textContent: string | null,
     ) {
-      const node = getNodeAtPath(activeTab.value?.doc.document, commitPath);
+      const node = getNodeAtPath(activeTab.value!.doc.document, commitPath);
       if (children) {
         if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
         transactDoc(activeTab.value, (t) => {
@@ -63,18 +54,13 @@ export function enterInlineEdit(el, path) {
       }
     },
 
-    onSplit(
-      /** @type {JxPath} */ splitPath,
-      /** @type {JxContentResult} */ before,
-      /** @type {JxContentResult} */ after,
-    ) {
+    onSplit(splitPath: JxPath, before: JxContentResult, after: JxContentResult) {
       const tag = "p";
 
       // Insert new element after with "after" content
-      const parentPath = /** @type {JxPath} */ (parentElementPath(splitPath));
-      const idx = /** @type {number} */ (childIndex(splitPath));
-      /** @type {JxMutableNode} */
-      const newNode = { tagName: tag };
+      const parentPath = parentElementPath(splitPath) as JxPath;
+      const idx = childIndex(splitPath) as number;
+      const newNode: JxMutableNode = { tagName: tag };
       if (after.textContent != null) {
         newNode.textContent = after.textContent;
       } else if (after.children) {
@@ -116,11 +102,7 @@ export function enterInlineEdit(el, path) {
       });
     },
 
-    onInsert(
-      /** @type {JxPath} */ afterPath,
-      /** @type {SlashCommand} */ cmd,
-      /** @type {JxContentResult | undefined} */ commitData,
-    ) {
+    onInsert(afterPath: JxPath, cmd: SlashCommand, commitData: JxContentResult | undefined) {
       const isEmpty =
         !commitData ||
         (commitData.textContent != null && commitData.textContent.trim() === "") ||
@@ -160,8 +142,8 @@ export function enterInlineEdit(el, path) {
       }
 
       const elementDef = defaultDef(cmd.tag);
-      const parentPath = /** @type {JxPath} */ (parentElementPath(afterPath));
-      const idx = /** @type {number} */ (childIndex(afterPath));
+      const parentPath = parentElementPath(afterPath) as JxPath;
+      const idx = childIndex(afterPath) as number;
       const newPath = [...parentPath, "children", idx + 1];
 
       // Apply pending commit from inline edit first (batched to avoid double render)

package/src/editor/{context-menu.js → context-menu.ts}

@@ -1,9 +1,10 @@
+/// <reference lib="dom" />
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { htmlToJx } from "@jxsuite/parser/html-to-jx";
-import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
-import { activeTab, workspace } from "../workspace/workspace.js";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { activeTab, workspace } from "../workspace/workspace";
 import {
   transactDoc,
   mutateInsertNode,
@@ -11,28 +12,25 @@ import {
   mutateDuplicateNode,
   mutateWrapNode,
   mutateReplaceStyle,
-} from "../tabs/transact.js";
-import { statusMessage } from "../panels/statusbar.js";
-import { convertToComponent } from "./convert-to-component.js";
-import { convertToRepeater } from "./convert-to-repeater.js";
-import { componentRegistry } from "../files/components.js";
-import { renderPopover } from "../ui/layers.js";
-import { startLayerTitleEdit } from "../panels/layers-panel.js";
+} from "../tabs/transact";
+import { statusMessage } from "../panels/statusbar";
+import { convertToComponent } from "./convert-to-component";
+import { convertToRepeater } from "./convert-to-repeater";
+import { componentRegistry } from "../files/components";
+import { renderPopover } from "../ui/layers";
+import { startLayerTitleEdit } from "../panels/layers-panel";
 
-/**
- * @typedef {import("../state.js").StudioState} StudioState
- *
- * @typedef {import("../state.js").JxPath} JxPath
- *
- * @typedef {JxMutableNode} JxNode
- */
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+type JxNode = JxMutableNode;
 
 // ─── Clipboard helpers ───────────────────────────────────────────────────────
 
 const JX_MIME = "web application/jx+json";
 
 /** @param {JxNode | string} node */
-function nodeToHtml(node) {
+function nodeToHtml(node: JxNode | string) {
   if (typeof node === "string") return node;
   const tag = node.tagName || "div";
   let attrs = "";
@@ -61,7 +59,7 @@ function nodeToHtml(node) {
  *
  * @param {object} json
  */
-async function writeToClipboard(json) {
+async function writeToClipboard(json: Record<string, unknown>) {
   workspace.clipboard = json;
   try {
     await navigator.clipboard.write([
@@ -98,9 +96,9 @@ async function readFromClipboard() {
         const blob = await item.getType("text/html");
         const htmlStr = await blob.text();
         const nodes = htmlToJx(htmlStr);
-        const jxNodes = /** @type {JxNode[]} */ (
-          nodes.map((n) => (typeof n === "string" ? { tagName: "p", textContent: n } : n))
-        );
+        const jxNodes = nodes.map((n) =>
+          typeof n === "string" ? { tagName: "p", textContent: n } : n,
+        ) as JxNode[];
         if (jxNodes.length > 0) return jxNodes;
       }
       if (item.types.includes("text/plain")) {
@@ -161,8 +159,8 @@ export async function pasteNode() {
   if (!parent) return;
 
   if (tab.session.selection && tab.session.selection.length >= 2) {
-    const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
-    const idx = /** @type {number} */ (childIndex(tab.session.selection));
+    const pp = parentElementPath(tab.session.selection) as JxPath;
+    const idx = childIndex(tab.session.selection) as number;
     transactDoc(tab, (t) => {
       for (let i = 0; i < nodes.length; i++) {
         mutateInsertNode(t, pp, idx + 1 + i, nodes[i]);
@@ -193,15 +191,14 @@ export function pasteStyles() {
   const tab = activeTab.value;
   if (!tab?.session.selection) return;
   const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
-  const sel = /** @type {JxPath} */ (tab.session.selection);
+  const sel = tab.session.selection as JxPath;
   transactDoc(tab, (t) => mutateReplaceStyle(t, sel, style));
   statusMessage("Styles pasted");
 }
 
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
-/** @type {ReturnType<typeof renderPopover> | null} */
-let _ctxHandle = null;
+let _ctxHandle: ReturnType<typeof renderPopover> | null = null;
 
 /** Dismiss the context menu if open. */
 export function dismissContextMenu() {
@@ -216,12 +213,17 @@ export function dismissContextMenu() {
  * @param {JxPath} path
  * @param {{ onEditComponent?: (path: string) => void; rerender?: () => void }} [opts]
  */
-export function showContextMenu(e, path, opts = {}) {
+export function showContextMenu(
+  e: MouseEvent,
+  path: JxPath,
+  opts: { onEditComponent?: (path: string) => void; rerender?: () => void } = {},
+) {
   e.preventDefault();
   dismissContextMenu();
 
   const tab = activeTab.value;
-  const node = getNodeAtPath(tab?.doc.document, path);
+  if (!tab) return;
+  const node = getNodeAtPath(tab.doc.document, path);
   if (!node) return;
 
   // Select the node
@@ -261,8 +263,8 @@ export function showContextMenu(e, path, opts = {}) {
     items.push({
       label: "Insert before",
       action: () => {
-        const pp = /** @type {JxPath} */ (parentElementPath(path));
-        const idx = /** @type {number} */ (childIndex(path));
+        const pp = parentElementPath(path) as JxPath;
+        const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(t, pp, idx, { tagName: "p", children: [] }),
         );
@@ -271,8 +273,8 @@ export function showContextMenu(e, path, opts = {}) {
     items.push({
       label: "Insert after",
       action: () => {
-        const pp = /** @type {JxPath} */ (parentElementPath(path));
-        const idx = /** @type {number} */ (childIndex(path));
+        const pp = parentElementPath(path) as JxPath;
+        const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(t, pp, idx + 1, { tagName: "p", children: [] }),
         );
@@ -309,7 +311,7 @@ export function showContextMenu(e, path, opts = {}) {
         );
         items.push({
           label: "Edit Component",
-          action: () => opts.onEditComponent?.(/** @type {string} */ (comp?.path)),
+          action: () => opts.onEditComponent?.(comp?.path as string),
         });
       } else if (!isComponent) {
         items.push({
@@ -346,8 +348,8 @@ export function showContextMenu(e, path, opts = {}) {
       action: async () => {
         const nodes = await readFromClipboard();
         if (!nodes || nodes.length === 0) return;
-        const pp = /** @type {JxPath} */ (parentElementPath(path));
-        const idx = /** @type {number} */ (childIndex(path));
+        const pp = parentElementPath(path) as JxPath;
+        const idx = childIndex(path) as number;
         transactDoc(activeTab.value, (t) => {
           for (let i = 0; i < nodes.length; i++) {
             mutateInsertNode(t, pp, idx + 1 + i, nodes[i]);
@@ -368,7 +370,7 @@ export function showContextMenu(e, path, opts = {}) {
       ${ref((el) => {
         if (!el) return;
         requestAnimationFrame(() => {
-          const popover = /** @type {HTMLElement} */ (el);
+          const popover = el as HTMLElement;
           const menuRect = popover.getBoundingClientRect();
           if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
           if (y + menuRect.height > window.innerHeight)

package/src/editor/{convert-targets.js → convert-targets.ts}

@@ -1,8 +1,12 @@
 import elementsMeta from "../../data/elements-meta.json";
 
-/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
+export interface SlashCommand {
+  label: string;
+  tag: string;
+  description: string;
+}
 
-const TAG_LABELS = /** @type {Record<string, string>} */ ({
+const TAG_LABELS = {
   p: "Paragraph",
   h1: "Heading 1",
   h2: "Heading 2",
@@ -22,9 +26,9 @@ const TAG_LABELS = /** @type {Record<string, string>} */ ({
   search: "Search",
   ul: "Bulleted List",
   ol: "Numbered List",
-});
+} as Record<string, string>;
 
-const groups = /** @type {Record<string, string[]>} */ (elementsMeta.$convertGroups || {});
+const groups = (elementsMeta.$convertGroups || {}) as Record<string, string[]>;
 
 /**
  * Get the list of tags the current element can be converted to.
@@ -33,19 +37,18 @@ const groups = /** @type {Record<string, string[]>} */ (elementsMeta.$convertGro
  * @param {boolean} isEmpty
  * @returns {SlashCommand[]}
  */
-export function getConvertTargets(currentTag, isEmpty) {
-  const def = /** @type {Record<string, unknown> | undefined} */ (
-    /** @type {Record<string, Record<string, unknown>>} */ (elementsMeta.$defs)?.[currentTag]
-  );
+export function getConvertTargets(currentTag: string, isEmpty: boolean) {
+  const def = (elementsMeta.$defs as Record<string, Record<string, unknown>>)?.[currentTag] as
+    | Record<string, unknown>
+    | undefined;
   if (!def?.$convertTo) return [];
 
   const groupNames =
     isEmpty && def.$convertToWhenEmpty
-      ? /** @type {string[]} */ (def.$convertToWhenEmpty)
-      : [/** @type {string} */ (def.$convertTo)];
+      ? (def.$convertToWhenEmpty as string[])
+      : [def.$convertTo as string];
 
-  /** @type {Set<string>} */
-  const tags = new Set();
+  const tags: Set<string> = new Set();
   for (const name of groupNames) {
     for (const tag of groups[name] || []) {
       if (tag !== currentTag) tags.add(tag);

package/src/editor/{convert-to-component.js → convert-to-component.ts}

@@ -1,17 +1,16 @@
+/// <reference lib="dom" />
 // ─── Convert to Component ─────────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transact } from "../tabs/transact.js";
-import {
-  computeRelativePath,
-  loadComponentRegistry,
-  componentRegistry,
-} from "../files/components.js";
-import { getPlatform } from "../platform.js";
-import { statusMessage } from "../panels/statusbar.js";
-import { showDialog } from "../ui/layers.js";
+import { getNodeAtPath, parentElementPath, childIndex } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transact } from "../tabs/transact";
+import { computeRelativePath, loadComponentRegistry, componentRegistry } from "../files/components";
+import { getPlatform } from "../platform";
+import { statusMessage } from "../panels/statusbar";
+import { showDialog } from "../ui/layers";
+
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 const VALID_NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
 
@@ -40,7 +39,7 @@ export async function convertToComponent() {
   transact(tab, (doc) => {
     // Navigate to parent's children array and replace the node
     const pp = parentElementPath(selectionPath) ?? [];
-    const idx = /** @type {number} */ (childIndex(selectionPath));
+    const idx = childIndex(selectionPath) as number;
     let parent = doc;
     for (const seg of pp) parent = parent[seg];
     if (!parent.children) parent.children = [];
@@ -63,8 +62,8 @@ export async function convertToComponent() {
     await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
     await loadComponentRegistry();
     statusMessage(`Converted to <${name}>`);
-  } catch (/** @type {unknown} */ err) {
-    statusMessage(`Error saving component: ${/** @type {Error} */ (err).message}`);
+  } catch (err) {
+    statusMessage(`Error saving component: ${(err as Error).message}`);
   }
 }
 
@@ -74,7 +73,7 @@ export async function convertToComponent() {
  * @param {JxMutableNode} node
  * @returns {string}
  */
-function deriveDefaultName(node) {
+function deriveDefaultName(node: JxMutableNode) {
   if (node.$id && node.$id.includes("-")) return node.$id.toLowerCase();
   const tag = (node.tagName ?? "div").toLowerCase();
   return tag.includes("-") ? tag : "jx-" + tag;
@@ -86,7 +85,7 @@ function deriveDefaultName(node) {
  * @param {JxMutableNode} node
  * @returns {JxMutableNode}
  */
-function extractComponentDef(node) {
+function extractComponentDef(node: JxMutableNode) {
   const clone = structuredClone(node);
   delete clone.$id;
   delete clone.$layout;
@@ -100,7 +99,7 @@ function extractComponentDef(node) {
  * @param {string} val
  * @returns {{ valid: boolean; error: string }}
  */
-function validateName(val) {
+function validateName(val: string) {
   val = val.trim().toLowerCase();
   if (!val.includes("-")) {
     return { valid: false, error: "Name must contain a hyphen (e.g. my-component)" };
@@ -108,7 +107,7 @@ function validateName(val) {
   if (!VALID_NAME.test(val)) {
     return { valid: false, error: "Lowercase letters, digits, and hyphens only" };
   }
-  const exists = componentRegistry.some((/** @type {JxMutableNode} */ c) => c.tagName === val);
+  const exists = componentRegistry.some((c: JxMutableNode) => c.tagName === val);
   if (exists) {
     return { valid: false, error: `Component <${val}> already exists` };
   }
@@ -121,11 +120,11 @@ function validateName(val) {
  * @param {string} defaultName
  * @returns {Promise<string | null>}
  */
-function promptComponentName(defaultName) {
+function promptComponentName(defaultName: string) {
   let value = defaultName;
   let error = "";
 
-  return showDialog((done) => {
+  return showDialog<string | null>((done) => {
     function confirm() {
       const result = validateName(value);
       if (!result.valid) {
@@ -136,21 +135,21 @@ function promptComponentName(defaultName) {
       done(value.trim().toLowerCase());
     }
 
-    function onInput(/** @type {Event} */ e) {
-      value = /** @type {HTMLInputElement} */ (e.target).value || "";
+    function onInput(e: Event) {
+      value = (e.target as HTMLInputElement).value || "";
       const result = validateName(value);
       error = result.valid ? "" : result.error;
       rerender();
     }
 
-    function onKeydown(/** @type {KeyboardEvent} */ e) {
+    function onKeydown(e: KeyboardEvent) {
       if (e.key === "Enter") confirm();
     }
 
     function rerender() {
       const layer = document.getElementById("layer-dialog");
       const slot = layer?.lastElementChild;
-      if (slot) litRender(buildTpl(), /** @type {HTMLElement} */ (slot));
+      if (slot) litRender(buildTpl(), slot as HTMLElement);
     }
 
     function buildTpl() {
@@ -176,8 +175,8 @@ function promptComponentName(defaultName) {
             ${ref((el) => {
               if (el)
                 requestAnimationFrame(() => {
-                  /** @type {HTMLElement} */ (el).focus();
-                  const input = /** @type {HTMLElement} */ (el).shadowRoot?.querySelector("input");
+                  (el as HTMLElement).focus();
+                  const input = (el as HTMLElement).shadowRoot?.querySelector("input");
                   if (input) input.select();
                 });
             })}