@jxsuite/studio 0.13.0 → 0.14.0

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

@@ -17,6 +17,7 @@ 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 ────────────────────────────────────────────────────────────
 
@@ -79,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();
@@ -129,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}`);
@@ -616,15 +615,21 @@ export async function openFileInTab(path) {
 
     let document, frontmatter;
     if (path.endsWith(".md")) {
-      const state = await loadMarkdown(content, null);
-      document = state.document;
-      frontmatter = state.content?.frontmatter;
+      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 });
+    openTab({
+      id,
+      documentPath: path,
+      document,
+      frontmatter,
+      sourceFormat: path.endsWith(".md") ? "md" : null,
+    });
     projectState.selectedPath = path;
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (/** @type {any} */ e) {

package/src/panels/activity-bar.js

@@ -1,9 +1,10 @@
 /** Activity bar — tab icons for switching left panel views. */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { activityBar } 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;
@@ -14,7 +15,6 @@ export function mount() {
     effect(() => {
       const tab = activeTab.value;
       if (!tab) return;
-      void tab.session.ui.leftTab;
       renderActivityBar();
     });
   });
@@ -83,7 +83,7 @@ export function tabIcon(tag, size) {
 export function renderActivityBar() {
   const tab = activeTab.value;
   if (!tab) return;
-  const leftTab = tab.session.ui.leftTab;
+  const leftTab = view.leftTab;
   const tabs = [
     { value: "files", icon: "sp-icon-folder", label: "Files" },
     { value: "layers", icon: "sp-icon-layers", label: "Layers" },
@@ -100,7 +100,9 @@ export function renderActivityBar() {
       direction="vertical"
       quiet
       @change=${(/** @type {any} */ e) => {
-        activeTab.value.session.ui.leftTab = e.target.selected;
+        view.leftTab = e.target.selected;
+        renderOnly("leftPanel");
+        renderActivityBar();
       }}
     >
       ${tabs.map(

package/src/panels/canvas-dnd.js

@@ -8,14 +8,8 @@ import {
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import {
-  getState,
-  elToPath,
-  canvasPanels,
-  getNodeAtPath,
-  VOID_ELEMENTS,
-  isAncestor,
-} from "../store.js";
+import { elToPath, canvasPanels, getNodeAtPath, VOID_ELEMENTS, isAncestor } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
 import { effectiveZoom } from "../canvas/canvas-helpers.js";
@@ -72,12 +66,12 @@ export function registerPanelDnD(panel) {
   });
   view.canvasDndCleanups.push(monitorCleanup);
 
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   for (const el of allEls) {
     const elPath = elToPath.get(el);
     if (!elPath) continue;
 
-    const node = getNodeAtPath(S.document, elPath);
+    const node = getNodeAtPath(document, elPath);
     const tag = (node?.tagName || "div").toLowerCase();
     const hasElementChildren = node?.children?.some(
       (/** @type {unknown} */ c) => c != null && typeof c === "object",

package/src/panels/dnd.js

@@ -15,12 +15,12 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 
 import {
-  getState,
   leftPanel,
   getNodeAtPath,
   parentElementPath,
   childIndex,
   isAncestor,
+  renderOnly,
 } from "../store.js";
 import { transact, transactDoc, mutateMoveNode, mutateInsertNode } from "../tabs/transact.js";
 import { activeTab } from "../workspace/workspace.js";
@@ -42,6 +42,7 @@ export function registerLayersDnD() {
           .map((/** @type {any} */ s) => (/^\d+$/.test(s) ? parseInt(s) : s));
         const rowDepth = parseInt(/** @type {string} */ (row.dataset.dndDepth)) || 0;
         const isVoid = row.hasAttribute("data-dnd-void");
+        const isExpanded = row.hasAttribute("data-dnd-expanded");
 
         const cleanup = combine(
           draggable({
@@ -59,9 +60,15 @@ export function registerLayersDnD() {
             onDragStart() {
               row.classList.add("dragging");
               view.layerDragSourceHeight = row.offsetHeight;
+              if (isExpanded) {
+                hideDescendantRows(row, container);
+              }
             },
             onDrop() {
               row.classList.remove("dragging");
+              if (isExpanded) {
+                renderOnly("leftPanel");
+              }
             },
           }),
           dropTargetForElements({
@@ -79,6 +86,7 @@ export function registerLayersDnD() {
                   element,
                   currentLevel: rowDepth,
                   indentPerLevel: 16,
+                  mode: isExpanded ? "expanded" : "standard",
                   block: isVoid ? ["make-child"] : [],
                 }),
               );
@@ -111,7 +119,21 @@ export function registerLayersDnD() {
         if (!instruction || instruction.type === "instruction-blocked") return;
         const srcData = source.data;
         const targetPath = target.data.path;
+
+        // If the source had children, persist collapse at the new location
+        const srcRow = srcData.type === "tree-node" && source.element;
+        const wasExpanded = srcRow && srcRow.hasAttribute("data-dnd-expanded");
+
         applyDropInstruction(instruction, srcData, targetPath);
+
+        if (wasExpanded) {
+          const tab = activeTab.value;
+          const newPath = tab?.session.selection;
+          if (newPath) {
+            const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
+            collapsed.add(newPath.join("/"));
+          }
+        }
       },
     });
     view.dndCleanups.push(monitorCleanup);
@@ -190,6 +212,22 @@ export function registerElementsDnD() {
   });
 }
 
+/**
+ * Hide descendant rows of the dragged item so it appears collapsed during drag.
+ *
+ * @param {any} parentRow
+ * @param {any} container
+ */
+function hideDescendantRows(parentRow, container) {
+  const prefix = parentRow.dataset.path + "/";
+  const rows = container.querySelectorAll(".layers-tree .layer-row");
+  for (const r of rows) {
+    if (/** @type {any} */ (r).dataset.path?.startsWith(prefix)) {
+      /** @type {any} */ (r).style.display = "none";
+    }
+  }
+}
+
 /**
  * @param {any} rowEl
  * @param {any} data
@@ -251,7 +289,7 @@ export function clearLayerDropGap(container) {
  * @param {any} targetPath
  */
 export function applyDropInstruction(instruction, srcData, targetPath) {
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   if (srcData.type === "tree-node") {
     const fromPath = srcData.path;
     const targetParent = /** @type {any} */ (parentElementPath(targetPath));
@@ -267,7 +305,7 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
         );
         break;
       case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
+        const target = getNodeAtPath(document, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
         break;
@@ -289,7 +327,7 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
         );
         break;
       case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
+        const target = getNodeAtPath(document, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(t, targetPath, len, structuredClone(srcData.fragment)),
@@ -303,8 +341,8 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
     if (tag && tag.includes("-")) {
       const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
       if (comp) {
-        const currentS = getState();
-        const elements = currentS.document.$elements || [];
+        const tab = activeTab.value;
+        const elements = tab?.doc.document?.$elements || [];
         if (comp.source === "npm") {
           const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
           const alreadyImported = elements.some(
@@ -323,7 +361,7 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
               (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())),
           );
           if (!alreadyImported) {
-            const relPath = computeRelativePath(currentS.documentPath, comp.path);
+            const relPath = computeRelativePath(tab?.documentPath, comp.path);
             transact(activeTab.value, (/** @type {any} */ doc) => {
               if (!doc.$elements) doc.$elements = [];
               doc.$elements.push({ $ref: relPath });

package/src/panels/editors.js

@@ -7,26 +7,25 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 
-import { getState, renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store.js";
+import { renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
 
 function getFunctionBody(/** @type {any} */ editing) {
-  const S = getState();
+  const document = activeTab.value?.doc.document;
   if (editing.type === "def") {
-    return S.document.state?.[editing.defName]?.body || "";
+    return document?.state?.[editing.defName]?.body || "";
   } else if (editing.type === "event") {
-    const node = getNodeAtPath(S.document, editing.path);
+    const node = getNodeAtPath(document, editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
 }
 
 export function renderFunctionEditor() {
-  const S = getState();
-  const editing = S.ui.editingFunction;
+  const editing = activeTab.value?.session.ui.editingFunction;
 
   // If editor already exists and matches current target, just sync value
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
@@ -76,7 +75,7 @@ export function renderFunctionEditor() {
   );
 
   const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, S);
+  const args = getFunctionArgs(editing, activeTab.value?.doc.document);
 
   view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
     value: body,
@@ -120,14 +119,14 @@ export function renderFunctionEditor() {
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
       const newBody = view.functionEditor.getValue();
-      if (editing.type === "def") {
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, editing.defName, { body: newBody }));
-      } else if (editing.type === "event") {
-        const S = getState();
-        const node = getNodeAtPath(S.document, editing.path);
-        const current = node?.[editing.eventKey] || {};
+      const ed = /** @type {any} */ (editing);
+      if (ed.type === "def") {
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
+      } else if (ed.type === "event") {
+        const node = getNodeAtPath(activeTab.value?.doc.document, ed.path);
+        const current = node?.[ed.eventKey] || {};
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateProperty(t, editing.path, editing.eventKey, {
+          mutateUpdateProperty(t, ed.path, ed.eventKey, {
             ...current,
             $prototype: "Function",
             body: newBody,
@@ -157,8 +156,7 @@ export function registerFunctionCompletions() {
   monaco.languages.registerCompletionItemProvider("javascript", {
     triggerCharacters: ["."],
     provideCompletionItems(model, position) {
-      const S = getState();
-      const defs = S?.document?.state || {};
+      const defs = activeTab.value?.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range = {
         startLineNumber: position.lineNumber,