veo-sdk 0.5.4 → 0.5.5

package/dist/{builder-MFTOJV6F.mjs → builder-O2QHV2DV.mjs}

@@ -1,5 +1,5 @@
-export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-SBNT464M.mjs';
+export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-XPB4DL2Y.mjs';
 import './chunk-JPA46JBS.mjs';
 import './chunk-PTG3BTJE.mjs';
-//# sourceMappingURL=builder-MFTOJV6F.mjs.map
-//# sourceMappingURL=builder-MFTOJV6F.mjs.map
+//# sourceMappingURL=builder-O2QHV2DV.mjs.map
+//# sourceMappingURL=builder-O2QHV2DV.mjs.map

package/dist/{builder-MFTOJV6F.mjs.map → builder-O2QHV2DV.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-MFTOJV6F.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-O2QHV2DV.mjs"}

package/dist/builder.cjs

@@ -32,7 +32,8 @@ function attachBlockDropTarget(options) {
     const types = event.dataTransfer?.types;
     return !!types && Array.from(types).includes(VEO_BLOCK_MIME);
   };
-  const locate = (event) => {
+  const NEAR_PX = 48;
+  const locate = (clientY) => {
     const container = contentEl();
     if (!container) return null;
     const rect = container.getBoundingClientRect();
@@ -41,7 +42,7 @@ function attachBlockDropTarget(options) {
     let y = kids.length === 0 ? rect.top + rect.height / 2 : 0;
     for (const kid of kids) {
       const r = kid.getBoundingClientRect();
-      if (event.clientY < r.top + r.height / 2) {
+      if (clientY < r.top + r.height / 2) {
         const idx = Number(kid.dataset.veoIdx);
         beforeIndex = Number.isFinite(idx) ? idx : null;
         y = r.top;
@@ -51,9 +52,26 @@ function attachBlockDropTarget(options) {
     }
     return { beforeIndex, y, rect };
   };
+  const overContent = (x, y, rect) => x >= rect.left - NEAR_PX && x <= rect.right + NEAR_PX && y >= rect.top - NEAR_PX && y <= rect.bottom + NEAR_PX;
+  const hoverAt = (x, y) => {
+    const at = locate(y);
+    if (!at || !overContent(x, y, at.rect)) {
+      hideLine();
+      return false;
+    }
+    spot = at;
+    showLine(at);
+    return true;
+  };
+  const dropAt = (x, y) => {
+    const at = locate(y);
+    hideLine();
+    if (!at || !overContent(x, y, at.rect)) return null;
+    return { beforeIndex: at.beforeIndex };
+  };
   const onDragOver = (event) => {
     if (!isBlockDrag(event)) return;
-    const at = locate(event);
+    const at = locate(event.clientY);
     if (!at) return;
     event.preventDefault();
     if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
@@ -64,7 +82,7 @@ function attachBlockDropTarget(options) {
     if (!isBlockDrag(event)) return;
     event.preventDefault();
     const blockType = event.dataTransfer?.getData(VEO_BLOCK_MIME) ?? "";
-    const at = spot ?? locate(event);
+    const at = spot ?? locate(event.clientY);
     hideLine();
     if (!blockType || !at) return;
     onDrop({ stepIndex, blockType, beforeIndex: at.beforeIndex });
@@ -78,6 +96,9 @@ function attachBlockDropTarget(options) {
   host.addEventListener("drop", onDropEvent);
   host.addEventListener("dragleave", onDragLeave);
   return {
+    hoverAt,
+    dropAt,
+    cancelHover: hideLine,
     detach() {
       host.removeEventListener("dragover", onDragOver);
       host.removeEventListener("drop", onDropEvent);
@@ -2787,7 +2808,7 @@ var MIN_H = 320;
 var MARGIN = 16;
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
-    return { target: () => null, teardown: () => {
+    return { target: () => null, frameRect: () => null, teardown: () => {
     } };
   }
   const panelUrl = buildPanelUrl(opts);
@@ -2904,6 +2925,7 @@ function injectBuilderPanel(opts) {
   });
   return {
     target: () => popped && !popped.closed ? popped : iframe.contentWindow,
+    frameRect: () => popped && !popped.closed ? null : iframe.getBoundingClientRect(),
     teardown: () => {
       stopPoll();
       if (popped && !popped.closed) popped.close();
@@ -3488,6 +3510,8 @@ function initBuilderMode() {
   let staticTarget = null;
   let manipulator = null;
   let dropTarget = null;
+  let dragGhost = null;
+  let previewStepIndex = 0;
   let pendingPreview = null;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
@@ -3498,6 +3522,7 @@ function initBuilderMode() {
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    previewStepIndex = cmd.guide.startStepIndex ?? 0;
     const handle = previewGuide(cmd.guide);
     if (!cmd.editable) return;
     void handle.ready.then((result) => {
@@ -3523,6 +3548,47 @@ function initBuilderMode() {
       });
     });
   };
+  const hideDragGhost = () => {
+    dragGhost?.remove();
+    dragGhost = null;
+  };
+  const moveDragGhost = (x, y, label) => {
+    if (!dragGhost) {
+      dragGhost = document.createElement("div");
+      dragGhost.style.cssText = "position:fixed;padding:4px 10px;border-radius:999px;background:#1c1917;color:#fff;font:12px/1.4 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.25);pointer-events:none;z-index:2147483647;";
+      document.body.appendChild(dragGhost);
+    }
+    dragGhost.textContent = label;
+    dragGhost.style.left = `${x + 14}px`;
+    dragGhost.style.top = `${y + 12}px`;
+  };
+  const handleBlockDrag = (cmd) => {
+    const rect = panel?.frameRect();
+    if (!rect || !dropTarget) {
+      if (cmd.phase !== "move") hideDragGhost();
+      dropTarget?.cancelHover();
+      return;
+    }
+    const x = rect.left + cmd.x;
+    const y = rect.top + cmd.y;
+    if (cmd.phase === "move") {
+      moveDragGhost(x, y, cmd.label || cmd.blockType);
+      dropTarget.hoverAt(x, y);
+      return;
+    }
+    hideDragGhost();
+    if (cmd.phase === "cancel") {
+      dropTarget.cancelHover();
+      return;
+    }
+    const spotAt = dropTarget.dropAt(x, y);
+    if (spotAt) {
+      post({
+        type: "block-dropped",
+        payload: { stepIndex: previewStepIndex, blockType: cmd.blockType, ...spotAt }
+      });
+    }
+  };
   const handleCommand = (cmd) => {
     switch (cmd.type) {
       case "panel-ready":
@@ -3552,11 +3618,15 @@ function initBuilderMode() {
         if (manipulator?.isDragging()) pendingPreview = cmd;
         else applyPreview(cmd);
         break;
+      case "block-drag":
+        handleBlockDrag(cmd);
+        break;
       case "close-preview":
         manipulator?.detach();
         manipulator = null;
         dropTarget?.detach();
         dropTarget = null;
+        hideDragGhost();
         pendingPreview = null;
         closeGuidePreview();
         break;
@@ -3581,6 +3651,7 @@ function initBuilderMode() {
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    hideDragGhost();
     pendingPreview = null;
     closeGuidePreview();
     post({ type: "closed" });