@jxsuite/studio 0.19.0 → 0.20.0

package/src/panels/style-utils.js

@@ -9,8 +9,8 @@ import cssMeta from "../../data/css-meta.json";
 let cssInitialMap = new Map();
 
 /** Initialise cssInitialMap from webdata — call once during bootstrap. */
-export function initCssData(/** @type {any} */ webdata) {
-  cssInitialMap = new Map(/** @type {any} */ (webdata.cssProps));
+export function initCssData(/** @type {{ cssProps: string[][] }} */ webdata) {
+  cssInitialMap = new Map(/** @type {[string, string][]} */ (webdata.cssProps));
 }
 
 /** Get the CSS initial-value map (populated by initCssData). */
@@ -20,28 +20,33 @@ export function getCssInitialMap() {
 
 // ─── Condition helpers ──────────────────────────────────────────────────────
 
-/** @param {any} cond @param {any} styles */
+/** @param {{ prop: string; values: string[] }} cond @param {Record<string, unknown>} styles */
 export function conditionPasses(cond, styles) {
-  const val = styles[cond.prop] ?? "";
+  const val = /** @type {string} */ (styles[cond.prop] ?? "");
   if (cond.values.length === 0) return val !== "" && val !== "initial";
   return cond.values.includes(val);
 }
 
-/** @param {any} entry @param {any} styles */
+/**
+ * @param {{ $show?: { prop: string; values: string[] }[] }} entry @param {Record<string, unknown>}
+ *   styles
+ */
 export function allConditionsPass(entry, styles) {
-  return (entry.$show ?? []).every((/** @type {any} */ c) => conditionPasses(c, styles));
+  return (entry.$show ?? []).every((/** @type {{ prop: string; values: string[] }} */ c) =>
+    conditionPasses(c, styles),
+  );
 }
 
 // ─── Auto-open sections ─────────────────────────────────────────────────────
 
-/** @param {any} node @param {any} currentSections */
+/** @param {JxMutableNode} node @param {Record<string, boolean>} currentSections */
 export function autoOpenSections(node, currentSections) {
   const style = node.style || {};
   const result = { ...currentSections };
   for (const prop of Object.keys(style)) {
     if (typeof style[prop] === "object") continue;
-    const entry = /** @type {Record<string, any>} */ (cssMeta.$defs)[prop];
-    const section = entry?.$section ?? "other";
+    const entry = /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[prop];
+    const section = /** @type {string} */ (entry?.$section) ?? "other";
     if (!result[section]) result[section] = true;
   }
   return result;
@@ -50,21 +55,34 @@ export function autoOpenSections(node, currentSections) {
 // ─── Shorthand expand/compress ──────────────────────────────────────────────
 
 /** Get longhands for a shorthand property from css-meta */
-export function getLonghands(/** @type {any} */ shorthandProp) {
-  const entry = /** @type {Record<string, any>} */ (cssMeta.$defs)[shorthandProp];
+export function getLonghands(/** @type {string} */ shorthandProp) {
+  const entry = /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[
+    shorthandProp
+  ];
   if (entry?.$longhands) {
-    return entry.$longhands
+    return /** @type {string[]} */ (entry.$longhands)
       .map((/** @type {string} */ name) => ({
         name,
-        entry: /** @type {Record<string, any>} */ (cssMeta.$defs)[name] || { $order: 0 },
+        entry: /** @type {Record<string, Record<string, unknown>>} */ (cssMeta.$defs)[name] || {
+          $order: 0,
+        },
       }))
-      .sort((/** @type {any} */ a, /** @type {any} */ b) => a.entry.$order - b.entry.$order);
+      .sort(
+        (
+          /** @type {{ entry: Record<string, unknown> }} */ a,
+          /** @type {{ entry: Record<string, unknown> }} */ b,
+        ) => /** @type {number} */ (a.entry.$order) - /** @type {number} */ (b.entry.$order),
+      );
   }
   const result = [];
-  for (const [name, e] of /** @type {[string, any][]} */ (Object.entries(cssMeta.$defs))) {
+  for (const [name, e] of /** @type {[string, Record<string, unknown>][]} */ (
+    Object.entries(cssMeta.$defs)
+  )) {
     if (e.$shorthand === shorthandProp) result.push({ name, entry: e });
   }
-  result.sort((a, b) => a.entry.$order - b.entry.$order);
+  result.sort(
+    (a, b) => /** @type {number} */ (a.entry.$order) - /** @type {number} */ (b.entry.$order),
+  );
   return result;
 }
 

package/src/panels/stylebook-layers-panel.js

@@ -5,8 +5,10 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { activeTab } from "../workspace/workspace.js";
 import { componentRegistry } from "../files/components.js";
 
+/** @typedef {import("./stylebook-panel.js").StylebookEntry} StylebookEntry */
+
 /**
- * @param {any} rootStyle
+ * @param {JxStyle} rootStyle
  * @param {string} tag
  */
 function hasTagStyle(rootStyle, tag) {
@@ -21,7 +23,7 @@ function hasTagStyle(rootStyle, tag) {
  *     media?: string | null,
  *     opts?: { panCanvas?: boolean },
  *   ) => void;
- *   stylebookMeta: any;
+ *   stylebookMeta: { $sections: { label: string; elements: StylebookEntry[] }[] };
  * }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
@@ -33,22 +35,22 @@ export function renderStylebookLayersTemplate(ctx) {
 
   if (tab?.session.ui.stylebookTab === "elements") {
     /**
-     * @param {any} entry
+     * @param {StylebookEntry} entry
      * @param {number} depth
      * @param {string} parentPath
-     * @returns {any}
+     * @returns {import("lit-html").TemplateResult}
      */
     const renderEntryRow = (entry, depth = 0, parentPath = "") => {
       const tag = entry.tag;
       const fullPath = parentPath ? `${parentPath} ${tag}` : tag;
       const uniqueChildren = entry.children
-        ? [...new Map(entry.children.map((/** @type {any} */ c) => [c.tag, c])).values()]
+        ? [...new Map(entry.children.map((/** @type {StylebookEntry} */ c) => [c.tag, c])).values()]
         : [];
       return html`
         <div
           class=${classMap({ "layer-row": true, selected: tag === selectedLeaf })}
           style="padding-left:${8 + depth * 16}px"
-          @click=${(/** @type {any} */ e) => {
+          @click=${(/** @type {MouseEvent} */ e) => {
             e.stopPropagation();
             ctx.selectStylebookTag(fullPath, undefined, { panCanvas: true });
           }}
@@ -65,21 +67,21 @@ export function renderStylebookLayersTemplate(ctx) {
               ></span>`
             : nothing}
         </div>
-        ${uniqueChildren.map((/** @type {any} */ child) =>
+        ${uniqueChildren.map((/** @type {StylebookEntry} */ child) =>
           renderEntryRow(child, depth + 1, fullPath),
         )}
       `;
     };
 
-    /** @type {any[]} */
+    /** @type {import("lit-html").TemplateResult[]} */
     const elementRows = [];
     for (const section of ctx.stylebookMeta.$sections) {
-      for (const entry of /** @type {any[]} */ (section.elements)) {
+      for (const entry of section.elements) {
         elementRows.push(renderEntryRow(entry, 0));
       }
     }
     const compRows = componentRegistry.map(
-      /** @param {any} comp */ (comp) => html`
+      /** @param {import("../files/components.js").ComponentEntry} comp */ (comp) => html`
         <div
           class=${classMap({ "layer-row": true, selected: comp.tagName === selectedTag })}
           @click=${() => ctx.selectStylebookTag(comp.tagName, undefined, { panCanvas: true })}

package/src/panels/stylebook-panel.js

@@ -29,30 +29,76 @@ import stylebookMeta from "../../data/stylebook-meta.json";
 
 export { stylebookMeta };
 
+/**
+ * @typedef {{
+ *   tag: string;
+ *   text?: string;
+ *   attributes?: Record<string, string>;
+ *   style?: string;
+ *   children?: StylebookEntry[];
+ * }} StylebookEntry
+ */
+
+/**
+ * @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
+ */
+
+/**
+ * @typedef {{
+ *   canvasPanelTemplate: Function;
+ *   applyTransform: Function;
+ *   observeCenterUntilStable: Function;
+ *   renderZoomIndicator: Function;
+ *   updateActivePanelHeaders: Function;
+ *   overlayBoxDescriptor: Function;
+ *   effectiveZoom: Function;
+ * }} StylebookCtx
+ */
+
+/**
+ * @typedef {{
+ *   source?: string;
+ *   tagName: string;
+ *   path?: string;
+ *   props?: Array<{ name: string; default?: string }>;
+ * }} ComponentEntry
+ */
+
 /**
  * Resolve a nested tag path in a style object. e.g., "table th" → style["table"]["th"]
  *
- * @param {Record<string, any>} style
+ * @param {Record<string, unknown>} style
  * @param {string} tagPath
- * @returns {Record<string, any> | null}
+ * @returns {Record<string, unknown> | null}
  */
 function _resolveNestedStyle(style, tagPath) {
   const parts = tagPath.split(" ");
   let obj = style;
   for (const part of parts) {
     if (!obj || typeof obj !== "object") return null;
-    obj = obj[part];
+    obj = /** @type {Record<string, unknown>} */ (obj[part]);
   }
-  return obj && typeof obj === "object" ? /** @type {Record<string, any>} */ (obj) : null;
+  return obj && typeof obj === "object" ? /** @type {Record<string, unknown>} */ (obj) : null;
 }
 
-/** @type {any} */
+/** @type {StylebookCtx | null} */
 let _ctx = null;
 
 /** Lookup: tag → entry from stylebookMeta (built once) */
 const _entryByTag = new Map();
 for (const section of stylebookMeta.$sections) {
-  for (const entry of /** @type {any} */ (section.elements)) {
+  for (const entry of /** @type {StylebookEntry[]} */ (section.elements)) {
     _entryByTag.set(entry.tag, entry);
   }
 }
@@ -60,15 +106,7 @@ for (const section of stylebookMeta.$sections) {
 /**
  * Render the stylebook/settings mode into the canvas.
  *
- * @param {{
- *   canvasPanelTemplate: Function;
- *   applyTransform: Function;
- *   observeCenterUntilStable: Function;
- *   renderZoomIndicator: Function;
- *   updateActivePanelHeaders: Function;
- *   overlayBoxDescriptor: Function;
- *   effectiveZoom: Function;
- * }} ctx
+ * @param {StylebookCtx} ctx
  */
 export function renderStylebookMode(ctx) {
   _ctx = ctx;
@@ -85,8 +123,8 @@ export function renderStylebookMode(ctx) {
   );
   const hasMedia = sizeBreakpoints.length > 0;
 
-  const onFilterInput = (/** @type {any} */ e) => {
-    updateUi("stylebookFilter", e.target.value);
+  const onFilterInput = (/** @type {Event} */ e) => {
+    updateUi("stylebookFilter", /** @type {HTMLInputElement} */ (e.target).value);
   };
 
   const onCustomizedToggle = () => {
@@ -116,9 +154,9 @@ export function renderStylebookMode(ctx) {
     </div>
   `;
 
-  /** @type {any} */ (canvasWrap).style.overflow = "hidden";
+  /** @type {HTMLElement} */ (canvasWrap).style.overflow = "hidden";
 
-  /** @type {any[]} */
+  /** @type {{ name: string; displayName: string; width: number; activeSet: Set<string> }[]} */
   const allPanelDefs = [];
   if (hasMedia) {
     allPanelDefs.push({
@@ -137,7 +175,10 @@ export function renderStylebookMode(ctx) {
     }
   }
 
-  const renderIntoPanel = (/** @type {any} */ panel, /** @type {any} */ activeBreakpoints) => {
+  const renderIntoPanel = (
+    /** @type {StylebookPanel} */ panel,
+    /** @type {Set<string>} */ activeBreakpoints,
+  ) => {
     panel.canvas.classList.add("sb-canvas");
     renderStylebookElementsIntoCanvas(
       panel.canvas,
@@ -147,12 +188,18 @@ export function renderStylebookMode(ctx) {
       activeBreakpoints,
     );
     for (const child of panel.canvas.querySelectorAll("*")) {
-      child.style.pointerEvents = "none";
+      /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
     }
     registerStylebookPanelEvents(panel);
   };
 
-  /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
+  /**
+   * @type {{
+   *   tpl: import("lit-html").TemplateResult;
+   *   panel: StylebookPanel;
+   *   activeSet: Set<string>;
+   * }[]}
+   */
   let panelEntries;
   if (!hasMedia) {
     const effectiveMedia = getEffectiveMedia(tab?.doc.document?.$media);
@@ -186,11 +233,11 @@ export function renderStylebookMode(ctx) {
         ${panelEntries.map((e) => e.tpl)}
       </div>
     `,
-    /** @type {any} */ (canvasWrap),
+    /** @type {HTMLElement} */ (canvasWrap),
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {import("./canvas-dnd.js").CanvasPanel} */ (panel));
     renderIntoPanel(panel, activeSet);
   }
   if (hasMedia) {
@@ -242,7 +289,9 @@ export function refreshStylebookStyles() {
         for (const [prop, val] of Object.entries(tagStyle)) {
           if (typeof val === "string" || typeof val === "number") {
             try {
-              /** @type {any} */ (htmlEl.style)[prop] = val;
+              /** @type {Record<string, string | number>} */ (
+                /** @type {unknown} */ (htmlEl.style)
+              )[prop] = val;
             } catch {}
           }
         }
@@ -253,10 +302,14 @@ export function refreshStylebookStyles() {
             const mediaName = key.slice(1);
             if (mediaName === "--") continue;
             if (activeBreakpoints.has(mediaName)) {
-              for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
+              for (const [prop, v] of Object.entries(
+                /** @type {Record<string, unknown>} */ (val),
+              )) {
                 if (typeof v === "string" || typeof v === "number") {
                   try {
-                    /** @type {any} */ (htmlEl.style)[prop] = v;
+                    /** @type {Record<string, string | number>} */ (
+                      /** @type {unknown} */ (htmlEl.style)
+                    )[prop] = v;
                   } catch {}
                 }
               }
@@ -271,12 +324,17 @@ export function refreshStylebookStyles() {
           const mediaName = key.slice(1);
           if (mediaName === "--") continue;
           if (activeBreakpoints.has(mediaName)) {
-            const mediaTagStyle = _resolveNestedStyle(/** @type {any} */ (val), tag);
+            const mediaTagStyle = _resolveNestedStyle(
+              /** @type {Record<string, unknown>} */ (val),
+              tag,
+            );
             if (mediaTagStyle && typeof mediaTagStyle === "object") {
               for (const [prop, v] of Object.entries(mediaTagStyle)) {
                 if (typeof v === "string" || typeof v === "number") {
                   try {
-                    /** @type {any} */ (htmlEl.style)[prop] = v;
+                    /** @type {Record<string, string | number>} */ (
+                      /** @type {unknown} */ (htmlEl.style)
+                    )[prop] = v;
                   } catch {}
                 }
               }
@@ -322,7 +380,7 @@ export function renderStylebookOverlays() {
   const selectedTag = activeTab.value?.session.ui.stylebookSelection;
 
   for (const panel of canvasPanels) {
-    const hoverTag = /** @type {any} */ (panel)._lastHoverTag;
+    const hoverTag = /** @type {StylebookPanel} */ (panel)._lastHoverTag;
     /**
      * @type {{
      *   cls: string;
@@ -373,9 +431,9 @@ export function renderStylebookOverlays() {
 /**
  * Build a DOM element tree from a stylebook-meta.json entry.
  *
- * @param {any} entry
- * @param {any} rootStyle
- * @param {any} activeBreakpoints
+ * @param {StylebookEntry} entry
+ * @param {Record<string, unknown>} rootStyle
+ * @param {Set<string> | null} activeBreakpoints
  * @param {string | null} [parentTag]
  */
 export function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
@@ -397,7 +455,8 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
         try {
-          /** @type {any} */ (el.style)[prop] = val;
+          /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[prop] =
+            val;
         } catch {}
       }
     }
@@ -408,10 +467,12 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
         const mediaName = key.slice(1);
         if (mediaName === "--") continue;
         if (activeBreakpoints.has(mediaName)) {
-          for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
+          for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
             if (typeof v === "string" || typeof v === "number") {
               try {
-                /** @type {any} */ (el.style)[prop] = v;
+                /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[
+                  prop
+                ] = v;
               } catch {}
             }
           }
@@ -427,12 +488,17 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
       const mediaName = key.slice(1);
       if (mediaName === "--") continue;
       if (activeBreakpoints.has(mediaName)) {
-        const mediaTagStyle = _resolveNestedStyle(/** @type {any} */ (val), tagPath);
+        const mediaTagStyle = _resolveNestedStyle(
+          /** @type {Record<string, unknown>} */ (val),
+          tagPath,
+        );
         if (mediaTagStyle && typeof mediaTagStyle === "object") {
           for (const [prop, v] of Object.entries(mediaTagStyle)) {
             if (typeof v === "string" || typeof v === "number") {
               try {
-                /** @type {any} */ (el.style)[prop] = v;
+                /** @type {Record<string, string | number>} */ (/** @type {unknown} */ (el.style))[
+                  prop
+                ] = v;
               } catch {}
             }
           }
@@ -451,7 +517,7 @@ export function buildStylebookElement(entry, rootStyle, activeBreakpoints, paren
 /**
  * Render a live component preview by registering its custom element and instantiating it.
  *
- * @param {any} comp
+ * @param {ComponentEntry} comp
  * @returns {Promise<HTMLElement>}
  */
 export async function renderComponentPreview(comp) {
@@ -477,7 +543,7 @@ export async function renderComponentPreview(comp) {
       }
     }
     return el;
-  } catch (/** @type {any} */ e) {
+  } catch (/** @type {unknown} */ e) {
     console.warn("Component preview failed:", comp.tagName, e);
     return _componentFallback(comp.tagName);
   }
@@ -493,26 +559,26 @@ function _componentFallback(tagName) {
 }
 
 /**
- * @param {any} rootStyle
- * @param {any} tag
+ * @param {Record<string, unknown>} rootStyle
+ * @param {string} tag
  */
 function hasTagStyle(rootStyle, tag) {
   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 {any} */ (val), tag);
+    const ms = _resolveNestedStyle(/** @type {Record<string, unknown>} */ (val), tag);
     if (ms && typeof ms === "object" && Object.keys(ms).length > 0) return true;
   }
   return false;
 }
 
 /**
- * @param {any} canvasEl
- * @param {any} rootStyle
- * @param {any} filter
- * @param {any} customizedOnly
- * @param {any} activeBreakpoints
+ * @param {HTMLElement} canvasEl
+ * @param {Record<string, unknown>} rootStyle
+ * @param {string} filter
+ * @param {boolean | undefined} customizedOnly
+ * @param {Set<string> | null} activeBreakpoints
  */
 export function renderStylebookElementsIntoCanvas(
   canvasEl,
@@ -531,19 +597,19 @@ export function renderStylebookElementsIntoCanvas(
   const sectionTemplates = [];
 
   for (const section of stylebookMeta.$sections) {
-    let entries = /** @type {any} */ (section.elements);
+    let entries = /** @type {StylebookEntry[]} */ (section.elements);
     if (filter) {
       entries = entries.filter(
-        (/** @type {any} */ e) =>
+        (/** @type {StylebookEntry} */ e) =>
           e.tag.includes(filter) || section.label.toLowerCase().includes(filter),
       );
     }
     if (customizedOnly) {
-      entries = entries.filter((/** @type {any} */ e) => hasTagStyle(rootStyle, e.tag));
+      entries = entries.filter((/** @type {StylebookEntry} */ e) => hasTagStyle(rootStyle, e.tag));
     }
     if (entries.length === 0) continue;
 
-    const cardTemplates = entries.map((/** @type {any} */ entry) => {
+    const cardTemplates = entries.map((/** @type {StylebookEntry} */ entry) => {
       const el = buildStylebookElement(entry, rootStyle, activeBreakpoints);
       return html`
         <div
@@ -588,11 +654,13 @@ export function renderStylebookElementsIntoCanvas(
   if (componentRegistry.length > 0) {
     let comps = componentRegistry;
     if (filter)
-      comps = comps.filter((/** @type {any} */ c) => c.tagName.toLowerCase().includes(filter));
+      comps = comps.filter((/** @type {ComponentEntry} */ c) =>
+        c.tagName.toLowerCase().includes(filter),
+      );
     if (customizedOnly)
-      comps = comps.filter((/** @type {any} */ c) => hasTagStyle(rootStyle, c.tagName));
+      comps = comps.filter((/** @type {ComponentEntry} */ c) => hasTagStyle(rootStyle, c.tagName));
     if (comps.length > 0) {
-      const compCards = comps.map((/** @type {any} */ comp) => {
+      const compCards = comps.map((/** @type {ComponentEntry} */ comp) => {
         /** @type {HTMLDivElement | null} */
         let previewEl = null;
         const cardTpl = html`
@@ -648,22 +716,22 @@ export function renderStylebookElementsIntoCanvas(
 /**
  * Click handler for stylebook canvas — selects elements via elToPath/view.stylebookElToTag mapping
  *
- * @param {any} panel
+ * @param {StylebookPanel} panel
  */
 function registerStylebookPanelEvents(panel) {
   const { canvas, overlayClk } = panel;
 
-  overlayClk.addEventListener("click", (/** @type {any} */ e) => {
+  overlayClk.addEventListener("click", (/** @type {MouseEvent} */ e) => {
     const els = canvas.querySelectorAll("*");
-    for (const el of els) el.style.pointerEvents = "auto";
+    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const elements = document.elementsFromPoint(e.clientX, e.clientY);
     overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
+    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
 
     for (const el of elements) {
       if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {any} */ (el);
+      let cur = /** @type {Element | null} */ (el);
       while (cur && cur !== canvas) {
         const tag = view.stylebookElToTag.get(cur);
         if (tag) {
@@ -679,18 +747,18 @@ function registerStylebookPanelEvents(panel) {
     renderStylebookOverlays();
   });
 
-  overlayClk.addEventListener("mousemove", (/** @type {any} */ e) => {
+  overlayClk.addEventListener("mousemove", (/** @type {MouseEvent} */ e) => {
     const els = canvas.querySelectorAll("*");
-    for (const el of els) el.style.pointerEvents = "auto";
+    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const elements = document.elementsFromPoint(e.clientX, e.clientY);
     overlayClk.style.display = "";
-    for (const el of els) el.style.pointerEvents = "none";
+    for (const el of els) /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
 
     let hoverTag = null;
     for (const el of elements) {
       if (!canvas.contains(el) || el === canvas) continue;
-      let cur = /** @type {any} */ (el);
+      let cur = /** @type {Element | null} */ (el);
       while (cur && cur !== canvas) {
         const tag = view.stylebookElToTag.get(cur);
         if (tag) {
@@ -710,9 +778,9 @@ function registerStylebookPanelEvents(panel) {
 }
 
 /** Find a stylebook element by tag in the canvas */
-function findStylebookEl(/** @type {any} */ canvasEl, /** @type {any} */ tag) {
+function findStylebookEl(/** @type {HTMLElement} */ canvasEl, /** @type {string} */ tag) {
   for (const child of canvasEl.querySelectorAll("*")) {
-    if (view.stylebookElToTag.get(child) === tag) return child;
+    if (view.stylebookElToTag.get(child) === tag) return /** @type {HTMLElement} */ (child);
   }
   return null;
 }