@jxsuite/studio 0.33.0 → 0.35.0

package/src/panels/panel-events.ts

@@ -1,306 +0,0 @@
-/// <reference lib="dom" />
-/**
- * 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 {
-  childIndex,
-  elToPath,
-  getNodeAtPath,
-  parentElementPath,
-  pathsEqual,
-  renderOnly,
-  updateUi,
-} from "../store";
-import { activeTab } from "../workspace/workspace";
-import { view } from "../view";
-import { isEditableBlock, isEditing, stopEditing } from "../editor/inline-edit";
-import { showContextMenu } from "../editor/context-menu";
-import * as insertionHelper from "../editor/insertion-helper";
-import { defaultDef } from "../panels/shared";
-import {
-  bubbleInlinePath,
-  effectiveZoom,
-  findCanvasElement,
-  panelMediaToActiveMedia,
-} from "../canvas/canvas-helpers";
-import { activeLayoutPath, layoutElements } from "../canvas/canvas-live-render";
-import type { CanvasPanel } from "./canvas-dnd";
-import type { JxPath } from "../state";
-
-interface PanelEventsCtx {
-  getCanvasMode: () => string;
-  enterInlineEdit: (el: HTMLElement, path: JxPath) => void;
-  navigateToComponent: (path: string) => void;
-}
-
-let _ctx: PanelEventsCtx | null = null;
-
-/**
- * Initialize the panel events module.
- *
- * @param {PanelEventsCtx} ctx
- */
-export function initPanelEvents(ctx: PanelEventsCtx) {
-  _ctx = ctx;
-}
-
-/** @param {import("../canvas/canvas-render.js").CanvasPanel} panel */
-export function registerPanelEvents(panel: CanvasPanel) {
-  const ctx = _ctx as PanelEventsCtx;
-  const canvas = panel.canvas as HTMLElement;
-  const overlayClk = panel.overlayClk as HTMLElement;
-  const { mediaName } = panel;
-  const ac = new AbortController();
-  const opts = { signal: ac.signal };
-  view.canvasEventCleanups.push(() => ac.abort());
-
-  /** @param {() => unknown} fn */
-  function withPanelPointerEvents(fn: () => unknown) {
-    const els = canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
-    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",
-    (e: MouseEvent) => {
-      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 tab = activeTab.value;
-      const canvasMode = ctx.getCanvasMode();
-
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      ) as Element[];
-
-      if (!tab) {
-        return;
-      }
-
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          // Layout element clicked — show layout info instead of selecting in page doc
-          if (layoutElements.has(el)) {
-            view.layoutSelection = { el, layoutPath: activeLayoutPath };
-            tab.session.selection = null;
-            renderOnly("rightPanel");
-            return;
-          }
-          view.layoutSelection = null;
-
-          const originalPath = elToPath.get(el);
-          if (originalPath) {
-            const path = bubbleInlinePath(tab.doc.document, originalPath);
-            const newMedia = panelMediaToActiveMedia(mediaName);
-
-            const resolvedEl = (
-              path === originalPath
-                ? el
-                : (findCanvasElement(path, canvas) as HTMLElement | null) || el
-            ) as HTMLElement;
-
-            if (
-              pathsEqual(path, tab.session.selection) &&
-              isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || tab.doc.mode === "content")
-            ) {
-              tab.session.ui.activeMedia = newMedia;
-              ctx.enterInlineEdit(resolvedEl, path);
-              return;
-            }
-
-            if (canvasMode === "design" && tab.doc.mode !== "content") {
-              updateUi("pendingInlineEdit", { mediaName, path });
-              tab.session.ui.activeMedia = newMedia;
-              tab.session.selection = path;
-              return;
-            }
-
-            tab.session.ui.activeMedia = newMedia;
-            tab.session.selection = path;
-            return;
-          }
-        }
-      }
-      tab.session.selection = null;
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "dblclick",
-    (e: MouseEvent) => {
-      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 tab = activeTab.value;
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      ) as Element[];
-
-      if (!tab) {
-        return;
-      }
-
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          const originalPath = elToPath.get(el);
-          if (originalPath) {
-            const path = bubbleInlinePath(tab.doc.document, originalPath);
-            const resolvedEl = (
-              path === originalPath
-                ? el
-                : (findCanvasElement(path, canvas) as HTMLElement | null) || el
-            ) as HTMLElement;
-            if (isEditableBlock(resolvedEl)) {
-              const newMedia = panelMediaToActiveMedia(mediaName);
-              tab.session.ui.activeMedia = newMedia;
-              tab.session.selection = path;
-              ctx.enterInlineEdit(resolvedEl, path);
-              return;
-            }
-          }
-        }
-      }
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "contextmenu",
-    (e: MouseEvent) => {
-      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 tab = activeTab.value;
-      const elements = withPanelPointerEvents(() =>
-        document.elementsFromPoint(e.clientX, e.clientY),
-      ) as Element[];
-      for (const el of elements) {
-        if (canvas.contains(el) && el !== canvas) {
-          let path = elToPath.get(el);
-          if (path) {
-            path = bubbleInlinePath(tab?.doc.document, path);
-            showContextMenu(e, path, {
-              onEditComponent: ctx.navigateToComponent,
-            });
-            return;
-          }
-        }
-      }
-      e.preventDefault();
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "mousemove",
-    (e: MouseEvent) => {
-      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 tab = activeTab.value;
-      if (!tab) {
-        return;
-      }
-      const el = withPanelPointerEvents(() =>
-        document.elementFromPoint(e.clientX, e.clientY),
-      ) as Element | null;
-      if (el && canvas.contains(el) && el !== canvas) {
-        let path = elToPath.get(el);
-        if (path) {
-          path = bubbleInlinePath(tab.doc.document, path);
-          if (!pathsEqual(path, tab.session.hover)) {
-            tab.session.hover = path;
-            renderOnly("overlays");
-          }
-        }
-      } else if (tab.session.hover) {
-        tab.session.hover = null;
-        renderOnly("overlays");
-      }
-    },
-    opts,
-  );
-
-  overlayClk.addEventListener(
-    "mouseleave",
-    () => {
-      if (activeTab.value?.session.hover) {
-        activeTab.value.session.hover = null;
-        renderOnly("overlays");
-      }
-    },
-    opts,
-  );
-
-  insertionHelper.mount({
-    childIndex: (path: JxPath) => childIndex(path) ?? 0,
-    defaultDef,
-    effectiveZoom,
-    elToPath,
-    getCanvasMode: ctx.getCanvasMode,
-    getNodeAtPath,
-    panel: panel as unknown as Parameters<typeof insertionHelper.mount>[0]["panel"],
-    parentElementPath,
-    withPanelPointerEvents,
-  });
-  view.canvasEventCleanups.push(() => insertionHelper.unmount());
-}

package/src/panels/preview-render.ts

@@ -1,132 +0,0 @@
-/// <reference lib="dom" />
-/**
- * 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 { elToPath } from "../store";
-import { isMappedArray, isRef } from "@jxsuite/schema/guards";
-import { activeTab } from "../workspace/workspace";
-import { applyCanvasStyle } from "../utils/canvas-media";
-import { resolveDefaultForCanvas } from "../panels/signals-panel";
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-/**
- * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
- * breakpoint/feature overrides.
- *
- * @param {JxMutableNode | string | number | boolean | null | undefined} node
- * @param {JxPath} path
- * @param {HTMLElement} parent
- * @param {Set<string>} activeBreakpoints
- * @param {Record<string, boolean>} featureToggles
- */
-export function renderCanvasNode(
-  node: JxMutableNode | string | number | boolean | null | undefined,
-  path: JxPath,
-  parent: HTMLElement,
-  activeBreakpoints: Set<string>,
-  featureToggles: Record<string, boolean>,
-) {
-  if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
-    parent.append(document.createTextNode(String(node)));
-    return;
-  }
-  if (!node || typeof node !== "object") {
-    return;
-  }
-
-  // Array pseudo-element: render as a repeater perimeter at the array's own path, with a single
-  // Template instance inside (matches the edit-mode visual).
-  if (isMappedArray(node)) {
-    const wrapper = document.createElement("div");
-    wrapper.className = "repeater-perimeter";
-    elToPath.set(wrapper, path);
-    const template = node.map;
-    if (template && typeof template === "object") {
-      renderCanvasNode(template, [...path, "map"], wrapper, activeBreakpoints, featureToggles);
-    }
-    wrapper.style.pointerEvents = "none";
-    parent.append(wrapper);
-    return wrapper;
-  }
-
-  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 (isRef(node.textContent)) {
-    const tc = node.textContent;
-    const resolved = resolveDefaultForCanvas(tc, activeTab.value?.doc.document?.state);
-    el.textContent = typeof resolved === "string" ? resolved : null;
-    el.style.opacity = "0.7";
-    el.style.fontStyle = "italic";
-    el.title = `Bound: ${tc.$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 (isRef(val)) {
-          const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
-          el.setAttribute(attr, String(resolved ?? ""));
-        } else {
-          el.setAttribute(attr, String(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 (isMappedArray(node.children)) {
-    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.append(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:var(--font-mono);font-size:var(--spectrum-font-size-50,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:var(--radius);color:var(--danger);font-style:italic";
-    el.append(placeholder);
-  }
-
-  el.style.pointerEvents = "none";
-  parent.append(el);
-  return el;
-}

package/src/panels/pseudo-preview.ts

@@ -1,75 +0,0 @@
-/// <reference lib="dom" />
-/**
- * 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 { getNodeAtPath } from "../store";
-import { getNestedStyle } from "@jxsuite/schema/guards";
-import { activeTab } from "../workspace/workspace";
-import { view } from "../view";
-import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
-
-import type { JxStyle } from "@jxsuite/schema/types";
-
-const pseudoStyleHost = document.createElement("div");
-pseudoStyleHost.style.display = "contents";
-(document.querySelector("sp-theme") || document.body).append(pseudoStyleHost);
-
-export function updateForcedPseudoPreview() {
-  if (view.forcedStyleTag) {
-    view.forcedStyleTag.remove();
-    view.forcedStyleTag = null;
-  }
-  if (view.forcedAttrEl) {
-    delete view.forcedAttrEl.dataset.studioForced;
-    view.forcedAttrEl = null;
-  }
-
-  const tab = activeTab.value;
-  const sel = tab?.session.ui?.activeSelector;
-  if (!sel || !sel.startsWith(":") || !tab?.session.selection) {
-    return;
-  }
-
-  const panel = getActivePanel();
-  if (!panel) {
-    return;
-  }
-  const el = findCanvasElement(tab.session.selection, panel.canvas);
-  if (!el) {
-    return;
-  }
-
-  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
-  if (!node?.style) {
-    return;
-  }
-  const { activeMedia } = tab.session.ui;
-  const ctx: JxStyle = activeMedia
-    ? (getNestedStyle(node.style, `@${activeMedia}`) ?? {})
-    : node.style;
-  const rules = getNestedStyle(ctx, sel);
-  if (!rules) {
-    return;
-  }
-
-  const cssProps = Object.entries(rules)
-    .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
-    .map(
-      ([k, v]) =>
-        `${k.replaceAll(/[A-Z]/g, (c: string) => `-${c.toLowerCase()}`)}: ${v} !important`,
-    )
-    .join("; ");
-  if (!cssProps) {
-    return;
-  }
-
-  el.dataset.studioForced = "1";
-  view.forcedAttrEl = el;
-
-  const tag = document.createElement("style");
-  tag.textContent = `[data-studio-forced] { ${cssProps} }`;
-  pseudoStyleHost.append(tag);
-  view.forcedStyleTag = tag;
-}