@jxsuite/studio 0.0.1

package/src/files/files.js

@@ -0,0 +1,569 @@
+/**
+ * File tree management — project loading, file tree rendering, and file CRUD.
+ *
+ * Functions that mutate state accept a context object with callbacks, following the same pattern as
+ * file-ops.js.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { unified } from "unified";
+import remarkStringify from "remark-stringify";
+import { stringify as stringifyYaml } from "yaml";
+import { jxToMd } from "../markdown/md-convert.js";
+import { createState, projectState, setProjectState } from "../store.js";
+import { getPlatform } from "../platform.js";
+import { statusMessage } from "../panels/statusbar.js";
+import { loadComponentRegistry } from "./components.js";
+
+// ─── File icon map ────────────────────────────────────────────────────────────
+
+const fileIconMap = /** @type {Record<string, any>} */ ({
+  "sp-icon-folder-open": html`<sp-icon-folder-open></sp-icon-folder-open>`,
+  "sp-icon-folder": html`<sp-icon-folder></sp-icon-folder>`,
+  "sp-icon-file-code": html`<sp-icon-file-code></sp-icon-file-code>`,
+  "sp-icon-file-txt": html`<sp-icon-file-txt></sp-icon-file-txt>`,
+  "sp-icon-image": html`<sp-icon-image></sp-icon-image>`,
+  "sp-icon-document": html`<sp-icon-document></sp-icon-document>`,
+});
+
+// ─── File management ──────────────────────────────────────────────────────────
+
+async function loadDirectory(/** @type {any} */ dirPath) {
+  if (!projectState) return;
+  try {
+    const platform = getPlatform();
+    const entries = await platform.listDirectory(dirPath);
+    projectState.dirs.set(dirPath, entries);
+  } catch {
+    projectState.dirs.set(dirPath, []);
+  }
+}
+
+/** Probe the dev server for a root project and populate projectState. */
+export async function loadProject() {
+  try {
+    const platform = getPlatform();
+    const result = await platform.probeRootProject();
+    if (!result) return;
+    const { meta, info } = result;
+
+    setProjectState({
+      root: meta.root,
+      name: info.isSiteProject ? info.projectConfig?.name || meta.name : meta.name,
+      projectRoot: ".",
+      isSiteProject: info.isSiteProject,
+      projectConfig: info.isSiteProject ? info.projectConfig : null,
+      projectDirs: info.directories || [],
+      dirs: new Map(),
+      expanded: new Set(),
+      selectedPath: null,
+      searchQuery: "",
+    });
+
+    if (info.isSiteProject) {
+      await loadDirectory(".");
+      await loadComponentRegistry();
+    }
+    // If not a site project (monorepo) — show welcome prompt, don't load tree
+  } catch {
+    // Not on dev server — project features disabled
+  }
+}
+
+// ─── Open Project (PAL-based) ─────────────────────────────────────────────
+
+/**
+ * Open a project via the platform adapter.
+ *
+ * @param {{
+ *   S: any;
+ *   commit: (s: any) => void;
+ *   renderActivityBar: () => void;
+ *   renderLeftPanel: () => void;
+ * }} ctx
+ */
+export async function openProject({ S, commit, renderActivityBar, renderLeftPanel }) {
+  try {
+    const platform = getPlatform();
+    const result = await platform.openProject();
+    if (!result) return; // User cancelled
+
+    const { config, handle } = result;
+
+    setProjectState({
+      ...projectState,
+      projectRoot: handle.root,
+      isSiteProject: true,
+      projectConfig: config,
+      name: config.name || handle.name,
+      dirs: new Map(),
+      expanded: new Set(),
+      selectedPath: null,
+      searchQuery: "",
+    });
+
+    await loadDirectory(".");
+    await loadComponentRegistry();
+
+    // Auto-expand key directories
+    const entries = projectState.dirs.get(".") || [];
+    for (const e of entries) {
+      if (e.type === "directory" && ["pages", "components", "layouts"].includes(e.name)) {
+        projectState.expanded.add(e.path || e.name);
+        await loadDirectory(e.path || e.name);
+      }
+    }
+
+    commit({ ...S, ui: { ...S.ui, leftTab: "files" } });
+    renderActivityBar();
+    renderLeftPanel();
+    statusMessage(`Opened project: ${projectState.name}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
+
+// ─── File tree templates ──────────────────────────────────────────────────────
+
+function fileTypeIconTpl(/** @type {any} */ name, /** @type {any} */ type) {
+  let tag;
+  if (type === "directory") {
+    tag = projectState?.expanded?.has(name) ? "sp-icon-folder-open" : "sp-icon-folder";
+  } else {
+    const ext = name.split(".").pop()?.toLowerCase();
+    switch (ext) {
+      case "json":
+        tag = "sp-icon-file-code";
+        break;
+      case "md":
+        tag = "sp-icon-file-txt";
+        break;
+      case "js":
+      case "ts":
+        tag = "sp-icon-file-code";
+        break;
+      case "css":
+        tag = "sp-icon-file-code";
+        break;
+      case "png":
+      case "jpg":
+      case "jpeg":
+      case "svg":
+      case "webp":
+      case "gif":
+        tag = "sp-icon-image";
+        break;
+      default:
+        tag = "sp-icon-document";
+        break;
+    }
+  }
+  return fileIconMap[tag] || fileIconMap["sp-icon-document"];
+}
+
+/**
+ * Render the file tree template for the left panel.
+ *
+ * @param {{
+ *   openProject: () => void;
+ *   openFileFromTree: (path: string) => void;
+ *   renderLeftPanel: () => void;
+ * }} ctx
+ */
+export function renderFilesTemplate({
+  openProject: openProjectFn,
+  openFileFromTree: openFileFn,
+  renderLeftPanel,
+}) {
+  if (!projectState) {
+    return html`<div class="file-tree-empty">No project loaded</div>`;
+  }
+
+  // No project selected in a monorepo — show welcome prompt
+  if (!projectState.isSiteProject && projectState.projectRoot === ".") {
+    return html`<div class="file-tree-empty">
+      <p style="margin:0 0 12px">Open a project folder to get started.</p>
+      <sp-button variant="accent" size="s" @click=${openProjectFn}>Open Project</sp-button>
+    </div>`;
+  }
+
+  return html`
+    ${projectState.isSiteProject
+      ? html`
+          <div class="project-header">
+            <span class="project-name"
+              >${projectState.projectConfig?.name || projectState.name}</span
+            >
+          </div>
+        `
+      : nothing}
+    <div class="files-toolbar">
+      <sp-action-group size="xs" compact quiet>
+        <sp-action-button
+          size="xs"
+          label="New File"
+          @click=${() => createNewFile(".", renderLeftPanel)}
+        >
+          <sp-icon-add slot="icon"></sp-icon-add>
+        </sp-action-button>
+        <sp-action-button
+          size="xs"
+          label="Refresh"
+          @click=${async () => {
+            projectState.dirs.clear();
+            await loadDirectory(".");
+            for (const dir of projectState.expanded) await loadDirectory(dir);
+            renderLeftPanel();
+          }}
+        >
+          <sp-icon-refresh slot="icon"></sp-icon-refresh>
+        </sp-action-button>
+      </sp-action-group>
+      <sp-search
+        size="s"
+        quiet
+        placeholder="Filter files…"
+        value=${projectState.searchQuery}
+        @input=${(/** @type {any} */ e) => {
+          projectState.searchQuery = e.target.value;
+          renderLeftPanel();
+        }}
+        @submit=${(/** @type {any} */ e) => e.preventDefault()}
+      ></sp-search>
+    </div>
+    <div class="file-tree" role="tree" aria-label="Project files">
+      ${renderTreeLevelTemplate(".", 0, { openFileFn, renderLeftPanel })}
+    </div>
+  `;
+}
+
+/** @returns {any} */
+function renderTreeLevelTemplate(
+  /** @type {any} */ dirPath,
+  /** @type {any} */ depth,
+  /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
+) {
+  const entries = projectState.dirs.get(dirPath);
+  if (!entries) {
+    loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
+    return html`<div
+      class="file-tree-item"
+      style="padding-left:${8 + depth * 16}px;color:var(--fg-dim);font-style:italic"
+    >
+      Loading…
+    </div>`;
+  }
+
+  const sorted = [...entries].sort((a, b) => {
+    if (a.type === "directory" && b.type !== "directory") return -1;
+    if (a.type !== "directory" && b.type === "directory") return 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  const query = projectState.searchQuery.toLowerCase();
+  const filtered = query
+    ? sorted.filter((e) => e.type === "directory" || e.name.toLowerCase().includes(query))
+    : sorted;
+
+  return filtered.map((entry) => {
+    const isDir = entry.type === "directory";
+    const isExpanded = projectState.expanded.has(entry.path);
+    const isSelected = projectState.selectedPath === entry.path;
+
+    return html`
+      <div
+        class="file-tree-item${isSelected ? " selected" : ""}"
+        style="padding-left:${8 + depth * 16}px"
+        role="treeitem"
+        aria-level=${depth + 1}
+        tabindex="-1"
+        data-path=${entry.path}
+        data-type=${entry.type}
+        aria-expanded=${isDir ? String(isExpanded) : nothing}
+        @click=${async (/** @type {any} */ e) => {
+          e.stopPropagation();
+          if (isDir) {
+            if (isExpanded) projectState.expanded.delete(entry.path);
+            else {
+              projectState.expanded.add(entry.path);
+              if (!projectState.dirs.has(entry.path)) await loadDirectory(entry.path);
+            }
+            ctx.renderLeftPanel();
+          } else {
+            ctx.openFileFn(entry.path);
+          }
+        }}
+        @contextmenu=${(/** @type {any} */ e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          showFileContextMenu(e, entry, ctx);
+        }}
+      >
+        ${isDir
+          ? html`<span class="file-tree-toggle">${isExpanded ? "\u25bc" : "\u25b6"}</span>`
+          : html`<span class="file-tree-toggle empty"> </span>`}
+        <span class="file-tree-icon">${fileTypeIconTpl(entry.path, entry.type)}</span>
+        <span class="file-tree-name">${entry.name}</span>
+      </div>
+      ${isDir && isExpanded
+        ? html`<div role="group">${renderTreeLevelTemplate(entry.path, depth + 1, ctx)}</div>`
+        : nothing}
+    `;
+  });
+}
+
+export function setupTreeKeyboard(/** @type {any} */ tree) {
+  tree.addEventListener("keydown", (/** @type {any} */ e) => {
+    const items = [...tree.querySelectorAll(".file-tree-item")];
+    const focused = tree.querySelector(".file-tree-item:focus");
+    if (!focused || items.length === 0) return;
+
+    const idx = items.indexOf(focused);
+    let handled = true;
+
+    switch (e.key) {
+      case "ArrowDown":
+        if (idx < items.length - 1) items[idx + 1].focus();
+        break;
+      case "ArrowUp":
+        if (idx > 0) items[idx - 1].focus();
+        break;
+      case "ArrowRight":
+        if (focused.dataset.type === "directory") {
+          const path = focused.dataset.path;
+          if (!projectState.expanded.has(path)) {
+            projectState.expanded.add(path);
+            loadDirectory(path).then(() => {
+              const panel = tree.closest(".panel-body");
+              if (panel) panel.querySelector(".file-tree-item:focus")?.click();
+            });
+          }
+        }
+        break;
+      case "ArrowLeft":
+        if (focused.dataset.type === "directory") {
+          const path = focused.dataset.path;
+          if (projectState.expanded.has(path)) {
+            projectState.expanded.delete(path);
+            // renderLeftPanel will be called by the caller who sets up keyboard
+          }
+        }
+        break;
+      case "Enter":
+        focused.click();
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) e.preventDefault();
+  });
+
+  // Set first item focusable
+  const first = tree.querySelector(".file-tree-item");
+  if (first) first.setAttribute("tabindex", "0");
+}
+
+// ─── Context menu ─────────────────────────────────────────────────────────────
+
+/** @type {any} */
+let fileContextPopover = null;
+
+function showFileContextMenu(
+  /** @type {any} */ e,
+  /** @type {any} */ entry,
+  /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
+) {
+  if (fileContextPopover) {
+    fileContextPopover.remove();
+    fileContextPopover = null;
+  }
+
+  const isDir = entry.type === "directory";
+  fileContextPopover = document.createElement("div");
+
+  const tpl = html`
+    <sp-popover
+      placement="right-start"
+      open
+      style="position:fixed;left:${e.clientX}px;top:${e.clientY}px;z-index:9999"
+    >
+      <sp-menu style="min-width:160px">
+        ${!isDir
+          ? html`<sp-menu-item
+              @click=${() => {
+                closeFileContextMenu();
+                ctx.openFileFn(entry.path);
+              }}
+              >Open</sp-menu-item
+            >`
+          : nothing}
+        ${isDir
+          ? html`<sp-menu-item
+              @click=${() => {
+                closeFileContextMenu();
+                createNewFile(entry.path, ctx.renderLeftPanel);
+              }}
+              >New File…</sp-menu-item
+            >`
+          : nothing}
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item
+          @click=${() => {
+            closeFileContextMenu();
+            renameFile(entry, ctx.renderLeftPanel);
+          }}
+          >Rename…</sp-menu-item
+        >
+        <sp-menu-item
+          style="color:var(--danger)"
+          @click=${() => {
+            closeFileContextMenu();
+            deleteFile(entry, ctx.renderLeftPanel);
+          }}
+          >Delete</sp-menu-item
+        >
+      </sp-menu>
+    </sp-popover>
+  `;
+
+  litRender(tpl, fileContextPopover);
+  document.body.appendChild(fileContextPopover);
+
+  const closeHandler = (/** @type {any} */ ev) => {
+    if (!fileContextPopover?.contains(ev.target)) {
+      closeFileContextMenu();
+      document.removeEventListener("mousedown", closeHandler, true);
+    }
+  };
+  setTimeout(() => document.addEventListener("mousedown", closeHandler, true), 0);
+}
+
+function closeFileContextMenu() {
+  if (fileContextPopover) {
+    fileContextPopover.remove();
+    fileContextPopover = null;
+  }
+}
+
+// ─── File CRUD ────────────────────────────────────────────────────────────────
+
+async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeftPanel) {
+  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: [] }, null, 2);
+  try {
+    const platform = getPlatform();
+    await platform.writeFile(path, content);
+    await loadDirectory(dirPath);
+    renderLeftPanel();
+    statusMessage(`Created ${path}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
+
+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 newPath = parentDir === "." ? newName : `${parentDir}/${newName}`;
+  try {
+    const platform = getPlatform();
+    await platform.renameFile(entry.path, newPath);
+    await loadDirectory(parentDir);
+    if (projectState.selectedPath === entry.path) {
+      projectState.selectedPath = newPath;
+    }
+    renderLeftPanel();
+    statusMessage(`Renamed to ${newName}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
+
+async function deleteFile(/** @type {any} */ entry, /** @type {() => void} */ renderLeftPanel) {
+  if (!confirm(`Delete "${entry.name}"?`)) return;
+  try {
+    const platform = getPlatform();
+    await platform.deleteFile(entry.path);
+    const parentDir = entry.path.includes("/")
+      ? entry.path.substring(0, entry.path.lastIndexOf("/"))
+      : ".";
+    await loadDirectory(parentDir);
+    if (projectState.selectedPath === entry.path) {
+      projectState.selectedPath = null;
+    }
+    renderLeftPanel();
+    statusMessage(`Deleted ${entry.name}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
+
+// ─── Open file from tree ──────────────────────────────────────────────────────
+
+/**
+ * Open a file from the file tree — auto-saves current dirty doc, then loads the new one.
+ *
+ * @param {{
+ *   S: any;
+ *   commit: (s: any) => void;
+ *   render: () => void;
+ *   loadMarkdown: (source: string, handle: any) => void;
+ * }} ctx
+ * @param {string} path
+ */
+export async function openFileFromTree(ctx, path) {
+  const platform = getPlatform();
+  // 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);
+        const md = unified()
+          .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
+          .stringify(mdast);
+        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);
+      }
+      await platform.writeFile(ctx.S.documentPath, output);
+    } catch (/** @type {any} */ e) {
+      statusMessage(`Save error: ${e.message}`);
+    }
+  }
+
+  // Fetch the file
+  try {
+    const content = await platform.readFile(path);
+    if (!content) return;
+
+    if (path.endsWith(".md")) {
+      ctx.loadMarkdown(content, null);
+      ctx.S.documentPath = path;
+    } else {
+      const doc = JSON.parse(content);
+      const newS = createState(doc);
+      newS.documentPath = path;
+      newS.dirty = false;
+      ctx.commit(newS);
+    }
+
+    // Update tree selection
+    projectState.selectedPath = path;
+
+    ctx.render();
+    statusMessage(`Opened ${path}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}

package/src/markdown/md-allowlist.js

@@ -0,0 +1,101 @@
+/**
+ * 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 = {
+  _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, childTag) {
+  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;
+}