@jxsuite/studio 0.26.1 → 0.27.0

package/dist/studio.js

@@ -258468,6 +258468,8 @@ function redo(tab) {
 }
 function mutateInsertNode(tab, parentPath, index, nodeDef) {
   const parent = getNodeAtPath(tab.doc.document, parentPath);
+  if (!parent)
+    return;
   if (!parent.children)
     parent.children = [];
   parent.children.splice(index, 0, structuredClone(nodeDef));
@@ -258510,9 +258512,15 @@ function mutateMoveNode(tab, fromPath, toParentPath, toIndex) {
   const doc = tab.doc.document;
   const fromParentPath = parentElementPath(fromPath);
   const fromIdx = childIndex(fromPath);
+  if (!fromParentPath || typeof fromIdx !== "number")
+    return;
   const fromParent = getNodeAtPath(doc, fromParentPath);
-  const [node] = fromParent.children.splice(fromIdx, 1);
   const toParent = getNodeAtPath(doc, toParentPath);
+  if (!fromParent || !Array.isArray(fromParent.children) || !toParent)
+    return;
+  const [node] = fromParent.children.splice(fromIdx, 1);
+  if (node === undefined)
+    return;
   if (!toParent.children)
     toParent.children = [];
   let adjustedIndex = toIndex;
@@ -270752,6 +270760,7 @@ function renderExpressionEditor(node2, onChange, opts) {
 // src/ui/media-picker.ts
 init_lit_html();
 init_live();
+init_ref();
 init_platform3();
 init_store();
 var IMAGE_EXTENSIONS = new Set([
@@ -270812,13 +270821,142 @@ function invalidateMediaCache() {
   mediaCache = [];
   mediaCacheLoaded = false;
 }
+var _popoverOnCommit = null;
+var _popoverAnchorEl = null;
+var _popoverFilterEl = null;
+var _popoverFilter = "";
+function dismissMediaPickerPopover() {
+  _popoverFilter = "";
+  _popoverOnCommit = null;
+  _popoverAnchorEl = null;
+  _popoverFilterEl = null;
+  document.removeEventListener("keydown", onPopoverKeydown, true);
+  document.removeEventListener("mousedown", onPopoverOutsideClick, true);
+  render2(nothing, getLayerSlot("popover", "media-picker"));
+}
+function onPopoverKeydown(e) {
+  if (e.key === "Escape") {
+    dismissMediaPickerPopover();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+function onPopoverOutsideClick(e) {
+  const host = getLayerSlot("popover", "media-picker");
+  if (!host.contains(e.target)) {
+    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);
+  let left = rect.left;
+  let top = rect.bottom + 4;
+  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 _popoverEl2 = null;
+  render2(html3`
+      <sp-popover
+        open
+        ${ref2((el) => {
+    _popoverEl2 = el || 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"
+          ${ref2((el) => {
+    _popoverFilterEl = el || null;
+  })}
+          @input=${(e) => {
+    _popoverFilter = e.target.value;
+    renderMediaPickerPopover();
+  }}
+          @click=${(e) => e.stopPropagation()}
+        />
+        <sp-menu
+          style="min-width:220px"
+          @change=${(e) => {
+    _popoverOnCommit?.(e.target.value);
+    dismissMediaPickerPopover();
+  }}
+        >
+          ${options.length ? options.map((m) => html3`
+                  <sp-menu-item value=${m.path}>
+                    ${m.isImage ? html3`<img
+                          slot="icon"
+                          src=${m.path}
+                          alt=""
+                          style="width:24px;height:24px;object-fit:cover;border-radius:2px"
+                        />` : nothing}
+                    ${m.name}
+                  </sp-menu-item>
+                `) : html3`<sp-menu-item disabled>No matches</sp-menu-item>`}
+          ${filtered.length > 50 ? html3`<sp-menu-item disabled>…${filtered.length - 50} more</sp-menu-item>` : nothing}
+        </sp-menu>
+      </sp-popover>
+    `, host);
+  requestAnimationFrame(() => {
+    if (_popoverEl2) {
+      const popoverRect = _popoverEl2.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) {
+        _popoverEl2.style.left = `${adjLeft}px`;
+        _popoverEl2.style.top = `${adjTop}px`;
+      }
+    }
+    if (_popoverFilterEl)
+      _popoverFilterEl.focus();
+  });
+}
+function showMediaPickerPopover(anchorEl, onCommit) {
+  dismissMediaPickerPopover();
+  _popoverOnCommit = onCommit;
+  _popoverAnchorEl = anchorEl;
+  _popoverFilter = "";
+  renderMediaPickerPopover();
+  document.addEventListener("keydown", onPopoverKeydown, true);
+  requestAnimationFrame(() => {
+    document.addEventListener("mousedown", onPopoverOutsideClick, true);
+  });
+}
 function renderMediaPicker(prop, value2, onCommit) {
   loadMediaCache();
   const currentValue = value2 || "";
   const isImage = IMAGE_EXTENSIONS.has(currentValue.slice(currentValue.lastIndexOf(".")).toLowerCase());
-  const query = currentValue.toLowerCase();
-  const filtered = query ? mediaCache.filter((m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query)) : mediaCache;
-  const options = filtered.slice(0, 20);
   return html3`
     <div class="media-picker">
       ${isImage && currentValue ? html3`<img class="media-picker-thumb" src=${currentValue} alt="" />` : nothing}
@@ -270830,31 +270968,17 @@ function renderMediaPicker(prop, value2, onCommit) {
         @focus=${() => loadMediaCache()}
       ></sp-textfield>
       ${mediaCache.length > 0 ? html3`
-            <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) => {
-    onCommit(e.target.value);
+            <sp-action-button
+              size="xs"
+              quiet
+              title="Browse media"
+              @click=${(e) => {
+    loadMediaCache();
+    showMediaPickerPopover(e.currentTarget, onCommit);
   }}
-                >
-                  ${options.map((m) => html3`
-                      <sp-menu-item value=${m.path}>
-                        ${m.isImage ? html3`<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 ? html3`<sp-menu-item disabled>...${filtered.length - 20} more</sp-menu-item>` : nothing}
-                </sp-menu>
-              </sp-popover>
-            </overlay-trigger>
+            >
+              <sp-icon-image slot="icon"></sp-icon-image>
+            </sp-action-button>
           ` : nothing}
     </div>
   `;
@@ -272945,9 +273069,6 @@ function registerLayersDnD() {
         onDrag({ self: self2 }) {
           showLayerDropGap(row, self2.data, container);
         },
-        onDragLeave() {
-          clearLayerDropGap(container);
-        },
         onDrop() {
           clearLayerDropGap(container);
         }
@@ -272955,6 +273076,11 @@ function registerLayersDnD() {
       view.dndCleanups.push(cleanup);
     });
     const monitorCleanup = monitorForElements({
+      onDropTargetChange({ location: location3 }) {
+        const inner = location3.current.dropTargets[0];
+        if (inner && !extractInstruction(inner.data))
+          clearLayerDropGap(container);
+      },
       onDrop({ source, location: location3 }) {
         clearLayerDropGap(container);
         const target = location3.current.dropTargets[0];
@@ -273095,6 +273221,8 @@ function applyDropInstruction(instruction, srcData, targetPath) {
     const fromPath = srcData.path;
     const targetParent = parentElementPath(targetPath);
     const targetIdx = childIndex(targetPath);
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
     switch (instruction.type) {
       case "reorder-above":
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetParent, targetIdx));
@@ -273112,6 +273240,8 @@ function applyDropInstruction(instruction, srcData, targetPath) {
   } else if (srcData.type === "block") {
     const targetParent = parentElementPath(targetPath);
     const targetIdx = childIndex(targetPath);
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+      return;
     switch (instruction.type) {
       case "reorder-above":
         transactDoc(activeTab.value, (t) => mutateInsertNode(t, targetParent, targetIdx, structuredClone(srcData.fragment)));
@@ -273169,6 +273299,16 @@ var _activeDropEl = null;
 function registerPanelDnD(panel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
+  const innermostCanvasTarget = (location3) => {
+    const target = location3.current.dropTargets[0];
+    if (!target)
+      return null;
+    const tEl = target.element;
+    const tPath = target.data.path;
+    if (!canvas.contains(tEl) || !Array.isArray(tPath))
+      return null;
+    return { el: tEl, path: tPath, isLeaf: !!target.data._isVoid };
+  };
   const monitorCleanup = monitorForElements({
     onDragStart({ location: location3 }) {
       view.lastDragInput = location3.current.input;
@@ -273180,8 +273320,27 @@ function registerPanelDnD(panel) {
     },
     onDrag({ location: location3 }) {
       view.lastDragInput = location3.current.input;
+      const target = innermostCanvasTarget(location3);
+      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 (location3.current.dropTargets.length > 0) {
+        if (_activeDropEl && canvas.contains(_activeDropEl)) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+          _activeDropEl = null;
+        }
+        dropLine.style.display = "none";
+      }
     },
-    onDrop() {
+    onDrop({ source, location: location3 }) {
+      const target = innermostCanvasTarget(location3);
+      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) {
@@ -273216,26 +273375,6 @@ function registerPanelDnD(panel) {
       },
       getData() {
         return { path: elPath, _isVoid: isLeaf2 };
-      },
-      onDragEnter({ location: location3 }) {
-        view.lastDragInput = location3.current.input;
-        if (_activeDropEl && _activeDropEl !== el) {
-          _activeDropEl.classList.remove("canvas-drop-target");
-        }
-        _activeDropEl = el;
-        showCanvasDropIndicator(el, elPath, isLeaf2, panel);
-      },
-      onDrag({ location: location3 }) {
-        view.lastDragInput = location3.current.input;
-        showCanvasDropIndicator(el, elPath, isLeaf2, panel);
-      },
-      onDragLeave() {},
-      onDrop({ source }) {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
-        _activeDropEl = null;
-        const { instruction, targetPath } = getCanvasDropResult(el, elPath, isLeaf2);
-        applyDropInstruction(instruction, source.data, targetPath);
       }
     });
     view.canvasDndCleanups.push(cleanup);
@@ -312829,5 +312968,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=F148FB20E5E187A864756E2164756E21
+//# debugId=F092D1FA9C946D1E64756E2164756E21
 //# sourceMappingURL=studio.js.map