@jxsuite/studio 0.8.0 → 0.10.1

package/src/panels/canvas-dnd.js

@@ -0,0 +1,154 @@
+/**
+ * Canvas DnD — extracted from studio.js (Phase 4m). Registers canvas elements as drag-and-drop
+ * targets using @atlaskit/pragmatic-drag-and-drop.
+ */
+
+import {
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+
+import {
+  getState,
+  elToPath,
+  canvasPanels,
+  getNodeAtPath,
+  VOID_ELEMENTS,
+  isAncestor,
+} from "../store.js";
+import { view } from "../view.js";
+import { applyDropInstruction } from "../panels/dnd.js";
+import { effectiveZoom } from "../canvas/canvas-helpers.js";
+
+/**
+ * Register all canvas elements in a panel as DnD drop targets.
+ *
+ * @param {any} panel
+ */
+export function registerPanelDnD(panel) {
+  const { canvas, dropLine } = panel;
+  const allEls = canvas.querySelectorAll("*");
+
+  const monitorCleanup = monitorForElements({
+    onDragStart() {
+      for (const el of canvas.querySelectorAll("*")) {
+        /** @type {any} */ (el).style.pointerEvents = "auto";
+      }
+      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
+    },
+    onDrag({ location }) {
+      view.lastDragInput = location.current.input;
+    },
+    onDrop() {
+      for (const p of canvasPanels) p.dropLine.style.display = "none";
+      view.lastDragInput = null;
+      for (const el of canvas.querySelectorAll("*")) {
+        /** @type {any} */ (el).style.pointerEvents = "none";
+      }
+      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
+    },
+  });
+  view.canvasDndCleanups.push(monitorCleanup);
+
+  const S = getState();
+  for (const el of allEls) {
+    const elPath = elToPath.get(el);
+    if (!elPath) continue;
+
+    const node = getNodeAtPath(S.document, elPath);
+    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
+
+    const cleanup = dropTargetForElements({
+      element: el,
+      canDrop({ source }) {
+        const srcPath = source.data.path;
+        if (srcPath && isAncestor(/** @type {any} */ (srcPath), elPath)) return false;
+        return true;
+      },
+      getData() {
+        return { path: elPath, _isVoid: isVoid };
+      },
+      onDragEnter() {
+        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      },
+      onDrag() {
+        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      },
+      onDragLeave() {
+        dropLine.style.display = "none";
+        el.classList.remove("canvas-drop-target");
+      },
+      onDrop({ source }) {
+        dropLine.style.display = "none";
+        el.classList.remove("canvas-drop-target");
+        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
+        if (!instruction) return;
+        applyDropInstruction(instruction, source.data, elPath);
+      },
+    });
+    view.canvasDndCleanups.push(cleanup);
+  }
+}
+
+/**
+ * @param {any} el
+ * @param {any} elPath
+ * @param {any} isVoid
+ */
+function getCanvasDropInstruction(el, elPath, isVoid) {
+  const rect = el.getBoundingClientRect();
+  if (!view.lastDragInput) return null;
+  const y = view.lastDragInput.clientY;
+  const relY = (y - rect.top) / rect.height;
+
+  if (elPath.length === 0) return { type: "make-child" };
+  if (isVoid) return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
+  if (relY < 0.25) return { type: "reorder-above" };
+  if (relY > 0.75) return { type: "reorder-below" };
+  return { type: "make-child" };
+}
+
+/**
+ * @param {any} el
+ * @param {any} elPath
+ * @param {any} isVoid
+ * @param {any} panel
+ */
+function showCanvasDropIndicator(el, elPath, isVoid, panel) {
+  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
+  const { dropLine, viewport } = panel;
+  if (!instruction) {
+    dropLine.style.display = "none";
+    return;
+  }
+
+  const scale = effectiveZoom();
+  const wrapRect = viewport.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
+  const width = elRect.width / scale;
+
+  if (instruction.type === "make-child") {
+    dropLine.style.display = "block";
+    dropLine.style.top = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
+    dropLine.style.left = `${left}px`;
+    dropLine.style.width = `${width}px`;
+    dropLine.style.height = `${elRect.height / scale}px`;
+    dropLine.className = "canvas-drop-indicator inside";
+    el.classList.add("canvas-drop-target");
+    return;
+  }
+
+  el.classList.remove("canvas-drop-target");
+  const top =
+    instruction.type === "reorder-above"
+      ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale
+      : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
+
+  dropLine.style.display = "block";
+  dropLine.style.top = `${top}px`;
+  dropLine.style.left = `${left}px`;
+  dropLine.style.width = `${width}px`;
+  dropLine.style.height = "2px";
+  dropLine.className = "canvas-drop-indicator line";
+}

package/src/panels/left-panel.js

@@ -15,7 +15,6 @@ import {
   applyMutation,
   updateFrontmatter,
 } from "../store.js";
-import { view } from "../view.js";
 import { ensureLitState } from "./shared.js";
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
@@ -96,7 +95,7 @@ function _render() {
       updateSession,
     });
   else if (tab === "data")
-    content = _ctx.renderDataExplorerTemplate(S.document.state, view.liveScope, {
+    content = _ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
       renderCanvas: _ctx.renderCanvas,
       renderLeftPanel: render,
       defCategory: _ctx.defCategory,

package/src/panels/overlays.js

@@ -6,6 +6,11 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
 import { view } from "../view.js";
+import {
+  findCanvasElement,
+  getActivePanel,
+  overlayBoxDescriptor,
+} from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -16,8 +21,7 @@ let _unsub = null;
 /**
  * Mount the overlays panel.
  *
- * @param {any} ctx — { effectiveZoom, getCanvasMode, isEditing, renderBlockActionBar,
- *   findCanvasElement, getActivePanel }
+ * @param {any} ctx — { getCanvasMode, isEditing, renderBlockActionBar }
  */
 export function mount(ctx) {
   _ctx = ctx;
@@ -32,24 +36,6 @@ export function unmount() {
   _ctx = null;
 }
 
-/**
- * @param {any} el
- * @param {any} type
- * @param {any} panel
- */
-function overlayBoxDescriptor(el, type, panel) {
-  const vpRect = panel.viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const scale = _ctx.effectiveZoom();
-  return {
-    cls: `overlay-box overlay-${type}`,
-    top: `${(elRect.top - vpRect.top + panel.viewport.scrollTop) / scale}px`,
-    left: `${(elRect.left - vpRect.left + panel.viewport.scrollLeft) / scale}px`,
-    width: `${elRect.width / scale}px`,
-    height: `${elRect.height / scale}px`,
-  };
-}
-
 export function render() {
   if (!_ctx) return;
   const S = getState();
@@ -98,12 +84,12 @@ export function render() {
     const boxes = [];
 
     if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = _ctx.findCanvasElement(S.hover, p.canvas);
+      const el = findCanvasElement(S.hover, p.canvas);
       if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
     }
 
-    if (S.selection && p === _ctx.getActivePanel()) {
-      const el = _ctx.findCanvasElement(S.selection, p.canvas);
+    if (S.selection && p === getActivePanel()) {
+      const el = findCanvasElement(S.selection, p.canvas);
       if (el) {
         const desc = overlayBoxDescriptor(el, "selection", p);
         if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";

package/src/panels/panel-events.js

@@ -0,0 +1,260 @@
+/**
+ * Panel events — extracted from studio.js (Phase 4m). Unified event handler system for canvas
+ * panels: click-to-select, double-click inline edit, context menu, hover tracking, insertion
+ * helper.
+ */
+
+import {
+  update,
+  updateUi,
+  selectNode,
+  hoverNode,
+  elToPath,
+  pathsEqual,
+  insertNode,
+  parentElementPath,
+  childIndex,
+  getNodeAtPath,
+  renderOnly,
+} from "../store.js";
+import { view } from "../view.js";
+import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
+import { showContextMenu } from "../editor/context-menu.js";
+import * as insertionHelper from "../editor/insertion-helper.js";
+import { defaultDef } from "../panels/shared.js";
+import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the panel events module.
+ *
+ * @param {{
+ *   getState: () => any;
+ *   setState: (s: any) => void;
+ *   getCanvasMode: () => string;
+ *   enterInlineEdit: (el: any, path: any) => void;
+ *   navigateToComponent: (path: any) => void;
+ * }} ctx
+ */
+export function initPanelEvents(ctx) {
+  _ctx = ctx;
+}
+
+/** @param {any} panel */
+export function registerPanelEvents(panel) {
+  const { canvas, overlayClk, mediaName } = panel;
+  const ac = new AbortController();
+  const opts = { signal: ac.signal };
+  view.canvasEventCleanups.push(() => ac.abort());
+
+  /** @param {any} fn */
+  function withPanelPointerEvents(fn) {
+    const els = canvas.querySelectorAll("*");
+    for (const el of els) el.style.pointerEvents = "auto";
+    overlayClk.style.display = "none";
+    const result = fn();
+    overlayClk.style.display = "";
+    for (const el of els) el.style.pointerEvents = "none";
+    return result;
+  }
+
+  overlayClk.addEventListener(
+    "click",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      if (isEditing()) {
+        stopEditing();
+      }
+
+      const S = _ctx.getState();
+      const canvasMode = _ctx.getCanvasMode();
+
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            let path = bubbleInlinePath(S.document, originalPath);
+            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+
+            if (
+              pathsEqual(path, S.selection) &&
+              isEditableBlock(resolvedEl) &&
+              (canvasMode === "edit" || S.mode === "content")
+            ) {
+              _ctx.setState(withMedia);
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+
+            if (canvasMode === "design" && S.mode !== "content") {
+              updateUi("pendingInlineEdit", { path, mediaName });
+              update(selectNode(withMedia, path));
+              return;
+            }
+
+            update(selectNode(withMedia, path));
+            return;
+          }
+        }
+      }
+      update(selectNode(S, null));
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "dblclick",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const canvasMode = _ctx.getCanvasMode();
+      if (canvasMode !== "edit" && canvasMode !== "design") return;
+
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            const path = bubbleInlinePath(S.document, originalPath);
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
+            if (isEditableBlock(resolvedEl)) {
+              const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+              update(selectNode(withMedia, path));
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+          }
+        }
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "contextmenu",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          let path = elToPath.get(el);
+          if (path) {
+            path = bubbleInlinePath(S.document, path);
+            showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
+            return;
+          }
+        }
+      }
+      e.preventDefault();
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mousemove",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      let S = _ctx.getState();
+      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+      if (el && canvas.contains(el) && el !== canvas) {
+        let path = elToPath.get(el);
+        if (path) {
+          path = bubbleInlinePath(S.document, path);
+          if (!pathsEqual(path, S.hover)) {
+            _ctx.setState(hoverNode(S, path));
+            renderOnly("overlays");
+          }
+        }
+      } else if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mouseleave",
+    () => {
+      const S = _ctx.getState();
+      if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  insertionHelper.mount({
+    getState: _ctx.getState,
+    update,
+    getCanvasMode: _ctx.getCanvasMode,
+    withPanelPointerEvents,
+    effectiveZoom: effectiveZoom,
+    defaultDef,
+    insertNode,
+    selectNode,
+    parentElementPath,
+    childIndex,
+    getNodeAtPath,
+    elToPath,
+    panel,
+  });
+  view.canvasEventCleanups.push(() => insertionHelper.unmount());
+}

package/src/panels/preview-render.js

@@ -0,0 +1,103 @@
+/**
+ * Preview render — extracted from studio.js (Phase 4m). Structural preview renderer that creates
+ * DOM from Jx node trees as a fallback when runtime rendering fails.
+ */
+
+import { getState, elToPath } from "../store.js";
+import { applyCanvasStyle } from "../utils/canvas-media.js";
+import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
+
+/**
+ * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
+ * breakpoint/feature overrides.
+ *
+ * @param {any} node
+ * @param {any} path
+ * @param {any} parent
+ * @param {any} activeBreakpoints
+ * @param {any} featureToggles
+ */
+export function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles) {
+  if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
+    parent.appendChild(document.createTextNode(String(node)));
+    return;
+  }
+  if (!node || typeof node !== "object") return;
+
+  const tag = node.tagName || "div";
+  const el = document.createElement(tag);
+
+  elToPath.set(el, path);
+
+  if (typeof node.textContent === "string") {
+    el.textContent = node.textContent;
+  } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
+    const resolved = resolveDefaultForCanvas(node.textContent, getState().document.state);
+    el.textContent = resolved;
+    el.style.opacity = "0.7";
+    el.style.fontStyle = "italic";
+    el.title = `Bound: ${node.textContent.$ref}`;
+  }
+
+  if (node.id) el.id = node.id;
+  if (node.className) el.className = node.className;
+
+  applyCanvasStyle(el, node.style, activeBreakpoints, featureToggles);
+
+  if (node.attributes && typeof node.attributes === "object") {
+    for (const [attr, val] of Object.entries(node.attributes)) {
+      try {
+        if (typeof val === "object" && val?.$ref) {
+          const resolved = resolveDefaultForCanvas(val, getState().document.state);
+          el.setAttribute(attr, resolved);
+        } else {
+          el.setAttribute(attr, val);
+        }
+      } catch {}
+    }
+  }
+
+  if (Array.isArray(node.children)) {
+    for (let i = 0; i < node.children.length; i++) {
+      renderCanvasNode(
+        node.children[i],
+        [...path, "children", i],
+        el,
+        activeBreakpoints,
+        featureToggles,
+      );
+    }
+  } else if (
+    node.children &&
+    typeof node.children === "object" &&
+    node.children.$prototype === "Array"
+  ) {
+    const template = node.children.map;
+    if (template && typeof template === "object") {
+      const wrapper = document.createElement("div");
+      wrapper.className = "repeater-perimeter";
+      elToPath.set(wrapper, [...path, "children"]);
+      renderCanvasNode(
+        template,
+        [...path, "children", "map"],
+        wrapper,
+        activeBreakpoints,
+        featureToggles,
+      );
+      el.appendChild(wrapper);
+    }
+  }
+
+  if (node.$switch && node.cases && typeof node.cases === "object") {
+    const keys = Object.keys(node.cases);
+    const placeholder = document.createElement("div");
+    placeholder.textContent = `[$switch: ${keys.join(" | ")}]`;
+    placeholder.style.cssText =
+      "font-family:monospace;font-size:11px;padding:6px 10px;background:color-mix(in srgb, var(--danger) 8%, transparent);border:1px dashed color-mix(in srgb, var(--danger) 40%, transparent);border-radius:4px;color:var(--danger);font-style:italic";
+    el.appendChild(placeholder);
+  }
+
+  el.style.pointerEvents = "none";
+  parent.appendChild(el);
+  return el;
+}

package/src/panels/pseudo-preview.js

@@ -0,0 +1,57 @@
+/**
+ * Pseudo-state preview — extracted from studio.js (Phase 4m). When a pseudo-selector (:hover,
+ * :focus, etc.) is active in the style sidebar, force those styles onto the selected element.
+ */
+
+import { getState, getNodeAtPath } from "../store.js";
+import { view } from "../view.js";
+import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers.js";
+
+const pseudoStyleHost = document.createElement("div");
+pseudoStyleHost.style.display = "contents";
+(document.querySelector("sp-theme") || document.body).appendChild(pseudoStyleHost);
+
+export function updateForcedPseudoPreview() {
+  if (view.forcedStyleTag) {
+    view.forcedStyleTag.remove();
+    view.forcedStyleTag = null;
+  }
+  if (view.forcedAttrEl) {
+    view.forcedAttrEl.removeAttribute("data-studio-forced");
+    view.forcedAttrEl = null;
+  }
+
+  const S = getState();
+  const sel = S.ui?.activeSelector;
+  if (!sel || !sel.startsWith(":") || !S.selection) return;
+
+  const panel = getActivePanel();
+  if (!panel) return;
+  const el = findCanvasElement(S.selection, panel.canvas);
+  if (!el) return;
+
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node?.style) return;
+  const activeTab = S.ui.activeMedia;
+  /** @type {any} */
+  const ctx = activeTab ? node.style[`@${activeTab}`] || {} : node.style;
+  const rules = ctx[sel];
+  if (!rules || typeof rules !== "object") return;
+
+  const cssProps = Object.entries(rules)
+    .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
+    .map(
+      ([k, v]) =>
+        `${k.replace(/[A-Z]/g, (/** @type {any} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
+    )
+    .join("; ");
+  if (!cssProps) return;
+
+  el.setAttribute("data-studio-forced", "1");
+  view.forcedAttrEl = el;
+
+  const tag = document.createElement("style");
+  tag.textContent = `[data-studio-forced] { ${cssProps} }`;
+  pseudoStyleHost.appendChild(tag);
+  view.forcedStyleTag = tag;
+}

package/src/panels/shared.js

@@ -31,7 +31,7 @@ export function ensureLitState(container) {
   const start = part._$startNode;
   const end = part._$endNode;
   const startBad = start && start.parentNode !== container;
-  const endBad = end && end !== container && end.parentNode !== container;
+  const endBad = (end && end !== container && end.parentNode !== container) || (!end && start);
   if (startBad || endBad) {
     console.warn("ensureLitState: clearing corrupted Lit state on", container.id || container);
     container.textContent = "";

package/src/platform.js

@@ -5,27 +5,30 @@
  * platform adapter at startup. All file I/O, project loading, and component discovery goes through
  * this interface.
  *
+ * Uses window.__jxPlatform so the platform can be registered from a separate script bundle (e.g.
+ * init.js) before studio.js loads.
+ *
  * See spec/desktop.md §3 for the full StudioPlatform interface.
  */
 
 /** @typedef {Record<string, any>} StudioPlatform */
 
-/** @type {StudioPlatform | null} */
-let _platform = null;
+/** @type {any} */
+const g = globalThis;
 
 /** @param {StudioPlatform} platform */
 export function registerPlatform(platform) {
-  _platform = platform;
+  g.__jxPlatform = platform;
 }
 
 /** @returns {StudioPlatform} */
 export function getPlatform() {
-  if (!_platform)
+  if (!g.__jxPlatform)
     throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
-  return _platform;
+  return g.__jxPlatform;
 }
 
 /** @returns {boolean} */
 export function hasPlatform() {
-  return _platform !== null;
+  return g.__jxPlatform != null;
 }