@jxsuite/studio 0.23.1 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Style panel — CSS property editor with media breakpoint tabs, selector dropdown, section
  * accordion, shorthand expand/compress, and filter.
@@ -6,14 +7,9 @@
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import {
-  getNodeAtPath,
-  COMMON_SELECTORS,
-  isNestedSelector,
-  debouncedStyleCommit,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { selectStylebookTag } from "./stylebook-panel.js";
+import { getNodeAtPath, COMMON_SELECTORS, isNestedSelector, debouncedStyleCommit } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { selectStylebookTag } from "./stylebook-panel";
 import {
   transactDoc,
   mutateUpdateStyle,
@@ -22,13 +18,13 @@ import {
   mutateUpdateMediaNestedStyle,
   mutateUpdateNestedStylePath,
   mutateUpdateMediaNestedStylePath,
-} from "../tabs/transact.js";
-import { inferInputType, propLabel } from "../utils/studio-utils.js";
-import { renderFieldRow } from "../ui/field-row.js";
-import { parseMediaEntries } from "../utils/canvas-media.js";
-import { getEffectiveMedia, getEffectiveStyle } from "../site-context.js";
-import { computeInheritedStyle } from "../utils/inherited-style.js";
-import { mediaDisplayName } from "./shared.js";
+} from "../tabs/transact";
+import { inferInputType, propLabel } from "../utils/studio-utils";
+import { renderFieldRow } from "../ui/field-row";
+import { parseMediaEntries } from "../utils/canvas-media";
+import { getEffectiveMedia, getEffectiveStyle } from "../site-context";
+import { computeInheritedStyle } from "../utils/inherited-style";
+import { mediaDisplayName } from "./shared";
 import {
   cssMeta,
   getCssInitialMap,
@@ -39,18 +35,25 @@ import {
   compressShorthand,
   expandBorderSide,
   compressBorderSide,
-} from "./style-utils.js";
-import { widgetForType } from "./style-inputs.js";
+} from "./style-utils";
+import { widgetForType } from "./style-inputs";
 
-/**
- * @typedef {{ name: string; entry: Record<string, unknown> }} CssLonghand
- *
- * @typedef {Record<string, unknown>} CssPropertyEntry
- *
- * @typedef {import("../tabs/tab.js").Tab} Tab
- *
- * @typedef {import("../state.js").JxPath} JxPath
- */
+import type { Tab } from "../tabs/tab";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+interface CssLonghand {
+  name: string;
+  entry: Record<string, unknown>;
+}
+
+type CssPropertyEntry = Record<string, unknown>;
+
+type StyleMutateFn = (
+  t: Tab,
+  prop: string,
+  val: string | Record<string, unknown> | undefined,
+) => void;
 
 /**
  * Check if a selector is a stylebook tag path (e.g., "table" or "table th"). Tag paths don't start
@@ -59,7 +62,7 @@ import { widgetForType } from "./style-inputs.js";
  * @param {string} selector
  * @returns {boolean}
  */
-function isTagPath(selector) {
+function isTagPath(selector: string) {
   return /^[a-z]/.test(selector);
 }
 
@@ -70,39 +73,39 @@ function isTagPath(selector) {
  * @param {string} tagPath
  * @returns {Record<string, unknown>}
  */
-function resolveNestedTagStyle(style, tagPath) {
+function resolveNestedTagStyle(style: Record<string, unknown>, tagPath: string) {
   const parts = tagPath.split(" ");
-  /** @type {unknown} */
-  let obj = style;
+  let obj: unknown = style;
   for (const part of parts) {
     if (!obj || typeof obj !== "object") return {};
-    obj = /** @type {Record<string, unknown>} */ (obj)[part];
+    obj = (obj as Record<string, unknown>)[part];
   }
-  return obj && typeof obj === "object" ? /** @type {Record<string, unknown>} */ (obj) : {};
+  return obj && typeof obj === "object" ? (obj as Record<string, unknown>) : {};
 }
 
 // ─── Row renderers ──────────────────────────────────────────────────────────
 
 function renderStyleRow(
-  /** @type {CssPropertyEntry} */ entry,
-  /** @type {string} */ prop,
-  /** @type {string} */ value,
-  /** @type {(v: string | undefined) => void} */ onCommit,
-  /** @type {() => void} */ onDelete,
-  /** @type {boolean} */ isWarning,
-  /** @type {boolean} */ gridMode,
-  /** @type {string | undefined} */ inheritedValue,
+  entry: CssPropertyEntry,
+  prop: string,
+  value: string,
+  onCommit: (v: string | undefined) => void,
+  onDelete: () => void,
+  isWarning: boolean,
+  gridMode: boolean,
+  inheritedValue: string | undefined,
 ) {
   const type = inferInputType(entry);
   const hasVal = value !== undefined && value !== "";
   const placeholder = !hasVal && inheritedValue ? String(inheritedValue) : "";
+  const spanVal = gridMode && (entry as Record<string, unknown>).$span === 2 ? 2 : undefined;
   return renderFieldRow({
     prop,
     label: propLabel(entry, prop),
     hasValue: hasVal,
     onClear: onDelete,
     widget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
-    span: gridMode && /** @type {Record<string, unknown>} */ (entry).$span === 2 ? 2 : undefined,
+    ...(spanVal != null && { span: spanVal }),
     warning: isWarning,
   });
 }
@@ -115,17 +118,21 @@ function renderStyleRow(
  * @param {() => void} _deleteFn
  * @param {Record<string, string | number>} inherited
  */
-function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inherited = {}) {
-  const tab = activeTab.value;
-  const longhands = /** @type {CssLonghand[]} */ (getLonghands(shortProp));
+function renderShorthandRow(
+  shortProp: string,
+  entry: CssPropertyEntry,
+  style: Record<string, unknown>,
+  mutateFn: StyleMutateFn,
+  _deleteFn: () => void,
+  inherited: Record<string, string | number> = {},
+) {
+  const tab = activeTab.value!;
+  const longhands = getLonghands(shortProp) as CssLonghand[];
   const shortVal = style[shortProp];
-  const hasLonghands = longhands.some(
-    (/** @type {CssLonghand} */ l) => style[l.name] !== undefined,
-  );
+  const hasLonghands = longhands.some((l: CssLonghand) => style[l.name] !== undefined);
   const isExpanded = tab.session.ui.styleShorthands[shortProp] ?? hasLonghands;
   const hasAnyVal =
-    shortVal !== undefined ||
-    longhands.some((/** @type {CssLonghand} */ l) => style[l.name] !== undefined);
+    shortVal !== undefined || longhands.some((l: CssLonghand) => style[l.name] !== undefined);
 
   return html`
     <div class="style-row" data-prop=${shortProp}>
@@ -134,7 +141,7 @@ function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inheri
           ? html`<span
               class="set-dot"
               title="Clear ${shortProp}"
-              @click=${(/** @type {Event} */ e) => {
+              @click=${(e: Event) => {
                 e.stopPropagation();
                 transactDoc(activeTab.value, (t) => {
                   if (shortVal !== undefined) mutateFn(t, shortProp, undefined);
@@ -152,30 +159,28 @@ function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inheri
           size="s"
           .value=${live(shortVal || "")}
           placeholder=${!shortVal && hasLonghands
-            ? longhands.map((/** @type {CssLonghand} */ l) => style[l.name] || "0").join(" ")
+            ? longhands.map((l: CssLonghand) => style[l.name] || "0").join(" ")
             : !shortVal && inherited[shortProp]
               ? inherited[shortProp]
-              : !shortVal && longhands.some((/** @type {CssLonghand} */ l) => inherited[l.name])
-                ? longhands
-                    .map((/** @type {CssLonghand} */ l) => inherited[l.name] || "0")
-                    .join(" ")
+              : !shortVal && longhands.some((l: CssLonghand) => inherited[l.name])
+                ? longhands.map((l: CssLonghand) => inherited[l.name] || "0").join(" ")
                 : ""}
-          @input=${debouncedStyleCommit(`short:${shortProp}`, 400, (/** @type {Event} */ e) => {
+          @input=${debouncedStyleCommit(`short:${shortProp}`, 400, (e: Event) => {
             transactDoc(activeTab.value, (t) => {
               for (const l of longhands) {
                 if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
               }
-              mutateFn(t, shortProp, /** @type {HTMLInputElement} */ (e.target).value || undefined);
+              mutateFn(t, shortProp, (e.target as HTMLInputElement).value || undefined);
             });
           })}
         ></sp-textfield>
         <sp-action-button
           size="xs"
           quiet
-          @click=${(/** @type {Event} */ e) => {
+          @click=${(e: Event) => {
             e.stopPropagation();
-            activeTab.value.session.ui.styleShorthands = {
-              ...activeTab.value.session.ui.styleShorthands,
+            activeTab.value!.session.ui.styleShorthands = {
+              ...activeTab.value!.session.ui.styleShorthands,
               [shortProp]: !isExpanded,
             };
           }}
@@ -188,71 +193,64 @@ function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inheri
     </div>
     ${isExpanded
       ? (() => {
-          const isBorderSide = /** @type {Record<string, unknown>} */ (entry).$shorthandType ===
-          "border-side";
+          const isBorderSide = (entry as Record<string, unknown>).$shorthandType === "border-side";
           const expanded = shortVal
             ? isBorderSide
-              ? expandBorderSide(/** @type {string} */ (shortVal))
-              : expandShorthand(/** @type {string} */ (shortVal), longhands.length)
+              ? expandBorderSide(shortVal as string)
+              : expandShorthand(shortVal as string, longhands.length)
             : null;
           const compress = isBorderSide ? compressBorderSide : compressShorthand;
           const emptyVal = isBorderSide ? "" : "0";
-          return longhands.map(
-            (/** @type {CssLonghand} */ { name, entry: lEntry }, /** @type {number} */ idx) => {
-              const lVal = style[name] ?? (expanded ? expanded[idx] : "");
-              return html`
-                <div class="style-row style-row--child" data-prop=${name}>
-                  <div class="style-row-label">
-                    ${lVal !== undefined && lVal !== ""
-                      ? html`<span
-                          class="set-dot"
-                          title="Clear ${name}"
-                          @click=${(/** @type {Event} */ e) => {
-                            e.stopPropagation();
-                            const vals = longhands.map(
-                              (/** @type {CssLonghand} */ l, /** @type {number} */ i) =>
-                                i === idx
-                                  ? emptyVal
-                                  : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
-                            );
-                            transactDoc(activeTab.value, (t) => {
-                              for (const l of longhands) {
-                                if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
-                              }
-                              mutateFn(t, shortProp, compress(/** @type {string[]} */ (vals)));
-                            });
-                          }}
-                        ></span>`
-                      : nothing}
-                    <sp-field-label size="s" title=${name}
-                      >${propLabel(lEntry, name)}</sp-field-label
-                    >
-                  </div>
-                  ${widgetForType(
-                    inferInputType(lEntry),
-                    lEntry,
-                    name,
-                    lVal,
-                    (/** @type {string} */ newVal) => {
-                      const vals = longhands.map(
-                        (/** @type {CssLonghand} */ l, /** @type {number} */ i) =>
-                          i === idx
-                            ? newVal || emptyVal
-                            : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
-                      );
-                      transactDoc(activeTab.value, (t) => {
-                        for (const l of longhands) {
-                          if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
-                        }
-                        mutateFn(t, shortProp, compress(/** @type {string[]} */ (vals)));
-                      });
-                    },
-                    { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
-                  )}
+          return longhands.map(({ name, entry: lEntry }: CssLonghand, idx: number) => {
+            const lVal = style[name] ?? (expanded ? expanded[idx] : "");
+            return html`
+              <div class="style-row style-row--child" data-prop=${name}>
+                <div class="style-row-label">
+                  ${lVal !== undefined && lVal !== ""
+                    ? html`<span
+                        class="set-dot"
+                        title="Clear ${name}"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          const vals = longhands.map((l: CssLonghand, i: number) =>
+                            i === idx
+                              ? emptyVal
+                              : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
+                          );
+                          transactDoc(activeTab.value, (t) => {
+                            for (const l of longhands) {
+                              if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+                            }
+                            mutateFn(t, shortProp, compress(vals as string[]));
+                          });
+                        }}
+                      ></span>`
+                    : nothing}
+                  <sp-field-label size="s" title=${name}>${propLabel(lEntry, name)}</sp-field-label>
                 </div>
-              `;
-            },
-          );
+                ${widgetForType(
+                  inferInputType(lEntry),
+                  lEntry,
+                  name,
+                  lVal,
+                  (newVal: string) => {
+                    const vals = longhands.map((l: CssLonghand, i: number) =>
+                      i === idx
+                        ? newVal || emptyVal
+                        : (style[l.name] ?? (expanded ? expanded[i] : emptyVal)),
+                    );
+                    transactDoc(activeTab.value, (t) => {
+                      for (const l of longhands) {
+                        if (style[l.name] !== undefined) mutateFn(t, l.name, undefined);
+                      }
+                      mutateFn(t, shortProp, compress(vals as string[]));
+                    });
+                  },
+                  { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
+                )}
+              </div>
+            `;
+          });
         })()
       : nothing}
   `;
@@ -266,9 +264,14 @@ function renderShorthandRow(shortProp, entry, style, mutateFn, _deleteFn, inheri
  * @param {string | null} activeSelector
  * @param {Record<string, unknown>} [effectiveStyle]
  */
-function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveStyle) {
-  const tab = activeTab.value;
-  const sel = /** @type {JxPath} */ (tab.session.selection);
+function styleSidebarTemplate(
+  node: JxMutableNode,
+  activeMediaTab: string | null,
+  activeSelector: string | null,
+  effectiveStyle?: Record<string, unknown>,
+) {
+  const tab = activeTab.value!;
+  const sel = tab.session.selection as JxPath;
   const style = effectiveStyle || node.style || {};
   const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document.$media));
   const mediaNames = sizeBreakpoints.map((bp) => bp.name);
@@ -281,8 +284,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
           <sp-tabs
             size="s"
             selected=${mediaTab || "base"}
-            @change=${(/** @type {Event} */ e) => {
-              const val = /** @type {HTMLElement & { selected: string }} */ (e.target).selected;
+            @change=${(e: Event) => {
+              const val = (e.target as HTMLElement & { selected: string }).selected;
               const newMedia = val === "base" ? null : val;
               if (newMedia !== tab.session.ui.activeMedia) {
                 tab.session.ui.activeMedia = newMedia;
@@ -298,9 +301,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
       : nothing;
 
   // ── Selector dropdown ──────────────────────────────────────────────────────
-  const contextStyle = mediaTab
-    ? /** @type {Record<string, unknown>} */ (style[`@${mediaTab}`]) || {}
-    : style;
+  const contextStyle = mediaTab ? (style[`@${mediaTab}`] as Record<string, unknown>) || {} : style;
   const existingSelectors = Object.keys(contextStyle).filter(isNestedSelector);
   const existingSet = new Set(existingSelectors);
   const commonSet = new Set(COMMON_SELECTORS);
@@ -316,15 +317,14 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
       class="selector-select"
       quiet
       .value=${live(_selectorVal)}
-      @change=${(/** @type {Event} */ e) => {
-        const val = /** @type {HTMLElement & { value: string }} */ (e.target).value;
+      @change=${(e: Event) => {
+        const val = (e.target as HTMLElement & { value: string }).value;
         if (val === "__add_custom__") {
           requestAnimationFrame(() => {
-            /** @type {HTMLElement & { value: string }} */ (e.target).value =
-              activeSelector || "__base__";
+            (e.target as HTMLElement & { value: string }).value = activeSelector || "__base__";
           });
-          const picker = /** @type {HTMLElement} */ (e.target);
-          const bar = /** @type {HTMLElement} */ (picker.closest(".style-toolbar"));
+          const picker = e.target as HTMLElement;
+          const bar = picker.closest(".style-toolbar") as HTMLElement;
           picker.style.display = "none";
           const inp = document.createElement("input");
           inp.type = "text";
@@ -333,14 +333,14 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
           bar.appendChild(inp);
           inp.focus();
           let done = false;
-          const finish = (/** @type {boolean} */ accept) => {
+          const finish = (accept: boolean) => {
             if (done) return;
             done = true;
             const v = inp.value.trim();
             inp.remove();
             picker.style.display = "";
             if (accept && v && isNestedSelector(v)) {
-              activeTab.value.session.ui.activeSelector = v;
+              activeTab.value!.session.ui.activeSelector = v;
             }
           };
           inp.addEventListener("keydown", (ev) => {
@@ -351,7 +351,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
           return;
         }
         const newSelector = val === "__base__" ? null : val;
-        activeTab.value.session.ui.activeSelector = newSelector;
+        activeTab.value!.session.ui.activeSelector = newSelector;
       }}
     >
       <sp-menu-item value="__base__">(base)</sp-menu-item>
@@ -388,8 +388,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
         class="style-filter-input"
         placeholder="Filter properties…"
         .value=${live(tab.session.ui.styleFilter || "")}
-        @input=${(/** @type {Event} */ e) => {
-          activeTab.value.session.ui.styleFilter = /** @type {HTMLInputElement} */ (e.target).value;
+        @input=${(e: Event) => {
+          activeTab.value!.session.ui.styleFilter = (e.target as HTMLInputElement).value;
         }}
       ></sp-textfield>
       <sp-action-button
@@ -397,8 +397,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
         class="style-filter-toggle"
         ?selected=${tab.session.ui.styleFilterActive}
         @click=${() => {
-          activeTab.value.session.ui.styleFilterActive =
-            !activeTab.value.session.ui.styleFilterActive;
+          activeTab.value!.session.ui.styleFilterActive =
+            !activeTab.value!.session.ui.styleFilterActive;
         }}
       >
         Active
@@ -407,120 +407,78 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
   `;
 
   // ── Determine the active style object ──────────────────────────────────────
-  /** @type {Record<string, unknown>} */
-  let activeStyle;
-  /** @type {(prop: string, val: string | Record<string, unknown> | undefined) => void} */
-  let commitStyle;
-  /** @type {(t: Tab, prop: string, val: string | Record<string, unknown> | undefined) => void} */
-  let commitMutate;
+  let activeStyle: Record<string, unknown>;
+  let commitStyle: (prop: string, val: string | Record<string, unknown> | undefined) => void;
+  let commitMutate: StyleMutateFn;
   if (activeSelector && isTagPath(activeSelector) && mediaTab && mediaNames.length > 0) {
-    const mediaObj = /** @type {Record<string, unknown>} */ (style[`@${mediaTab}`]) || {};
+    const mediaObj = (style[`@${mediaTab}`] as Record<string, unknown>) || {};
     activeStyle = resolveNestedTagStyle(mediaObj, activeSelector);
     const stylePath = activeSelector.split(" ");
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) =>
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
       mutateUpdateMediaNestedStylePath(
         t,
         sel,
         mediaTab,
         stylePath,
         prop,
-        /** @type {string | undefined} */ (val),
+        val as string | undefined,
       );
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else if (activeSelector && isTagPath(activeSelector)) {
     activeStyle = resolveNestedTagStyle(style, activeSelector);
     const stylePath = activeSelector.split(" ");
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) =>
-      mutateUpdateNestedStylePath(t, sel, stylePath, prop, /** @type {string | undefined} */ (val));
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
+      mutateUpdateNestedStylePath(t, sel, stylePath, prop, val as string | undefined);
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else if (activeSelector && mediaTab && mediaNames.length > 0) {
-    activeStyle = /** @type {Record<string, unknown>} */ (
-      /** @type {Record<string, unknown>} */ (style[`@${mediaTab}`] || {})[activeSelector]
-    ) || {};
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) =>
+    const mediaObj = (style[`@${mediaTab}`] || {}) as Record<string, unknown>;
+    activeStyle = (mediaObj[activeSelector] as Record<string, unknown>) || {};
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
       mutateUpdateMediaNestedStyle(
         t,
         sel,
         mediaTab,
         activeSelector,
         prop,
-        /** @type {string | undefined} */ (val),
+        val as string | undefined,
       );
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else if (activeSelector) {
-    activeStyle = /** @type {Record<string, unknown>} */ (style[activeSelector]) || {};
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) =>
-      mutateUpdateNestedStyle(
-        t,
-        sel,
-        activeSelector,
-        prop,
-        /** @type {string | undefined} */ (val),
-      );
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    activeStyle = (style[activeSelector] as Record<string, unknown>) || {};
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
+      mutateUpdateNestedStyle(t, sel, activeSelector, prop, val as string | undefined);
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else if (mediaTab !== null && mediaNames.length > 0) {
     activeStyle = {};
-    for (const [p, v] of Object.entries(
-      /** @type {Record<string, unknown>} */ (style[`@${mediaTab}`]) || {},
-    )) {
+    for (const [p, v] of Object.entries((style[`@${mediaTab}`] as Record<string, unknown>) || {})) {
       if (typeof v !== "object") activeStyle[p] = v;
     }
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => mutateUpdateMediaStyle(t, sel, mediaTab, prop, /** @type {string | undefined} */ (val));
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
+      mutateUpdateMediaStyle(t, sel, mediaTab, prop, val as string | undefined);
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   } else {
     activeStyle = {};
     for (const [p, v] of Object.entries(style)) {
       if (typeof v !== "object") activeStyle[p] = v;
     }
-    commitMutate = (
-      /** @type {Tab} */ t,
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => mutateUpdateStyle(t, sel, prop, /** @type {string | undefined} */ (val));
-    commitStyle = (
-      /** @type {string} */ prop,
-      /** @type {string | Record<string, unknown> | undefined} */ val,
-    ) => transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
+    commitMutate = (t: Tab, prop: string, val: string | Record<string, unknown> | undefined) =>
+      mutateUpdateStyle(t, sel, prop, val as string | undefined);
+    commitStyle = (prop: string, val: string | Record<string, unknown> | undefined) =>
+      transactDoc(activeTab.value, (t) => commitMutate(t, prop, val));
   }
 
   // ── Compute inherited style from higher breakpoints ──────────────────────
-  /** @type {Record<string, string | number>} */
-  const inheritedStyle = computeInheritedStyle(style, mediaNames, mediaTab, activeSelector);
+  const inheritedStyle: Record<string, string | number> = computeInheritedStyle(
+    style,
+    mediaNames,
+    mediaTab,
+    activeSelector,
+  );
 
   // Auto-open sections that have properties
   const newSections = autoOpenSections({ style: activeStyle }, tab.session.ui.styleSections);
@@ -529,40 +487,35 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
   }
 
   // Partition properties into sections
-  const sectionProps =
-    /** @type {Record<string, { prop: string; entry: CssPropertyEntry }[]>} */ ({});
+  const sectionProps: Record<string, { prop: string; entry: CssPropertyEntry }[]> = {};
   for (const sec of cssMeta.$sections) sectionProps[sec.key] = [];
 
-  for (const [prop, entry] of /** @type {[string, CssPropertyEntry][]} */ (
-    Object.entries(cssMeta.$defs)
-  )) {
-    if (typeof (/** @type {Record<string, unknown>} */ (entry).$shorthand) === "string") continue;
-    const sec = /** @type {string} */ (/** @type {Record<string, unknown>} */ (entry).$section) ||
-    "other";
+  for (const [prop, entry] of Object.entries(cssMeta.$defs) as [string, CssPropertyEntry][]) {
+    if (typeof (entry as Record<string, unknown>).$shorthand === "string") continue;
+    const sec = ((entry as Record<string, unknown>).$section as string) || "other";
     sectionProps[sec].push({ prop, entry });
   }
   for (const sec of cssMeta.$sections) {
     sectionProps[sec.key].sort(
       (
-        /** @type {{ prop: string; entry: CssPropertyEntry }} */ a,
-        /** @type {{ prop: string; entry: CssPropertyEntry }} */ b,
+        a: { prop: string; entry: CssPropertyEntry },
+        b: { prop: string; entry: CssPropertyEntry },
       ) =>
-        /** @type {number} */ (/** @type {Record<string, unknown>} */ (a.entry).$order) -
-        /** @type {number} */ (/** @type {Record<string, unknown>} */ (b.entry).$order),
+        ((a.entry as Record<string, unknown>).$order as number) -
+        ((b.entry as Record<string, unknown>).$order as number),
     );
   }
 
   const otherProps = [];
   for (const prop of Object.keys(activeStyle)) {
-    if (!(/** @type {Record<string, unknown>} */ (cssMeta.$defs)[prop])) {
+    if (!(cssMeta.$defs as Record<string, unknown>)[prop]) {
       const val = activeStyle[prop];
       if (val !== null && typeof val === "object") continue;
       otherProps.push(prop);
     }
   }
 
-  /** @type {string[]} */
-  const nestedRules = [];
+  const nestedRules: string[] = [];
   for (const [prop, val] of Object.entries(activeStyle)) {
     if (val !== null && typeof val === "object" && !Array.isArray(val) && !prop.startsWith("@")) {
       nestedRules.push(prop);
@@ -581,11 +534,11 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
       const entries = sectionProps[sec.key];
 
       const sectionActiveProps = entries.filter(
-        (/** @type {{ prop: string; entry: CssPropertyEntry }} */ { prop, entry }) => {
+        ({ prop, entry }: { prop: string; entry: CssPropertyEntry }) => {
           if (activeStyle[prop] !== undefined) return true;
           if (inferInputType(entry) === "shorthand") {
-            return /** @type {CssLonghand[]} */ (getLonghands(prop)).some(
-              (/** @type {CssLonghand} */ l) => activeStyle[l.name] !== undefined,
+            return (getLonghands(prop) as CssLonghand[]).some(
+              (l: CssLonghand) => activeStyle[l.name] !== undefined,
             );
           }
           return false;
@@ -599,10 +552,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
           <sp-accordion-item
             label=${sec.label}
             .open=${false}
-            @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-              activeTab.value.session.ui.styleSections = {
-                ...activeTab.value.session.ui.styleSections,
-                [sec.key]: /** @type {HTMLElement & { open: boolean }} */ (e.target).open,
+            @sp-accordion-item-toggle=${(e: Event) => {
+              activeTab.value!.session.ui.styleSections = {
+                ...activeTab.value!.session.ui.styleSections,
+                [sec.key]: (e.target as HTMLElement & { open: boolean }).open,
               };
             }}
           >
@@ -613,14 +566,14 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
                     <span
                       class="set-dot set-dot--section"
                       title="Clear all ${sec.label.toLowerCase()} properties"
-                      @click=${(/** @type {Event} */ e) => {
+                      @click=${(e: Event) => {
                         e.stopPropagation();
                         e.preventDefault();
                         transactDoc(activeTab.value, (t) => {
                           for (const { prop, entry } of sectionActiveProps) {
                             if (activeStyle[prop] !== undefined) commitMutate(t, prop, undefined);
                             if (inferInputType(entry) === "shorthand") {
-                              for (const l of /** @type {CssLonghand[]} */ (getLonghands(prop))) {
+                              for (const l of getLonghands(prop) as CssLonghand[]) {
                                 if (activeStyle[l.name] !== undefined)
                                   commitMutate(t, l.name, undefined);
                               }
@@ -650,19 +603,17 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
         }
         if (filterActive) {
           if (type === "shorthand") {
-            const longhands = /** @type {CssLonghand[]} */ (getLonghands(prop));
+            const longhands = getLonghands(prop) as CssLonghand[];
             const hasAnySet =
-              hasVal ||
-              longhands.some((/** @type {CssLonghand} */ l) => activeStyle[l.name] !== undefined);
+              hasVal || longhands.some((l: CssLonghand) => activeStyle[l.name] !== undefined);
             if (!hasAnySet) continue;
           } else if (!hasVal) continue;
         }
 
         if (type === "shorthand") {
-          const longhands = /** @type {CssLonghand[]} */ (getLonghands(prop));
+          const longhands = getLonghands(prop) as CssLonghand[];
           const hasAny =
-            hasVal ||
-            longhands.some((/** @type {CssLonghand} */ l) => activeStyle[l.name] !== undefined);
+            hasVal || longhands.some((l: CssLonghand) => activeStyle[l.name] !== undefined);
           if (!hasAny && !condMet) continue;
           rows.push(
             renderShorthandRow(prop, entry, activeStyle, commitMutate, () => {}, inheritedStyle),
@@ -674,13 +625,12 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
               renderStyleRow(
                 entry,
                 prop,
-                /** @type {string} */ (val) ?? "",
-                (/** @type {string | undefined} */ newVal) =>
-                  commitStyle(prop, newVal || undefined),
+                (val as string) ?? "",
+                (newVal: string | undefined) => commitStyle(prop, newVal || undefined),
                 () => commitStyle(prop, undefined),
                 isWarning,
                 sec.$layout === "grid",
-                /** @type {string | undefined} */ (inheritedStyle[prop]),
+                inheritedStyle[prop] as string | undefined,
               ),
             );
           }
@@ -693,10 +643,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
         <sp-accordion-item
           label=${sec.label}
           .open=${isOpen}
-          @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-            activeTab.value.session.ui.styleSections = {
-              ...activeTab.value.session.ui.styleSections,
-              [sec.key]: /** @type {HTMLElement & { open: boolean }} */ (e.target).open,
+          @sp-accordion-item-toggle=${(e: Event) => {
+            activeTab.value!.session.ui.styleSections = {
+              ...activeTab.value!.session.ui.styleSections,
+              [sec.key]: (e.target as HTMLElement & { open: boolean }).open,
             };
           }}
         >
@@ -707,14 +657,14 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
                   <span
                     class="set-dot set-dot--section"
                     title="Clear all ${sec.label.toLowerCase()} properties"
-                    @click=${(/** @type {Event} */ e) => {
+                    @click=${(e: Event) => {
                       e.stopPropagation();
                       e.preventDefault();
                       transactDoc(activeTab.value, (t) => {
                         for (const { prop, entry } of sectionActiveProps) {
                           if (activeStyle[prop] !== undefined) commitMutate(t, prop, undefined);
                           if (inferInputType(entry) === "shorthand") {
-                            for (const l of /** @type {CssLonghand[]} */ (getLonghands(prop))) {
+                            for (const l of getLonghands(prop) as CssLonghand[]) {
                               if (activeStyle[l.name] !== undefined)
                                 commitMutate(t, l.name, undefined);
                             }
@@ -738,10 +688,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
     <sp-accordion-item
       label="Custom"
       .open=${customIsOpen}
-      @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-        activeTab.value.session.ui.styleSections = {
-          ...activeTab.value.session.ui.styleSections,
-          other: /** @type {HTMLElement & { open: boolean }} */ (e.target).open,
+      @sp-accordion-item-toggle=${(e: Event) => {
+        activeTab.value!.session.ui.styleSections = {
+          ...activeTab.value!.session.ui.styleSections,
+          other: (e.target as HTMLElement & { open: boolean }).open,
         };
       }}
     >
@@ -753,8 +703,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
                 size="s"
                 class="kv-key"
                 .value=${live(prop)}
-                @change=${(/** @type {Event} */ e) => {
-                  const newProp = /** @type {HTMLInputElement} */ (e.target).value.trim();
+                @change=${(e: Event) => {
+                  const newProp = (e.target as HTMLInputElement).value.trim();
                   if (newProp && newProp !== prop) {
                     transactDoc(activeTab.value, (t) => {
                       commitMutate(t, prop, undefined);
@@ -768,8 +718,8 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
                 class="kv-val"
                 .value=${live(String(activeStyle[prop]))}
                 placeholder=${ifDefined(cssInitialMap.get(prop))}
-                @input=${debouncedStyleCommit(`custom:${prop}`, 400, (/** @type {Event} */ e) => {
-                  commitStyle(prop, /** @type {HTMLInputElement} */ (e.target).value);
+                @input=${debouncedStyleCommit(`custom:${prop}`, 400, (e: Event) => {
+                  commitStyle(prop, (e.target as HTMLInputElement).value);
                 })}
               ></sp-textfield>
               <sp-action-button size="xs" quiet @click=${() => commitStyle(prop, undefined)}>
@@ -783,14 +733,14 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
             size="s"
             placeholder="Property name…"
             style="flex:1"
-            @keydown=${(/** @type {KeyboardEvent} */ e) => {
+            @keydown=${(e: KeyboardEvent) => {
               if (e.key === "Enter") {
                 e.preventDefault();
-                const prop = /** @type {HTMLInputElement} */ (e.target).value.trim();
+                const prop = (e.target as HTMLInputElement).value.trim();
                 if (prop) {
                   const initial = cssInitialMap.get(prop) || "";
                   commitStyle(prop, initial || "");
-                  /** @type {HTMLInputElement} */ (e.target).value = "";
+                  (e.target as HTMLInputElement).value = "";
                 }
               }
             }}
@@ -808,10 +758,10 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
           <sp-accordion-item
             label="Relative Styling"
             .open=${nestedIsOpen}
-            @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-              activeTab.value.session.ui.styleSections = {
-                ...activeTab.value.session.ui.styleSections,
-                nested: /** @type {HTMLElement & { open: boolean }} */ (e.target).open,
+            @sp-accordion-item-toggle=${(e: Event) => {
+              activeTab.value!.session.ui.styleSections = {
+                ...activeTab.value!.session.ui.styleSections,
+                nested: (e.target as HTMLElement & { open: boolean }).open,
               };
             }}
           >
@@ -868,7 +818,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector, effectiveSty
  * @param {{ getCanvasMode: () => string }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderStylePanelTemplate(ctx) {
+export function renderStylePanelTemplate(ctx: { getCanvasMode: () => string }) {
   const tab = activeTab.value;
   if (!tab) return html`<div class="empty-state">No document loaded</div>`;
   if (ctx.getCanvasMode() === "stylebook" && tab.session.ui.stylebookSelection) {
@@ -895,20 +845,16 @@ export function renderStylePanelTemplate(ctx) {
 
 /** Single property input row (generic field row helper) */
 export function _fieldRow(
-  /** @type {string} */ label,
-  /** @type {string} */ type,
-  /** @type {string} */ value,
-  /** @type {(v: string | boolean) => void} */ onChange,
-  /** @type {string | undefined} */ _datalistId,
+  label: string,
+  type: string,
+  value: string,
+  onChange: (v: string | boolean) => void,
+  _datalistId: string | undefined,
 ) {
-  /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let debounceTimer;
-  const onInput = (/** @type {Event} */ e) => {
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  const onInput = (e: Event) => {
     clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(
-      () => onChange(/** @type {HTMLInputElement} */ (e.target).value),
-      400,
-    );
+    debounceTimer = setTimeout(() => onChange((e.target as HTMLInputElement).value), 400);
   };
   const inputTpl =
     type === "textarea"
@@ -921,8 +867,7 @@ export function _fieldRow(
       : type === "checkbox"
         ? html`<sp-checkbox
             ?checked=${!!value}
-            @change=${(/** @type {Event} */ e) =>
-              onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
+            @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
           ></sp-checkbox>`
         : html`<sp-textfield
             size="s"