@jxsuite/studio 0.23.2 → 0.24.0

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

@@ -1,3 +1,5 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /**
  * Stylebook panel — renders the Stylebook mode canvas (element catalog with per-file style
  * defaults). Extracted from studio.js Phase 4e.
@@ -16,64 +18,65 @@ import {
   canvasPanels,
   elToPath,
   projectState,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
+} from "../store";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
 import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
-import { componentRegistry } from "../files/components.js";
-import { getEffectiveStyle, getEffectiveMedia } from "../site-context.js";
-import { parseMediaEntries, activeBreakpointsForWidth } from "../utils/canvas-media.js";
-import { mediaDisplayName } from "./shared.js";
-import { panToCanvasEl } from "../canvas/canvas-utils.js";
+import { componentRegistry } from "../files/components";
+import { getEffectiveStyle, getEffectiveMedia } from "../site-context";
+import { parseMediaEntries, activeBreakpointsForWidth } from "../utils/canvas-media";
+import { mediaDisplayName } from "./shared";
+import { panToCanvasEl } from "../canvas/canvas-utils";
 import stylebookMeta from "../../data/stylebook-meta.json";
 
-export { stylebookMeta };
+export interface StylebookEntry {
+  tag: string;
+  text?: string;
+  attributes?: Record<string, string>;
+  style?: string;
+  children?: StylebookEntry[];
+}
 
-/**
- * @typedef {{
- *   tag: string;
- *   text?: string;
- *   attributes?: Record<string, string>;
- *   style?: string;
- *   children?: StylebookEntry[];
- * }} StylebookEntry
- */
+interface StylebookPanel {
+  mediaName: string | null;
+  element: HTMLElement | null;
+  canvas: HTMLElement;
+  overlay: HTMLElement;
+  overlayClk: HTMLElement;
+  viewport: HTMLElement | null;
+  scrollContainer: HTMLElement | null;
+  dropLine: HTMLElement | null;
+  _width: number | null;
+  _lastHoverTag?: string | null;
+}
 
-/**
- * @typedef {{
- *   mediaName: string | null;
- *   element: HTMLElement | null;
- *   canvas: HTMLElement;
- *   overlay: HTMLElement;
- *   overlayClk: HTMLElement;
- *   viewport: HTMLElement | null;
- *   scrollContainer: HTMLElement | null;
- *   dropLine: HTMLElement | null;
- *   _width: number | null;
- *   _lastHoverTag?: string | null;
- * }} StylebookPanel
- */
+interface StylebookCtx {
+  canvasPanelTemplate: (
+    mediaName: string | null,
+    label: string | null,
+    fullWidth: boolean,
+    width?: number | null,
+  ) => { tpl: import("lit-html").TemplateResult; panel: any };
+  applyTransform: () => void;
+  observeCenterUntilStable: () => void;
+  renderZoomIndicator: () => void;
+  updateActivePanelHeaders: () => void;
+  overlayBoxDescriptor: (
+    el: Element,
+    type: string,
+    panel: any,
+  ) => { cls: string; top: string; left: string; width: string; height: string };
+  effectiveZoom: () => number;
+}
 
-/**
- * @typedef {{
- *   canvasPanelTemplate: Function;
- *   applyTransform: Function;
- *   observeCenterUntilStable: Function;
- *   renderZoomIndicator: Function;
- *   updateActivePanelHeaders: Function;
- *   overlayBoxDescriptor: Function;
- *   effectiveZoom: Function;
- * }} StylebookCtx
- */
+interface ComponentEntry {
+  source?: string;
+  tagName: string;
+  path?: string;
+  props?: Array<{ name: string; default?: string }>;
+}
 
-/**
- * @typedef {{
- *   source?: string;
- *   tagName: string;
- *   path?: string;
- *   props?: Array<{ name: string; default?: string }>;
- * }} ComponentEntry
- */
+export { stylebookMeta };
 
 /**
  * Resolve a nested tag path in a style object. e.g., "table th" → style["table"]["th"]
@@ -82,23 +85,22 @@ export { stylebookMeta };
  * @param {string} tagPath
  * @returns {Record<string, unknown> | null}
  */
-function _resolveNestedStyle(style, tagPath) {
+function _resolveNestedStyle(style: Record<string, unknown>, tagPath: string) {
   const parts = tagPath.split(" ");
   let obj = style;
   for (const part of parts) {
     if (!obj || typeof obj !== "object") return null;
-    obj = /** @type {Record<string, unknown>} */ (obj[part]);
+    obj = obj[part] as Record<string, unknown>;
   }
-  return obj && typeof obj === "object" ? /** @type {Record<string, unknown>} */ (obj) : null;
+  return obj && typeof obj === "object" ? (obj as Record<string, unknown>) : null;
 }
 
-/** @type {StylebookCtx | null} */
-let _ctx = null;
+let _ctx: StylebookCtx | null = null;
 
 /** Lookup: tag → entry from stylebookMeta (built once) */
 const _entryByTag = new Map();
 for (const section of stylebookMeta.$sections) {
-  for (const entry of /** @type {StylebookEntry[]} */ (section.elements)) {
+  for (const entry of section.elements as StylebookEntry[]) {
     _entryByTag.set(entry.tag, entry);
   }
 }
@@ -108,7 +110,7 @@ for (const section of stylebookMeta.$sections) {
  *
  * @param {StylebookCtx} ctx
  */
-export function renderStylebookMode(ctx) {
+export function renderStylebookMode(ctx: StylebookCtx) {
   _ctx = ctx;
 
   // Stylebook mode — element catalog only
@@ -123,8 +125,8 @@ export function renderStylebookMode(ctx) {
   );
   const hasMedia = sizeBreakpoints.length > 0;
 
-  const onFilterInput = (/** @type {Event} */ e) => {
-    updateUi("stylebookFilter", /** @type {HTMLInputElement} */ (e.target).value);
+  const onFilterInput = (e: Event) => {
+    updateUi("stylebookFilter", (e.target as HTMLInputElement).value);
   };
 
   const onCustomizedToggle = () => {
@@ -145,7 +147,10 @@ export function renderStylebookMode(ctx) {
           @input=${onFilterInput}
         />
         <button
-          class=${classMap({ "tb-toggle": true, active: tab?.session.ui.stylebookCustomizedOnly })}
+          class=${classMap({
+            "tb-toggle": true,
+            active: !!tab?.session.ui.stylebookCustomizedOnly,
+          })}
           @click=${onCustomizedToggle}
         >
           Customized
@@ -154,7 +159,7 @@ export function renderStylebookMode(ctx) {
     </div>
   `;
 
-  /** @type {HTMLElement} */ (canvasWrap).style.overflow = "hidden";
+  (canvasWrap as HTMLElement).style.overflow = "hidden";
 
   /** @type {{ name: string; displayName: string; width: number; activeSet: Set<string> }[]} */
   const allPanelDefs = [];
@@ -175,10 +180,7 @@ export function renderStylebookMode(ctx) {
     }
   }
 
-  const renderIntoPanel = (
-    /** @type {StylebookPanel} */ panel,
-    /** @type {Set<string>} */ activeBreakpoints,
-  ) => {
+  const renderIntoPanel = (panel: StylebookPanel, activeBreakpoints: Set<string>) => {
     panel.canvas.classList.add("sb-canvas");
     renderStylebookElementsIntoCanvas(
       panel.canvas,
@@ -188,7 +190,7 @@ export function renderStylebookMode(ctx) {
       activeBreakpoints,
     );
     for (const child of panel.canvas.querySelectorAll("*")) {
-      /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
+      (child as HTMLElement).style.pointerEvents = "none";
     }
     registerStylebookPanelEvents(panel);
   };
@@ -211,7 +213,7 @@ export function renderStylebookMode(ctx) {
       !hasBaseWidth,
       hasBaseWidth ? baseWidth : undefined,
     );
-    panelEntries = [{ tpl: entry.tpl, panel: entry.panel, activeSet: new Set() }];
+    panelEntries = [{ tpl: entry.tpl, panel: entry.panel, activeSet: new Set<string>() }];
   } else {
     panelEntries = allPanelDefs.map((def) => {
       const label = `${def.displayName} (${def.width}px)`;
@@ -227,7 +229,7 @@ export function renderStylebookMode(ctx) {
         class="panzoom-wrap"
         style="transform-origin:0 0;padding-top:40px"
         ${ref((el) => {
-          if (el) view.panzoomWrap = /** @type {HTMLDivElement} */ (el);
+          if (el) view.panzoomWrap = el as HTMLDivElement;
         })}
       >
         ${panelEntries.map((e) => e.tpl)}
@@ -266,15 +268,15 @@ export function refreshStylebookStyles() {
 
     const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document?.$media));
     const activeBreakpoints = panel.mediaName
-      ? activeBreakpointsForWidth(sizeBreakpoints, /** @type {number} */ (panel._width))
-      : new Set();
+      ? activeBreakpointsForWidth(sizeBreakpoints, panel._width as number)
+      : new Set<string>();
 
     // Re-apply styles to each element in the canvas
     const allEls = canvas.querySelectorAll("*");
     for (const el of allEls) {
       const tag = view.stylebookElToTag.get(el);
       if (!tag) continue;
-      const htmlEl = /** @type {HTMLElement} */ (el);
+      const htmlEl = el as HTMLElement;
       // Determine if it's a compound selector (e.g. "ul li") or simple tag
       const parts = tag.split(" ");
       const leafTag = parts[parts.length - 1];
@@ -289,27 +291,21 @@ export function refreshStylebookStyles() {
         for (const [prop, val] of Object.entries(tagStyle)) {
           if (typeof val === "string" || typeof val === "number") {
             try {
-              /** @type {Record<string, string | number>} */ (
-                /** @type {unknown} */ (htmlEl.style)
-              )[prop] = val;
+              (htmlEl.style as unknown as Record<string, string | number>)[prop] = val;
             } catch {}
           }
         }
         // Media overrides nested in tag style
         if (activeBreakpoints.size > 0) {
           for (const [key, val] of Object.entries(tagStyle)) {
-            if (!key.startsWith("@") || typeof val !== "object") continue;
+            if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
             const mediaName = key.slice(1);
             if (mediaName === "--") continue;
             if (activeBreakpoints.has(mediaName)) {
-              for (const [prop, v] of Object.entries(
-                /** @type {Record<string, unknown>} */ (val),
-              )) {
+              for (const [prop, v] of Object.entries(val as Record<string, unknown>)) {
                 if (typeof v === "string" || typeof v === "number") {
                   try {
-                    /** @type {Record<string, string | number>} */ (
-                      /** @type {unknown} */ (htmlEl.style)
-                    )[prop] = v;
+                    (htmlEl.style as unknown as Record<string, string | number>)[prop] = v;
                   } catch {}
                 }
               }
@@ -320,7 +316,7 @@ export function refreshStylebookStyles() {
       // Top-level @media keys
       if (activeBreakpoints.size > 0) {
         for (const [key, val] of Object.entries(rootStyle)) {
-          if (!key.startsWith("@") || typeof val !== "object") continue;
+          if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
           const mediaName = key.slice(1);
           if (mediaName === "--") continue;
           if (activeBreakpoints.has(mediaName)) {
@@ -332,9 +328,7 @@ export function refreshStylebookStyles() {
               for (const [prop, v] of Object.entries(mediaTagStyle)) {
                 if (typeof v === "string" || typeof v === "number") {
                   try {
-                    /** @type {Record<string, string | number>} */ (
-                      /** @type {unknown} */ (htmlEl.style)
-                    )[prop] = v;
+                    (htmlEl.style as unknown as Record<string, string | number>)[prop] = v;
                   } catch {}
                 }
               }
@@ -354,7 +348,7 @@ export function refreshStylebookStyles() {
  * @param {string} tag
  * @param {string | null} [media]
  */
-export function selectStylebookTag(tag, media, { panCanvas = false } = {}) {
+export function selectStylebookTag(tag: string, media?: string | null, { panCanvas = false } = {}) {
   updateSession({
     selection: [],
     ui: {
@@ -380,7 +374,7 @@ export function renderStylebookOverlays() {
   const selectedTag = activeTab.value?.session.ui.stylebookSelection;
 
   for (const panel of canvasPanels) {
-    const hoverTag = /** @type {StylebookPanel} */ (panel)._lastHoverTag;
+    const hoverTag = (panel as StylebookPanel)._lastHoverTag;
     /**
      * @type {{
      *   cls: string;
@@ -436,7 +430,12 @@ export function renderStylebookOverlays() {
  * @param {Set<string> | null} activeBreakpoints
  * @param {string | null} [parentTag]
  */
-export function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
+export function buildStylebookElement(
+  entry: StylebookEntry,
+  rootStyle: Record<string, unknown>,
+  activeBreakpoints: Set<string> | null,
+  parentTag: string | null = null,
+) {
   const el = document.createElement(entry.tag);
   if (entry.text) el.textContent = entry.text;
   if (entry.attributes) {
@@ -455,24 +454,21 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
         try {
-          /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[prop] =
-            val;
+          (el.style as unknown as Record<string, string | number>)[prop] = val;
         } catch {}
       }
     }
     if (activeBreakpoints) {
       // Check media overrides nested inside the tag style (selector wraps media)
       for (const [key, val] of Object.entries(tagStyle)) {
-        if (!key.startsWith("@") || typeof val !== "object") continue;
+        if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
         const mediaName = key.slice(1);
         if (mediaName === "--") continue;
         if (activeBreakpoints.has(mediaName)) {
-          for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
+          for (const [prop, v] of Object.entries(val as Record<string, unknown>)) {
             if (typeof v === "string" || typeof v === "number") {
               try {
-                /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[
-                  prop
-                ] = v;
+                (el.style as unknown as Record<string, string | number>)[prop] = v;
               } catch {}
             }
           }
@@ -484,21 +480,16 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
   if (activeBreakpoints) {
     const tagPath = compoundTag || entry.tag;
     for (const [key, val] of Object.entries(rootStyle)) {
-      if (!key.startsWith("@") || typeof val !== "object") continue;
+      if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
       const mediaName = key.slice(1);
       if (mediaName === "--") continue;
       if (activeBreakpoints.has(mediaName)) {
-        const mediaTagStyle = _resolveNestedStyle(
-          /** @type {Record<string, unknown>} */ (val),
-          tagPath,
-        );
+        const mediaTagStyle = _resolveNestedStyle(val as Record<string, unknown>, tagPath);
         if (mediaTagStyle && typeof mediaTagStyle === "object") {
           for (const [prop, v] of Object.entries(mediaTagStyle)) {
             if (typeof v === "string" || typeof v === "number") {
               try {
-                /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[
-                  prop
-                ] = v;
+                (el.style as unknown as Record<string, string | number>)[prop] = v;
               } catch {}
             }
           }
@@ -520,7 +511,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
  * @param {ComponentEntry} comp
  * @returns {Promise<HTMLElement>}
  */
-export async function renderComponentPreview(comp) {
+export async function renderComponentPreview(comp: ComponentEntry) {
   setSkipServerFunctions(true);
   try {
     if (comp.source === "npm") {
@@ -543,14 +534,14 @@ export async function renderComponentPreview(comp) {
       }
     }
     return el;
-  } catch (/** @type {unknown} */ e) {
+  } catch (e) {
     console.warn("Component preview failed:", comp.tagName, e);
     return _componentFallback(comp.tagName);
   }
 }
 
 /** @param {string} tagName */
-function _componentFallback(tagName) {
+function _componentFallback(tagName: string) {
   const fallback = document.createElement("div");
   fallback.style.cssText =
     "padding:12px;border:1px dashed var(--border);border-radius:4px;color:var(--fg-dim)";
@@ -562,12 +553,12 @@ function _componentFallback(tagName) {
  * @param {Record<string, unknown>} rootStyle
  * @param {string} tag
  */
-function hasTagStyle(rootStyle, tag) {
+function hasTagStyle(rootStyle: Record<string, unknown>, tag: string) {
   const s = _resolveNestedStyle(rootStyle, tag);
   if (s && typeof s === "object" && Object.keys(s).length > 0) return true;
   for (const [key, val] of Object.entries(rootStyle)) {
-    if (!key.startsWith("@") || typeof val !== "object") continue;
-    const ms = _resolveNestedStyle(/** @type {Record<string, unknown>} */ (val), tag);
+    if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
+    const ms = _resolveNestedStyle(val as Record<string, unknown>, tag);
     if (ms && typeof ms === "object" && Object.keys(ms).length > 0) return true;
   }
   return false;
@@ -581,11 +572,11 @@ function hasTagStyle(rootStyle, tag) {
  * @param {Set<string> | null} activeBreakpoints
  */
 export function renderStylebookElementsIntoCanvas(
-  canvasEl,
-  rootStyle,
-  filter,
-  customizedOnly,
-  activeBreakpoints,
+  canvasEl: HTMLElement,
+  rootStyle: Record<string, unknown>,
+  filter: string,
+  customizedOnly: boolean | undefined,
+  activeBreakpoints: Set<string> | null,
 ) {
   for (const [k, v] of Object.entries(rootStyle)) {
     if (k.startsWith("--") && (typeof v === "string" || typeof v === "number")) {
@@ -593,23 +584,22 @@ export function renderStylebookElementsIntoCanvas(
     }
   }
 
-  /** @type {import("lit-html").TemplateResult[]} */
-  const sectionTemplates = [];
+  const sectionTemplates: import("lit-html").TemplateResult[] = [];
 
   for (const section of stylebookMeta.$sections) {
-    let entries = /** @type {StylebookEntry[]} */ (section.elements);
+    let entries = section.elements as StylebookEntry[];
     if (filter) {
       entries = entries.filter(
-        (/** @type {StylebookEntry} */ e) =>
+        (e: StylebookEntry) =>
           e.tag.includes(filter) || section.label.toLowerCase().includes(filter),
       );
     }
     if (customizedOnly) {
-      entries = entries.filter((/** @type {StylebookEntry} */ e) => hasTagStyle(rootStyle, e.tag));
+      entries = entries.filter((e: StylebookEntry) => hasTagStyle(rootStyle, e.tag));
     }
     if (entries.length === 0) continue;
 
-    const cardTemplates = entries.map((/** @type {StylebookEntry} */ entry) => {
+    const cardTemplates = entries.map((entry: StylebookEntry) => {
       const el = buildStylebookElement(entry, rootStyle, activeBreakpoints);
       return html`
         <div
@@ -654,15 +644,12 @@ export function renderStylebookElementsIntoCanvas(
   if (componentRegistry.length > 0) {
     let comps = componentRegistry;
     if (filter)
-      comps = comps.filter((/** @type {ComponentEntry} */ c) =>
-        c.tagName.toLowerCase().includes(filter),
-      );
+      comps = comps.filter((c: ComponentEntry) => c.tagName.toLowerCase().includes(filter));
     if (customizedOnly)
-      comps = comps.filter((/** @type {ComponentEntry} */ c) => hasTagStyle(rootStyle, c.tagName));
+      comps = comps.filter((c: ComponentEntry) => hasTagStyle(rootStyle, c.tagName));
     if (comps.length > 0) {
-      const compCards = comps.map((/** @type {ComponentEntry} */ comp) => {
-        /** @type {HTMLDivElement | null} */
-        let previewEl = null;
+      const compCards = comps.map((comp: ComponentEntry) => {
+        let previewEl: HTMLDivElement | null = null;
         const cardTpl = html`
           <div
             class="element-card"
@@ -676,7 +663,7 @@ export function renderStylebookElementsIntoCanvas(
             <div
               class="element-card-preview"
               ${ref((c) => {
-                if (c) previewEl = /** @type {HTMLDivElement} */ (c);
+                if (c) previewEl = c as HTMLDivElement;
               })}
             ></div>
             <div class="element-card-label">&lt;${comp.tagName}&gt;</div>
@@ -718,20 +705,20 @@ export function renderStylebookElementsIntoCanvas(
  *
  * @param {StylebookPanel} panel
  */
-function registerStylebookPanelEvents(panel) {
+function registerStylebookPanelEvents(panel: StylebookPanel) {
   const { canvas, overlayClk } = panel;
 
-  overlayClk.addEventListener("click", (/** @type {MouseEvent} */ e) => {
+  overlayClk.addEventListener("click", (e: MouseEvent) => {
     const els = canvas.querySelectorAll("*");
-    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
+    for (const el of els) (el as HTMLElement).style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const elements = document.elementsFromPoint(e.clientX, e.clientY);
     overlayClk.style.display = "";
-    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
+    for (const el of els) (el as HTMLElement).style.pointerEvents = "none";
 
     for (const el of elements) {
       if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {Element | null} */ (el);
+      let cur = el as Element | null;
       while (cur && cur !== canvas) {
         const tag = view.stylebookElToTag.get(cur);
         if (tag) {
@@ -747,18 +734,18 @@ function registerStylebookPanelEvents(panel) {
     renderStylebookOverlays();
   });
 
-  overlayClk.addEventListener("mousemove", (/** @type {MouseEvent} */ e) => {
+  overlayClk.addEventListener("mousemove", (e: MouseEvent) => {
     const els = canvas.querySelectorAll("*");
-    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
+    for (const el of els) (el as HTMLElement).style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const elements = document.elementsFromPoint(e.clientX, e.clientY);
     overlayClk.style.display = "";
-    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
+    for (const el of els) (el as HTMLElement).style.pointerEvents = "none";
 
     let hoverTag = null;
     for (const el of elements) {
       if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {Element | null} */ (el);
+      let cur = el as Element | null;
       while (cur && cur !== canvas) {
         const tag = view.stylebookElToTag.get(cur);
         if (tag) {
@@ -778,9 +765,9 @@ function registerStylebookPanelEvents(panel) {
 }
 
 /** Find a stylebook element by tag in the canvas */
-function findStylebookEl(/** @type {HTMLElement} */ canvasEl, /** @type {string} */ tag) {
+function findStylebookEl(canvasEl: HTMLElement, tag: string) {
   for (const child of canvasEl.querySelectorAll("*")) {
-    if (view.stylebookElToTag.get(child) === tag) return /** @type {HTMLElement} */ (child);
+    if (view.stylebookElToTag.get(child) === tag) return child as HTMLElement;
   }
   return null;
 }

package/src/panels/{tab-strip.js → tab-strip.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Tab strip — renders open tabs above the canvas area.
  *
@@ -8,24 +9,21 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { repeat } from "lit-html/directives/repeat.js";
-import { effect, effectScope } from "../reactivity.js";
-import { workspace, activateTab, closeTab } from "../workspace/workspace.js";
-import { showConfirmDialog } from "../ui/layers.js";
+import { effect, effectScope } from "../reactivity";
+import { workspace, activateTab, closeTab } from "../workspace/workspace";
+import type { Tab } from "../tabs/tab";
+import { showConfirmDialog } from "../ui/layers";
 
-/** @typedef {import("../tabs/tab.js").Tab} Tab */
+let _host: HTMLElement | null = null;
 
-/** @type {HTMLElement | null} */
-let _host = null;
-
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 /**
  * Mount the tab strip into the given host element.
  *
  * @param {HTMLElement} host
  */
-export function mount(host) {
+export function mount(host: HTMLElement) {
   _host = host;
   _scope = effectScope();
   _scope.run(() => {
@@ -71,7 +69,7 @@ function render() {
               <div
                 class=${classMap({ "tab-strip-tab": true, active: isActive })}
                 @click=${() => activateTab(id)}
-                @auxclick=${(/** @type {MouseEvent} */ e) => {
+                @auxclick=${(e: MouseEvent) => {
                   if (e.button === 1) {
                     e.preventDefault();
                     requestClose(id);
@@ -83,7 +81,7 @@ function render() {
                 ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
                 <button
                   class="tab-strip-close"
-                  @click=${(/** @type {Event} */ e) => {
+                  @click=${(e: Event) => {
                     e.stopPropagation();
                     requestClose(id);
                   }}
@@ -106,7 +104,7 @@ function render() {
  * @param {Tab} tab
  * @returns {string}
  */
-function tabLabel(tab) {
+function tabLabel(tab: Tab) {
   const path = tab.documentPath;
   if (!path) return "Untitled";
   const parts = path.split("/");
@@ -118,7 +116,7 @@ function tabLabel(tab) {
  *
  * @param {string} id
  */
-async function requestClose(id) {
+async function requestClose(id: string) {
   const tab = workspace.tabs.get(id);
   if (!tab) return;
   if (tab.doc.dirty) {