@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/properties-panel.js

@@ -37,14 +37,14 @@ import htmlMeta from "../../data/html-meta.json";
 /**
  * Convert a human-friendly name like "Tablet" to a $media key "--tablet"
  *
- * @param {any} name
+ * @param {string} name
  */
 function friendlyNameToMedia(name) {
   return friendlyNameToVar(name, "--");
 }
 
 /** Check if a selection path is inside a $map template (contains [..., "children", "map", ...]). */
-function isInsideMapTemplate(/** @type {any} */ path) {
+function isInsideMapTemplate(/** @type {JxPath | null} */ path) {
   if (!path) return false;
   for (let i = 0; i < path.length - 1; i++) {
     if (path[i] === "children" && path[i + 1] === "map") return true;
@@ -56,13 +56,28 @@ function isInsideMapTemplate(/** @type {any} */ path) {
  * Field row with binding toggle — allows switching between static value and signal binding.
  * rawValue can be a string/bool (static) or { $ref: "..." } (bound).
  */
+/** @typedef {{ value: string; label: string }} SignalOption */
+
+/**
+ * @typedef {{
+ *   $section: string;
+ *   $order: number;
+ *   $elements?: string[];
+ *   $label?: string;
+ *   $input?: string;
+ *   $shorthand?: boolean;
+ *   type?: string;
+ *   [key: string]: unknown;
+ * }} HtmlMetaEntry
+ */
+
 function bindableFieldRow(
-  /** @type {any} */ label,
-  /** @type {any} */ type,
-  /** @type {any} */ rawValue,
-  /** @type {any} */ onChange,
-  /** @type {any} */ filterFn = null,
-  /** @type {any} */ extraSignals = null,
+  /** @type {string} */ label,
+  /** @type {string} */ type,
+  /** @type {string | number | boolean | { $ref: string } | null | undefined} */ rawValue,
+  /** @type {(v: JsonValue) => void} */ onChange,
+  /** @type {((d: import("./signals-panel.js").SignalDef) => boolean) | null} */ filterFn = null,
+  /** @type {SignalOption[] | null} */ extraSignals = null,
 ) {
   const tab = activeTab.value;
   const defs = tab.doc.document.state || {};
@@ -72,23 +87,29 @@ function bindableFieldRow(
     filterFn ? filterFn(d) : !d.$handler && d.$prototype !== "Function",
   );
 
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let debounce;
-  const onInput = (/** @type {any} */ e) => {
+  const onInput = (/** @type {Event} */ e) => {
     clearTimeout(debounce);
-    debounce = setTimeout(() => onChange(e.target.value), 400);
+    debounce = setTimeout(() => onChange(/** @type {HTMLInputElement} */ (e.target).value), 400);
   };
 
   const staticVal = isBound ? "" : (rawValue ?? "");
   const staticTpl =
     type === "textarea"
-      ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput}></sp-textfield>`
+      ? html`<sp-textfield
+          multiline
+          size="s"
+          .value=${live(staticVal)}
+          @input=${onInput}
+        ></sp-textfield>`
       : type === "checkbox"
         ? html`<sp-checkbox
             ?checked=${!!staticVal}
-            @change=${(/** @type {any} */ e) => onChange(e.target.checked)}
+            @change=${(/** @type {Event} */ e) =>
+              onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
           ></sp-checkbox>`
-        : html`<sp-textfield size="s" value=${staticVal} @input=${onInput}></sp-textfield>`;
+        : html`<sp-textfield size="s" .value=${live(staticVal)} @input=${onInput}></sp-textfield>`;
 
   const boundTpl = html`
     <sp-picker
@@ -96,8 +117,9 @@ function bindableFieldRow(
       quiet
       placeholder="— select signal —"
       value=${isBound && rawValue.$ref ? rawValue.$ref : nothing}
-      @change=${(/** @type {any} */ e) => {
-        if (e.target.value) onChange({ $ref: e.target.value });
+      @change=${(/** @type {Event} */ e) => {
+        if (/** @type {HTMLInputElement} */ (e.target).value)
+          onChange({ $ref: /** @type {HTMLInputElement} */ (e.target).value });
         else onChange(undefined);
       }}
     >
@@ -108,7 +130,7 @@ function bindableFieldRow(
         ? html`
             <sp-menu-divider></sp-menu-divider>
             ${extraSignals.map(
-              (/** @type {any} */ sig) =>
+              (/** @type {SignalOption} */ sig) =>
                 html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
             )}
           `
@@ -129,7 +151,7 @@ function bindableFieldRow(
     } else {
       if (signalDefs.length > 0) {
         onChange({ $ref: `#/state/${signalDefs[0][0]}` });
-      } else if (extraSignals?.length > 0) {
+      } else if (extraSignals && extraSignals.length > 0) {
         onChange({ $ref: extraSignals[0].value });
       }
     }
@@ -152,13 +174,13 @@ function bindableFieldRow(
 
 /** Key-value pair row for styles / attributes */
 function kvRow(
-  /** @type {any} */ key,
-  /** @type {any} */ value,
-  /** @type {any} */ onChange,
-  /** @type {any} */ onDelete,
-  /** @type {any} */ datalistId = null,
+  /** @type {string} */ key,
+  /** @type {string} */ value,
+  /** @type {(newKey: string, newVal: string) => void} */ onChange,
+  /** @type {() => void} */ onDelete,
+  /** @type {string | null} */ datalistId = null,
 ) {
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let debounceTimer;
   let currentKey = key;
   let currentVal = value;
@@ -172,25 +194,31 @@ function kvRow(
       <sp-textfield
         size="s"
         class="kv-key"
-        value=${key}
-        @input=${(/** @type {any} */ e) => {
-          currentKey = e.target.value;
+        .value=${live(key)}
+        @input=${(/** @type {Event} */ e) => {
+          currentKey = /** @type {HTMLInputElement} */ (e.target).value;
           commit();
         }}
         @change=${datalistId === "css-props"
-          ? (/** @type {any} */ e) => {
-              const el = e.target.closest(".kv-row")?.querySelector(".kv-val");
-              if (el) el.setAttribute("placeholder", getCssInitialMap().get(e.target.value) || "");
+          ? (/** @type {Event} */ e) => {
+              const el = /** @type {HTMLInputElement} */ (e.target)
+                .closest(".kv-row")
+                ?.querySelector(".kv-val");
+              if (el)
+                el.setAttribute(
+                  "placeholder",
+                  getCssInitialMap().get(/** @type {HTMLInputElement} */ (e.target).value) || "",
+                );
             }
           : nothing}
       ></sp-textfield>
       <sp-textfield
         size="s"
         class="kv-val"
-        value=${value}
+        .value=${live(value)}
         placeholder=${placeholder}
-        @input=${(/** @type {any} */ e) => {
-          currentVal = e.target.value;
+        @input=${(/** @type {Event} */ e) => {
+          currentVal = /** @type {HTMLInputElement} */ (e.target).value;
           commit();
         }}
       ></sp-textfield>
@@ -205,23 +233,23 @@ function kvRow(
 
 /** Repeater fields template */
 function renderRepeaterFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ _mapSignals,
+  /** @type {JxMutableNode} */ node,
+  /** @type {JxPath} */ path,
+  /** @type {SignalOption[] | null} */ _mapSignals,
 ) {
   return html`
-    ${bindableFieldRow("Items", "text", node.items, (/** @type {any} */ v) =>
+    ${bindableFieldRow("Items", "text", node.items, (/** @type {JsonValue} */ v) =>
       transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "items", v)),
     )}
     ${node.filter
-      ? bindableFieldRow("Filter", "text", node.filter, (/** @type {any} */ v) =>
+      ? bindableFieldRow("Filter", "text", node.filter, (/** @type {JsonValue} */ v) =>
           transactDoc(activeTab.value, (t) =>
             mutateUpdateProperty(t, path, "filter", v || undefined),
           ),
         )
       : nothing}
     ${node.sort
-      ? bindableFieldRow("Sort", "text", node.sort, (/** @type {any} */ v) =>
+      ? bindableFieldRow("Sort", "text", node.sort, (/** @type {JsonValue} */ v) =>
           transactDoc(activeTab.value, (t) =>
             mutateUpdateProperty(t, path, "sort", v || undefined),
           ),
@@ -266,9 +294,9 @@ function renderRepeaterFieldsTemplate(
 
 /** Switch fields template */
 function renderSwitchFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ mapSignals,
+  /** @type {JxMutableNode} */ node,
+  /** @type {JxPath} */ path,
+  /** @type {SignalOption[] | null} */ mapSignals,
 ) {
   const caseNames = Object.keys(node.cases || {});
   return html`
@@ -276,7 +304,7 @@ function renderSwitchFieldsTemplate(
       "Expression",
       "text",
       node.$switch,
-      (/** @type {any} */ v) =>
+      (/** @type {JsonValue} */ v) =>
         transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "$switch", v)),
       null,
       mapSignals,
@@ -287,20 +315,28 @@ function renderSwitchFieldsTemplate(
       Cases
     </div>
     ${caseNames.map((caseName) => {
-      /** @type {any} */
+      /** @type {ReturnType<typeof setTimeout> | undefined} */
       let debounce;
       return html`
         <div class="field-row" style="display:flex;align-items:center;gap:4px;margin-bottom:3px">
           <input
             class="field-input"
-            value=${caseName}
+            .value=${live(caseName)}
             style="flex:1"
-            @input=${(/** @type {any} */ e) => {
+            @input=${(/** @type {Event} */ e) => {
               clearTimeout(debounce);
               debounce = setTimeout(() => {
-                if (e.target.value && e.target.value !== caseName)
+                if (
+                  /** @type {HTMLInputElement} */ (e.target).value &&
+                  /** @type {HTMLInputElement} */ (e.target).value !== caseName
+                )
                   transactDoc(activeTab.value, (t) =>
-                    mutateRenameSwitchCase(t, path, caseName, e.target.value),
+                    mutateRenameSwitchCase(
+                      t,
+                      path,
+                      caseName,
+                      /** @type {HTMLInputElement} */ (e.target).value,
+                    ),
                   );
               }, 500);
             }}
@@ -309,7 +345,7 @@ function renderSwitchFieldsTemplate(
             class="bind-toggle"
             title="Edit case"
             style="cursor:pointer"
-            @click=${(/** @type {any} */ e) => {
+            @click=${(/** @type {Event} */ e) => {
               e.stopPropagation();
               activeTab.value.session.selection = [...path, "cases", caseName];
             }}
@@ -317,7 +353,7 @@ function renderSwitchFieldsTemplate(
           >
           <span
             style="cursor:pointer;color:var(--danger);font-size:11px"
-            @click=${(/** @type {any} */ e) => {
+            @click=${(/** @type {Event} */ e) => {
               e.stopPropagation();
               transactDoc(activeTab.value, (t) => mutateRemoveSwitchCase(t, path, caseName));
             }}
@@ -340,9 +376,9 @@ function renderSwitchFieldsTemplate(
 
 /** Component props fields template */
 function renderComponentPropsFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ mapSignals,
+  /** @type {JxMutableNode} */ node,
+  /** @type {JxPath} */ path,
+  /** @type {SignalOption[] | null} */ mapSignals,
   /** @type {(path: string) => void} */ navigateToComponent,
 ) {
   const tab = activeTab.value;
@@ -351,11 +387,16 @@ function renderComponentPropsFieldsTemplate(
   const isNpm = comp.source === "npm";
   const currentVals = isNpm ? node.attributes || {} : node.$props || {};
   const updateFn = isNpm
-    ? (/** @type {string} */ name, /** @type {any} */ v) =>
+    ? (/** @type {string} */ name, /** @type {JsonValue} */ v) =>
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateAttribute(t, path, name, v === "" ? undefined : v),
+          mutateUpdateAttribute(
+            t,
+            path,
+            name,
+            v === "" ? undefined : /** @type {string | undefined} */ (v),
+          ),
         )
-    : (/** @type {string} */ name, /** @type {any} */ v) =>
+    : (/** @type {string} */ name, /** @type {JsonValue} */ v) =>
         transactDoc(activeTab.value, (t) => mutateUpdateProp(t, path, name, v));
 
   const defs = tab.doc.document.state || {};
@@ -365,139 +406,157 @@ function renderComponentPropsFieldsTemplate(
   const extraSignals = mapSignals;
 
   return html`
-    ${comp.props.map((/** @type {any} */ prop) => {
-      const rawValue = currentVals[prop.name];
-      const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
-      const hasVal = rawValue !== undefined && rawValue !== null;
-      const parsed = parseCemType(prop.type);
-      const onChange = (/** @type {any} */ v) => updateFn(prop.name, v);
-
-      const clearProp = (/** @type {any} */ e) => {
-        e.stopPropagation();
-        updateFn(prop.name, undefined);
-      };
-
-      const onToggleBind = () => {
-        if (isBound) {
-          const ref = rawValue.$ref;
-          const defName = ref.startsWith("#/state/") ? ref.slice(8) : ref;
-          const def = defs[defName];
-          let staticVal = "";
-          if (def && def.default !== undefined)
-            staticVal =
-              typeof def.default === "object" ? JSON.stringify(def.default) : String(def.default);
-          onChange(staticVal || undefined);
-        } else {
-          if (signalDefs.length > 0) {
-            onChange({ $ref: `#/state/${signalDefs[0][0]}` });
-          } else if (extraSignals?.length > 0) {
-            onChange({ $ref: extraSignals[0].value });
+    ${comp.props.map(
+      (
+        /** @type {{ name: string; type?: string; format?: string; description?: string }} */ prop,
+      ) => {
+        const rawValue = currentVals[prop.name];
+        const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
+        const hasVal = rawValue !== undefined && rawValue !== null;
+        const parsed = parseCemType(prop.type);
+        const onChange = (/** @type {JsonValue} */ v) => updateFn(prop.name, v);
+
+        const clearProp = (/** @type {Event} */ e) => {
+          e.stopPropagation();
+          updateFn(prop.name, undefined);
+        };
+
+        const onToggleBind = () => {
+          if (isBound) {
+            const ref = rawValue.$ref;
+            const defName = ref.startsWith("#/state/") ? ref.slice(8) : ref;
+            const def = defs[defName];
+            let staticVal = "";
+            if (def && def.default !== undefined)
+              staticVal =
+                typeof def.default === "object" ? JSON.stringify(def.default) : String(def.default);
+            onChange(staticVal || undefined);
+          } else {
+            if (signalDefs.length > 0) {
+              onChange({ $ref: `#/state/${signalDefs[0][0]}` });
+            } else if (extraSignals && extraSignals.length > 0) {
+              onChange({ $ref: extraSignals[0].value });
+            }
           }
-        }
-      };
-
-      const boundTpl = html`
-        <sp-picker
-          size="s"
-          quiet
-          placeholder="— select signal —"
-          value=${isBound && rawValue.$ref ? rawValue.$ref : nothing}
-          @change=${(/** @type {any} */ e) => {
-            if (e.target.value) onChange({ $ref: e.target.value });
-            else onChange(undefined);
-          }}
-        >
-          ${signalDefs.map(
-            ([defName]) =>
-              html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
-          )}
-          ${extraSignals
-            ? html`
-                <sp-menu-divider></sp-menu-divider>
-                ${extraSignals.map(
-                  (/** @type {any} */ sig) =>
-                    html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
-                )}
-              `
-            : nothing}
-        </sp-picker>
-      `;
+        };
 
-      /** @type {any} */
-      let debounce;
-      const staticVal = isBound ? "" : (rawValue ?? "");
-      /** @type {any} */
-      let widgetTpl;
-      if (prop.format === "image") {
-        widgetTpl = renderMediaPicker(prop.name, staticVal, onChange);
-      } else if (prop.format === "color") {
-        widgetTpl = renderColorSelector(prop.name, staticVal, onChange);
-      } else if (prop.format === "date") {
-        widgetTpl = html`<sp-textfield
-          size="s"
-          placeholder="YYYY-MM-DD"
-          value=${staticVal}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => onChange(e.target.value), 400);
-          }}
-        ></sp-textfield>`;
-      } else if (parsed.kind === "boolean") {
-        widgetTpl = html`<sp-checkbox
-          size="s"
-          .checked=${live(!!staticVal)}
-          @change=${(/** @type {any} */ e) => onChange(e.target.checked || undefined)}
-        ></sp-checkbox>`;
-      } else if (parsed.kind === "number") {
-        widgetTpl = html`<sp-number-field
-          size="s"
-          value=${staticVal}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => onChange(e.target.value), 400);
-          }}
-        ></sp-number-field>`;
-      } else if (parsed.kind === "combobox") {
-        const options = /** @type {string[]} */ (/** @type {any} */ (parsed).options);
-        widgetTpl = html`<jx-value-selector
-          .value=${String(staticVal)}
-          size="s"
-          placeholder="—"
-          .options=${options.map((o) => ({ value: o, label: camelToLabel(o) }))}
-          @change=${(/** @type {any} */ e) => onChange(e.detail?.value ?? e.target.value)}
-        ></jx-value-selector>`;
-      } else {
-        widgetTpl = html`<sp-textfield
-          size="s"
-          value=${staticVal}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => onChange(e.target.value), 400);
-          }}
-        ></sp-textfield>`;
-      }
-
-      return html`
-        <div class="style-row" data-prop=${prop.name}>
-          <div class="style-row-label">
-            ${hasVal
-              ? html`<span class="set-dot" title="Clear ${prop.name}" @click=${clearProp}></span>`
+        const boundTpl = html`
+          <sp-picker
+            size="s"
+            quiet
+            placeholder="— select signal —"
+            value=${isBound && rawValue.$ref ? rawValue.$ref : nothing}
+            @change=${(/** @type {Event} */ e) => {
+              if (/** @type {HTMLInputElement} */ (e.target).value)
+                onChange({ $ref: /** @type {HTMLInputElement} */ (e.target).value });
+              else onChange(undefined);
+            }}
+          >
+            ${signalDefs.map(
+              ([defName]) =>
+                html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
+            )}
+            ${extraSignals
+              ? html`
+                  <sp-menu-divider></sp-menu-divider>
+                  ${extraSignals.map(
+                    (/** @type {SignalOption} */ sig) =>
+                      html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
+                  )}
+                `
               : nothing}
-            <sp-field-label size="s" title=${prop.description || prop.name}
-              >${camelToLabel(prop.name)}</sp-field-label
-            >
-            <sp-action-button
-              size="xs"
-              quiet
-              title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
-              @click=${onToggleBind}
-              >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
-            >
+          </sp-picker>
+        `;
+
+        /** @type {ReturnType<typeof setTimeout> | undefined} */
+        let debounce;
+        const staticVal = isBound ? "" : (rawValue ?? "");
+        /** @type {import("lit-html").TemplateResult | undefined} */
+        let widgetTpl;
+        if (prop.format === "image") {
+          widgetTpl = renderMediaPicker(prop.name, staticVal, onChange);
+        } else if (prop.format === "color") {
+          widgetTpl = renderColorSelector(prop.name, staticVal, onChange);
+        } else if (prop.format === "date") {
+          widgetTpl = html`<sp-textfield
+            size="s"
+            placeholder="YYYY-MM-DD"
+            .value=${live(staticVal)}
+            @input=${(/** @type {Event} */ e) => {
+              clearTimeout(debounce);
+              debounce = setTimeout(
+                () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
+                400,
+              );
+            }}
+          ></sp-textfield>`;
+        } else if (parsed.kind === "boolean") {
+          widgetTpl = html`<sp-checkbox
+            size="s"
+            .checked=${live(!!staticVal)}
+            @change=${(/** @type {Event} */ e) =>
+              onChange(/** @type {HTMLInputElement} */ (e.target).checked || undefined)}
+          ></sp-checkbox>`;
+        } else if (parsed.kind === "number") {
+          widgetTpl = html`<sp-number-field
+            size="s"
+            .value=${live(staticVal)}
+            @input=${(/** @type {Event} */ e) => {
+              clearTimeout(debounce);
+              debounce = setTimeout(
+                () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
+                400,
+              );
+            }}
+          ></sp-number-field>`;
+        } else if (parsed.kind === "combobox") {
+          const options = /** @type {string[]} */ (
+            /** @type {{ options?: string[] }} */ (parsed).options
+          );
+          widgetTpl = html`<jx-value-selector
+            .value=${String(staticVal)}
+            size="s"
+            placeholder="—"
+            .options=${options.map((o) => ({ value: o, label: camelToLabel(o) }))}
+            @change=${(/** @type {Event & { detail?: { value?: string } }} */ e) =>
+              onChange(e.detail?.value ?? /** @type {HTMLInputElement} */ (e.target).value)}
+          ></jx-value-selector>`;
+        } else {
+          widgetTpl = html`<sp-textfield
+            size="s"
+            .value=${live(staticVal)}
+            @input=${(/** @type {Event} */ e) => {
+              clearTimeout(debounce);
+              debounce = setTimeout(
+                () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
+                400,
+              );
+            }}
+          ></sp-textfield>`;
+        }
+
+        return html`
+          <div class="style-row" data-prop=${prop.name}>
+            <div class="style-row-label">
+              ${hasVal
+                ? html`<span class="set-dot" title="Clear ${prop.name}" @click=${clearProp}></span>`
+                : nothing}
+              <sp-field-label size="s" title=${prop.description || prop.name}
+                >${camelToLabel(prop.name)}</sp-field-label
+              >
+              <sp-action-button
+                size="xs"
+                quiet
+                title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
+                @click=${onToggleBind}
+                >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
+              >
+            </div>
+            ${isBound ? boundTpl : widgetTpl}
           </div>
-          ${isBound ? boundTpl : widgetTpl}
-        </div>
-      `;
-    })}
+        `;
+      },
+    )}
     ${comp.props.length === 0 ? html`<div class="empty-state">No props defined</div>` : nothing}
     ${comp.path
       ? html`<span class="kv-add" @click=${() => navigateToComponent(comp.path)}
@@ -509,10 +568,10 @@ function renderComponentPropsFieldsTemplate(
 
 /** Custom attrs fields template */
 function renderCustomAttrsFieldsTemplate(
-  /** @type {any} */ node,
-  /** @type {any} */ path,
-  /** @type {any} */ attrs,
-  /** @type {any} */ knownAttrNames,
+  /** @type {JxMutableNode} */ node,
+  /** @type {JxPath} */ path,
+  /** @type {Record<string, unknown>} */ attrs,
+  /** @type {Set<string>} */ knownAttrNames,
 ) {
   const customAttrs = Object.entries(attrs).filter(([k]) => !knownAttrNames.has(k));
   return html`
@@ -520,7 +579,7 @@ function renderCustomAttrsFieldsTemplate(
       kvRow(
         attr,
         String(val),
-        (/** @type {any} */ newAttr, /** @type {any} */ newVal) => {
+        (/** @type {string} */ newAttr, /** @type {string} */ newVal) => {
           if (newAttr !== attr) {
             transactDoc(activeTab.value, (t) => {
               mutateUpdateAttribute(t, path, attr, undefined);
@@ -545,9 +604,9 @@ function renderCustomAttrsFieldsTemplate(
 // ─── Media breakpoints ──────────────────────────────────────────────────────
 
 /** Media breakpoint fields template */
-function renderMediaFieldsTemplate(/** @type {any} */ node) {
+function renderMediaFieldsTemplate(/** @type {JxMutableNode} */ node) {
   const media = node.$media || {};
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let baseDebounce;
   const breakpoints = Object.entries(media).filter(([k]) => k !== "--");
 
@@ -558,11 +617,11 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
         class="field-input"
         style="width:70px;flex:none"
         placeholder="320px"
-        value=${media["--"] || ""}
-        @input=${(/** @type {any} */ e) => {
+        .value=${live(media["--"] || "")}
+        @input=${(/** @type {Event} */ e) => {
           clearTimeout(baseDebounce);
           baseDebounce = setTimeout(() => {
-            const val = e.target.value.trim();
+            const val = /** @type {HTMLInputElement} */ (e.target).value.trim();
             transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, "--", val || undefined));
           }, 400);
         }}
@@ -583,7 +642,7 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
       <span
         class="kv-add"
         style=${view.showAddBreakpointForm ? "display:none" : ""}
-        @click=${(/** @type {any} */ _e) => {
+        @click=${(/** @type {Event} */ _e) => {
           view.showAddBreakpointForm = true;
           renderOnly("rightPanel");
         }}
@@ -597,8 +656,9 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                   class="field-input"
                   placeholder="Name (e.g. Tablet)"
                   style="flex:1"
-                  @input=${(/** @type {any} */ e) => {
-                    view.addBreakpointPreview = friendlyNameToMedia(e.target.value) || "";
+                  @input=${(/** @type {Event} */ e) => {
+                    view.addBreakpointPreview =
+                      friendlyNameToMedia(/** @type {HTMLInputElement} */ (e.target).value) || "";
                     renderOnly("rightPanel");
                   }}
                 />
@@ -614,11 +674,15 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
                 <button
                   class="kv-add"
                   style="padding:2px 10px;cursor:pointer"
-                  @click=${(/** @type {any} */ e) => {
-                    const wrap = e.target.closest("div").parentElement;
-                    const nameVal = wrap.querySelector("input")?.value;
-                    const queryVal = wrap.querySelector(".add-bp-query")?.value?.trim();
-                    const key = friendlyNameToMedia(nameVal);
+                  @click=${(/** @type {Event} */ e) => {
+                    const wrap = /** @type {HTMLElement} */ (e.target).closest(
+                      "div",
+                    )?.parentElement;
+                    const nameVal = wrap?.querySelector("input")?.value;
+                    const queryVal = /** @type {HTMLInputElement | null} */ (
+                      wrap?.querySelector(".add-bp-query")
+                    )?.value?.trim();
+                    const key = friendlyNameToMedia(nameVal || "");
                     if (key && queryVal) {
                       view.showAddBreakpointForm = false;
                       view.addBreakpointPreview = "";
@@ -648,8 +712,8 @@ function renderMediaFieldsTemplate(/** @type {any} */ node) {
 }
 
 /** Single media breakpoint row template */
-function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */ query) {
-  /** @type {any} */
+function mediaBreakpointRowTemplate(/** @type {string} */ name, /** @type {string} */ query) {
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let debounceTimer;
   let currentRawLabel = name;
   return html`
@@ -657,19 +721,23 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
       <div style="display:flex;align-items:center;gap:4px;margin-bottom:2px">
         <input
           class="field-input"
-          value=${mediaDisplayName(name)}
+          .value=${live(mediaDisplayName(name))}
           style="flex:1;font-weight:600;font-size:12px"
-          @input=${(/** @type {any} */ e) => {
-            const newKey = friendlyNameToMedia(e.target.value);
+          @input=${(/** @type {Event} */ e) => {
+            const newKey = friendlyNameToMedia(/** @type {HTMLInputElement} */ (e.target).value);
             currentRawLabel = newKey || "";
-            const rawEl = e.target.parentElement?.querySelector(".bp-raw-label");
+            const rawEl = /** @type {HTMLElement} */ (e.target).parentElement?.querySelector(
+              ".bp-raw-label",
+            );
             if (rawEl) rawEl.textContent = currentRawLabel;
             clearTimeout(debounceTimer);
             debounceTimer = setTimeout(() => {
               if (newKey && newKey !== name) {
-                const queryEl = e.target
-                  .closest("div[style]")
-                  ?.parentElement?.querySelector(".bp-query-input");
+                const queryEl = /** @type {HTMLInputElement | null} */ (
+                  /** @type {HTMLElement} */ (e.target)
+                    .closest("div[style]")
+                    ?.parentElement?.querySelector(".bp-query-input")
+                );
                 transactDoc(activeTab.value, (t) => {
                   mutateUpdateMedia(t, name, undefined);
                   mutateUpdateMedia(t, newKey, queryEl?.value || query);
@@ -692,12 +760,15 @@ function mediaBreakpointRowTemplate(/** @type {any} */ name, /** @type {any} */
       <div style="display:flex;gap:4px;align-items:center">
         <input
           class="field-input bp-query-input"
-          value=${query}
+          .value=${live(query)}
           style="flex:1"
-          @input=${(/** @type {any} */ e) => {
+          @input=${(/** @type {Event} */ e) => {
             clearTimeout(debounceTimer);
             debounceTimer = setTimeout(
-              () => transactDoc(activeTab.value, (t) => mutateUpdateMedia(t, name, e.target.value)),
+              () =>
+                transactDoc(activeTab.value, (t) =>
+                  mutateUpdateMedia(t, name, /** @type {HTMLInputElement} */ (e.target).value),
+                ),
               400,
             );
           }}
@@ -717,8 +788,11 @@ async function loadLayoutEntries() {
     const platform = getPlatform();
     const listing = await platform.listDirectory("layouts");
     layoutEntries = listing
-      .filter((/** @type {any} */ f) => f.type === "file" && f.name.endsWith(".json"))
-      .map((/** @type {any} */ f) => ({
+      .filter(
+        (/** @type {{ type: string; name: string }} */ f) =>
+          f.type === "file" && f.name.endsWith(".json"),
+      )
+      .map((/** @type {{ type: string; name: string }} */ f) => ({
         name: f.name.replace(/\.json$/, ""),
         path: `./layouts/${f.name}`,
       }));
@@ -732,12 +806,12 @@ export function invalidateLayoutPickerCache() {
   layoutEntries = null;
 }
 
-function isPageDocument(/** @type {any} */ documentPath) {
+function isPageDocument(/** @type {string | undefined | null} */ documentPath) {
   if (!documentPath || !projectState?.isSiteProject) return false;
   return documentPath.startsWith("pages/") || documentPath.startsWith("./pages/");
 }
 
-function renderPageSection(/** @type {any} */ node) {
+function renderPageSection(/** @type {JxMutableNode} */ node) {
   const tab = activeTab.value;
   if (!isPageDocument(tab.documentPath)) return nothing;
 
@@ -761,7 +835,7 @@ function renderPageSection(/** @type {any} */ node) {
               ? html`<span
                   class="set-dot"
                   title="Reset to default"
-                  @click=${(/** @type {any} */ e) => {
+                  @click=${(/** @type {Event} */ e) => {
                     e.stopPropagation();
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateProperty(t, [], "$layout", undefined),
@@ -774,8 +848,8 @@ function renderPageSection(/** @type {any} */ node) {
           <sp-picker
             size="s"
             value=${displayValue}
-            @change=${(/** @type {any} */ e) => {
-              const val = e.target.value;
+            @change=${(/** @type {Event} */ e) => {
+              const val = /** @type {HTMLInputElement} */ (e.target).value;
               if (val === "__default__") {
                 transactDoc(activeTab.value, (t) =>
                   mutateUpdateProperty(t, [], "$layout", undefined),
@@ -796,7 +870,7 @@ function renderPageSection(/** @type {any} */ node) {
             <sp-menu-item value="__none__">None</sp-menu-item>
             <sp-menu-divider></sp-menu-divider>
             ${layoutEntries.map(
-              (/** @type {any} */ l) =>
+              (/** @type {{ name: string; path: string }} */ l) =>
                 html`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`,
             )}
           </sp-picker>
@@ -813,8 +887,12 @@ function renderPageSection(/** @type {any} */ node) {
 
 // ─── Layout selection panel ─────────────────────────────────────────────────
 
-function renderLayoutSelectionPanel(/** @type {any} */ ctx) {
-  const { el, layoutPath } = view.layoutSelection;
+function renderLayoutSelectionPanel(
+  /** @type {{ navigateToComponent: (path: string) => void }} */ ctx,
+) {
+  const { el, layoutPath } = /** @type {{ el: HTMLElement; layoutPath: string }} */ (
+    view.layoutSelection
+  );
   const tagName = el?.tagName?.toLowerCase() || "element";
   const className = el?.className || "";
   const displayPath = layoutPath || "layout";
@@ -879,7 +957,9 @@ export function renderPropertiesPanelTemplate(ctx) {
   const path = tab.session.selection;
   const isMapNode = node.$prototype === "Array";
   const isMapParent =
-    node.children && typeof node.children === "object" && node.children.$prototype === "Array";
+    node.children &&
+    typeof node.children === "object" &&
+    /** @type {{ $prototype?: string }} */ (node.children).$prototype === "Array";
   const isSwitchNode = !!node.$switch;
   const isCustomInstance = (node.tagName || "").includes("-");
   const isRoot = path.length === 0;
@@ -894,9 +974,9 @@ export function renderPropertiesPanelTemplate(ctx) {
     : null;
 
   function renderAttrRow(
-    /** @type {any} */ attr,
-    /** @type {any} */ entry,
-    /** @type {any} */ value,
+    /** @type {string} */ attr,
+    /** @type {HtmlMetaEntry} */ entry,
+    /** @type {unknown} */ value,
   ) {
     const type = inferInputType(entry);
     const hasVal = value !== undefined && value !== "";
@@ -912,9 +992,14 @@ export function renderPropertiesPanelTemplate(ctx) {
           <sp-checkbox
             size="s"
             .checked=${live(!!value)}
-            @change=${(/** @type {any} */ e) =>
+            @change=${(/** @type {Event} */ e) =>
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateAttribute(t, path, attr, e.target.checked || undefined),
+                mutateUpdateAttribute(
+                  t,
+                  path,
+                  attr,
+                  /** @type {HTMLInputElement} */ (e.target).checked ? "" : undefined,
+                ),
               )}
           >
           </sp-checkbox>
@@ -928,21 +1013,23 @@ export function renderPropertiesPanelTemplate(ctx) {
       hasValue: hasVal,
       onClear: () =>
         transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, undefined)),
-      widget: widgetForType(type, entry, attr, value || "", (/** @type {any} */ v) =>
+      widget: widgetForType(type, entry, attr, String(value || ""), (/** @type {string} */ v) =>
         transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr, v || undefined)),
       ),
     });
   }
 
   // ── Collect applicable attributes from html-meta ──
-  const applicableAttrs = /** @type {Record<string, any>} */ ({});
-  for (const [attr, entry] of /** @type {[string, any][]} */ (Object.entries(htmlMeta.$defs))) {
+  const applicableAttrs = /** @type {Record<string, HtmlMetaEntry>} */ ({});
+  for (const [attr, entry] of /** @type {[string, HtmlMetaEntry][]} */ (
+    Object.entries(htmlMeta.$defs)
+  )) {
     if (!entry.$elements || entry.$elements.includes(tagName)) {
       applicableAttrs[attr] = entry;
     }
   }
 
-  const attrSections = /** @type {Record<string, any[]>} */ ({});
+  const attrSections = /** @type {Record<string, { name: string; entry: HtmlMetaEntry }[]>} */ ({});
   for (const sec of htmlMeta.$sections) attrSections[sec.key] = [];
   for (const [attr, entry] of Object.entries(applicableAttrs)) {
     const secKey = entry.$section;
@@ -950,7 +1037,10 @@ export function renderPropertiesPanelTemplate(ctx) {
   }
   for (const sec of htmlMeta.$sections) {
     attrSections[sec.key].sort(
-      (/** @type {any} */ a, /** @type {any} */ b) => a.entry.$order - b.entry.$order,
+      (
+        /** @type {{ name: string; entry: HtmlMetaEntry }} */ a,
+        /** @type {{ name: string; entry: HtmlMetaEntry }} */ b,
+      ) => a.entry.$order - b.entry.$order,
     );
   }
 
@@ -968,13 +1058,13 @@ export function renderPropertiesPanelTemplate(ctx) {
   }
   if (customAttrs.length > 0) autoOpen.add("__custom");
 
-  function isSectionOpen(/** @type {any} */ key) {
+  function isSectionOpen(/** @type {string} */ key) {
     if (tab.session.ui.inspectorSections[key] !== undefined)
       return tab.session.ui.inspectorSections[key];
     return autoOpen.has(key);
   }
 
-  function toggleSection(/** @type {any} */ key) {
+  function toggleSection(/** @type {string} */ key) {
     const current = isSectionOpen(key);
     activeTab.value.session.ui.inspectorSections = {
       ...activeTab.value.session.ui.inspectorSections,
@@ -1000,9 +1090,14 @@ export function renderPropertiesPanelTemplate(ctx) {
             .value=${live(tagName)}
             autocomplete="off"
             list="tag-names"
-            @input=${debouncedStyleCommit("prop:tagName", 400, (/** @type {any} */ e) => {
+            @input=${debouncedStyleCommit("prop:tagName", 400, (/** @type {Event} */ e) => {
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(t, path, "tagName", e.target.value || undefined),
+                mutateUpdateProperty(
+                  t,
+                  path,
+                  "tagName",
+                  /** @type {HTMLInputElement} */ (e.target).value || undefined,
+                ),
               );
             })}
           ></sp-textfield>
@@ -1013,7 +1108,7 @@ export function renderPropertiesPanelTemplate(ctx) {
               ? html`<span
                   class="set-dot"
                   title="Clear $id"
-                  @click=${(/** @type {any} */ e) => {
+                  @click=${(/** @type {Event} */ e) => {
                     e.stopPropagation();
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateProperty(t, path, "$id", undefined),
@@ -1026,9 +1121,14 @@ export function renderPropertiesPanelTemplate(ctx) {
           <sp-textfield
             size="s"
             .value=${live(node.$id || "")}
-            @input=${debouncedStyleCommit("prop:$id", 400, (/** @type {any} */ e) => {
+            @input=${debouncedStyleCommit("prop:$id", 400, (/** @type {Event} */ e) => {
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(t, path, "$id", e.target.value || undefined),
+                mutateUpdateProperty(
+                  t,
+                  path,
+                  "$id",
+                  /** @type {HTMLInputElement} */ (e.target).value || undefined,
+                ),
               );
             })}
           ></sp-textfield>
@@ -1039,7 +1139,7 @@ export function renderPropertiesPanelTemplate(ctx) {
               ? html`<span
                   class="set-dot"
                   title="Clear class"
-                  @click=${(/** @type {any} */ e) => {
+                  @click=${(/** @type {Event} */ e) => {
                     e.stopPropagation();
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateProperty(t, path, "className", undefined),
@@ -1052,9 +1152,14 @@ export function renderPropertiesPanelTemplate(ctx) {
           <sp-textfield
             size="s"
             .value=${live(node.className || "")}
-            @input=${debouncedStyleCommit("prop:className", 400, (/** @type {any} */ e) => {
+            @input=${debouncedStyleCommit("prop:className", 400, (/** @type {Event} */ e) => {
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(t, path, "className", e.target.value || undefined),
+                mutateUpdateProperty(
+                  t,
+                  path,
+                  "className",
+                  /** @type {HTMLInputElement} */ (e.target).value || undefined,
+                ),
               );
             })}
           ></sp-textfield>
@@ -1067,7 +1172,7 @@ export function renderPropertiesPanelTemplate(ctx) {
                     ? html`<span
                         class="set-dot"
                         title="Clear text"
-                        @click=${(/** @type {any} */ e) => {
+                        @click=${(/** @type {Event} */ e) => {
                           e.stopPropagation();
                           transactDoc(activeTab.value, (t) =>
                             mutateUpdateProperty(t, path, "textContent", undefined),
@@ -1085,11 +1190,20 @@ export function renderPropertiesPanelTemplate(ctx) {
                       ? node.textContent
                       : (node.textContent ?? ""),
                   )}
-                  @input=${debouncedStyleCommit("prop:textContent", 400, (/** @type {any} */ e) => {
-                    transactDoc(activeTab.value, (t) =>
-                      mutateUpdateProperty(t, path, "textContent", e.target.value || undefined),
-                    );
-                  })}
+                  @input=${debouncedStyleCommit(
+                    "prop:textContent",
+                    400,
+                    (/** @type {Event} */ e) => {
+                      transactDoc(activeTab.value, (t) =>
+                        mutateUpdateProperty(
+                          t,
+                          path,
+                          "textContent",
+                          /** @type {HTMLInputElement} */ (e.target).value || undefined,
+                        ),
+                      );
+                    },
+                  )}
                 ></sp-textfield>
               </div>
             `
@@ -1100,7 +1214,7 @@ export function renderPropertiesPanelTemplate(ctx) {
               ? html`<span
                   class="set-dot"
                   title="Clear hidden"
-                  @click=${(/** @type {any} */ e) => {
+                  @click=${(/** @type {Event} */ e) => {
                     e.stopPropagation();
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateProperty(t, path, "hidden", undefined),
@@ -1113,9 +1227,14 @@ export function renderPropertiesPanelTemplate(ctx) {
           <sp-checkbox
             size="s"
             .checked=${live(!!node.hidden)}
-            @change=${(/** @type {any} */ e) =>
+            @change=${(/** @type {Event} */ e) =>
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(t, path, "hidden", e.target.checked || undefined),
+                mutateUpdateProperty(
+                  t,
+                  path,
+                  "hidden",
+                  /** @type {HTMLInputElement} */ (e.target).checked || undefined,
+                ),
               )}
           >
           </sp-checkbox>
@@ -1207,7 +1326,9 @@ export function renderPropertiesPanelTemplate(ctx) {
     .filter((sec) => attrSections[sec.key].length > 0)
     .map((sec) => {
       const sectionAttrs = attrSections[sec.key];
-      const hasAnySet = sectionAttrs.some((/** @type {any} */ a) => attrs[a.name] !== undefined);
+      const hasAnySet = sectionAttrs.some(
+        (/** @type {{ name: string; entry: HtmlMetaEntry }} */ a) => attrs[a.name] !== undefined,
+      );
       return html`
         <sp-accordion-item
           label=${sec.label}
@@ -1218,7 +1339,7 @@ export function renderPropertiesPanelTemplate(ctx) {
             ? html`<span slot="heading" class="set-dot set-dot--section"></span>`
             : nothing}
           <div class="style-section-body">
-            ${sectionAttrs.map((/** @type {any} */ a) =>
+            ${sectionAttrs.map((/** @type {{ name: string; entry: HtmlMetaEntry }} */ a) =>
               renderAttrRow(a.name, a.entry, attrs[a.name]),
             )}
           </div>