@jxsuite/studio 0.23.2 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Signals panel — signal/def helpers, signals template, CEM editors, plugin schema forms.
  *
@@ -8,106 +9,116 @@ import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import { styleMap } from "lit-html/directives/style-map.js";
-import { projectState } from "../state.js";
-import { activeTab } from "../workspace/workspace.js";
+import { projectState } from "../state";
+import type { JsonValue } from "../types";
+import { activeTab } from "../workspace/workspace";
 import {
   transactDoc,
   mutateUpdateDef,
   mutateAddDef,
   mutateRemoveDef,
   mutateRenameDef,
-} from "../tabs/transact.js";
-import { renderFieldRow } from "../ui/field-row.js";
-import { renderExpressionEditor, expressionHint } from "../ui/expression-editor.js";
-import { renderMediaPicker } from "../ui/media-picker.js";
-import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.js";
+} from "../tabs/transact";
+import { renderFieldRow } from "../ui/field-row";
+import { renderExpressionEditor, expressionHint } from "../ui/expression-editor";
+import { renderMediaPicker } from "../ui/media-picker";
+import type { TabUi } from "../tabs/tab";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services";
 
-/**
- * @typedef {{
- *   document: JxMutableNode;
- *   ui?: Record<string, unknown>;
- *   mode?: string;
- *   selection?: (string | number)[] | null;
- *   canvas?: Record<string, unknown>;
- *   _collapsedSignalCats?: Set<string>;
- *   documentPath?: string | null;
- * }} SignalsPanelState
- *
- * @typedef {{ renderLeftPanel(): void; renderCanvas(): void; updateSession(patch: object): void }} SignalsPanelCtx
- *
- * @typedef {Record<string, unknown> & {
- *   $prototype?: string;
- *   $compute?: string;
- *   $deps?: string[];
- *   $handler?: unknown;
- *   $src?: string;
- *   $export?: string;
- *   type?: string;
- *   default?: unknown;
- *   description?: string;
- *   attribute?: string;
- *   reflects?: boolean;
- *   deprecated?: string | boolean;
- *   format?: string;
- *   url?: string;
- *   method?: string;
- *   timing?: string;
- *   key?: string;
- *   database?: string;
- *   store?: string;
- *   version?: number;
- *   name?: string;
- *   body?: string;
- *   parameters?: Record<string, unknown>[];
- *   emits?: Record<string, unknown>[];
- *   fields?: unknown;
- *   contentType?: string;
- *   id?: unknown;
- *   filter?: Record<string, unknown>;
- *   sort?: { field?: string; order?: string };
- *   limit?: number;
- * }} SignalDef
- *
- * @typedef {{ name: string; type?: { text?: string }; description?: string; optional?: boolean }} CemParameter
- *
- * @typedef {{ name: string; type?: { text?: string }; description?: string }} CemEvent
- *
- * @typedef {{
- *   type?: string;
- *   properties?: Record<string, SchemaProperty>;
- *   required?: string[];
- *   description?: string;
- * }} JsonSchema
- *
- * @typedef {{
- *   type?: string;
- *   enum?: string[];
- *   default?: unknown;
- *   format?: string;
- *   minimum?: number;
- *   maximum?: number;
- *   description?: string;
- *   examples?: string[];
- *   name?: string;
- *   items?: {
- *     type?: string;
- *     properties?: Record<string, Record<string, unknown>>;
- *     required?: string[];
- *   };
- * }} SchemaProperty
- */
+interface SignalsPanelState {
+  document: JxMutableNode;
+  ui?: TabUi | Record<string, unknown>;
+  mode?: string;
+  selection?: (string | number)[] | null;
+  canvas?: Record<string, unknown>;
+  _collapsedSignalCats?: Set<string>;
+  documentPath?: string | null | undefined;
+}
+
+interface SignalsPanelCtx {
+  renderLeftPanel(): void;
+  renderCanvas(): void;
+  updateSession(patch: Record<string, unknown>): void;
+}
+
+interface CemParameter {
+  name: string;
+  type?: { text?: string };
+  description?: string;
+  optional?: boolean;
+}
+
+interface CemEvent {
+  name: string;
+  type?: { text?: string };
+  description?: string;
+}
+
+interface JsonSchema {
+  type?: string;
+  properties?: Record<string, SchemaProperty>;
+  required?: string[];
+  description?: string;
+}
+
+interface SchemaProperty {
+  type?: string;
+  enum?: string[];
+  default?: unknown;
+  format?: string;
+  minimum?: number;
+  maximum?: number;
+  description?: string;
+  examples?: string[];
+  name?: string;
+  items?: {
+    type?: string;
+    properties?: Record<string, Record<string, unknown>>;
+    required?: string[];
+  };
+}
+
+export interface SignalDef {
+  $prototype?: string;
+  $src?: string;
+  $export?: string;
+  $compute?: string;
+  $deps?: string[];
+  $expression?: Record<string, unknown>;
+  $handler?: string;
+  type?: string;
+  default?: unknown;
+  body?: string;
+  parameters?: string[];
+  timing?: string;
+  description?: string;
+  fields?: Record<string, unknown>;
+  url?: string;
+  method?: string;
+  key?: string;
+  database?: string;
+  store?: string;
+  version?: number;
+  name?: string;
+  attribute?: string;
+  reflects?: boolean;
+  deprecated?: string | boolean;
+  format?: string;
+  emits?: CemEvent[];
+  [key: string]: unknown;
+}
 
 // ─── Module-local state ─────────────────────────────────────────────────────
 
 /** Expanded signal editor state (persists across renders). */
-/** @type {string | null} */
-let expandedSignal = null;
+let expandedSignal: string | null = null;
 
 /** Track which functions have the advanced param editor open. */
 const advancedParamOpen = new Set();
 
 /** Default templates for creating new signal definitions. */
-const DEF_TEMPLATES = /** @type {Record<string, SignalDef>} */ ({
+const DEF_TEMPLATES = {
   state: { type: "string", default: "" },
   computed: { $compute: "", $deps: [] },
   request: { $prototype: "Request", url: "", method: "GET", timing: "client" },
@@ -121,7 +132,7 @@ const DEF_TEMPLATES = /** @type {Record<string, SignalDef>} */ ({
   function: { $prototype: "Function", body: "", parameters: [] },
   expression: { $expression: { operator: "=", target: null } },
   external: { $prototype: "", $src: "" },
-});
+} as Record<string, SignalDef>;
 
 /** Keys handled by the framework — skip when rendering schema fields. */
 const STUDIO_RESERVED_KEYS = new Set([
@@ -147,9 +158,9 @@ const STUDIO_RESERVED_KEYS = new Set([
  *
  * @param {SignalDef | unknown} def
  */
-export function defCategory(def) {
+export function defCategory(def: SignalDef | unknown) {
   if (!def) return "state";
-  const d = /** @type {SignalDef} */ (def);
+  const d = def as SignalDef;
   if (d.$expression) return "expression";
   if (d.$handler || d.$prototype === "Function") return "function";
   if (d.$compute) return "computed";
@@ -162,9 +173,9 @@ export function defCategory(def) {
  *
  * @param {SignalDef | unknown} def
  */
-export function defBadgeLabel(def) {
+export function defBadgeLabel(def: SignalDef | unknown) {
   if (!def) return "S";
-  const d = /** @type {SignalDef} */ (def);
+  const d = def as SignalDef;
   if (d.$expression) return "E";
   if (d.$handler || d.$prototype === "Function") return "F";
   if (d.$compute) return "C";
@@ -178,7 +189,7 @@ export function defBadgeLabel(def) {
  * @param {string} name
  * @param {SignalDef | null | undefined} def
  */
-export function defHint(name, def) {
+export function defHint(name: string, def: SignalDef | null | undefined) {
   if (!def) return "";
   if (def.$expression) return expressionHint(def.$expression);
   if (def.$prototype === "Function") {
@@ -205,7 +216,7 @@ export function defHint(name, def) {
  *
  * @param {SignalsPanelState} S
  */
-export function isCustomElementDoc(S) {
+export function isCustomElementDoc(S: SignalsPanelState) {
   return (S.document.tagName || "").includes("-");
 }
 
@@ -215,7 +226,10 @@ export function isCustomElementDoc(S) {
  * @param {JxMutableNode | null | undefined} node
  * @param {{ name: string; tag: string }[]} [parts]
  */
-export function collectCssParts(node, parts = []) {
+export function collectCssParts(
+  node: JxMutableNode | null | undefined,
+  parts: { name: string; tag: string }[] = [],
+) {
   if (node?.attributes?.part)
     parts.push({ name: node.attributes.part, tag: node.tagName || "div" });
   if (Array.isArray(node?.children))
@@ -232,10 +246,12 @@ export function collectCssParts(node, parts = []) {
  * @param {unknown} value
  * @param {Record<string, SignalDef> | null | undefined} defs
  */
-export function resolveDefaultForCanvas(value, defs) {
-  if (!value || typeof value !== "object" || !(/** @type {Record<string, unknown>} */ (value).$ref))
-    return value;
-  const ref = /** @type {string} */ (/** @type {Record<string, unknown>} */ (value).$ref);
+export function resolveDefaultForCanvas(
+  value: unknown,
+  defs: Record<string, SignalDef> | null | undefined,
+) {
+  if (!value || typeof value !== "object" || !(value as Record<string, unknown>).$ref) return value;
+  const ref = (value as Record<string, unknown>).$ref as string;
   /** @type {string | undefined} */
   let defName;
   if (ref.startsWith("#/state/")) defName = ref.slice(8);
@@ -272,13 +288,7 @@ export function resolveDefaultForCanvas(value, defs) {
 // ─── Simple field row ────────────────────────────────────────────────────────
 
 /** Simple field row for signal editors — vertical stacked layout. */
-export function signalFieldRow(
-  /** @type {string} */ label,
-  /** @type {string} */ value,
-  /** @type {(value: string) => void} */ onChange,
-) {
-  /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let debounce;
+export function signalFieldRow(label: string, value: string, onChange: (value: string) => void) {
   return renderFieldRow({
     prop: label,
     label,
@@ -286,13 +296,10 @@ export function signalFieldRow(
     widget: html`
       <sp-textfield
         size="s"
-        value=${value}
-        @input=${(/** @type {Event} */ e) => {
-          clearTimeout(debounce);
-          debounce = setTimeout(
-            () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
-            400,
-          );
+        .value=${value}
+        @change=${(e: Event) => {
+          const v = (e.target as HTMLInputElement).value;
+          if (v !== value) onChange(v);
         }}
       ></sp-textfield>
     `,
@@ -300,8 +307,8 @@ export function signalFieldRow(
 }
 
 /** Normalize a parameter entry to a CEM object. */
-export function normParam(/** @type {string | Record<string, unknown>} */ p) {
-  return typeof p === "string" ? { name: p } : /** @type {CemParameter} */ (p);
+export function normParam(p: string | Record<string, unknown>) {
+  return typeof p === "string" ? { name: p } : (p as unknown as CemParameter);
 }
 
 // ─── Left panel: Signals ─────────────────────────────────────────────────────
@@ -310,18 +317,18 @@ export function normParam(/** @type {string | Record<string, unknown>} */ p) {
  * @param {SignalsPanelState} S
  * @param {SignalsPanelCtx} ctx
  */
-export function renderSignalsTemplate(S, ctx) {
+export function renderSignalsTemplate(S: SignalsPanelState, ctx: SignalsPanelCtx) {
   const defs = S.document.state || {};
   const entries = Object.entries(defs);
 
   // Group by category
-  const groups = /** @type {Record<string, [string, SignalDef][]>} */ ({
+  const groups = {
     state: [],
     computed: [],
     data: [],
     expression: [],
     function: [],
-  });
+  } as Record<string, [string, SignalDef][]>;
   for (const [name, def] of entries) {
     groups[defCategory(def)].push([name, def]);
   }
@@ -350,8 +357,7 @@ export function renderSignalsTemplate(S, ctx) {
           }}
         >
           ${items.map(([name, def]) => {
-            /** @type {boolean} */
-            const isExpanded = expandedSignal === name;
+            const isExpanded: boolean = expandedSignal === name;
             return html`
               <div
                 class=${classMap({ "signal-row": true, expanded: isExpanded })}
@@ -367,7 +373,7 @@ export function renderSignalsTemplate(S, ctx) {
                   quiet
                   size="xs"
                   class="signal-del"
-                  @click=${(/** @type {Event} */ e) => {
+                  @click=${(e: Event) => {
                     e.stopPropagation();
                     transactDoc(activeTab.value, (t) => mutateRemoveDef(t, name));
                   }}
@@ -395,8 +401,8 @@ export function renderSignalsTemplate(S, ctx) {
           size="s"
           label="+ Add…"
           placeholder="+ Add…"
-          @change=${(/** @type {Event} */ e) => {
-            const type = /** @type {HTMLInputElement} */ (e.target).value;
+          @change=${(e: Event) => {
+            const type = (e.target as HTMLInputElement).value;
             if (!type) return;
 
             // Handle import-based prototypes (e.g., "import:ContentCollection")
@@ -420,7 +426,7 @@ export function renderSignalsTemplate(S, ctx) {
               if (src) {
                 fetchPluginSchema(
                   { $prototype: protoName, $src: src },
-                  /** @type {{ documentPath?: string }} */ (S),
+                  { ...(S.documentPath != null && { documentPath: S.documentPath }) },
                 ).then(() => ctx.renderLeftPanel());
               } else {
                 ctx.renderLeftPanel();
@@ -438,11 +444,7 @@ export function renderSignalsTemplate(S, ctx) {
               n = nameBase + i++;
             }
             transactDoc(activeTab.value, (t) =>
-              mutateAddDef(
-                t,
-                n,
-                /** @type {Record<string, JsonValue>} */ (structuredClone(template)),
-              ),
+              mutateAddDef(t, n, structuredClone(template) as Record<string, JsonValue>),
             );
             expandedSignal = n;
             ctx.renderLeftPanel();
@@ -463,10 +465,7 @@ export function renderSignalsTemplate(S, ctx) {
           ${projectState?.projectConfig?.imports
             ? html`<sp-menu-divider></sp-menu-divider>${Object.keys(
                   projectState.projectConfig.imports,
-                ).map(
-                  (/** @type {string} */ k) =>
-                    html`<sp-menu-item value="import:${k}">${k}</sp-menu-item>`,
-                )}`
+                ).map((k: string) => html`<sp-menu-item value="import:${k}">${k}</sp-menu-item>`)}`
             : nothing}
           <sp-menu-divider></sp-menu-divider>
           <sp-menu-item value="expression">Expression</sp-menu-item>
@@ -479,10 +478,10 @@ export function renderSignalsTemplate(S, ctx) {
 
 /** Render inline editor fields for a specific signal/def type. */
 function renderSignalEditorTemplate(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-  /** @type {SignalsPanelCtx} */ ctx,
+  S: SignalsPanelState,
+  name: string,
+  def: SignalDef,
+  ctx: SignalsPanelCtx,
 ) {
   if (typeof def !== "object" || def === null) {
     def = { default: def };
@@ -491,10 +490,10 @@ function renderSignalEditorTemplate(
 
   // Helper for picker rows
   const pickerRow = (
-    /** @type {string} */ label,
-    /** @type {string[]} */ options,
-    /** @type {string} */ currentVal,
-    /** @type {(value: string) => void} */ onChange,
+    label: string,
+    options: string[],
+    currentVal: string,
+    onChange: (value: string) => void,
   ) => {
     return renderFieldRow({
       prop: label,
@@ -504,12 +503,9 @@ function renderSignalEditorTemplate(
         <sp-picker
           size="s"
           value=${currentVal}
-          @change=${(/** @type {Event} */ e) =>
-            onChange(/** @type {HTMLInputElement} */ (e.target).value)}
+          @change=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
         >
-          ${options.map(
-            (/** @type {string} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
-          )}
+          ${options.map((opt: string) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`)}
         </sp-picker>
       `,
     });
@@ -517,13 +513,12 @@ function renderSignalEditorTemplate(
 
   // Helper for textarea rows
   const textareaRow = (
-    /** @type {string} */ label,
-    /** @type {string} */ value,
-    /** @type {(value: string) => void} */ onChange,
-    /** @type {{ minHeight?: string; mono?: boolean }} */ opts = {},
+    label: string,
+    value: string,
+    onChange: (value: string) => void,
+    opts: { minHeight?: string; mono?: boolean } = {},
   ) => {
-    /** @type {ReturnType<typeof setTimeout> | undefined} */
-    let debounce;
+    let debounce: ReturnType<typeof setTimeout> | undefined;
     return renderFieldRow({
       prop: label,
       label,
@@ -539,12 +534,9 @@ function renderSignalEditorTemplate(
             }),
           })}
           .value=${value}
-          @input=${(/** @type {Event} */ e) => {
+          @input=${(e: Event) => {
             clearTimeout(debounce);
-            debounce = setTimeout(
-              () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
-              500,
-            );
+            debounce = setTimeout(() => onChange((e.target as HTMLInputElement).value), 500);
           }}
         ></textarea>
       `,
@@ -552,15 +544,14 @@ function renderSignalEditorTemplate(
   };
 
   // Name field (common to all)
-  const nameField = signalFieldRow("Name", name, (/** @type {string} */ v) => {
+  const nameField = signalFieldRow("Name", name, (v: string) => {
     if (v && v !== name && !(S.document.state && S.document.state[v])) {
       expandedSignal = v;
       transactDoc(activeTab.value, (t) => mutateRenameDef(t, name, v));
     }
   });
 
-  /** @type {import("lit-html").TemplateResult | typeof nothing} */
-  let fields = nothing;
+  let fields: import("lit-html").TemplateResult | typeof nothing = nothing;
 
   if (cat === "state") {
     const defaultVal =
@@ -572,7 +563,7 @@ function renderSignalEditorTemplate(
 
     const cemFields = isCustomElementDoc(S)
       ? html`
-          ${signalFieldRow("Attribute", def.attribute || "", (/** @type {string} */ v) =>
+          ${signalFieldRow("Attribute", def.attribute || "", (v: string) =>
             transactDoc(activeTab.value, (t) =>
               mutateUpdateDef(t, name, { attribute: v || undefined }),
             ),
@@ -585,10 +576,10 @@ function renderSignalEditorTemplate(
               <sp-checkbox
                 class="field-check"
                 ?checked=${!!def.reflects}
-                @change=${(/** @type {Event} */ e) =>
+                @change=${(e: Event) =>
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, {
-                      reflects: /** @type {HTMLInputElement} */ (e.target).checked || undefined,
+                      reflects: (e.target as HTMLInputElement).checked || undefined,
                     }),
                   )}
               ></sp-checkbox>
@@ -597,7 +588,7 @@ function renderSignalEditorTemplate(
           ${signalFieldRow(
             "Deprecated",
             typeof def.deprecated === "string" ? def.deprecated : "",
-            (/** @type {string} */ v) =>
+            (v: string) =>
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, { deprecated: v || undefined }),
               ),
@@ -610,18 +601,13 @@ function renderSignalEditorTemplate(
         "Type",
         ["string", "integer", "number", "boolean", "array", "object"],
         def.type || "string",
-        (/** @type {string} */ v) =>
-          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { type: v })),
+        (v: string) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { type: v })),
       )}
       ${def.type === "string" || !def.type
-        ? pickerRow(
-            "Format",
-            ["", "image", "date", "color"],
-            def.format || "",
-            (/** @type {string} */ v) =>
-              transactDoc(activeTab.value, (t) =>
-                mutateUpdateDef(t, name, { format: v || undefined }),
-              ),
+        ? pickerRow("Format", ["", "image", "date", "color"], def.format || "", (v: string) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateDef(t, name, { format: v || undefined }),
+            ),
           )
         : nothing}
       ${def.format === "image"
@@ -629,15 +615,14 @@ function renderSignalEditorTemplate(
             prop: "Default",
             label: "Default",
             hasValue: false,
-            widget: renderMediaPicker("default", defaultVal, (/** @type {string} */ v) => {
+            widget: renderMediaPicker("default", defaultVal, (v: string) => {
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, { default: v || undefined }),
               );
             }),
           })
-        : signalFieldRow("Default", defaultVal, (/** @type {string} */ v) => {
-            /** @type {unknown} */
-            let parsed = v;
+        : signalFieldRow("Default", defaultVal, (v: string) => {
+            let parsed: unknown = v;
             if (def.type === "integer") parsed = parseInt(v, 10) || 0;
             else if (def.type === "number") parsed = parseFloat(v) || 0;
             else if (def.type === "boolean") parsed = v === "true";
@@ -649,10 +634,10 @@ function renderSignalEditorTemplate(
               }
             }
             transactDoc(activeTab.value, (t) =>
-              mutateUpdateDef(t, name, { default: /** @type {JsonValue} */ (parsed) }),
+              mutateUpdateDef(t, name, { default: parsed as JsonValue }),
             );
           })}
-      ${signalFieldRow("Description", def.description || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("Description", def.description || "", (v: string) =>
         transactDoc(activeTab.value, (t) =>
           mutateUpdateDef(t, name, { description: v || undefined }),
         ),
@@ -660,8 +645,7 @@ function renderSignalEditorTemplate(
       ${cemFields}
     `;
   } else if (cat === "computed") {
-    /** @type {ReturnType<typeof setTimeout> | undefined} */
-    let debounce;
+    let debounce: ReturnType<typeof setTimeout> | undefined;
     fields = html`
       ${renderFieldRow({
         prop: "expression",
@@ -672,10 +656,10 @@ function renderSignalEditorTemplate(
             class="field-input"
             style="min-height:40px"
             .value=${def.$compute || ""}
-            @input=${(/** @type {Event} */ e) => {
+            @input=${(e: Event) => {
               clearTimeout(debounce);
               debounce = setTimeout(() => {
-                const expr = /** @type {HTMLInputElement} */ (e.target).value;
+                const expr = (e.target as HTMLInputElement).value;
                 const depMatches = expr.match(/\$[a-zA-Z_]\w*/g) || [];
                 const deps = [...new Set(depMatches)].map((d) => `#/state/${d}`);
                 transactDoc(activeTab.value, (t) =>
@@ -693,9 +677,7 @@ function renderSignalEditorTemplate(
             hasValue: false,
             widget: html`
               <span class="signal-hint" style="flex:1;max-width:none"
-                >${def.$deps
-                  .map((/** @type {string} */ d) => d.replace("#/state/", ""))
-                  .join(", ")}</span
+                >${def.$deps.map((d: string) => d.replace("#/state/", "")).join(", ")}</span
               >
             `,
           })
@@ -710,7 +692,7 @@ function renderSignalEditorTemplate(
     fields = html`
       ${renderExpressionEditor(
         exprNode,
-        (/** @type {any} */ newNode) =>
+        (newNode: any) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $expression: newNode })),
         { stateDefs: Object.keys(S.document.state || {}), allowEventRef: false },
       )}
@@ -722,33 +704,38 @@ function renderSignalEditorTemplate(
 
 /** Data source fields for signal editor */
 function renderDataSourceFields(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-  /** @type {Function} */ textareaRow,
-  /** @type {Function} */ pickerRow,
-  /** @type {SignalsPanelCtx} */ ctx,
+  S: SignalsPanelState,
+  name: string,
+  def: SignalDef,
+  textareaRow: (
+    label: string,
+    value: string,
+    onChange: (value: string) => void,
+    opts?: { minHeight?: string; mono?: boolean },
+  ) => import("lit-html").TemplateResult,
+  pickerRow: (
+    label: string,
+    options: string[],
+    currentVal: string,
+    onChange: (value: string) => void,
+  ) => import("lit-html").TemplateResult,
+  ctx: SignalsPanelCtx,
 ) {
   const proto = def.$prototype;
 
   if (proto === "Request") {
     return html`
-      ${signalFieldRow("URL", def.url || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("URL", def.url || "", (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { url: v })),
       )}
       ${pickerRow(
         "Method",
         ["GET", "POST", "PUT", "DELETE", "PATCH"],
         def.method || "GET",
-        (/** @type {string} */ v) =>
-          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { method: v })),
+        (v: string) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { method: v })),
       )}
-      ${pickerRow(
-        "Timing",
-        ["client", "server"],
-        def.timing || "client",
-        (/** @type {string} */ v) =>
-          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { timing: v })),
+      ${pickerRow("Timing", ["client", "server"], def.timing || "client", (v: string) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { timing: v })),
       )}
     `;
   }
@@ -760,10 +747,10 @@ function renderDataSourceFields(
           : String(def.default)
         : "";
     return html`
-      ${signalFieldRow("Key", def.key || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("Key", def.key || "", (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { key: v })),
       )}
-      ${textareaRow("Default", defaultStr, (/** @type {string} */ v) => {
+      ${textareaRow("Default", defaultStr, (v: string) => {
         try {
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: JSON.parse(v) }));
         } catch {
@@ -774,13 +761,13 @@ function renderDataSourceFields(
   }
   if (proto === "IndexedDB") {
     return html`
-      ${signalFieldRow("Database", def.database || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("Database", def.database || "", (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { database: v })),
       )}
-      ${signalFieldRow("Store", def.store || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("Store", def.store || "", (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { store: v })),
       )}
-      ${signalFieldRow("Version", String(def.version || 1), (/** @type {string} */ v) =>
+      ${signalFieldRow("Version", String(def.version || 1), (v: string) =>
         transactDoc(activeTab.value, (t) =>
           mutateUpdateDef(t, name, { version: parseInt(v, 10) || 1 }),
         ),
@@ -789,10 +776,10 @@ function renderDataSourceFields(
   }
   if (proto === "Cookie") {
     return html`
-      ${signalFieldRow("Cookie", def.name || "", (/** @type {string} */ v) =>
+      ${signalFieldRow("Cookie", def.name || "", (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { name: v })),
       )}
-      ${signalFieldRow("Default", String(def.default || ""), (/** @type {string} */ v) =>
+      ${signalFieldRow("Default", String(def.default || ""), (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: v })),
       )}
     `;
@@ -806,7 +793,7 @@ function renderDataSourceFields(
         : proto === "FormData"
           ? JSON.stringify(def.fields || {}, null, 2)
           : "";
-    return textareaRow(fieldLabel, defaultStr, (/** @type {string} */ v) => {
+    return textareaRow(fieldLabel, defaultStr, (v: string) => {
       try {
         transactDoc(activeTab.value, (t) =>
           mutateUpdateDef(t, name, { [fieldName]: JSON.parse(v) }),
@@ -820,27 +807,27 @@ function renderDataSourceFields(
 
 /** Function fields for signal editor */
 function renderFunctionFields(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-  /** @type {Function} */ textareaRow,
-  /** @type {SignalsPanelCtx} */ ctx,
+  S: SignalsPanelState,
+  name: string,
+  def: SignalDef,
+  textareaRow: (
+    label: string,
+    value: string,
+    onChange: (value: string) => void,
+    opts?: { minHeight?: string; mono?: boolean },
+  ) => import("lit-html").TemplateResult,
+  ctx: SignalsPanelCtx,
 ) {
-  const descriptionField = signalFieldRow(
-    "Description",
-    def.description || "",
-    (/** @type {string} */ v) =>
-      transactDoc(activeTab.value, (t) =>
-        mutateUpdateDef(t, name, { description: v || undefined }),
-      ),
+  const descriptionField = signalFieldRow("Description", def.description || "", (v: string) =>
+    transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { description: v || undefined })),
   );
 
   const bodyField = def.$src
     ? html`
-        ${signalFieldRow("Source", def.$src || "", (/** @type {string} */ v) =>
+        ${signalFieldRow("Source", def.$src || "", (v: string) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $src: v || undefined })),
         )}
-        ${signalFieldRow("Export", def.$export || "", (/** @type {string} */ v) =>
+        ${signalFieldRow("Export", def.$export || "", (v: string) =>
           transactDoc(activeTab.value, (t) =>
             mutateUpdateDef(t, name, { $export: v || undefined }),
           ),
@@ -865,8 +852,8 @@ function renderFunctionFields(
           class="field-input"
           style="min-height:60px;font-family:monospace;font-size:11px"
           .value=${def.body || ""}
-          @input=${(/** @type {Event} */ e) => {
-            const v = /** @type {HTMLInputElement} */ (e.target).value;
+          @input=${(e: Event) => {
+            const v = (e.target as HTMLInputElement).value;
             transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { body: v }));
           }}
         ></textarea>
@@ -882,10 +869,10 @@ function renderFunctionFields(
 
 /** Render CEM parameter editor with basic/advanced toggle. */
 function renderParameterEditorTemplate(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-  /** @type {SignalsPanelCtx} */ ctx,
+  S: SignalsPanelState,
+  name: string,
+  def: SignalDef,
+  ctx: SignalsPanelCtx,
 ) {
   const params = (def.parameters || []).map(normParam);
   const isAdvanced = advancedParamOpen.has(name);
@@ -899,7 +886,7 @@ function renderParameterEditorTemplate(
       widget: html`
         <div style="display:flex;flex-wrap:wrap;gap:4px;align-items:center">
           ${params.map(
-            (/** @type {CemParameter} */ p, /** @type {number} */ i) => html`
+            (p: CemParameter, i: number) => html`
               <span
                 style="display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:3px;background:var(--bg-hover);font-size:11px;font-family:monospace"
               >
@@ -909,12 +896,8 @@ function renderParameterEditorTemplate(
                   @click=${() => {
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateDef(t, name, {
-                        parameters: params.filter(
-                          (/** @type {unknown} */ _, /** @type {number} */ j) => j !== i,
-                        ).length
-                          ? params.filter(
-                              (/** @type {unknown} */ _, /** @type {number} */ j) => j !== i,
-                            )
+                        parameters: params.filter((_: unknown, j: number) => j !== i).length
+                          ? params.filter((_: unknown, j: number) => j !== i)
                           : undefined,
                       }),
                     );
@@ -928,14 +911,11 @@ function renderParameterEditorTemplate(
             class="field-input"
             style="width:60px;flex:0 0 auto;font-size:11px"
             placeholder="+"
-            @keydown=${(/** @type {KeyboardEvent} */ e) => {
-              if (e.key === "Enter" && /** @type {HTMLInputElement} */ (e.target).value.trim()) {
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === "Enter" && (e.target as HTMLInputElement).value.trim()) {
                 transactDoc(activeTab.value, (t) =>
                   mutateUpdateDef(t, name, {
-                    parameters: [
-                      ...params,
-                      { name: /** @type {HTMLInputElement} */ (e.target).value.trim() },
-                    ],
+                    parameters: [...params, { name: (e.target as HTMLInputElement).value.trim() }],
                   }),
                 );
               }
@@ -962,16 +942,16 @@ function renderParameterEditorTemplate(
     widget: html`
       <div style="display:flex;flex-direction:column;gap:4px">
         ${params.map(
-          (/** @type {CemParameter} */ p, /** @type {number} */ i) => html`
+          (p: CemParameter, i: number) => html`
             <div style="display:flex;gap:4px;align-items:center">
               <input
                 class="field-input"
                 .value=${p.name || ""}
                 placeholder="name"
                 style="flex:1"
-                @change=${(/** @type {Event} */ e) => {
+                @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = { ...next[i], name: /** @type {HTMLInputElement} */ (e.target).value };
+                  next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -982,14 +962,11 @@ function renderParameterEditorTemplate(
                 .value=${p.type?.text || ""}
                 placeholder="type"
                 style="flex:1"
-                @change=${(/** @type {Event} */ e) => {
+                @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = {
-                    ...next[i],
-                    type: /** @type {HTMLInputElement} */ (e.target).value
-                      ? { text: /** @type {HTMLInputElement} */ (e.target).value }
-                      : undefined,
-                  };
+                  const val = (e.target as HTMLInputElement).value;
+                  const { type: _t, ...rest } = next[i];
+                  next[i] = val ? { ...rest, type: { text: val } } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -1000,12 +977,11 @@ function renderParameterEditorTemplate(
                 .value=${p.description || ""}
                 placeholder="desc"
                 style="flex:2"
-                @change=${(/** @type {Event} */ e) => {
+                @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = {
-                    ...next[i],
-                    description: /** @type {HTMLInputElement} */ (e.target).value || undefined,
-                  };
+                  const val = (e.target as HTMLInputElement).value;
+                  const { description: _d, ...rest } = next[i];
+                  next[i] = val ? { ...rest, description: val } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -1015,12 +991,11 @@ function renderParameterEditorTemplate(
                 type="checkbox"
                 title="optional"
                 .checked=${!!p.optional}
-                @change=${(/** @type {Event} */ e) => {
+                @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = {
-                    ...next[i],
-                    optional: /** @type {HTMLInputElement} */ (e.target).checked || undefined,
-                  };
+                  const checked = (e.target as HTMLInputElement).checked;
+                  const { optional: _o, ...rest } = next[i];
+                  next[i] = checked ? { ...rest, optional: true } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -1029,9 +1004,7 @@ function renderParameterEditorTemplate(
               <span
                 style="cursor:pointer;opacity:0.5"
                 @click=${() => {
-                  const next = params.filter(
-                    (/** @type {unknown} */ _, /** @type {number} */ j) => j !== i,
-                  );
+                  const next = params.filter((_: unknown, j: number) => j !== i);
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next.length ? next : undefined }),
                   );
@@ -1064,12 +1037,8 @@ function renderParameterEditorTemplate(
 }
 
 /** Render CEM emits editor for function state entries. */
-function renderEmitsEditorTemplate(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-) {
-  const emits = /** @type {CemEvent[]} */ (def.emits || []);
+function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: SignalDef) {
+  const emits = def.emits || ([] as CemEvent[]);
   if (emits.length === 0 && !isCustomElementDoc(S)) return nothing;
 
   return html`
@@ -1079,16 +1048,16 @@ function renderEmitsEditorTemplate(
       Emits
     </div>
     ${emits.map(
-      (/** @type {CemEvent} */ ev, /** @type {number} */ i) => html`
+      (ev: CemEvent, i: number) => html`
         <div style="display:flex;gap:4px;align-items:center;margin-bottom:4px">
           <input
             class="field-input"
             .value=${ev.name || ""}
             placeholder="event name"
             style="flex:1"
-            @change=${(/** @type {Event} */ e) => {
+            @change=${(e: Event) => {
               const next = [...emits];
-              next[i] = { ...next[i], name: /** @type {HTMLInputElement} */ (e.target).value };
+              next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
           />
@@ -1097,14 +1066,11 @@ function renderEmitsEditorTemplate(
             .value=${ev.type?.text || ""}
             placeholder="type"
             style="flex:1"
-            @change=${(/** @type {Event} */ e) => {
+            @change=${(e: Event) => {
               const next = [...emits];
-              next[i] = {
-                ...next[i],
-                type: /** @type {HTMLInputElement} */ (e.target).value
-                  ? { text: /** @type {HTMLInputElement} */ (e.target).value }
-                  : undefined,
-              };
+              const val = (e.target as HTMLInputElement).value;
+              const { type: _t, ...rest } = next[i];
+              next[i] = val ? { ...rest, type: { text: val } } : rest;
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
           />
@@ -1113,12 +1079,11 @@ function renderEmitsEditorTemplate(
             .value=${ev.description || ""}
             placeholder="description"
             style="flex:2"
-            @change=${(/** @type {Event} */ e) => {
+            @change=${(e: Event) => {
               const next = [...emits];
-              next[i] = {
-                ...next[i],
-                description: /** @type {HTMLInputElement} */ (e.target).value || undefined,
-              };
+              const val = (e.target as HTMLInputElement).value;
+              const { description: _d, ...rest } = next[i];
+              next[i] = val ? { ...rest, description: val } : rest;
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
           />
@@ -1127,10 +1092,8 @@ function renderEmitsEditorTemplate(
             @click=${() => {
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, {
-                  emits: emits.filter(
-                    (/** @type {unknown} */ _, /** @type {number} */ j) => j !== i,
-                  ).length
-                    ? emits.filter((/** @type {unknown} */ _, /** @type {number} */ j) => j !== i)
+                  emits: emits.filter((_: unknown, j: number) => j !== i).length
+                    ? emits.filter((_: unknown, j: number) => j !== i)
                     : undefined,
                 }),
               );
@@ -1164,10 +1127,10 @@ function renderEmitsEditorTemplate(
  * @param {Record<string, unknown>} [parentDef] - Parent def for resolving dependent refs
  * @returns {string[] | undefined}
  */
-function resolveSchemaEnum(enumDef, parentDef) {
+function resolveSchemaEnum(enumDef: unknown, parentDef?: Record<string, unknown>) {
   if (Array.isArray(enumDef)) return enumDef;
   if (enumDef && typeof enumDef === "object") {
-    const ref = /** @type {Record<string, unknown>} */ (enumDef).$ref;
+    const ref = (enumDef as Record<string, unknown>).$ref;
     if (ref === "#/$context/contentTypes") {
       return Object.keys(projectState?.projectConfig?.contentTypes ?? {});
     }
@@ -1175,13 +1138,13 @@ function resolveSchemaEnum(enumDef, parentDef) {
       const match = ref.match(/#\/\$context\/contentTypes\/\{@(\w+)\}\/schema\/properties/);
       if (match && parentDef) {
         const paramName = match[1];
-        const typeName = /** @type {string | undefined} */ (parentDef[paramName]);
+        const typeName = parentDef[paramName] as string | undefined;
         if (typeName) {
-          const ct = /** @type {Record<string, unknown> | undefined} */ (
-            projectState?.projectConfig?.contentTypes?.[typeName]
-          );
-          const schema = /** @type {Record<string, unknown> | undefined} */ (ct?.schema);
-          const props = /** @type {Record<string, unknown> | undefined} */ (schema?.properties);
+          const ct = projectState?.projectConfig?.contentTypes?.[typeName] as
+            | Record<string, unknown>
+            | undefined;
+          const schema = ct?.schema as Record<string, unknown> | undefined;
+          const props = schema?.properties as Record<string, unknown> | undefined;
           if (props) return Object.keys(props);
         }
       }
@@ -1204,7 +1167,13 @@ function resolveSchemaEnum(enumDef, parentDef) {
  * @param {(val: unknown) => void} onChange
  * @param {Record<string, unknown>} [parentDef] - Parent def for resolving dependent enum refs
  */
-function renderInlineField(key, schema, value, onChange, parentDef) {
+function renderInlineField(
+  key: string,
+  schema: Record<string, unknown>,
+  value: unknown,
+  onChange: (val: unknown) => void,
+  parentDef?: Record<string, unknown>,
+) {
   const enumValues = resolveSchemaEnum(schema.enum, parentDef);
 
   if (enumValues) {
@@ -1212,25 +1181,22 @@ function renderInlineField(key, schema, value, onChange, parentDef) {
       size="s"
       label=${key}
       value=${value !== undefined ? String(value) : "__none__"}
-      @change=${(/** @type {Event} */ e) =>
+      @change=${(e: Event) =>
         onChange(
-          /** @type {HTMLInputElement} */ (e.target).value === "__none__"
+          (e.target as HTMLInputElement).value === "__none__"
             ? undefined
-            : /** @type {HTMLInputElement} */ (e.target).value,
+            : (e.target as HTMLInputElement).value,
         )}
     >
       <sp-menu-item value="__none__">—</sp-menu-item>
-      ${enumValues.map(
-        (/** @type {string} */ v) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`,
-      )}
+      ${enumValues.map((v: string) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`)}
     </sp-picker>`;
   }
   if (schema.type === "boolean") {
     return html`<sp-switch
       size="s"
       ?checked=${!!value}
-      @change=${(/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
+      @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
       >${key}</sp-switch
     >`;
   }
@@ -1240,11 +1206,11 @@ function renderInlineField(key, schema, value, onChange, parentDef) {
       label=${key}
       .value=${value !== undefined ? value : nothing}
       step=${schema.type === "integer" ? "1" : nothing}
-      @change=${(/** @type {Event} */ e) => {
+      @change=${(e: Event) => {
         const parsed =
           schema.type === "integer"
-            ? parseInt(/** @type {HTMLInputElement} */ (e.target).value, 10)
-            : parseFloat(/** @type {HTMLInputElement} */ (e.target).value);
+            ? parseInt((e.target as HTMLInputElement).value, 10)
+            : parseFloat((e.target as HTMLInputElement).value);
         onChange(isNaN(parsed) ? undefined : parsed);
       }}
     ></sp-number-field>`;
@@ -1254,8 +1220,7 @@ function renderInlineField(key, schema, value, onChange, parentDef) {
     label=${key}
     placeholder=${key}
     .value=${value ?? ""}
-    @input=${(/** @type {Event} */ e) =>
-      onChange(/** @type {HTMLInputElement} */ (e.target).value || undefined)}
+    @input=${(e: Event) => onChange((e.target as HTMLInputElement).value || undefined)}
   ></sp-textfield>`;
 }
 
@@ -1264,11 +1229,11 @@ function renderInlineField(key, schema, value, onChange, parentDef) {
  * appropriate form controls.
  */
 export function renderSchemaFieldsTemplate(
-  /** @type {JsonSchema | null | undefined} */ schema,
-  /** @type {SignalDef} */ def,
-  /** @type {string} */ name,
-  /** @type {SignalsPanelState} */ _S,
-  /** @type {SignalsPanelCtx | null} */ ctx = null,
+  schema: JsonSchema | null | undefined,
+  def: SignalDef,
+  name: string,
+  _S: SignalsPanelState,
+  ctx: SignalsPanelCtx | null = null,
 ) {
   if (!schema?.properties) return nothing;
 
@@ -1291,34 +1256,35 @@ export function renderSchemaFieldsTemplate(
               : ps.default !== undefined
                 ? String(ps.default)
                 : "__none__"}
-            @change=${(/** @type {Event} */ e) =>
+            @change=${(e: Event) =>
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, {
-                  [prop]: /** @type {HTMLInputElement} */ (e.target).value === "__none__"
-                    ? undefined
-                    : /** @type {HTMLInputElement} */ (e.target).value,
+                  [prop]:
+                    (e.target as HTMLInputElement).value === "__none__"
+                      ? undefined
+                      : (e.target as HTMLInputElement).value,
                 }),
               )}
           >
             ${!required.has(prop) ? html`<sp-menu-item value="__none__">—</sp-menu-item>` : nothing}
             ${enumValues.map(
-              (/** @type {string} */ val) => html`<sp-menu-item value=${val}>${val}</sp-menu-item>`,
+              (val: string) => html`<sp-menu-item value=${val}>${val}</sp-menu-item>`,
             )}
           </sp-picker>
         `;
       } else if (ps.type === "boolean") {
         control = html`<sp-checkbox
           ?checked=${currentValue ?? ps.default ?? false}
-          @change=${(/** @type {Event} */ e) =>
+          @change=${(e: Event) =>
             transactDoc(activeTab.value, (t) =>
               mutateUpdateDef(t, name, {
-                [prop]: /** @type {HTMLInputElement} */ (e.target).checked,
+                [prop]: (e.target as HTMLInputElement).checked,
               }),
             )}
         ></sp-checkbox>`;
       } else if (ps.type === "integer" || ps.type === "number") {
         /** @type {ReturnType<typeof setTimeout> | undefined} */
-        let debounce;
+        let debounce: ReturnType<typeof setTimeout> | undefined;
         control = html`<sp-number-field
           size="s"
           min=${ifDefined(ps.minimum)}
@@ -1326,13 +1292,13 @@ export function renderSchemaFieldsTemplate(
           step=${ps.type === "integer" ? "1" : nothing}
           .value=${currentValue !== undefined ? currentValue : nothing}
           placeholder=${ps.default != null ? String(ps.default) : nothing}
-          @change=${(/** @type {Event} */ e) => {
+          @change=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(() => {
               const parsed =
                 ps.type === "integer"
-                  ? parseInt(/** @type {HTMLInputElement} */ (e.target).value, 10)
-                  : parseFloat(/** @type {HTMLInputElement} */ (e.target).value);
+                  ? parseInt((e.target as HTMLInputElement).value, 10)
+                  : parseFloat((e.target as HTMLInputElement).value);
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, { [prop]: isNaN(parsed) ? undefined : parsed }),
               );
@@ -1342,18 +1308,16 @@ export function renderSchemaFieldsTemplate(
       } else if (ps.format === "json-schema") {
         const hasValue =
           currentValue && typeof currentValue === "object" && Object.keys(currentValue).length > 0;
-        const cv = /** @type {Record<string, unknown>} */ (currentValue);
+        const cv = currentValue as Record<string, unknown>;
         const isRef = hasValue && cv.$ref;
         /** @type {ReturnType<typeof setTimeout> | undefined} */
-        let debounce;
+        let debounce: ReturnType<typeof setTimeout> | undefined;
         control = html`
           <div class="schema-param-editor">
             ${hasValue && !isRef && cv.properties
               ? html`
                   <div style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px">
-                    ${Object.entries(
-                      /** @type {Record<string, Record<string, unknown>>} */ (cv.properties),
-                    ).map(
+                    ${Object.entries(cv.properties as Record<string, Record<string, unknown>>).map(
                       ([k, v]) => html`
                         <span
                           style="background:var(--bg-alt);padding:1px 6px;border-radius:3px;font-size:10px;color:var(--fg-dim)"
@@ -1374,13 +1338,13 @@ export function renderSchemaFieldsTemplate(
               })}
               .value=${currentValue !== undefined ? JSON.stringify(currentValue, null, 2) : ""}
               placeholder=${ps.description ?? "JSON Schema defining the data shape\u2026"}
-              @input=${(/** @type {Event} */ e) => {
+              @input=${(e: Event) => {
                 clearTimeout(debounce);
                 debounce = setTimeout(() => {
                   try {
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateDef(t, name, {
-                        [prop]: JSON.parse(/** @type {HTMLInputElement} */ (e.target).value),
+                        [prop]: JSON.parse((e.target as HTMLInputElement).value),
                       }),
                     );
                   } catch {}
@@ -1392,13 +1356,11 @@ export function renderSchemaFieldsTemplate(
       } else if (ps.type === "array" && ps.items?.type === "object" && ps.items?.properties) {
         // Array of objects with defined schema → multi-row inline form
         const rows = Array.isArray(currentValue) ? currentValue : [];
-        const itemProps = /** @type {Record<string, Record<string, unknown>>} */ (
-          ps.items.properties
-        );
+        const itemProps = ps.items.properties as Record<string, Record<string, unknown>>;
         control = html`
           <div class="array-object-field">
             ${rows.map(
-              (/** @type {Record<string, unknown>} */ row, /** @type {number} */ idx) => html`
+              (row: Record<string, unknown>, idx: number) => html`
                 <div
                   class="array-object-row"
                   style="display:flex;gap:4px;align-items:center;margin-bottom:4px"
@@ -1422,9 +1384,7 @@ export function renderSchemaFieldsTemplate(
                     quiet
                     size="s"
                     @click=${() => {
-                      const updated = rows.filter(
-                        (/** @type {unknown} */ _, /** @type {number} */ i) => i !== idx,
-                      );
+                      const updated = rows.filter((_: unknown, i: number) => i !== idx);
                       transactDoc(activeTab.value, (t) =>
                         mutateUpdateDef(t, name, { [prop]: updated.length ? updated : undefined }),
                       );
@@ -1439,13 +1399,12 @@ export function renderSchemaFieldsTemplate(
             <sp-action-button
               quiet
               size="s"
-              @click=${(/** @type {Event} */ e) => {
+              @click=${(e: Event) => {
                 e.stopPropagation();
-                /** @type {Record<string, unknown>} */
-                const newRow = {};
+                const newRow: Record<string, unknown> = {};
                 for (const [k, v] of Object.entries(itemProps)) {
-                  if (/** @type {Record<string, unknown>} */ (v).default !== undefined)
-                    newRow[k] = /** @type {Record<string, unknown>} */ (v).default;
+                  if ((v as Record<string, unknown>).default !== undefined)
+                    newRow[k] = (v as Record<string, unknown>).default;
                 }
                 transactDoc(activeTab.value, (t) =>
                   mutateUpdateDef(t, name, { [prop]: [...rows, newRow] }),
@@ -1458,20 +1417,20 @@ export function renderSchemaFieldsTemplate(
         `;
       } else if (ps.type === "array" || ps.type === "object") {
         /** @type {ReturnType<typeof setTimeout> | undefined} */
-        let debounce;
+        let debounce: ReturnType<typeof setTimeout> | undefined;
         control = html`<sp-textfield
           multiline
           size="s"
           style="min-height:40px"
           .value=${currentValue !== undefined ? JSON.stringify(currentValue, null, 2) : ""}
           placeholder=${ps.default !== undefined ? JSON.stringify(ps.default) : nothing}
-          @input=${(/** @type {Event} */ e) => {
+          @input=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(() => {
               try {
                 transactDoc(activeTab.value, (t) =>
                   mutateUpdateDef(t, name, {
-                    [prop]: JSON.parse(/** @type {HTMLInputElement} */ (e.target).value),
+                    [prop]: JSON.parse((e.target as HTMLInputElement).value),
                   }),
                 );
               } catch {}
@@ -1480,20 +1439,20 @@ export function renderSchemaFieldsTemplate(
         ></sp-textfield>`;
       } else {
         /** @type {ReturnType<typeof setTimeout> | undefined} */
-        let debounce;
+        let debounce: ReturnType<typeof setTimeout> | undefined;
         const ph = ps.default !== undefined ? String(ps.default) : (ps.examples?.[0] ?? "");
         control = html`<sp-textfield
           size="s"
           .value=${currentValue ?? ""}
           placeholder=${ph || nothing}
           title=${ps.description || nothing}
-          @input=${(/** @type {Event} */ e) => {
+          @input=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(
               () =>
                 transactDoc(activeTab.value, (t) =>
                   mutateUpdateDef(t, name, {
-                    [prop]: /** @type {HTMLInputElement} */ (e.target).value || undefined,
+                    [prop]: (e.target as HTMLInputElement).value || undefined,
                   }),
                 ),
               400,
@@ -1518,14 +1477,13 @@ export function renderSchemaFieldsTemplate(
  * schema-driven config fields.
  */
 export function renderExternalPrototypeEditorTemplate(
-  /** @type {SignalsPanelState} */ S,
-  /** @type {string} */ name,
-  /** @type {SignalDef} */ def,
-  /** @type {SignalsPanelCtx} */ ctx,
+  S: SignalsPanelState,
+  name: string,
+  def: SignalDef,
+  ctx: SignalsPanelCtx,
 ) {
   // Schema-driven config fields (async with cache)
-  /** @type {import("lit-html").TemplateResult | typeof nothing} */
-  let schemaContent = nothing;
+  let schemaContent: import("lit-html").TemplateResult | typeof nothing = nothing;
   const importedPath = def.$prototype
     ? projectState?.projectConfig?.imports?.[def.$prototype]
     : null;
@@ -1549,7 +1507,9 @@ export function renderExternalPrototypeEditorTemplate(
       >
         Loading schema…
       </div>`;
-      fetchPluginSchema(def, /** @type {{ documentPath?: string }} */ (S)).then((schema) => {
+      fetchPluginSchema(def, {
+        ...(S.documentPath != null && { documentPath: S.documentPath }),
+      }).then((schema) => {
         if (schema) ctx.renderLeftPanel();
       });
     }
@@ -1561,11 +1521,11 @@ export function renderExternalPrototypeEditorTemplate(
           ${def.$prototype}
         </div>`
       : html`
-          ${signalFieldRow("Source", def.$src || "", (/** @type {string} */ v) => {
+          ${signalFieldRow("Source", def.$src || "", (v: string) => {
             transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $src: v || undefined }));
             pluginSchemaCache.delete(`${v}::${def.$prototype}`);
           })}
-          ${signalFieldRow("Prototype", def.$prototype || "", (/** @type {string} */ v) => {
+          ${signalFieldRow("Prototype", def.$prototype || "", (v: string) => {
             transactDoc(activeTab.value, (t) =>
               mutateUpdateDef(t, name, { $prototype: v || undefined }),
             );
@@ -1573,7 +1533,7 @@ export function renderExternalPrototypeEditorTemplate(
           })}
         `}
     ${def.$export
-      ? signalFieldRow("Export", def.$export || "", (/** @type {string} */ v) =>
+      ? signalFieldRow("Export", def.$export || "", (v: string) =>
           transactDoc(activeTab.value, (t) =>
             mutateUpdateDef(t, name, { $export: v || undefined }),
           ),