@jxsuite/studio 0.27.0 → 0.28.0

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

@@ -145,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];
 }

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/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;

package/src/markdown/md-allowlist.ts

@@ -1,104 +0,0 @@
-/**
- * Md-allowlist.js — Markdown element allowlist and nesting constraints
- *
- * Defines which HTML elements are "native markdown" — they round-trip to pure markdown syntax.
- * Everything else is a Jx component directive.
- */
-
-/** Block-level elements that map directly to markdown syntax */
-export const MD_BLOCK = new Set([
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "p",
-  "blockquote",
-  "ul",
-  "ol",
-  "li",
-  "pre",
-  "hr",
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "th",
-  "td",
-]);
-
-/** Inline elements that map directly to markdown syntax */
-export const MD_INLINE = new Set(["em", "strong", "del", "code", "a", "img", "br"]);
-
-/** All markdown-native elements */
-export const MD_ALL = new Set([...MD_BLOCK, ...MD_INLINE]);
-
-/** Elements that cannot contain children */
-export const MD_VOID = new Set(["hr", "br", "img"]);
-
-/** Elements that contain only text, not child elements */
-export const MD_TEXT_ONLY = new Set(["code"]);
-
-/**
- * Nesting constraints: which child elements are allowed inside each parent. null = any block/inline
- * allowed (used for content root and directive components).
- *
- * @type {Record<
- *   string,
- *   { block: boolean; inline: boolean; directive: boolean; only: Set<string> | null }
- * >}
- */
-export const MD_NESTING: Record<
-  string,
-  { block: boolean; inline: boolean; directive: boolean; only: Set<string> | null }
-> = {
-  _root: { block: true, inline: false, directive: true, only: null },
-  h1: { block: false, inline: true, directive: false, only: null },
-  h2: { block: false, inline: true, directive: false, only: null },
-  h3: { block: false, inline: true, directive: false, only: null },
-  h4: { block: false, inline: true, directive: false, only: null },
-  h5: { block: false, inline: true, directive: false, only: null },
-  h6: { block: false, inline: true, directive: false, only: null },
-  p: { block: false, inline: true, directive: true, only: null },
-  blockquote: { block: true, inline: false, directive: true, only: null },
-  ul: { block: false, inline: false, directive: false, only: new Set(["li"]) },
-  ol: { block: false, inline: false, directive: false, only: new Set(["li"]) },
-  li: { block: true, inline: true, directive: true, only: null },
-  pre: { block: false, inline: false, directive: false, only: new Set(["code"]) },
-  table: { block: false, inline: false, directive: false, only: new Set(["thead", "tbody"]) },
-  thead: { block: false, inline: false, directive: false, only: new Set(["tr"]) },
-  tbody: { block: false, inline: false, directive: false, only: new Set(["tr"]) },
-  tr: { block: false, inline: false, directive: false, only: new Set(["th", "td"]) },
-  th: { block: false, inline: true, directive: false, only: null },
-  td: { block: false, inline: true, directive: false, only: null },
-  em: { block: false, inline: true, directive: false, only: null },
-  strong: { block: false, inline: true, directive: false, only: null },
-  del: { block: false, inline: true, directive: false, only: null },
-  a: { block: false, inline: true, directive: false, only: null },
-};
-
-/**
- * Check whether a tag is allowed as a child of the given parent tag in content mode.
- *
- * @param {string} parentTag - Parent element tag (or '_root' for content root)
- * @param {string} childTag - Proposed child element tag
- * @returns {boolean}
- */
-export function isValidChild(parentTag: string, childTag: string) {
-  const rule = MD_NESTING[parentTag];
-  if (!rule) return true; // directive components allow anything
-
-  // If there's a strict allowlist, check it
-  if (rule.only) return rule.only.has(childTag);
-
-  const isBlock = MD_BLOCK.has(childTag);
-  const isInline = MD_INLINE.has(childTag);
-  const isDirective = !MD_ALL.has(childTag);
-
-  if (isBlock && rule.block) return true;
-  if (isInline && rule.inline) return true;
-  if (isDirective && rule.directive) return true;
-
-  return false;
-}