@jxsuite/studio 0.11.0 → 0.14.0

package/src/files/components.js

@@ -3,8 +3,19 @@
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
 
-/** @type {any[]} */
-export let componentRegistry = []; // cached list from /__studio/components
+/**
+ * @typedef {{
+ *   tagName: string;
+ *   path: string;
+ *   props?: { name: string; type?: string; [k: string]: any }[];
+ *   source?: string;
+ *   package?: string;
+ *   modulePath?: string;
+ * }} ComponentEntry
+ */
+
+/** @type {ComponentEntry[]} */
+export let componentRegistry = [];
 export let _componentRegistryLoaded = false;
 
 export async function loadComponentRegistry() {
@@ -18,8 +29,8 @@ export async function loadComponentRegistry() {
 }
 
 /**
- * @param {any} fromDocPath
- * @param {any} toCompPath
+ * @param {string | null} fromDocPath
+ * @param {string} toCompPath
  */
 export function computeRelativePath(fromDocPath, toCompPath) {
   if (!fromDocPath) return `./${toCompPath}`;

package/src/files/file-ops.js

@@ -1,8 +1,7 @@
 /**
- * File Operations — open, load, save documents.
+ * File Operations — open, save, export documents.
  *
- * Each function that mutates state accepts a `commit(newState)` callback so the caller (studio.js)
- * can assign S and trigger render().
+ * All functions read/write directly from/to `activeTab.value` (the reactive tab).
  */
 
 import { unified } from "unified";
@@ -10,17 +9,13 @@ import remarkStringify from "remark-stringify";
 import remarkDirective from "remark-directive";
 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";
+import { activeTab, openTab } from "../workspace/workspace.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 }) {
+/** Open a file via the File System Access API (or fallback input). */
+export async function openFile() {
   try {
     if ("showOpenFilePicker" in window) {
       const [handle] = await /** @type {any} */ (window).showOpenFilePicker({
@@ -31,18 +26,21 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
       });
       const file = await handle.getFile();
       const text = await file.text();
+      const documentPath = await locateDocument(handle.name);
 
       if (handle.name.endsWith(".md")) {
-        const newState = await loadMarkdown(text, handle);
-        commit(newState);
+        const { document, frontmatter } = await loadMarkdown(text);
+        openTab({
+          id: handle.name,
+          documentPath,
+          fileHandle: handle,
+          document,
+          frontmatter,
+          sourceFormat: "md",
+        });
       } 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);
+        const document = JSON.parse(text);
+        openTab({ id: handle.name, documentPath, fileHandle: handle, document });
       }
 
       statusMessage(`Opened ${handle.name}`);
@@ -57,13 +55,11 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
         const text = await file.text();
 
         if (file.name.endsWith(".md")) {
-          const newState = await loadMarkdown(text, null);
-          commit(newState);
+          const { document, frontmatter } = await loadMarkdown(text);
+          openTab({ id: file.name, document, frontmatter, sourceFormat: "md" });
         } else {
-          const doc = JSON.parse(text);
-          const newState = createState(doc);
-          newState.dirty = false;
-          commit(newState);
+          const document = JSON.parse(text);
+          openTab({ id: file.name, document });
         }
 
         statusMessage(`Opened ${file.name}`);
@@ -76,93 +72,50 @@ export async function openFile({ S: _S, commit, renderToolbar: _renderToolbar })
 }
 
 /**
- * Parse a markdown string into a Jx state object (pure — no side effects).
+ * Parse a markdown string into document + frontmatter (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 {Promise<any>} A new state object ready for commit()
+ * @param {string} source Markdown text
+ * @returns {Promise<{ document: any; frontmatter: Record<string, any> }>}
  */
-export async function loadMarkdown(source, fileHandle) {
+export async function loadMarkdown(source) {
   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;
+    return { document: doc, frontmatter: {} };
   }
 
   // Content markdown — children form the root-level document body
-  const contentDoc = {
-    children: doc.children ?? [],
-  };
+  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 = /** @type {any} */ (createState(contentDoc));
-  newState.sourceFormat = "md";
-  newState.mode = "content";
-  newState.content = { frontmatter };
-  newState.rawMarkdown = source;
-  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 {}
+  return { document: contentDoc, frontmatter };
 }
 
-/**
- * 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 }) {
+/** Save the current document back to its source location. */
+export async function saveFile() {
+  const tab = activeTab.value;
+  if (!tab) return;
   try {
-    const output = serializeDocument(S);
+    const output = serializeDocument(tab);
 
-    if (S.documentPath) {
-      // Project file — save via platform
+    if (tab.documentPath) {
       const platform = getPlatform();
-      await platform.writeFile(S.documentPath, output);
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      await platform.writeFile(tab.documentPath, output);
+      tab.doc.dirty = false;
       statusMessage("Saved");
-    } else if (S.fileHandle && "createWritable" in S.fileHandle) {
-      // Standalone file opened via FS Access API
-      const writable = await S.fileHandle.createWritable();
+    } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
+      const writable = await /** @type {any} */ (tab.fileHandle).createWritable();
       await writable.write(output);
       await writable.close();
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage("Saved");
     } else {
       statusMessage("No save target — use Export");
@@ -172,22 +125,20 @@ export async function saveFile({ S, commit, renderToolbar }) {
   }
 }
 
-/**
- * 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 }) {
+/** 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 = S.mode === "content";
-    const output = serializeDocument(S);
+    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";
 
     if ("showSaveFilePicker" in window) {
-      const suggestedName = S.documentPath
-        ? S.documentPath.split("/").pop()
+      const suggestedName = tab.documentPath
+        ? tab.documentPath.split("/").pop()
         : isContent
           ? "content.md"
           : "component.json";
@@ -198,8 +149,7 @@ export async function exportFile({ S, commit, renderToolbar }) {
       const writable = await handle.createWritable();
       await writable.write(output);
       await writable.close();
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage(`Exported as ${handle.name}`);
     } else {
       // Fallback: download
@@ -210,8 +160,7 @@ export async function exportFile({ S, commit, renderToolbar }) {
       a.download = isContent ? "content.md" : "component.json";
       a.click();
       URL.revokeObjectURL(url);
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
   } catch (/** @type {any} */ e) {
@@ -222,22 +171,22 @@ export async function exportFile({ S, commit, renderToolbar }) {
 /**
  * Serialize the current document to its output format (JSON or Markdown).
  *
- * @param {any} S
+ * @param {import("../tabs/tab.js").Tab} tab
  * @returns {string}
  */
-function serializeDocument(S) {
-  if (S.sourceFormat === "md") {
-    return jxDocToMd(S.document);
+function serializeDocument(tab) {
+  if (tab.doc.sourceFormat === "md") {
+    return jxDocToMd(tab.doc.document);
   }
-  if (S.mode === "content") {
-    const mdast = jxToMd(S.document);
+  if (tab.doc.mode === "content") {
+    const mdast = jxToMd(tab.doc.document);
     const md = unified()
       .use(remarkDirective)
       .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
       .stringify(mdast);
-    const fm = S.content?.frontmatter;
+    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;
   }
-  return JSON.stringify(S.document, null, 2);
+  return JSON.stringify(tab.doc.document, null, 2);
 }

package/src/files/files.js

@@ -15,10 +15,13 @@ import { createState, projectState, setProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
+import { workspace, openTab, activateTab } from "../workspace/workspace.js";
+import { loadMarkdown } from "./file-ops.js";
+import { view } from "../view.js";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
-const fileIconMap = /** @type {Record<string, any>} */ ({
+const fileIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
   "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>`,
@@ -29,7 +32,7 @@ const fileIconMap = /** @type {Record<string, any>} */ ({
 
 // ─── File management ──────────────────────────────────────────────────────────
 
-async function loadDirectory(/** @type {any} */ dirPath) {
+async function loadDirectory(/** @type {string} */ dirPath) {
   if (!projectState) return;
   try {
     const platform = getPlatform();
@@ -77,13 +80,11 @@ export async function loadProject() {
  * 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 }) {
+export async function openProject({ renderActivityBar, renderLeftPanel }) {
   try {
     const platform = getPlatform();
     const result = await platform.openProject();
@@ -127,7 +128,7 @@ export async function openProject({ S, commit, renderActivityBar, renderLeftPane
     }
     projectState.projectDirs = foundDirs;
 
-    commit({ ...S, ui: { ...S.ui, leftTab: "files" } });
+    view.leftTab = "files";
     renderActivityBar();
     renderLeftPanel();
     statusMessage(`Opened project: ${projectState.name}`);
@@ -138,7 +139,7 @@ export async function openProject({ S, commit, renderActivityBar, renderLeftPane
 
 // ─── File tree templates ──────────────────────────────────────────────────────
 
-function fileTypeIconTpl(/** @type {any} */ name, /** @type {any} */ type) {
+function fileTypeIconTpl(/** @type {string} */ name, /** @type {string} */ type) {
   let tag;
   if (type === "directory") {
     tag = projectState?.expanded?.has(name) ? "sp-icon-folder-open" : "sp-icon-folder";
@@ -237,11 +238,11 @@ export function renderFilesTemplate({
         quiet
         placeholder="Filter files…"
         value=${projectState.searchQuery}
-        @input=${(/** @type {any} */ e) => {
-          projectState.searchQuery = e.target.value;
+        @input=${(/** @type {Event} */ e) => {
+          projectState.searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
           renderLeftPanel();
         }}
-        @submit=${(/** @type {any} */ e) => e.preventDefault()}
+        @submit=${(/** @type {Event} */ e) => e.preventDefault()}
       ></sp-search>
     </div>
     <div class="file-tree" role="tree" aria-label="Project files">
@@ -250,10 +251,10 @@ export function renderFilesTemplate({
   `;
 }
 
-/** @returns {any} */
+/** @returns {import("lit-html").TemplateResult | import("lit-html").TemplateResult[]} */
 function renderTreeLevelTemplate(
-  /** @type {any} */ dirPath,
-  /** @type {any} */ depth,
+  /** @type {string} */ dirPath,
+  /** @type {number} */ depth,
   /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
 ) {
   const entries = projectState.dirs.get(dirPath);
@@ -293,7 +294,7 @@ function renderTreeLevelTemplate(
         data-path=${entry.path}
         data-type=${entry.type}
         aria-expanded=${isDir ? String(isExpanded) : nothing}
-        @click=${async (/** @type {any} */ e) => {
+        @click=${async (/** @type {MouseEvent} */ e) => {
           e.stopPropagation();
           if (isDir) {
             if (isExpanded) projectState.expanded.delete(entry.path);
@@ -306,7 +307,7 @@ function renderTreeLevelTemplate(
             ctx.openFileFn(entry.path);
           }
         }}
-        @contextmenu=${(/** @type {any} */ e) => {
+        @contextmenu=${(/** @type {MouseEvent} */ e) => {
           e.preventDefault();
           e.stopPropagation();
           showFileContextMenu(e, entry, ctx);
@@ -325,10 +326,10 @@ function renderTreeLevelTemplate(
   });
 }
 
-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");
+export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
+  tree.addEventListener("keydown", (/** @type {KeyboardEvent} */ e) => {
+    const items = /** @type {HTMLElement[]} */ ([...tree.querySelectorAll(".file-tree-item")]);
+    const focused = /** @type {HTMLElement | null} */ (tree.querySelector(".file-tree-item:focus"));
     if (!focused || items.length === 0) return;
 
     const idx = items.indexOf(focused);
@@ -343,12 +344,15 @@ export function setupTreeKeyboard(/** @type {any} */ tree) {
         break;
       case "ArrowRight":
         if (focused.dataset.type === "directory") {
-          const path = focused.dataset.path;
+          const path = /** @type {string} */ (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();
+              if (panel)
+                /** @type {HTMLElement | null} */ (
+                  panel.querySelector(".file-tree-item:focus")
+                )?.click();
             });
           }
         }
@@ -378,12 +382,12 @@ export function setupTreeKeyboard(/** @type {any} */ tree) {
 
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
-/** @type {any} */
+/** @type {HTMLElement | null} */
 let fileContextPopover = null;
 
 function showFileContextMenu(
-  /** @type {any} */ e,
-  /** @type {any} */ entry,
+  /** @type {MouseEvent} */ e,
+  /** @type {{ name: string; path: string; type: string }} */ entry,
   /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
 ) {
   if (fileContextPopover) {
@@ -442,8 +446,8 @@ function showFileContextMenu(
   litRender(tpl, fileContextPopover);
   document.body.appendChild(fileContextPopover);
 
-  const closeHandler = (/** @type {any} */ ev) => {
-    if (!fileContextPopover?.contains(ev.target)) {
+  const closeHandler = (/** @type {MouseEvent} */ ev) => {
+    if (!fileContextPopover?.contains(/** @type {Node} */ (ev.target))) {
       closeFileContextMenu();
       document.removeEventListener("mousedown", closeHandler, true);
     }
@@ -478,7 +482,10 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
   }
 }
 
-async function renameFile(/** @type {any} */ entry, /** @type {() => void} */ renderLeftPanel) {
+async function renameFile(
+  /** @type {{ name: string; path: string; type: string }} */ entry,
+  /** @type {() => void} */ renderLeftPanel,
+) {
   const newName = prompt("New name:", entry.name);
   if (!newName || newName === entry.name) return;
   const entryPath = entry.path.replaceAll("\\", "/");
@@ -500,7 +507,10 @@ async function renameFile(/** @type {any} */ entry, /** @type {() => void} */ re
   }
 }
 
-async function deleteFile(/** @type {any} */ entry, /** @type {() => void} */ renderLeftPanel) {
+async function deleteFile(
+  /** @type {{ name: string; path: string; type: string }} */ entry,
+  /** @type {() => void} */ renderLeftPanel,
+) {
   if (!confirm(`Delete "${entry.name}"?`)) return;
   try {
     const platform = getPlatform();
@@ -583,3 +593,46 @@ export async function openFileFromTree(ctx, path) {
     statusMessage(`Error: ${e.message}`);
   }
 }
+
+/**
+ * Open a file from the tree into a tab. Activates existing tab if already open.
+ *
+ * @param {string} path
+ */
+export async function openFileInTab(path) {
+  for (const [id, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path) {
+      activateTab(id);
+      projectState.selectedPath = path;
+      return;
+    }
+  }
+
+  const platform = getPlatform();
+  try {
+    const content = await platform.readFile(path);
+    if (!content) return;
+
+    let document, frontmatter;
+    if (path.endsWith(".md")) {
+      const result = await loadMarkdown(content);
+      document = result.document;
+      frontmatter = result.frontmatter;
+    } else {
+      document = JSON.parse(content);
+    }
+
+    const id = path;
+    openTab({
+      id,
+      documentPath: path,
+      document,
+      frontmatter,
+      sourceFormat: path.endsWith(".md") ? "md" : null,
+    });
+    projectState.selectedPath = path;
+    statusMessage(`Opened ${path.split("/").pop()}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}

package/src/panels/activity-bar.js

@@ -1,7 +1,29 @@
 /** Activity bar — tab icons for switching left panel views. */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { activityBar, update, getState, renderOnly } from "../store.js";
+import { activityBar, renderOnly } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
+import { view } from "../view.js";
+
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+export function mount() {
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      renderActivityBar();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+}
 
 const gitBranchIcon = (/** @type {any} */ s) => html`
   <svg
@@ -58,8 +80,10 @@ export function tabIcon(tag, size) {
   return fn ? fn(size || "s") : nothing;
 }
 
-/** @param {any} S — current studio state */
-export function renderActivityBar(S) {
+export function renderActivityBar() {
+  const tab = activeTab.value;
+  if (!tab) return;
+  const leftTab = view.leftTab;
   const tabs = [
     { value: "files", icon: "sp-icon-folder", label: "Files" },
     { value: "layers", icon: "sp-icon-layers", label: "Layers" },
@@ -72,13 +96,13 @@ export function renderActivityBar(S) {
   ];
   const tpl = html`
     <sp-tabs
-      selected=${S.ui.leftTab}
+      selected=${leftTab}
       direction="vertical"
       quiet
       @change=${(/** @type {any} */ e) => {
-        const current = getState();
-        update({ ...current, ui: { ...current.ui, leftTab: e.target.selected } });
-        renderOnly("activityBar", "leftPanel");
+        view.leftTab = e.target.selected;
+        renderOnly("leftPanel");
+        renderActivityBar();
       }}
     >
       ${tabs.map(