@jxsuite/studio 0.23.1 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Color-selector.js — Color input widget with swatch, text field, and popover picker.
  *
@@ -13,10 +14,15 @@
 import { LitElement, html, nothing } from "lit";
 import { html as litHtml } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { debouncedStyleCommit } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { getEffectiveStyle } from "../site-context.js";
-import { kebabToLabel } from "../utils/studio-utils.js";
+import { debouncedStyleCommit } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { getEffectiveStyle } from "../site-context";
+import { kebabToLabel } from "../utils/studio-utils";
+
+interface ColorVar {
+  name: string;
+  value: string;
+}
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
@@ -37,12 +43,12 @@ function getColorVars() {
  * Convert a color variable name to a title-case label. Strips the "--color-" prefix and converts
  * kebab to title case. e.g. "--color-primary-blue" → "Primary Blue"
  */
-function varToLabel(/** @type {string} */ name) {
+function varToLabel(name: string) {
   return kebabToLabel(name.replace(/^--color-?/, ""));
 }
 
 /** Resolve a color value for display — if it's a var() reference, look up the actual color. */
-function resolveColorForDisplay(/** @type {string | number | undefined} */ val) {
+function resolveColorForDisplay(val: string | number | undefined) {
   if (!val) return "transparent";
   const s = String(val);
   const m = s.match(/^var\((--[^)]+)\)$/);
@@ -55,13 +61,13 @@ function resolveColorForDisplay(/** @type {string | number | undefined} */ val)
   return s;
 }
 
-function safeColor(/** @type {string | number | undefined} */ val) {
+function safeColor(val: string | number | undefined) {
   if (!val) return "transparent";
   return resolveColorForDisplay(val);
 }
 
 /** Normalize a color string to include # prefix for hex values. */
-function normalizeHex(/** @type {string} */ c) {
+function normalizeHex(c: string) {
   if (!c) return c;
   if (c.startsWith("var(") || c.startsWith("rgb") || c.startsWith("hsl")) return c;
   return c.replace(/^#?/, "#");
@@ -73,7 +79,10 @@ function normalizeHex(/** @type {string} */ c) {
  * @param {string | number | undefined} value
  * @param {{ name: string; value: string }[]} colorVars
  */
-function matchesColorVar(value, colorVars) {
+function matchesColorVar(
+  value: string | number | undefined,
+  colorVars: { name: string; value: string }[],
+) {
   if (!value || typeof value !== "string") return null;
   const m = value.match(/^var\((--[^)]+)\)$/);
   if (!m) return null;
@@ -82,8 +91,6 @@ function matchesColorVar(value, colorVars) {
 
 // ─── JxColorPopover LitElement ──────────────────────────────────────────────
 
-/** @typedef {{ name: string; value: string }} ColorVar */
-
 export class JxColorPopover extends LitElement {
   static properties = {
     color: { type: String },
@@ -91,11 +98,15 @@ export class JxColorPopover extends LitElement {
     colorVars: { attribute: false },
   };
 
+  declare color: string;
+  declare displayColor: string;
+  declare colorVars: ColorVar[];
+
   constructor() {
     super();
-    /** @type {string} */ this.color = "";
-    /** @type {string} */ this.displayColor = "#000000";
-    /** @type {ColorVar[]} */ this.colorVars = [];
+    this.color = "";
+    this.displayColor = "#000000";
+    this.colorVars = [];
   }
 
   /** No shadow DOM — render directly into light DOM for Spectrum theming */
@@ -104,7 +115,7 @@ export class JxColorPopover extends LitElement {
   }
 
   /** @param {Map<string, unknown>} changed */
-  willUpdate(changed) {
+  willUpdate(changed: Map<string, unknown>) {
     if (changed.has("color")) {
       const raw = resolveColorForDisplay(this.color);
       if (!raw || raw === "transparent") {
@@ -117,33 +128,29 @@ export class JxColorPopover extends LitElement {
     }
   }
 
-  _handleArea(/** @type {Event} */ e) {
-    const color = normalizeHex(
-      String(/** @type {HTMLElement & { color: string }} */ (e.target).color),
-    );
+  _handleArea(e: Event) {
+    const color = normalizeHex(String((e.target as HTMLElement & { color: string }).color));
     this.displayColor = color;
     this.color = color;
     this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
   }
 
-  _handleSlider(/** @type {Event} */ e) {
-    const color = normalizeHex(
-      String(/** @type {HTMLElement & { color: string }} */ (e.target).color),
-    );
+  _handleSlider(e: Event) {
+    const color = normalizeHex(String((e.target as HTMLElement & { color: string }).color));
     this.displayColor = color;
     this.color = color;
     this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
   }
 
-  _handleText(/** @type {Event} */ e) {
-    const val = /** @type {HTMLInputElement} */ (e.target).value.trim();
+  _handleText(e: Event) {
+    const val = (e.target as HTMLInputElement).value.trim();
     if (!val) return;
     this.displayColor = val;
     this.color = val;
     this.dispatchEvent(new CustomEvent("color-change", { detail: val, bubbles: true }));
   }
 
-  _handleSwatch(/** @type {Event} */ e, /** @type {string} */ varName) {
+  _handleSwatch(e: Event, varName: string) {
     e.stopPropagation();
     const varRef = `var(${varName})`;
     this.color = varRef;
@@ -181,7 +188,7 @@ export class JxColorPopover extends LitElement {
                       color=${cv.value}
                       .value=${cv.name}
                       title=${cv.name}
-                      @click=${(/** @type {Event} */ e) => this._handleSwatch(e, cv.name)}
+                      @click=${(e: Event) => this._handleSwatch(e, cv.name)}
                     ></sp-swatch>
                   `,
                 )}
@@ -208,9 +215,9 @@ export class JxColorPopover extends LitElement {
  * @returns {import("lit-html").TemplateResult}
  */
 export function renderColorSelector(
-  /** @type {string} */ prop,
-  /** @type {string | number | undefined} */ value,
-  /** @type {(color: string) => void} */ onChange,
+  /** @type {string} */ prop: string,
+  /** @type {string | number | undefined} */ value: string | number | undefined,
+  /** @type {(color: string) => void} */ onChange: (color: string) => void,
 ) {
   const colorVars = getColorVars();
   const matchedVar = matchesColorVar(value, colorVars);
@@ -233,7 +240,7 @@ export function renderColorSelector(
             <jx-color-popover
               .color=${value || ""}
               .colorVars=${colorVars}
-              @color-change=${(/** @type {CustomEvent} */ e) => onChange(e.detail)}
+              @color-change=${(e: CustomEvent) => onChange(e.detail)}
             ></jx-color-popover>
           </sp-popover>
         </sp-overlay>
@@ -242,9 +249,9 @@ export function renderColorSelector(
           size="s"
           style="flex:1; min-width:0"
           .value=${`var(${matchedVar.name})`}
-          @change=${(/** @type {Event} */ e) => {
+          @change=${(e: Event) => {
             e.stopPropagation();
-            onChange(/** @type {HTMLInputElement} */ (e.target).value);
+            onChange((e.target as HTMLInputElement).value);
           }}
         >
           ${colorVars.map(
@@ -279,9 +286,9 @@ export function renderColorSelector(
         size="s"
         style="flex:1; min-width:0"
         .value=${live(value || "")}
-        @click=${(/** @type {Event} */ e) => e.stopPropagation()}
-        @input=${debouncedStyleCommit(`color:${prop}`, 400, (/** @type {Event} */ e) => {
-          onChange(/** @type {HTMLInputElement} */ (e.target).value.trim());
+        @click=${(e: Event) => e.stopPropagation()}
+        @input=${debouncedStyleCommit(`color:${prop}`, 400, (e: Event) => {
+          onChange((e.target as HTMLInputElement).value.trim());
         })}
       ></sp-textfield>
       <sp-overlay trigger="${triggerId}@click" placement="bottom-start" type="auto">
@@ -289,7 +296,7 @@ export function renderColorSelector(
           <jx-color-popover
             .color=${value || ""}
             .colorVars=${colorVars}
-            @color-change=${(/** @type {CustomEvent} */ e) => onChange(e.detail)}
+            @color-change=${(e: CustomEvent) => onChange(e.detail)}
           ></jx-color-popover>
         </sp-popover>
       </sp-overlay>

package/src/ui/{expression-editor.js → expression-editor.ts}

@@ -1,6 +1,7 @@
+/// <reference lib="dom" />
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { renderFieldRow } from "./field-row.js";
+import { renderFieldRow } from "./field-row";
 
 // ─── Operator Categories ────────────────────────────────────────────────────
 
@@ -44,7 +45,7 @@ const OPERATOR_GROUPS = [
  *   valueIsNode: boolean;
  * }}
  */
-function operatorInfo(op) {
+function operatorInfo(op: string) {
   if (UNARY_OPS.has(op))
     return {
       needsValue: false,
@@ -124,7 +125,7 @@ function operatorInfo(op) {
  * @param {any} operand
  * @returns {"ref" | "expression" | "literal"}
  */
-function operandMode(operand) {
+function operandMode(operand: any) {
   if (operand && typeof operand === "object") {
     if ("$ref" in operand) return "ref";
     if ("operator" in operand) return "expression";
@@ -136,7 +137,7 @@ function operandMode(operand) {
  * @param {string} mode
  * @returns {any}
  */
-function defaultForMode(mode) {
+function defaultForMode(mode: string) {
   if (mode === "ref") return { $ref: "" };
   if (mode === "expression") return { operator: "!", target: null };
   return null;
@@ -148,7 +149,7 @@ function defaultForMode(mode) {
  * @param {any} val
  * @returns {"string" | "number" | "boolean" | "null"}
  */
-function literalType(val) {
+function literalType(val: any) {
   if (val === null || val === undefined) return "null";
   if (typeof val === "boolean") return "boolean";
   if (typeof val === "number") return "number";
@@ -159,7 +160,7 @@ function literalType(val) {
  * @param {string} type
  * @returns {any}
  */
-function defaultForLiteralType(type) {
+function defaultForLiteralType(type: string) {
   if (type === "number") return 0;
   if (type === "boolean") return false;
   if (type === "null") return null;
@@ -172,7 +173,7 @@ function defaultForLiteralType(type) {
  * @param {any} node
  * @returns {string}
  */
-export function expressionHint(node) {
+export function expressionHint(node: any) {
   if (!node || !node.operator) return "$expression";
   const op = node.operator;
   const targetLabel = node.target?.$ref
@@ -197,7 +198,11 @@ export function expressionHint(node) {
  * @param {{ stateDefs: string[]; allowEventRef: boolean }} opts
  * @returns {import("lit-html").TemplateResult}
  */
-function renderRefPicker(refVal, onRefChange, opts) {
+function renderRefPicker(
+  refVal: string,
+  onRefChange: (newRef: string) => void,
+  opts: { stateDefs: string[]; allowEventRef: boolean },
+) {
   const stateRefs = (opts.stateDefs || []).map((k) => `#/state/${k}`);
   const eventRefs = opts.allowEventRef ? ["event#/detail", "event#/target/value"] : [];
   const allRefs = [...stateRefs, ...eventRefs];
@@ -209,8 +214,8 @@ function renderRefPicker(refVal, onRefChange, opts) {
       style="flex:1"
       placeholder="Select…"
       .value=${live(isCustom ? "__custom__" : refVal || "")}
-      @change=${(/** @type {Event} */ e) => {
-        const val = /** @type {HTMLInputElement} */ (e.target).value;
+      @change=${(e: Event) => {
+        const val = (e.target as HTMLInputElement).value;
         if (val === "__custom__") return;
         onRefChange(val);
       }}
@@ -237,7 +242,7 @@ function renderRefPicker(refVal, onRefChange, opts) {
  * @param {(newVal: any) => void} onChange
  * @returns {import("lit-html").TemplateResult}
  */
-function renderLiteralEditor(operand, onChange) {
+function renderLiteralEditor(operand: any, onChange: (newVal: any) => void) {
   const type = literalType(operand);
   return html`
     <div style="display:flex;gap:4px;align-items:center;flex:1">
@@ -245,8 +250,8 @@ function renderLiteralEditor(operand, onChange) {
         size="s"
         style="min-width:56px"
         .value=${live(type)}
-        @change=${(/** @type {Event} */ e) => {
-          const newType = /** @type {HTMLInputElement} */ (e.target).value;
+        @change=${(e: Event) => {
+          const newType = (e.target as HTMLInputElement).value;
           onChange(defaultForLiteralType(newType));
         }}
       >
@@ -260,23 +265,20 @@ function renderLiteralEditor(operand, onChange) {
             size="s"
             style="flex:1"
             .value=${live(String(operand ?? ""))}
-            @input=${(/** @type {Event} */ e) =>
-              onChange(/** @type {HTMLInputElement} */ (e.target).value)}
+            @input=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
           ></sp-textfield>`
         : type === "number"
           ? html`<sp-number-field
               size="s"
               style="flex:1"
               .value=${live(Number(operand ?? 0))}
-              @change=${(/** @type {Event} */ e) =>
-                onChange(Number(/** @type {HTMLInputElement} */ (e.target).value))}
+              @change=${(e: Event) => onChange(Number((e.target as HTMLInputElement).value))}
             ></sp-number-field>`
           : type === "boolean"
             ? html`<sp-checkbox
                 size="s"
                 ?checked=${!!operand}
-                @change=${(/** @type {Event} */ e) =>
-                  onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
+                @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
                 >true</sp-checkbox
               >`
             : html`<span style="font-size:12px;color:var(--spectrum-global-color-gray-600)"
@@ -299,9 +301,13 @@ function renderLiteralEditor(operand, onChange) {
  * }} opts
  * @returns {import("lit-html").TemplateResult}
  */
-function renderOperandEditor(operand, onChange, opts) {
+function renderOperandEditor(
+  operand: unknown,
+  onChange: (newOperand: unknown) => void,
+  opts: { stateDefs: string[]; allowEventRef: boolean; depth: number; mustBeRef?: boolean },
+): import("lit-html").TemplateResult {
   if (opts.mustBeRef) {
-    const refVal = operand?.$ref ?? "";
+    const refVal = ((operand as Record<string, unknown> | null)?.$ref as string) ?? "";
     return html`
       <div style="flex:1">${renderRefPicker(refVal, (r) => onChange({ $ref: r }), opts)}</div>
     `;
@@ -314,8 +320,8 @@ function renderOperandEditor(operand, onChange, opts) {
         size="s"
         style="min-width:60px"
         .value=${live(mode)}
-        @change=${(/** @type {Event} */ e) => {
-          const newMode = /** @type {HTMLInputElement} */ (e.target).value;
+        @change=${(e: Event) => {
+          const newMode = (e.target as HTMLInputElement).value;
           onChange(defaultForMode(newMode));
         }}
       >
@@ -326,7 +332,11 @@ function renderOperandEditor(operand, onChange, opts) {
       ${mode === "literal"
         ? renderLiteralEditor(operand, onChange)
         : mode === "ref"
-          ? renderRefPicker(operand?.$ref ?? "", (r) => onChange({ $ref: r }), opts)
+          ? renderRefPicker(
+              ((operand as Record<string, unknown> | null)?.$ref as string) ?? "",
+              (r) => onChange({ $ref: r }),
+              opts,
+            )
           : renderExpressionEditor(operand, onChange, { ...opts, depth: opts.depth + 1 })}
     </div>
   `;
@@ -340,7 +350,11 @@ function renderOperandEditor(operand, onChange, opts) {
  * @param {{ stateDefs: string[]; allowEventRef: boolean; depth: number }} opts
  * @returns {import("lit-html").TemplateResult}
  */
-function renderSpliceArgsEditor(args, onChange, opts) {
+function renderSpliceArgsEditor(
+  args: unknown[],
+  onChange: (newArgs: unknown[]) => void,
+  opts: { stateDefs: string[]; allowEventRef: boolean; depth: number },
+): import("lit-html").TemplateResult {
   const safeArgs = Array.isArray(args) ? args : [];
   const labels = ["start", "del", "item"];
 
@@ -408,10 +422,17 @@ const _operatorMenuCache = OPERATOR_GROUPS.map(
  * }} opts
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderExpressionEditor(node, onChange, opts) {
+export function renderExpressionEditor(
+  node: unknown,
+  onChange: (node: unknown) => void,
+  opts: { stateDefs: string[]; allowEventRef: boolean; depth?: number },
+): import("lit-html").TemplateResult {
   const depth = opts.depth ?? 0;
-  const safeNode = node && typeof node === "object" ? node : { operator: "=", target: null };
-  const op = safeNode.operator || "=";
+  const safeNode: Record<string, unknown> =
+    node && typeof node === "object"
+      ? (node as Record<string, unknown>)
+      : { operator: "=", target: null };
+  const op = (safeNode.operator as string) || "=";
   const info = operatorInfo(op);
 
   const nestStyle =
@@ -429,19 +450,17 @@ export function renderExpressionEditor(node, onChange, opts) {
           <sp-picker
             size="s"
             .value=${live(op)}
-            @change=${(/** @type {Event} */ e) => {
-              const newOp = /** @type {HTMLInputElement} */ (e.target).value;
+            @change=${(e: Event) => {
+              const newOp = (e.target as HTMLInputElement).value;
               const newInfo = operatorInfo(newOp);
-              /** @type {any} */
-              const updated = { operator: newOp, target: safeNode.target };
+              const updated: any = { operator: newOp, target: safeNode.target };
               if (newInfo.targetMustBeRef && operandMode(safeNode.target) !== "ref") {
                 updated.target = { $ref: "" };
               }
               if (newInfo.needsValue) {
                 if (newInfo.valueIsNode) {
-                  updated.value = safeNode.value?.operator
-                    ? safeNode.value
-                    : { operator: "!", target: null };
+                  const val = safeNode.value as Record<string, unknown> | null;
+                  updated.value = val?.operator ? safeNode.value : { operator: "!", target: null };
                 } else if (newInfo.spliceArray) {
                   updated.value = Array.isArray(safeNode.value) ? safeNode.value : [null];
                 } else {
@@ -488,7 +507,9 @@ export function renderExpressionEditor(node, onChange, opts) {
                 widget: nothing,
               })}
               ${renderExpressionEditor(
-                safeNode.value?.operator ? safeNode.value : { operator: "!", target: null },
+                (safeNode.value as Record<string, unknown> | null)?.operator
+                  ? safeNode.value
+                  : { operator: "!", target: null },
                 (v) => onChange({ ...safeNode, value: v }),
                 { ...opts, depth: depth + 1 },
               )}
@@ -504,10 +525,14 @@ export function renderExpressionEditor(node, onChange, opts) {
                 hasValue: false,
                 widget: nothing,
               })}
-              ${renderSpliceArgsEditor(safeNode.value, (v) => onChange({ ...safeNode, value: v }), {
-                ...opts,
-                depth,
-              })}
+              ${renderSpliceArgsEditor(
+                safeNode.value as unknown[],
+                (v) => onChange({ ...safeNode, value: v }),
+                {
+                  ...opts,
+                  depth,
+                },
+              )}
             </div>
           `
         : nothing}

package/src/ui/{field-row.js → field-row.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Field-row.js — Universal field row layout for all Studio panels.
  *
@@ -22,7 +23,23 @@ import { classMap } from "lit-html/directives/class-map.js";
  * }} opts
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderFieldRow({ prop, label, hasValue, onClear, widget, span, warning }) {
+export function renderFieldRow({
+  prop,
+  label,
+  hasValue,
+  onClear,
+  widget,
+  span,
+  warning,
+}: {
+  prop: string;
+  label: string;
+  hasValue: boolean;
+  onClear?: () => void;
+  widget: unknown;
+  span?: number;
+  warning?: boolean;
+}) {
   return html`
     <div
       class=${classMap({ "style-row": true, "style-row--warning": !!warning })}
@@ -34,7 +51,7 @@ export function renderFieldRow({ prop, label, hasValue, onClear, widget, span, w
           ? html`<span
               class="set-dot"
               title="Clear ${prop}"
-              @click=${(/** @type {Event} */ e) => {
+              @click=${(e: Event) => {
                 e.stopPropagation();
                 onClear();
               }}

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

@@ -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 {import("lit").TemplateResult} */ d) =>
+const _R = (d: import("lit").TemplateResult) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -18,7 +18,7 @@ const _R = (/** @type {import("lit").TemplateResult} */ d) =>
   </svg>`;
 
 // Helper for custom stroke icons
-const _S = (/** @type {import("lit").TemplateResult} */ d) =>
+const _S = (d: import("lit").TemplateResult) =>
   html`<svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"

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

@@ -1,16 +1,14 @@
+/// <reference lib="dom" />
 import { render as litRender, nothing, html } from "lit-html";
 
-/** @type {HTMLElement} */
-let _popoverLayer;
-/** @type {HTMLElement} */
-let _modalLayer;
-/** @type {HTMLElement} */
-let _dialogLayer;
+let _popoverLayer: HTMLElement;
+let _modalLayer: HTMLElement;
+let _dialogLayer: HTMLElement;
 
 export function initLayers() {
-  _popoverLayer = /** @type {HTMLElement} */ (document.getElementById("layer-popover"));
-  _modalLayer = /** @type {HTMLElement} */ (document.getElementById("layer-modal"));
-  _dialogLayer = /** @type {HTMLElement} */ (document.getElementById("layer-dialog"));
+  _popoverLayer = document.getElementById("layer-popover") as HTMLElement;
+  _modalLayer = document.getElementById("layer-modal") as HTMLElement;
+  _dialogLayer = document.getElementById("layer-dialog") as HTMLElement;
 }
 
 /**
@@ -20,13 +18,15 @@ export function initLayers() {
  * @param {(done: (value: T) => void) => import("lit-html").TemplateResult} templateFn
  * @returns {Promise<T>}
  */
-export function showDialog(templateFn) {
+export function showDialog<T>(
+  templateFn: (done: (value: T) => void) => import("lit-html").TemplateResult,
+): Promise<T> {
   return new Promise((resolve) => {
     const slot = document.createElement("div");
     slot.style.pointerEvents = "auto";
     _dialogLayer.appendChild(slot);
     let resolved = false;
-    const done = (/** @type {T} */ value) => {
+    const done = (value: T) => {
       if (resolved) return;
       resolved = true;
       litRender(nothing, slot);
@@ -45,7 +45,11 @@ export function showDialog(templateFn) {
  * @param {{ confirmLabel?: string; cancelLabel?: string; destructive?: boolean }} [opts]
  * @returns {Promise<boolean>}
  */
-export function showConfirmDialog(headline, message, opts = {}) {
+export function showConfirmDialog(
+  headline: string,
+  message: string | import("lit-html").TemplateResult,
+  opts: { confirmLabel?: string; cancelLabel?: string; destructive?: boolean } = {},
+) {
   const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
   return showDialog(
     (done) => html`
@@ -72,7 +76,7 @@ export function showConfirmDialog(headline, message, opts = {}) {
  *
  * @param {import("lit-html").TemplateResult} template
  */
-export function openModal(template) {
+export function openModal(template: import("lit-html").TemplateResult) {
   const slot = document.createElement("div");
   slot.style.pointerEvents = "auto";
   _modalLayer.appendChild(slot);
@@ -80,7 +84,7 @@ export function openModal(template) {
   return {
     host: slot,
     /** @param {import("lit-html").TemplateResult} tpl */
-    update(tpl) {
+    update(tpl: import("lit-html").TemplateResult) {
       litRender(tpl, slot);
     },
     close() {
@@ -100,7 +104,14 @@ export function openModal(template) {
  *   layer?: "popover" | "modal" | "dialog";
  * }} [opts]
  */
-export function renderPopover(template, opts = {}) {
+export function renderPopover(
+  template: import("lit-html").TemplateResult,
+  opts: {
+    dismissOnOutsideClick?: boolean;
+    onDismiss?: () => void;
+    layer?: "popover" | "modal" | "dialog";
+  } = {},
+) {
   const slot = document.createElement("div");
   slot.style.pointerEvents = "auto";
   const target =
@@ -108,11 +119,10 @@ export function renderPopover(template, opts = {}) {
   target.appendChild(slot);
   litRender(template, slot);
 
-  /** @type {((e: MouseEvent) => void) | null} */
-  let outsideClickHandler = null;
+  let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
   if (opts.dismissOnOutsideClick !== false) {
-    outsideClickHandler = (/** @type {MouseEvent} */ e) => {
-      if (!slot.contains(/** @type {Node} */ (e.target))) {
+    outsideClickHandler = (e: MouseEvent) => {
+      if (!slot.contains(e.target as Node)) {
         handle.dismiss();
         opts.onDismiss?.();
       }
@@ -125,7 +135,7 @@ export function renderPopover(template, opts = {}) {
   const handle = {
     host: slot,
     /** @param {import("lit-html").TemplateResult} tpl */
-    update(tpl) {
+    update(tpl: import("lit-html").TemplateResult) {
       litRender(tpl, slot);
     },
     dismiss() {
@@ -139,8 +149,7 @@ export function renderPopover(template, opts = {}) {
   return handle;
 }
 
-/** @type {Map<string, HTMLElement>} */
-const _namedSlots = new Map();
+const _namedSlots: Map<string, HTMLElement> = new Map();
 
 /**
  * Get or create a named slot in a layer. Useful for persistent popovers like zoom indicator.
@@ -149,7 +158,7 @@ const _namedSlots = new Map();
  * @param {string} id
  * @returns {HTMLElement}
  */
-export function getLayerSlot(layer, id) {
+export function getLayerSlot(layer: "popover" | "modal" | "dialog", id: string) {
   const key = `${layer}:${id}`;
   let slot = _namedSlots.get(key);
   if (slot && slot.parentElement) return slot;
@@ -170,7 +179,7 @@ export function getLayerSlot(layer, id) {
  * @param {"popover" | "modal" | "dialog"} layer
  * @param {string} id
  */
-export function clearLayerSlot(layer, id) {
+export function clearLayerSlot(layer: "popover" | "modal" | "dialog", id: string) {
   const key = `${layer}:${id}`;
   const slot = _namedSlots.get(key);
   if (slot) {