@jxsuite/studio 0.23.1 → 0.24.0

package/src/new-project/{new-project-modal.js → new-project-modal.ts}

@@ -1,14 +1,15 @@
+/// <reference lib="dom" />
 /**
  * New Project modal — guides the user through creating a new Jx project. Fields mirror the CLI
  * scaffolder: name, description, url, adapter.
  */
 
 import { html } from "lit-html";
-import { openModal } from "../ui/layers.js";
-import { getPlatform } from "../platform.js";
+import { openModal } from "../ui/layers";
+import { getPlatform } from "../platform";
+import type { ProjectConfig } from "@jxsuite/schema/types";
 
-/** @type {ReturnType<typeof openModal> | null} */
-let _handle = null;
+let _handle: ReturnType<typeof openModal> | null = null;
 
 /**
  * @type {{
@@ -21,14 +22,12 @@ let _handle = null;
  */
 let _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
 
-/** @type {string} */
-let _error = "";
+let _error: string = "";
 
-/** @type {boolean} */
-let _creating = false;
+let _creating: boolean = false;
 
 /** @type {((result: { root: string; config: object } | null) => void) | null} */
-let _resolve = null;
+let _resolve: ((result: { root: string; config: ProjectConfig } | null) => void) | null = null;
 
 /**
  * Open the New Project modal. Returns a promise that resolves with the created project info (or
@@ -36,7 +35,7 @@ let _resolve = null;
  *
  * @returns {Promise<{ root: string; config: object } | null>}
  */
-export function openNewProjectModal() {
+export function openNewProjectModal(): Promise<{ root: string; config: ProjectConfig } | null> {
   if (_handle) return Promise.resolve(null);
   _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
   _error = "";
@@ -60,9 +59,8 @@ export function closeNewProjectModal() {
 
 function renderModal() {
   const onInput =
-    (/** @type {"name" | "description" | "url" | "adapter" | "directory"} */ field) =>
-    (/** @type {Event} */ e) => {
-      _form[field] = /** @type {HTMLInputElement} */ (e.target).value;
+    (field: "name" | "description" | "url" | "adapter" | "directory") => (e: Event) => {
+      _form[field] = (e.target as HTMLInputElement).value;
       if (field === "name" && !_form.directory) {
         // Auto-derive directory slug from name while user hasn't manually typed one
         _dirDerived = true;
@@ -77,8 +75,8 @@ function renderModal() {
       renderModal();
     };
 
-  const onAdapterChange = (/** @type {Event} */ e) => {
-    _form.adapter = /** @type {HTMLInputElement} */ (e.target).value;
+  const onAdapterChange = (e: Event) => {
+    _form.adapter = (e.target as HTMLInputElement).value;
     renderModal();
   };
 
@@ -111,9 +109,9 @@ function renderModal() {
         _resolve(result);
         _resolve = null;
       }
-    } catch (/** @type {unknown} */ e) {
+    } catch (e) {
       _creating = false;
-      _error = /** @type {Error} */ (e).message;
+      _error = (e as Error).message;
       renderModal();
     }
   };
@@ -122,7 +120,7 @@ function renderModal() {
     <sp-underlay open @close=${closeNewProjectModal}></sp-underlay>
     <div
       class="new-project-modal"
-      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+      @keydown=${(e: KeyboardEvent) => {
         if (e.key === "Escape") closeNewProjectModal();
       }}
     >

package/src/panels/{activity-bar.js → activity-bar.ts}

@@ -1,15 +1,15 @@
+/// <reference lib="dom" />
 /** Activity bar — tab icons for switching left panel views. */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { activityBar, renderOnly } from "../store.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view, applyPanelCollapse } from "../view.js";
-import { openSettingsModal } from "../settings/settings-modal.js";
-import { refreshGitStatus } from "./git-panel.js";
+import { activityBar, renderOnly } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import { view, applyPanelCollapse } from "../view";
+import { openSettingsModal } from "../settings/settings-modal";
+import { refreshGitStatus } from "./git-panel";
 
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 export function mount() {
   _scope = effectScope();
@@ -32,7 +32,7 @@ export function unmount() {
   _scope = null;
 }
 
-const gitBranchIcon = (/** @type {string} */ s) => html`
+const gitBranchIcon = (s: string) => html`
   <svg
     slot="icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -56,35 +56,27 @@ const gitBranchIcon = (/** @type {string} */ s) => html`
  * @param {string} tag
  * @param {string} [size]
  */
-export function tabIcon(tag, size) {
-  /** @type {Record<string, (s: string) => import("lit-html").TemplateResult>} */
-  const m = {
-    "sp-icon-folder": (/** @type {string} */ s) =>
-      html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
-    "sp-icon-layers": (/** @type {string} */ s) =>
-      html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
-    "sp-icon-view-grid": (/** @type {string} */ s) =>
+export function tabIcon(tag: string, size?: string) {
+  const m: Record<string, (s: string) => import("lit-html").TemplateResult> = {
+    "sp-icon-folder": (s: string) => html`<sp-icon-folder slot="icon" size=${s}></sp-icon-folder>`,
+    "sp-icon-layers": (s: string) => html`<sp-icon-layers slot="icon" size=${s}></sp-icon-layers>`,
+    "sp-icon-view-grid": (s: string) =>
       html`<sp-icon-view-grid slot="icon" size=${s}></sp-icon-view-grid>`,
-    "sp-icon-brackets": (/** @type {string} */ s) =>
+    "sp-icon-brackets": (s: string) =>
       html`<sp-icon-brackets slot="icon" size=${s}></sp-icon-brackets>`,
-    "sp-icon-data": (/** @type {string} */ s) =>
-      html`<sp-icon-data slot="icon" size=${s}></sp-icon-data>`,
-    "sp-icon-properties": (/** @type {string} */ s) =>
+    "sp-icon-data": (s: string) => html`<sp-icon-data slot="icon" size=${s}></sp-icon-data>`,
+    "sp-icon-properties": (s: string) =>
       html`<sp-icon-properties slot="icon" size=${s}></sp-icon-properties>`,
-    "sp-icon-event": (/** @type {string} */ s) =>
-      html`<sp-icon-event slot="icon" size=${s}></sp-icon-event>`,
-    "sp-icon-brush": (/** @type {string} */ s) =>
-      html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
-    "sp-icon-file-single-web-page": (/** @type {string} */ s) =>
+    "sp-icon-event": (s: string) => html`<sp-icon-event slot="icon" size=${s}></sp-icon-event>`,
+    "sp-icon-brush": (s: string) => html`<sp-icon-brush slot="icon" size=${s}></sp-icon-brush>`,
+    "sp-icon-file-single-web-page": (s: string) =>
       html`<sp-icon-file-single-web-page slot="icon" size=${s}></sp-icon-file-single-web-page>`,
-    "sp-icon-view-all-tags": (/** @type {string} */ s) =>
+    "sp-icon-view-all-tags": (s: string) =>
       html`<sp-icon-view-all-tags slot="icon" size=${s}></sp-icon-view-all-tags>`,
-    "sp-icon-artboard": (/** @type {string} */ s) =>
+    "sp-icon-artboard": (s: string) =>
       html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
-    "sp-icon-chat": (/** @type {string} */ s) =>
-      html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
-    "sp-icon-box": (/** @type {string} */ s) =>
-      html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
+    "sp-icon-chat": (s: string) => html`<sp-icon-chat slot="icon" size=${s}></sp-icon-chat>`,
+    "sp-icon-box": (s: string) => html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
     "sp-icon-git-branch": gitBranchIcon,
   };
   const fn = m[tag];
@@ -110,8 +102,8 @@ export function renderActivityBar() {
       selected=${view.leftPanelCollapsed ? "" : leftTab}
       direction="vertical"
       quiet
-      @change=${(/** @type {Event} */ e) => {
-        const clicked = /** @type {HTMLElement & { selected: string }} */ (e.target).selected;
+      @change=${(e: Event) => {
+        const clicked = (e.target as HTMLElement & { selected: string }).selected;
         if (clicked === view.leftTab && !view.leftPanelCollapsed) {
           view.leftPanelCollapsed = true;
           applyPanelCollapse();

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Ai-panel.js — Claude AI Assistant tab for the right panel
  *
@@ -7,8 +8,8 @@
 import { html, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import quikchat from "quikchat/md";
-import { getPlatform } from "../platform.js";
-import { reloadFileInTab } from "../files/files.js";
+import { getPlatform } from "../platform";
+import { reloadFileInTab } from "../files/files";
 
 // ─── State (module-level, persists across tab switches) ─────────────────────
 
@@ -19,27 +20,25 @@ import { reloadFileInTab } from "../files/files.js";
  *   toolUse?: { tool: string; input?: Record<string, unknown> };
  * }[]}
  */
-let messages = [];
+let messages: {
+  role: string;
+  content: string;
+  toolUse?: { tool: string; input?: Record<string, unknown> };
+}[] = [];
 let streaming = false;
-let sessionId = /** @type {string | null} */ (null);
-let authStatus = /** @type {"authenticated" | "unauthenticated" | "checking" | "unknown"} */ (
-  "unknown"
-);
+let sessionId = null as string | null;
+let authStatus = "unknown" as "authenticated" | "unauthenticated" | "checking" | "unknown";
 let authError = "";
 let currentAssistantText = "";
-let eventSource = /** @type {EventSource | null} */ (null);
+let eventSource = null as EventSource | null;
 let mounted = false;
 
-/** @type {any} */
-let chatInstance = null;
-/** @type {Element | null} */
-let chatContainerEl = null;
-/** @type {HTMLElement | null} */
-let _quikChatEl = null;
-let currentStreamMsgId = /** @type {number | null} */ (null);
+let chatInstance: any = null;
+let chatContainerEl: Element | null = null;
+let _quikChatEl: HTMLElement | null = null;
+let currentStreamMsgId = null as number | null;
 let streamStarted = false;
-/** @type {Set<string>} */
-let pendingFileReloads = new Set();
+let pendingFileReloads: Set<string> = new Set();
 
 // ─── Lifecycle ──────────────────────────────────────────────────────────────
 
@@ -49,15 +48,16 @@ export function mountAiPanel() {
   checkAuth();
 }
 
+const _g = globalThis as unknown as { __jxRightPanelRender?: { render: () => void } };
+
 function rerenderPanel() {
-  const { render } = /** @type {any} */ (/** @type {any} */ (globalThis).__jxRightPanelRender) ||
-  {};
+  const { render } = _g.__jxRightPanelRender || {};
   if (render) render();
   requestAnimationFrame(() => mountQuikChat());
 }
 
-export function registerRightPanelRender(/** @type {Function} */ fn) {
-  /** @type {any} */ (globalThis).__jxRightPanelRender = { render: fn };
+export function registerRightPanelRender(fn: () => void) {
+  _g.__jxRightPanelRender = { render: fn };
 }
 
 // ─── QuikChat Mount ────────────────────────────────────────────────────────
@@ -69,7 +69,7 @@ export function mountQuikChat() {
 
   chatInstance = new quikchat(
     container,
-    (/** @type {any} */ _chat, /** @type {string} */ msg) => {
+    (_chat: any, msg: string) => {
       handleUserSend(msg);
     },
     {
@@ -130,7 +130,7 @@ async function checkAuth() {
 // ─── Messaging ──────────────────────────────────────────────────────────────
 
 /** @param {string} text */
-async function handleUserSend(text) {
+async function handleUserSend(text: string) {
   if (!text.trim() || streaming) return;
 
   messages.push({ role: "user", content: text });
@@ -151,7 +151,7 @@ async function handleUserSend(text) {
     if (!sessionId) {
       const result = await plat.aiCreateSession({ message: text });
       sessionId = result.id;
-      await connectStream(/** @type {string} */ (sessionId));
+      await connectStream(sessionId!);
     } else {
       await plat.aiSendMessage(sessionId, text);
     }
@@ -195,7 +195,7 @@ function newChat() {
 
 // ─── SSE Stream ─────────────────────────────────────────────────────────────
 
-async function connectStream(/** @type {string} */ id) {
+async function connectStream(id: string) {
   disconnectStream();
   const plat = getPlatform();
   const url = await Promise.resolve(plat.aiStreamUrl(id));
@@ -245,7 +245,7 @@ async function connectStream(/** @type {string} */ id) {
 
   eventSource.addEventListener("error", (e) => {
     try {
-      const data = JSON.parse(/** @type {MessageEvent} */ (e).data);
+      const data = JSON.parse((e as MessageEvent).data);
       if (data.error) {
         if (chatInstance && currentStreamMsgId != null) {
           chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
@@ -288,7 +288,7 @@ function disconnectStream() {
 }
 
 /** @param {any} data */
-function handleAssistantMessage(data) {
+function handleAssistantMessage(data: any) {
   const content = data.message?.content || data.content;
   if (!content) return;
 
@@ -332,7 +332,7 @@ function handleAssistantMessage(data) {
  * @param {string} tool
  * @param {Record<string, unknown>} [input]
  */
-function formatToolLabel(tool, input) {
+function formatToolLabel(tool: string, input?: Record<string, unknown>) {
   switch (tool) {
     case "Edit":
     case "Write":
@@ -351,7 +351,7 @@ function formatToolLabel(tool, input) {
 }
 
 /** @param {string} s @param {number} max */
-function truncate(s, max) {
+function truncate(s: string, max: number) {
   return s.length > max ? s.slice(0, max) + "…" : s;
 }
 
@@ -398,7 +398,7 @@ export function renderAiPanelTemplate() {
       <div
         id="ai-quikchat"
         ${ref((el) => {
-          _quikChatEl = /** @type {HTMLElement | null} */ (el || null);
+          _quikChatEl = (el as HTMLElement | null) || null;
         })}
       ></div>
     </div>

package/src/panels/{block-action-bar.js → block-action-bar.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Block action bar — extracted from studio.js (Phase 4h). Floating toolbar above selected elements
  * with parent selector, move arrows, drag handle, component actions, and inline formatting.
@@ -8,26 +9,21 @@ import { styleMap } from "lit-html/directives/style-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateMoveNode, mutateUpdateProperty } from "../tabs/transact.js";
-import { view } from "../view.js";
-import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit.js";
-import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
-import { componentRegistry } from "../files/components.js";
-import { convertToComponent } from "../editor/convert-to-component.js";
-import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
-import { getLayerSlot } from "../ui/layers.js";
-import { showSlashMenu } from "../editor/slash-menu.js";
-import { getConvertTargets } from "../editor/convert-targets.js";
-
-/**
- * @typedef {import("../state.js").StudioState} StudioState
- *
- * @typedef {import("../state.js").JxPath} JxPath
- *
- * @typedef {import("../editor/inline-edit.js").InlineAction} InlineAction
- */
+import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateMoveNode, mutateUpdateProperty } from "../tabs/transact";
+import { view } from "../view";
+import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit";
+import type { InlineAction } from "../editor/inline-edit";
+import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format";
+import { componentRegistry } from "../files/components";
+import { convertToComponent } from "../editor/convert-to-component";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
+import { getLayerSlot } from "../ui/layers";
+import { showSlashMenu } from "../editor/slash-menu";
+import { getConvertTargets } from "../editor/convert-targets";
+
+import type { JxPath } from "../state";
 
 /**
  * @type {{
@@ -35,7 +31,8 @@ import { getConvertTargets } from "../editor/convert-targets.js";
  *   navigateToComponent: (path: string) => void;
  * } | null}
  */
-let _ctx = null;
+let _ctx: { getCanvasMode: () => string; navigateToComponent: (path: string) => void } | null =
+  null;
 
 /**
  * Initialize the block action bar module.
@@ -45,12 +42,15 @@ let _ctx = null;
  *   navigateToComponent: (path: string) => void;
  * }} ctx
  */
-export function initBlockActionBar(ctx) {
+export function initBlockActionBar(ctx: {
+  getCanvasMode: () => string;
+  navigateToComponent: (path: string) => void;
+}) {
   _ctx = ctx;
 }
 
 /** Pre-built icon templates for inline format buttons (avoids unsafeStatic) */
-const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
+const formatIconMap = {
   "sp-icon-text-bold": html`<sp-icon-text-bold slot="icon"></sp-icon-text-bold>`,
   "sp-icon-text-italic": html`<sp-icon-text-italic slot="icon"></sp-icon-text-italic>`,
   "sp-icon-text-underline": html`<sp-icon-text-underline slot="icon"></sp-icon-text-underline>`,
@@ -63,17 +63,17 @@ const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResul
   "sp-icon-text-subscript": html`<sp-icon-text-subscript slot="icon"></sp-icon-text-subscript>`,
   "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
   "sp-icon-link": html`<sp-icon-link slot="icon"></sp-icon-link>`,
-});
+} as Record<string, import("lit-html").TemplateResult>;
 
 /**
  * Prevent the bar from stealing focus from contenteditable
  *
  * @param {MouseEvent} e
  */
-function onBarMousedown(e) {
-  if (/** @type {HTMLElement} */ (e.target).closest("sp-textfield")) return;
-  if (/** @type {HTMLElement} */ (e.target).closest(".bar-drag-handle")) return;
-  if (/** @type {HTMLElement} */ (e.target).closest(".bar-tag--interactive")) return;
+function onBarMousedown(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest("sp-textfield")) return;
+  if ((e.target as HTMLElement).closest(".bar-drag-handle")) return;
+  if ((e.target as HTMLElement).closest(".bar-tag--interactive")) return;
   e.preventDefault();
 }
 
@@ -82,9 +82,13 @@ function onBarMousedown(e) {
  * @param {import("../editor/convert-targets.js").SlashCommand[]} targets
  * @param {JxPath} selection
  */
-function onTagBadgeClick(e, targets, selection) {
+function onTagBadgeClick(
+  e: MouseEvent,
+  targets: import("../editor/convert-targets.js").SlashCommand[],
+  selection: JxPath,
+) {
   e.stopPropagation();
-  const anchorEl = /** @type {HTMLElement} */ (e.currentTarget);
+  const anchorEl = e.currentTarget as HTMLElement;
   showSlashMenu(anchorEl, "", {
     showFilter: targets.length > 6,
     commands: targets,
@@ -106,24 +110,18 @@ function captureSelectionRange() {
  * @param {MouseEvent} e
  * @param {InlineAction} action
  */
-function onFormatClick(e, action) {
+function onFormatClick(e: MouseEvent, action: InlineAction) {
   e.stopPropagation();
   if (action.command === "link") {
-    showLinkPopover(
-      /** @type {HTMLElement} */ (
-        /** @type {HTMLElement} */ (e.target).closest("sp-action-button")
-      ),
-    );
+    showLinkPopover((e.target as HTMLElement).closest("sp-action-button") as HTMLElement);
   } else if (view.savedRange) {
     const sel = window.getSelection();
     const anchor = view.savedRange.startContainer;
     const editableRoot = (
-      anchor?.nodeType === Node.ELEMENT_NODE
-        ? /** @type {Element} */ (anchor)
-        : anchor?.parentElement
+      anchor?.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor?.parentElement
     )?.closest("[contenteditable]");
     if (editableRoot) {
-      /** @type {HTMLElement} */ (editableRoot).focus();
+      (editableRoot as HTMLElement).focus();
       sel?.removeAllRanges();
       sel?.addRange(view.savedRange);
       applyInlineFormat(action);
@@ -142,9 +140,9 @@ function renderParentSelector() {
       size="xs"
       quiet
       title="Select parent: ${nodeLabel(parentNode)}"
-      @click=${(/** @type {MouseEvent} */ e) => {
+      @click=${(e: MouseEvent) => {
         e.stopPropagation();
-        activeTab.value.session.selection = pPath;
+        activeTab.value!.session.selection = pPath;
       }}
     >
       <sp-icon-back slot="icon"></sp-icon-back>
@@ -156,9 +154,9 @@ function renderMoveArrows() {
   const tab = activeTab.value;
   if (!tab?.session.selection) return nothing;
   const sel = tab.session.selection;
-  const idx = /** @type {number} */ (childIndex(sel));
+  const idx = childIndex(sel) as number;
   const pPath = parentElementPath(sel);
-  const parentNode = getNodeAtPath(tab.doc.document, /** @type {JxPath} */ (pPath));
+  const parentNode = pPath ? getNodeAtPath(tab.doc.document, pPath) : null;
   const siblings = parentNode?.children;
   return html`
     <sp-action-button
@@ -166,7 +164,7 @@ function renderMoveArrows() {
       quiet
       title="Move up"
       ?disabled=${idx <= 0}
-      @click=${(/** @type {MouseEvent} */ e) => {
+      @click=${(e: MouseEvent) => {
         e.stopPropagation();
         moveSelectionUp();
       }}
@@ -178,7 +176,7 @@ function renderMoveArrows() {
       quiet
       title="Move down"
       ?disabled=${!siblings || idx >= siblings.length - 1}
-      @click=${(/** @type {MouseEvent} */ e) => {
+      @click=${(e: MouseEvent) => {
         e.stopPropagation();
         moveSelectionDown();
       }}
@@ -193,9 +191,8 @@ function renderMoveArrows() {
  *
  * @param {InlineAction} action
  */
-function applyInlineFormat(action) {
-  /** @type {Record<string, string>} */
-  const cmdToTag = {
+function applyInlineFormat(action: InlineAction) {
+  const cmdToTag: Record<string, string> = {
     bold: "strong",
     italic: "em",
     underline: "u",
@@ -225,22 +222,17 @@ export function dismissBlockActionBar() {
 }
 
 /** @param {HTMLElement} anchorBtn */
-function showLinkPopover(anchorBtn) {
+function showLinkPopover(anchorBtn: HTMLElement) {
   const host = getLayerSlot("popover", "link-popover");
   litRender(nothing, host);
 
   const sel = window.getSelection();
-  /** @type {HTMLAnchorElement | null} */
-  let existingLink = null;
+  let existingLink: HTMLAnchorElement | null = null;
   if (sel?.rangeCount) {
-    /** @type {Node | null} */
-    let node = sel.anchorNode;
+    let node: Node | null = sel.anchorNode;
     while (node && node !== document.body) {
-      if (
-        node.nodeType === Node.ELEMENT_NODE &&
-        /** @type {Element} */ (node).tagName.toLowerCase() === "a"
-      ) {
-        existingLink = /** @type {HTMLAnchorElement} */ (node);
+      if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "a") {
+        existingLink = node as HTMLAnchorElement;
         break;
       }
       node = node.parentNode;
@@ -249,8 +241,7 @@ function showLinkPopover(anchorBtn) {
 
   const rect = anchorBtn.getBoundingClientRect();
 
-  /** @type {HTMLInputElement | null} */
-  let _linkField = null;
+  let _linkField: HTMLInputElement | null = null;
 
   const onApply = () => {
     const url = _linkField?.value || "";
@@ -272,7 +263,7 @@ function showLinkPopover(anchorBtn) {
     renderBlockActionBar();
   };
 
-  const onKeydown = (/** @type {KeyboardEvent} */ e) => {
+  const onKeydown = (e: KeyboardEvent) => {
     if (e.key === "Enter") onApply();
     else if (e.key === "Escape") {
       litRender(nothing, host);
@@ -298,8 +289,8 @@ function showLinkPopover(anchorBtn) {
           value=${existingLink?.getAttribute("href") || ""}
           @keydown=${onKeydown}
           ${ref((el) => {
-            _linkField = /** @type {HTMLInputElement | null} */ (el || null);
-            if (el) requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+            _linkField = (el as HTMLInputElement | null) || null;
+            if (el) requestAnimationFrame(() => (el as HTMLElement).focus());
           })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
@@ -319,9 +310,9 @@ function moveSelectionUp() {
   const tab = activeTab.value;
   if (!tab?.session.selection || tab.session.selection.length < 2) return;
   const sel = tab.session.selection;
-  const idx = /** @type {number} */ (childIndex(sel));
+  const idx = childIndex(sel) as number;
   if (idx <= 0) return;
-  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  const pPath = parentElementPath(sel) as JxPath;
   transactDoc(tab, (t) => mutateMoveNode(t, sel, pPath, idx - 1));
   tab.session.selection = [...pPath, "children", idx - 1];
 }
@@ -331,8 +322,8 @@ function moveSelectionDown() {
   const tab = activeTab.value;
   if (!tab?.session.selection || tab.session.selection.length < 2) return;
   const sel = tab.session.selection;
-  const idx = /** @type {number} */ (childIndex(sel));
-  const pPath = /** @type {JxPath} */ (parentElementPath(sel));
+  const idx = childIndex(sel) as number;
+  const pPath = parentElementPath(sel) as JxPath;
   const parentNode = getNodeAtPath(tab.doc.document, pPath);
   const siblings = parentNode?.children;
   if (!siblings || idx >= siblings.length - 1) return;
@@ -412,7 +403,7 @@ export function renderBlockActionBar() {
         <span
           class="bar-tag${badgeInteractive ? " bar-tag--interactive" : ""}"
           @click=${badgeInteractive
-            ? (/** @type {MouseEvent} */ e) => onTagBadgeClick(e, convertTargets, selection)
+            ? (e: MouseEvent) => onTagBadgeClick(e, convertTargets, selection)
             : nothing}
           >${node.$id || (node.tagName ?? "div")}</span
         >
@@ -428,7 +419,7 @@ export function renderBlockActionBar() {
                   view.selDragCleanup = null;
                 }
                 view.selDragCleanup = draggable({
-                  element: /** @type {HTMLElement} */ (el),
+                  element: el as HTMLElement,
                   getInitialData: () => ({
                     type: "tree-node",
                     path: activeTab.value?.session.selection,
@@ -455,7 +446,7 @@ export function renderBlockActionBar() {
                   size="xs"
                   quiet
                   title="Edit Component"
-                  @click=${() => _ctx?.navigateToComponent(/** @type {string} */ (comp?.path))}
+                  @click=${() => _ctx?.navigateToComponent(comp?.path as string)}
                   ><sp-icon-edit slot="icon" size="xs"></sp-icon-edit
                 ></sp-action-button>`;
               }
@@ -485,7 +476,7 @@ export function renderBlockActionBar() {
                       value=${action.tag}
                       title="${action.label}${action.shortcut ? ` (${action.shortcut})` : ""}"
                       @mousedown=${captureSelectionRange}
-                      @click=${(/** @type {MouseEvent} */ e) => onFormatClick(e, action)}
+                      @click=${(e: MouseEvent) => onFormatClick(e, action)}
                     >
                       ${action.icon ? (formatIconMap[action.icon] ?? nothing) : nothing}
                     </sp-action-button>
@@ -501,7 +492,7 @@ export function renderBlockActionBar() {
 
   // Post-render side effects
   requestAnimationFrame(() => {
-    const bar = /** @type {HTMLElement | null} */ (view.blockActionBarEl?.firstElementChild);
+    const bar = view.blockActionBarEl?.firstElementChild as HTMLElement | null;
     if (!bar) return;
     // Clamp to window
     const barRect = bar.getBoundingClientRect();