@jxsuite/studio 0.10.2 → 0.13.0

package/src/editor/shortcuts.js

@@ -5,45 +5,48 @@
  * shortcuts on the canvas / document.
  */
 
+import { getNodeAtPath, parentElementPath, childIndex, canvasWrap } from "../store.js";
+import { activeTab, workspace, closeTab } from "../workspace/workspace.js";
 import {
-  selectNode,
-  undo,
-  redo,
-  removeNode,
-  insertNode,
-  duplicateNode,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
-  canvasWrap,
-  update,
-} from "../store.js";
+  transactDoc,
+  mutateInsertNode,
+  mutateRemoveNode,
+  mutateDuplicateNode,
+  undo as tabUndo,
+  redo as tabRedo,
+} from "../tabs/transact.js";
 import { isEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
 
+/**
+ * @typedef {import("../state.js").StudioState} StudioState
+ *
+ * @typedef {import("../state.js").JxPath} JxPath
+ */
+
 /**
  * Initialise all keyboard (and wheel/pointer) shortcuts.
  *
  * @param {() => {
- *   S: any;
- *   setS: (s: any) => void;
+ *   S: StudioState;
+ *   setS: (s: StudioState) => void;
  *   canvasMode: string;
  *   panX: number;
  *   panY: number;
  *   setPan: (x: number, y: number) => void;
  *   applyTransform: () => void;
  *   positionZoomIndicator: () => void;
- *   componentInlineEdit: any;
+ *   componentInlineEdit: object | null;
  *   saveFile: () => void;
  *   openProject: () => void;
- *   enterEditOnPath: (path: any) => void;
+ *   enterEditOnPath: (path: JxPath) => void;
  * }} getContext
  */
 export function initShortcuts(getContext) {
   // Wheel handler: Ctrl+Scroll = zoom (cursor-centered), plain scroll = pan
   canvasWrap.addEventListener(
     "wheel",
-    (/** @type {any} */ e) => {
+    (/** @type {WheelEvent} */ e) => {
       const { S, setS, canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
       if (canvasMode === "edit") return;
@@ -73,7 +76,7 @@ export function initShortcuts(getContext) {
   );
 
   // Middle-mouse drag panning
-  canvasWrap.addEventListener("pointerdown", (/** @type {any} */ e) => {
+  canvasWrap.addEventListener("pointerdown", (/** @type {PointerEvent} */ e) => {
     const ctx = getContext();
     if (ctx.canvasMode === "edit") return; // no panning in edit mode
     if (e.button !== 1) return; // middle button only
@@ -81,7 +84,7 @@ export function initShortcuts(getContext) {
     canvasWrap.setPointerCapture(e.pointerId);
     let lastX = e.clientX,
       lastY = e.clientY;
-    const onMove = (/** @type {any} */ ev) => {
+    const onMove = (/** @type {PointerEvent} */ ev) => {
       const { panX, panY, setPan, applyTransform } = getContext();
       setPan(panX + (ev.clientX - lastX), panY + (ev.clientY - lastY));
       lastX = ev.clientX;
@@ -125,14 +128,19 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
     if (isEditing()) {
-      // Let inline editor handle its own keyboard events; only intercept Save
       if (mod && e.key === "s") {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
     if (componentInlineEdit) {
@@ -140,11 +148,25 @@ export function initShortcuts(getContext) {
         e.preventDefault();
         saveFile();
       }
+      if (mod && e.key === "w") {
+        e.preventDefault();
+      }
       return;
     }
 
     if (mod) {
       switch (e.key) {
+        case "w":
+          e.preventDefault();
+          if (workspace.activeTabId && workspace.tabOrder.length > 1) {
+            const tab = workspace.tabs.get(workspace.activeTabId);
+            if (tab?.doc.dirty) {
+              const name = tab.documentPath?.split("/").pop() || "Untitled";
+              if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`)) break;
+            }
+            closeTab(workspace.activeTabId);
+          }
+          break;
         case "o":
           e.preventDefault();
           openProject();
@@ -155,11 +177,15 @@ export function initShortcuts(getContext) {
           break;
         case "z":
           e.preventDefault();
-          update(e.shiftKey ? redo(S) : undo(S));
+          if (e.shiftKey) tabRedo(activeTab.value);
+          else tabUndo(activeTab.value);
           break;
         case "d":
           e.preventDefault();
-          if (S.selection) update(duplicateNode(S, S.selection));
+          if (S.selection) {
+            const sel = S.selection;
+            transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, sel));
+          }
           break;
         case "c":
           e.preventDefault();
@@ -202,21 +228,23 @@ export function initShortcuts(getContext) {
       case "Backspace":
         if (S.selection && S.selection.length >= 2) {
           e.preventDefault();
-          update(removeNode(S, S.selection));
+          const sel = S.selection;
+          transactDoc(activeTab.value, (t) => mutateRemoveNode(t, sel));
         }
         break;
       case "Escape":
-        update(selectNode(S, null));
+        activeTab.value.session.selection = null;
         break;
       case "Enter":
         if (S.selection && S.selection.length >= 2) {
           e.preventDefault();
-          const pp = /** @type {any} */ (parentElementPath(S.selection));
+          const pp = /** @type {JxPath} */ (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);
+          transactDoc(activeTab.value, (t) => {
+            mutateInsertNode(t, pp, idx + 1, { tagName: "p", textContent: "" });
+            t.session.selection = newPath;
+          });
           enterEditOnPath(newPath);
         }
         break;
@@ -231,7 +259,7 @@ export function initShortcuts(getContext) {
       case "ArrowLeft":
         e.preventDefault();
         if (S.selection && S.selection.length >= 2) {
-          update(selectNode(S, parentElementPath(S.selection)));
+          activeTab.value.session.selection = parentElementPath(S.selection);
         }
         break;
       case "ArrowRight":
@@ -239,7 +267,7 @@ export function initShortcuts(getContext) {
         if (S.selection) {
           const node = getNodeAtPath(S.document, S.selection);
           if (node?.children?.length > 0) {
-            update(selectNode(S, [...S.selection, "children", 0]));
+            activeTab.value.session.selection = [...S.selection, "children", 0];
           }
         }
         break;
@@ -249,8 +277,8 @@ export function initShortcuts(getContext) {
   // 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)) {
+    (/** @type {WheelEvent} */ e) => {
+      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(/** @type {Node} */ (e.target))) {
         e.preventDefault();
       }
     },
@@ -259,22 +287,24 @@ export function initShortcuts(getContext) {
 }
 
 /**
- * @param {any} S
+ * @param {StudioState} S
  * @param {number} [direction]
  */
 function navigateSelection(S, direction = -1) {
   if (!S.selection) {
-    update(selectNode(S, []));
+    activeTab.value.session.selection = [];
     return;
   }
-  if (S.selection.length < 2) return; // can't navigate from root
+  if (S.selection.length < 2) return;
 
-  const parent = getNodeAtPath(S.document, /** @type {any} */ (parentElementPath(S.selection)));
+  const parent = getNodeAtPath(S.document, /** @type {JxPath} */ (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]),
-    );
+    activeTab.value.session.selection = [
+      .../** @type {JxPath} */ (parentElementPath(S.selection)),
+      "children",
+      newIdx,
+    ];
   }
 }

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/files.js

@@ -15,10 +15,12 @@ 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";
 
 // ─── 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 +31,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();
@@ -138,7 +140,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 +239,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 +252,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 +295,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 +308,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 +327,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 +345,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 +383,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 +447,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 +483,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 +508,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 +594,40 @@ 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 state = await loadMarkdown(content, null);
+      document = state.document;
+      frontmatter = state.content?.frontmatter;
+    } else {
+      document = JSON.parse(content);
+    }
+
+    const id = path;
+    openTab({ id, documentPath: path, document, frontmatter });
+    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 } from "../store.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.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;
+      void tab.session.ui.leftTab;
+      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 = tab.session.ui.leftTab;
   const tabs = [
     { value: "files", icon: "sp-icon-folder", label: "Files" },
     { value: "layers", icon: "sp-icon-layers", label: "Layers" },
@@ -72,13 +96,11 @@ 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");
+        activeTab.value.session.ui.leftTab = e.target.selected;
       }}
     >
       ${tabs.map(