@jxsuite/studio 0.23.2 → 0.24.0

package/src/ui/{media-picker.js → media-picker.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Media Picker — combobox-style widget for selecting project media files.
  *
@@ -7,8 +8,8 @@
 
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { getPlatform } from "../platform.js";
-import { debouncedStyleCommit } from "../store.js";
+import { getPlatform } from "../platform";
+import { debouncedStyleCommit } from "../store";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
 
@@ -34,7 +35,7 @@ const MEDIA_EXTENSIONS = new Set([
 ]);
 
 /** @type {{ path: string; name: string; isImage: boolean }[]} */
-let mediaCache = [];
+let mediaCache: { path: string; name: string; isImage: boolean }[] = [];
 let mediaCacheLoaded = false;
 
 /**
@@ -44,7 +45,10 @@ let mediaCacheLoaded = false;
  * @param {ReturnType<typeof getPlatform>} platform
  * @returns {Promise<{ path: string; name: string; isImage: boolean }[]>}
  */
-async function collectMedia(dir, platform) {
+async function collectMedia(
+  dir: string,
+  platform: ReturnType<typeof getPlatform>,
+): Promise<{ path: string; name: string; isImage: boolean }[]> {
   /** @type {{ path: string; name: string; isImage: boolean }[]} */
   const results = [];
   try {
@@ -98,7 +102,7 @@ export function invalidateMediaCache() {
  * @param {(val: string) => void} onCommit — commit callback
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderMediaPicker(prop, value, onCommit) {
+export function renderMediaPicker(prop: string, value: string, onCommit: (val: string) => void) {
   // Kick off async load (won't block render)
   loadMediaCache();
 
@@ -127,8 +131,8 @@ export function renderMediaPicker(prop, value, onCommit) {
         size="s"
         placeholder="/image.jpg"
         .value=${live(currentValue)}
-        @input=${debouncedStyleCommit(`media:${prop}`, 400, (/** @type {Event} */ e) =>
-          onCommit(/** @type {HTMLInputElement} */ (e.target).value),
+        @input=${debouncedStyleCommit(`media:${prop}`, 400, (e: Event) =>
+          onCommit((e.target as HTMLInputElement).value),
         )}
         @focus=${() => loadMediaCache()}
       ></sp-textfield>
@@ -140,8 +144,8 @@ export function renderMediaPicker(prop, value, onCommit) {
               </sp-action-button>
               <sp-popover slot="click-content" class="media-picker-popover">
                 <sp-menu
-                  @change=${(/** @type {Event} */ e) => {
-                    onCommit(/** @type {HTMLInputElement} */ (e.target).value);
+                  @change=${(e: Event) => {
+                    onCommit((e.target as HTMLInputElement).value);
                   }}
                 >
                   ${options.map(

package/src/ui/{panel-resize.js → panel-resize.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Panel-resize.js — Draggable resize handles for left and right sidebars.
  *
@@ -5,7 +6,7 @@
  * localStorage so they survive page reloads.
  */
 
-import { view, applyPanelCollapse } from "../view.js";
+import { view, applyPanelCollapse } from "../view";
 
 const STORAGE_KEY = "jx-studio-panel-widths";
 const MIN_WIDTH = 160;
@@ -36,9 +37,13 @@ try {
  * @param {"left" | "right"} side
  * @param {number} defaultWidth
  */
-function setupHandle(handle, cssVar, side, defaultWidth) {
-  /** @type {{ startX: number; startWidth: number } | null} */
-  let drag = null;
+function setupHandle(
+  handle: HTMLElement,
+  cssVar: string,
+  side: "left" | "right",
+  defaultWidth: number,
+) {
+  let drag: { startX: number; startWidth: number } | null = null;
 
   handle.addEventListener("pointerdown", (e) => {
     e.preventDefault();

package/src/ui/{spectrum.js → spectrum.ts}

@@ -141,8 +141,8 @@ import { IconDownload } from "@spectrum-web-components/icons-workflow/src/elemen
 import { IconCheckmark } from "@spectrum-web-components/icons-workflow/src/elements/IconCheckmark.js";
 
 // Custom studio components
-import { JxValueSelector } from "./value-selector.js";
-import { JxColorPopover } from "./color-selector.js";
+import { JxValueSelector } from "./value-selector";
+import { JxColorPopover } from "./color-selector";
 
 // UI icons (used internally by Spectrum components like accordion, picker, combobox)
 import { IconChevron100 } from "@spectrum-web-components/icons-ui/src/elements/IconChevron100.js";
@@ -282,8 +282,8 @@ const components = [
   ["jx-color-popover", JxColorPopover],
 ];
 
-for (const [tag, ctor] of /** @type {[string, CustomElementConstructor][]} */ (components)) {
-  if (!customElements.get(tag)) defineElement(tag, /** @type {CustomElementConstructor} */ (ctor));
+for (const [tag, ctor] of components as [string, CustomElementConstructor][]) {
+  if (!customElements.get(tag)) defineElement(tag, ctor);
 }
 
 // Register theme fragments (these are also side-effect-only in the original modules)

package/src/ui/{unit-selector.js → unit-selector.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Unit-selector.js — Number + unit picker widget.
  *
@@ -8,7 +9,7 @@
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { classMap } from "lit-html/directives/class-map.js";
-import { debouncedStyleCommit } from "../store.js";
+import { debouncedStyleCommit } from "../store";
 
 export const UNIT_RE = /^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|deg)?$/;
 
@@ -23,18 +24,18 @@ export const UNIT_RE = /^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderUnitSelector(
-  /** @type {Record<string, unknown>} */ entry,
-  /** @type {string} */ prop,
-  /** @type {string | number | undefined} */ value,
-  /** @type {(val: string) => void} */ onChange,
-  /** @type {string} */ placeholder = "",
+  /** @type {Record<string, unknown>} */ entry: Record<string, unknown>,
+  /** @type {string} */ prop: string,
+  /** @type {string | number | undefined} */ value: string | number | undefined,
+  /** @type {(val: string) => void} */ onChange: (val: string) => void,
+  /** @type {string} */ placeholder: string = "",
 ) {
-  const units = /** @type {string[]} */ (entry.$units || []);
-  const keywords = /** @type {string[]} */ (entry.$keywords || []);
+  const units = (entry.$units || []) as string[];
+  const keywords = (entry.$keywords || []) as string[];
   const strVal = String(value ?? "");
   const match = strVal.match(UNIT_RE);
   const isKeyword = !match && strVal !== "" && keywords.includes(strVal);
-  const isNumericVal = (/** @type {string} */ v) => /^-?\d*\.?\d*$/.test(v);
+  const isNumericVal = (v: string) => /^-?\d*\.?\d*$/.test(v);
 
   const currentUnit = isKeyword ? units[0] || "" : match ? match[2] || "" : units[0] || "";
   let displayValue;
@@ -56,8 +57,8 @@ export function renderUnitSelector(
           size="s"
           placeholder=${placeholder || "0"}
           .value=${live(displayValue)}
-          @input=${debouncedStyleCommit(`nui:${prop}`, 400, (/** @type {Event} */ e) => {
-            const val = /** @type {HTMLInputElement} */ (e.target).value.trim();
+          @input=${debouncedStyleCommit(`nui:${prop}`, 400, (e: Event) => {
+            const val = (e.target as HTMLInputElement).value.trim();
             if (val === "") {
               onChange("");
               return;
@@ -75,8 +76,8 @@ export function renderUnitSelector(
                 <sp-popover style="min-width: var(--spectrum-component-width-900, 64px)">
                   <sp-menu
                     label="CSS unit"
-                    @change=${(/** @type {Event} */ e) => {
-                      const chosen = /** @type {HTMLInputElement} */ (e.target).value;
+                    @change=${(e: Event) => {
+                      const chosen = (e.target as HTMLInputElement).value;
                       if (keywords.includes(chosen)) {
                         onChange(chosen);
                       } else if (units.includes(chosen)) {
@@ -86,16 +87,12 @@ export function renderUnitSelector(
                       }
                     }}
                   >
-                    ${units.map(
-                      (/** @type {string} */ u) =>
-                        html`<sp-menu-item value=${u}>${u}</sp-menu-item>`,
-                    )}
+                    ${units.map((u: string) => html`<sp-menu-item value=${u}>${u}</sp-menu-item>`)}
                     ${keywords.length > 0 && units.length > 0
                       ? html`<sp-menu-divider></sp-menu-divider>`
                       : nothing}
                     ${keywords.map(
-                      (/** @type {string} */ kw) =>
-                        html`<sp-menu-item value=${kw}>${kw}</sp-menu-item>`,
+                      (kw: string) => html`<sp-menu-item value=${kw}>${kw}</sp-menu-item>`,
                     )}
                   </sp-menu>
                 </sp-popover>

package/src/ui/{value-selector.js → value-selector.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Value Selector — Dual-mode styled combobox custom element.
  *
@@ -18,7 +19,7 @@
 import { LitElement, html } from "lit";
 import { live } from "lit/directives/live.js";
 
-/** @typedef {{ value: string; label: string; style?: string } | { divider: true }} ComboOption */
+type ComboOption = { value: string; label: string; style?: string } | { divider: true };
 
 export class JxValueSelector extends LitElement {
   static properties = {
@@ -28,13 +29,18 @@ export class JxValueSelector extends LitElement {
     options: { attribute: false },
   };
 
+  declare value: string;
+  declare placeholder: string;
+  declare size: string;
+  declare options: ComboOption[];
+  declare _menuId: string;
+
   constructor() {
     super();
-    /** @type {string} */ this.value = "";
-    /** @type {string} */ this.placeholder = "";
-    /** @type {string} */ this.size = "s";
-    /** @type {ComboOption[]} */ this.options = [];
-    /** @type {string} */
+    this.value = "";
+    this.placeholder = "";
+    this.size = "s";
+    this.options = [];
     this._menuId = "jx-combo-" + Math.random().toString(36).slice(2, 8);
   }
 
@@ -47,26 +53,20 @@ export class JxValueSelector extends LitElement {
   get _isPicker() {
     return (
       !!this.value &&
-      this.options.some(
-        (/** @type {ComboOption} */ o) => !("divider" in o) && o.value === this.value,
-      )
+      this.options.some((o: ComboOption) => !("divider" in o) && o.value === this.value)
     );
   }
 
   /** Get the selected option's style string for the picker button preview */
   get _selectedStyle() {
     if (!this._isPicker) return "";
-    const opt = this.options.find(
-      (/** @type {ComboOption} */ o) => !("divider" in o) && o.value === this.value,
-    );
-    return (
-      /** @type {{ value: string; label: string; style?: string } | undefined} */ (opt)?.style || ""
-    );
+    const opt = this.options.find((o: ComboOption) => !("divider" in o) && o.value === this.value);
+    return (opt as { value: string; label: string; style?: string } | undefined)?.style || "";
   }
 
   /** Render menu items from options array */
   _renderMenuItems() {
-    return this.options.map((/** @type {ComboOption} */ opt) =>
+    return this.options.map((opt: ComboOption) =>
       "divider" in opt
         ? html`<sp-menu-divider></sp-menu-divider>`
         : html`<sp-menu-item value=${opt.value} style=${opt.style || ""}
@@ -76,33 +76,33 @@ export class JxValueSelector extends LitElement {
   }
 
   /** Picker mode: sp-picker @change handler */
-  _handlePickerChange(/** @type {Event} */ e) {
+  _handlePickerChange(e: Event) {
     e.stopPropagation();
-    this.value = /** @type {HTMLInputElement} */ (e.target).value;
+    this.value = (e.target as HTMLInputElement).value;
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
 
   /** Combobox mode: sp-menu @change handler */
-  _handleMenuChange(/** @type {Event} */ e) {
+  _handleMenuChange(e: Event) {
     e.stopPropagation();
-    if (!(/** @type {HTMLInputElement} */ (e.target).value)) return;
-    this.value = /** @type {HTMLInputElement} */ (e.target).value;
+    if (!(e.target as HTMLInputElement).value) return;
+    this.value = (e.target as HTMLInputElement).value;
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
 
   /** Combobox mode: textfield @input handler */
-  _handleInput(/** @type {Event} */ e) {
+  _handleInput(e: Event) {
     e.stopPropagation();
-    this.value = /** @type {HTMLInputElement} */ (e.target).value;
+    this.value = (e.target as HTMLInputElement).value;
     this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
   }
 
   /** Set popover min-width to match trigger width (replicates sp-picker behavior) */
-  _setPopoverWidth(/** @type {Event} */ e) {
+  _setPopoverWidth(e: Event) {
     const group = this.querySelector(".jx-combobox-group");
-    const w = group ? /** @type {HTMLElement} */ (group).offsetWidth : 0;
-    const popover = /** @type {HTMLElement} */ (e.target).querySelector("sp-popover");
-    if (popover && w) /** @type {HTMLElement} */ (popover).style.minWidth = `${w}px`;
+    const w = group ? (group as HTMLElement).offsetWidth : 0;
+    const popover = (e.target as HTMLElement).querySelector("sp-popover");
+    if (popover && w) (popover as HTMLElement).style.minWidth = `${w}px`;
   }
 
   render() {
@@ -127,7 +127,7 @@ export class JxValueSelector extends LitElement {
           placeholder=${this.placeholder}
           .value=${live(this.value || "")}
           @input=${this._handleInput}
-          @click=${(/** @type {Event} */ e) => e.stopPropagation()}
+          @click=${(e: Event) => e.stopPropagation()}
         ></sp-textfield>
         <sp-picker-button size=${this.size}></sp-picker-button>
         <sp-overlay

package/src/ui/{widgets.js → widgets.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Widgets.js — Widget type dispatcher and simple widget renderers.
  *
@@ -13,11 +14,11 @@
 import { html } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { debouncedStyleCommit } from "../store.js";
-import { renderColorSelector } from "./color-selector.js";
-import { renderUnitSelector } from "./unit-selector.js";
-import { renderButtonGroup } from "./button-group.js";
-import { renderMediaPicker } from "./media-picker.js";
+import { debouncedStyleCommit } from "../store";
+import { renderColorSelector } from "./color-selector";
+import { renderUnitSelector } from "./unit-selector";
+import { renderButtonGroup } from "./button-group";
+import { renderMediaPicker } from "./media-picker";
 
 /**
  * Render a plain text input widget.
@@ -28,14 +29,19 @@ import { renderMediaPicker } from "./media-picker.js";
  * @param {string} [placeholder]
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderTextInput(prop, value, onChange, placeholder = "") {
+export function renderTextInput(
+  prop: string,
+  value: string | number | undefined,
+  onChange: (val: string) => void,
+  placeholder: string = "",
+) {
   return html`
     <sp-textfield
       size="s"
       placeholder=${placeholder}
       .value=${live(String(value ?? ""))}
-      @input=${debouncedStyleCommit(`text:${prop}`, 400, (/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).value),
+      @input=${debouncedStyleCommit(`text:${prop}`, 400, (e: Event) =>
+        onChange((e.target as HTMLInputElement).value),
       )}
     ></sp-textfield>
   `;
@@ -51,9 +57,15 @@ export function renderTextInput(prop, value, onChange, placeholder = "") {
  * @param {string} [placeholder]
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderNumberInput(entry, prop, value, onChange, placeholder = "") {
-  const minimum = /** @type {number | undefined} */ (entry.minimum);
-  const maximum = /** @type {number | undefined} */ (entry.maximum);
+export function renderNumberInput(
+  entry: Record<string, unknown>,
+  prop: string,
+  value: string | number | undefined,
+  onChange: (val: string | number) => void,
+  placeholder: string = "",
+) {
+  const minimum = entry.minimum as number | undefined;
+  const maximum = entry.maximum as number | undefined;
   return html`
     <sp-number-field
       size="s"
@@ -63,8 +75,8 @@ export function renderNumberInput(entry, prop, value, onChange, placeholder = ""
       min=${ifDefined(minimum)}
       max=${ifDefined(maximum)}
       step=${ifDefined(maximum !== undefined && maximum <= 1 ? 0.1 : undefined)}
-      @change=${debouncedStyleCommit(`num:${prop}`, 400, (/** @type {Event} */ e) => {
-        const v = /** @type {HTMLInputElement & { value: number | undefined }} */ (e.target).value;
+      @change=${debouncedStyleCommit(`num:${prop}`, 400, (e: Event) => {
+        const v = (e.target as HTMLInputElement & { value: number | undefined }).value;
         if (v === undefined || isNaN(v)) onChange("");
         else onChange(Number(v));
       })}
@@ -80,10 +92,45 @@ export function renderNumberInput(entry, prop, value, onChange, placeholder = ""
  * @param {string} prop — property key
  * @param {string | number | undefined} value — current value
  * @param {(val: string | number) => void} onCommit — commit callback
- * @param {{ placeholder?: string; renderSelect?: Function; renderCombobox?: Function }} [opts]
+ * @param {{
+ *   placeholder?: string;
+ *   renderSelect?: (
+ *     entry: Record<string, unknown>,
+ *     prop: string,
+ *     value: string | number | undefined,
+ *     onCommit: (val: string | number) => void,
+ *   ) => import("lit-html").TemplateResult;
+ *   renderCombobox?: (
+ *     entry: Record<string, unknown>,
+ *     prop: string,
+ *     value: string | number | undefined,
+ *     onCommit: (val: string | number) => void,
+ *   ) => import("lit-html").TemplateResult;
+ * }} [opts]
  * @returns {import("lit-html").TemplateResult}
  */
-export function widgetForType(type, entry, prop, value, onCommit, opts = {}) {
+export function widgetForType(
+  type: string,
+  entry: Record<string, unknown>,
+  prop: string,
+  value: string | number | undefined,
+  onCommit: (val: string | number) => void,
+  opts: {
+    placeholder?: string;
+    renderSelect?: (
+      entry: Record<string, unknown>,
+      prop: string,
+      value: any,
+      onCommit: (val: string | number) => void,
+    ) => import("lit-html").TemplateResult;
+    renderCombobox?: (
+      entry: Record<string, unknown>,
+      prop: string,
+      value: any,
+      onCommit: (val: string | number) => void,
+    ) => import("lit-html").TemplateResult;
+  } = {},
+) {
   switch (type) {
     case "button-group":
       return renderButtonGroup(entry, prop, value, onCommit);

package/src/utils/{canvas-media.js → canvas-media.ts}

@@ -1,5 +1,8 @@
+/// <reference lib="dom" />
 /** Canvas media/breakpoint utilities — pure functions extracted for testability. */
 
+import type { JxStyle } from "@jxsuite/schema/types";
+
 /**
  * Classify $media entries into size breakpoints (get a canvas each) and feature queries (rendered
  * as toolbar toggles).
@@ -11,7 +14,7 @@
  *   baseWidth: number;
  * }}
  */
-export function parseMediaEntries(mediaDef) {
+export function parseMediaEntries(mediaDef: Record<string, string> | null | undefined) {
   if (!mediaDef) return { sizeBreakpoints: [], featureQueries: [], baseWidth: 320 };
   const sizes = [],
     features = [];
@@ -39,8 +42,11 @@ export function parseMediaEntries(mediaDef) {
  * @param {number} canvasWidth
  * @returns {Set<string>}
  */
-export function activeBreakpointsForWidth(sizeBreakpoints, canvasWidth) {
-  const active = new Set();
+export function activeBreakpointsForWidth(
+  sizeBreakpoints: { name: string; width: number; type: string }[],
+  canvasWidth: number,
+) {
+  const active = new Set<string>();
   for (const bp of sizeBreakpoints) {
     if (bp.type === "min" && canvasWidth >= bp.width) active.add(bp.name);
     else if (bp.type === "max" && canvasWidth <= bp.width) active.add(bp.name);
@@ -57,18 +63,23 @@ export function activeBreakpointsForWidth(sizeBreakpoints, canvasWidth) {
  * @param {Set<string>} activeBreakpoints
  * @param {Record<string, boolean>} featureToggles
  */
-export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles) {
+export function applyCanvasStyle(
+  el: HTMLElement,
+  styleDef: JxStyle | null | undefined,
+  activeBreakpoints: Set<string>,
+  featureToggles: Record<string, boolean>,
+) {
   if (!styleDef || typeof styleDef !== "object") return;
   for (const [prop, val] of Object.entries(styleDef)) {
     if (typeof val === "string" || typeof val === "number") {
       try {
         if (prop.startsWith("--")) el.style.setProperty(prop, String(val));
-        else /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (el.style))[prop] = val;
+        else (el.style as unknown as Record<string, unknown>)[prop] = val;
       } catch {}
     }
   }
   for (const [key, val] of Object.entries(styleDef)) {
-    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) || featureToggles[mediaName]) {
@@ -76,8 +87,7 @@ export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles
         if (typeof v === "string" || typeof v === "number") {
           try {
             if (prop.startsWith("--")) el.style.setProperty(prop, String(v));
-            else
-              /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (el.style))[prop] = v;
+            else (el.style as unknown as Record<string, unknown>)[prop] = v;
           } catch {}
         }
       }
@@ -95,9 +105,11 @@ export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles
  * @param {Set<string>} activeBreakpoints
  * @returns {Map<string, Map<string, string>>}
  */
-export function collectMediaOverrides(styleSheets, activeBreakpoints) {
-  /** @type {Map<string, Map<string, string>>} */
-  const overrides = new Map();
+export function collectMediaOverrides(
+  styleSheets: Iterable<CSSStyleSheet>,
+  activeBreakpoints: Set<string>,
+) {
+  const overrides: Map<string, Map<string, string>> = new Map();
   if (!activeBreakpoints.size) return overrides;
 
   for (const sheet of styleSheets) {
@@ -121,7 +133,7 @@ export function collectMediaOverrides(styleSheets, activeBreakpoints) {
         if (!jxMatch) continue;
         const uid = jxMatch[1];
         if (!overrides.has(uid)) overrides.set(uid, new Map());
-        const props = /** @type {Map<string, string>} */ (overrides.get(uid));
+        const props = overrides.get(uid) as Map<string, string>;
         for (let i = 0; i < mediaRule.style.length; i++) {
           const prop = mediaRule.style[i];
           props.set(prop, mediaRule.style.getPropertyValue(prop));
@@ -138,13 +150,16 @@ export function collectMediaOverrides(styleSheets, activeBreakpoints) {
  * @param {Element} canvasEl
  * @param {Map<string, Map<string, string>>} overrides
  */
-export function applyOverridesToCanvas(canvasEl, overrides) {
+export function applyOverridesToCanvas(
+  canvasEl: Element,
+  overrides: Map<string, Map<string, string>>,
+) {
   for (const [uid, props] of overrides) {
     const els = canvasEl.querySelectorAll(`[data-jx="${uid}"]`);
     for (const el of els) {
       for (const [prop, val] of props) {
         try {
-          /** @type {HTMLElement} */ (el).style.setProperty(prop, val);
+          (el as HTMLElement).style.setProperty(prop, val);
         } catch {}
       }
     }