@jxsuite/studio 0.19.0 → 0.20.0

package/src/tabs/transact.js

@@ -6,8 +6,6 @@ import { getNodeAtPath, parentElementPath, childIndex, pathsEqual, isAncestor }
  *
  * @typedef {import("../state.js").JxPath} JxPath
  *
- * @typedef {import("../state.js").JxNode} JxNode
- *
  * @typedef {string | number | boolean | object | null | undefined} JsonValue
  */
 
@@ -19,11 +17,12 @@ const HISTORY_LIMIT = 100;
  * Apply a document mutation transactionally: push to history and mark dirty. The mutationFn
  * receives the tab and should mutate tab.doc.document in place.
  *
- * @param {Tab} tab
+ * @param {Tab | null} tab
  * @param {(tab: Tab) => void} mutationFn
  * @param {{ skipHistory?: boolean }} [opts]
  */
 export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
+  if (!tab) return;
   mutationFn(tab);
 
   // Replace the document root reference so effects tracking tab.doc.document re-trigger.
@@ -49,8 +48,8 @@ export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
 /**
  * Convenience: transact with a mutation fn that receives the document directly.
  *
- * @param {Tab} tab
- * @param {(doc: JxNode) => void} fn
+ * @param {Tab | null} tab
+ * @param {(doc: JxMutableNode) => void} fn
  * @param {{ skipHistory?: boolean }} [opts]
  */
 export function transact(tab, fn, opts) {
@@ -85,7 +84,7 @@ export function redo(tab) {
  * @param {Tab} tab
  * @param {JxPath} parentPath
  * @param {number} index
- * @param {JxNode} nodeDef
+ * @param {JxMutableNode} nodeDef
  */
 export function mutateInsertNode(tab, parentPath, index, nodeDef) {
   const parent = getNodeAtPath(tab.doc.document, parentPath);
@@ -101,7 +100,10 @@ export function mutateRemoveNode(tab, path) {
   if (!path || path.length < 2) return;
   const elemPath = /** @type {JxPath} */ (parentElementPath(path));
   const idx = /** @type {number} */ (childIndex(path));
-  getNodeAtPath(tab.doc.document, elemPath).children.splice(idx, 1);
+  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
+    idx,
+    1,
+  );
   if (tab.session.selection && isAncestor(path, tab.session.selection)) {
     tab.session.selection = null;
   }
@@ -118,7 +120,11 @@ export function mutateDuplicateNode(tab, path) {
   const elemPath = /** @type {JxPath} */ (parentElementPath(path));
   const idx = /** @type {number} */ (childIndex(path));
   const clone = structuredClone(toRaw(node));
-  getNodeAtPath(tab.doc.document, elemPath).children.splice(idx + 1, 0, clone);
+  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
+    idx + 1,
+    0,
+    clone,
+  );
   tab.session.selection = [...elemPath, "children", idx + 1];
 }
 
@@ -134,7 +140,11 @@ export function mutateWrapNode(tab, path, wrapperTag = "div") {
   const elemPath = /** @type {JxPath} */ (parentElementPath(path));
   const idx = /** @type {number} */ (childIndex(path));
   const wrapper = { tagName: wrapperTag, children: [structuredClone(toRaw(node))] };
-  getNodeAtPath(tab.doc.document, elemPath).children.splice(idx, 1, wrapper);
+  /** @type {JxMutableNode[]} */ (getNodeAtPath(tab.doc.document, elemPath).children).splice(
+    idx,
+    1,
+    wrapper,
+  );
   tab.session.selection = [...elemPath, "children", idx];
 }
 
@@ -149,7 +159,7 @@ export function mutateMoveNode(tab, fromPath, toParentPath, toIndex) {
   const fromParentPath = /** @type {JxPath} */ (parentElementPath(fromPath));
   const fromIdx = /** @type {number} */ (childIndex(fromPath));
   const fromParent = getNodeAtPath(doc, fromParentPath);
-  const [node] = fromParent.children.splice(fromIdx, 1);
+  const [node] = /** @type {JxMutableNode[]} */ (fromParent.children).splice(fromIdx, 1);
   const toParent = getNodeAtPath(doc, toParentPath);
   if (!toParent.children) toParent.children = [];
   let adjustedIndex = toIndex;
@@ -351,7 +361,7 @@ export function mutateUpdateMediaNestedStylePath(tab, path, mediaName, stylePath
 /**
  * @param {Tab} tab
  * @param {JxPath} path
- * @param {Record<string, any> | undefined} style
+ * @param {Record<string, string | undefined> | undefined} style
  */
 export function mutateReplaceStyle(tab, path, style) {
   const node = getNodeAtPath(tab.doc.document, path);
@@ -388,7 +398,7 @@ export function mutateRemoveDef(tab, name) {
 /**
  * @param {Tab} tab
  * @param {string} name
- * @param {Record<string, any>} updates
+ * @param {Record<string, JsonValue>} updates
  */
 export function mutateUpdateDef(tab, name, updates) {
   const doc = tab.doc.document;
@@ -452,7 +462,7 @@ export function mutateUpdateProp(tab, path, propName, value) {
  * @param {Tab} tab
  * @param {JxPath} path
  * @param {string} caseName
- * @param {JxNode} [caseDef]
+ * @param {JxMutableNode} [caseDef]
  */
 export function mutateAddSwitchCase(tab, path, caseName, caseDef) {
   const node = getNodeAtPath(tab.doc.document, path);

package/src/ui/button-group.js

@@ -13,35 +13,37 @@ import icons from "./icons.js";
 /**
  * Render a button group widget with optional overflow menu.
  *
- * @param {any} entry — css-meta entry with $buttonValues, enum, $icons
+ * @param {Record<string, unknown>} entry — css-meta entry with $buttonValues, enum, $icons
  * @param {string} prop — property key (for menu ID namespace)
- * @param {any} value — current value
+ * @param {string | number | undefined} value — current value
  * @param {(val: string) => void} onChange — commit callback
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderButtonGroup(
-  /** @type {any} */ entry,
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
+  /** @type {Record<string, unknown>} */ entry,
+  /** @type {string} */ prop,
+  /** @type {string | number | undefined} */ value,
+  /** @type {(val: string) => void} */ onChange,
 ) {
-  const values = entry.$buttonValues || entry.enum || [];
-  /** @type {Record<string, any>} */
-  const iconMap = entry.$icons || {};
+  const values = /** @type {string[]} */ (entry.$buttonValues || entry.enum || []);
+  /** @type {Record<string, string>} */
+  const iconMap = /** @type {Record<string, string>} */ (entry.$icons || {});
+  const buttonValues = /** @type {string[] | undefined} */ (entry.$buttonValues);
+  const enumValues = /** @type {string[] | undefined} */ (entry.enum);
   const extra =
-    entry.$buttonValues && entry.enum && entry.enum.length > entry.$buttonValues.length
-      ? entry.enum.filter((/** @type {any} */ v) => !entry.$buttonValues.includes(v))
+    buttonValues && enumValues && enumValues.length > buttonValues.length
+      ? enumValues.filter((/** @type {string} */ v) => !buttonValues.includes(v))
       : [];
 
   const menuId = `style-btngrp-${prop}`;
   const hasExtra = extra.length > 0;
-  const extraSelected = hasExtra && extra.includes(value);
+  const extraSelected = hasExtra && extra.includes(/** @type {string} */ (value));
 
   return html`
     <div class=${classMap({ "button-group-combo": true, "has-overflow": hasExtra })}>
       <sp-action-group size="s" compact>
         ${values.map(
-          (/** @type {any} */ v) => html`
+          (/** @type {string} */ v) => html`
             <sp-action-button
               size="s"
               value=${v}
@@ -49,12 +51,9 @@ export function renderButtonGroup(
               ?selected=${v === value}
               @click=${() => onChange(v === value ? "" : v)}
             >
-              ${
-                /** @type {any} */ (iconMap)[v] &&
-                /** @type {any} */ (icons)[/** @type {any} */ (iconMap)[v]]
-                  ? /** @type {any} */ (icons)[/** @type {any} */ (iconMap)[v]]
-                  : abbreviateValue(v)
-              }
+              ${iconMap[v] && /** @type {Record<string, unknown>} */ (icons)[iconMap[v]]
+                ? /** @type {Record<string, unknown>} */ (icons)[iconMap[v]]
+                : abbreviateValue(v)}
             </sp-action-button>
           `,
         )}
@@ -69,15 +68,16 @@ export function renderButtonGroup(
             <sp-overlay trigger="${menuId}@click" placement="bottom-end" type="auto">
               <sp-popover>
                 <sp-menu
-                  @change=${(/** @type {any} */ e) => {
-                    if (e.target.value) onChange(e.target.value);
+                  @change=${(/** @type {Event} */ e) => {
+                    if (/** @type {HTMLInputElement} */ (e.target).value)
+                      onChange(/** @type {HTMLInputElement} */ (e.target).value);
                   }}
                 >
                   <sp-menu-item value="__none__">—</sp-menu-item>
-                  ${extra.map((/** @type {any} */ v) => {
+                  ${extra.map((/** @type {string} */ v) => {
                     const label = v.includes("-")
                       ? kebabToLabel(v)
-                      : v.replace(/^./, (/** @type {any} */ c) => c.toUpperCase());
+                      : v.replace(/^./, (/** @type {string} */ c) => c.toUpperCase());
                     return html`<sp-menu-item value=${v} ?selected=${v === value}
                       >${label}</sp-menu-item
                     >`;

package/src/ui/color-selector.js

@@ -42,19 +42,20 @@ function varToLabel(/** @type {string} */ name) {
 }
 
 /** Resolve a color value for display — if it's a var() reference, look up the actual color. */
-function resolveColorForDisplay(/** @type {any} */ val) {
+function resolveColorForDisplay(/** @type {string | number | undefined} */ val) {
   if (!val) return "transparent";
-  const m = val.match(/^var\((--[^)]+)\)$/);
+  const s = String(val);
+  const m = s.match(/^var\((--[^)]+)\)$/);
   if (m) {
     const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
     const resolved = style?.[m[1]];
     if (typeof resolved === "string") return resolved;
     return "transparent";
   }
-  return val;
+  return s;
 }
 
-function safeColor(/** @type {any} */ val) {
+function safeColor(/** @type {string | number | undefined} */ val) {
   if (!val) return "transparent";
   return resolveColorForDisplay(val);
 }
@@ -69,7 +70,7 @@ function normalizeHex(/** @type {string} */ c) {
 /**
  * Check if a value is a var() reference that matches a defined color variable.
  *
- * @param {any} value
+ * @param {string | number | undefined} value
  * @param {{ name: string; value: string }[]} colorVars
  */
 function matchesColorVar(value, colorVars) {
@@ -102,7 +103,7 @@ export class JxColorPopover extends LitElement {
     return this;
   }
 
-  /** @param {Map<string, any>} changed */
+  /** @param {Map<string, unknown>} changed */
   willUpdate(changed) {
     if (changed.has("color")) {
       const raw = resolveColorForDisplay(this.color);
@@ -116,29 +117,33 @@ export class JxColorPopover extends LitElement {
     }
   }
 
-  _handleArea(/** @type {any} */ e) {
-    const color = normalizeHex(String(e.target.color));
+  _handleArea(/** @type {Event} */ e) {
+    const color = normalizeHex(
+      String(/** @type {HTMLElement & { color: string }} */ (e.target).color),
+    );
     this.displayColor = color;
     this.color = color;
     this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
   }
 
-  _handleSlider(/** @type {any} */ e) {
-    const color = normalizeHex(String(e.target.color));
+  _handleSlider(/** @type {Event} */ e) {
+    const color = normalizeHex(
+      String(/** @type {HTMLElement & { color: string }} */ (e.target).color),
+    );
     this.displayColor = color;
     this.color = color;
     this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
   }
 
-  _handleText(/** @type {any} */ e) {
-    const val = e.target.value.trim();
+  _handleText(/** @type {Event} */ e) {
+    const val = /** @type {HTMLInputElement} */ (e.target).value.trim();
     if (!val) return;
     this.displayColor = val;
     this.color = val;
     this.dispatchEvent(new CustomEvent("color-change", { detail: val, bubbles: true }));
   }
 
-  _handleSwatch(/** @type {any} */ e, /** @type {string} */ varName) {
+  _handleSwatch(/** @type {Event} */ e, /** @type {string} */ varName) {
     e.stopPropagation();
     const varRef = `var(${varName})`;
     this.color = varRef;
@@ -176,7 +181,7 @@ export class JxColorPopover extends LitElement {
                       color=${cv.value}
                       .value=${cv.name}
                       title=${cv.name}
-                      @click=${(/** @type {any} */ e) => this._handleSwatch(e, cv.name)}
+                      @click=${(/** @type {Event} */ e) => this._handleSwatch(e, cv.name)}
                     ></sp-swatch>
                   `,
                 )}
@@ -198,14 +203,14 @@ export class JxColorPopover extends LitElement {
  * title-cased label with swatch (e.g. "Primary Blue").
  *
  * @param {string} prop — property key (for debounce namespace)
- * @param {any} value — current color value
+ * @param {string | number | undefined} value — current color value
  * @param {(color: string) => void} onChange — commit callback
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderColorSelector(
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
+  /** @type {string} */ prop,
+  /** @type {string | number | undefined} */ value,
+  /** @type {(color: string) => void} */ onChange,
 ) {
   const colorVars = getColorVars();
   const matchedVar = matchesColorVar(value, colorVars);
@@ -237,9 +242,9 @@ export function renderColorSelector(
           size="s"
           style="flex:1; min-width:0"
           .value=${`var(${matchedVar.name})`}
-          @change=${(/** @type {any} */ e) => {
+          @change=${(/** @type {Event} */ e) => {
             e.stopPropagation();
-            onChange(e.target.value);
+            onChange(/** @type {HTMLInputElement} */ (e.target).value);
           }}
         >
           ${colorVars.map(
@@ -275,8 +280,8 @@ export function renderColorSelector(
         style="flex:1; min-width:0"
         .value=${live(value || "")}
         @click=${(/** @type {Event} */ e) => e.stopPropagation()}
-        @input=${debouncedStyleCommit(`color:${prop}`, 400, (/** @type {any} */ e) => {
-          onChange(e.target.value.trim());
+        @input=${debouncedStyleCommit(`color:${prop}`, 400, (/** @type {Event} */ e) => {
+          onChange(/** @type {HTMLInputElement} */ (e.target).value.trim());
         })}
       ></sp-textfield>
       <sp-overlay trigger="${triggerId}@click" placement="bottom-start" type="auto">

package/src/ui/field-row.js

@@ -16,11 +16,11 @@ import { classMap } from "lit-html/directives/class-map.js";
  *   label: string;
  *   hasValue: boolean;
  *   onClear?: () => void;
- *   widget: any;
+ *   widget: unknown;
  *   span?: number;
  *   warning?: boolean;
  * }} opts
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderFieldRow({ prop, label, hasValue, onClear, widget, span, warning }) {
   return html`
@@ -34,7 +34,7 @@ export function renderFieldRow({ prop, label, hasValue, onClear, widget, span, w
           ? html`<span
               class="set-dot"
               title="Clear ${prop}"
-              @click=${(/** @type {any} */ e) => {
+              @click=${(/** @type {Event} */ e) => {
                 e.stopPropagation();
                 onClear();
               }}

package/src/ui/icons.js

@@ -5,7 +5,7 @@
 import { html } from "lit";
 
 // Helper for custom filled-rect icons (alignment/justify diagrams) where no Spectrum match exists
-const _R = (/** @type {any} */ d) =>
+const _R = (/** @type {import("lit").TemplateResult} */ d) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -18,7 +18,7 @@ const _R = (/** @type {any} */ d) =>
   </svg>`;
 
 // Helper for custom stroke icons
-const _S = (/** @type {any} */ d) =>
+const _S = (/** @type {import("lit").TemplateResult} */ d) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"

package/src/ui/media-picker.js

@@ -94,9 +94,9 @@ export function invalidateMediaCache() {
  * Render the media picker widget for src-type attributes.
  *
  * @param {string} prop — attribute name (e.g. "src")
- * @param {any} value — current attribute value
- * @param {(val: any) => void} onCommit — commit callback
- * @returns {any}
+ * @param {string} value — current attribute value
+ * @param {(val: string) => void} onCommit — commit callback
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderMediaPicker(prop, value, onCommit) {
   // Kick off async load (won't block render)
@@ -127,8 +127,8 @@ export function renderMediaPicker(prop, value, onCommit) {
         size="s"
         placeholder="/image.jpg"
         .value=${live(currentValue)}
-        @input=${debouncedStyleCommit(`media:${prop}`, 400, (/** @type {any} */ e) =>
-          onCommit(e.target.value),
+        @input=${debouncedStyleCommit(`media:${prop}`, 400, (/** @type {Event} */ e) =>
+          onCommit(/** @type {HTMLInputElement} */ (e.target).value),
         )}
         @focus=${() => loadMediaCache()}
       ></sp-textfield>
@@ -140,8 +140,8 @@ export function renderMediaPicker(prop, value, onCommit) {
               </sp-action-button>
               <sp-popover slot="click-content" class="media-picker-popover">
                 <sp-menu
-                  @change=${(/** @type {any} */ e) => {
-                    onCommit(e.target.value);
+                  @change=${(/** @type {Event} */ e) => {
+                    onCommit(/** @type {HTMLInputElement} */ (e.target).value);
                   }}
                 >
                   ${options.map(

package/src/ui/spectrum.js

@@ -90,6 +90,7 @@ import { IconSettings } from "@spectrum-web-components/icons-workflow/src/elemen
 import { IconBack } from "@spectrum-web-components/icons-workflow/src/elements/IconBack.js";
 import { IconProperties } from "@spectrum-web-components/icons-workflow/src/elements/IconProperties.js";
 import { IconEvent } from "@spectrum-web-components/icons-workflow/src/elements/IconEvent.js";
+import { IconMore } from "@spectrum-web-components/icons-workflow/src/elements/IconMore.js";
 
 // Layout / alignment icons
 import { IconArrowRight } from "@spectrum-web-components/icons-workflow/src/elements/IconArrowRight.js";
@@ -122,6 +123,7 @@ import { IconBox } from "@spectrum-web-components/icons-workflow/src/elements/Ic
 import { IconVisibility } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibility.js";
 import { IconVisibilityOff } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibilityOff.js";
 import { IconArtboard } from "@spectrum-web-components/icons-workflow/src/elements/IconArtboard.js";
+import { IconChat } from "@spectrum-web-components/icons-workflow/src/elements/IconChat.js";
 import { IconViewList } from "@spectrum-web-components/icons-workflow/src/elements/IconViewList.js";
 import { IconRailRightClose } from "@spectrum-web-components/icons-workflow/src/elements/IconRailRightClose.js";
 import { IconRailRightOpen } from "@spectrum-web-components/icons-workflow/src/elements/IconRailRightOpen.js";
@@ -228,6 +230,7 @@ const components = [
   ["sp-icon-back", IconBack],
   ["sp-icon-properties", IconProperties],
   ["sp-icon-event", IconEvent],
+  ["sp-icon-more", IconMore],
   ["sp-icon-arrow-right", IconArrowRight],
   ["sp-icon-arrow-left", IconArrowLeft],
   ["sp-icon-arrow-down", IconArrowDown],
@@ -263,6 +266,7 @@ const components = [
   ["sp-icon-visibility", IconVisibility],
   ["sp-icon-visibility-off", IconVisibilityOff],
   ["sp-icon-artboard", IconArtboard],
+  ["sp-icon-chat", IconChat],
   ["sp-icon-view-list", IconViewList],
   ["sp-icon-text-bold", IconTextBold],
   ["sp-icon-text-italic", IconTextItalic],
@@ -279,7 +283,7 @@ const components = [
 ];
 
 for (const [tag, ctor] of /** @type {[string, CustomElementConstructor][]} */ (components)) {
-  if (!customElements.get(tag)) defineElement(tag, /** @type {any} */ (ctor));
+  if (!customElements.get(tag)) defineElement(tag, /** @type {CustomElementConstructor} */ (ctor));
 }
 
 // Register theme fragments (these are also side-effect-only in the original modules)

package/src/ui/unit-selector.js

@@ -15,25 +15,26 @@ export const UNIT_RE = /^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|
 /**
  * Render a number + unit selector widget.
  *
- * @param {any} entry — css-meta entry with $units and $keywords arrays
+ * @param {Record<string, unknown>} entry — css-meta entry with $units and $keywords arrays
  * @param {string} prop — property key (for debounce namespace)
- * @param {any} value — current value (e.g. "12px", "auto", "")
+ * @param {string | number | undefined} value — current value (e.g. "12px", "auto", "")
  * @param {(val: string) => void} onChange — commit callback
- * @returns {any}
+ * @param {string} [placeholder]
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderUnitSelector(
-  /** @type {any} */ entry,
-  /** @type {any} */ prop,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
+  /** @type {Record<string, unknown>} */ entry,
+  /** @type {string} */ prop,
+  /** @type {string | number | undefined} */ value,
+  /** @type {(val: string) => void} */ onChange,
   /** @type {string} */ placeholder = "",
 ) {
-  const units = entry.$units || [];
-  const keywords = entry.$keywords || [];
+  const units = /** @type {string[]} */ (entry.$units || []);
+  const keywords = /** @type {string[]} */ (entry.$keywords || []);
   const strVal = String(value ?? "");
   const match = strVal.match(UNIT_RE);
   const isKeyword = !match && strVal !== "" && keywords.includes(strVal);
-  const isNumericVal = (/** @type {any} */ v) => /^-?\d*\.?\d*$/.test(v);
+  const isNumericVal = (/** @type {string} */ v) => /^-?\d*\.?\d*$/.test(v);
 
   const currentUnit = isKeyword ? units[0] || "" : match ? match[2] || "" : units[0] || "";
   let displayValue;
@@ -55,8 +56,8 @@ export function renderUnitSelector(
           size="s"
           placeholder=${placeholder || "0"}
           .value=${live(displayValue)}
-          @input=${debouncedStyleCommit(`nui:${prop}`, 400, (/** @type {any} */ e) => {
-            const val = (e.target.value ?? "").trim();
+          @input=${debouncedStyleCommit(`nui:${prop}`, 400, (/** @type {Event} */ e) => {
+            const val = /** @type {HTMLInputElement} */ (e.target).value.trim();
             if (val === "") {
               onChange("");
               return;
@@ -74,8 +75,8 @@ export function renderUnitSelector(
                 <sp-popover style="min-width: var(--spectrum-component-width-900, 64px)">
                   <sp-menu
                     label="CSS unit"
-                    @change=${(/** @type {any} */ e) => {
-                      const chosen = e.target.value;
+                    @change=${(/** @type {Event} */ e) => {
+                      const chosen = /** @type {HTMLInputElement} */ (e.target).value;
                       if (keywords.includes(chosen)) {
                         onChange(chosen);
                       } else if (units.includes(chosen)) {
@@ -86,13 +87,14 @@ export function renderUnitSelector(
                     }}
                   >
                     ${units.map(
-                      (/** @type {any} */ u) => html`<sp-menu-item value=${u}>${u}</sp-menu-item>`,
+                      (/** @type {string} */ u) =>
+                        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 {any} */ kw) =>
+                      (/** @type {string} */ kw) =>
                         html`<sp-menu-item value=${kw}>${kw}</sp-menu-item>`,
                     )}
                   </sp-menu>

package/src/ui/value-selector.js

@@ -47,21 +47,27 @@ export class JxValueSelector extends LitElement {
   get _isPicker() {
     return (
       !!this.value &&
-      this.options.some((/** @type {any} */ o) => !o.divider && o.value === this.value)
+      this.options.some(
+        (/** @type {ComboOption} */ o) => !("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 {any} */ o) => !o.divider && o.value === this.value);
-    return /** @type {any} */ (opt)?.style || "";
+    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 || ""
+    );
   }
 
   /** Render menu items from options array */
   _renderMenuItems() {
-    return this.options.map((/** @type {any} */ opt) =>
-      opt.divider
+    return this.options.map((/** @type {ComboOption} */ opt) =>
+      "divider" in opt
         ? html`<sp-menu-divider></sp-menu-divider>`
         : html`<sp-menu-item value=${opt.value} style=${opt.style || ""}
             >${opt.label}</sp-menu-item
@@ -70,33 +76,33 @@ export class JxValueSelector extends LitElement {
   }
 
   /** Picker mode: sp-picker @change handler */
-  _handlePickerChange(/** @type {any} */ e) {
+  _handlePickerChange(/** @type {Event} */ e) {
     e.stopPropagation();
-    this.value = e.target.value;
+    this.value = /** @type {HTMLInputElement} */ (e.target).value;
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
 
   /** Combobox mode: sp-menu @change handler */
-  _handleMenuChange(/** @type {any} */ e) {
+  _handleMenuChange(/** @type {Event} */ e) {
     e.stopPropagation();
-    if (!e.target.value) return;
-    this.value = e.target.value;
+    if (!(/** @type {HTMLInputElement} */ (e.target).value)) return;
+    this.value = /** @type {HTMLInputElement} */ (e.target).value;
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
 
   /** Combobox mode: textfield @input handler */
-  _handleInput(/** @type {any} */ e) {
+  _handleInput(/** @type {Event} */ e) {
     e.stopPropagation();
-    this.value = e.target.value;
+    this.value = /** @type {HTMLInputElement} */ (e.target).value;
     this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
   }
 
   /** Set popover min-width to match trigger width (replicates sp-picker behavior) */
-  _setPopoverWidth(/** @type {any} */ e) {
+  _setPopoverWidth(/** @type {Event} */ e) {
     const group = this.querySelector(".jx-combobox-group");
     const w = group ? /** @type {HTMLElement} */ (group).offsetWidth : 0;
-    const popover = e.target.querySelector("sp-popover");
-    if (popover && w) popover.style.minWidth = `${w}px`;
+    const popover = /** @type {HTMLElement} */ (e.target).querySelector("sp-popover");
+    if (popover && w) /** @type {HTMLElement} */ (popover).style.minWidth = `${w}px`;
   }
 
   render() {