@jxsuite/studio 0.0.1 → 0.5.0

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

@@ -0,0 +1,208 @@
+// ─── Convert to Component ─────────────────────────────────────────────────────
+import { html, render as litRender } from "lit-html";
+import { update, getNodeAtPath, applyMutation, parentElementPath, childIndex } from "../store.js";
+import {
+  computeRelativePath,
+  loadComponentRegistry,
+  componentRegistry,
+} from "../files/components.js";
+import { getPlatform } from "../platform.js";
+import { statusMessage } from "../panels/statusbar.js";
+
+const VALID_NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+
+/**
+ * Convert the currently selected element into a reusable component.
+ *
+ * @param {any} S - Current studio state
+ */
+export async function convertToComponent(S) {
+  if (!S.selection || S.selection.length < 2) return;
+
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node || !node.tagName) return;
+
+  const defaultName = deriveDefaultName(node);
+  const name = await promptComponentName(defaultName);
+  if (!name) return;
+
+  // Extract component definition
+  const componentDef = extractComponentDef(node);
+  componentDef.tagName = name;
+
+  // Compute paths
+  const componentFile = "components/" + name + ".json";
+  const refPath = computeRelativePath(S.documentPath, componentFile);
+
+  // Single atomic mutation: replace node + add $elements ref
+  const selectionPath = S.selection;
+  const newState = applyMutation(S, (doc) => {
+    // Navigate to parent's children array and replace the node
+    const pp = parentElementPath(selectionPath) ?? [];
+    const idx = childIndex(selectionPath);
+    let parent = doc;
+    for (const seg of pp) parent = parent[seg];
+    parent.children[idx] = { tagName: name };
+
+    // Ensure $elements exists and add the $ref
+    if (!doc.$elements) doc.$elements = [];
+    const alreadyReferenced = doc.$elements.some(
+      (/** @type {any} */ el) => el && el.$ref === refPath,
+    );
+    if (!alreadyReferenced) {
+      doc.$elements.push({ $ref: refPath });
+    }
+  });
+
+  update(newState);
+
+  // Write component file and refresh registry
+  try {
+    const platform = getPlatform();
+    await platform.writeFile(componentFile, JSON.stringify(componentDef, null, 2));
+    await loadComponentRegistry();
+    statusMessage(`Converted to <${name}>`);
+  } catch (/** @type {any} */ err) {
+    statusMessage(`Error saving component: ${err.message}`);
+  }
+}
+
+/**
+ * Derive a default tag name from a node.
+ *
+ * @param {any} node
+ * @returns {string}
+ */
+function deriveDefaultName(node) {
+  if (node.$id && node.$id.includes("-")) return node.$id.toLowerCase();
+  const tag = (node.tagName ?? "div").toLowerCase();
+  return tag.includes("-") ? tag : "jx-" + tag;
+}
+
+/**
+ * Deep clone a node and strip page-specific keys.
+ *
+ * @param {any} node
+ * @returns {any}
+ */
+function extractComponentDef(node) {
+  const clone = structuredClone(node);
+  delete clone.$id;
+  delete clone.$layout;
+  delete clone.$paths;
+  return clone;
+}
+
+/**
+ * Validate a component name against naming rules and existing registry.
+ *
+ * @param {string} val
+ * @returns {{ valid: boolean; error: string }}
+ */
+function validateName(val) {
+  val = val.trim().toLowerCase();
+  if (!val.includes("-")) {
+    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" };
+  }
+  const exists = componentRegistry.some((/** @type {any} */ c) => c.tagName === val);
+  if (exists) {
+    return { valid: false, error: `Component <${val}> already exists` };
+  }
+  return { valid: true, error: "" };
+}
+
+/**
+ * Show a naming dialog using Lit-rendered sp-dialog-wrapper.
+ *
+ * @param {string} defaultName
+ * @returns {Promise<string | null>}
+ */
+function promptComponentName(defaultName) {
+  return new Promise((resolve) => {
+    let value = defaultName;
+    let error = "";
+    let resolved = false;
+
+    const host = document.createElement("div");
+    const themeRoot = document.querySelector("sp-theme") || document.body;
+    themeRoot.appendChild(host);
+
+    function cleanup() {
+      if (resolved) return;
+      resolved = true;
+      host.remove();
+    }
+
+    function confirm() {
+      const result = validateName(value);
+      if (!result.valid) {
+        error = result.error;
+        renderDialog();
+        return;
+      }
+      cleanup();
+      resolve(value.trim().toLowerCase());
+    }
+
+    function cancel() {
+      cleanup();
+      resolve(null);
+    }
+
+    function onInput(/** @type {Event} */ e) {
+      value = /** @type {any} */ (e.target).value || "";
+      const result = validateName(value);
+      error = result.valid ? "" : result.error;
+      renderDialog();
+    }
+
+    function onKeydown(/** @type {KeyboardEvent} */ e) {
+      if (e.key === "Enter") confirm();
+    }
+
+    function renderDialog() {
+      litRender(
+        html`
+          <sp-dialog-wrapper
+            open
+            underlay
+            headline="Convert to Component"
+            confirm-label="Convert"
+            cancel-label="Cancel"
+            size="s"
+            @confirm=${confirm}
+            @cancel=${cancel}
+            @close=${cancel}
+          >
+            <p>Enter a hyphenated tag name for the new component.</p>
+            <sp-textfield
+              placeholder="my-component"
+              value=${value}
+              ?negative=${!!error}
+              @input=${onInput}
+              @keydown=${onKeydown}
+            >
+              <sp-help-text slot="negative-help-text">${error}</sp-help-text>
+            </sp-textfield>
+          </sp-dialog-wrapper>
+        `,
+        host,
+      );
+    }
+
+    renderDialog();
+
+    // Focus the textfield after Spectrum renders
+    requestAnimationFrame(() => {
+      const tf = /** @type {any} */ (host.querySelector("sp-textfield"));
+      if (tf) {
+        tf.focus();
+        const input = tf.shadowRoot?.querySelector("input");
+        if (input) input.select();
+      }
+    });
+  });
+}

package/src/editor/inline-edit.js

@@ -94,8 +94,8 @@ let activePath = null; // JSON path to the active element
 let commitFn = null; // function(path, newChildren, newTextContent) to commit changes
 /** @type {((path: any[], beforeChildren: any, afterChildren: any) => void) | null} */
 let splitFn = null; // function(path, beforeChildren, afterChildren) to split paragraph
-/** @type {((path: any[], elementDef: any) => void) | null} */
-let insertFn = null; // function(path, elementDef) to insert after current block
+/** @type {((path: any[], elementDef: any, commitData?: any) => 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
 
@@ -337,14 +337,26 @@ function handleEnterKey() {
 
   // Stop editing before mutating state (which will re-render)
   const path = [...activePath];
+  const split = splitFn;
+
   activeEl.contentEditable = "false";
   activeEl.removeEventListener("keydown", handleKeydown);
   activeEl.removeEventListener("input", handleInput);
   activeEl.removeEventListener("blur", handleBlur);
   activeEl.removeEventListener("paste", handlePaste);
   activeEl = null;
+  activePath = null;
+  commitFn = null;
+  splitFn = null;
+  insertFn = null;
+
+  if (endFn) {
+    const fn = endFn;
+    endFn = null;
+    fn();
+  }
 
-  splitFn(path, beforeChildren, afterChildren);
+  split(path, beforeChildren, afterChildren);
 }
 
 // ─── Content sync: DOM → Jx ────────────────────────────────────────────
@@ -582,16 +594,31 @@ function handleSlashSelect(cmd) {
     }
   }
 
-  commitChanges();
+  // Compute commit data inline instead of calling commitChanges() — avoids a separate
+  // update() call that would race with the insertFn update() (two concurrent async renders).
+  normalizeInlineContent(activeEl);
+  const commitResult = elementToJx(activeEl);
 
   const path = [...activePath];
+  const insert = insertFn;
+
   activeEl.contentEditable = "false";
   activeEl.removeEventListener("keydown", handleKeydown);
   activeEl.removeEventListener("input", handleInput);
   activeEl.removeEventListener("blur", handleBlur);
   activeEl.removeEventListener("paste", handlePaste);
   activeEl = null;
+  activePath = null;
+  commitFn = null;
+  splitFn = null;
+  insertFn = null;
+
+  if (endFn) {
+    const fn = endFn;
+    endFn = null;
+    fn();
+  }
 
-  // Delegate to studio.js callback which builds the element def and inserts it
-  insertFn(path, cmd);
+  // Pass commit data so onInsert can batch commit + insert into a single update()
+  insert(path, cmd, commitResult);
 }

package/src/editor/shortcuts.js

@@ -115,7 +115,12 @@ export function initShortcuts(getContext) {
     const mod = e.ctrlKey || e.metaKey;
 
     // Don't intercept when typing in inputs or contenteditable
-    if (e.target instanceof HTMLElement && e.target.matches("input, textarea, select")) {
+    if (
+      e.target instanceof HTMLElement &&
+      e.target.matches(
+        "input, textarea, select, sp-textfield, sp-search, sp-number-field, sp-picker",
+      )
+    ) {
       if (mod && e.key === "s") {
         e.preventDefault();
         saveFile();

package/src/files/components.js

@@ -23,9 +23,11 @@ export async function loadComponentRegistry() {
  */
 export function computeRelativePath(fromDocPath, toCompPath) {
   if (!fromDocPath) return `./${toCompPath}`;
-  const fromDir = fromDocPath.substring(0, fromDocPath.lastIndexOf("/"));
+  const from = fromDocPath.replaceAll("\\", "/");
+  const to = toCompPath.replaceAll("\\", "/");
+  const fromDir = from.substring(0, from.lastIndexOf("/"));
   const fromParts = fromDir.split("/").filter(Boolean);
-  const toParts = toCompPath.split("/").filter(Boolean);
+  const toParts = to.split("/").filter(Boolean);
   let common = 0;
   while (
     common < fromParts.length &&

package/src/files/file-ops.js

@@ -6,16 +6,14 @@
  */
 
 import { unified } from "unified";
-import remarkParse from "remark-parse";
 import remarkStringify from "remark-stringify";
-import remarkFrontmatter from "remark-frontmatter";
-import remarkGfm from "remark-gfm";
 import remarkDirective from "remark-directive";
-import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
-import { mdToJx, jxToMd } from "../markdown/md-convert.js";
+import { stringify as stringifyYaml } from "yaml";
+import { jxToMd, jxDocToMd } from "../markdown/md-convert.js";
 import { createState } from "../store.js";
 import { locateDocument } from "../services/code-services.js";
 import { statusMessage } from "../panels/statusbar.js";
+import { getPlatform } from "../platform.js";
 
 /**
  * Open a file via the File System Access API (or fallback input).
@@ -35,7 +33,7 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
       const text = await file.text();
 
       if (handle.name.endsWith(".md")) {
-        const newState = loadMarkdown(text, handle);
+        const newState = await loadMarkdown(text, handle);
         commit(newState);
       } else {
         const doc = JSON.parse(text);
@@ -59,7 +57,7 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
         const text = await file.text();
 
         if (file.name.endsWith(".md")) {
-          const newState = loadMarkdown(text, null);
+          const newState = await loadMarkdown(text, null);
           commit(newState);
         } else {
           const doc = JSON.parse(text);
@@ -80,33 +78,46 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
 /**
  * Parse a markdown string into a Jx state object (pure — no side effects).
  *
+ * All markdown goes through `transpileJxMarkdown()`. Content documents (no hyphenated `tagName`)
+ * are wrapped in a `{ tagName: "div", $id: "content" }` root to match the studio's content
+ * contract.
+ *
  * @param {any} source Markdown text
  * @param {any} fileHandle File handle (or null)
- * @returns {any} A new state object ready for commit()
+ * @returns {Promise<any>} A new state object ready for commit()
  */
-export function loadMarkdown(source, fileHandle) {
-  const processor = unified()
-    .use(remarkParse)
-    .use(remarkFrontmatter, ["yaml"])
-    .use(remarkGfm)
-    .use(remarkDirective);
-
-  const mdast = processor.parse(source);
-
-  // Extract frontmatter from the first YAML node
-  let frontmatter = {};
-  const yamlNode = mdast.children.find((n) => n.type === "yaml");
-  if (yamlNode) {
-    try {
-      frontmatter = parseYaml(yamlNode.value) ?? {};
-    } catch {}
+export async function loadMarkdown(source, fileHandle) {
+  const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
+  const doc = /** @type {any} */ (transpileJxMarkdown(source));
+
+  const isComponent = doc.tagName && String(doc.tagName).includes("-");
+
+  if (isComponent) {
+    const newState = /** @type {any} */ (createState(doc));
+    newState.sourceFormat = "md";
+    newState.rawMarkdown = source;
+    newState.fileHandle = fileHandle;
+    newState.dirty = false;
+    return newState;
   }
 
-  const jxTree = mdToJx(mdast);
+  // Content markdown — children form the root-level document body
+  const contentDoc = {
+    children: doc.children ?? [],
+  };
+
+  // Extract frontmatter keys (everything except children) as content metadata
+  /** @type {Record<string, any>} */
+  const frontmatter = {};
+  for (const [key, value] of Object.entries(doc)) {
+    if (key !== "children") frontmatter[key] = value;
+  }
 
-  const newState = createState(jxTree);
+  const newState = /** @type {any} */ (createState(contentDoc));
+  newState.sourceFormat = "md";
   newState.mode = "content";
   newState.content = { frontmatter };
+  newState.rawMarkdown = source;
   newState.fileHandle = fileHandle;
   newState.dirty = false;
   return newState;
@@ -130,52 +141,66 @@ async function loadCompanionJS(handle, state) {
 }
 
 /**
- * Save the current document to disk (or download as fallback).
+ * Save the current document back to its source location.
  *
  * @param {{ S: any; commit: (s: any) => void; renderToolbar: () => void }} ctx
  */
 export async function saveFile({ S, commit, renderToolbar }) {
   try {
-    const isContent = S.mode === "content";
-    let output, mimeType, ext, description;
-
-    if (isContent) {
-      const mdast = jxToMd(S.document);
-      const md = unified()
-        .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-        .stringify(mdast);
-
-      const fm = S.content?.frontmatter;
-      const hasFrontmatter = fm && Object.keys(fm).length > 0;
-      output = hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
-      mimeType = "text/markdown";
-      ext = ".md";
-      description = "Markdown Content";
-    } else {
-      output = JSON.stringify(S.document, null, 2);
-      mimeType = "application/json";
-      ext = ".json";
-      description = "Jx Component";
-    }
+    const output = serializeDocument(S);
 
-    if (S.fileHandle && "createWritable" in S.fileHandle) {
+    if (S.documentPath) {
+      // Project file — save via platform
+      const platform = getPlatform();
+      await platform.writeFile(S.documentPath, output);
+      commit({ ...S, dirty: false });
+      renderToolbar();
+      statusMessage("Saved");
+    } else if (S.fileHandle && "createWritable" in S.fileHandle) {
+      // Standalone file opened via FS Access API
       const writable = await S.fileHandle.createWritable();
       await writable.write(output);
       await writable.close();
       commit({ ...S, dirty: false });
       renderToolbar();
       statusMessage("Saved");
-    } else if ("showSaveFilePicker" in window) {
+    } else {
+      statusMessage("No save target — use Export");
+    }
+  } catch (/** @type {any} */ e) {
+    if (e.name !== "AbortError") statusMessage(`Save error: ${e.message}`);
+  }
+}
+
+/**
+ * Export the current document to a new location (Save As / download).
+ *
+ * @param {{ S: any; commit: (s: any) => void; renderToolbar: () => void }} ctx
+ */
+export async function exportFile({ S, commit, renderToolbar }) {
+  try {
+    const isContent = S.mode === "content";
+    const output = serializeDocument(S);
+    const mimeType = isContent ? "text/markdown" : "application/json";
+    const ext = isContent ? ".md" : ".json";
+    const description = isContent ? "Markdown Content" : "Jx Component";
+
+    if ("showSaveFilePicker" in window) {
+      const suggestedName = S.documentPath
+        ? S.documentPath.split("/").pop()
+        : isContent
+          ? "content.md"
+          : "component.json";
       const handle = await /** @type {any} */ (window).showSaveFilePicker({
-        suggestedName: isContent ? "content.md" : "component.json",
+        suggestedName,
         types: [{ description, accept: { [mimeType]: [ext] } }],
       });
       const writable = await handle.createWritable();
       await writable.write(output);
       await writable.close();
-      commit({ ...S, fileHandle: handle, dirty: false });
+      commit({ ...S, dirty: false });
       renderToolbar();
-      statusMessage(`Saved as ${handle.name}`);
+      statusMessage(`Exported as ${handle.name}`);
     } else {
       // Fallback: download
       const blob = new Blob([output], { type: mimeType });
@@ -190,6 +215,29 @@ export async function saveFile({ S, commit, renderToolbar }) {
       statusMessage("Downloaded");
     }
   } catch (/** @type {any} */ e) {
-    if (e.name !== "AbortError") statusMessage(`Save error: ${e.message}`);
+    if (e.name !== "AbortError") statusMessage(`Export error: ${e.message}`);
+  }
+}
+
+/**
+ * Serialize the current document to its output format (JSON or Markdown).
+ *
+ * @param {any} S
+ * @returns {string}
+ */
+function serializeDocument(S) {
+  if (S.sourceFormat === "md") {
+    return jxDocToMd(S.document);
+  }
+  if (S.mode === "content") {
+    const mdast = jxToMd(S.document);
+    const md = unified()
+      .use(remarkDirective)
+      .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
+      .stringify(mdast);
+    const fm = S.content?.frontmatter;
+    const hasFrontmatter = fm && Object.keys(fm).length > 0;
+    return hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
   }
+  return JSON.stringify(S.document, null, 2);
 }

package/src/files/files.js

@@ -8,6 +8,7 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { unified } from "unified";
 import remarkStringify from "remark-stringify";
+import remarkDirective from "remark-directive";
 import { stringify as stringifyYaml } from "yaml";
 import { jxToMd } from "../markdown/md-convert.js";
 import { createState, projectState, setProjectState } from "../store.js";
@@ -105,14 +106,26 @@ export async function openProject({ S, commit, renderActivityBar, renderLeftPane
     await loadDirectory(".");
     await loadComponentRegistry();
 
-    // Auto-expand key directories
+    // Auto-expand key directories and populate projectDirs for Browse view
+    const conventionalDirs = [
+      "pages",
+      "layouts",
+      "components",
+      "content",
+      "data",
+      "public",
+      "styles",
+    ];
     const entries = projectState.dirs.get(".") || [];
+    const foundDirs = [];
     for (const e of entries) {
-      if (e.type === "directory" && ["pages", "components", "layouts"].includes(e.name)) {
+      if (e.type === "directory" && conventionalDirs.includes(e.name)) {
+        foundDirs.push(e.name);
         projectState.expanded.add(e.path || e.name);
         await loadDirectory(e.path || e.name);
       }
     }
+    projectState.projectDirs = foundDirs;
 
     commit({ ...S, ui: { ...S.ui, leftTab: "files" } });
     renderActivityBar();
@@ -468,8 +481,9 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
 async function renameFile(/** @type {any} */ entry, /** @type {() => void} */ renderLeftPanel) {
   const newName = prompt("New name:", entry.name);
   if (!newName || newName === entry.name) return;
-  const parentDir = entry.path.includes("/")
-    ? entry.path.substring(0, entry.path.lastIndexOf("/"))
+  const entryPath = entry.path.replaceAll("\\", "/");
+  const parentDir = entryPath.includes("/")
+    ? entryPath.substring(0, entryPath.lastIndexOf("/"))
     : ".";
   const newPath = parentDir === "." ? newName : `${parentDir}/${newName}`;
   try {
@@ -491,9 +505,8 @@ async function deleteFile(/** @type {any} */ entry, /** @type {() => void} */ re
   try {
     const platform = getPlatform();
     await platform.deleteFile(entry.path);
-    const parentDir = entry.path.includes("/")
-      ? entry.path.substring(0, entry.path.lastIndexOf("/"))
-      : ".";
+    const delPath = entry.path.replaceAll("\\", "/");
+    const parentDir = delPath.includes("/") ? delPath.substring(0, delPath.lastIndexOf("/")) : ".";
     await loadDirectory(parentDir);
     if (projectState.selectedPath === entry.path) {
       projectState.selectedPath = null;
@@ -528,6 +541,7 @@ export async function openFileFromTree(ctx, path) {
       if (isContent) {
         const mdast = jxToMd(ctx.S.document);
         const md = unified()
+          .use(remarkDirective)
           .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
           .stringify(mdast);
         const fm = ctx.S.content?.frontmatter;
@@ -548,7 +562,7 @@ export async function openFileFromTree(ctx, path) {
     if (!content) return;
 
     if (path.endsWith(".md")) {
-      ctx.loadMarkdown(content, null);
+      await ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
     } else {
       const doc = JSON.parse(content);