@jxsuite/studio 0.27.0 → 0.28.0

package/src/panels/shared.ts

@@ -79,7 +79,12 @@ export function defaultDef(tag: string) {
     def.children = [
       {
         tagName: "thead",
-        children: [{ tagName: "tr", children: [{ tagName: "th", textContent: "Header" }] }],
+        children: [
+          {
+            tagName: "tr",
+            children: [{ tagName: "th", textContent: "Header" }],
+          },
+        ],
       },
       {
         tagName: "tbody",

package/src/panels/signals-panel.ts

@@ -420,14 +420,20 @@ export function renderSignalsTemplate(S: SignalsPanelState, ctx: SignalsPanelCtx
                 mutateAddDef(
                   t,
                   n,
-                  /** @type {Record<string, JsonValue>} */ ({ $prototype: protoName }),
+                  /** @type {Record<string, JsonValue>} */ {
+                    $prototype: protoName,
+                  },
                 ),
               );
               expandedSignal = n;
               if (src) {
                 fetchPluginSchema(
                   { $prototype: protoName, $src: src },
-                  { ...(S.documentPath != null && { documentPath: S.documentPath }) },
+                  {
+                    ...(S.documentPath != null && {
+                      documentPath: S.documentPath,
+                    }),
+                  },
                 ).then(() => ctx.renderLeftPanel());
               } else {
                 ctx.renderLeftPanel();
@@ -683,7 +689,10 @@ function renderSignalEditorTemplate(
         exprNode,
         (newNode: any) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $expression: newNode })),
-        { stateDefs: Object.keys(S.document.state || {}), allowEventRef: false },
+        {
+          stateDefs: Object.keys(S.document.state || {}),
+          allowEventRef: false,
+        },
       )}
     `;
   }
@@ -830,7 +839,9 @@ function renderFunctionFields(
             quiet
             title="Open in code editor"
             @click=${() => {
-              ctx.updateSession({ ui: { editingFunction: { type: "def", defName: name } } });
+              ctx.updateSession({
+                ui: { editingFunction: { type: "def", defName: name } },
+              });
               ctx.renderCanvas();
             }}
           >
@@ -940,7 +951,10 @@ function renderParameterEditorTemplate(
                 style="flex:1"
                 @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
+                  next[i] = {
+                    ...next[i],
+                    name: (e.target as HTMLInputElement).value,
+                  };
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -995,7 +1009,9 @@ function renderParameterEditorTemplate(
                 @click=${() => {
                   const next = params.filter((_: unknown, j: number) => j !== i);
                   transactDoc(activeTab.value, (t) =>
-                    mutateUpdateDef(t, name, { parameters: next.length ? next : undefined }),
+                    mutateUpdateDef(t, name, {
+                      parameters: next.length ? next : undefined,
+                    }),
                   );
                 }}
                 >×</span
@@ -1007,7 +1023,9 @@ function renderParameterEditorTemplate(
           class="kv-add"
           @click=${() =>
             transactDoc(activeTab.value, (t) =>
-              mutateUpdateDef(t, name, { parameters: [...params, { name: "" }] }),
+              mutateUpdateDef(t, name, {
+                parameters: [...params, { name: "" }],
+              }),
             )}
         >
           + Add parameter
@@ -1046,7 +1064,10 @@ function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: Sign
             style="flex:1"
             @change=${(e: Event) => {
               const next = [...emits];
-              next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
+              next[i] = {
+                ...next[i],
+                name: (e.target as HTMLInputElement).value,
+              };
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
           />
@@ -1289,7 +1310,9 @@ export function renderSchemaFieldsTemplate(
                   ? parseInt((e.target as HTMLInputElement).value, 10)
                   : parseFloat((e.target as HTMLInputElement).value);
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateDef(t, name, { [prop]: isNaN(parsed) ? undefined : parsed }),
+                mutateUpdateDef(t, name, {
+                  [prop]: isNaN(parsed) ? undefined : parsed,
+                }),
               );
             }, 400);
           }}
@@ -1375,7 +1398,9 @@ export function renderSchemaFieldsTemplate(
                     @click=${() => {
                       const updated = rows.filter((_: unknown, i: number) => i !== idx);
                       transactDoc(activeTab.value, (t) =>
-                        mutateUpdateDef(t, name, { [prop]: updated.length ? updated : undefined }),
+                        mutateUpdateDef(t, name, {
+                          [prop]: updated.length ? updated : undefined,
+                        }),
                       );
                       ctx?.renderLeftPanel();
                     }}

package/src/panels/style-inputs.ts

@@ -163,7 +163,11 @@ export function buildFontOptions(
  * @param {string} prop @param {string} value @param {(value: string) => void} onChange
  */
 export function renderComboboxInput(
-  entry: { enum?: string[]; examples?: string[]; presets?: { title: string; value: string }[] },
+  entry: {
+    enum?: string[];
+    examples?: string[];
+    presets?: { title: string; value: string }[];
+  },
   prop: string,
   value: string,
   onChange: (value: string) => void,

package/src/panels/style-panel.ts

@@ -246,7 +246,9 @@ function renderShorthandRow(
                       mutateFn(t, shortProp, compress(vals as string[]));
                     });
                   },
-                  { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
+                  {
+                    placeholder: !lVal && inherited[name] ? String(inherited[name]) : "",
+                  },
                 )}
               </div>
             `;
@@ -773,7 +775,9 @@ function styleSidebarTemplate(
                       style="flex:1;text-align:left;padding:6px 10px;background:var(--spectrum-gray-200, #1a1a1a);border:none;border-radius:4px;color:var(--spectrum-gray-900, #fafafa);font-size:12px;cursor:pointer"
                       @click=${() => {
                         const newSelector = activeSelector ? `${activeSelector} ${rule}` : rule;
-                        selectStylebookTag(newSelector, undefined, { panCanvas: true });
+                        selectStylebookTag(newSelector, undefined, {
+                          panCanvas: true,
+                        });
                       }}
                     >
                       ${rule}

package/src/panels/stylebook-layers-panel.ts

@@ -57,7 +57,10 @@ export function renderStylebookLayersTemplate(ctx: {
         : [];
       return html`
         <div
-          class=${classMap({ "layer-row": true, selected: tag === selectedLeaf })}
+          class=${classMap({
+            "layer-row": true,
+            selected: tag === selectedLeaf,
+          })}
           style="padding-left:${8 + depth * 16}px"
           @click=${(e: MouseEvent) => {
             e.stopPropagation();
@@ -91,8 +94,14 @@ export function renderStylebookLayersTemplate(ctx: {
         comp: import("../files/components.js").ComponentEntry,
       ) => html`
         <div
-          class=${classMap({ "layer-row": true, selected: comp.tagName === selectedTag })}
-          @click=${() => ctx.selectStylebookTag(comp.tagName, undefined, { panCanvas: true })}
+          class=${classMap({
+            "layer-row": true,
+            selected: comp.tagName === selectedTag,
+          })}
+          @click=${() =>
+            ctx.selectStylebookTag(comp.tagName, undefined, {
+              panCanvas: true,
+            })}
         >
           <span class="layer-tag component-tag" style="background:var(--accent)">⬡</span>
           <span class="layer-label">${comp.tagName}</span>

package/src/panels/stylebook-panel.ts

@@ -65,7 +65,13 @@ interface StylebookCtx {
     el: Element,
     type: string,
     panel: any,
-  ) => { cls: string; top: string; left: string; width: string; height: string };
+  ) => {
+    cls: string;
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+  };
   effectiveZoom: () => number;
 }
 
@@ -235,11 +241,11 @@ export function renderStylebookMode(ctx: StylebookCtx) {
         ${panelEntries.map((e) => e.tpl)}
       </div>
     `,
-    /** @type {HTMLElement} */ (canvasWrap),
+    /** @type {HTMLElement} */ canvasWrap,
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(/** @type {import("./canvas-dnd.js").CanvasPanel} */ (panel));
+    canvasPanels.push(/** @type {import("./canvas-dnd.js").CanvasPanel} */ panel);
     renderIntoPanel(panel, activeSet);
   }
   if (hasMedia) {
@@ -321,7 +327,7 @@ export function refreshStylebookStyles() {
           if (mediaName === "--") continue;
           if (activeBreakpoints.has(mediaName)) {
             const mediaTagStyle = _resolveNestedStyle(
-              /** @type {Record<string, unknown>} */ (val),
+              /** @type {Record<string, unknown>} */ val,
               tag,
             );
             if (mediaTagStyle && typeof mediaTagStyle === "object") {
@@ -389,7 +395,11 @@ export function renderStylebookOverlays() {
 
     if (hoverTag && hoverTag !== selectedTag) {
       const el = findStylebookEl(panel.canvas, hoverTag);
-      if (el) boxes.push({ ..._ctx.overlayBoxDescriptor(el, "hover", panel), label: undefined });
+      if (el)
+        boxes.push({
+          ..._ctx.overlayBoxDescriptor(el, "hover", panel),
+          label: undefined,
+        });
     }
 
     if (selectedTag) {
@@ -408,7 +418,12 @@ export function renderStylebookOverlays() {
           (b) => html`
             <div
               class=${b.cls}
-              style=${styleMap({ top: b.top, left: b.left, width: b.width, height: b.height })}
+              style=${styleMap({
+                top: b.top,
+                left: b.left,
+                width: b.width,
+                height: b.height,
+              })}
             >
               ${b.label ? html`<div class="overlay-label">${b.label}</div>` : nothing}
             </div>
@@ -441,7 +456,7 @@ export function buildStylebookElement(
   if (entry.attributes) {
     for (const [k, v] of Object.entries(entry.attributes)) {
       try {
-        el.setAttribute(k, /** @type {string} */ (v));
+        el.setAttribute(k, /** @type {string} */ v);
       } catch {}
     }
   }
@@ -519,7 +534,8 @@ export async function renderComponentPreview(comp: ComponentEntry) {
         return _componentFallback(comp.tagName);
       }
     } else {
-      if (comp.path && /\.md$/i.test(comp.path)) {
+      if (comp.path && !comp.path.endsWith(".json")) {
+        // Format-class component sources (e.g. markdown) can't be imported as modules
         return _componentFallback(comp.tagName);
       }
       const root = projectState?.projectRoot;

package/src/panels/toolbar.ts

@@ -27,7 +27,12 @@ interface ToolbarCtx {
   openFile?: (path: string) => void;
   saveFile: () => void;
   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
-    sizeBreakpoints: { name: string; query: string; width: number; type: string }[];
+    sizeBreakpoints: {
+      name: string;
+      query: string;
+      width: number;
+      type: string;
+    }[];
     featureQueries: { name: string; query: string }[];
     baseWidth: number;
   };
@@ -171,7 +176,11 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
   const windowControls = (
     globalThis as unknown as {
       __jxPlatform?: {
-        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+        windowControls?: {
+          minimize: () => void;
+          maximize: () => void;
+          close: () => void;
+        };
       };
     }
   ).__jxPlatform?.windowControls;
@@ -381,7 +390,11 @@ function toolbarTemplate() {
   const windowControls = (
     globalThis as unknown as {
       __jxPlatform?: {
-        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+        windowControls?: {
+          minimize: () => void;
+          maximize: () => void;
+          close: () => void;
+        };
       };
     }
   ).__jxPlatform?.windowControls;

package/src/platforms/devserver.ts

@@ -352,9 +352,13 @@ export function createDevServerPlatform() {
       return null;
     },
 
-    /** @param {string} query */
-    async searchFiles(query: string) {
-      const glob = `**/*${query}*.{json,md}`;
+    /**
+     * @param {string} query
+     * @param {string[]} [extensions] — extra extensions beyond .json (from the format registry)
+     */
+    async searchFiles(query: string, extensions: string[] = []) {
+      const exts = ["json", ...extensions.map((e: string) => e.replace(/^\./, ""))];
+      const glob = `**/*${query}*.{${exts.join(",")}}`;
       const res = await fetch(
         `/__studio/files?dir=${encodeURIComponent(serverPath("."))}&glob=${encodeURIComponent(glob)}`,
       );
@@ -364,6 +368,31 @@ export function createDevServerPlatform() {
       return entries;
     },
 
+    // ─── Format registry ──────────────────────────────────────────────────
+
+    /** List the project's registered format classes (auto-discovered from imports). */
+    async listFormats() {
+      const res = await fetch(`/__studio/formats?dir=${encodeURIComponent(serverPath("."))}`);
+      if (!res.ok) return [];
+      return (await res.json()).formats ?? [];
+    },
+
+    /**
+     * Invoke a format capability (parse/serialize) server-side.
+     *
+     * @param {Record<string, unknown>} payload — { format, action, source?, doc?, options? }
+     */
+    async formatAction(payload: Record<string, unknown>) {
+      const res = await fetch("/__studio/format", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...payload, dir: serverPath(".") }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Format action failed");
+      return data.result;
+    },
+
     // ─── Plugin schema ────────────────────────────────────────────────────
 
     /**

package/src/resize-edges.ts

@@ -2,7 +2,12 @@
 const g = globalThis as unknown as {
   __jxPlatform?: {
     windowControls?: {
-      getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+      getFrame: () => Promise<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      }>;
       setFrame: (x: number, y: number, w: number, h: number) => void;
     };
   };
@@ -54,7 +59,12 @@ async function startResize(
   e: MouseEvent,
   edge: string,
   wc: {
-    getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+    getFrame: () => Promise<{
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }>;
     setFrame: (x: number, y: number, w: number, h: number) => void;
   },
 ) {

package/src/services/cem-export.ts

@@ -54,7 +54,9 @@ export function exportCemManifest(
         ...(d.description ? { description: d.description } : {}),
         ...(d.parameters ? { parameters: d.parameters.map(normParam) } : {}),
         ...(d.deprecated
-          ? { deprecated: typeof d.deprecated === "string" ? d.deprecated : true }
+          ? {
+              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
+            }
           : {}),
       });
       // Collect emits
@@ -80,7 +82,9 @@ export function exportCemManifest(
         ...(d.attribute ? { attribute: d.attribute } : {}),
         ...(d.reflects ? { reflects: true } : {}),
         ...(d.deprecated
-          ? { deprecated: typeof d.deprecated === "string" ? d.deprecated : true }
+          ? {
+              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
+            }
           : {}),
       });
       if (d.attribute) {
@@ -132,7 +136,9 @@ export function exportCemManifest(
     ],
   };
 
-  const blob = new Blob([JSON.stringify(manifest, null, 2)], { type: "application/json" });
+  const blob = new Blob([JSON.stringify(manifest, null, 2)], {
+    type: "application/json",
+  });
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;

package/src/settings/content-types-editor.ts

@@ -466,7 +466,7 @@ export function renderContentTypesEditor(container: HTMLElement) {
       ([name, def]) =>
         fieldCardTpl(
           name,
-          /** @type {import("./schema-field-ui.js").SchemaProperty} */ (def),
+          /** @type {import("./schema-field-ui.js").SchemaProperty} */ def,
           required.includes(name),
           handlers,
           contentTypeNames,
@@ -497,7 +497,12 @@ export function renderContentTypesEditor(container: HTMLElement) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", format: "", required: false };
+                newFieldState = {
+                  name: "",
+                  type: "string",
+                  format: "",
+                  required: false,
+                };
                 rerender();
               },
             })

package/src/settings/defs-editor.ts

@@ -460,7 +460,12 @@ export function renderDefsEditor(container: HTMLElement) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", format: "", required: false };
+                newFieldState = {
+                  name: "",
+                  type: "string",
+                  format: "",
+                  required: false,
+                };
                 rerender();
               },
             })

package/src/settings/general-settings.ts

@@ -30,7 +30,9 @@ export function renderGeneralSettings(container: HTMLElement) {
   };
 
   const onAdapterChange = (e: Event) => {
-    updateSiteConfig({ build: { ...config.build, adapter: (e.target as HTMLInputElement).value } });
+    updateSiteConfig({
+      build: { ...config.build, adapter: (e.target as HTMLInputElement).value },
+    });
   };
 
   const onEditGlobalStyles = () => {

package/src/settings/schema-field-ui.ts

@@ -157,7 +157,7 @@ export function fieldCardTpl(
                 nestedFieldCardTpl(
                   fieldName,
                   name,
-                  /** @type {SchemaProperty} */ (sub),
+                  /** @type {SchemaProperty} */ sub,
                   nestedRequired.includes(name),
                   handlers,
                 ),
@@ -274,7 +274,11 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
             const typePicker = row?.querySelector("sp-picker") as HTMLInputElement | null;
             const type = typePicker?.value || "string";
             if (name && handlers.onAddNestedField) {
-              handlers.onAddNestedField(parentName, { name, type, required: false });
+              handlers.onAddNestedField(parentName, {
+                name,
+                type,
+                required: false,
+              });
               target.value = "";
             }
           }
@@ -295,7 +299,11 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
           const name = nameInput?.value?.trim();
           const type = typePicker?.value || "string";
           if (name && handlers.onAddNestedField) {
-            handlers.onAddNestedField(parentName, { name, type, required: false });
+            handlers.onAddNestedField(parentName, {
+              name,
+              type,
+              required: false,
+            });
             if (nameInput) nameInput.value = "";
           }
         }}

package/src/settings/settings-modal.ts

@@ -68,7 +68,10 @@ function renderModal() {
           ${sections.map(
             (s) => html`
               <button
-                class=${classMap({ "settings-nav-item": true, active: _activeSection === s.key })}
+                class=${classMap({
+                  "settings-nav-item": true,
+                  active: _activeSection === s.key,
+                })}
                 @click=${() => onNavClick(s.key)}
               >
                 ${s.label}

package/src/state.ts

@@ -33,7 +33,11 @@ export interface StudioState {
   mode: string;
   content: { frontmatter: Record<string, unknown> };
   ui: Record<string, unknown>;
-  canvas: { status: string; scope: Record<string, unknown> | null; error: string | null };
+  canvas: {
+    status: string;
+    scope: Record<string, unknown> | null;
+    error: string | null;
+  };
 }
 
 interface StudioStackFrame {

package/src/studio.ts

@@ -40,7 +40,8 @@ import {
   setStatusbarRenderer,
   mountStatusbar,
 } from "./panels/statusbar";
-import { loadMarkdown, saveFile, exportFile, serializeDocument } from "./files/file-ops";
+import { parseSourceForPath, saveFile, exportFile, serializeDocument } from "./files/file-ops";
+import { loadFormats, formatForPath, documentExtensions } from "./format/format-host";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
@@ -168,7 +169,7 @@ async function navigateBack() {
   if (tab.doc.dirty && tab.documentPath) {
     try {
       const platform = getPlatform();
-      await platform.writeFile(tab.documentPath, serializeDocument(tab));
+      await platform.writeFile(tab.documentPath, await serializeDocument(tab));
     } catch (e) {
       const err = e as Error;
       statusMessage(`Save error: ${err.message}`);
@@ -198,7 +199,7 @@ async function navigateToLevel(targetIndex: number) {
   if (tab.doc.dirty && tab.documentPath) {
     try {
       const platform = getPlatform();
-      await platform.writeFile(tab.documentPath, serializeDocument(tab));
+      await platform.writeFile(tab.documentPath, await serializeDocument(tab));
     } catch (e) {
       const err = e as Error;
       statusMessage(`Save error: ${err.message}`);
@@ -222,9 +223,8 @@ async function navigateToLevel(targetIndex: number) {
 async function closeFunctionEditor() {
   const tab = activeTab.value;
   const editing =
-    /** @type {{ type: string; defName?: string; path?: JxPath; eventKey?: string } | null} */ (
-      tab?.session.ui.editingFunction
-    );
+    /** @type {{ type: string; defName?: string; path?: JxPath; eventKey?: string } | null} */ tab
+      ?.session.ui.editingFunction;
   if (!editing || !tab) return;
   if (view.functionEditor) {
     const currentCode = view.functionEditor.getValue();
@@ -237,7 +237,7 @@ async function closeFunctionEditor() {
       const current = node?.[editing.eventKey as string] || {};
       transactDoc(tab, (t) =>
         mutateUpdateProperty(t, editing.path as JxPath, editing.eventKey as string, {
-          .../** @type {object} */ (current),
+          .../** @type {object} */ current,
           $prototype: "Function",
           body: bodyToStore,
         }),
@@ -531,7 +531,12 @@ if (_projectParam) {
         // When opening project.json, default to home page instead
         if (fileRelPath === "project.json" || fileRelPath.endsWith("/project.json")) {
           let opened = false;
-          for (const candidate of ["pages/index.md", "pages/index.json"]) {
+          await loadFormats();
+          const homeCandidates = [
+            ...documentExtensions("page").map((ext) => `pages/index${ext}`),
+            "pages/index.json",
+          ];
+          for (const candidate of homeCandidates) {
             try {
               await platform.readFile(candidate);
               fileRelPath = candidate;
@@ -544,12 +549,14 @@ if (_projectParam) {
 
         const content = await platform.readFile(fileRelPath);
         if (content) {
-          let parsedDoc, frontmatter;
-          const isMd = fileRelPath.endsWith(".md");
-          if (isMd) {
-            const result = await loadMarkdown(content);
+          let parsedDoc, frontmatter, parsedMode;
+          await loadFormats();
+          const fileFormat = formatForPath(fileRelPath);
+          if (fileFormat) {
+            const result = await parseSourceForPath(fileRelPath, content);
             parsedDoc = result.document;
             frontmatter = result.frontmatter;
+            parsedMode = result.mode;
           } else {
             parsedDoc = JSON.parse(content);
           }
@@ -560,10 +567,10 @@ if (_projectParam) {
             documentPath: fileRelPath,
             document: parsedDoc,
             ...(frontmatter != null && { frontmatter }),
-            sourceFormat: isMd ? "md" : null,
+            sourceFormat: fileFormat?.name ?? null,
           });
 
-          if (isMd && activeTab.value) activeTab.value.doc.mode = "content";
+          if (parsedMode === "content" && activeTab.value) activeTab.value.doc.mode = "content";
           if (fileRelPath === "project.json" && activeTab.value) {
             activeTab.value.session.ui.canvasMode = "stylebook";
           }
@@ -671,7 +678,11 @@ async function openRecentProject(root: string) {
   }
 }
 function renderFilesTemplate() {
-  return _renderFilesTemplate({ openProject, openFileFromTree, renderLeftPanel });
+  return _renderFilesTemplate({
+    openProject,
+    openFileFromTree,
+    renderLeftPanel,
+  });
 }
 function openFileFromTree(path: string) {
   return openFileInTab(path);
@@ -718,7 +729,7 @@ function scheduleAutosave() {
     if (t?.fileHandle && t.doc.dirty && "createWritable" in t.fileHandle) {
       try {
         const writable = await t.fileHandle.createWritable();
-        await writable.write(serializeDocument(t));
+        await writable.write(await serializeDocument(t));
         await writable.close();
         t.doc.dirty = false;
         statusMessage("Auto-saved");