@jxsuite/studio 0.0.1

package/src/editor/shortcuts.js

@@ -0,0 +1,275 @@
+/**
+ * Shortcuts.js — Keyboard shortcuts for Jx Studio
+ *
+ * Extracted from studio.js. Registers wheel-zoom, middle-mouse pan, resize listener, and keydown
+ * shortcuts on the canvas / document.
+ */
+
+import {
+  selectNode,
+  undo,
+  redo,
+  removeNode,
+  insertNode,
+  duplicateNode,
+  getNodeAtPath,
+  parentElementPath,
+  childIndex,
+  canvasWrap,
+  update,
+} from "../store.js";
+import { isEditing } from "./inline-edit.js";
+import { copyNode, cutNode, pasteNode } from "./context-menu.js";
+
+/**
+ * Initialise all keyboard (and wheel/pointer) shortcuts.
+ *
+ * @param {() => {
+ *   S: any;
+ *   setS: (s: any) => void;
+ *   canvasMode: string;
+ *   panX: number;
+ *   panY: number;
+ *   setPan: (x: number, y: number) => void;
+ *   applyTransform: () => void;
+ *   positionZoomIndicator: () => void;
+ *   componentInlineEdit: any;
+ *   saveFile: () => void;
+ *   openProject: () => void;
+ *   enterEditOnPath: (path: any) => void;
+ * }} getContext
+ */
+export function initShortcuts(getContext) {
+  // Wheel handler: Ctrl+Scroll = zoom (cursor-centered), plain scroll = pan
+  canvasWrap.addEventListener(
+    "wheel",
+    (/** @type {any} */ e) => {
+      const { S, setS, canvasMode, panX, panY, setPan, applyTransform } = getContext();
+      // Edit (content) mode: let the scroll container handle scrolling natively
+      if (canvasMode === "edit") return;
+      e.preventDefault();
+      if (e.ctrlKey || e.metaKey) {
+        // Zoom towards cursor
+        const rect = canvasWrap.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const cursorY = e.clientY - rect.top;
+        const oldZoom = S.ui.zoom;
+        const delta = -e.deltaY * 0.005;
+        const newZoom = Math.min(5.0, Math.max(0.05, oldZoom * (1 + delta)));
+        const ratio = newZoom / oldZoom;
+        // Adjust pan so the point under cursor stays stationary
+        setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
+        setS({ ...S, ui: { ...S.ui, zoom: newZoom } });
+      } else if (e.shiftKey) {
+        // Shift+scroll = horizontal pan
+        setPan(panX - e.deltaY, panY);
+      } else {
+        // Pan
+        setPan(panX - e.deltaX, panY - e.deltaY);
+      }
+      applyTransform();
+    },
+    { passive: false },
+  );
+
+  // Middle-mouse drag panning
+  canvasWrap.addEventListener("pointerdown", (/** @type {any} */ e) => {
+    const ctx = getContext();
+    if (ctx.canvasMode === "edit") return; // no panning in edit mode
+    if (e.button !== 1) return; // middle button only
+    e.preventDefault();
+    canvasWrap.setPointerCapture(e.pointerId);
+    let lastX = e.clientX,
+      lastY = e.clientY;
+    const onMove = (/** @type {any} */ ev) => {
+      const { panX, panY, setPan, applyTransform } = getContext();
+      setPan(panX + (ev.clientX - lastX), panY + (ev.clientY - lastY));
+      lastX = ev.clientX;
+      lastY = ev.clientY;
+      applyTransform();
+    };
+    const onUp = () => {
+      canvasWrap.releasePointerCapture(e.pointerId);
+      canvasWrap.removeEventListener("pointermove", onMove);
+      canvasWrap.removeEventListener("pointerup", onUp);
+    };
+    canvasWrap.addEventListener("pointermove", onMove);
+    canvasWrap.addEventListener("pointerup", onUp);
+  });
+
+  // Reposition zoom indicator on resize
+  window.addEventListener("resize", () => getContext().positionZoomIndicator());
+
+  document.addEventListener("keydown", (e) => {
+    const {
+      S,
+      setS,
+      canvasMode,
+      setPan,
+      applyTransform,
+      componentInlineEdit,
+      saveFile,
+      openProject,
+      enterEditOnPath,
+    } = 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 (mod && e.key === "s") {
+        e.preventDefault();
+        saveFile();
+      }
+      return;
+    }
+    if (isEditing()) {
+      // Let inline editor handle its own keyboard events; only intercept Save
+      if (mod && e.key === "s") {
+        e.preventDefault();
+        saveFile();
+      }
+      return;
+    }
+    if (componentInlineEdit) {
+      if (mod && e.key === "s") {
+        e.preventDefault();
+        saveFile();
+      }
+      return;
+    }
+
+    if (mod) {
+      switch (e.key) {
+        case "o":
+          e.preventDefault();
+          openProject();
+          break;
+        case "s":
+          e.preventDefault();
+          saveFile();
+          break;
+        case "z":
+          e.preventDefault();
+          update(e.shiftKey ? redo(S) : undo(S));
+          break;
+        case "d":
+          e.preventDefault();
+          if (S.selection) update(duplicateNode(S, S.selection));
+          break;
+        case "c":
+          e.preventDefault();
+          copyNode(S);
+          break;
+        case "x":
+          e.preventDefault();
+          cutNode(S);
+          break;
+        case "v":
+          e.preventDefault();
+          pasteNode(S);
+          break;
+        case "0":
+          if (canvasMode === "edit") break;
+          e.preventDefault();
+          setS({ ...S, ui: { ...S.ui, zoom: 1 } });
+          setPan(16, 16);
+          applyTransform();
+          break;
+        case "=":
+        case "+":
+          if (canvasMode === "edit") break;
+          e.preventDefault();
+          setS({ ...S, ui: { ...S.ui, zoom: Math.min(5.0, S.ui.zoom * 1.2) } });
+          applyTransform();
+          break;
+        case "-":
+          if (canvasMode === "edit") break;
+          e.preventDefault();
+          setS({ ...S, ui: { ...S.ui, zoom: Math.max(0.05, S.ui.zoom / 1.2) } });
+          applyTransform();
+          break;
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case "Delete":
+      case "Backspace":
+        if (S.selection && S.selection.length >= 2) {
+          e.preventDefault();
+          update(removeNode(S, S.selection));
+        }
+        break;
+      case "Escape":
+        update(selectNode(S, null));
+        break;
+      case "Enter":
+        if (S.selection && S.selection.length >= 2) {
+          e.preventDefault();
+          const pp = /** @type {any} */ (parentElementPath(S.selection));
+          const idx = /** @type {number} */ (childIndex(S.selection));
+          let s = insertNode(S, pp, idx + 1, { tagName: "p", textContent: "" });
+          const newPath = [...pp, "children", idx + 1];
+          s = selectNode(s, newPath);
+          update(s);
+          enterEditOnPath(newPath);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        navigateSelection(S);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        navigateSelection(S, 1);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (S.selection && S.selection.length >= 2) {
+          update(selectNode(S, parentElementPath(S.selection)));
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (S.selection) {
+          const node = getNodeAtPath(S.document, S.selection);
+          if (node?.children?.length > 0) {
+            update(selectNode(S, [...S.selection, "children", 0]));
+          }
+        }
+        break;
+    }
+  });
+
+  // Block ctrl+scroll (browser zoom) on all non-canvas areas
+  document.addEventListener(
+    "wheel",
+    (/** @type {any} */ e) => {
+      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(e.target)) {
+        e.preventDefault();
+      }
+    },
+    { passive: false },
+  );
+}
+
+/**
+ * @param {any} S
+ * @param {number} [direction]
+ */
+function navigateSelection(S, direction = -1) {
+  if (!S.selection) {
+    update(selectNode(S, []));
+    return;
+  }
+  if (S.selection.length < 2) return; // can't navigate from root
+
+  const parent = getNodeAtPath(S.document, /** @type {any} */ (parentElementPath(S.selection)));
+  const idx = /** @type {number} */ (childIndex(S.selection));
+  const newIdx = idx + direction;
+  if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
+    update(
+      selectNode(S, [.../** @type {any[]} */ (parentElementPath(S.selection)), "children", newIdx]),
+    );
+  }
+}

package/src/editor/slash-menu.js

@@ -0,0 +1,167 @@
+/**
+ * Slash-menu.js — Shared slash command menu for element insertion
+ *
+ * A single implementation used by both inline-edit (Edit/Content modes) and component inline
+ * editing (Design mode). Renders a Spectrum-styled popover with keyboard navigation. Uses a
+ * document-level capturing keydown listener so it intercepts Enter/Arrow/Escape before any
+ * element-level handlers.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+
+// ─── Commands ─────────────────────────────────────────────────────────────────
+
+const SLASH_COMMANDS = [
+  { label: "Heading 1", tag: "h1", description: "Large heading" },
+  { label: "Heading 2", tag: "h2", description: "Medium heading" },
+  { label: "Heading 3", tag: "h3", description: "Small heading" },
+  { label: "Paragraph", tag: "p", description: "Plain text" },
+  { label: "Bulleted List", tag: "ul", description: "Unordered list" },
+  { label: "Numbered List", tag: "ol", description: "Numbered list" },
+  { label: "Blockquote", tag: "blockquote", description: "Quote block" },
+  { label: "Image", tag: "img", description: "Insert image" },
+  { label: "Horizontal Rule", tag: "hr", description: "Divider line" },
+  { label: "Button", tag: "button", description: "Button element" },
+  { label: "Link", tag: "a", description: "Anchor link" },
+  { label: "Code Block", tag: "pre", description: "Preformatted code" },
+  { label: "Table", tag: "table", description: "Insert table" },
+  { label: "Div", tag: "div", description: "Container" },
+  { label: "Section", tag: "section", description: "Section container" },
+];
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const host = document.createElement("div");
+host.style.display = "contents";
+
+/** @type {{ onSelect: (cmd: any) => void } | null} */
+let callbacks = null;
+let activeIdx = 0;
+/** @type {any[]} */
+let filteredItems = [];
+let open = false;
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+/** @returns {boolean} */
+export function isSlashMenuOpen() {
+  return open;
+}
+
+/**
+ * Show (or update) the slash menu anchored below `anchorEl`.
+ *
+ * @param {HTMLElement} anchorEl — the element being edited (for positioning)
+ * @param {string} filter — current typed filter text (after the "/")
+ * @param {{ onSelect: (cmd: any) => void }} cbs
+ */
+export function showSlashMenu(anchorEl, filter, cbs) {
+  // Lazily attach host to sp-theme
+  if (!host.parentElement) {
+    (document.querySelector("sp-theme") || document.body).appendChild(host);
+  }
+
+  callbacks = cbs;
+
+  filteredItems = filter
+    ? SLASH_COMMANDS.filter(
+        (c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter),
+      )
+    : SLASH_COMMANDS;
+
+  if (!filteredItems.length) {
+    dismissSlashMenu();
+    return;
+  }
+
+  activeIdx = 0;
+
+  const rect = anchorEl.getBoundingClientRect();
+
+  litRender(
+    html`
+      <sp-popover
+        open
+        style="position:fixed;left:${rect.left}px;top:${rect.bottom +
+        4}px;z-index:9999;max-height:280px;overflow-y:auto"
+      >
+        <sp-menu style="min-width:220px">
+          ${filteredItems.map(
+            (cmd, i) => html`
+              <sp-menu-item
+                ?focused=${i === 0}
+                @click=${(/** @type {Event} */ e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  select(cmd);
+                }}
+              >
+                ${cmd.label}
+                ${cmd.description
+                  ? html`<span slot="description">${cmd.description}</span>`
+                  : nothing}
+              </sp-menu-item>
+            `,
+          )}
+        </sp-menu>
+      </sp-popover>
+    `,
+    host,
+  );
+
+  if (!open) {
+    open = true;
+    document.addEventListener("keydown", onKeydown, true); // capture phase
+  }
+}
+
+export function dismissSlashMenu() {
+  if (!open) return;
+  open = false;
+  callbacks = null;
+  filteredItems = [];
+  document.removeEventListener("keydown", onKeydown, true);
+  litRender(nothing, host);
+}
+
+// ─── Internal ─────────────────────────────────────────────────────────────────
+
+/** @param {any} cmd */
+function select(cmd) {
+  const cbs = callbacks;
+  dismissSlashMenu();
+  cbs?.onSelect(cmd);
+}
+
+/** @param {KeyboardEvent} e */
+function onKeydown(e) {
+  if (!open) return;
+
+  const items = /** @type {NodeListOf<Element>} */ (host.querySelectorAll("sp-menu-item"));
+  if (!items.length) return;
+
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    e.stopPropagation();
+    items[activeIdx]?.removeAttribute("focused");
+    activeIdx = (activeIdx + 1) % items.length;
+    items[activeIdx]?.setAttribute("focused", "");
+    items[activeIdx]?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    e.stopPropagation();
+    items[activeIdx]?.removeAttribute("focused");
+    activeIdx = (activeIdx - 1 + items.length) % items.length;
+    items[activeIdx]?.setAttribute("focused", "");
+    items[activeIdx]?.scrollIntoView({ block: "nearest" });
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    e.stopPropagation();
+    const cmd = filteredItems[activeIdx];
+    if (cmd) select(cmd);
+  } else if (e.key === "Escape") {
+    e.preventDefault();
+    e.stopPropagation();
+    dismissSlashMenu();
+  }
+}

package/src/files/components.js

@@ -0,0 +1,40 @@
+/** Component registry — cached list of project components discovered via the platform. */
+
+import { getPlatform } from "../platform.js";
+import { projectState } from "../store.js";
+
+/** @type {any[]} */
+export let componentRegistry = []; // cached list from /__studio/components
+export let _componentRegistryLoaded = false;
+
+export async function loadComponentRegistry() {
+  try {
+    const platform = getPlatform();
+    componentRegistry = await platform.discoverComponents(projectState?.projectRoot || undefined);
+    _componentRegistryLoaded = true;
+  } catch {
+    _componentRegistryLoaded = true;
+  }
+}
+
+/**
+ * @param {any} fromDocPath
+ * @param {any} toCompPath
+ */
+export function computeRelativePath(fromDocPath, toCompPath) {
+  if (!fromDocPath) return `./${toCompPath}`;
+  const fromDir = fromDocPath.substring(0, fromDocPath.lastIndexOf("/"));
+  const fromParts = fromDir.split("/").filter(Boolean);
+  const toParts = toCompPath.split("/").filter(Boolean);
+  let common = 0;
+  while (
+    common < fromParts.length &&
+    common < toParts.length &&
+    fromParts[common] === toParts[common]
+  ) {
+    common++;
+  }
+  const ups = fromParts.length - common;
+  const remaining = toParts.slice(common);
+  return (ups > 0 ? "../".repeat(ups) : "./") + remaining.join("/");
+}

package/src/files/file-ops.js

@@ -0,0 +1,195 @@
+/**
+ * File Operations — open, load, save documents.
+ *
+ * Each function that mutates state accepts a `commit(newState)` callback so the caller (studio.js)
+ * can assign S and trigger render().
+ */
+
+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 { createState } from "../store.js";
+import { locateDocument } from "../services/code-services.js";
+import { statusMessage } from "../panels/statusbar.js";
+
+/**
+ * Open a file via the File System Access API (or fallback input).
+ *
+ * @param {{ S: any; commit: (s: any) => void; renderToolbar: () => void }} ctx
+ */
+export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar }) {
+  try {
+    if ("showOpenFilePicker" in window) {
+      const [handle] = await /** @type {any} */ (window).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();
+
+      if (handle.name.endsWith(".md")) {
+        const newState = loadMarkdown(text, handle);
+        commit(newState);
+      } else {
+        const doc = JSON.parse(text);
+        const newState = createState(doc);
+        newState.fileHandle = handle;
+        newState.dirty = false;
+        newState.documentPath = await locateDocument(handle.name);
+        await loadCompanionJS(handle, newState);
+        commit(newState);
+      }
+
+      statusMessage(`Opened ${handle.name}`);
+    } else {
+      // Fallback: file input
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json,.md";
+      input.onchange = async () => {
+        const file = input.files?.[0];
+        if (!file) return;
+        const text = await file.text();
+
+        if (file.name.endsWith(".md")) {
+          const newState = loadMarkdown(text, null);
+          commit(newState);
+        } else {
+          const doc = JSON.parse(text);
+          const newState = createState(doc);
+          newState.dirty = false;
+          commit(newState);
+        }
+
+        statusMessage(`Opened ${file.name}`);
+      };
+      input.click();
+    }
+  } catch (/** @type {any} */ e) {
+    if (e.name !== "AbortError") statusMessage(`Error: ${e.message}`);
+  }
+}
+
+/**
+ * Parse a markdown string into a Jx state object (pure — no side effects).
+ *
+ * @param {any} source Markdown text
+ * @param {any} fileHandle File handle (or null)
+ * @returns {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 {}
+  }
+
+  const jxTree = mdToJx(mdast);
+
+  const newState = createState(jxTree);
+  newState.mode = "content";
+  newState.content = { frontmatter };
+  newState.fileHandle = fileHandle;
+  newState.dirty = false;
+  return newState;
+}
+
+/**
+ * Load companion JS file metadata into state.
+ *
+ * @param {any} handle
+ * @param {any} state State object to mutate in-place
+ */
+async function loadCompanionJS(handle, state) {
+  try {
+    if (handle.getParent) {
+      // Not yet available in any browser; skip for now
+    }
+    if (state.document.$handlers) {
+      state.handlersSource = `// Companion file: ${state.document.$handlers}\n// (Read-only in builder — edit the JS file directly)`;
+    }
+  } catch {}
+}
+
+/**
+ * Save the current document to disk (or download as fallback).
+ *
+ * @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";
+    }
+
+    if (S.fileHandle && "createWritable" in S.fileHandle) {
+      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) {
+      const handle = await /** @type {any} */ (window).showSaveFilePicker({
+        suggestedName: isContent ? "content.md" : "component.json",
+        types: [{ description, accept: { [mimeType]: [ext] } }],
+      });
+      const writable = await handle.createWritable();
+      await writable.write(output);
+      await writable.close();
+      commit({ ...S, fileHandle: handle, dirty: false });
+      renderToolbar();
+      statusMessage(`Saved as ${handle.name}`);
+    } else {
+      // Fallback: download
+      const blob = new Blob([output], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = isContent ? "content.md" : "component.json";
+      a.click();
+      URL.revokeObjectURL(url);
+      commit({ ...S, dirty: false });
+      renderToolbar();
+      statusMessage("Downloaded");
+    }
+  } catch (/** @type {any} */ e) {
+    if (e.name !== "AbortError") statusMessage(`Save error: ${e.message}`);
+  }
+}