@jxsuite/studio 0.26.1 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -32,9 +32,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
-    "@jxsuite/parser": "^0.26.1",
-    "@jxsuite/runtime": "^0.26.1",
-    "@jxsuite/schema": "^0.26.1",
+    "@jxsuite/parser": "^0.27.0",
+    "@jxsuite/runtime": "^0.27.0",
+    "@jxsuite/schema": "^0.27.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -88,7 +88,7 @@
     "@types/mdast": "^4.0.4",
     "@webref/css": "^8.5.8",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.80.0"
+    "@webref/idl": "^3.81.0"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/panels/canvas-dnd.ts

@@ -42,6 +42,21 @@ export function registerPanelDnD(panel: CanvasPanel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
 
+  // Drop-target callbacks fire on EVERY target in the stack (innermost → outermost),
+  // and every canvas element is a drop target — so the indicator and the drop are
+  // driven from the monitor using only the innermost target.
+  /** Innermost drop target if it belongs to this panel's canvas, else null */
+  const innermostCanvasTarget = (location: {
+    current: { dropTargets: { data: Record<string | symbol, unknown>; element: Element }[] };
+  }) => {
+    const target = location.current.dropTargets[0];
+    if (!target) return null;
+    const tEl = target.element as HTMLElement;
+    const tPath = target.data.path;
+    if (!canvas.contains(tEl) || !Array.isArray(tPath)) return null;
+    return { el: tEl, path: tPath as JxPath, isLeaf: !!target.data._isVoid };
+  };
+
   const monitorCleanup = monitorForElements({
     onDragStart({ location }) {
       view.lastDragInput = location.current.input;
@@ -52,8 +67,34 @@ export function registerPanelDnD(panel: CanvasPanel) {
     },
     onDrag({ location }) {
       view.lastDragInput = location.current.input;
+      const target = innermostCanvasTarget(location);
+      if (target) {
+        if (_activeDropEl && _activeDropEl !== target.el) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+        }
+        _activeDropEl = target.el;
+        showCanvasDropIndicator(target.el, target.path, target.isLeaf, panel);
+      } else if (location.current.dropTargets.length > 0) {
+        // Pointer is over a non-canvas target (e.g. a layer row) — hide this panel's
+        // indicator. When over dead space (no targets at all) keep the last indicator
+        // visible so it persists for the whole drag.
+        if (_activeDropEl && canvas.contains(_activeDropEl)) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+          _activeDropEl = null;
+        }
+        dropLine.style.display = "none";
+      }
     },
-    onDrop() {
+    onDrop({ source, location }) {
+      const target = innermostCanvasTarget(location);
+      if (target) {
+        const { instruction, targetPath } = getCanvasDropResult(
+          target.el,
+          target.path,
+          target.isLeaf,
+        );
+        applyDropInstruction(instruction, source.data, targetPath);
+      }
       _activeDropEl?.classList.remove("canvas-drop-target");
       _activeDropEl = null;
       for (const p of canvasPanels) {
@@ -90,26 +131,6 @@ export function registerPanelDnD(panel: CanvasPanel) {
       getData() {
         return { path: elPath, _isVoid: isLeaf };
       },
-      onDragEnter({ location }) {
-        view.lastDragInput = location.current.input;
-        if (_activeDropEl && _activeDropEl !== el) {
-          _activeDropEl.classList.remove("canvas-drop-target");
-        }
-        _activeDropEl = el as HTMLElement;
-        showCanvasDropIndicator(el as HTMLElement, elPath, isLeaf, panel);
-      },
-      onDrag({ location }) {
-        view.lastDragInput = location.current.input;
-        showCanvasDropIndicator(el as HTMLElement, elPath, isLeaf, panel);
-      },
-      onDragLeave() {},
-      onDrop({ source }) {
-        dropLine.style.display = "none";
-        (el as HTMLElement).classList.remove("canvas-drop-target");
-        _activeDropEl = null;
-        const { instruction, targetPath } = getCanvasDropResult(el as HTMLElement, elPath, isLeaf);
-        applyDropInstruction(instruction, source.data, targetPath);
-      },
     });
     view.canvasDndCleanups.push(cleanup);
   }

package/src/panels/dnd.ts

@@ -115,9 +115,8 @@ export function registerLayersDnD() {
           onDrag({ self }: DragSelfArgs) {
             showLayerDropGap(row, self.data, container);
           },
-          onDragLeave() {
-            clearLayerDropGap(container);
-          },
+          // No onDragLeave clear — the gap persists while the pointer crosses dead space
+          // between rows; the monitor clears it when the drag moves to a non-tree target.
           onDrop() {
             clearLayerDropGap(container);
           },
@@ -128,6 +127,12 @@ export function registerLayersDnD() {
 
     // Global monitor
     const monitorCleanup = monitorForElements({
+      onDropTargetChange({ location }: DragMonitorDropArgs) {
+        // Clear the layer gap when the drag moves onto a non-tree target (e.g. a canvas
+        // element). When there is no target at all, keep the gap so it persists.
+        const inner = location.current.dropTargets[0];
+        if (inner && !extractInstruction(inner.data)) clearLayerDropGap(container);
+      },
       onDrop({ source, location }: DragMonitorDropArgs) {
         clearLayerDropGap(container);
         const target = location.current.dropTargets[0];
@@ -321,6 +326,10 @@ export function applyDropInstruction(
     const fromPath = srcData.path as JxPath;
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
+    // Reordering requires a parent and a numeric index; root-level paths can't be
+    // reordered around.
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
 
     switch (instruction.type) {
       case "reorder-above":
@@ -341,6 +350,8 @@ export function applyDropInstruction(
   } else if (srcData.type === "block") {
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
 
     switch (instruction.type) {
       case "reorder-above":

package/src/tabs/transact.ts

@@ -100,6 +100,7 @@ export function mutateInsertNode(
   nodeDef: JxMutableNode,
 ) {
   const parent = getNodeAtPath(tab.doc.document, parentPath);
+  if (!parent) return;
   if (!parent.children) parent.children = [];
   parent.children.splice(index, 0, structuredClone(nodeDef));
 }
@@ -159,9 +160,12 @@ export function mutateMoveNode(tab: Tab, fromPath: JxPath, toParentPath: JxPath,
   const doc = tab.doc.document;
   const fromParentPath = parentElementPath(fromPath) as JxPath;
   const fromIdx = childIndex(fromPath) as number;
+  if (!fromParentPath || typeof fromIdx !== "number") return;
   const fromParent = getNodeAtPath(doc, fromParentPath);
-  const [node] = (fromParent.children as JxMutableNode[]).splice(fromIdx, 1);
   const toParent = getNodeAtPath(doc, toParentPath);
+  if (!fromParent || !Array.isArray(fromParent.children) || !toParent) return;
+  const [node] = (fromParent.children as JxMutableNode[]).splice(fromIdx, 1);
+  if (node === undefined) return;
   if (!toParent.children) toParent.children = [];
   let adjustedIndex = toIndex;
   if (fromParent === toParent && fromIdx < toIndex) adjustedIndex--;

package/src/ui/media-picker.ts

@@ -6,10 +6,12 @@
  * files from the project's public/ directory, with thumbnail previews for images.
  */
 
-import { html, nothing } from "lit-html";
+import { html, render as litRender, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
+import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
 import { debouncedStyleCommit } from "../store";
+import { getLayerSlot } from "./layers";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
 
@@ -92,6 +94,184 @@ export function invalidateMediaCache() {
   mediaCacheLoaded = false;
 }
 
+// ─── Popover state ───────────────────────────────────────────────────────────
+
+/** @type {((val: string) => void) | null} */
+let _popoverOnCommit: ((val: string) => void) | null = null;
+
+/** @type {HTMLElement | null} */
+let _popoverAnchorEl: HTMLElement | null = null;
+
+/** @type {HTMLInputElement | null} */
+let _popoverFilterEl: HTMLInputElement | null = null;
+
+let _popoverFilter = "";
+
+function dismissMediaPickerPopover() {
+  _popoverFilter = "";
+  _popoverOnCommit = null;
+  _popoverAnchorEl = null;
+  _popoverFilterEl = null;
+  document.removeEventListener("keydown", onPopoverKeydown, true);
+  document.removeEventListener("mousedown", onPopoverOutsideClick, true);
+  litRender(nothing, getLayerSlot("popover", "media-picker"));
+}
+
+/** @param {KeyboardEvent} e */
+function onPopoverKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    dismissMediaPickerPopover();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+/** @param {MouseEvent} e */
+function onPopoverOutsideClick(e: MouseEvent) {
+  const host = getLayerSlot("popover", "media-picker");
+  if (!host.contains(e.target as Node)) {
+    dismissMediaPickerPopover();
+  }
+}
+
+function renderMediaPickerPopover() {
+  const host = getLayerSlot("popover", "media-picker");
+  const rect = _popoverAnchorEl?.getBoundingClientRect();
+  if (!rect) return;
+
+  const query = _popoverFilter.toLowerCase();
+  const filtered = query
+    ? mediaCache.filter(
+        (m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
+      )
+    : mediaCache;
+  const options = filtered.slice(0, 50);
+
+  // Compute initial position below the anchor
+  let left = rect.left;
+  let top = rect.bottom + 4;
+
+  // Estimate popover dimensions for viewport clamping before first paint
+  const estimatedWidth = 280;
+  const estimatedHeight = Math.min(options.length * 36 + 48, 360);
+
+  if (left + estimatedWidth > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - estimatedWidth - 8);
+  }
+  if (top + estimatedHeight > window.innerHeight - 8) {
+    top = Math.max(8, rect.top - estimatedHeight - 4);
+  }
+
+  let _popoverEl: HTMLElement | null = null;
+
+  litRender(
+    html`
+      <sp-popover
+        open
+        ${ref((el) => {
+          _popoverEl = (el as HTMLElement | undefined) || null;
+        })}
+        style="position:fixed;left:${left}px;top:${top}px;z-index:30;max-height:360px;overflow-y:auto;min-width:240px"
+      >
+        <input
+          class="media-picker-filter"
+          type="text"
+          placeholder="Search images…"
+          autocomplete="off"
+          style="display:block;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-bottom:1px solid var(--border, #444);outline:none;font-size:13px;background:transparent;color:inherit"
+          ${ref((el) => {
+            _popoverFilterEl = (el as HTMLInputElement | null) || null;
+          })}
+          @input=${(e: Event) => {
+            _popoverFilter = (e.target as HTMLInputElement).value;
+            renderMediaPickerPopover();
+          }}
+          @click=${(e: MouseEvent) => e.stopPropagation()}
+        />
+        <sp-menu
+          style="min-width:220px"
+          @change=${(e: Event) => {
+            _popoverOnCommit?.((e.target as HTMLInputElement).value);
+            dismissMediaPickerPopover();
+          }}
+        >
+          ${options.length
+            ? options.map(
+                (m) => html`
+                  <sp-menu-item value=${m.path}>
+                    ${m.isImage
+                      ? html`<img
+                          slot="icon"
+                          src=${m.path}
+                          alt=""
+                          style="width:24px;height:24px;object-fit:cover;border-radius:2px"
+                        />`
+                      : nothing}
+                    ${m.name}
+                  </sp-menu-item>
+                `,
+              )
+            : html`<sp-menu-item disabled>No matches</sp-menu-item>`}
+          ${filtered.length > 50
+            ? html`<sp-menu-item disabled>…${filtered.length - 50} more</sp-menu-item>`
+            : nothing}
+        </sp-menu>
+      </sp-popover>
+    `,
+    host,
+  );
+
+  // Fine-tune position after render using actual measured dimensions
+  requestAnimationFrame(() => {
+    if (_popoverEl) {
+      const popoverRect = _popoverEl.getBoundingClientRect();
+      let adjLeft = popoverRect.left;
+      let adjTop = popoverRect.top;
+      let needsAdjust = false;
+
+      if (popoverRect.right > window.innerWidth - 4) {
+        adjLeft = Math.max(4, window.innerWidth - popoverRect.width - 4);
+        needsAdjust = true;
+      }
+      if (popoverRect.bottom > window.innerHeight - 4) {
+        adjTop = Math.max(4, window.innerHeight - popoverRect.height - 4);
+        needsAdjust = true;
+      }
+      if (popoverRect.left < 4) {
+        adjLeft = 4;
+        needsAdjust = true;
+      }
+      if (popoverRect.top < 4) {
+        adjTop = 4;
+        needsAdjust = true;
+      }
+
+      if (needsAdjust) {
+        _popoverEl.style.left = `${adjLeft}px`;
+        _popoverEl.style.top = `${adjTop}px`;
+      }
+    }
+
+    if (_popoverFilterEl) _popoverFilterEl.focus();
+  });
+}
+
+/**
+ * @param {HTMLElement} anchorEl
+ * @param {(val: string) => void} onCommit
+ */
+function showMediaPickerPopover(anchorEl: HTMLElement, onCommit: (val: string) => void) {
+  dismissMediaPickerPopover();
+  _popoverOnCommit = onCommit;
+  _popoverAnchorEl = anchorEl;
+  _popoverFilter = "";
+  renderMediaPickerPopover();
+  document.addEventListener("keydown", onPopoverKeydown, true);
+  requestAnimationFrame(() => {
+    document.addEventListener("mousedown", onPopoverOutsideClick, true);
+  });
+}
+
 // ─── Render ──────────────────────────────────────────────────────────────────
 
 /**
@@ -111,17 +291,6 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
     currentValue.slice(currentValue.lastIndexOf(".")).toLowerCase(),
   );
 
-  // Filter media options based on current input
-  const query = currentValue.toLowerCase();
-  const filtered = query
-    ? mediaCache.filter(
-        (m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query),
-      )
-    : mediaCache;
-
-  // Limit displayed options
-  const options = filtered.slice(0, 20);
-
   return html`
     <div class="media-picker">
       ${isImage && currentValue
@@ -138,37 +307,17 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
       ></sp-textfield>
       ${mediaCache.length > 0
         ? html`
-            <overlay-trigger placement="bottom-end" triggered-by="click">
-              <sp-action-button size="xs" quiet slot="trigger" title="Browse media">
-                <sp-icon-image slot="icon"></sp-icon-image>
-              </sp-action-button>
-              <sp-popover slot="click-content" class="media-picker-popover">
-                <sp-menu
-                  @change=${(e: Event) => {
-                    onCommit((e.target as HTMLInputElement).value);
-                  }}
-                >
-                  ${options.map(
-                    (m) => html`
-                      <sp-menu-item value=${m.path}>
-                        ${m.isImage
-                          ? html`<img
-                              slot="icon"
-                              src=${m.path}
-                              alt=""
-                              style="width:24px;height:24px;object-fit:cover;border-radius:2px"
-                            />`
-                          : nothing}
-                        ${m.name}
-                      </sp-menu-item>
-                    `,
-                  )}
-                  ${filtered.length > 20
-                    ? html`<sp-menu-item disabled>...${filtered.length - 20} more</sp-menu-item>`
-                    : nothing}
-                </sp-menu>
-              </sp-popover>
-            </overlay-trigger>
+            <sp-action-button
+              size="xs"
+              quiet
+              title="Browse media"
+              @click=${(e: MouseEvent) => {
+                loadMediaCache();
+                showMediaPickerPopover(e.currentTarget as HTMLElement, onCommit);
+              }}
+            >
+              <sp-icon-image slot="icon"></sp-icon-image>
+            </sp-action-button>
           `
         : nothing}
     </div>