@jxsuite/studio 0.27.0 → 0.28.0

package/src/files/file-ops.ts

@@ -2,74 +2,119 @@
 /**
  * File Operations — open, save, export documents.
  *
- * All functions read/write directly from/to `activeTab.value` (the reactive tab).
+ * All functions read/write directly from/to `activeTab.value` (the reactive tab). `.json` is the
+ * native document format; every other extension dispatches through the project's format registry
+ * (parse to open, serialize to save).
  */
 
-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";
 import { locateDocument } from "../services/code-services";
 import { statusMessage } from "../panels/statusbar";
 import { getPlatform } from "../platform";
 import { activeTab, openTab } from "../workspace/workspace";
 import { isEditing, stopEditing } from "../editor/inline-edit";
+import {
+  loadFormats,
+  getFormats,
+  formatForPath,
+  formatByName,
+  formatParse,
+  formatSerialize,
+  defaultContentFormat,
+  splitFormatDocument,
+  type StudioFormat,
+} from "../format/format-host";
 
-import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
+/**
+ * Parse a format-class source string into document + frontmatter + mode per the format's
+ * $studio.documentMode hints.
+ *
+ * @param {StudioFormat} format
+ * @param {string} source
+ */
+export async function parseFormatSource(format: StudioFormat, source: string) {
+  const doc = await formatParse(format.name, source);
+  return splitFormatDocument(format, doc);
+}
+
+/**
+ * Parse a source string for a file path, dispatching by extension through the format registry.
+ * Returns null for `.json` (native — callers JSON.parse) and throws when no format class claims the
+ * extension.
+ *
+ * @param {string} path
+ * @param {string} source
+ */
+export async function parseSourceForPath(path: string, source: string) {
+  await loadFormats();
+  const format = formatForPath(path);
+  if (!format || !format.capabilities.parse) {
+    throw new Error(
+      `No format class imported for "${path}" — add one to project.json imports ` +
+        `(e.g. "Markdown": "@jxsuite/parser/Markdown.class.json")`,
+    );
+  }
+  const result = await parseFormatSource(format, source);
+  return { ...result, format };
+}
 
 /** Open a file via the File System Access API (or fallback input). */
 export async function openFile() {
   try {
-    if ("showOpenFilePicker" in window) {
-      const [handle] = await (
-        window as unknown as { showOpenFilePicker: Function }
-      ).showOpenFilePicker({
-        types: [
-          { description: "Jx Component", accept: { "application/json": [".json"] } },
-          { description: "Markdown Content", accept: { "text/markdown": [".md"] } },
-        ],
-      });
-      const file = await handle.getFile();
-      const text = await file.text();
-      const documentPath = await locateDocument(handle.name);
-
-      if (handle.name.endsWith(".md")) {
-        const { document, frontmatter } = await loadMarkdown(text);
+    await loadFormats();
+    const formats = getFormats();
+    const pickerTypes = [
+      {
+        description: "Jx Component",
+        accept: { "application/json": [".json"] },
+      },
+      ...formats
+        .filter((f) => f.capabilities.parse)
+        .map((f) => ({
+          description: f.name,
+          accept: { [f.mediaType ?? "text/plain"]: f.extensions },
+        })),
+    ];
+    const acceptExts = [".json", ...formats.flatMap((f) => f.extensions)].join(",");
+
+    const handleSource = async (
+      name: string,
+      text: string,
+      handle: FileSystemFileHandle | null = null,
+    ) => {
+      const documentPath = handle ? await locateDocument(name) : null;
+      const format = formatForPath(name);
+      if (format) {
+        const { document, frontmatter } = await parseFormatSource(format, text);
         openTab({
-          id: handle.name,
+          id: name,
           documentPath,
           fileHandle: handle,
           document,
           frontmatter,
-          sourceFormat: "md",
+          sourceFormat: format.name,
         });
       } else {
         const document = JSON.parse(text);
-        openTab({ id: handle.name, documentPath, fileHandle: handle, document });
+        openTab({ id: name, documentPath, fileHandle: handle, document });
       }
+      statusMessage(`Opened ${name}`);
+    };
 
-      statusMessage(`Opened ${handle.name}`);
+    if ("showOpenFilePicker" in window) {
+      const [handle] = await (
+        window as unknown as { showOpenFilePicker: Function }
+      ).showOpenFilePicker({ types: pickerTypes });
+      const file = await handle.getFile();
+      await handleSource(handle.name, await file.text(), handle);
     } else {
       // Fallback: file input
       const input = document.createElement("input");
       input.type = "file";
-      input.accept = ".json,.md";
+      input.accept = acceptExts;
       input.onchange = async () => {
         const file = input.files?.[0];
         if (!file) return;
-        const text = await file.text();
-
-        if (file.name.endsWith(".md")) {
-          const { document, frontmatter } = await loadMarkdown(text);
-          openTab({ id: file.name, document, frontmatter, sourceFormat: "md" });
-        } else {
-          const document = JSON.parse(text);
-          openTab({ id: file.name, document });
-        }
-
-        statusMessage(`Opened ${file.name}`);
+        await handleSource(file.name, await file.text());
       };
       input.click();
     }
@@ -78,49 +123,13 @@ export async function openFile() {
   }
 }
 
-/**
- * Parse a markdown string into document + frontmatter (pure — no side effects).
- *
- * @param {string} source Markdown text
- * @returns {Promise<{ document: JxMutableNode; frontmatter: Record<string, unknown> }>}
- */
-export async function loadMarkdown(source: string) {
-  const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
-  const doc = transpileJxMarkdown(source) as JxMutableNode;
-
-  const isComponent = doc.tagName && String(doc.tagName).includes("-");
-
-  if (isComponent) {
-    return { document: doc, frontmatter: {} };
-  }
-
-  // Content markdown — children form the root-level document body
-  const children = doc.children ?? [];
-  if (children.length === 0) children.push({ tagName: "p", children: [] });
-
-  const documentKeys = new Set(["state", "imports"]);
-  const contentDoc: Record<string, unknown> = { children };
-
-  const frontmatter: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(doc)) {
-    if (key === "children") continue;
-    if (documentKeys.has(key)) {
-      contentDoc[key] = value;
-    } else {
-      frontmatter[key] = value;
-    }
-  }
-
-  return { document: contentDoc, frontmatter };
-}
-
 /** Save the current document back to its source location. */
 export async function saveFile() {
   if (isEditing()) stopEditing();
   const tab = activeTab.value;
   if (!tab) return;
   try {
-    const output = serializeDocument(tab);
+    const output = await serializeDocument(tab);
 
     if (tab.documentPath) {
       const platform = getPlatform();
@@ -136,7 +145,7 @@ export async function saveFile() {
          *     close: () => Promise<void>;
          *   }>;
          * }}
-         */ (tab.fileHandle).createWritable();
+         */ tab.fileHandle.createWritable();
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
@@ -149,23 +158,29 @@ export async function saveFile() {
   }
 }
 
+/** The output format for a tab: its source format, or the default content format. */
+function tabFormat(tab: import("../tabs/tab.js").Tab): StudioFormat | undefined {
+  return (
+    formatByName(tab.doc.sourceFormat) ??
+    (tab.doc.mode === "content" ? defaultContentFormat() : undefined)
+  );
+}
+
 /** Export the current document to a new location (Save As / download). */
 export async function exportFile() {
   const tab = activeTab.value;
   if (!tab) return;
   try {
-    const isContent = tab.doc.mode === "content";
-    const output = serializeDocument(tab);
-    const mimeType = isContent ? "text/markdown" : "application/json";
-    const ext = isContent ? ".md" : ".json";
-    const description = isContent ? "Markdown Content" : "Jx Component";
+    await loadFormats();
+    const format = tabFormat(tab);
+    const output = await serializeDocument(tab);
+    const mimeType = format ? (format.mediaType ?? "text/plain") : "application/json";
+    const ext = format ? format.extensions[0] : ".json";
+    const description = format ? format.name : "Jx Component";
+    const fallbackName = format ? `content${ext}` : "component.json";
 
     if ("showSaveFilePicker" in window) {
-      const suggestedName = tab.documentPath
-        ? tab.documentPath.split("/").pop()
-        : isContent
-          ? "content.md"
-          : "component.json";
+      const suggestedName = tab.documentPath ? tab.documentPath.split("/").pop() : fallbackName;
       const handle = await (
         window as unknown as { showSaveFilePicker: Function }
       ).showSaveFilePicker({
@@ -183,7 +198,7 @@ export async function exportFile() {
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = isContent ? "content.md" : "component.json";
+      a.download = fallbackName;
       a.click();
       URL.revokeObjectURL(url);
       tab.doc.dirty = false;
@@ -195,28 +210,32 @@ export async function exportFile() {
 }
 
 /**
- * Serialize the current document to its output format (JSON or Markdown).
+ * Serialize the current document to its output format. Format tabs round-trip through the format
+ * class's serialize capability; everything else is native JSON.
  *
  * @param {import("../tabs/tab.js").Tab} tab
- * @returns {string}
+ * @returns {Promise<string>}
  */
-export function serializeDocument(tab: import("../tabs/tab.js").Tab) {
-  if (tab.doc.sourceFormat === "md") {
+export async function serializeDocument(tab: import("../tabs/tab.js").Tab): Promise<string> {
+  await loadFormats();
+  const sourceFormat = formatByName(tab.doc.sourceFormat);
+  if (sourceFormat?.capabilities.serialize) {
     const fm = tab.doc.content?.frontmatter || {};
     const doc = tab.doc.document;
     const fullDoc = { ...fm, ...doc, children: doc.children ?? [] };
-    return jxDocToMd(/** @type {JxMutableNode} */ (fullDoc));
+    return formatSerialize(sourceFormat.name, fullDoc, { mode: "roundtrip" });
   }
   if (tab.doc.mode === "content") {
-    const mdast = jxToMd(tab.doc.document as JxElement);
-    const md = unified()
-      .use(remarkGfm)
-      .use(remarkDirective)
-      .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-      .stringify(mdast as unknown as import("mdast").Root);
-    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;
+    const format = defaultContentFormat();
+    if (format) {
+      const fm = tab.doc.content?.frontmatter ?? {};
+      const hasFrontmatter = Object.keys(fm).length > 0;
+      const fullDoc = { ...fm, ...tab.doc.document };
+      return formatSerialize(format.name, fullDoc, {
+        mode: "roundtrip",
+        frontmatter: hasFrontmatter,
+      });
+    }
   }
   return JSON.stringify(tab.doc.document, null, 2);
 }

package/src/files/files.ts

@@ -10,12 +10,7 @@
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ref } from "lit-html/directives/ref.js";
-import { unified } from "unified";
-import remarkStringify from "remark-stringify";
 import { renderPopover, showDialog, showConfirmDialog } from "../ui/layers";
-import remarkDirective from "remark-directive";
-import { stringify as stringifyYaml } from "yaml";
-import { jxToMd } from "../markdown/md-convert";
 import { createState, projectState, setProjectState, requireProjectState } from "../store";
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
@@ -34,12 +29,16 @@ import {
   replaceAllTabs,
   activeTab,
 } from "../workspace/workspace";
-import { loadMarkdown } from "./file-ops";
+import { parseSourceForPath, serializeDocument } from "./file-ops";
+import {
+  loadFormats,
+  refreshFormats,
+  formatForPath,
+  documentExtensions,
+} from "../format/format-host";
 import { view } from "../view";
 import { addRecentProject, trackRecentFile } from "../recent-projects";
 
-import type { JxElement } from "@jxsuite/schema/types";
-
 // ─── File icon map ────────────────────────────────────────────────────────────
 
 const fileIconMap = {
@@ -72,6 +71,9 @@ export async function loadProject() {
     if (!result) return;
     const { meta, info } = result;
 
+    refreshFormats();
+    void loadFormats();
+
     setProjectState({
       root: meta.root,
       name: info.isSiteProject ? info.projectConfig?.name || meta.name : meta.name,
@@ -120,10 +122,16 @@ export async function openProject({
 
     const { config, handle } = result;
 
-    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+    replaceAllTabs({
+      id: "initial",
+      document: { tagName: "div", children: [] },
+    });
+
+    refreshFormats();
+    void loadFormats();
 
     setProjectState({
-      .../** @type {ProjectState} */ (projectState),
+      .../** @type {ProjectState} */ projectState,
       projectRoot: handle.root,
       isSiteProject: true,
       projectConfig: config,
@@ -172,7 +180,11 @@ export async function openProject({
 
 export async function openHomePage() {
   const platform = getPlatform();
-  const candidates = ["pages/index.md", "pages/index.json"];
+  await loadFormats();
+  const candidates = [
+    ...documentExtensions("page").map((ext) => `pages/index${ext}`),
+    "pages/index.json",
+  ];
   for (const path of candidates) {
     try {
       await platform.readFile(path);
@@ -623,7 +635,10 @@ function showFileContextMenu(
     });
   }
   items.push({ label: "\u2014" });
-  items.push({ label: "Rename\u2026", action: () => renameFile(entry, ctx.renderLeftPanel) });
+  items.push({
+    label: "Rename\u2026",
+    action: () => renameFile(entry, ctx.renderLeftPanel),
+  });
   items.push({
     label: "Delete",
     action: () => deleteFile(entry, ctx.renderLeftPanel),
@@ -680,9 +695,13 @@ async function createNewFile(dirPath = ".", renderLeftPanel: () => void) {
   const name = prompt("File name:", "untitled.json");
   if (!name) return;
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
-  const content = name.endsWith(".md")
-    ? "---\ntitle: Untitled\n---\n\n"
-    : JSON.stringify({ tagName: "div", children: [{ tagName: "p", children: [] }] }, null, 2);
+  await loadFormats();
+  const format = formatForPath(name);
+  const content =
+    format?.studio?.newFileTemplate ??
+    (format
+      ? ""
+      : JSON.stringify({ tagName: "div", children: [{ tagName: "p", children: [] }] }, null, 2));
   try {
     const platform = getPlatform();
     await platform.writeFile(path, content);
@@ -816,23 +835,19 @@ export async function openFileFromTree(
   path: string,
 ) {
   const platform = getPlatform();
+  await loadFormats();
   // Auto-save current dirty document
   if (ctx.S.dirty && ctx.S.documentPath) {
     try {
-      const isContent = ctx.S.mode === "content";
-      let output;
-      if (isContent) {
-        const mdast = jxToMd(ctx.S.document as JxElement);
-        const md = unified()
-          .use(remarkDirective)
-          .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-          .stringify(mdast as unknown as import("mdast").Root);
-        const fm = ctx.S.content?.frontmatter;
-        const hasFrontmatter = fm && Object.keys(fm).length > 0;
-        output = hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
-      } else {
-        output = JSON.stringify(ctx.S.document, null, 2);
-      }
+      const tabLike = {
+        doc: {
+          sourceFormat: formatForPath(ctx.S.documentPath)?.name ?? null,
+          mode: ctx.S.mode,
+          content: ctx.S.content,
+          document: ctx.S.document,
+        },
+      } as unknown as import("../tabs/tab.js").Tab;
+      const output = await serializeDocument(tabLike);
       await platform.writeFile(ctx.S.documentPath, output);
     } catch (e) {
       statusMessage(`Save error: ${(e as Error).message}`);
@@ -844,7 +859,7 @@ export async function openFileFromTree(
     const content = await platform.readFile(path);
     if (!content) return;
 
-    if (path.endsWith(".md")) {
+    if (formatForPath(path)) {
       await ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
       ctx.S.dirty = false;
@@ -886,9 +901,11 @@ export async function openFileInTab(path: string) {
     const content = await platform.readFile(path);
     if (!content) return;
 
+    await loadFormats();
     let document, frontmatter;
-    if (path.endsWith(".md")) {
-      const result = await loadMarkdown(content);
+    const format = formatForPath(path);
+    if (format) {
+      const result = await parseSourceForPath(path, content);
       document = result.document;
       frontmatter = result.frontmatter;
     } else {
@@ -901,7 +918,7 @@ export async function openFileInTab(path: string) {
       documentPath: path,
       document,
       ...(frontmatter != null && { frontmatter }),
-      sourceFormat: path.endsWith(".md") ? "md" : null,
+      sourceFormat: format?.name ?? null,
     });
     requireProjectState().selectedPath = path;
     trackRecentFile({ path, name: path.split("/").pop() || path });
@@ -930,8 +947,9 @@ export async function reloadFileInTab(path: string) {
       try {
         const content = await platform.readFile(path);
         if (!content) return;
-        if (path.endsWith(".md")) {
-          const { document, frontmatter } = await loadMarkdown(content);
+        await loadFormats();
+        if (formatForPath(path)) {
+          const { document, frontmatter } = await parseSourceForPath(path, content);
           tab.doc.document = document;
           tab.doc.content.frontmatter = frontmatter;
         } else {

package/src/format/constraints.ts

@@ -0,0 +1,55 @@
+/**
+ * Constraints — generic interpreter for a format class's `$studio.elements` metadata.
+ *
+ * Element allowlists and nesting rules are declared by the format (.class.json), not the studio;
+ * this module turns that declaration into the validation helpers the editing surfaces use. Replaces
+ * the hard-coded markdown allowlist.
+ */
+
+import type { StudioFormatHints } from "./format-host";
+
+type ElementsHints = NonNullable<StudioFormatHints["elements"]>;
+
+export interface NestingValidator {
+  blockTags: ReadonlySet<string>;
+  inlineTags: ReadonlySet<string>;
+  allTags: ReadonlySet<string>;
+  isVoid(tag: string): boolean;
+  isTextOnly(tag: string): boolean;
+  /** Whether childTag may appear inside parentTag ("_root" for the document root). */
+  isValidChild(parentTag: string, childTag: string): boolean;
+}
+
+/** Build a nesting validator from a format's `$studio.elements` declaration. */
+export function createNestingValidator(elements: ElementsHints | undefined): NestingValidator {
+  const blockTags = new Set(elements?.block ?? []);
+  const inlineTags = new Set(elements?.inline ?? []);
+  const allTags = new Set([...blockTags, ...inlineTags]);
+  const voidTags = new Set(elements?.void ?? []);
+  const textOnly = new Set(elements?.textOnly ?? []);
+  const nesting = elements?.nesting ?? {};
+
+  return {
+    blockTags,
+    inlineTags,
+    allTags,
+    isVoid: (tag) => voidTags.has(tag),
+    isTextOnly: (tag) => textOnly.has(tag),
+    isValidChild(parentTag, childTag) {
+      const rule = nesting[parentTag];
+      if (!rule) return true; // unknown parents (directive components) allow anything
+
+      if (rule.only) return rule.only.includes(childTag);
+
+      const isBlock = blockTags.has(childTag);
+      const isInline = inlineTags.has(childTag);
+      const isDirective = !allTags.has(childTag);
+
+      if (isBlock && rule.block) return true;
+      if (isInline && rule.inline) return true;
+      if (isDirective && rule.directive) return true;
+
+      return false;
+    },
+  };
+}