@jxsuite/studio 0.27.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -32,9 +32,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
-    "@jxsuite/parser": "^0.27.0",
-    "@jxsuite/runtime": "^0.27.0",
-    "@jxsuite/schema": "^0.27.0",
+    "@jxsuite/parser": "^0.28.0",
+    "@jxsuite/runtime": "^0.28.0",
+    "@jxsuite/schema": "^0.28.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -75,12 +75,6 @@
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "quikchat": "^1.2.7",
-    "remark-directive": "^4.0.0",
-    "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
-    "remark-stringify": "^11.0.0",
-    "unified": "^11.0.5",
     "yaml": "^2.9.0"
   },
   "devDependencies": {

package/src/browse/browse.ts

@@ -20,7 +20,14 @@ import { componentRegistry } from "../files/components";
 import { showDialog, renderPopover } from "../ui/layers";
 import { renderComponentPreview } from "../panels/stylebook-panel";
 import { renderNode, buildScope, setSkipServerFunctions } from "@jxsuite/runtime";
-import { loadMarkdown } from "../files/file-ops";
+import { parseSourceForPath } from "../files/file-ops";
+import {
+  loadFormats,
+  formatForPath,
+  formatByName,
+  documentExtensions,
+  defaultContentFormat,
+} from "../format/format-host";
 
 import type { ComponentEntry } from "../files/components";
 import type { ContentTypeDef } from "@jxsuite/schema/types";
@@ -62,7 +69,13 @@ const MEDIA_EXTENSIONS = new Set([
 let activeCategory = "all";
 let searchQuery = "";
 let viewMode: "grid" | "table" = "grid";
-let fileCache: { name: string; path: string; type: string; category: string; ext: string }[] = [];
+let fileCache: {
+  name: string;
+  path: string;
+  type: string;
+  category: string;
+  ext: string;
+}[] = [];
 let loading = false;
 /** Track which projectDirs were used for the last load, so we re-scan when they change. */
 let lastProjectDirsKey = "";
@@ -117,7 +130,13 @@ async function collectFiles(
   dir: string,
   platform: ReturnType<typeof getPlatform>,
 ): Promise<{ name: string; path: string; type: string; category: string; ext: string }[]> {
-  const results: { name: string; path: string; type: string; category: string; ext: string }[] = [];
+  const results: {
+    name: string;
+    path: string;
+    type: string;
+    category: string;
+    ext: string;
+  }[] = [];
   try {
     const entries = await platform.listDirectory(dir);
     for (const entry of entries) {
@@ -200,12 +219,16 @@ function filteredFiles() {
 
 // ─── Entity types for "New +" button ────────────────────────────────────────
 
-const ENTITY_TYPES = [
-  { key: "page", label: "Page", dir: "pages", ext: ".md" },
-  { key: "layout", label: "Layout", dir: "layouts", ext: ".json" },
-  { key: "component", label: "Component", dir: "components", ext: ".json" },
-  { key: "content", label: "Content", dir: "content", ext: ".md" },
-];
+function getEntityTypes() {
+  const pageExt = documentExtensions("page")[0] ?? ".json";
+  const contentExt = defaultContentFormat()?.extensions[0] ?? ".json";
+  return [
+    { key: "page", label: "Page", dir: "pages", ext: pageExt },
+    { key: "layout", label: "Layout", dir: "layouts", ext: ".json" },
+    { key: "component", label: "Component", dir: "components", ext: ".json" },
+    { key: "content", label: "Content", dir: "content", ext: contentExt },
+  ];
+}
 
 /**
  * Build frontmatter YAML from a content type's schema properties.
@@ -220,7 +243,7 @@ function buildFrontmatterYaml(contentTypeName: string) {
 
   let yaml = "";
   for (const [field, def] of Object.entries(col.schema.properties)) {
-    const d = /** @type {{ type?: string; format?: string }} */ (def);
+    const d = /** @type {{ type?: string; format?: string }} */ def;
     yaml += `${field}: ${yamlDefault(d.type || "", d.format || "")}\n`;
   }
   return yaml || "title: Untitled\n";
@@ -241,7 +264,12 @@ function getContentTypeTypes() {
       key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
-      ext: `.${d.format || "md"}`,
+      ext:
+        d.format === "json"
+          ? ".json"
+          : (formatByName(d.format)?.extensions[0] ??
+            defaultContentFormat()?.extensions[0] ??
+            ".json"),
       contentTypeName: name,
     };
   });
@@ -261,7 +289,8 @@ async function handleNewEntity(
 ) {
   const isContentType = typeKey.startsWith("contentType:");
   const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
-  const allTypes = [...ENTITY_TYPES, ...getContentTypeTypes()];
+  await loadFormats();
+  const allTypes = [...getEntityTypes(), ...getContentTypeTypes()];
   const typeInfo = allTypes.find((t) => t.key === typeKey);
   if (!typeInfo) return;
 
@@ -275,11 +304,13 @@ async function handleNewEntity(
   const filePath = `${typeInfo.dir}/${slug}${typeInfo.ext}`;
 
   let content;
-  if (typeInfo.ext === ".md") {
-    const frontmatter = contentTypeName
-      ? buildFrontmatterYaml(contentTypeName)
-      : "title: Untitled\n";
-    content = `---\n${frontmatter}---\n\n`;
+  const entityFormat = formatForPath(filePath);
+  if (entityFormat) {
+    if (contentTypeName) {
+      content = `---\n${buildFrontmatterYaml(contentTypeName)}---\n\n`;
+    } else {
+      content = entityFormat.studio?.newFileTemplate ?? "";
+    }
   } else {
     content = JSON.stringify({ tagName: "div", children: [] }, null, "\t");
   }
@@ -589,9 +620,10 @@ async function renderDocPreview(filePath: string) {
     const platform = getPlatform();
     const content = await platform.readFile(filePath);
     setSkipServerFunctions(true);
+    await loadFormats();
     let doc;
-    if (filePath.endsWith(".md")) {
-      const result = await loadMarkdown(content);
+    if (formatForPath(filePath)) {
+      const result = await parseSourceForPath(filePath, content);
       doc = result.document;
     } else {
       doc = JSON.parse(content);
@@ -623,7 +655,7 @@ async function loadPreview(el: Element, file: { path: string; category: string }
       } else {
         preview = ((await renderDocPreview(file.path)) as HTMLElement | undefined) || undefined;
       }
-      if (preview) _previewCache.set(file.path, /** @type {HTMLElement} */ (preview));
+      if (preview) _previewCache.set(file.path, /** @type {HTMLElement} */ preview);
     } catch {
       return;
     }
@@ -639,7 +671,13 @@ async function loadPreview(el: Element, file: { path: string; category: string }
  * @param {{ openFile: (path: string) => void }} ctx
  */
 function renderCard(
-  file: { name: string; path: string; type: string; category: string; ext: string },
+  file: {
+    name: string;
+    path: string;
+    type: string;
+    category: string;
+    ext: string;
+  },
   container: HTMLElement,
   ctx: { openFile: (path: string) => void },
 ) {
@@ -736,7 +774,9 @@ export async function renderBrowse(
           @change=${(e: Event) =>
             handleNewEntity((e.target as HTMLSelectElement).value, container, ctx)}
         >
-          ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
+          ${getEntityTypes().map(
+            (t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`,
+          )}
           ${contentTypeTypes.length
             ? html`<sp-menu-divider></sp-menu-divider> ${contentTypeTypes.map(
                   (t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`,

package/src/canvas/canvas-live-render.ts

@@ -131,7 +131,11 @@ export function initCanvasLiveRender(ctx: { getCanvasMode: () => string }) {
  */
 export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl: HTMLElement) {
   const tab = activeTab.value;
-  const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode, document: tab?.doc.document };
+  const S = {
+    documentPath: tab?.documentPath,
+    mode: tab?.doc.mode,
+    document: tab?.doc.document,
+  };
   const canvasMode = _ctx!.getCanvasMode();
 
   if (S.documentPath !== _failedElementsDocPath) {
@@ -384,67 +388,65 @@ export async function renderCanvasLive(gen: number, doc: JxMutableNode, canvasEl
     const $defs = await buildScope(renderDoc, {}, docBase);
     // Bail out if a newer render started while buildScope was running
     if (gen !== view.renderGeneration) return null;
-    const el = /** @type {HTMLElement} */ (
-      runtimeRenderNode(renderDoc, $defs, {
-        onNodeCreated(
-          el: HTMLElement | Text,
-          path: (string | number)[],
-          def: Record<string, unknown>,
-        ) {
-          if (!(el instanceof HTMLElement)) return;
-          // Track layout-originated elements — don't store in elToPath to avoid
-          // path collisions with remapped page content paths
-          if (layoutWrapped && def?.$__layout) {
-            layoutElements.add(el);
-            if (el.setAttribute) el.setAttribute("data-jx-layout", "");
-            return;
-          }
+    const el = /** @type {HTMLElement} */ runtimeRenderNode(renderDoc, $defs, {
+      onNodeCreated(
+        el: HTMLElement | Text,
+        path: (string | number)[],
+        def: Record<string, unknown>,
+      ) {
+        if (!(el instanceof HTMLElement)) return;
+        // Track layout-originated elements — don't store in elToPath to avoid
+        // path collisions with remapped page content paths
+        if (layoutWrapped && def?.$__layout) {
+          layoutElements.add(el);
+          if (el.setAttribute) el.setAttribute("data-jx-layout", "");
+          return;
+        }
 
-          // Remap layout-wrapped paths: strip the layout prefix so paths are
-          // relative to the original page document (which is what S.document holds)
-          let mappedPath = path;
-          if (layoutWrapped && pageContentPrefix) {
-            const pfx = pageContentPrefix;
-            if (
-              path.length >= pfx.length &&
-              pfx.every((seg: string | number, i: number) => path[i] === seg)
-            ) {
-              mappedPath = ["children", ...path.slice(pfx.length)];
-            }
+        // Remap layout-wrapped paths: strip the layout prefix so paths are
+        // relative to the original page document (which is what S.document holds)
+        let mappedPath = path;
+        if (layoutWrapped && pageContentPrefix) {
+          const pfx = pageContentPrefix;
+          if (
+            path.length >= pfx.length &&
+            pfx.every((seg: string | number, i: number) => path[i] === seg)
+          ) {
+            mappedPath = ["children", ...path.slice(pfx.length)];
           }
+        }
 
-          // Remap $map paths: wrapper and template children → real document paths
-          // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
-          // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
-          if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
-            for (let i = 0; i < mappedPath.length - 1; i++) {
-              if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
-                const parentKey = mappedPath.slice(0, i).join("/");
-                if (mapParentPaths.has(parentKey)) {
-                  if (mappedPath.length === i + 2) {
-                    mappedPath = mappedPath.slice(0, i + 1);
-                  } else if (
-                    mappedPath.length >= i + 4 &&
-                    mappedPath[i + 2] === "children" &&
-                    mappedPath[i + 3] === 0
-                  ) {
-                    mappedPath = [
-                      ...mappedPath.slice(0, i),
-                      "children",
-                      "map",
-                      ...mappedPath.slice(i + 4),
-                    ];
-                  }
-                  break;
+        // Remap $map paths: wrapper and template children → real document paths
+        // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
+        // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
+        if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
+          for (let i = 0; i < mappedPath.length - 1; i++) {
+            if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
+              const parentKey = mappedPath.slice(0, i).join("/");
+              if (mapParentPaths.has(parentKey)) {
+                if (mappedPath.length === i + 2) {
+                  mappedPath = mappedPath.slice(0, i + 1);
+                } else if (
+                  mappedPath.length >= i + 4 &&
+                  mappedPath[i + 2] === "children" &&
+                  mappedPath[i + 3] === 0
+                ) {
+                  mappedPath = [
+                    ...mappedPath.slice(0, i),
+                    "children",
+                    "map",
+                    ...mappedPath.slice(i + 4),
+                  ];
                 }
+                break;
               }
             }
           }
-          elToPath.set(el, mappedPath);
-        },
-        _path: [],
-      })
-    );
+        }
+        elToPath.set(el, mappedPath);
+      },
+      _path: [],
+    });
     if (canvasMode === "design" || canvasMode === "edit") {
       // Disable pointer events on all rendered elements for edit mode
       el.style.pointerEvents = "none";

package/src/canvas/canvas-render.ts

@@ -11,7 +11,8 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { canvasWrap, canvasPanels, updateCanvas } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { loadMarkdown, serializeDocument } from "../files/file-ops";
+import { parseSourceForPath, serializeDocument } from "../files/file-ops";
+import { formatByName, formatForPath } from "../format/format-host";
 import { renderWelcome } from "../panels/welcome-screen";
 import { projectState } from "../state";
 import {
@@ -77,16 +78,17 @@ export function initCanvasRender(ctx: CanvasRenderCtx) {
 
 /** Monaco language for the source view of a tab's document. */
 function sourceLang(tab: import("../tabs/tab.js").Tab) {
-  if (tab.doc.sourceFormat === "md") return "markdown";
+  const format = formatByName(tab.doc.sourceFormat);
+  if (format) return format.mediaType?.split("/").pop() ?? "plaintext";
   return (tab.documentPath || "").endsWith(".js") ? "javascript" : "json";
 }
 
 /**
- * The full source text for the source view. Markdown files serialize to their on-disk form
- * (frontmatter YAML — title, $head, etc. — plus the body), not just the JSON of the body tree.
+ * The full source text for the source view. Format-class files serialize to their on-disk form
+ * (e.g. frontmatter YAML plus the body for markdown), not just the JSON of the body tree.
  */
-function sourceContent(tab: import("../tabs/tab.js").Tab, lang: string) {
-  if (lang === "markdown") return serializeDocument(tab);
+async function sourceContent(tab: import("../tabs/tab.js").Tab, lang: string) {
+  if (formatByName(tab.doc.sourceFormat)) return serializeDocument(tab);
   if (lang === "javascript") return tab.doc.document?.toString?.() || "";
   return JSON.stringify(tab.doc.document, null, 2);
 }
@@ -102,7 +104,11 @@ export function renderCanvas() {
     return;
   }
   const ctx = _ctx as CanvasRenderCtx;
-  const S = { document: tab.doc.document, ui: tab.session.ui, mode: tab.doc.mode };
+  const S = {
+    document: tab.doc.document,
+    ui: tab.session.ui,
+    mode: tab.doc.mode,
+  };
   const canvasMode = ctx.getCanvasMode();
 
   // Advance render generation so stale async renders from the previous cycle bail out
@@ -139,11 +145,17 @@ export function renderCanvas() {
   // the editing surface here, mirroring the panel draft-state behaviour).
   if (canvasMode === "source" && view.monacoEditor) {
     const editor = view.monacoEditor;
-    const newVal = sourceContent(tab, sourceLang(tab));
-    if (!editor.hasTextFocus() && editor.getValue() !== newVal) {
-      editor._ignoreNextChange = true;
-      editor.setValue(newVal);
-    }
+    sourceContent(tab, sourceLang(tab))
+      .then((newVal) => {
+        if (view.monacoEditor !== editor) return;
+        if (!editor.hasTextFocus() && editor.getValue() !== newVal) {
+          editor._ignoreNextChange = true;
+          editor.setValue(newVal);
+        }
+      })
+      .catch(() => {
+        // Serialization unavailable (e.g. format service unreachable) — keep the current buffer
+      });
     return;
   }
 
@@ -251,9 +263,19 @@ export function renderCanvas() {
 
     const filePath = tab.documentPath || "document.json";
     const lang = sourceLang(tab);
-    const content = sourceContent(tab, lang);
     const modelUri = monaco.Uri.parse("file:///" + filePath);
-    const model = monaco.editor.createModel(content, lang, modelUri);
+    const model = monaco.editor.createModel("", lang, modelUri);
+    sourceContent(tab, lang)
+      .then((content) => {
+        const editor = view.monacoEditor;
+        if (editor && editor.getModel() === model) {
+          editor._ignoreNextChange = true;
+          model.setValue(content);
+        }
+      })
+      .catch(() => {
+        // Serialization unavailable — leave the buffer empty rather than crash the render
+      });
     view.monacoEditor = monaco.editor.create(editorContainer as unknown as HTMLElement, {
       model,
       theme: "vs-dark",
@@ -280,15 +302,18 @@ export function renderCanvas() {
       debounce = setTimeout(async () => {
         const tab = activeTab.value;
         if (!tab) return;
-        if (lang === "markdown") {
+        if (formatByName(tab.doc.sourceFormat) && tab.documentPath) {
           try {
-            // Parse the full markdown source back into body + frontmatter (title, $head, etc.).
-            const { document, frontmatter } = await loadMarkdown(editor.getValue());
+            // Parse the full source back into body + frontmatter (title, $head, etc.).
+            const { document, frontmatter } = await parseSourceForPath(
+              tab.documentPath,
+              editor.getValue(),
+            );
             tab.doc.document = document as JxMutableNode;
             tab.doc.content.frontmatter = frontmatter;
             tab.doc.dirty = true;
           } catch {
-            // Unparseable markdown — don't update state
+            // Unparseable source — don't update state
           }
         } else if (lang === "json") {
           try {
@@ -354,14 +379,18 @@ export function renderCanvas() {
 
     /** @param {string} content */
     const parseContent = (content: string) => {
-      if (gitDiffState.isMarkdown) {
-        return loadMarkdown(content).then((r) => r.document);
+      const fmtPath = gitDiffState.filePath ?? "";
+      if (formatForPath(fmtPath)) {
+        return parseSourceForPath(fmtPath, content).then((r) => r.document);
       }
       return Promise.resolve().then(() => {
         try {
           return JSON.parse(content);
         } catch {
-          return { tagName: "div", children: [{ tagName: "p", textContent: "Failed to parse" }] };
+          return {
+            tagName: "div",
+            children: [{ tagName: "p", textContent: "Failed to parse" }],
+          };
         }
       });
     };

package/src/editor/context-menu.ts

@@ -216,7 +216,10 @@ export function dismissContextMenu() {
 export function showContextMenu(
   e: MouseEvent,
   path: JxPath,
-  opts: { onEditComponent?: (path: string) => void; rerender?: () => void } = {},
+  opts: {
+    onEditComponent?: (path: string) => void;
+    rerender?: () => void;
+  } = {},
 ) {
   e.preventDefault();
   dismissContextMenu();

package/src/editor/convert-to-component.ts

@@ -102,10 +102,16 @@ function extractComponentDef(node: JxMutableNode) {
 function validateName(val: string) {
   val = val.trim().toLowerCase();
   if (!val.includes("-")) {
-    return { valid: false, error: "Name must contain a hyphen (e.g. my-component)" };
+    return {
+      valid: false,
+      error: "Name must contain a hyphen (e.g. my-component)",
+    };
   }
   if (!VALID_NAME.test(val)) {
-    return { valid: false, error: "Lowercase letters, digits, and hyphens only" };
+    return {
+      valid: false,
+      error: "Lowercase letters, digits, and hyphens only",
+    };
   }
   const exists = componentRegistry.some((c: JxMutableNode) => c.tagName === val);
   if (exists) {

package/src/editor/inline-edit.ts

@@ -526,7 +526,12 @@ function domNodeToJx(node: Node) {
   const result: JxMutableNode = { tagName: tag };
 
   // Map browser execCommand output to our tag conventions
-  const tagMap: Record<string, string> = { b: "strong", i: "em", s: "del", strike: "del" };
+  const tagMap: Record<string, string> = {
+    b: "strong",
+    i: "em",
+    s: "del",
+    strike: "del",
+  };
   if (tagMap[tag]) result.tagName = tagMap[tag];
 
   // Attributes
@@ -549,7 +554,7 @@ function domNodeToJx(node: Node) {
     result.children = [];
     for (const child of childNodes) {
       const jsx = domNodeToJx(child);
-      if (jsx) result.children.push(/** @type {JxMutableNode} */ (jsx));
+      if (jsx) result.children.push(/** @type {JxMutableNode} */ jsx);
     }
   }
 

package/src/editor/insertion-helper.ts

@@ -44,7 +44,12 @@ let _helper: HTMLElement | null = null;
 
 let _currentAnchor: HTMLElement | null = null;
 
-let _insertionPoint: { edge: string; path: JxPath; parentPath: JxPath; idx: number } | null = null;
+let _insertionPoint: {
+  edge: string;
+  path: JxPath;
+  parentPath: JxPath;
+  idx: number;
+} | null = null;
 
 let _abort: AbortController | null = null;
 
@@ -87,8 +92,12 @@ export function mount(ctx: InsertionHelperContext) {
     viewport.on("mousemove", { signal: _abort.signal }).subscribe({ next: onMouseMove });
     viewport.on("mouseleave", { signal: _abort.signal }).subscribe({ next: hide });
   } else {
-    panel.viewport.addEventListener("mousemove", onMouseMove, { signal: _abort.signal });
-    panel.viewport.addEventListener("mouseleave", hide, { signal: _abort.signal });
+    panel.viewport.addEventListener("mousemove", onMouseMove, {
+      signal: _abort.signal,
+    });
+    panel.viewport.addEventListener("mouseleave", hide, {
+      signal: _abort.signal,
+    });
   }
 }
 

package/src/editor/slash-menu.ts

@@ -79,7 +79,11 @@ export function isSlashMenuOpen() {
 export function showSlashMenu(
   anchorEl: HTMLElement,
   filter: string,
-  cbs: { onSelect: (cmd: SlashCommand) => void; showFilter?: boolean; commands?: SlashCommand[] },
+  cbs: {
+    onSelect: (cmd: SlashCommand) => void;
+    showFilter?: boolean;
+    commands?: SlashCommand[];
+  },
 ) {
   callbacks = cbs;
   _anchorEl = anchorEl;