@jxsuite/studio 0.28.2 → 0.28.4

package/src/editor/shortcuts.ts

@@ -6,15 +6,15 @@
  * shortcuts on the canvas / document.
  */
 
-import { getNodeAtPath, parentElementPath, childIndex, canvasWrap } from "../store";
-import { activeTab, workspace, closeTab } from "../workspace/workspace";
+import { canvasWrap, childIndex, childList, getNodeAtPath, parentElementPath } from "../store";
+import { activeTab, closeTab, workspace } from "../workspace/workspace";
 import {
-  transactDoc,
+  mutateDuplicateNode,
   mutateInsertNode,
   mutateRemoveNode,
-  mutateDuplicateNode,
-  undo as tabUndo,
   redo as tabRedo,
+  undo as tabUndo,
+  transactDoc,
 } from "../tabs/transact";
 import { isEditing, stopEditing } from "./inline-edit";
 import { copyNode, cutNode, pasteNode } from "./context-menu";
@@ -59,9 +59,13 @@ export function initShortcuts(
     (e: WheelEvent) => {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
-      if (canvasMode === "edit") return;
+      if (canvasMode === "edit") {
+        return;
+      }
       // Manage mode: browse table handles its own scrolling
-      if (canvasMode === "manage") return;
+      if (canvasMode === "manage") {
+        return;
+      }
       e.preventDefault();
       if (e.ctrlKey || e.metaKey) {
         // Zoom towards cursor
@@ -70,7 +74,7 @@ export function initShortcuts(
         const cursorY = e.clientY - rect.top;
         const oldZoom = activeTab.value?.session.ui.zoom ?? 1;
         const delta = -e.deltaY * 0.005;
-        const newZoom = Math.min(5.0, Math.max(0.05, oldZoom * (1 + delta)));
+        const newZoom = Math.min(5, 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);
@@ -90,8 +94,12 @@ export function initShortcuts(
   // Middle-mouse drag panning
   canvasWrap.addEventListener("pointerdown", (e: PointerEvent) => {
     const ctx = getContext();
-    if (ctx.canvasMode === "edit") return; // no panning in edit mode
-    if (e.button !== 1) return; // middle button only
+    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,
@@ -169,97 +177,125 @@ export function initShortcuts(
 
     if (mod) {
       switch (e.key) {
-        case "w":
+        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";
+            const tabToClose = workspace.tabs.get(workspace.activeTabId);
+            if (tabToClose?.doc.dirty) {
+              const name = tabToClose.documentPath?.split("/").pop() || "Untitled";
               showConfirmDialog(
                 "Unsaved Changes",
                 `"${name}" has unsaved changes. Close without saving?`,
                 { confirmLabel: "Close", destructive: true },
               ).then((confirmed) => {
-                if (confirmed && workspace.activeTabId) closeTab(workspace.activeTabId);
+                if (confirmed && workspace.activeTabId) {
+                  closeTab(workspace.activeTabId);
+                }
               });
             } else {
               closeTab(workspace.activeTabId);
             }
           }
           break;
-        case "o":
+        }
+        case "o": {
           e.preventDefault();
           openProject();
           break;
-        case "p":
+        }
+        case "p": {
           e.preventDefault();
           openQuickSearch();
           break;
-        case "s":
+        }
+        case "s": {
           e.preventDefault();
           saveFile();
           break;
-        case "z":
+        }
+        case "z": {
           e.preventDefault();
-          if (e.shiftKey) tabRedo(activeTab.value!);
-          else tabUndo(activeTab.value!);
+          if (e.shiftKey) {
+            tabRedo(activeTab.value!);
+          } else {
+            tabUndo(activeTab.value!);
+          }
           break;
-        case "d":
+        }
+        case "d": {
           e.preventDefault();
           if (tab?.session.selection) {
             const sel = tab.session.selection;
             transactDoc(tab, (t) => mutateDuplicateNode(t, sel));
           }
           break;
-        case "c":
+        }
+        case "c": {
           e.preventDefault();
           copyNode();
           break;
-        case "x":
+        }
+        case "x": {
           e.preventDefault();
           cutNode();
           break;
-        case "v":
+        }
+        case "v": {
           e.preventDefault();
           pasteNode();
           break;
-        case "0":
-          if (canvasMode === "edit") break;
+        }
+        case "0": {
+          if (canvasMode === "edit") {
+            break;
+          }
           e.preventDefault();
           activeTab.value!.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
           break;
+        }
         case "=":
-        case "+":
-          if (canvasMode === "edit") break;
+        case "+": {
+          if (canvasMode === "edit") {
+            break;
+          }
           e.preventDefault();
-          activeTab.value!.session.ui.zoom = Math.min(5.0, (tab?.session.ui.zoom ?? 1) * 1.2);
+          activeTab.value!.session.ui.zoom = Math.min(5, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
-        case "-":
-          if (canvasMode === "edit") break;
+        }
+        case "-": {
+          if (canvasMode === "edit") {
+            break;
+          }
           e.preventDefault();
           activeTab.value!.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
+        }
+        default: {
+          break;
+        }
       }
       return;
     }
 
     switch (e.key) {
       case "Delete":
-      case "Backspace":
+      case "Backspace": {
         if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
           const sel = tab.session.selection;
           transactDoc(tab, (t) => mutateRemoveNode(t, sel));
         }
         break;
-      case "Escape":
+      }
+      case "Escape": {
         activeTab.value!.session.selection = null;
         break;
-      case "Enter":
+      }
+      case "Enter": {
         if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
           const pp = parentElementPath(tab.session.selection) as JxPath;
@@ -272,29 +308,37 @@ export function initShortcuts(
           enterEditOnPath(newPath);
         }
         break;
-      case "ArrowUp":
+      }
+      case "ArrowUp": {
         e.preventDefault();
         navigateSelection(-1);
         break;
-      case "ArrowDown":
+      }
+      case "ArrowDown": {
         e.preventDefault();
         navigateSelection(1);
         break;
-      case "ArrowLeft":
+      }
+      case "ArrowLeft": {
         e.preventDefault();
         if (tab?.session.selection && tab.session.selection.length >= 2) {
           activeTab.value!.session.selection = parentElementPath(tab.session.selection);
         }
         break;
-      case "ArrowRight":
+      }
+      case "ArrowRight": {
         e.preventDefault();
         if (tab?.session.selection) {
           const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-          if ((node?.children?.length ?? 0) > 0) {
+          if (childList(node).length > 0) {
             activeTab.value!.session.selection = [...tab.session.selection, "children", 0];
           }
         }
         break;
+      }
+      default: {
+        break;
+      }
     }
   });
 
@@ -311,13 +355,15 @@ export function initShortcuts(
 }
 
 /** @param {number} [direction] */
-function navigateSelection(direction: number = -1) {
+function navigateSelection(direction = -1) {
   const tab = activeTab.value;
   if (!tab?.session.selection) {
     activeTab.value!.session.selection = [];
     return;
   }
-  if (tab.session.selection.length < 2) return;
+  if (tab.session.selection.length < 2) {
+    return;
+  }
 
   const parent = getNodeAtPath(
     tab.doc.document,
@@ -325,7 +371,7 @@ function navigateSelection(direction: number = -1) {
   );
   const idx = childIndex(tab.session.selection) as number;
   const newIdx = idx + direction;
-  if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
+  if (newIdx >= 0 && newIdx < childList(parent).length) {
     activeTab.value!.session.selection = [
       ...(parentElementPath(tab.session.selection) as JxPath),
       "children",

package/src/editor/slash-menu.ts

@@ -21,21 +21,21 @@ interface SlashCommand {
 // ─── 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" },
+  { description: "Large heading", label: "Heading 1", tag: "h1" },
+  { description: "Medium heading", label: "Heading 2", tag: "h2" },
+  { description: "Small heading", label: "Heading 3", tag: "h3" },
+  { description: "Plain text", label: "Paragraph", tag: "p" },
+  { description: "Unordered list", label: "Bulleted List", tag: "ul" },
+  { description: "Numbered list", label: "Numbered List", tag: "ol" },
+  { description: "Quote block", label: "Blockquote", tag: "blockquote" },
+  { description: "Insert image", label: "Image", tag: "img" },
+  { description: "Divider line", label: "Horizontal Rule", tag: "hr" },
+  { description: "Button element", label: "Button", tag: "button" },
+  { description: "Anchor link", label: "Link", tag: "a" },
+  { description: "Preformatted code", label: "Code Block", tag: "pre" },
+  { description: "Insert table", label: "Table", tag: "table" },
+  { description: "Container", label: "Div", tag: "div" },
+  { description: "Section container", label: "Section", tag: "section" },
 ];
 
 // ─── State ────────────────────────────────────────────────────────────────────
@@ -96,7 +96,7 @@ export function showSlashMenu(
       )
     : source;
 
-  if (!filteredItems.length && !cbs.showFilter) {
+  if (filteredItems.length === 0 && !cbs.showFilter) {
     dismissSlashMenu();
     return;
   }
@@ -107,7 +107,7 @@ export function showSlashMenu(
 
   if (!open) {
     open = true;
-    document.addEventListener("keydown", onKeydown, true); // capture phase
+    document.addEventListener("keydown", onKeydown, true); // Capture phase
     requestAnimationFrame(() => {
       document.addEventListener("mousedown", onOutsideClick, true);
     });
@@ -115,13 +115,17 @@ export function showSlashMenu(
 
   if (cbs.showFilter) {
     requestAnimationFrame(() => {
-      if (_filterEl) _filterEl.focus();
+      if (_filterEl) {
+        _filterEl.focus();
+      }
     });
   }
 }
 
 export function dismissSlashMenu() {
-  if (!open) return;
+  if (!open) {
+    return;
+  }
   open = false;
   callbacks = null;
   _anchorEl = null;
@@ -167,7 +171,7 @@ function render(anchorEl: HTMLElement, showFilter: boolean) {
             />`
           : nothing}
         <sp-menu style="min-width:220px">
-          ${filteredItems.length
+          ${filteredItems.length > 0
             ? filteredItems.map(
                 (cmd, i) => html`
                   <sp-menu-item
@@ -220,27 +224,34 @@ function onFilterInput(e: Event) {
     : source;
 
   activeIdx = 0;
-  if (_anchorEl) render(_anchorEl, true);
+  if (_anchorEl) {
+    render(_anchorEl, true);
+  }
 
   // Re-focus input after re-render
   requestAnimationFrame(() => {
     if (_filterEl && _filterEl !== document.activeElement) {
       _filterEl.focus();
-      _filterEl.selectionStart = _filterEl.selectionEnd = _filterEl.value.length;
+      _filterEl.selectionStart = _filterEl.value.length;
+      _filterEl.selectionEnd = _filterEl.value.length;
     }
   });
 }
 
 /** @param {KeyboardEvent} e */
 function onKeydown(e: KeyboardEvent) {
-  if (!open) return;
+  if (!open) {
+    return;
+  }
 
   const items = getHost().querySelectorAll("sp-menu-item:not([disabled])") as NodeListOf<Element>;
 
   if (e.key === "ArrowDown") {
     e.preventDefault();
     e.stopPropagation();
-    if (!items.length) return;
+    if (items.length === 0) {
+      return;
+    }
     items[activeIdx]?.removeAttribute("focused");
     activeIdx = (activeIdx + 1) % items.length;
     items[activeIdx]?.setAttribute("focused", "");
@@ -248,7 +259,9 @@ function onKeydown(e: KeyboardEvent) {
   } else if (e.key === "ArrowUp") {
     e.preventDefault();
     e.stopPropagation();
-    if (!items.length) return;
+    if (items.length === 0) {
+      return;
+    }
     items[activeIdx]?.removeAttribute("focused");
     activeIdx = (activeIdx - 1 + items.length) % items.length;
     items[activeIdx]?.setAttribute("focused", "");
@@ -257,7 +270,9 @@ function onKeydown(e: KeyboardEvent) {
     e.preventDefault();
     e.stopPropagation();
     const cmd = filteredItems[activeIdx];
-    if (cmd) select(cmd);
+    if (cmd) {
+      select(cmd);
+    }
   } else if (e.key === "Escape") {
     e.preventDefault();
     e.stopPropagation();

package/src/files/components.ts

@@ -2,11 +2,11 @@
 
 import { getPlatform } from "../platform";
 import { projectState } from "../store";
+import type { ComponentMeta } from "../types";
 
-export interface ComponentEntry {
-  tagName: string;
-  path: string;
-  props?: { name: string; type?: string; [k: string]: unknown }[];
+/** A discovered component: project components carry a file path; package components may not. */
+export interface ComponentEntry extends Omit<ComponentMeta, "path"> {
+  path?: string;
   source?: string;
   package?: string;
   modulePath?: string;
@@ -30,10 +30,12 @@ export async function loadComponentRegistry() {
  * @param {string} toCompPath
  */
 export function computeRelativePath(fromDocPath: string | null, toCompPath: string) {
-  if (!fromDocPath) return `./${toCompPath}`;
+  if (!fromDocPath) {
+    return `./${toCompPath}`;
+  }
   const from = fromDocPath.replaceAll("\\", "/");
   const to = toCompPath.replaceAll("\\", "/");
-  const fromDir = from.substring(0, from.lastIndexOf("/"));
+  const fromDir = from.includes("/") ? from.slice(0, from.lastIndexOf("/")) : "";
   const fromParts = fromDir.split("/").filter(Boolean);
   const toParts = to.split("/").filter(Boolean);
   let common = 0;
@@ -42,7 +44,7 @@ export function computeRelativePath(fromDocPath: string | null, toCompPath: stri
     common < toParts.length &&
     fromParts[common] === toParts[common]
   ) {
-    common++;
+    common += 1;
   }
   const ups = fromParts.length - common;
   const remaining = toParts.slice(common);

package/src/files/file-ops.ts

@@ -8,21 +8,24 @@
  */
 
 import { locateDocument } from "../services/code-services";
+import { errorMessage } from "@jxsuite/schema/parse";
 import { statusMessage } from "../panels/statusbar";
 import { getPlatform } from "../platform";
 import { activeTab, openTab } from "../workspace/workspace";
 import { isEditing, stopEditing } from "../editor/inline-edit";
 import {
-  loadFormats,
-  getFormats,
-  formatForPath,
+  defaultContentFormat,
   formatByName,
+  formatForPath,
   formatParse,
   formatSerialize,
-  defaultContentFormat,
+  getFormats,
+  loadFormats,
+  noFormatError,
   splitFormatDocument,
-  type StudioFormat,
 } from "../format/format-host";
+import type { StudioFormat } from "../format/format-host";
+import type { Tab } from "../tabs/tab.js";
 
 /**
  * Parse a format-class source string into document + frontmatter + mode per the format's
@@ -48,10 +51,7 @@ export async function parseSourceForPath(path: string, source: string) {
   await loadFormats();
   const format = formatForPath(path);
   if (!format || !format.capabilities.parse) {
-    throw new Error(
-      `No format class imported for "${path}" — add one to project.json imports ` +
-        `(e.g. "Markdown": "@jxsuite/parser/Markdown.class.json")`,
-    );
+    throw noFormatError(path);
   }
   const result = await parseFormatSource(format, source);
   return { ...result, format };
@@ -64,14 +64,14 @@ export async function openFile() {
     const formats = getFormats();
     const pickerTypes = [
       {
-        description: "Jx Component",
         accept: { "application/json": [".json"] },
+        description: "Jx Component",
       },
       ...formats
         .filter((f) => f.capabilities.parse)
         .map((f) => ({
-          description: f.name,
           accept: { [f.mediaType ?? "text/plain"]: f.extensions },
+          description: f.name,
         })),
     ];
     const acceptExts = [".json", ...formats.flatMap((f) => f.extensions)].join(",");
@@ -86,23 +86,27 @@ export async function openFile() {
       if (format) {
         const { document, frontmatter } = await parseFormatSource(format, text);
         openTab({
-          id: name,
+          document,
           documentPath,
           fileHandle: handle,
-          document,
           frontmatter,
+          id: name,
           sourceFormat: format.name,
         });
-      } else {
+      } else if (name.endsWith(".json")) {
         const document = JSON.parse(text);
-        openTab({ id: name, documentPath, fileHandle: handle, document });
+        openTab({ document, documentPath, fileHandle: handle, id: name });
+      } else {
+        throw noFormatError(name);
       }
       statusMessage(`Opened ${name}`);
     };
 
     if ("showOpenFilePicker" in window) {
       const [handle] = await (
-        window as unknown as { showOpenFilePicker: Function }
+        window as unknown as {
+          showOpenFilePicker: (options?: unknown) => Promise<FileSystemFileHandle[]>;
+        }
       ).showOpenFilePicker({ types: pickerTypes });
       const file = await handle.getFile();
       await handleSource(handle.name, await file.text(), handle);
@@ -111,23 +115,31 @@ export async function openFile() {
       const input = document.createElement("input");
       input.type = "file";
       input.accept = acceptExts;
-      input.onchange = async () => {
+      input.addEventListener("change", async () => {
         const file = input.files?.[0];
-        if (!file) return;
+        if (!file) {
+          return;
+        }
         await handleSource(file.name, await file.text());
-      };
+      });
       input.click();
     }
-  } catch (e) {
-    if ((e as Error).name !== "AbortError") statusMessage(`Error: ${(e as Error).message}`);
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      statusMessage(`Error: ${errorMessage(error)}`);
+    }
   }
 }
 
 /** Save the current document back to its source location. */
 export async function saveFile() {
-  if (isEditing()) stopEditing();
+  if (isEditing()) {
+    stopEditing();
+  }
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   try {
     const output = await serializeDocument(tab);
 
@@ -153,13 +165,15 @@ export async function saveFile() {
     } else {
       statusMessage("No save target — use Export");
     }
-  } catch (e) {
-    if ((e as Error).name !== "AbortError") statusMessage(`Save error: ${(e as Error).message}`);
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      statusMessage(`Save error: ${errorMessage(error)}`);
+    }
   }
 }
 
 /** The output format for a tab: its source format, or the default content format. */
-function tabFormat(tab: import("../tabs/tab.js").Tab): StudioFormat | undefined {
+function tabFormat(tab: Tab): StudioFormat | undefined {
   return (
     formatByName(tab.doc.sourceFormat) ??
     (tab.doc.mode === "content" ? defaultContentFormat() : undefined)
@@ -169,7 +183,9 @@ function tabFormat(tab: import("../tabs/tab.js").Tab): StudioFormat | undefined
 /** Export the current document to a new location (Save As / download). */
 export async function exportFile() {
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   try {
     await loadFormats();
     const format = tabFormat(tab);
@@ -182,10 +198,12 @@ export async function exportFile() {
     if ("showSaveFilePicker" in window) {
       const suggestedName = tab.documentPath ? tab.documentPath.split("/").pop() : fallbackName;
       const handle = await (
-        window as unknown as { showSaveFilePicker: Function }
+        window as unknown as {
+          showSaveFilePicker: (options?: unknown) => Promise<FileSystemFileHandle>;
+        }
       ).showSaveFilePicker({
         suggestedName,
-        types: [{ description, accept: { [mimeType]: [ext] } }],
+        types: [{ accept: { [mimeType]: [ext] }, description }],
       });
       const writable = await handle.createWritable();
       await writable.write(output);
@@ -204,8 +222,10 @@ export async function exportFile() {
       tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
-  } catch (e) {
-    if ((e as Error).name !== "AbortError") statusMessage(`Export error: ${(e as Error).message}`);
+  } catch (error) {
+    if (!(error instanceof Error && error.name === "AbortError")) {
+      statusMessage(`Export error: ${errorMessage(error)}`);
+    }
   }
 }
 
@@ -216,7 +236,7 @@ export async function exportFile() {
  * @param {import("../tabs/tab.js").Tab} tab
  * @returns {Promise<string>}
  */
-export async function serializeDocument(tab: import("../tabs/tab.js").Tab): Promise<string> {
+export async function serializeDocument(tab: Tab): Promise<string> {
   await loadFormats();
   const sourceFormat = formatByName(tab.doc.sourceFormat);
   if (sourceFormat?.capabilities.serialize) {
@@ -232,8 +252,8 @@ export async function serializeDocument(tab: import("../tabs/tab.js").Tab): Prom
       const hasFrontmatter = Object.keys(fm).length > 0;
       const fullDoc = { ...fm, ...tab.doc.document };
       return formatSerialize(format.name, fullDoc, {
-        mode: "roundtrip",
         frontmatter: hasFrontmatter,
+        mode: "roundtrip",
       });
     }
   }