@jxsuite/studio 0.23.1 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Head panel — Page meta, OpenGraph, Frontmatter, and custom `$head` entries.
  *
@@ -7,31 +8,46 @@
 
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { renderFieldRow } from "../ui/field-row.js";
-import { renderMediaPicker } from "../ui/media-picker.js";
-import { debouncedStyleCommit, renderOnly, projectState } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateUpdateFrontmatter } from "../tabs/transact.js";
-import { findContentTypeSchema } from "../utils/studio-utils.js";
-import { isGoogleFontEntry, isGoogleFontPreconnect } from "../utils/google-fonts.js";
-import { invalidateLayoutCache } from "../site-context.js";
-import { getPlatform } from "../platform.js";
+import { renderFieldRow } from "../ui/field-row";
+import { renderMediaPicker } from "../ui/media-picker";
+import { debouncedStyleCommit, renderOnly, projectState } from "../store";
+import type { JsonValue, DirEntry } from "../types";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateUpdateFrontmatter } from "../tabs/transact";
+import { findContentTypeSchema } from "../utils/studio-utils";
+import { isGoogleFontEntry, isGoogleFontPreconnect } from "../utils/google-fonts";
+import { invalidateLayoutCache } from "../site-context";
+import { getPlatform } from "../platform";
+
+import type { JxHeadEntry, JxMutableNode } from "@jxsuite/schema/types";
+
+interface MetaField {
+  label: string;
+  attr: "name" | "property";
+  key: string;
+  multiline?: boolean;
+  media?: boolean;
+}
+
+interface FmSchemaEntry {
+  type?: string;
+  enum?: string[];
+  format?: string;
+  properties?: Record<string, unknown>;
+}
 
 // ─── Layout picker ──────────────────────────────────────────────────────────
 
 /** @type {{ name: string; path: string }[] | null} */
-let layoutEntries = null;
+let layoutEntries: { name: string; path: string }[] | null = null;
 
 async function loadLayoutEntries() {
   try {
     const platform = getPlatform();
     const listing = await platform.listDirectory("layouts");
     layoutEntries = listing
-      .filter(
-        (/** @type {{ type: string; name: string }} */ f) =>
-          f.type === "file" && f.name.endsWith(".json"),
-      )
-      .map((/** @type {{ type: string; name: string }} */ f) => ({
+      .filter((f: DirEntry) => f.type === "file" && f.name.endsWith(".json"))
+      .map((f: DirEntry) => ({
         name: f.name
           .replace(/\.json$/, "")
           .replace(/[-_]+/g, " ")
@@ -50,33 +66,12 @@ export function invalidateLayoutPickerCache() {
 
 // ─── Field definitions ───────────────────────────────────────────────────
 
-/**
- * @typedef {{
- *   label: string;
- *   attr: "name" | "property";
- *   key: string;
- *   multiline?: boolean;
- *   media?: boolean;
- * }} MetaField
- */
-
-/**
- * @typedef {{
- *   type?: string;
- *   enum?: string[];
- *   format?: string;
- *   properties?: Record<string, unknown>;
- * }} FmSchemaEntry
- */
-
-/** @type {MetaField[]} */
-const PAGE_FIELDS = [
+const PAGE_FIELDS: MetaField[] = [
   { label: "Description", attr: "name", key: "description" },
   { label: "Viewport", attr: "name", key: "viewport" },
 ];
 
-/** @type {MetaField[]} */
-const OG_FIELDS = [
+const OG_FIELDS: MetaField[] = [
   { label: "Title", attr: "property", key: "og:title" },
   { label: "Description", attr: "property", key: "og:description", multiline: true },
   { label: "Image", attr: "property", key: "og:image", media: true },
@@ -99,11 +94,9 @@ const RESERVED_FM_KEYS = new Set(["title"]);
  * @param {string} key
  * @returns {JxHeadEntry | undefined}
  */
-function findMetaEntry(head, attr, key) {
+function findMetaEntry(head: JxHeadEntry[], attr: "name" | "property", key: string) {
   if (!head) return undefined;
-  return head.find(
-    (/** @type {JxHeadEntry} */ e) => e?.tagName === "meta" && e?.attributes?.[attr] === key,
-  );
+  return head.find((e: JxHeadEntry) => e?.tagName === "meta" && e?.attributes?.[attr] === key);
 }
 
 /**
@@ -113,11 +106,9 @@ function findMetaEntry(head, attr, key) {
  * @param {string} rel
  * @returns {JxHeadEntry | undefined}
  */
-function findLinkEntry(head, rel) {
+function findLinkEntry(head: JxHeadEntry[], rel: string) {
   if (!head) return undefined;
-  return head.find(
-    (/** @type {JxHeadEntry} */ e) => e?.tagName === "link" && e?.attributes?.rel === rel,
-  );
+  return head.find((e: JxHeadEntry) => e?.tagName === "link" && e?.attributes?.rel === rel);
 }
 
 /**
@@ -126,7 +117,7 @@ function findLinkEntry(head, rel) {
  * @param {JxHeadEntry} entry
  * @returns {boolean}
  */
-function isManagedEntry(entry) {
+function isManagedEntry(entry: JxHeadEntry) {
   if (!entry?.tagName) return false;
   // Managed meta tags
   if (entry.tagName === "meta") {
@@ -147,10 +138,10 @@ function isManagedEntry(entry) {
  * @param {string} key
  * @param {string} content
  */
-function upsertMeta(doc, attr, key, content) {
+function upsertMeta(doc: JxMutableNode, attr: "name" | "property", key: string, content: string) {
   if (!doc.$head) doc.$head = [];
   const idx = doc.$head.findIndex(
-    (/** @type {JxHeadEntry} */ e) => e?.tagName === "meta" && e?.attributes?.[attr] === key,
+    (e: JxHeadEntry) => e?.tagName === "meta" && e?.attributes?.[attr] === key,
   );
   if (content) {
     const entry = { tagName: "meta", attributes: { [attr]: key, content } };
@@ -171,10 +162,10 @@ function upsertMeta(doc, attr, key, content) {
  * @param {string} rel
  * @param {string} href
  */
-function upsertLink(doc, rel, href) {
+function upsertLink(doc: JxMutableNode, rel: string, href: string) {
   if (!doc.$head) doc.$head = [];
   const idx = doc.$head.findIndex(
-    (/** @type {JxHeadEntry} */ e) => e?.tagName === "link" && e?.attributes?.rel === rel,
+    (e: JxHeadEntry) => e?.tagName === "link" && e?.attributes?.rel === rel,
   );
   if (href) {
     const entry = { tagName: "link", attributes: { rel, href } };
@@ -194,7 +185,7 @@ function upsertLink(doc, rel, href) {
  * @param {JxHeadEntry} entry
  * @returns {string}
  */
-function entryLabel(entry) {
+function entryLabel(entry: JxHeadEntry) {
   if (!entry?.tagName) return "unknown";
   const a = entry.attributes ?? {};
   if (a.name) return `<meta name="${String(a.name)}">`;
@@ -211,7 +202,7 @@ function entryLabel(entry) {
  * @param {JxHeadEntry} entry
  * @returns {string}
  */
-function entryValue(entry) {
+function entryValue(entry: JxHeadEntry) {
   const a = entry?.attributes ?? {};
   return String(a.content ?? a.href ?? a.src ?? entry?.textContent ?? "");
 }
@@ -226,7 +217,11 @@ function entryValue(entry) {
  * @param {(fn: (doc: JxMutableNode) => void) => void} applyMutation
  * @returns {import("lit-html").TemplateResult}
  */
-function renderMetaFieldRow(field, head, applyMutation) {
+function renderMetaFieldRow(
+  field: MetaField,
+  head: JxHeadEntry[],
+  applyMutation: (fn: (doc: JxMutableNode) => void) => void,
+) {
   const entry = findMetaEntry(head, field.attr, field.key);
   const val = String(entry?.attributes?.content ?? "");
 
@@ -235,12 +230,9 @@ function renderMetaFieldRow(field, head, applyMutation) {
       prop: field.key,
       label: field.label,
       hasValue: !!val,
-      onClear: () =>
-        applyMutation((/** @type {JxMutableNode} */ d) => upsertMeta(d, field.attr, field.key, "")),
-      widget: renderMediaPicker(field.key, val, (/** @type {string} */ v) => {
-        applyMutation((/** @type {JxMutableNode} */ d) =>
-          upsertMeta(d, field.attr, field.key, v || ""),
-        );
+      onClear: () => applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, "")),
+      widget: renderMediaPicker(field.key, val, (v: string) => {
+        applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, v || ""));
       }),
     });
   }
@@ -252,11 +244,9 @@ function renderMetaFieldRow(field, head, applyMutation) {
           multiline
           .value=${live(val)}
           placeholder="${field.label}…"
-          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (/** @type {Event} */ e) => {
-            const content = /** @type {HTMLInputElement} */ (e.target).value?.trim() ?? "";
-            applyMutation((/** @type {JxMutableNode} */ d) =>
-              upsertMeta(d, field.attr, field.key, content),
-            );
+          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (e: Event) => {
+            const content = (e.target as HTMLInputElement).value?.trim() ?? "";
+            applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, content));
           })}
         ></sp-textfield>
       `
@@ -267,11 +257,9 @@ function renderMetaFieldRow(field, head, applyMutation) {
           placeholder=${field.key === "viewport"
             ? "width=device-width, initial-scale=1"
             : `${field.label}…`}
-          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (/** @type {Event} */ e) => {
-            const content = /** @type {HTMLInputElement} */ (e.target).value?.trim() ?? "";
-            applyMutation((/** @type {JxMutableNode} */ d) =>
-              upsertMeta(d, field.attr, field.key, content),
-            );
+          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (e: Event) => {
+            const content = (e.target as HTMLInputElement).value?.trim() ?? "";
+            applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, content));
           })}
         ></sp-textfield>
       `;
@@ -280,8 +268,7 @@ function renderMetaFieldRow(field, head, applyMutation) {
     prop: field.key,
     label: field.label,
     hasValue: !!val,
-    onClear: () =>
-      applyMutation((/** @type {JxMutableNode} */ d) => upsertMeta(d, field.attr, field.key, "")),
+    onClear: () => applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, "")),
     widget,
   });
 }
@@ -296,7 +283,15 @@ function renderMetaFieldRow(field, head, applyMutation) {
  * }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPanel }) {
+export function renderHeadTemplate({
+  document: doc,
+  applyMutation,
+  renderLeftPanel,
+}: {
+  document: JxMutableNode;
+  applyMutation: (fn: (doc: JxMutableNode) => void) => void;
+  renderLeftPanel: () => void;
+}) {
   const head = doc.$head ?? [];
   const title = doc.title ?? "";
 
@@ -306,8 +301,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
 
   // Custom entries not managed by structured forms, fonts, or preconnects
   const customEntries = head.filter(
-    (/** @type {JxHeadEntry} */ e) =>
-      !isManagedEntry(e) && !isGoogleFontEntry(e) && !isGoogleFontPreconnect(e),
+    (e: JxHeadEntry) => !isManagedEntry(e) && !isGoogleFontEntry(e) && !isGoogleFontPreconnect(e),
   );
 
   // Frontmatter section (content mode only)
@@ -321,8 +315,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
     projectState?.isSiteProject &&
     (tab.documentPath.startsWith("pages/") || tab.documentPath.startsWith("./pages/"));
 
-  /** @type {import("lit-html").TemplateResult | symbol} */
-  let layoutSection = nothing;
+  let layoutSection: import("lit-html").TemplateResult | symbol = nothing;
   if (isPage) {
     if (layoutEntries === null) {
       loadLayoutEntries();
@@ -336,7 +329,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
             .replace(/^\.\/layouts\//, "")
             .replace(/\.json$/, "")
             .replace(/[-_]+/g, " ")
-            .replace(/\b\w/g, (/** @type {string} */ c) => c.toUpperCase())
+            .replace(/\b\w/g, (c: string) => c.toUpperCase())
         : "";
 
       layoutSection = html`
@@ -350,16 +343,16 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
               label: "Layout",
               hasValue: currentLayout !== undefined,
               onClear: () =>
-                applyMutation((/** @type {JxMutableNode} */ d) => {
+                applyMutation((d: JxMutableNode) => {
                   delete d.$layout;
                 }),
               widget: html`
                 <sp-picker
                   size="s"
                   value=${displayValue}
-                  @change=${(/** @type {Event} */ e) => {
-                    const val = /** @type {HTMLInputElement} */ (e.target).value;
-                    applyMutation((/** @type {JxMutableNode} */ d) => {
+                  @change=${(e: Event) => {
+                    const val = (e.target as HTMLInputElement).value;
+                    applyMutation((d: JxMutableNode) => {
                       if (val === "__default__") delete d.$layout;
                       else if (val === "__none__") d.$layout = false;
                       else d.$layout = val;
@@ -373,7 +366,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
                   <sp-menu-item value="__none__">None</sp-menu-item>
                   <sp-menu-divider></sp-menu-divider>
                   ${layoutEntries.map(
-                    (/** @type {{ name: string; path: string }} */ l) =>
+                    (l: { name: string; path: string }) =>
                       html`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`,
                   )}
                 </sp-picker>
@@ -400,7 +393,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
             label: "Title",
             hasValue: !!title,
             onClear: () =>
-              applyMutation((/** @type {JxMutableNode} */ d) => {
+              applyMutation((d: JxMutableNode) => {
                 delete d.title;
               }),
             widget: html`
@@ -408,9 +401,9 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
                 size="s"
                 .value=${live(title)}
                 placeholder="Page title…"
-                @input=${debouncedStyleCommit("head:title", 400, (/** @type {Event} */ e) => {
-                  const val = /** @type {HTMLInputElement} */ (e.target).value?.trim() ?? "";
-                  applyMutation((/** @type {JxMutableNode} */ d) => {
+                @input=${debouncedStyleCommit("head:title", 400, (e: Event) => {
+                  const val = (e.target as HTMLInputElement).value?.trim() ?? "";
+                  applyMutation((d: JxMutableNode) => {
                     if (val) d.title = val;
                     else delete d.title;
                   });
@@ -423,10 +416,9 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
             prop: "icon",
             label: "Icon",
             hasValue: !!iconHref,
-            onClear: () =>
-              applyMutation((/** @type {JxMutableNode} */ d) => upsertLink(d, "icon", "")),
-            widget: renderMediaPicker("icon", iconHref, (/** @type {string} */ v) => {
-              applyMutation((/** @type {JxMutableNode} */ d) => upsertLink(d, "icon", v || ""));
+            onClear: () => applyMutation((d: JxMutableNode) => upsertLink(d, "icon", "")),
+            widget: renderMediaPicker("icon", iconHref, (v: string) => {
+              applyMutation((d: JxMutableNode) => upsertLink(d, "icon", v || ""));
             }),
           })}
         </div>
@@ -451,7 +443,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
         ${customEntries.length > 0
           ? html`
               <div class="imports-list">
-                ${customEntries.map((/** @type {JxHeadEntry} */ entry) => {
+                ${customEntries.map((entry: JxHeadEntry) => {
                   const label = entryLabel(entry);
                   const value = entryValue(entry);
                   return html`
@@ -463,7 +455,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
                         size="xs"
                         title="Remove"
                         @click=${() => {
-                          applyMutation((/** @type {JxMutableNode} */ d) => {
+                          applyMutation((d: JxMutableNode) => {
                             if (!d.$head) return;
                             const idx = d.$head.indexOf(entry);
                             if (idx >= 0) d.$head.splice(idx, 1);
@@ -497,17 +489,11 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
             quiet
             size="xs"
             title="Add tag"
-            @click=${(/** @type {Event} */ e) => {
-              const form = /** @type {HTMLElement} */ (e.target).closest(".head-add-form");
-              const tagPicker = /** @type {HTMLInputElement | null} */ (
-                form?.querySelector(".head-add-tag")
-              );
-              const attrField = /** @type {HTMLInputElement | null} */ (
-                form?.querySelector(".head-add-attr")
-              );
-              const valField = /** @type {HTMLInputElement | null} */ (
-                form?.querySelector(".head-add-val")
-              );
+            @click=${(e: Event) => {
+              const form = (e.target as HTMLElement).closest(".head-add-form");
+              const tagPicker = form?.querySelector(".head-add-tag") as HTMLInputElement | null;
+              const attrField = form?.querySelector(".head-add-attr") as HTMLInputElement | null;
+              const valField = form?.querySelector(".head-add-val") as HTMLInputElement | null;
               const tagName = tagPicker?.value || "meta";
               const attrKey = attrField?.value?.trim();
               const attrVal = valField?.value?.trim();
@@ -515,8 +501,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
               if (attrField) attrField.value = "";
               if (valField) valField.value = "";
 
-              /** @type {JxHeadEntry} */
-              const entry = { tagName, attributes: {} };
+              const entry: JxHeadEntry = { tagName, attributes: {} };
               if (tagName === "meta") {
                 entry.attributes = { name: attrKey, content: attrVal };
               } else if (tagName === "link") {
@@ -525,7 +510,7 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
                 entry.attributes = { [attrKey]: attrVal };
               }
 
-              applyMutation((/** @type {JxMutableNode} */ d) => {
+              applyMutation((d: JxMutableNode) => {
                 if (!d.$head) d.$head = [];
                 d.$head.push(entry);
               });
@@ -548,8 +533,11 @@ function renderFrontmatterSection() {
 
   const fm = tab.doc.content?.frontmatter || {};
   const col = findContentTypeSchema(tab.documentPath, projectState?.projectConfig);
-  const schemaProps = col?.schema?.properties;
-  const requiredFields = new Set(col?.schema?.required || []);
+  const schema = col?.schema as
+    | { properties?: Record<string, FmSchemaEntry>; required?: string[] }
+    | undefined;
+  const schemaProps = schema?.properties;
+  const requiredFields = new Set(schema?.required || []);
 
   /** @type {{ field: string; entry: FmSchemaEntry; value: JsonValue }[]} */
   const fields = [];
@@ -558,7 +546,7 @@ function renderFrontmatterSection() {
       /** @type {Record<string, FmSchemaEntry>} */ (schemaProps),
     )) {
       if (RESERVED_FM_KEYS.has(field)) continue;
-      fields.push({ field, entry: fieldSchema, value: /** @type {JsonValue} */ (fm[field]) });
+      fields.push({ field, entry: fieldSchema, value: fm[field] as JsonValue });
     }
     for (const [field, value] of Object.entries(fm)) {
       if (schemaProps[field] || field.startsWith("$") || RESERVED_FM_KEYS.has(field)) continue;
@@ -589,17 +577,17 @@ function renderFrontmatterSection() {
         >
       </div>
       <div class="head-section-body">
-        ${fields.map((f) => renderFmField(f.field, f.entry, f.value, requiredFields))}
+        ${fields.map((f) => renderFmField(f.field, f.entry, f.value as JsonValue, requiredFields))}
       </div>
     </div>
   `;
 }
 
 function renderFmField(
-  /** @type {string} */ field,
-  /** @type {FmSchemaEntry} */ entry,
-  /** @type {JsonValue} */ value,
-  /** @type {Set<string>} */ requiredFields,
+  field: string,
+  entry: FmSchemaEntry,
+  value: JsonValue,
+  requiredFields: Set<string>,
 ) {
   const isRequired = requiredFields.has(field);
   const label = field.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
@@ -618,12 +606,12 @@ function renderFmField(
         <sp-checkbox
           size="s"
           .checked=${live(!!value)}
-          @change=${(/** @type {Event} */ e) =>
+          @change=${(e: Event) =>
             transactDoc(activeTab.value, (t) =>
               mutateUpdateFrontmatter(
                 t,
                 field,
-                /** @type {HTMLInputElement} */ (e.target).checked || undefined,
+                (e.target as HTMLInputElement).checked || undefined,
               ),
             )}
         ></sp-checkbox>
@@ -643,11 +631,11 @@ function renderFmField(
           size="s"
           placeholder="comma, separated"
           .value=${live(display)}
-          @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {Event} */ e) => {
-            const arr = /** @type {HTMLInputElement} */ (e.target).value
-              ? /** @type {HTMLInputElement} */ (e.target).value
+          @input=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
+            const arr = (e.target as HTMLInputElement).value
+              ? (e.target as HTMLInputElement).value
                   .split(",")
-                  .map((/** @type {string} */ s) => s.trim())
+                  .map((s: string) => s.trim())
                   .filter(Boolean)
               : undefined;
             transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
@@ -667,18 +655,12 @@ function renderFmField(
         <sp-picker
           size="s"
           .value=${live(value || "")}
-          @change=${(/** @type {Event} */ e) =>
+          @change=${(e: Event) =>
             transactDoc(activeTab.value, (t) =>
-              mutateUpdateFrontmatter(
-                t,
-                field,
-                /** @type {HTMLInputElement} */ (e.target).value || undefined,
-              ),
+              mutateUpdateFrontmatter(t, field, (e.target as HTMLInputElement).value || undefined),
             )}
         >
-          ${entry.enum.map(
-            (/** @type {string} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
-          )}
+          ${entry.enum.map((opt: string) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`)}
         </sp-picker>
       `,
     });
@@ -690,7 +672,7 @@ function renderFmField(
       label: displayLabel,
       hasValue: hasVal,
       onClear,
-      widget: renderMediaPicker(field, /** @type {string} */ (value), (/** @type {string} */ v) =>
+      widget: renderMediaPicker(field, value as string, (v: string) =>
         transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
       ),
     });
@@ -707,8 +689,8 @@ function renderFmField(
           size="s"
           hide-stepper
           .value=${live(value !== undefined ? Number(value) : undefined)}
-          @change=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {Event} */ e) => {
-            const v = /** @type {HTMLInputElement} */ (e.target).value;
+          @change=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
+            const v = (e.target as HTMLInputElement).value;
             transactDoc(activeTab.value, (t) =>
               mutateUpdateFrontmatter(t, field, isNaN(Number(v)) ? undefined : Number(v)),
             );
@@ -728,13 +710,9 @@ function renderFmField(
         size="s"
         placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
         .value=${live(value || "")}
-        @input=${debouncedStyleCommit(`fm:${field}`, 400, (/** @type {Event} */ e) => {
+        @input=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
           transactDoc(activeTab.value, (t) =>
-            mutateUpdateFrontmatter(
-              t,
-              field,
-              /** @type {HTMLInputElement} */ (e.target).value || undefined,
-            ),
+            mutateUpdateFrontmatter(t, field, (e.target as HTMLInputElement).value || undefined),
           );
         })}
       ></sp-textfield>