@jxsuite/studio 0.19.0 → 0.21.0

package/src/editor/inline-edit.js

@@ -5,6 +5,16 @@
  * text formatting, Enter for new paragraphs, and slash commands for inserting elements.
  */
 
+/**
+ * @typedef {{ tag: string; label: string; icon?: string; command?: string; shortcut?: string }} InlineAction
+ *
+ * @typedef {{ $inlineChildren?: string[]; $inlineActions?: InlineAction[] | string }} ElementDef
+ *
+ * @typedef {{ label: string; tag: string; description: string }} SlashCommand
+ *
+ * @typedef {{ textContent?: string | null; children?: (JxMutableNode | string)[] }} JxContentResult
+ */
+
 import elementsMeta from "../../data/elements-meta.json";
 import { toggleInlineFormat, normalizeInlineContent } from "./inline-format.js";
 import {
@@ -46,6 +56,9 @@ const EDITABLE_BLOCKS = new Set([
   "td",
   "th",
   "blockquote",
+  "span",
+  "a",
+  "label",
 ]);
 
 // ─── Context-aware inline scoping ─────────────────────────────────────────
@@ -60,7 +73,7 @@ const EDITABLE_BLOCKS = new Set([
  */
 export function isInlineInContext(childTag, parentTag) {
   if (!parentTag) return INLINE_TAGS.has(childTag);
-  const parentDef = /** @type {Record<string, any>} */ (elementsMeta.$defs)[parentTag];
+  const parentDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[parentTag];
   if (!parentDef || !parentDef.$inlineChildren) return false;
   return parentDef.$inlineChildren.includes(childTag);
 }
@@ -70,15 +83,15 @@ export function isInlineInContext(childTag, parentTag) {
  * look up h1's actions).
  *
  * @param {string} tag
- * @returns {any[] | null}
+ * @returns {InlineAction[] | null}
  */
 export function getInlineActions(tag) {
-  const def = /** @type {Record<string, any>} */ (elementsMeta.$defs)[tag];
+  const def = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[tag];
   if (!def) return null;
   let actions = def.$inlineActions;
   if (typeof actions === "string") {
-    const refDef = /** @type {Record<string, any>} */ (elementsMeta.$defs)[actions];
-    actions = refDef?.$inlineActions ?? null;
+    const refDef = /** @type {Record<string, ElementDef>} */ (elementsMeta.$defs)[actions];
+    actions = refDef?.$inlineActions ?? undefined;
   }
   if (!Array.isArray(actions)) return null;
   return actions;
@@ -88,13 +101,26 @@ export function getInlineActions(tag) {
 
 /** @type {HTMLElement | null} */
 let activeEl = null; // currently contenteditable element
-/** @type {any[] | null} */
+/** @type {JxPath | null} */
 let activePath = null; // JSON path to the active element
-/** @type {((path: any[], children: any, textContent: any) => void) | null} */
+/**
+ * @type {((
+ *       path: JxPath,
+ *       children: (JxMutableNode | string)[] | null,
+ *       textContent: string | null,
+ *     ) => void)
+ *   | null}
+ */
 let commitFn = null; // function(path, newChildren, newTextContent) to commit changes
-/** @type {((path: any[], beforeChildren: any, afterChildren: any) => void) | null} */
+/**
+ * @type {((path: JxPath, beforeChildren: JxContentResult, afterChildren: JxContentResult) => void)
+ *   | null}
+ */
 let splitFn = null; // function(path, beforeChildren, afterChildren) to split paragraph
-/** @type {((path: any[], elementDef: any, commitData?: any) => void) | null} */
+/**
+ * @type {((path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void)
+ *   | null}
+ */
 let insertFn = null; // function(path, elementDef, commitData?) to insert after current block
 /** @type {(() => void) | null} */
 let endFn = null; // function() called when editing stops
@@ -113,8 +139,8 @@ export function isEditableBlock(el) {
  * Check if a node is an inline child. When parentNode is provided, uses context-aware scoping from
  * metadata. Without parent, uses the fallback INLINE_TAGS set.
  *
- * @param {any} node
- * @param {any} [parentNode]
+ * @param {JxMutableNode} node
+ * @param {JxMutableNode} [parentNode]
  * @returns {boolean}
  */
 export function isInlineElement(node, parentNode) {
@@ -131,11 +157,21 @@ export function isInlineElement(node, parentNode) {
  * Start inline editing on a canvas element.
  *
  * @param {HTMLElement} el - The canvas DOM element to edit
- * @param {any[]} path - JSON path to the element
- * @param {Record<string, any>} callbacks - { onCommit, onSplit, onInsert, onEnd } onCommit(path,
- *   children|null, textContent|null) — save inline content onSplit(path, beforeChildren,
- *   afterChildren) — Enter key: split block onInsert(path, elementDef) — slash command: insert
- *   after onEnd() — called when editing stops (for overlay restoration)
+ * @param {JxPath} path - JSON path to the element
+ * @param {{
+ *   onCommit: (
+ *     path: JxPath,
+ *     children: (JxMutableNode | string)[] | null,
+ *     textContent: string | null,
+ *   ) => void;
+ *   onSplit: (
+ *     path: JxPath,
+ *     beforeChildren: JxContentResult,
+ *     afterChildren: JxContentResult,
+ *   ) => void;
+ *   onInsert: (path: JxPath, elementDef: SlashCommand, commitData?: JxContentResult) => void;
+ *   onEnd: () => void;
+ * }} callbacks
  */
 export function startEditing(el, path, callbacks) {
   if (activeEl) stopEditing();
@@ -373,8 +409,8 @@ function commitChanges() {
  * Normalize a node's children array: merge adjacent text nodes and fold all-text children into
  * textContent. Returns `{ textContent }` or `{ children }`.
  *
- * @param {{ children?: any[] }} node
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @param {{ children?: (JxMutableNode | string)[] }} node
+ * @returns {JxContentResult}
  */
 export function normalizeChildren(node) {
   if (!Array.isArray(node.children) || node.children.length === 0) return { textContent: "" };
@@ -394,7 +430,7 @@ export function normalizeChildren(node) {
   }
 
   // Step 2: If all children are text, fold into textContent
-  if (merged.every((/** @type {any} */ c) => typeof c === "string")) {
+  if (merged.every((/** @type {JxMutableNode | string} */ c) => typeof c === "string")) {
     return { textContent: merged.join("") };
   }
 
@@ -406,7 +442,7 @@ export function normalizeChildren(node) {
  * for plain text or { children } for rich content.
  *
  * @param {HTMLElement} el
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @returns {JxContentResult}
  */
 function elementToJx(el) {
   const nodes = el.childNodes;
@@ -418,7 +454,7 @@ function elementToJx(el) {
   }
 
   // Mixed content → children array
-  /** @type {any[]} */
+  /** @type {(JxMutableNode | string)[]} */
   const children = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
@@ -433,7 +469,7 @@ function elementToJx(el) {
  * Convert a DOM node to a Jx element definition.
  *
  * @param {Node} node
- * @returns {any}
+ * @returns {JxMutableNode | string | null}
  */
 function domNodeToJx(node) {
   if (node.nodeType === Node.TEXT_NODE) {
@@ -446,7 +482,7 @@ function domNodeToJx(node) {
 
   const el = /** @type {HTMLElement} */ (node);
   const tag = el.tagName.toLowerCase();
-  /** @type {Record<string, any>} */
+  /** @type {JxMutableNode} */
   const result = { tagName: tag };
 
   // Map browser execCommand output to our tag conventions
@@ -475,7 +511,7 @@ function domNodeToJx(node) {
     result.children = [];
     for (const child of childNodes) {
       const jsx = domNodeToJx(child);
-      if (jsx) result.children.push(jsx);
+      if (jsx) result.children.push(/** @type {JxMutableNode} */ (jsx));
     }
   }
 
@@ -486,7 +522,7 @@ function domNodeToJx(node) {
  * Convert a DocumentFragment to a Jx-compatible structure. Returns { textContent } or { children }.
  *
  * @param {DocumentFragment} frag
- * @returns {{ textContent?: string | null; children?: any[] }}
+ * @returns {JxContentResult}
  */
 function fragmentToJx(frag) {
   const nodes = frag.childNodes;
@@ -495,14 +531,19 @@ function fragmentToJx(frag) {
     return { textContent: nodes[0].textContent };
   }
 
-  /** @type {any[]} */
+  /** @type {(JxMutableNode | string)[]} */
   const children = [];
   for (const child of nodes) {
     const jsx = domNodeToJx(child);
     if (jsx) children.push(jsx);
   }
 
-  if (children.length === 1 && children[0].tagName === "span" && children[0].textContent != null) {
+  if (
+    children.length === 1 &&
+    typeof children[0] !== "string" &&
+    children[0].tagName === "span" &&
+    children[0].textContent != null
+  ) {
     return { textContent: children[0].textContent };
   }
 
@@ -560,7 +601,7 @@ function updateSlashMenu() {
   sharedShowSlashMenu(activeEl, filter, { onSelect: handleSlashSelect });
 }
 
-/** @param {any} cmd */
+/** @param {SlashCommand} cmd */
 function handleSlashSelect(cmd) {
   if (!activeEl || !insertFn || !activePath) return;
 

package/src/editor/insertion-helper.js

@@ -34,16 +34,18 @@ import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
 /**
  * @typedef {Object} InsertionHelperContext
  * @property {() => string} getCanvasMode - Returns the active canvas mode.
- * @property {(fn: Function) => any} withPanelPointerEvents - Executes fn with pointer-events
+ * @property {(fn: Function) => unknown} withPanelPointerEvents - Executes fn with pointer-events
  *   temporarily enabled on the canvas.
  * @property {() => number} effectiveZoom - Returns the current zoom scale factor.
  * @property {(tag: string) => Object} defaultDef - Creates a default element definition for a tag.
- * @property {(path: any[]) => any[] | null} parentElementPath - Returns the parent element path, or
- *   null for root.
- * @property {(path: any[]) => string | number} childIndex - Returns the child index within the
+ * @property {(path: JxPath) => JxPath | null} parentElementPath - Returns the parent element path,
+ *   or null for root.
+ * @property {(path: JxPath) => string | number} childIndex - Returns the child index within the
  *   parent.
- * @property {(doc: any, path: any[]) => any} getNodeAtPath - Retrieves the node at a document path.
- * @property {WeakMap<any, any[]>} elToPath - Maps rendered DOM elements to their document paths.
+ * @property {(doc: JxMutableNode, path: JxPath) => JxMutableNode | null} getNodeAtPath - Retrieves
+ *   the node at a document path.
+ * @property {WeakMap<Element, JxPath>} elToPath - Maps rendered DOM elements to their document
+ *   paths.
  * @property {CanvasPanel} panel - The active canvas panel.
  */
 
@@ -58,7 +60,7 @@ let _helper = null;
 /** @type {HTMLElement | null} */
 let _currentAnchor = null;
 
-/** @type {{ edge: string; path: any[]; parentPath: any[]; idx: number } | null} */
+/** @type {{ edge: string; path: JxPath; parentPath: JxPath; idx: number } | null} */
 let _insertionPoint = null;
 
 /** @type {AbortController | null} */
@@ -133,7 +135,9 @@ function onMouseMove(e) {
   }
 
   const { panel, withPanelPointerEvents, elToPath } = _ctx;
-  const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+  const el = /** @type {HTMLElement | null} */ (
+    withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY))
+  );
 
   if (!el || !panel.canvas.contains(el)) {
     hide();
@@ -208,8 +212,8 @@ function onMouseMove(e) {
 /**
  * @param {HTMLElement} el
  * @param {string} edge
- * @param {any[]} path
- * @param {any[]} parentPath
+ * @param {JxPath} path
+ * @param {JxPath} parentPath
  * @param {number} idx
  */
 function showAt(el, edge, path, parentPath, idx) {
@@ -275,8 +279,8 @@ function onHelperClick(/** @type {MouseEvent} */ e) {
 }
 
 /**
- * @param {any} cmd
- * @param {{ edge: string; path: any[]; parentPath: any[]; idx: number }} point
+ * @param {{ label: string; tag: string; description?: string }} cmd
+ * @param {{ edge: string; path: JxPath; parentPath: JxPath; idx: number }} point
  */
 function onSlashSelect(cmd, point) {
   if (!_ctx) return;

package/src/editor/shortcuts.js

@@ -15,9 +15,10 @@ import {
   undo as tabUndo,
   redo as tabRedo,
 } from "../tabs/transact.js";
-import { isEditing } from "./inline-edit.js";
+import { isEditing, stopEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 import { openQuickSearch } from "../panels/quick-search.js";
+import { showConfirmDialog } from "../ui/layers.js";
 
 /** @typedef {import("../state.js").JxPath} JxPath */
 
@@ -132,6 +133,7 @@ export function initShortcuts(getContext) {
     if (isEditing()) {
       if (mod && e.key === "s") {
         e.preventDefault();
+        stopEditing();
         saveFile();
       }
       if (mod && e.key === "w") {
@@ -142,6 +144,7 @@ export function initShortcuts(getContext) {
     if (componentInlineEdit) {
       if (mod && e.key === "s") {
         e.preventDefault();
+        stopEditing();
         saveFile();
       }
       if (mod && e.key === "w") {
@@ -158,9 +161,16 @@ export function initShortcuts(getContext) {
             const tab = workspace.tabs.get(workspace.activeTabId);
             if (tab?.doc.dirty) {
               const name = tab.documentPath?.split("/").pop() || "Untitled";
-              if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`)) break;
+              showConfirmDialog(
+                "Unsaved Changes",
+                `"${name}" has unsaved changes. Close without saving?`,
+                { confirmLabel: "Close", destructive: true },
+              ).then((confirmed) => {
+                if (confirmed && workspace.activeTabId) closeTab(workspace.activeTabId);
+              });
+            } else {
+              closeTab(workspace.activeTabId);
             }
-            closeTab(workspace.activeTabId);
           }
           break;
         case "o":
@@ -266,7 +276,7 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         if (tab?.session.selection) {
           const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-          if (node?.children?.length > 0) {
+          if ((node?.children?.length ?? 0) > 0) {
             activeTab.value.session.selection = [...tab.session.selection, "children", 0];
           }
         }

package/src/editor/slash-menu.js

@@ -8,6 +8,7 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getLayerSlot } from "../ui/layers.js";
 
 // ─── Commands ─────────────────────────────────────────────────────────────────
@@ -30,18 +31,30 @@ const SLASH_COMMANDS = [
   { label: "Section", tag: "section", description: "Section container" },
 ];
 
+/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
+
 // ─── State ────────────────────────────────────────────────────────────────────
 
-/** @type {{ onSelect: (cmd: any) => void; showFilter?: boolean } | null} */
+/**
+ * @type {{
+ *   onSelect: (cmd: SlashCommand) => void;
+ *   showFilter?: boolean;
+ *   commands?: SlashCommand[];
+ * } | null}
+ */
 let callbacks = null;
 let activeIdx = 0;
-/** @type {any[]} */
+/** @type {SlashCommand[]} */
 let filteredItems = [];
 let open = false;
 /** @type {HTMLElement | null} */
 let _anchorEl = null;
 /** @type {DOMRect | null} */
 let _anchorRect = null;
+/** @type {HTMLInputElement | null} */
+let _filterEl = null;
+/** @type {HTMLElement | null} */
+let _popoverEl = null;
 
 /** @returns {HTMLElement} */
 function getHost() {
@@ -60,18 +73,23 @@ export function isSlashMenuOpen() {
  *
  * @param {HTMLElement} anchorEl — the element being edited (for positioning)
  * @param {string} filter — current typed filter text (after the "/")
- * @param {{ onSelect: (cmd: any) => void; showFilter?: boolean }} cbs
+ * @param {{
+ *   onSelect: (cmd: SlashCommand) => void;
+ *   showFilter?: boolean;
+ *   commands?: SlashCommand[];
+ * }} cbs
  */
 export function showSlashMenu(anchorEl, filter, cbs) {
   callbacks = cbs;
   _anchorEl = anchorEl;
   _anchorRect = anchorEl.getBoundingClientRect();
 
+  const source = cbs.commands || SLASH_COMMANDS;
   filteredItems = filter
-    ? SLASH_COMMANDS.filter(
+    ? source.filter(
         (c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter),
       )
-    : SLASH_COMMANDS;
+    : source;
 
   if (!filteredItems.length && !cbs.showFilter) {
     dismissSlashMenu();
@@ -92,10 +110,7 @@ export function showSlashMenu(anchorEl, filter, cbs) {
 
   if (cbs.showFilter) {
     requestAnimationFrame(() => {
-      const input = /** @type {HTMLInputElement | null} */ (
-        getHost().querySelector(".slash-filter")
-      );
-      if (input) input.focus();
+      if (_filterEl) _filterEl.focus();
     });
   }
 }
@@ -106,6 +121,8 @@ export function dismissSlashMenu() {
   callbacks = null;
   _anchorEl = null;
   _anchorRect = null;
+  _filterEl = null;
+  _popoverEl = null;
   filteredItems = [];
   document.removeEventListener("keydown", onKeydown, true);
   document.removeEventListener("mousedown", onOutsideClick, true);
@@ -125,6 +142,9 @@ function render(anchorEl, showFilter) {
     html`
       <sp-popover
         open
+        ${ref((el) => {
+          _popoverEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
         style="position:fixed;left:${rect.left}px;top:${rect.bottom +
         4}px;z-index:9999;max-height:320px;overflow-y:auto"
       >
@@ -135,6 +155,9 @@ function render(anchorEl, showFilter) {
               placeholder="Filter…"
               autocomplete="off"
               style="display:block;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-bottom:1px solid var(--border, #444);outline:none;font-size:13px;background:transparent;color:inherit"
+              ${ref((el) => {
+                _filterEl = /** @type {HTMLInputElement | null} */ (el || null);
+              })}
               @input=${onFilterInput}
             />`
           : nothing}
@@ -167,14 +190,12 @@ function render(anchorEl, showFilter) {
 
 /** @param {MouseEvent} e */
 function onOutsideClick(e) {
-  const host = getHost();
-  const popover = host.querySelector("sp-popover");
-  if (popover && !popover.contains(/** @type {Node} */ (e.target))) {
+  if (_popoverEl && !_popoverEl.contains(/** @type {Node} */ (e.target))) {
     dismissSlashMenu();
   }
 }
 
-/** @param {any} cmd */
+/** @param {SlashCommand} cmd */
 function select(cmd) {
   const cbs = callbacks;
   dismissSlashMenu();
@@ -186,21 +207,21 @@ function onFilterInput(e) {
   const input = /** @type {HTMLInputElement} */ (e.target);
   const filter = input.value.toLowerCase();
 
+  const source = callbacks?.commands || SLASH_COMMANDS;
   filteredItems = filter
-    ? SLASH_COMMANDS.filter(
+    ? source.filter(
         (c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter),
       )
-    : SLASH_COMMANDS;
+    : source;
 
   activeIdx = 0;
   if (_anchorEl) render(_anchorEl, true);
 
   // Re-focus input after re-render
   requestAnimationFrame(() => {
-    const el = /** @type {HTMLInputElement | null} */ (getHost().querySelector(".slash-filter"));
-    if (el && el !== document.activeElement) {
-      el.focus();
-      el.selectionStart = el.selectionEnd = el.value.length;
+    if (_filterEl && _filterEl !== document.activeElement) {
+      _filterEl.focus();
+      _filterEl.selectionStart = _filterEl.selectionEnd = _filterEl.value.length;
     }
   });
 }

package/src/files/components.js

@@ -7,7 +7,7 @@ import { projectState } from "../store.js";
  * @typedef {{
  *   tagName: string;
  *   path: string;
- *   props?: { name: string; type?: string; [k: string]: any }[];
+ *   props?: { name: string; type?: string; [k: string]: unknown }[];
  *   source?: string;
  *   package?: string;
  *   modulePath?: string;

package/src/files/file-ops.js

@@ -7,18 +7,22 @@
 import { unified } from "unified";
 import remarkStringify from "remark-stringify";
 import remarkDirective from "remark-directive";
+import remarkGfm from "remark-gfm";
 import { stringify as stringifyYaml } from "yaml";
 import { jxToMd, jxDocToMd } from "../markdown/md-convert.js";
 import { locateDocument } from "../services/code-services.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { getPlatform } from "../platform.js";
 import { activeTab, openTab } from "../workspace/workspace.js";
+import { isEditing, stopEditing } from "../editor/inline-edit.js";
 
 /** Open a file via the File System Access API (or fallback input). */
 export async function openFile() {
   try {
     if ("showOpenFilePicker" in window) {
-      const [handle] = await /** @type {any} */ (window).showOpenFilePicker({
+      const [handle] = await /** @type {{ showOpenFilePicker: Function }} */ (
+        /** @type {unknown} */ (window)
+      ).showOpenFilePicker({
         types: [
           { description: "Jx Component", accept: { "application/json": [".json"] } },
           { description: "Markdown Content", accept: { "text/markdown": [".md"] } },
@@ -66,8 +70,9 @@ export async function openFile() {
       };
       input.click();
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -75,11 +80,11 @@ export async function openFile() {
  * Parse a markdown string into document + frontmatter (pure — no side effects).
  *
  * @param {string} source Markdown text
- * @returns {Promise<{ document: any; frontmatter: Record<string, any> }>}
+ * @returns {Promise<{ document: JxMutableNode; frontmatter: Record<string, unknown> }>}
  */
 export async function loadMarkdown(source) {
   const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
-  const doc = /** @type {any} */ (transpileJxMarkdown(source));
+  const doc = /** @type {JxMutableNode} */ (transpileJxMarkdown(source));
 
   const isComponent = doc.tagName && String(doc.tagName).includes("-");
 
@@ -88,9 +93,11 @@ export async function loadMarkdown(source) {
   }
 
   // Content markdown — children form the root-level document body
-  const contentDoc = { children: doc.children ?? [] };
+  const children = doc.children ?? [];
+  if (children.length === 0) children.push({ tagName: "p", children: [] });
+  const contentDoc = { children };
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const frontmatter = {};
   for (const [key, value] of Object.entries(doc)) {
     if (key !== "children") frontmatter[key] = value;
@@ -101,6 +108,7 @@ export async function loadMarkdown(source) {
 
 /** Save the current document back to its source location. */
 export async function saveFile() {
+  if (isEditing()) stopEditing();
   const tab = activeTab.value;
   if (!tab) return;
   try {
@@ -112,7 +120,15 @@ export async function saveFile() {
       tab.doc.dirty = false;
       statusMessage("Saved");
     } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
-      const writable = await /** @type {any} */ (tab.fileHandle).createWritable();
+      const writable =
+        await /**
+         * @type {{
+         *   createWritable: () => Promise<{
+         *     write: (s: string) => Promise<void>;
+         *     close: () => Promise<void>;
+         *   }>;
+         * }}
+         */ (tab.fileHandle).createWritable();
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
@@ -120,8 +136,9 @@ export async function saveFile() {
     } else {
       statusMessage("No save target — use Export");
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Save error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -142,7 +159,9 @@ export async function exportFile() {
         : isContent
           ? "content.md"
           : "component.json";
-      const handle = await /** @type {any} */ (window).showSaveFilePicker({
+      const handle = await /** @type {{ showSaveFilePicker: Function }} */ (
+        /** @type {unknown} */ (window)
+      ).showSaveFilePicker({
         suggestedName,
         types: [{ description, accept: { [mimeType]: [ext] } }],
       });
@@ -163,8 +182,9 @@ export async function exportFile() {
       tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
-  } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Export error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    if (/** @type {Error} */ (e).name !== "AbortError")
+      statusMessage(`Export error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -178,14 +198,15 @@ export function serializeDocument(tab) {
   if (tab.doc.sourceFormat === "md") {
     const fm = tab.doc.content?.frontmatter || {};
     const fullDoc = { ...fm, children: tab.doc.document.children ?? [] };
-    return jxDocToMd(fullDoc);
+    return jxDocToMd(/** @type {JxMutableNode} */ (fullDoc));
   }
   if (tab.doc.mode === "content") {
-    const mdast = jxToMd(tab.doc.document);
+    const mdast = jxToMd(/** @type {JxElement} */ (tab.doc.document));
     const md = unified()
+      .use(remarkGfm)
       .use(remarkDirective)
       .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-      .stringify(mdast);
+      .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
     const fm = tab.doc.content?.frontmatter;
     const hasFrontmatter = fm && Object.keys(fm).length > 0;
     return hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;