@jxsuite/studio 0.33.0 → 0.34.0

package/src/utils/edit-display.ts

@@ -10,6 +10,19 @@ import type { JxMutableNode } from "@jxsuite/schema/types";
 const mediaTags = new Set(["img", "video", "source", "iframe", "audio"]);
 const TRANSPARENT_PX =
   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+// A neutral, visible gray placeholder for image-like bindings in edit mode (e.g. a component `image`
+// Prop bound to ${...}). The component renders <img src={prop}> internally, so a transparent pixel
+// Would collapse to nothing — a gray SVG box reads as an intentional placeholder instead.
+const PLACEHOLDER_IMG =
+  "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Crect%20width='32'%20height='32'%20fill='%23d0d0d0'/%3E%3C/svg%3E";
+
+// Prop/attribute names that feed an <img>/background, so a ${...} binding would otherwise render a
+// Broken image in edit mode. Matched by exact name or common camelCase suffix (featuredImage, heroBg).
+const IMAGE_KEY_RE =
+  /(src|poster|image|bg|background|icon|logo|photo|avatar|thumbnail|cover|banner)$/i;
+function isImageUrlKey(key: string): boolean {
+  return IMAGE_KEY_RE.test(key);
+}
 
 const textTags = new Set([
   "p",
@@ -197,8 +210,15 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       const propsOut: Record<string, unknown> = {};
       for (const [pk, pv] of Object.entries(v)) {
         if (typeof pv === "string" && pv.includes("${")) {
-          const isUrlAttr = pk === "src" || pk === "href" || pk === "poster" || pk === "action";
-          propsOut[pk] = isUrlAttr ? "" : templateToEditDisplay(pv);
+          // Image-like prop → neutral placeholder (the component renders it as an <img src>); link
+          // Targets → inert ""; everything else → the readable ❪ expr ❫ binding text.
+          if (isImageUrlKey(pk)) {
+            propsOut[pk] = PLACEHOLDER_IMG;
+          } else if (pk === "href" || pk === "action") {
+            propsOut[pk] = "";
+          } else {
+            propsOut[pk] = templateToEditDisplay(pv);
+          }
         } else if (pv && typeof pv === "object" && (pv as Record<string, unknown>).$ref) {
           const ref = (pv as Record<string, unknown>).$ref as string;
           const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
@@ -238,7 +258,7 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
                     border: "1px dashed color-mix(in srgb, var(--danger) 40%, transparent)",
                     borderRadius: "4px",
                     color: "var(--danger)",
-                    fontFamily: "'SF Mono', 'Fira Code', monospace",
+                    fontFamily: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace",
                     fontSize: "11px",
                     fontStyle: "italic",
                     padding: "6px 10px",

package/src/utils/geometry.ts

@@ -0,0 +1,43 @@
+/// <reference lib="dom" />
+/**
+ * Geometry read funnel — the single place the studio reads element bounds and does point hit-tests.
+ *
+ * Centralizing these reads is a seam for the iframe-canvas migration: today every call delegates
+ * straight to the DOM, but routing them through one module lets later phases redirect
+ * CANVAS-element geometry to rects posted out of the iframe (which the parent can't measure
+ * directly) without touching dozens of call sites. A test (`geometry.test.ts`) asserts no raw
+ * `getBoundingClientRect`/`elementFromPoint`/`elementsFromPoint` calls exist elsewhere in `src`.
+ */
+
+/** Bounding rect of an element, in viewport coordinates. */
+export function rectOf(el: Element): DOMRect {
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Bounding rect of a Range, in viewport coordinates. Lives here (the one allowlisted home for
+ * `getBoundingClientRect`) so the `geometry.test.ts` textual guard passes — the iframe-side
+ * selection snapshot funnels its caret/selection geometry through this, never calling
+ * `range.getBoundingClientRect()` directly.
+ */
+export function rectOfRange(r: Range): DOMRect {
+  return r.getBoundingClientRect();
+}
+
+/** Topmost element at a viewport point, in `root` (defaults to the global document). */
+export function elementAtPoint(
+  x: number,
+  y: number,
+  root: Document | ShadowRoot = document,
+): Element | null {
+  return root.elementFromPoint(x, y);
+}
+
+/** All elements at a viewport point, front-to-back, in `root` (defaults to the global document). */
+export function elementsAtPoint(
+  x: number,
+  y: number,
+  root: Document | ShadowRoot = document,
+): Element[] {
+  return root.elementsFromPoint(x, y);
+}

package/src/utils/link-target.ts

@@ -0,0 +1,93 @@
+/**
+ * Link-target.ts — pure, dependency-free helpers for classifying and composing anchor `href`
+ * targets in the properties panel's Link section.
+ *
+ * `classifyHref` splits a raw href string into a discriminated `{ kind, value }` pair so the UI can
+ * offer a target-kind selector (Internal page / External URL / #anchor / mailto: / tel:).
+ * `composeHref` is its inverse — the two round-trip for every kind so editing through the UI never
+ * corrupts an href.
+ *
+ * Both functions are total (never throw) and have no DOM or platform dependencies, so they are
+ * fully unit-testable in isolation.
+ */
+
+/** The distinct target kinds an anchor href can address. */
+export type LinkKind = "internal" | "external" | "anchor" | "mailto" | "tel";
+
+/** A classified href: its {@link LinkKind} plus the "bare" value for that kind's input. */
+export interface LinkTarget {
+  kind: LinkKind;
+  /**
+   * The user-facing value for the kind's input: - internal → the path (e.g. `/about/`) - external →
+   * the full href (e.g. `https://x.com`) - anchor → the fragment WITHOUT the leading `#` (e.g.
+   * `section`) - mailto → the email address WITHOUT the `mailto:` scheme - tel → the phone number
+   * WITHOUT the `tel:` scheme
+   */
+  value: string;
+}
+
+/** Matches an absolute URL scheme like `http://`, `https://`, `ftp://`, or protocol-relative `//`. */
+const ABSOLUTE_SCHEME = /^([a-z][a-z\d+.-]*:)?\/\//i;
+
+/**
+ * Classify a raw `href` string into a {@link LinkTarget}.
+ *
+ * Rules (checked in order): 1. `mailto:…` → `{ kind: "mailto", value: address }` 2. `tel:…` → `{
+ * kind: "tel", value: number }` 3. `#…` → `{ kind: "anchor", value: rest }` (leading `#` stripped)
+ * 4. absolute (`http(s)://…`) or protocol-relative (`//…`) → `{ kind: "external", value: href }` 5.
+ * `/…` → `{ kind: "internal", value: path }` 6. anything else → `{ kind: "external", value: href
+ * }`
+ *
+ * @param href The raw attribute value (may be empty)
+ */
+export function classifyHref(href = ""): LinkTarget {
+  const value = href;
+  const lower = value.toLowerCase();
+
+  if (lower.startsWith("mailto:")) {
+    return { kind: "mailto", value: value.slice("mailto:".length) };
+  }
+  if (lower.startsWith("tel:")) {
+    return { kind: "tel", value: value.slice("tel:".length) };
+  }
+  if (value.startsWith("#")) {
+    return { kind: "anchor", value: value.slice(1) };
+  }
+  if (ABSOLUTE_SCHEME.test(value)) {
+    return { kind: "external", value };
+  }
+  if (value.startsWith("/")) {
+    return { kind: "internal", value };
+  }
+  return { kind: "external", value };
+}
+
+/**
+ * Compose an `href` string from a {@link LinkKind} and its bare value — the inverse of
+ * {@link classifyHref}. An empty (or whitespace-only) value yields `""` for every kind so callers
+ * can treat "cleared" uniformly. Round-trips with `classifyHref` for every kind.
+ *
+ * @param kind The target kind
+ * @param value The bare value for that kind (address/number/fragment/path/href)
+ */
+export function composeHref(kind: LinkKind, value: string): string {
+  const bare = (value ?? "").trim();
+  if (!bare) {
+    return "";
+  }
+  switch (kind) {
+    case "mailto": {
+      return `mailto:${bare}`;
+    }
+    case "tel": {
+      return `tel:${bare}`;
+    }
+    case "anchor": {
+      return bare.startsWith("#") ? bare : `#${bare}`;
+    }
+    // Internal / external — the bare value IS the href.
+    default: {
+      return bare;
+    }
+  }
+}

package/src/utils/strip-events.ts

@@ -0,0 +1,54 @@
+/**
+ * Strip `on*` event-handler bindings from a Jx document tree (returns a shallow-rebuilt copy). Used
+ * to neutralize handlers before edit/design rendering so the canvas never wires live behavior, and
+ * to drop `timing: "server"` state entries the canvas can't run.
+ *
+ * Lives in its own dependency-light module (it pulls only the pure `@jxsuite/schema/guards`
+ * predicate) so the slim canvas-iframe subtree renderer can import it without dragging in the
+ * editor's reactive `store.ts`; `store.ts` re-exports it for the legacy in-realm patcher.
+ */
+
+import { isEventBinding } from "@jxsuite/schema/guards";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+/** Strip all `on*` event-handler properties (and server-timed state) from a document tree. */
+export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    // Arrays of nodes round-trip element-wise; the array itself is not a node.
+    return node.map((n: JxMutableNode) => stripEventHandlers(n)) as unknown as JxMutableNode;
+  }
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(node)) {
+    if (k.startsWith("on") && isEventBinding(v)) {
+      continue;
+    }
+    if (k === "children") {
+      out.children = Array.isArray(v)
+        ? v.map((c: JxMutableNode) => stripEventHandlers(c))
+        : stripEventHandlers(v as JxMutableNode);
+    } else if (k === "cases" && typeof v === "object") {
+      const cases: Record<string, unknown> = {};
+      for (const [ck, cv] of Object.entries(v as Record<string, unknown>)) {
+        cases[ck] = stripEventHandlers(cv as JxMutableNode);
+      }
+      out.cases = cases;
+    } else if (k === "state" && typeof v === "object" && v !== null) {
+      const state: Record<string, unknown> = {};
+      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
+        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server") {
+          continue;
+        }
+        state[sk] = sv;
+      }
+      out.state = state;
+    } else if (k === "style" || k === "attributes" || k === "$media") {
+      out[k] = v;
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+}

package/src/view.ts

@@ -28,15 +28,6 @@ interface ViewState {
         _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)[];
@@ -46,16 +37,9 @@ interface ViewState {
   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;
@@ -81,10 +65,6 @@ export const view: ViewState = {
   monacoEditor: null,
   functionEditor: null,
 
-  // Inline editing
-  componentInlineEdit: null,
-  inlineEditCleanup: null,
-
   // Floating UI containers
   blockActionBarEl: null,
 
@@ -105,16 +85,13 @@ export const view: ViewState = {
   elementsFilter: "",
 
   // Drag interaction
-  lastDragInput: null,
   _currentDropTargetRow: null,
   layerDragSourceHeight: 0,
 
   // Editor state
-  savedRange: null,
   _completionRegistered: false,
 
   // Canvas / stylebook
-  stylebookElToTag: new WeakMap(),
 
   // Responsive breakpoints UI
   showAddBreakpointForm: false,

package/src/workspace/workspace.ts

@@ -1,4 +1,4 @@
-import { computed, reactive } from "../reactivity";
+import { computed, reactive, toRaw } from "../reactivity";
 import { createTab, disposeTab } from "../tabs/tab";
 import type { Tab } from "../tabs/tab";
 
@@ -56,6 +56,19 @@ export const activeTab = computed(() =>
   workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
 ) as unknown as ComputedRef<Tab | null>;
 
+/**
+ * Whether `tab` is the active tab. Identity check survives reactive-proxy wrapping (activeTab.value
+ * is a proxy; callers may hold either the raw tab or a proxy of it).
+ *
+ * @param {Tab | null} tab
+ */
+export function isTabActive(tab: Tab | null): boolean {
+  const active = activeTab.value;
+  return (
+    tab !== null && active !== null && toRaw(active as object) === toRaw(tab as unknown as object)
+  );
+}
+
 /**
  * Open a new tab and make it active.
  *

package/src/canvas/canvas-subtree-render.ts

@@ -1,113 +0,0 @@
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/**
- * Isolated subtree rendering for surgical canvas patches. Re-renders a single document node into
- * fresh DOM using the same edit-mode transform, runtime renderer, scope, and path mapper as the
- * panel's last full render — so the patched DOM is indistinguishable from a full re-render.
- */
-
-import { elToRenderScope, elToScope, getNodeAtPath, stripEventHandlers } from "../store";
-import { prepareForEditMode } from "../utils/edit-display";
-import { renderNode as runtimeRenderNode } from "@jxsuite/runtime";
-import { effectScope } from "../reactivity";
-import { canvasPerf } from "./canvas-perf";
-
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-import type { CanvasPanel, PanelLiveCtx } from "../types";
-
-/**
- * Render the document node at docPath into a detached DOM subtree for the given panel.
- *
- * The scope comes from the parent element's recorded render scope (elToScope), falling back to the
- * panel's root scope — so $-bindings, $media, and state references resolve exactly as they did in
- * the full render. Throws when the panel has no live render context.
- *
- * @param {CanvasPanel} panel
- * @param {JxMutableNode} doc Raw (non-reactive) document root
- * @param {JxPath} docPath
- * @param {Element} parentEl The rendered parent element (scope source)
- */
-export function renderSubtree(
-  panel: CanvasPanel,
-  doc: JxMutableNode,
-  docPath: JxPath,
-  parentEl: Element,
-): HTMLElement | Text {
-  const { liveCtx } = panel;
-  if (!liveCtx) {
-    throw new Error("panel-missing-live-ctx");
-  }
-  const node = getNodeAtPath(doc, docPath) as JxMutableNode | string | undefined;
-  if (node === undefined) {
-    throw new Error(`node-not-found:${docPath.join("/")}`);
-  }
-  const def = typeof node === "string" ? node : prepareForEditMode(stripEventHandlers(node));
-  const scope = elToScope.get(parentEl) ?? liveCtx.scope;
-
-  // Render inside an effect scope parented to the panel's render scope: disposable on its own
-  // When the subtree is later replaced/removed, and disposed with the panel on full renders.
-  const render = () => {
-    const subScope = effectScope();
-    const rendered = subScope.run(() =>
-      runtimeRenderNode(def, scope, {
-        _path: docPathToRenderPath(docPath, liveCtx),
-        onNodeCreated: liveCtx.pathMapper,
-      }),
-    )!;
-    if (rendered instanceof HTMLElement) {
-      elToRenderScope.set(rendered, subScope);
-    }
-    return rendered;
-  };
-  const el = panel.renderScope ? panel.renderScope.run(render)! : render();
-  canvasPerf.subtreeRenders += 1;
-
-  // Match full-render edit display: canvas content never receives pointer events directly.
-  if (el instanceof HTMLElement) {
-    el.style.pointerEvents = "none";
-    for (const child of el.querySelectorAll("*")) {
-      (child as HTMLElement).style.pointerEvents = "none";
-    }
-  }
-  return el;
-}
-
-/**
- * Inverse of makePathMapper's layout-prefix strip: document paths are relative to the page doc,
- * render paths to the layout-merged doc. ($map/$switch paths never reach here — the patcher
- * escalates them.)
- *
- * @param {JxPath} docPath
- * @param {PanelLiveCtx} liveCtx
- */
-function docPathToRenderPath(docPath: JxPath, liveCtx: PanelLiveCtx): (string | number)[] {
-  if (liveCtx.layoutWrapped && liveCtx.pageContentPrefix && docPath[0] === "children") {
-    // Re-apply the slot-container offset stripped by makePathMapper: page child index N renders at
-    // Container index N + offset (offset = leading layout siblings before the <slot>).
-    const [, idx] = docPath;
-    return typeof idx === "number"
-      ? [...liveCtx.pageContentPrefix, idx + (liveCtx.pageContentOffset ?? 0), ...docPath.slice(2)]
-      : [...liveCtx.pageContentPrefix, ...docPath.slice(1)];
-  }
-  return docPath;
-}
-
-/**
- * The DOM node currently occupying children[index] of the rendered parent, or null when appending
- * at the end. The runtime renders an optional leading text node (from textContent) followed by one
- * DOM node per children entry, in order.
- *
- * @param {Element} parentEl
- * @param {JxMutableNode} parentNode
- * @param {number} index
- */
-export function domChildReference(
-  parentEl: Element,
-  parentNode: JxMutableNode,
-  index: number,
-): ChildNode | null {
-  const text = parentNode.textContent;
-  const textOffset = text != null && String(text) !== "" ? 1 : 0;
-  return parentEl.childNodes[textOffset + index] ?? null;
-}