@jxsuite/studio 0.26.2 → 0.28.0

package/src/format/format-host.ts

@@ -0,0 +1,212 @@
+/**
+ * Format-host — the studio's view of the project's format registry.
+ *
+ * Format classes are auto-discovered server-side from the project imports map
+ * (specs/extensions.md); the studio introspects them via the PAL (`listFormats`) and invokes
+ * parse/serialize capabilities via `formatAction` (POST /__studio/format in the dev server, RPC on
+ * desktop). The studio itself holds zero format knowledge — `.json` is the single native built-in.
+ */
+
+import { getPlatform } from "../platform";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+export interface StudioFormatHints {
+  icon?: string;
+  modes?: string[];
+  documentMode?: {
+    default?: "content" | "component";
+    componentWhen?: { frontmatterKey?: string; matches?: string };
+  };
+  newFileTemplate?: string;
+  elements?: {
+    block?: string[];
+    inline?: string[];
+    void?: string[];
+    textOnly?: string[];
+    nesting?: Record<
+      string,
+      {
+        block?: boolean;
+        inline?: boolean;
+        directive?: boolean;
+        only?: string[];
+      }
+    >;
+  };
+  [key: string]: unknown;
+}
+
+export interface StudioFormat {
+  name: string;
+  extensions: string[];
+  mediaType: string | null;
+  documentKinds: string[];
+  exportTarget: boolean;
+  remote: boolean;
+  studio: StudioFormatHints | null;
+  capabilities: Record<string, { identifier: string; timing: string[] }>;
+}
+
+let _formats: StudioFormat[] = [];
+let _loaded: Promise<StudioFormat[]> | null = null;
+
+/** Load (and cache) the project's format registry from the platform. */
+export function loadFormats(): Promise<StudioFormat[]> {
+  if (!_loaded) {
+    _loaded = (async () => {
+      try {
+        const platform = getPlatform() as {
+          listFormats?: () => Promise<StudioFormat[]>;
+        };
+        _formats = (await platform.listFormats?.()) ?? [];
+      } catch {
+        _formats = [];
+      }
+      return _formats;
+    })();
+  }
+  return _loaded;
+}
+
+/** Invalidate the cached registry (call on project switch). */
+export function refreshFormats() {
+  _loaded = null;
+  _formats = [];
+}
+
+/** Seed the registry directly (tests and hosts that preload format metadata). */
+export function setFormats(formats: StudioFormat[]) {
+  _formats = formats;
+  _loaded = Promise.resolve(formats);
+}
+
+/** The last-loaded registry (synchronous access for render paths). */
+export function getFormats(): StudioFormat[] {
+  return _formats;
+}
+
+/** Look up the format claiming a file extension (".md" or "md"), optionally by capability. */
+export function formatByExtension(ext: string, capability?: string): StudioFormat | undefined {
+  const norm = ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`;
+  return _formats.find(
+    (f) => f.extensions.includes(norm) && (!capability || f.capabilities[capability]),
+  );
+}
+
+/** Look up a format by its import name. */
+export function formatByName(name: string | null | undefined): StudioFormat | undefined {
+  if (!name) return undefined;
+  return _formats.find((f) => f.name === name);
+}
+
+/** The format claiming a file path's extension, if any. */
+export function formatForPath(path: string | null | undefined): StudioFormat | undefined {
+  if (!path) return undefined;
+  const dot = path.lastIndexOf(".");
+  if (dot === -1) return undefined;
+  return formatByExtension(path.slice(dot));
+}
+
+/** Registered extensions, optionally filtered by document kind. Never includes ".json". */
+export function documentExtensions(kind?: string): string[] {
+  const exts = new Set<string>();
+  for (const f of _formats) {
+    if (kind && !f.documentKinds.includes(kind)) continue;
+    for (const e of f.extensions) exts.add(e);
+  }
+  exts.delete(".json");
+  return [...exts];
+}
+
+/** The default format for new content documents (first content-kind serializer). */
+export function defaultContentFormat(): StudioFormat | undefined {
+  return _formats.find((f) => f.capabilities.serialize && f.documentKinds.includes("content"));
+}
+
+async function formatAction(payload: Record<string, unknown>): Promise<unknown> {
+  const platform = getPlatform() as {
+    formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
+  };
+  if (!platform.formatAction) {
+    throw new Error("Platform does not support format actions");
+  }
+  return platform.formatAction(payload);
+}
+
+/** Parse source text into a Jx document via the named format's parse capability. */
+export async function formatParse(
+  name: string,
+  source: string,
+  options?: Record<string, unknown>,
+): Promise<JxMutableNode> {
+  return (await formatAction({
+    format: name,
+    action: "parse",
+    source,
+    options,
+  })) as JxMutableNode;
+}
+
+/** Serialize a Jx document to source text via the named format's serialize capability. */
+export async function formatSerialize(
+  name: string,
+  doc: Record<string, unknown>,
+  options?: Record<string, unknown>,
+): Promise<string> {
+  return (await formatAction({
+    format: name,
+    action: "serialize",
+    doc,
+    options,
+  })) as string;
+}
+
+/**
+ * Split a parsed format document into { document, frontmatter, mode } per the format's
+ * `$studio.documentMode` hints. Component documents (e.g. a frontmatter `tagName` with a hyphen)
+ * keep their full shape; content documents separate frontmatter metadata from the body children.
+ */
+export function splitFormatDocument(format: StudioFormat | undefined, doc: JxMutableNode) {
+  const hints = format?.studio?.documentMode;
+  const componentWhen = hints?.componentWhen;
+  if (componentWhen?.frontmatterKey) {
+    const value = doc[componentWhen.frontmatterKey];
+    const pattern = componentWhen.matches ? new RegExp(componentWhen.matches) : /./;
+    if (typeof value === "string" && pattern.test(value)) {
+      return {
+        document: doc,
+        frontmatter: {} as Record<string, unknown>,
+        mode: "component",
+      };
+    }
+  }
+  if (hints?.default === "component") {
+    return {
+      document: doc,
+      frontmatter: {} as Record<string, unknown>,
+      mode: "component",
+    };
+  }
+
+  // Content document — children form the root-level body; other keys are frontmatter
+  const children = (doc.children as unknown[]) ?? [];
+  if (children.length === 0) children.push({ tagName: "p", children: [] });
+
+  const documentKeys = new Set(["state", "imports"]);
+  const contentDoc: Record<string, unknown> = { children };
+  const frontmatter: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(doc)) {
+    if (key === "children") continue;
+    if (documentKeys.has(key)) {
+      contentDoc[key] = value;
+    } else {
+      frontmatter[key] = value;
+    }
+  }
+
+  return {
+    document: contentDoc as JxMutableNode,
+    frontmatter,
+    mode: "content",
+  };
+}

package/src/new-project/new-project-modal.ts

@@ -20,7 +20,13 @@ let _handle: ReturnType<typeof openModal> | null = null;
  *   directory: string;
  * }}
  */
-let _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+let _form = {
+  name: "",
+  description: "",
+  url: "",
+  adapter: "static",
+  directory: "",
+};
 
 let _error: string = "";
 
@@ -35,9 +41,18 @@ let _resolve: ((result: { root: string; config: ProjectConfig } | null) => void)
  *
  * @returns {Promise<{ root: string; config: object } | null>}
  */
-export function openNewProjectModal(): Promise<{ root: string; config: ProjectConfig } | null> {
+export function openNewProjectModal(): Promise<{
+  root: string;
+  config: ProjectConfig;
+} | null> {
   if (_handle) return Promise.resolve(null);
-  _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+  _form = {
+    name: "",
+    description: "",
+    url: "",
+    adapter: "static",
+    directory: "",
+  };
   _error = "";
   _creating = false;
 

package/src/panels/ai-panel.ts

@@ -48,7 +48,9 @@ export function mountAiPanel() {
   checkAuth();
 }
 
-const _g = globalThis as unknown as { __jxRightPanelRender?: { render: () => void } };
+const _g = globalThis as unknown as {
+  __jxRightPanelRender?: { render: () => void };
+};
 
 function rerenderPanel() {
   const { render } = _g.__jxRightPanelRender || {};

package/src/panels/block-action-bar.ts

@@ -31,8 +31,10 @@ import type { JxPath } from "../state";
  *   navigateToComponent: (path: string) => void;
  * } | null}
  */
-let _ctx: { getCanvasMode: () => string; navigateToComponent: (path: string) => void } | null =
-  null;
+let _ctx: {
+  getCanvasMode: () => string;
+  navigateToComponent: (path: string) => void;
+} | null = null;
 
 /**
  * Initialize the block action bar module.

package/src/panels/canvas-dnd.ts

@@ -42,6 +42,26 @@ export function registerPanelDnD(panel: CanvasPanel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
 
+  // Drop-target callbacks fire on EVERY target in the stack (innermost → outermost),
+  // and every canvas element is a drop target — so the indicator and the drop are
+  // driven from the monitor using only the innermost target.
+  /** Innermost drop target if it belongs to this panel's canvas, else null */
+  const innermostCanvasTarget = (location: {
+    current: {
+      dropTargets: {
+        data: Record<string | symbol, unknown>;
+        element: Element;
+      }[];
+    };
+  }) => {
+    const target = location.current.dropTargets[0];
+    if (!target) return null;
+    const tEl = target.element as HTMLElement;
+    const tPath = target.data.path;
+    if (!canvas.contains(tEl) || !Array.isArray(tPath)) return null;
+    return { el: tEl, path: tPath as JxPath, isLeaf: !!target.data._isVoid };
+  };
+
   const monitorCleanup = monitorForElements({
     onDragStart({ location }) {
       view.lastDragInput = location.current.input;
@@ -52,8 +72,34 @@ export function registerPanelDnD(panel: CanvasPanel) {
     },
     onDrag({ location }) {
       view.lastDragInput = location.current.input;
+      const target = innermostCanvasTarget(location);
+      if (target) {
+        if (_activeDropEl && _activeDropEl !== target.el) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+        }
+        _activeDropEl = target.el;
+        showCanvasDropIndicator(target.el, target.path, target.isLeaf, panel);
+      } else if (location.current.dropTargets.length > 0) {
+        // Pointer is over a non-canvas target (e.g. a layer row) — hide this panel's
+        // indicator. When over dead space (no targets at all) keep the last indicator
+        // visible so it persists for the whole drag.
+        if (_activeDropEl && canvas.contains(_activeDropEl)) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+          _activeDropEl = null;
+        }
+        dropLine.style.display = "none";
+      }
     },
-    onDrop() {
+    onDrop({ source, location }) {
+      const target = innermostCanvasTarget(location);
+      if (target) {
+        const { instruction, targetPath } = getCanvasDropResult(
+          target.el,
+          target.path,
+          target.isLeaf,
+        );
+        applyDropInstruction(instruction, source.data, targetPath);
+      }
       _activeDropEl?.classList.remove("canvas-drop-target");
       _activeDropEl = null;
       for (const p of canvasPanels) {
@@ -81,7 +127,7 @@ export function registerPanelDnD(panel: CanvasPanel) {
     const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
 
     const cleanup = dropTargetForElements({
-      element: /** @type {HTMLElement} */ (el),
+      element: /** @type {HTMLElement} */ el,
       canDrop({ source }) {
         const srcPath = source.data.path as JxPath | undefined;
         if (srcPath && isAncestor(srcPath, elPath)) return false;
@@ -90,26 +136,6 @@ export function registerPanelDnD(panel: CanvasPanel) {
       getData() {
         return { path: elPath, _isVoid: isLeaf };
       },
-      onDragEnter({ location }) {
-        view.lastDragInput = location.current.input;
-        if (_activeDropEl && _activeDropEl !== el) {
-          _activeDropEl.classList.remove("canvas-drop-target");
-        }
-        _activeDropEl = el as HTMLElement;
-        showCanvasDropIndicator(el as HTMLElement, elPath, isLeaf, panel);
-      },
-      onDrag({ location }) {
-        view.lastDragInput = location.current.input;
-        showCanvasDropIndicator(el as HTMLElement, elPath, isLeaf, panel);
-      },
-      onDragLeave() {},
-      onDrop({ source }) {
-        dropLine.style.display = "none";
-        (el as HTMLElement).classList.remove("canvas-drop-target");
-        _activeDropEl = null;
-        const { instruction, targetPath } = getCanvasDropResult(el as HTMLElement, elPath, isLeaf);
-        applyDropInstruction(instruction, source.data, targetPath);
-      },
     });
     view.canvasDndCleanups.push(cleanup);
   }
@@ -123,13 +149,21 @@ export function registerPanelDnD(panel: CanvasPanel) {
  */
 function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean): DropResult {
   if (!view.lastDragInput)
-    return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "make-child" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
   const y = view.lastDragInput.clientY;
 
   if (elPath.length === 0) {
     const children = Array.from(el.children) as HTMLElement[];
     if (children.length === 0)
-      return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+      return {
+        instruction: { type: "make-child" },
+        referenceEl: el,
+        targetPath: elPath,
+      };
     return nearestChildEdge(children, y, elPath);
   }
 
@@ -143,10 +177,22 @@ function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean):
   }
 
   if (relY < 0.25)
-    return { instruction: { type: "reorder-above" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "reorder-above" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
   if (relY > 0.75)
-    return { instruction: { type: "reorder-below" }, referenceEl: el, targetPath: elPath };
-  return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "reorder-below" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
+  return {
+    instruction: { type: "make-child" },
+    referenceEl: el,
+    targetPath: elPath,
+  };
 }
 
 /**
@@ -181,7 +227,11 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   }
 
   const childPath = [...parentPath, "children", closestIdx];
-  return { instruction, referenceEl: children[closestIdx], targetPath: childPath };
+  return {
+    instruction,
+    referenceEl: children[closestIdx],
+    targetPath: childPath,
+  };
 }
 
 /**

package/src/panels/data-explorer.ts

@@ -77,7 +77,10 @@ export function renderDataExplorerTemplate(
           return html`
             <div class="data-row">
               <div
-                class=${classMap({ "data-row-header": true, expanded: isExpanded })}
+                class=${classMap({
+                  "data-row-header": true,
+                  expanded: isExpanded,
+                })}
                 @click=${() => {
                   if (expandedDataKeys.has(name)) expandedDataKeys.delete(name);
                   else expandedDataKeys.add(name);
@@ -86,7 +89,11 @@ export function renderDataExplorerTemplate(
               >
                 <span class="signal-badge ${defCategory(def)}">${defBadgeLabel(def)}</span>
                 <span class="data-name">${name}</span>
-                <span class=${classMap({ "data-type": true, "data-pending": unwrapped === null })}
+                <span
+                  class=${classMap({
+                    "data-type": true,
+                    "data-pending": unwrapped === null,
+                  })}
                   >${dataTypeLabel(value)}</span
                 >
               </div>

package/src/panels/dnd.ts

@@ -115,9 +115,8 @@ export function registerLayersDnD() {
           onDrag({ self }: DragSelfArgs) {
             showLayerDropGap(row, self.data, container);
           },
-          onDragLeave() {
-            clearLayerDropGap(container);
-          },
+          // No onDragLeave clear — the gap persists while the pointer crosses dead space
+          // between rows; the monitor clears it when the drag moves to a non-tree target.
           onDrop() {
             clearLayerDropGap(container);
           },
@@ -128,6 +127,12 @@ export function registerLayersDnD() {
 
     // Global monitor
     const monitorCleanup = monitorForElements({
+      onDropTargetChange({ location }: DragMonitorDropArgs) {
+        // Clear the layer gap when the drag moves onto a non-tree target (e.g. a canvas
+        // element). When there is no target at all, keep the gap so it persists.
+        const inner = location.current.dropTargets[0];
+        if (inner && !extractInstruction(inner.data)) clearLayerDropGap(container);
+      },
       onDrop({ source, location }: DragMonitorDropArgs) {
         clearLayerDropGap(container);
         const target = location.current.dropTargets[0];
@@ -321,6 +326,10 @@ export function applyDropInstruction(
     const fromPath = srcData.path as JxPath;
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
+    // Reordering requires a parent and a numeric index; root-level paths can't be
+    // reordered around.
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
 
     switch (instruction.type) {
       case "reorder-above":
@@ -341,6 +350,8 @@ export function applyDropInstruction(
   } else if (srcData.type === "block") {
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
 
     switch (instruction.type) {
       case "reorder-above":

package/src/panels/editors.ts

@@ -104,7 +104,7 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
 
   const body = getFunctionBody(editing);
   const args = getFunctionArgs(
-    /** @type {EditingTarget} */ (editing as EditingTarget),
+    /** @type {EditingTarget} */ editing as EditingTarget,
     activeTab.value?.doc.document,
   );
 

package/src/panels/git-panel.ts

@@ -8,6 +8,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { getPlatform } from "../platform";
+import { formatForPath } from "../format/format-host";
 import { updateUi, renderOnly, projectState } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
@@ -191,7 +192,9 @@ export function renderGitPanel(
 
   if (!status && !loading) {
     refreshGitStatus();
-    return html`<div class="git-panel"><div class="git-loading">Loading...</div></div>`;
+    return html`<div class="git-panel">
+      <div class="git-loading">Loading...</div>
+    </div>`;
   }
 
   if (status && !status.isRepo) {
@@ -213,7 +216,10 @@ export function renderGitPanel(
         </sp-action-button>
         <sp-action-button
           size="m"
-          @click=${() => publishToGithub({ projectName: projectState?.name || "my-project" })}
+          @click=${() =>
+            publishToGithub({
+              projectName: projectState?.name || "my-project",
+            })}
           ?disabled=${loading}
         >
           <sp-icon-share slot="icon"></sp-icon-share>
@@ -266,7 +272,10 @@ export function renderGitPanel(
     ? "Up to date"
     : `${status?.ahead ? `${status.ahead} ahead` : ""}${status?.ahead && status?.behind ? ", " : ""}${status?.behind ? `${status.behind} behind` : ""}`;
   const lastUpdatedStr = _lastUpdated
-    ? _lastUpdated.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    ? _lastUpdated.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
     : "";
 
   const hasRemotes = (status?.remotes?.length ?? 0) > 0;
@@ -332,7 +341,10 @@ export function renderGitPanel(
           </div>
           <sp-action-button
             size="s"
-            @click=${() => publishToGithub({ projectName: projectState?.name || "my-project" })}
+            @click=${() =>
+              publishToGithub({
+                projectName: projectState?.name || "my-project",
+              })}
             ?disabled=${loading}
           >
             <sp-icon-share slot="icon"></sp-icon-share>
@@ -481,7 +493,7 @@ export function renderGitPanel(
 
     const onFileClick = async () => {
       if (file.status !== "M" && file.status !== "A") return;
-      if (!file.path.endsWith(".md") && !file.path.endsWith(".json")) return;
+      if (!file.path.endsWith(".json") && !formatForPath(file.path)) return;
 
       try {
         const plat = getPlatform();
@@ -494,12 +506,10 @@ export function renderGitPanel(
           plat.readFile(file.path),
         ]);
 
-        const isMarkdown = file.path.endsWith(".md");
         const diffState = {
           filePath: file.path,
           originalContent,
           currentContent,
-          isMarkdown,
           fileStatus: file.status,
         };
 
@@ -579,7 +589,7 @@ export function renderGitPanel(
     for (const f of files) {
       const parts = f.path.split("/");
       let component;
-      if (f.path.endsWith(".json") || f.path.endsWith(".class.json") || f.path.endsWith(".md")) {
+      if (f.path.endsWith(".json") || f.path.endsWith(".class.json") || formatForPath(f.path)) {
         component = parts.length > 1 ? `/${parts[parts.length - 2]}` : `/${parts[0]}`;
       } else {
         component = "Other";

package/src/panels/head-panel.ts

@@ -74,7 +74,12 @@ const PAGE_FIELDS: MetaField[] = [
 
 const OG_FIELDS: MetaField[] = [
   { label: "Title", attr: "property", key: "og:title" },
-  { label: "Description", attr: "property", key: "og:description", multiline: true },
+  {
+    label: "Description",
+    attr: "property",
+    key: "og:description",
+    multiline: true,
+  },
   { label: "Image", attr: "property", key: "og:image", media: true },
   { label: "Type", attr: "property", key: "og:type" },
 ];
@@ -243,7 +248,9 @@ function renderMetaFieldRow(
   const placeholder =
     field.key === "viewport" ? "width=device-width, initial-scale=1" : `${field.label}…`;
   const widget = field.multiline
-    ? spTextArea(`head:${field.key}`, val, commit, { placeholder: `${field.label}…` })
+    ? spTextArea(`head:${field.key}`, val, commit, {
+        placeholder: `${field.label}…`,
+      })
     : spTextField(`head:${field.key}`, val, commit, { placeholder });
 
   return renderFieldRow({
@@ -522,7 +529,7 @@ function renderFrontmatterSection() {
   const fields = [];
   if (schemaProps) {
     for (const [field, fieldSchema] of Object.entries(
-      /** @type {Record<string, FmSchemaEntry>} */ (schemaProps),
+      /** @type {Record<string, FmSchemaEntry>} */ schemaProps,
     )) {
       if (RESERVED_FM_KEYS.has(field)) continue;
       fields.push({ field, entry: fieldSchema, value: fm[field] as JsonValue });
@@ -532,7 +539,7 @@ function renderFrontmatterSection() {
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        value: /** @type {JsonValue} */ (value),
+        value: /** @type {JsonValue} */ value,
       });
     }
   } else {
@@ -541,7 +548,7 @@ function renderFrontmatterSection() {
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        value: /** @type {JsonValue} */ (value),
+        value: /** @type {JsonValue} */ value,
       });
     }
   }

package/src/panels/left-panel.ts

@@ -170,7 +170,7 @@ function _render() {
    *   content?: { frontmatter?: Record<string, unknown> };
    *   documentPath?: string;
    * }}
-   */ ({
+   */ {
     ui: aTab.session.ui,
     document: aTab.doc.document,
     mode: aTab.doc.mode,
@@ -178,7 +178,7 @@ function _render() {
     canvas: aTab.session.canvas,
     content: aTab.doc.content,
     documentPath: aTab.documentPath,
-  });
+  };
 
   /** @type {TemplateResult | typeof nothing} */
   let content;
@@ -226,12 +226,15 @@ function _render() {
             const tab = activeTab.value!;
             const fm = (tab.doc.content?.frontmatter ?? {}) as Record<string, unknown>;
             const fmHead = fm.$head as unknown[] | undefined;
-            const tmp = { title: fm.title, $head: fmHead ? [...fmHead] : undefined };
+            const tmp = {
+              title: fm.title,
+              $head: fmHead ? [...fmHead] : undefined,
+            };
             fn(tmp);
             if (tmp.title !== fm.title)
               mutateUpdateFrontmatter(tab, "title", tmp.title as JsonValue);
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ (newHead));
+            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ newHead);
             render();
           }
         : (fn: (doc: object) => void) => {