@jxsuite/studio 0.23.1 → 0.24.0

package/src/editor/{shortcuts.js → shortcuts.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Shortcuts.js — Keyboard shortcuts for Jx Studio
  *
@@ -5,8 +6,8 @@
  * shortcuts on the canvas / document.
  */
 
-import { getNodeAtPath, parentElementPath, childIndex, canvasWrap } from "../store.js";
-import { activeTab, workspace, closeTab } from "../workspace/workspace.js";
+import { getNodeAtPath, parentElementPath, childIndex, canvasWrap } from "../store";
+import { activeTab, workspace, closeTab } from "../workspace/workspace";
 import {
   transactDoc,
   mutateInsertNode,
@@ -14,13 +15,13 @@ import {
   mutateDuplicateNode,
   undo as tabUndo,
   redo as tabRedo,
-} from "../tabs/transact.js";
-import { isEditing, stopEditing } from "./inline-edit.js";
-import { copyNode, cutNode, pasteNode } from "./context-menu.js";
-import { openQuickSearch } from "../panels/quick-search.js";
-import { showConfirmDialog } from "../ui/layers.js";
+} from "../tabs/transact";
+import { isEditing, stopEditing } from "./inline-edit";
+import { copyNode, cutNode, pasteNode } from "./context-menu";
+import { openQuickSearch } from "../panels/quick-search";
+import { showConfirmDialog } from "../ui/layers";
 
-/** @typedef {import("../state.js").JxPath} JxPath */
+import type { JxPath } from "../state";
 
 /**
  * Initialise all keyboard (and wheel/pointer) shortcuts.
@@ -38,11 +39,24 @@ import { showConfirmDialog } from "../ui/layers.js";
  *   enterEditOnPath: (path: JxPath) => void;
  * }} getContext
  */
-export function initShortcuts(getContext) {
+export function initShortcuts(
+  getContext: () => {
+    canvasMode: string;
+    panX: number;
+    panY: number;
+    setPan: (x: number, y: number) => void;
+    applyTransform: () => void;
+    positionZoomIndicator: () => void;
+    componentInlineEdit: Record<string, unknown> | null;
+    saveFile: () => void;
+    openProject: () => void;
+    enterEditOnPath: (path: JxPath) => void;
+  },
+) {
   // Wheel handler: Ctrl+Scroll = zoom (cursor-centered), plain scroll = pan
   canvasWrap.addEventListener(
     "wheel",
-    (/** @type {WheelEvent} */ e) => {
+    (e: WheelEvent) => {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
       if (canvasMode === "edit") return;
@@ -60,7 +74,7 @@ export function initShortcuts(getContext) {
         const ratio = newZoom / oldZoom;
         // Adjust pan so the point under cursor stays stationary
         setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
-        activeTab.value.session.ui.zoom = newZoom;
+        activeTab.value!.session.ui.zoom = newZoom;
       } else if (e.shiftKey) {
         // Shift+scroll = horizontal pan
         setPan(panX - e.deltaY, panY);
@@ -74,7 +88,7 @@ export function initShortcuts(getContext) {
   );
 
   // Middle-mouse drag panning
-  canvasWrap.addEventListener("pointerdown", (/** @type {PointerEvent} */ e) => {
+  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
@@ -82,7 +96,7 @@ export function initShortcuts(getContext) {
     canvasWrap.setPointerCapture(e.pointerId);
     let lastX = e.clientX,
       lastY = e.clientY;
-    const onMove = (/** @type {PointerEvent} */ ev) => {
+    const onMove = (ev: PointerEvent) => {
       const { panX, panY, setPan, applyTransform } = getContext();
       setPan(panX + (ev.clientX - lastX), panY + (ev.clientY - lastY));
       lastX = ev.clientX;
@@ -187,8 +201,8 @@ export function initShortcuts(getContext) {
           break;
         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":
           e.preventDefault();
@@ -212,7 +226,7 @@ export function initShortcuts(getContext) {
         case "0":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          activeTab.value.session.ui.zoom = 1;
+          activeTab.value!.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform();
           break;
@@ -220,13 +234,13 @@ export function initShortcuts(getContext) {
         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.0, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform();
           break;
         case "-":
           if (canvasMode === "edit") break;
           e.preventDefault();
-          activeTab.value.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
+          activeTab.value!.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform();
           break;
       }
@@ -243,13 +257,13 @@ export function initShortcuts(getContext) {
         }
         break;
       case "Escape":
-        activeTab.value.session.selection = null;
+        activeTab.value!.session.selection = null;
         break;
       case "Enter":
         if (tab?.session.selection && tab.session.selection.length >= 2) {
           e.preventDefault();
-          const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
-          const idx = /** @type {number} */ (childIndex(tab.session.selection));
+          const pp = parentElementPath(tab.session.selection) as JxPath;
+          const idx = childIndex(tab.session.selection) as number;
           const newPath = [...pp, "children", idx + 1];
           transactDoc(tab, (t) => {
             mutateInsertNode(t, pp, idx + 1, { tagName: "p", textContent: "" });
@@ -269,7 +283,7 @@ export function initShortcuts(getContext) {
       case "ArrowLeft":
         e.preventDefault();
         if (tab?.session.selection && tab.session.selection.length >= 2) {
-          activeTab.value.session.selection = parentElementPath(tab.session.selection);
+          activeTab.value!.session.selection = parentElementPath(tab.session.selection);
         }
         break;
       case "ArrowRight":
@@ -277,7 +291,7 @@ export function initShortcuts(getContext) {
         if (tab?.session.selection) {
           const node = getNodeAtPath(tab.doc.document, tab.session.selection);
           if ((node?.children?.length ?? 0) > 0) {
-            activeTab.value.session.selection = [...tab.session.selection, "children", 0];
+            activeTab.value!.session.selection = [...tab.session.selection, "children", 0];
           }
         }
         break;
@@ -287,8 +301,8 @@ export function initShortcuts(getContext) {
   // Block ctrl+scroll (browser zoom) on all non-canvas areas
   document.addEventListener(
     "wheel",
-    (/** @type {WheelEvent} */ e) => {
-      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(/** @type {Node} */ (e.target))) {
+    (e: WheelEvent) => {
+      if ((e.ctrlKey || e.metaKey) && !canvasWrap.contains(e.target as Node)) {
         e.preventDefault();
       }
     },
@@ -297,23 +311,23 @@ export function initShortcuts(getContext) {
 }
 
 /** @param {number} [direction] */
-function navigateSelection(direction = -1) {
+function navigateSelection(direction: number = -1) {
   const tab = activeTab.value;
   if (!tab?.session.selection) {
-    activeTab.value.session.selection = [];
+    activeTab.value!.session.selection = [];
     return;
   }
   if (tab.session.selection.length < 2) return;
 
   const parent = getNodeAtPath(
     tab.doc.document,
-    /** @type {JxPath} */ (parentElementPath(tab.session.selection)),
+    parentElementPath(tab.session.selection) as JxPath,
   );
-  const idx = /** @type {number} */ (childIndex(tab.session.selection));
+  const idx = childIndex(tab.session.selection) as number;
   const newIdx = idx + direction;
   if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
-    activeTab.value.session.selection = [
-      .../** @type {JxPath} */ (parentElementPath(tab.session.selection)),
+    activeTab.value!.session.selection = [
+      ...(parentElementPath(tab.session.selection) as JxPath),
       "children",
       newIdx,
     ];

package/src/editor/{slash-menu.js → slash-menu.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Slash-menu.js — Shared slash command menu for element insertion
  *
@@ -9,7 +10,13 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { getLayerSlot } from "../ui/layers.js";
+import { getLayerSlot } from "../ui/layers";
+
+interface SlashCommand {
+  label: string;
+  tag: string;
+  description: string;
+}
 
 // ─── Commands ─────────────────────────────────────────────────────────────────
 
@@ -31,30 +38,20 @@ const SLASH_COMMANDS = [
   { label: "Section", tag: "section", description: "Section container" },
 ];
 
-/** @typedef {{ label: string; tag: string; description: string }} SlashCommand */
-
 // ─── State ────────────────────────────────────────────────────────────────────
 
-/**
- * @type {{
- *   onSelect: (cmd: SlashCommand) => void;
- *   showFilter?: boolean;
- *   commands?: SlashCommand[];
- * } | null}
- */
-let callbacks = null;
+let callbacks: {
+  onSelect: (cmd: SlashCommand) => void;
+  showFilter?: boolean;
+  commands?: SlashCommand[];
+} | null = null;
 let activeIdx = 0;
-/** @type {SlashCommand[]} */
-let filteredItems = [];
+let filteredItems: SlashCommand[] = [];
 let open = false;
-/** @type {HTMLElement | null} */
-let _anchorEl = null;
-/** @type {DOMRect | null} */
-let _anchorRect = null;
-/** @type {HTMLInputElement | null} */
-let _filterEl = null;
-/** @type {HTMLElement | null} */
-let _popoverEl = null;
+let _anchorEl: HTMLElement | null = null;
+let _anchorRect: DOMRect | null = null;
+let _filterEl: HTMLInputElement | null = null;
+let _popoverEl: HTMLElement | null = null;
 
 /** @returns {HTMLElement} */
 function getHost() {
@@ -79,7 +76,11 @@ export function isSlashMenuOpen() {
  *   commands?: SlashCommand[];
  * }} cbs
  */
-export function showSlashMenu(anchorEl, filter, cbs) {
+export function showSlashMenu(
+  anchorEl: HTMLElement,
+  filter: string,
+  cbs: { onSelect: (cmd: SlashCommand) => void; showFilter?: boolean; commands?: SlashCommand[] },
+) {
   callbacks = cbs;
   _anchorEl = anchorEl;
   _anchorRect = anchorEl.getBoundingClientRect();
@@ -135,7 +136,7 @@ export function dismissSlashMenu() {
  * @param {HTMLElement} anchorEl
  * @param {boolean} showFilter
  */
-function render(anchorEl, showFilter) {
+function render(anchorEl: HTMLElement, showFilter: boolean) {
   const rect = _anchorRect || anchorEl.getBoundingClientRect();
 
   litRender(
@@ -143,7 +144,7 @@ function render(anchorEl, showFilter) {
       <sp-popover
         open
         ${ref((el) => {
-          _popoverEl = /** @type {HTMLElement | null} */ (el || null);
+          _popoverEl = (el as HTMLElement | undefined) || null;
         })}
         style="position:fixed;left:${rect.left}px;top:${rect.bottom +
         4}px;z-index:9999;max-height:320px;overflow-y:auto"
@@ -156,7 +157,7 @@ function render(anchorEl, showFilter) {
               autocomplete="off"
               style="display:block;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-bottom:1px solid var(--border, #444);outline:none;font-size:13px;background:transparent;color:inherit"
               ${ref((el) => {
-                _filterEl = /** @type {HTMLInputElement | null} */ (el || null);
+                _filterEl = (el as HTMLInputElement | undefined) || null;
               })}
               @input=${onFilterInput}
             />`
@@ -167,7 +168,7 @@ function render(anchorEl, showFilter) {
                 (cmd, i) => html`
                   <sp-menu-item
                     ?focused=${i === 0}
-                    @click=${(/** @type {Event} */ e) => {
+                    @click=${(e: Event) => {
                       e.preventDefault();
                       e.stopPropagation();
                       select(cmd);
@@ -189,22 +190,22 @@ function render(anchorEl, showFilter) {
 }
 
 /** @param {MouseEvent} e */
-function onOutsideClick(e) {
-  if (_popoverEl && !_popoverEl.contains(/** @type {Node} */ (e.target))) {
+function onOutsideClick(e: MouseEvent) {
+  if (_popoverEl && !_popoverEl.contains(e.target as Node)) {
     dismissSlashMenu();
   }
 }
 
 /** @param {SlashCommand} cmd */
-function select(cmd) {
+function select(cmd: SlashCommand) {
   const cbs = callbacks;
   dismissSlashMenu();
   cbs?.onSelect(cmd);
 }
 
 /** @param {Event} e */
-function onFilterInput(e) {
-  const input = /** @type {HTMLInputElement} */ (e.target);
+function onFilterInput(e: Event) {
+  const input = e.target as HTMLInputElement;
   const filter = input.value.toLowerCase();
 
   const source = callbacks?.commands || SLASH_COMMANDS;
@@ -227,12 +228,10 @@ function onFilterInput(e) {
 }
 
 /** @param {KeyboardEvent} e */
-function onKeydown(e) {
+function onKeydown(e: KeyboardEvent) {
   if (!open) return;
 
-  const items = /** @type {NodeListOf<Element>} */ (
-    getHost().querySelectorAll("sp-menu-item:not([disabled])")
-  );
+  const items = getHost().querySelectorAll("sp-menu-item:not([disabled])") as NodeListOf<Element>;
 
   if (e.key === "ArrowDown") {
     e.preventDefault();

package/src/files/{components.js → components.ts}

@@ -1,21 +1,18 @@
 /** Component registry — cached list of project components discovered via the platform. */
 
-import { getPlatform } from "../platform.js";
-import { projectState } from "../store.js";
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
 
-/**
- * @typedef {{
- *   tagName: string;
- *   path: string;
- *   props?: { name: string; type?: string; [k: string]: unknown }[];
- *   source?: string;
- *   package?: string;
- *   modulePath?: string;
- * }} ComponentEntry
- */
+export interface ComponentEntry {
+  tagName: string;
+  path: string;
+  props?: { name: string; type?: string; [k: string]: unknown }[];
+  source?: string;
+  package?: string;
+  modulePath?: string;
+}
 
-/** @type {ComponentEntry[]} */
-export let componentRegistry = [];
+export let componentRegistry: ComponentEntry[] = [];
 export let _componentRegistryLoaded = false;
 
 export async function loadComponentRegistry() {
@@ -32,7 +29,7 @@ export async function loadComponentRegistry() {
  * @param {string | null} fromDocPath
  * @param {string} toCompPath
  */
-export function computeRelativePath(fromDocPath, toCompPath) {
+export function computeRelativePath(fromDocPath: string | null, toCompPath: string) {
   if (!fromDocPath) return `./${toCompPath}`;
   const from = fromDocPath.replaceAll("\\", "/");
   const to = toCompPath.replaceAll("\\", "/");

package/src/files/{file-ops.js → file-ops.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * File Operations — open, save, export documents.
  *
@@ -9,19 +10,21 @@ import remarkStringify from "remark-stringify";
 import remarkDirective from "remark-directive";
 import remarkGfm from "remark-gfm";
 import { stringify as stringifyYaml } from "yaml";
-import { jxToMd, jxDocToMd } from "../markdown/md-convert.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";
-import { isEditing, stopEditing } from "../editor/inline-edit.js";
+import { jxToMd, jxDocToMd } from "../markdown/md-convert";
+import { locateDocument } from "../services/code-services";
+import { statusMessage } from "../panels/statusbar";
+import { getPlatform } from "../platform";
+import { activeTab, openTab } from "../workspace/workspace";
+import { isEditing, stopEditing } from "../editor/inline-edit";
+
+import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 
 /** 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 {{ showOpenFilePicker: Function }} */ (
-        /** @type {unknown} */ (window)
+      const [handle] = await (
+        window as unknown as { showOpenFilePicker: Function }
       ).showOpenFilePicker({
         types: [
           { description: "Jx Component", accept: { "application/json": [".json"] } },
@@ -70,9 +73,8 @@ export async function openFile() {
       };
       input.click();
     }
-  } catch (/** @type {unknown} */ e) {
-    if (/** @type {Error} */ (e).name !== "AbortError")
-      statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    if ((e as Error).name !== "AbortError") statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -82,9 +84,9 @@ export async function openFile() {
  * @param {string} source Markdown text
  * @returns {Promise<{ document: JxMutableNode; frontmatter: Record<string, unknown> }>}
  */
-export async function loadMarkdown(source) {
+export async function loadMarkdown(source: string) {
   const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
-  const doc = /** @type {JxMutableNode} */ (transpileJxMarkdown(source));
+  const doc = transpileJxMarkdown(source) as JxMutableNode;
 
   const isComponent = doc.tagName && String(doc.tagName).includes("-");
 
@@ -95,12 +97,18 @@ export async function loadMarkdown(source) {
   // Content markdown — children form the root-level document body
   const children = doc.children ?? [];
   if (children.length === 0) children.push({ tagName: "p", children: [] });
-  const contentDoc = { children };
 
-  /** @type {Record<string, unknown>} */
-  const frontmatter = {};
+  const documentKeys = new Set(["state", "imports"]);
+  const contentDoc: Record<string, unknown> = { children };
+
+  const frontmatter: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(doc)) {
-    if (key !== "children") frontmatter[key] = value;
+    if (key === "children") continue;
+    if (documentKeys.has(key)) {
+      contentDoc[key] = value;
+    } else {
+      frontmatter[key] = value;
+    }
   }
 
   return { document: contentDoc, frontmatter };
@@ -136,9 +144,8 @@ export async function saveFile() {
     } else {
       statusMessage("No save target — use Export");
     }
-  } catch (/** @type {unknown} */ e) {
-    if (/** @type {Error} */ (e).name !== "AbortError")
-      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    if ((e as Error).name !== "AbortError") statusMessage(`Save error: ${(e as Error).message}`);
   }
 }
 
@@ -159,8 +166,8 @@ export async function exportFile() {
         : isContent
           ? "content.md"
           : "component.json";
-      const handle = await /** @type {{ showSaveFilePicker: Function }} */ (
-        /** @type {unknown} */ (window)
+      const handle = await (
+        window as unknown as { showSaveFilePicker: Function }
       ).showSaveFilePicker({
         suggestedName,
         types: [{ description, accept: { [mimeType]: [ext] } }],
@@ -182,9 +189,8 @@ export async function exportFile() {
       tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
-  } catch (/** @type {unknown} */ e) {
-    if (/** @type {Error} */ (e).name !== "AbortError")
-      statusMessage(`Export error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    if ((e as Error).name !== "AbortError") statusMessage(`Export error: ${(e as Error).message}`);
   }
 }
 
@@ -194,19 +200,20 @@ export async function exportFile() {
  * @param {import("../tabs/tab.js").Tab} tab
  * @returns {string}
  */
-export function serializeDocument(tab) {
+export function serializeDocument(tab: import("../tabs/tab.js").Tab) {
   if (tab.doc.sourceFormat === "md") {
     const fm = tab.doc.content?.frontmatter || {};
-    const fullDoc = { ...fm, children: tab.doc.document.children ?? [] };
+    const doc = tab.doc.document;
+    const fullDoc = { ...fm, ...doc, children: doc.children ?? [] };
     return jxDocToMd(/** @type {JxMutableNode} */ (fullDoc));
   }
   if (tab.doc.mode === "content") {
-    const mdast = jxToMd(/** @type {JxElement} */ (tab.doc.document));
+    const mdast = jxToMd(tab.doc.document as JxElement);
     const md = unified()
       .use(remarkGfm)
       .use(remarkDirective)
       .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-      .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
+      .stringify(mdast as unknown as import("mdast").Root);
     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;