@jxsuite/studio 0.23.2 → 0.25.0

package/src/{view.js → view.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * View.js — Transient view state for Jx Studio
  *
@@ -6,62 +7,59 @@
  * store.js) makes renderer dependencies explicit.
  */
 
-/**
- * @typedef {{
- *   panzoomWrap: HTMLElement | null;
- *   renderGeneration: number;
- *   centerObserver: ResizeObserver | null;
- *   needsCenter: boolean;
- *   panX: number;
- *   panY: number;
- *   prevCanvasMode: string | null;
- *   monacoEditor:
- *     | (import("monaco-editor").editor.IStandaloneCodeEditor & { _ignoreNextChange?: boolean })
- *     | null;
- *   functionEditor:
- *     | (import("monaco-editor").editor.IStandaloneCodeEditor & {
- *         _ignoreNextChange?: boolean;
- *         _editingTarget?: string | null;
- *       })
- *     | null;
- *   componentInlineEdit: {
- *     el: HTMLElement;
- *     path: (string | number)[];
- *     originalText: string;
- *     mediaName: string | null;
- *     _outsideHandler?: ((e: MouseEvent) => void) | null;
- *     [k: string]: unknown;
- *   } | null;
- *   inlineEditCleanup: (() => void) | null;
- *   blockActionBarEl: HTMLElement | null;
- *   selDragCleanup: (() => void) | null;
- *   dndCleanups: (() => void)[];
- *   canvasDndCleanups: (() => void)[];
- *   canvasEventCleanups: (() => void)[];
- *   forcedStyleTag: HTMLStyleElement | null;
- *   forcedAttrEl: HTMLElement | null;
- *   elementsCollapsed: Set<string>;
- *   elementsFilter: string;
- *   lastDragInput: { clientX: number; clientY: number; [k: string]: unknown } | null;
- *   _currentDropTargetRow: HTMLElement | null;
- *   layerDragSourceHeight: number;
- *   savedRange: Range | null;
- *   _completionRegistered: boolean;
- *   stylebookElToTag: WeakMap<Element, string>;
- *   showAddBreakpointForm: boolean;
- *   addBreakpointPreview: string;
- *   layoutSelection: unknown;
- *   leftTab: string;
- *   leftPanelCollapsed: boolean;
- *   rightPanelCollapsed: boolean;
- *   autosaveTimer: ReturnType<typeof setTimeout> | null;
- *   _layersCollapsed: Set<string> | null;
- *   [key: string]: unknown;
- * }} ViewState
- */
+interface ViewState {
+  panzoomWrap: HTMLElement | null;
+  renderGeneration: number;
+  centerObserver: ResizeObserver | null;
+  needsCenter: boolean;
+  panX: number;
+  panY: number;
+  prevCanvasMode: string | null;
+  monacoEditor:
+    | (import("monaco-editor").editor.IStandaloneCodeEditor & { _ignoreNextChange?: boolean })
+    | null;
+  functionEditor:
+    | (import("monaco-editor").editor.IStandaloneCodeEditor & {
+        _ignoreNextChange?: boolean;
+        _editingTarget?: string | null;
+      })
+    | null;
+  componentInlineEdit: {
+    el: HTMLElement;
+    path: (string | number)[];
+    originalText: string;
+    mediaName: string | null;
+    _outsideHandler?: ((e: MouseEvent) => void) | null;
+    [k: string]: unknown;
+  } | null;
+  inlineEditCleanup: (() => void) | null;
+  blockActionBarEl: HTMLElement | null;
+  selDragCleanup: (() => void) | null;
+  dndCleanups: (() => void)[];
+  canvasDndCleanups: (() => void)[];
+  canvasEventCleanups: (() => void)[];
+  forcedStyleTag: HTMLStyleElement | null;
+  forcedAttrEl: HTMLElement | null;
+  elementsCollapsed: Set<string>;
+  elementsFilter: string;
+  lastDragInput: { clientX: number; clientY: number; [k: string]: unknown } | null;
+  _currentDropTargetRow: HTMLElement | null;
+  layerDragSourceHeight: number;
+  savedRange: Range | null;
+  _completionRegistered: boolean;
+  stylebookElToTag: WeakMap<Element, string>;
+  showAddBreakpointForm: boolean;
+  addBreakpointPreview: string;
+  layoutSelection: unknown;
+  leftTab: string;
+  leftPanelCollapsed: boolean;
+  rightPanelCollapsed: boolean;
+  autosaveTimer: ReturnType<typeof setTimeout> | null;
+  _layersCollapsed: Set<string> | null;
+  [key: string]: unknown;
+}
 
-/** @type {ViewState} */
-export const view = {
+export const view: ViewState = {
   // Canvas infrastructure
   panzoomWrap: null,
   renderGeneration: 0,

package/src/workspace/{workspace.js → workspace.ts}

@@ -1,53 +1,50 @@
-import { reactive, computed } from "../reactivity.js";
-import { createTab, disposeTab } from "../tabs/tab.js";
+import { reactive, computed } from "../reactivity";
+import { createTab, disposeTab } from "../tabs/tab";
+import type { Tab } from "../tabs/tab";
 
-/**
- * @typedef {import("../tabs/tab.js").Tab} Tab
- *
- * @typedef {import("../files/components.js").ComponentEntry} ComponentEntry
- *
- * @typedef {{ name: string; path: string; type: string }} FileEntry
- */
+import type { ComponentEntry } from "../files/components";
+import type { JxStyle, JxMutableNode } from "@jxsuite/schema/types";
+
+interface FileEntry {
+  name: string;
+  path: string;
+  type: string;
+}
 
 export const workspace = reactive({
   /** @type {string | null} */
-  projectRoot: null,
+  projectRoot: null as string | null,
   /** @type {object | null} */
-  projectConfig: null,
+  projectConfig: null as object | null,
   /** @type {ComponentEntry[]} */
-  componentRegistry: [],
+  componentRegistry: [] as ComponentEntry[],
   /** @type {JxMutableNode | null} */
-  clipboard: null,
+  clipboard: null as JxMutableNode | null,
   /** @type {JxStyle | null} */
-  styleClipboard: null,
+  styleClipboard: null as JxStyle | null,
   fileTree: {
     /** @type {Map<string, FileEntry[]>} */
-    dirs: new Map(),
+    dirs: new Map<string, FileEntry[]>(),
     /** @type {Set<string>} */
-    expanded: new Set(),
+    expanded: new Set<string>(),
     /** @type {string | null} */
-    selectedPath: null,
+    selectedPath: null as string | null,
     searchQuery: "",
   },
   /** @type {Map<string, Tab>} */
-  tabs: new Map(),
+  tabs: new Map<string, Tab>(),
   /** @type {string[]} */
-  tabOrder: [],
+  tabOrder: [] as string[],
   /** @type {string | null} */
-  activeTabId: null,
+  activeTabId: null as string | null,
   ui: {
     activityBar: "files",
   },
 });
 
-/** @type {import("@vue/reactivity").ComputedRef<Tab>} */
-export const activeTab = /** @type {import("@vue/reactivity").ComputedRef<Tab>} */ (
-  /** @type {unknown} */ (
-    computed(() =>
-      workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
-    )
-  )
-);
+export const activeTab = computed(() =>
+  workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
+) as unknown as import("@vue/reactivity").ComputedRef<Tab | null>;
 
 /**
  * Open a new tab and make it active.
@@ -63,7 +60,15 @@ export const activeTab = /** @type {import("@vue/reactivity").ComputedRef<Tab>}
  * }} opts
  * @returns {Tab}
  */
-export function openTab(opts) {
+export function openTab(opts: {
+  id: string;
+  documentPath?: string | null;
+  fileHandle?: FileSystemFileHandle | null;
+  document: Record<string, unknown>;
+  frontmatter?: Record<string, unknown>;
+  sourceFormat?: string | null;
+  capabilities?: { modes?: string[] };
+}) {
   const tab = createTab(opts);
   workspace.tabs.set(tab.id, tab);
   workspace.tabOrder.push(tab.id);
@@ -76,7 +81,7 @@ export function openTab(opts) {
  *
  * @param {string} tabId
  */
-export function closeTab(tabId) {
+export function closeTab(tabId: string) {
   const tab = workspace.tabs.get(tabId);
   if (!tab) return;
   disposeTab(tab);
@@ -111,7 +116,13 @@ export function closeAllTabs() {
  * }} newTabOpts
  * @returns {import("../tabs/tab.js").Tab}
  */
-export function replaceAllTabs(newTabOpts) {
+export function replaceAllTabs(newTabOpts: {
+  id: string;
+  documentPath?: string | null;
+  document: Record<string, unknown>;
+  frontmatter?: Record<string, unknown>;
+  sourceFormat?: string | null;
+}) {
   const oldIds = [...workspace.tabs.keys()];
   const oldTabs = [...workspace.tabs.values()];
 
@@ -136,7 +147,7 @@ export function replaceAllTabs(newTabOpts) {
  *
  * @param {string} tabId
  */
-export function activateTab(tabId) {
+export function activateTab(tabId: string) {
   if (workspace.tabs.has(tabId)) workspace.activeTabId = tabId;
 }
 
@@ -148,7 +159,7 @@ export function activateTab(tabId) {
  * @param {string} newId
  * @param {string} newDocumentPath
  */
-export function renameTab(oldId, newId, newDocumentPath) {
+export function renameTab(oldId: string, newId: string, newDocumentPath: string) {
   const tab = workspace.tabs.get(oldId);
   if (!tab) return;
   tab.id = newId;

package/src/panels/dnd.js

@@ -1,426 +0,0 @@
-/**
- * DnD registration functions — extracted from studio.js (Phase 4). Registers drag-and-drop behavior
- * on layer rows, component cards, and element cards.
- */
-
-/**
- * @typedef {{ element: HTMLElement; input: { clientX: number; clientY: number } }} DragCanDragArgs
- *
- * @typedef {{ source: { data: Record<string, unknown>; element: HTMLElement } }} DragDropSourceArgs
- *
- * @typedef {{ self: { data: Record<string, unknown> } }} DragSelfArgs
- *
- * @typedef {{
- *   source: { data: Record<string, unknown>; element: HTMLElement };
- *   location: { current: { dropTargets: { data: Record<string, unknown> }[] } };
- * }} DragMonitorDropArgs
- */
-
-import {
-  draggable,
-  dropTargetForElements,
-  monitorForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import {
-  attachInstruction,
-  extractInstruction,
-} from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-
-import {
-  leftPanel,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
-  isAncestor,
-  renderOnly,
-} from "../store.js";
-import { transact, transactDoc, mutateMoveNode, mutateInsertNode } from "../tabs/transact.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { componentRegistry, computeRelativePath } from "../files/components.js";
-import { renderComponentPreview } from "./stylebook-panel.js";
-import { defaultDef, unsafeTags } from "./shared.js";
-
-/** Register DnD on layer rows — called from left-panel.js after render */
-export function registerLayersDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {HTMLElement | null} */ (
-      leftPanel?.querySelector(".layers-container")
-    );
-    if (!container) return;
-
-    /** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll("[data-dnd-row]")).forEach(
-      (row) => {
-        const rowPath = /** @type {JxPath} */ (
-          /** @type {string} */ (row.dataset.path)
-            .split("/")
-            .map((/** @type {string} */ 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({
-            element: row,
-            canDrag(/** @type {DragCanDragArgs} */ { element: _el, input }) {
-              const target = /** @type {HTMLElement} */ (
-                document.elementFromPoint(input.clientX, input.clientY)
-              );
-              if (target?.closest(".layer-actions")) return false;
-              return true;
-            },
-            getInitialData() {
-              return { type: "tree-node", path: rowPath };
-            },
-            onDragStart() {
-              row.classList.add("dragging");
-              view.layerDragSourceHeight = row.offsetHeight;
-              if (isExpanded) {
-                hideDescendantRows(row, container);
-              }
-            },
-            onDrop() {
-              row.classList.remove("dragging");
-              if (isExpanded) {
-                renderOnly("leftPanel");
-              }
-            },
-          }),
-          dropTargetForElements({
-            element: row,
-            canDrop(/** @type {DragDropSourceArgs} */ { source }) {
-              const srcPath = /** @type {JxPath | undefined} */ (source.data.path);
-              if (srcPath && isAncestor(srcPath, rowPath)) return false;
-              return true;
-            },
-            getData(/** @type {any} */ { input, element }) {
-              return /** @type {Record<string | symbol, unknown>} */ (
-                attachInstruction(
-                  { path: rowPath },
-                  {
-                    input,
-                    element,
-                    currentLevel: rowDepth,
-                    indentPerLevel: 16,
-                    mode: isExpanded ? "expanded" : "standard",
-                    block: isVoid ? ["make-child"] : [],
-                  },
-                )
-              );
-            },
-            onDragEnter(/** @type {DragSelfArgs} */ { self }) {
-              showLayerDropGap(row, self.data, container);
-            },
-            onDrag(/** @type {DragSelfArgs} */ { self }) {
-              showLayerDropGap(row, self.data, container);
-            },
-            onDragLeave() {
-              clearLayerDropGap(container);
-            },
-            onDrop() {
-              clearLayerDropGap(container);
-            },
-          }),
-        );
-        view.dndCleanups.push(cleanup);
-      },
-    );
-
-    // Global monitor
-    const monitorCleanup = monitorForElements({
-      onDrop(/** @type {DragMonitorDropArgs} */ { source, location }) {
-        clearLayerDropGap(container);
-        const target = location.current.dropTargets[0];
-        if (!target) return;
-        const instruction = extractInstruction(target.data);
-        if (!instruction || instruction.type === "instruction-blocked") return;
-        const srcData = source.data;
-        const targetPath = /** @type {JxPath} */ (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);
-  });
-}
-
-/** Register DnD on component rows — called from renderLeftPanel when tab=components */
-export function registerComponentsDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {HTMLElement | null} */ (
-      leftPanel?.querySelector(".components-section")
-    );
-    if (!container) return;
-
-    /** @type {NodeListOf<HTMLElement>} */ (
-      container.querySelectorAll("[data-component-tag]")
-    ).forEach((row) => {
-      const tagName = row.dataset.componentTag;
-      if (!tagName) return;
-      const comp = componentRegistry.find(
-        (/** @type {import("../files/components.js").ComponentEntry} */ c) => c.tagName === tagName,
-      );
-      if (!comp) return;
-
-      // Fill preview with live rendered component
-      const preview = row.querySelector(".element-card-preview");
-      if (preview && !preview.querySelector(tagName)) {
-        renderComponentPreview(comp).then((/** @type {HTMLElement} */ el) => {
-          preview.textContent = "";
-          preview.appendChild(el);
-        });
-      }
-
-      const instanceDef = {
-        tagName: comp.tagName,
-        $props: comp.props
-          ? Object.fromEntries(
-              comp.props.map(
-                (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
-                  p.name,
-                  p.default !== undefined ? p.default : "",
-                ],
-              ),
-            )
-          : {},
-      };
-      const cleanup = draggable({
-        element: row,
-        getInitialData() {
-          return { type: "block", fragment: structuredClone(instanceDef) };
-        },
-      });
-      view.dndCleanups.push(cleanup);
-    });
-  });
-}
-
-/** Register DnD on element (HTML block) rows */
-export function registerElementsDnD() {
-  requestAnimationFrame(() => {
-    const container = /** @type {HTMLElement | null} */ (leftPanel?.querySelector(".panel-body"));
-    if (!container) return;
-    /** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll("[data-block-tag]")).forEach(
-      (row) => {
-        const tag = /** @type {string} */ (row.dataset.blockTag);
-        const preview = row.querySelector(".element-card-preview");
-        if (preview && !preview.firstChild) {
-          const el = document.createElement(unsafeTags.has(tag) ? "span" : tag);
-          el.textContent = tag;
-          preview.appendChild(el);
-        }
-        const def = defaultDef(tag);
-        const cleanup = draggable({
-          element: row,
-          getInitialData() {
-            return { type: "block", fragment: structuredClone(def) };
-          },
-        });
-        view.dndCleanups.push(cleanup);
-      },
-    );
-  });
-}
-
-/**
- * Hide descendant rows of the dragged item so it appears collapsed during drag.
- *
- * @param {HTMLElement} parentRow
- * @param {HTMLElement} 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 {HTMLElement} */ (r).dataset.path?.startsWith(prefix)) {
-      /** @type {HTMLElement} */ (r).style.display = "none";
-    }
-  }
-}
-
-/**
- * @param {HTMLElement} rowEl
- * @param {Record<string, unknown>} data
- * @param {HTMLElement} container
- */
-export function showLayerDropGap(rowEl, data, container) {
-  const instruction = extractInstruction(data);
-
-  // Clear previous drop-target highlight
-  if (view._currentDropTargetRow && view._currentDropTargetRow !== rowEl) {
-    view._currentDropTargetRow.classList.remove("drop-target");
-  }
-
-  if (!instruction || instruction.type === "instruction-blocked") {
-    clearLayerDropGap(container);
-    return;
-  }
-
-  if (instruction.type === "make-child") {
-    clearLayerDropGap(container);
-    rowEl.classList.add("drop-target");
-    view._currentDropTargetRow = rowEl;
-    return;
-  }
-
-  rowEl.classList.remove("drop-target");
-  view._currentDropTargetRow = rowEl;
-
-  // Shift rows to create gap
-  const rows = Array.from(container.querySelectorAll(".layers-tree .layer-row"));
-  const targetIdx = rows.indexOf(rowEl);
-  const gap = view.layerDragSourceHeight;
-
-  for (let i = 0; i < rows.length; i++) {
-    if (/** @type {HTMLElement} */ (rows[i]).classList.contains("dragging")) continue;
-    if (instruction.type === "reorder-above") {
-      /** @type {HTMLElement} */ (rows[i]).style.transform =
-        i >= targetIdx ? `translateY(${gap}px)` : "";
-    } else {
-      /** @type {HTMLElement} */ (rows[i]).style.transform =
-        i > targetIdx ? `translateY(${gap}px)` : "";
-    }
-  }
-}
-
-/** @param {HTMLElement} container */
-export function clearLayerDropGap(container) {
-  if (view._currentDropTargetRow) {
-    view._currentDropTargetRow.classList.remove("drop-target");
-    view._currentDropTargetRow = null;
-  }
-  const rows = container.querySelectorAll(".layers-tree .layer-row");
-  for (const r of rows) /** @type {HTMLElement} */ (r).style.transform = "";
-}
-
-/**
- * Apply a DnD instruction to the state
- *
- * @param {{ type: string }} instruction
- * @param {Record<string, unknown>} srcData
- * @param {JxPath} targetPath
- */
-export function applyDropInstruction(instruction, srcData, targetPath) {
-  const doc = /** @type {JxMutableNode} */ (activeTab.value?.doc.document);
-  if (srcData.type === "tree-node") {
-    const fromPath = /** @type {JxPath} */ (srcData.path);
-    const targetParent = /** @type {JxPath} */ (parentElementPath(targetPath));
-    const targetIdx = /** @type {number} */ (childIndex(targetPath));
-
-    switch (instruction.type) {
-      case "reorder-above":
-        transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetParent, targetIdx));
-        break;
-      case "reorder-below":
-        transactDoc(activeTab.value, (t) =>
-          mutateMoveNode(t, fromPath, targetParent, targetIdx + 1),
-        );
-        break;
-      case "make-child": {
-        const target = getNodeAtPath(doc, targetPath);
-        const len = target?.children?.length || 0;
-        transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
-        break;
-      }
-    }
-  } else if (srcData.type === "block") {
-    const targetParent = /** @type {JxPath} */ (parentElementPath(targetPath));
-    const targetIdx = /** @type {number} */ (childIndex(targetPath));
-
-    switch (instruction.type) {
-      case "reorder-above":
-        transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(
-            t,
-            targetParent,
-            targetIdx,
-            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
-          ),
-        );
-        break;
-      case "reorder-below":
-        transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(
-            t,
-            targetParent,
-            targetIdx + 1,
-            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
-          ),
-        );
-        break;
-      case "make-child": {
-        const target = getNodeAtPath(doc, targetPath);
-        const len = target?.children?.length || 0;
-        transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(
-            t,
-            targetPath,
-            len,
-            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
-          ),
-        );
-        break;
-      }
-    }
-
-    // Auto-import to $elements if the dropped block is a custom component
-    const fragment = /** @type {JxMutableNode | undefined} */ (srcData.fragment);
-    const tag = fragment?.tagName;
-    if (tag && tag.includes("-")) {
-      const comp = componentRegistry.find(
-        (/** @type {import("../files/components.js").ComponentEntry} */ c) => c.tagName === tag,
-      );
-      if (comp) {
-        const tab = activeTab.value;
-        const elements = tab?.doc.document?.$elements || [];
-        if (comp.source === "npm") {
-          const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
-          if (!specifier) return;
-          const alreadyImported = elements.some(
-            (/** @type {JxMutableNode | string | { $ref: string }} */ e) =>
-              e === specifier || e === comp.package,
-          );
-          if (!alreadyImported) {
-            transact(activeTab.value, (/** @type {JxMutableNode} */ doc) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push(specifier);
-            });
-          }
-        } else {
-          const alreadyImported = elements.some(
-            (/** @type {JxMutableNode | string | { $ref: string }} */ e) => {
-              const ref = typeof e === "object" && e !== null ? e.$ref : undefined;
-              return (
-                ref &&
-                (ref === `./${comp.path}` ||
-                  ref.endsWith(/** @type {string} */ (comp.path.split("/").pop())))
-              );
-            },
-          );
-          if (!alreadyImported) {
-            const relPath = computeRelativePath(tab?.documentPath, comp.path);
-            transact(activeTab.value, (/** @type {JxMutableNode} */ doc) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push({ $ref: relPath });
-            });
-          }
-        }
-      }
-    }
-  }
-}