@jxsuite/studio 0.7.0 → 0.8.0

package/src/panels/dnd.js

@@ -0,0 +1,332 @@
+/**
+ * DnD registration functions — extracted from studio.js (Phase 4). Registers drag-and-drop behavior
+ * on layer rows, component cards, and element cards.
+ */
+
+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 {
+  getState,
+  update,
+  leftPanel,
+  moveNode,
+  insertNode,
+  applyMutation,
+  getNodeAtPath,
+  parentElementPath,
+  childIndex,
+  isAncestor,
+} from "../store.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 {any} */ (leftPanel)?.querySelector(".layers-container");
+    if (!container) return;
+
+    container.querySelectorAll("[data-dnd-row]").forEach(
+      /** @param {any} row */ (row) => {
+        const rowPath = /** @type {string} */ (row.dataset.path)
+          .split("/")
+          .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 cleanup = combine(
+          draggable({
+            element: row,
+            canDrag(/** @type {any} */ { 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;
+            },
+            onDrop() {
+              row.classList.remove("dragging");
+            },
+          }),
+          dropTargetForElements({
+            element: row,
+            canDrop(/** @type {any} */ { source }) {
+              const srcPath = source.data.path;
+              if (srcPath && isAncestor(srcPath, rowPath)) return false;
+              return true;
+            },
+            getData(/** @type {any} */ { input, element }) {
+              return attachInstruction(
+                { path: rowPath },
+                /** @type {any} */ ({
+                  input,
+                  element,
+                  currentLevel: rowDepth,
+                  indentPerLevel: 16,
+                  block: isVoid ? ["make-child"] : [],
+                }),
+              );
+            },
+            onDragEnter(/** @type {any} */ { self }) {
+              showLayerDropGap(row, self.data, container);
+            },
+            onDrag(/** @type {any} */ { self }) {
+              showLayerDropGap(row, self.data, container);
+            },
+            onDragLeave() {
+              clearLayerDropGap(container);
+            },
+            onDrop() {
+              clearLayerDropGap(container);
+            },
+          }),
+        );
+        view.dndCleanups.push(cleanup);
+      },
+    );
+
+    // Global monitor
+    const monitorCleanup = monitorForElements({
+      onDrop(/** @type {any} */ { 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 = target.data.path;
+        applyDropInstruction(instruction, srcData, targetPath);
+      },
+    });
+    view.dndCleanups.push(monitorCleanup);
+  });
+}
+
+/** Register DnD on component rows — called from renderLeftPanel when tab=components */
+export function registerComponentsDnD() {
+  requestAnimationFrame(() => {
+    const container = /** @type {any} */ (leftPanel)?.querySelector(".components-section");
+    if (!container) return;
+
+    container.querySelectorAll("[data-component-tag]").forEach(
+      /** @param {any} row */ (row) => {
+        const tagName = row.dataset.componentTag;
+        if (!tagName) return;
+        const comp = componentRegistry.find(/** @param {any} c */ (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 {any} */ el) => {
+            preview.textContent = "";
+            preview.appendChild(el);
+          });
+        }
+
+        const instanceDef = {
+          tagName: comp.tagName,
+          $props: Object.fromEntries(
+            comp.props.map((/** @type {any} */ 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 {any} */ (leftPanel)?.querySelector(".panel-body");
+    if (!container) return;
+    container.querySelectorAll("[data-block-tag]").forEach(
+      /** @param {any} row */ (row) => {
+        const tag = 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);
+      },
+    );
+  });
+}
+
+/**
+ * @param {any} rowEl
+ * @param {any} data
+ * @param {any} 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 {any} */ (rows[i]).classList.contains("dragging")) continue;
+    if (instruction.type === "reorder-above") {
+      /** @type {any} */ (rows[i]).style.transform = i >= targetIdx ? `translateY(${gap}px)` : "";
+    } else {
+      /** @type {any} */ (rows[i]).style.transform = i > targetIdx ? `translateY(${gap}px)` : "";
+    }
+  }
+}
+
+/** @param {any} 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 {any} */ (r).style.transform = "";
+}
+
+/**
+ * Apply a DnD instruction to the state
+ *
+ * @param {any} instruction
+ * @param {any} srcData
+ * @param {any} targetPath
+ */
+export function applyDropInstruction(instruction, srcData, targetPath) {
+  const S = getState();
+  if (srcData.type === "tree-node") {
+    const fromPath = srcData.path;
+    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
+    const targetIdx = /** @type {number} */ (childIndex(targetPath));
+
+    switch (instruction.type) {
+      case "reorder-above":
+        update(moveNode(S, fromPath, targetParent, targetIdx));
+        break;
+      case "reorder-below":
+        update(moveNode(S, fromPath, targetParent, targetIdx + 1));
+        break;
+      case "make-child": {
+        const target = getNodeAtPath(S.document, targetPath);
+        const len = target?.children?.length || 0;
+        update(moveNode(S, fromPath, targetPath, len));
+        break;
+      }
+    }
+  } else if (srcData.type === "block") {
+    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
+    const targetIdx = /** @type {number} */ (childIndex(targetPath));
+
+    switch (instruction.type) {
+      case "reorder-above":
+        update(insertNode(S, targetParent, targetIdx, structuredClone(srcData.fragment)));
+        break;
+      case "reorder-below":
+        update(insertNode(S, targetParent, targetIdx + 1, structuredClone(srcData.fragment)));
+        break;
+      case "make-child": {
+        const target = getNodeAtPath(S.document, targetPath);
+        const len = target?.children?.length || 0;
+        update(insertNode(S, targetPath, len, structuredClone(srcData.fragment)));
+        break;
+      }
+    }
+
+    // Auto-import to $elements if the dropped block is a custom component
+    const tag = srcData.fragment?.tagName;
+    if (tag && tag.includes("-")) {
+      const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
+      if (comp) {
+        const currentS = getState();
+        const elements = currentS.document.$elements || [];
+        if (comp.source === "npm") {
+          const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
+          const alreadyImported = elements.some(
+            (/** @type {any} */ e) => e === specifier || e === comp.package,
+          );
+          if (!alreadyImported) {
+            update(
+              applyMutation(currentS, (/** @type {any} */ doc) => {
+                if (!doc.$elements) doc.$elements = [];
+                doc.$elements.push(specifier);
+              }),
+            );
+          }
+        } else {
+          const alreadyImported = elements.some(
+            (/** @type {any} */ e) =>
+              e.$ref &&
+              (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())),
+          );
+          if (!alreadyImported) {
+            const relPath = computeRelativePath(currentS.documentPath, comp.path);
+            update(
+              applyMutation(currentS, (/** @type {any} */ doc) => {
+                if (!doc.$elements) doc.$elements = [];
+                doc.$elements.push({ $ref: relPath });
+              }),
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/src/panels/editors.js

@@ -0,0 +1,196 @@
+/**
+ * Editor panels — extracted from studio.js (Phase 4g). Monaco-based function editor (JS mode) and
+ * completion provider for state scope variables.
+ */
+
+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,
+  update,
+  renderOnly,
+  canvasWrap,
+  canvasPanels,
+  updateDef,
+  updateProperty,
+  getNodeAtPath,
+} from "../store.js";
+import { view } from "../view.js";
+import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
+
+function getFunctionBody(/** @type {any} */ editing) {
+  const S = getState();
+  if (editing.type === "def") {
+    return S.document.state?.[editing.defName]?.body || "";
+  } else if (editing.type === "event") {
+    const node = getNodeAtPath(S.document, editing.path);
+    return node?.[editing.eventKey]?.body || "";
+  }
+  return "";
+}
+
+export function renderFunctionEditor() {
+  const S = getState();
+  const editing = S.ui.editingFunction;
+
+  // If editor already exists and matches current target, just sync value
+  if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
+    const body = getFunctionBody(editing);
+    const currentVal = view.functionEditor.getValue();
+    if (currentVal !== body) {
+      view.functionEditor._ignoreNextChange = true;
+      view.functionEditor.setValue(body);
+    }
+    return;
+  }
+
+  // Dispose previous editors
+  if (view.functionEditor) {
+    view.functionEditor.dispose();
+    view.functionEditor = null;
+  }
+  if (view.monacoEditor) {
+    view.monacoEditor.dispose();
+    view.monacoEditor = null;
+  }
+
+  // Clean up canvas DnD and event handlers
+  for (const fn of view.canvasDndCleanups) fn();
+  view.canvasDndCleanups = [];
+  for (const fn of view.canvasEventCleanups) fn();
+  view.canvasEventCleanups = [];
+  canvasPanels.length = 0;
+
+  litRender(nothing, canvasWrap);
+  canvasWrap.style.padding = "0";
+
+  // Toolbar breadcrumb handles context display — re-render it
+  renderOnly("toolbar");
+
+  // Editor container
+  /** @type {HTMLDivElement | null} */
+  let editorContainer = null;
+  litRender(
+    html`<div
+      class="source-editor"
+      ${ref((el) => {
+        if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
+      })}
+    ></div>`,
+    canvasWrap,
+  );
+
+  const body = getFunctionBody(editing);
+  const args = getFunctionArgs(editing, S);
+
+  view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
+    value: body,
+    language: "javascript",
+    theme: "vs-dark",
+    automaticLayout: true,
+    minimap: { enabled: false },
+    fontSize: 12,
+    fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+    lineNumbers: "on",
+    scrollBeyondLastLine: false,
+    wordWrap: "on",
+    tabSize: 2,
+  });
+  view.functionEditor._editingTarget = JSON.stringify(editing);
+
+  // Format on open — show pretty-printed code, then run initial lint
+  codeService("format", { code: body, args }).then((result) => {
+    if (result?.code != null && view.functionEditor) {
+      view.functionEditor._ignoreNextChange = true;
+      view.functionEditor.setValue(result.code);
+    }
+  });
+  codeService("lint", { code: body, args }).then((result) => {
+    if (result?.diagnostics && view.functionEditor)
+      setLintMarkers(view.functionEditor, result.diagnostics);
+  });
+
+  // Debounced sync back to state + lint on edit
+  /** @type {any} */
+  let syncDebounce;
+  /** @type {any} */
+  let lintDebounce;
+  let lintGen = 0;
+  view.functionEditor.onDidChangeModelContent(() => {
+    if (view.functionEditor._ignoreNextChange) {
+      view.functionEditor._ignoreNextChange = false;
+      return;
+    }
+
+    clearTimeout(syncDebounce);
+    syncDebounce = setTimeout(() => {
+      const S = getState();
+      const newBody = view.functionEditor.getValue();
+      if (editing.type === "def") {
+        update(updateDef(S, editing.defName, { body: newBody }));
+      } else if (editing.type === "event") {
+        const node = getNodeAtPath(S.document, editing.path);
+        const current = node?.[editing.eventKey] || {};
+        update(
+          updateProperty(S, editing.path, editing.eventKey, {
+            ...current,
+            $prototype: "Function",
+            body: newBody,
+          }),
+        );
+      }
+      renderOnly("leftPanel");
+    }, 500);
+
+    clearTimeout(lintDebounce);
+    lintDebounce = setTimeout(() => {
+      const gen = ++lintGen;
+      const currentCode = view.functionEditor.getValue();
+      codeService("lint", { code: currentCode, args }).then((result) => {
+        if (gen !== lintGen) return;
+        if (result?.diagnostics && view.functionEditor)
+          setLintMarkers(view.functionEditor, result.diagnostics);
+      });
+    }, 750);
+  });
+}
+
+// Register Monaco JS completion provider for state scope variables (once)
+export function registerFunctionCompletions() {
+  if (view._completionRegistered) return;
+  view._completionRegistered = true;
+  monaco.languages.registerCompletionItemProvider("javascript", {
+    triggerCharacters: ["."],
+    provideCompletionItems(model, position) {
+      const S = getState();
+      const defs = S?.document?.state || {};
+      const word = model.getWordUntilPosition(position);
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn,
+        endColumn: word.endColumn,
+      };
+
+      const suggestions = Object.entries(defs).map(([key, def]) => {
+        let kind = monaco.languages.CompletionItemKind.Variable;
+        if (
+          /** @type {any} */ (def)?.$prototype === "Function" ||
+          /** @type {any} */ (def)?.$handler
+        )
+          kind = monaco.languages.CompletionItemKind.Function;
+        else if (/** @type {any} */ (def)?.$prototype)
+          kind = monaco.languages.CompletionItemKind.Property;
+        return {
+          label: `state.${key}`,
+          kind,
+          insertText: `state.${key}`,
+          range,
+        };
+      });
+      return { suggestions };
+    },
+  });
+}

package/src/panels/left-panel.js

@@ -20,6 +20,7 @@ import { ensureLitState } from "./shared.js";
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
 import { renderElementsTemplate } from "./elements-panel.js";
+import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -65,8 +66,8 @@ function _render() {
     content =
       _ctx.getCanvasMode() === "settings"
         ? renderStylebookLayersTemplate({
-            selectStylebookTag: _ctx.selectStylebookTag,
-            stylebookMeta: _ctx.stylebookMeta,
+            selectStylebookTag,
+            stylebookMeta,
           })
         : renderLayersTemplate({
             navigateToComponent: _ctx.navigateToComponent,