@jxsuite/studio 0.26.2 → 0.28.0

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");

package/src/tabs/tab.ts

@@ -1,5 +1,6 @@
 /// <reference lib="dom" />
 import { reactive, effectScope } from "../reactivity";
+import { formatByName, formatForPath } from "../format/format-host";
 import type {
   GitDiffState,
   InlineEditDef,
@@ -47,7 +48,11 @@ export interface Tab {
   documentPath: string | null;
   fileHandle: FileSystemFileHandle | null;
   capabilities: { modes: string[] };
-  scope: { stop(): void; run<T>(fn: () => T): T | undefined; [k: string]: unknown };
+  scope: {
+    stop(): void;
+    run<T>(fn: () => T): T | undefined;
+    [k: string]: unknown;
+  };
   doc: {
     document: JxMutableNode;
     content: { frontmatter: Record<string, unknown> };
@@ -152,8 +157,7 @@ export function createTab({
       document,
       sourceFormat,
       content: { frontmatter: frontmatter || {} },
-      mode:
-        sourceFormat === "md" ? "content" : documentPath?.endsWith(".md") ? "content" : "component",
+      mode: inferDocumentMode(documentPath, sourceFormat),
       handlersSource: null,
       dirty: false,
     }),
@@ -163,7 +167,12 @@ export function createTab({
       clipboard: null,
       documentStack: [],
       ui: createDefaultUi(),
-      canvas: { status: "idle", scope: null, error: null, pendingInlineEdit: null },
+      canvas: {
+        status: "idle",
+        scope: null,
+        error: null,
+        pendingInlineEdit: null,
+      },
     }),
     history: reactive({
       snapshots: [{ document: structuredClone(document), selection: null }],
@@ -181,11 +190,25 @@ export function createTab({
  */
 function inferModes(documentPath: string | null | undefined, sourceFormat: string | null) {
   if (documentPath === "project.json") return ["stylebook", "source"];
-  if (sourceFormat === "md" || documentPath?.endsWith(".md"))
-    return ["edit", "design", "preview", "source"];
+  const format = formatByName(sourceFormat) ?? formatForPath(documentPath);
+  if (format) return format.studio?.modes ?? ["edit", "design", "preview", "source"];
   return ALL_MODES;
 }
 
+/**
+ * Document mode for a new tab: format-class documents default to their $studio.documentMode
+ * (content unless promoted to component); JSON is component.
+ *
+ * @param {string | null | undefined} documentPath
+ * @param {string | null} sourceFormat
+ * @returns {string}
+ */
+function inferDocumentMode(documentPath: string | null | undefined, sourceFormat: string | null) {
+  const format = formatByName(sourceFormat) ?? formatForPath(documentPath);
+  if (format) return format.studio?.documentMode?.default ?? "content";
+  return "component";
+}
+
 /**
  * Dispose a tab — stops its effectScope, killing all effects created within it.
  *

package/src/tabs/transact.ts

@@ -100,6 +100,7 @@ export function mutateInsertNode(
   nodeDef: JxMutableNode,
 ) {
   const parent = getNodeAtPath(tab.doc.document, parentPath);
+  if (!parent) return;
   if (!parent.children) parent.children = [];
   parent.children.splice(index, 0, structuredClone(nodeDef));
 }
@@ -144,7 +145,10 @@ export function mutateWrapNode(tab: Tab, path: JxPath, wrapperTag: string = "div
   if (!node) return;
   const elemPath = parentElementPath(path) as JxPath;
   const idx = childIndex(path) as number;
-  const wrapper = { tagName: wrapperTag, children: [structuredClone(toRaw(node))] };
+  const wrapper = {
+    tagName: wrapperTag,
+    children: [structuredClone(toRaw(node))],
+  };
   (getNodeAtPath(tab.doc.document, elemPath).children as JxMutableNode[]).splice(idx, 1, wrapper);
   tab.session.selection = [...elemPath, "children", idx];
 }
@@ -159,9 +163,12 @@ export function mutateMoveNode(tab: Tab, fromPath: JxPath, toParentPath: JxPath,
   const doc = tab.doc.document;
   const fromParentPath = parentElementPath(fromPath) as JxPath;
   const fromIdx = childIndex(fromPath) as number;
+  if (!fromParentPath || typeof fromIdx !== "number") return;
   const fromParent = getNodeAtPath(doc, fromParentPath);
-  const [node] = (fromParent.children as JxMutableNode[]).splice(fromIdx, 1);
   const toParent = getNodeAtPath(doc, toParentPath);
+  if (!fromParent || !Array.isArray(fromParent.children) || !toParent) return;
+  const [node] = (fromParent.children as JxMutableNode[]).splice(fromIdx, 1);
+  if (node === undefined) return;
   if (!toParent.children) toParent.children = [];
   let adjustedIndex = toIndex;
   if (fromParent === toParent && fromIdx < toIndex) adjustedIndex--;

package/src/types.ts

@@ -67,7 +67,11 @@ export interface StudioPlatform {
   } | null>;
   probeRootProject(): Promise<{
     meta: { root: string; name: string };
-    info: { isSiteProject: boolean; projectConfig?: ProjectConfig | null; directories?: string[] };
+    info: {
+      isSiteProject: boolean;
+      projectConfig?: ProjectConfig | null;
+      directories?: string[];
+    };
   } | null>;
   listDirectory(dir: string): Promise<DirEntry[]>;
   readFile(path: string): Promise<string>;
@@ -81,11 +85,17 @@ export interface StudioPlatform {
   removePackage(name: string): Promise<unknown>;
   listPackages(): Promise<PackageInfo[]>;
   codeService(action: string, payload: unknown): Promise<CodeServiceResult | null>;
-  resolveSiteContext(
-    filePath: string,
-  ): Promise<{ sitePath: string | null; projectConfig?: ProjectConfig; fileRelPath?: string }>;
+  resolveSiteContext(filePath: string): Promise<{
+    sitePath: string | null;
+    projectConfig?: ProjectConfig;
+    fileRelPath?: string;
+  }>;
   locateFile(name: string): Promise<string | null>;
-  searchFiles(query: string): Promise<DirEntry[]>;
+  searchFiles(query: string, extensions?: string[]): Promise<DirEntry[]>;
+  /** List the project's registered format classes (auto-discovered from imports). */
+  listFormats?(): Promise<unknown[]>;
+  /** Invoke a format capability (parse/serialize) — { format, action, source?, doc?, options? }. */
+  formatAction?(payload: Record<string, unknown>): Promise<unknown>;
   fetchPluginSchema(src: string, prototype?: string, base?: string): Promise<unknown>;
   gitStatus(): Promise<GitStatusResult>;
   gitBranches(): Promise<GitBranchesResult>;
@@ -156,7 +166,6 @@ export interface GitDiffState {
   filePath: string;
   originalContent: string;
   currentContent: string;
-  isMarkdown: boolean;
   fileStatus: string;
   originalDoc?: unknown;
   currentDoc?: unknown;

package/src/ui/button-group.ts

@@ -40,7 +40,12 @@ export function renderButtonGroup(
   const extraSelected = hasExtra && extra.includes(String(value));
 
   return html`
-    <div class=${classMap({ "button-group-combo": true, "has-overflow": hasExtra })}>
+    <div
+      class=${classMap({
+        "button-group-combo": true,
+        "has-overflow": hasExtra,
+      })}
+    >
       <sp-action-group size="s" compact>
         ${values.map(
           (v: string) => html`

package/src/ui/expression-editor.ts

@@ -31,7 +31,10 @@ const OPERATOR_GROUPS = [
   { label: "Arithmetic", ops: ["+", "-", "*", "/", "%"] },
   { label: "Comparison", ops: ["===", "!==", "<", "<=", ">", ">="] },
   { label: "Logical", ops: ["&&", "||"] },
-  { label: "Array methods", ops: ["push", "pop", "shift", "unshift", "splice"] },
+  {
+    label: "Array methods",
+    ops: ["push", "pop", "shift", "unshift", "splice"],
+  },
   { label: "Aggregate", ops: ["reduce", "map", "filter"] },
 ];
 
@@ -304,7 +307,12 @@ function renderLiteralEditor(operand: any, onChange: (newVal: any) => void) {
 function renderOperandEditor(
   operand: unknown,
   onChange: (newOperand: unknown) => void,
-  opts: { stateDefs: string[]; allowEventRef: boolean; depth: number; mustBeRef?: boolean },
+  opts: {
+    stateDefs: string[];
+    allowEventRef: boolean;
+    depth: number;
+    mustBeRef?: boolean;
+  },
 ): import("lit-html").TemplateResult {
   if (opts.mustBeRef) {
     const refVal = ((operand as Record<string, unknown> | null)?.$ref as string) ?? "";
@@ -337,7 +345,10 @@ function renderOperandEditor(
               (r) => onChange({ $ref: r }),
               opts,
             )
-          : renderExpressionEditor(operand, onChange, { ...opts, depth: opts.depth + 1 })}
+          : renderExpressionEditor(operand, onChange, {
+              ...opts,
+              depth: opts.depth + 1,
+            })}
     </div>
   `;
 }

package/src/ui/layers.ts

@@ -48,7 +48,11 @@ export function showDialog<T>(
 export function showConfirmDialog(
   headline: string,
   message: string | import("lit-html").TemplateResult,
-  opts: { confirmLabel?: string; cancelLabel?: string; destructive?: boolean } = {},
+  opts: {
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+  } = {},
 ) {
   const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
   return showDialog(

package/src/ui/media-picker.ts

@@ -6,10 +6,12 @@
  * files from the project's public/ directory, with thumbnail previews for images.
  */
 
-import { html, nothing } from "lit-html";
+import { html, render as litRender, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
+import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
 import { debouncedStyleCommit } from "../store";
+import { getLayerSlot } from "./layers";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
 
@@ -92,6 +94,184 @@ export function invalidateMediaCache() {
   mediaCacheLoaded = false;
 }
 
+// ─── Popover state ───────────────────────────────────────────────────────────
+
+/** @type {((val: string) => void) | null} */
+let _popoverOnCommit: ((val: string) => void) | null = null;
+
+/** @type {HTMLElement | null} */
+let _popoverAnchorEl: HTMLElement | null = null;
+
+/** @type {HTMLInputElement | null} */
+let _popoverFilterEl: HTMLInputElement | null = null;
+
+let _popoverFilter = "";
+
+function dismissMediaPickerPopover() {
+  _popoverFilter = "";
+  _popoverOnCommit = null;
+  _popoverAnchorEl = null;
+  _popoverFilterEl = null;
+  document.removeEventListener("keydown", onPopoverKeydown, true);
+  document.removeEventListener("mousedown", onPopoverOutsideClick, true);
+  litRender(nothing, getLayerSlot("popover", "media-picker"));
+}
+
+/** @param {KeyboardEvent} e */
+function onPopoverKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    dismissMediaPickerPopover();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+/** @param {MouseEvent} e */
+function onPopoverOutsideClick(e: MouseEvent) {
+  const host = getLayerSlot("popover", "media-picker");
+  if (!host.contains(e.target as Node)) {
+    dismissMediaPickerPopover();
+  }
+}
+
+function renderMediaPickerPopover() {
+  const host = getLayerSlot("popover", "media-picker");
+  const rect = _popoverAnchorEl?.getBoundingClientRect();
+  if (!rect) return;
+
+  const query = _popoverFilter.toLowerCase();
+  const filtered = query
+    ? mediaCache.filter(
+        (m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
+      )
+    : mediaCache;
+  const options = filtered.slice(0, 50);
+
+  // Compute initial position below the anchor
+  let left = rect.left;
+  let top = rect.bottom + 4;
+
+  // Estimate popover dimensions for viewport clamping before first paint
+  const estimatedWidth = 280;
+  const estimatedHeight = Math.min(options.length * 36 + 48, 360);
+
+  if (left + estimatedWidth > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - estimatedWidth - 8);
+  }
+  if (top + estimatedHeight > window.innerHeight - 8) {
+    top = Math.max(8, rect.top - estimatedHeight - 4);
+  }
+
+  let _popoverEl: HTMLElement | null = null;
+
+  litRender(
+    html`
+      <sp-popover
+        open
+        ${ref((el) => {
+          _popoverEl = (el as HTMLElement | undefined) || null;
+        })}
+        style="position:fixed;left:${left}px;top:${top}px;z-index:30;max-height:360px;overflow-y:auto;min-width:240px"
+      >
+        <input
+          class="media-picker-filter"
+          type="text"
+          placeholder="Search images…"
+          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) => {
+            _popoverFilterEl = (el as HTMLInputElement | null) || null;
+          })}
+          @input=${(e: Event) => {
+            _popoverFilter = (e.target as HTMLInputElement).value;
+            renderMediaPickerPopover();
+          }}
+          @click=${(e: MouseEvent) => e.stopPropagation()}
+        />
+        <sp-menu
+          style="min-width:220px"
+          @change=${(e: Event) => {
+            _popoverOnCommit?.((e.target as HTMLInputElement).value);
+            dismissMediaPickerPopover();
+          }}
+        >
+          ${options.length
+            ? options.map(
+                (m) => html`
+                  <sp-menu-item value=${m.path}>
+                    ${m.isImage
+                      ? html`<img
+                          slot="icon"
+                          src=${m.path}
+                          alt=""
+                          style="width:24px;height:24px;object-fit:cover;border-radius:2px"
+                        />`
+                      : nothing}
+                    ${m.name}
+                  </sp-menu-item>
+                `,
+              )
+            : html`<sp-menu-item disabled>No matches</sp-menu-item>`}
+          ${filtered.length > 50
+            ? html`<sp-menu-item disabled>…${filtered.length - 50} more</sp-menu-item>`
+            : nothing}
+        </sp-menu>
+      </sp-popover>
+    `,
+    host,
+  );
+
+  // Fine-tune position after render using actual measured dimensions
+  requestAnimationFrame(() => {
+    if (_popoverEl) {
+      const popoverRect = _popoverEl.getBoundingClientRect();
+      let adjLeft = popoverRect.left;
+      let adjTop = popoverRect.top;
+      let needsAdjust = false;
+
+      if (popoverRect.right > window.innerWidth - 4) {
+        adjLeft = Math.max(4, window.innerWidth - popoverRect.width - 4);
+        needsAdjust = true;
+      }
+      if (popoverRect.bottom > window.innerHeight - 4) {
+        adjTop = Math.max(4, window.innerHeight - popoverRect.height - 4);
+        needsAdjust = true;
+      }
+      if (popoverRect.left < 4) {
+        adjLeft = 4;
+        needsAdjust = true;
+      }
+      if (popoverRect.top < 4) {
+        adjTop = 4;
+        needsAdjust = true;
+      }
+
+      if (needsAdjust) {
+        _popoverEl.style.left = `${adjLeft}px`;
+        _popoverEl.style.top = `${adjTop}px`;
+      }
+    }
+
+    if (_popoverFilterEl) _popoverFilterEl.focus();
+  });
+}
+
+/**
+ * @param {HTMLElement} anchorEl
+ * @param {(val: string) => void} onCommit
+ */
+function showMediaPickerPopover(anchorEl: HTMLElement, onCommit: (val: string) => void) {
+  dismissMediaPickerPopover();
+  _popoverOnCommit = onCommit;
+  _popoverAnchorEl = anchorEl;
+  _popoverFilter = "";
+  renderMediaPickerPopover();
+  document.addEventListener("keydown", onPopoverKeydown, true);
+  requestAnimationFrame(() => {
+    document.addEventListener("mousedown", onPopoverOutsideClick, true);
+  });
+}
+
 // ─── Render ──────────────────────────────────────────────────────────────────
 
 /**
@@ -111,17 +291,6 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
     currentValue.slice(currentValue.lastIndexOf(".")).toLowerCase(),
   );
 
-  // Filter media options based on current input
-  const query = currentValue.toLowerCase();
-  const filtered = query
-    ? mediaCache.filter(
-        (m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
-      )
-    : mediaCache;
-
-  // Limit displayed options
-  const options = filtered.slice(0, 20);
-
   return html`
     <div class="media-picker">
       ${isImage && currentValue
@@ -138,37 +307,17 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
       ></sp-textfield>
       ${mediaCache.length > 0
         ? html`
-            <overlay-trigger placement="bottom-end" triggered-by="click">
-              <sp-action-button size="xs" quiet slot="trigger" title="Browse media">
-                <sp-icon-image slot="icon"></sp-icon-image>
-              </sp-action-button>
-              <sp-popover slot="click-content" class="media-picker-popover">
-                <sp-menu
-                  @change=${(e: Event) => {
-                    onCommit((e.target as HTMLInputElement).value);
-                  }}
-                >
-                  ${options.map(
-                    (m) => html`
-                      <sp-menu-item value=${m.path}>
-                        ${m.isImage
-                          ? html`<img
-                              slot="icon"
-                              src=${m.path}
-                              alt=""
-                              style="width:24px;height:24px;object-fit:cover;border-radius:2px"
-                            />`
-                          : nothing}
-                        ${m.name}
-                      </sp-menu-item>
-                    `,
-                  )}
-                  ${filtered.length > 20
-                    ? html`<sp-menu-item disabled>...${filtered.length - 20} more</sp-menu-item>`
-                    : nothing}
-                </sp-menu>
-              </sp-popover>
-            </overlay-trigger>
+            <sp-action-button
+              size="xs"
+              quiet
+              title="Browse media"
+              @click=${(e: MouseEvent) => {
+                loadMediaCache();
+                showMediaPickerPopover(e.currentTarget as HTMLElement, onCommit);
+              }}
+            >
+              <sp-icon-image slot="icon"></sp-icon-image>
+            </sp-action-button>
           `
         : nothing}
     </div>

package/src/ui/unit-selector.ts

@@ -66,7 +66,12 @@ export function renderUnitSelector(
 
   return html`
     <div class="style-input-number-unit">
-      <div class=${classMap({ "input-group": true, "is-expression": isExpression })}>
+      <div
+        class=${classMap({
+          "input-group": true,
+          "is-expression": isExpression,
+        })}
+      >
         <sp-textfield
           size="s"
           placeholder=${numericPlaceholder}

package/src/utils/canvas-media.ts

@@ -83,7 +83,7 @@ export function applyCanvasStyle(
     const mediaName = key.slice(1);
     if (mediaName === "--") continue;
     if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
-      for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
+      for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ val)) {
         if (typeof v === "string" || typeof v === "number") {
           try {
             if (prop.startsWith("--")) el.style.setProperty(prop, String(v));

package/src/utils/google-fonts.ts

@@ -73,7 +73,10 @@ export function ensureGoogleFontPreconnects(head: JxHeadEntry[]) {
         e?.attributes?.href === origin,
     );
     if (!exists) {
-      const attrs: Record<string, string | boolean> = { rel: "preconnect", href: origin };
+      const attrs: Record<string, string | boolean> = {
+        rel: "preconnect",
+        href: origin,
+      };
       if (origin === "https://fonts.gstatic.com") attrs.crossorigin = "";
       head.push({ tagName: "link", attributes: attrs });
     }

package/src/utils/studio-utils.ts

@@ -4,6 +4,7 @@
  * These are all side-effect-free functions used by style/properties/events panels.
  */
 
+import { formatByName, defaultContentFormat } from "../format/format-host";
 import type { ProjectConfig, ContentTypeDef } from "@jxsuite/schema/types";
 
 /**
@@ -155,7 +156,12 @@ export function findContentTypeSchema(
         return { name, schema: def.schema };
       }
     } else {
-      const ext = `.${def.format || "md"}`;
+      const ext =
+        def.format === "json"
+          ? ".json"
+          : (formatByName(def.format)?.extensions[0] ??
+            defaultContentFormat()?.extensions[0] ??
+            ".json");
       if (documentPath.startsWith(src + "/") && documentPath.endsWith(ext)) {
         return { name, schema: def.schema };
       }

package/src/view.ts

@@ -16,7 +16,9 @@ interface ViewState {
   panY: number;
   prevCanvasMode: string | null;
   monacoEditor:
-    | (import("monaco-editor").editor.IStandaloneCodeEditor & { _ignoreNextChange?: boolean })
+    | (import("monaco-editor").editor.IStandaloneCodeEditor & {
+        _ignoreNextChange?: boolean;
+      })
     | null;
   functionEditor:
     | (import("monaco-editor").editor.IStandaloneCodeEditor & {
@@ -42,7 +44,11 @@ interface ViewState {
   forcedAttrEl: HTMLElement | null;
   elementsCollapsed: Set<string>;
   elementsFilter: string;
-  lastDragInput: { clientX: number; clientY: number; [k: string]: unknown } | null;
+  lastDragInput: {
+    clientX: number;
+    clientY: number;
+    [k: string]: unknown;
+  } | null;
   _currentDropTargetRow: HTMLElement | null;
   layerDragSourceHeight: number;
   savedRange: Range | null;