veo-sdk 0.5.3 → 0.5.5

package/dist/index.cjs

@@ -506,7 +506,15 @@ function buildStepContent(step, doc, callbacks) {
 function buildContentNodes(step, doc) {
   const blocks = normalizeBlocks(step);
   if (blocks) {
-    return blocks.filter((b) => b.type !== "button").map((b) => buildContentBlock(b, doc)).filter((n) => n !== null);
+    const nodes2 = [];
+    for (const { block, idx } of blocks) {
+      if (block.type === "button") continue;
+      const node = buildContentBlock(block, doc);
+      if (!node) continue;
+      node.dataset.veoIdx = String(idx);
+      nodes2.push(node);
+    }
+    return nodes2;
   }
   const nodes = [];
   if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
@@ -568,7 +576,8 @@ function renderLegacyStep(container, step, doc, callbacks) {
 }
 function normalizeBlocks(step) {
   if (!Array.isArray(step.blocks) || step.blocks.length === 0) return null;
-  const valid = step.blocks.filter((b) => {
+  const valid = step.blocks.map((block, idx) => ({ block, idx })).filter((entry) => {
+    const b = entry.block;
     if (!b || typeof b !== "object") return false;
     if (b.type === "image") return typeof b.url === "string" && isSafeUrl(b.url);
     return b.type === "title" || b.type === "text" || b.type === "button";
@@ -578,13 +587,14 @@ function normalizeBlocks(step) {
 function renderBlocks(container, blocks, doc, callbacks) {
   let i = 0;
   while (i < blocks.length) {
-    const block = blocks[i];
-    if (block?.type === "button") {
+    const entry = blocks[i];
+    if (entry?.block.type === "button") {
       const actions = doc.createElement("div");
       actions.className = "veo-guide-actions";
+      actions.dataset.veoIdx = String(entry.idx);
       let rowAlign;
-      while (i < blocks.length && blocks[i]?.type === "button") {
-        const btnBlock = blocks[i];
+      while (i < blocks.length && blocks[i]?.block.type === "button") {
+        const btnBlock = blocks[i].block;
         if (!rowAlign) {
           const a = btnBlock.style?.align;
           if (a === "left" || a === "center" || a === "right") rowAlign = a;
@@ -596,8 +606,11 @@ function renderBlocks(container, blocks, doc, callbacks) {
       container.appendChild(actions);
       continue;
     }
-    const node = buildContentBlock(block, doc);
-    if (node) container.appendChild(node);
+    const node = entry ? buildContentBlock(entry.block, doc) : null;
+    if (node && entry) {
+      node.dataset.veoIdx = String(entry.idx);
+      container.appendChild(node);
+    }
     i++;
   }
 }
@@ -3051,6 +3064,117 @@ var init_guide_preview = __esm({
   }
 });
 
+// src/plugins/builder/block-drop-target.ts
+function attachBlockDropTarget(options) {
+  const { host, stepIndex, onDrop } = options;
+  const doc = host.ownerDocument;
+  let line = null;
+  let spot = null;
+  const contentEl = () => host.shadowRoot?.querySelector(".veo-guide-content") ?? null;
+  const blockChildren = (container) => Array.from(container.children).filter(
+    (el) => el instanceof HTMLElement && el.dataset.veoIdx !== void 0
+  );
+  const hideLine = () => {
+    line?.remove();
+    line = null;
+    spot = null;
+  };
+  const showLine = (at) => {
+    if (!line) {
+      line = doc.createElement("div");
+      line.style.cssText = "position:fixed;height:3px;border-radius:2px;background:#FF5B35;box-shadow:0 0 0 1px rgba(255,255,255,0.65);pointer-events:none;z-index:2147483647;";
+      host.shadowRoot?.appendChild(line);
+    }
+    line.style.left = `${at.rect.left + 4}px`;
+    line.style.width = `${Math.max(0, at.rect.width - 8)}px`;
+    line.style.top = `${at.y - 1.5}px`;
+  };
+  const isBlockDrag = (event) => {
+    const types = event.dataTransfer?.types;
+    return !!types && Array.from(types).includes(VEO_BLOCK_MIME);
+  };
+  const NEAR_PX = 48;
+  const locate = (clientY) => {
+    const container = contentEl();
+    if (!container) return null;
+    const rect = container.getBoundingClientRect();
+    const kids = blockChildren(container);
+    let beforeIndex = null;
+    let y = kids.length === 0 ? rect.top + rect.height / 2 : 0;
+    for (const kid of kids) {
+      const r = kid.getBoundingClientRect();
+      if (clientY < r.top + r.height / 2) {
+        const idx = Number(kid.dataset.veoIdx);
+        beforeIndex = Number.isFinite(idx) ? idx : null;
+        y = r.top;
+        break;
+      }
+      y = r.bottom;
+    }
+    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.clientY);
+    if (!at) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+    spot = at;
+    showLine(at);
+  };
+  const onDropEvent = (event) => {
+    if (!isBlockDrag(event)) return;
+    event.preventDefault();
+    const blockType = event.dataTransfer?.getData(VEO_BLOCK_MIME) ?? "";
+    const at = spot ?? locate(event.clientY);
+    hideLine();
+    if (!blockType || !at) return;
+    onDrop({ stepIndex, blockType, beforeIndex: at.beforeIndex });
+  };
+  const onDragLeave = (event) => {
+    const to = event.relatedTarget;
+    if (to instanceof Node && (to === host || host.contains(to))) return;
+    hideLine();
+  };
+  host.addEventListener("dragover", onDragOver);
+  host.addEventListener("drop", onDropEvent);
+  host.addEventListener("dragleave", onDragLeave);
+  return {
+    hoverAt,
+    dropAt,
+    cancelHover: hideLine,
+    detach() {
+      host.removeEventListener("dragover", onDragOver);
+      host.removeEventListener("drop", onDropEvent);
+      host.removeEventListener("dragleave", onDragLeave);
+      hideLine();
+    }
+  };
+}
+var VEO_BLOCK_MIME;
+var init_block_drop_target = __esm({
+  "src/plugins/builder/block-drop-target.ts"() {
+    VEO_BLOCK_MIME = "application/x-veo-block";
+  }
+});
+
 // src/plugins/builder/bridge-protocol.ts
 var VEO_BUILDER_SOURCE;
 var init_bridge_protocol = __esm({
@@ -3063,7 +3187,7 @@ var init_bridge_protocol = __esm({
 // src/plugins/builder/builder-panel.ts
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
-    return { target: () => null, teardown: () => {
+    return { target: () => null, frameRect: () => null, teardown: () => {
     } };
   }
   const panelUrl = buildPanelUrl(opts);
@@ -3180,6 +3304,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();
@@ -3701,6 +3826,9 @@ function initBuilderMode() {
   let panel = null;
   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) => {
@@ -3709,6 +3837,9 @@ function initBuilderMode() {
   const applyPreview = (cmd) => {
     manipulator?.detach();
     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) => {
@@ -3727,8 +3858,54 @@ function initBuilderMode() {
           applyPreview(queued);
         }
       });
+      dropTarget = attachBlockDropTarget({
+        host,
+        stepIndex: cmd.guide.startStepIndex ?? 0,
+        onDrop: (payload) => post({ type: "block-dropped", payload })
+      });
     });
   };
+  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":
@@ -3758,9 +3935,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;
@@ -3783,6 +3966,9 @@ function initBuilderMode() {
     picker = null;
     manipulator?.detach();
     manipulator = null;
+    dropTarget?.detach();
+    dropTarget = null;
+    hideDragGhost();
     pendingPreview = null;
     closeGuidePreview();
     post({ type: "closed" });
@@ -3861,6 +4047,7 @@ var init_builder_mode = __esm({
     init_builder_token();
     init_safe_env();
     init_guide_preview();
+    init_block_drop_target();
     init_bridge_protocol();
     init_builder_panel();
     init_design_manipulator();
@@ -3997,6 +4184,8 @@ var init_builder_session = __esm({
 // src/plugins/builder/index.ts
 var builder_exports = {};
 __export(builder_exports, {
+  VEO_BLOCK_MIME: () => VEO_BLOCK_MIME,
+  attachBlockDropTarget: () => attachBlockDropTarget,
   attachDesignManipulator: () => attachDesignManipulator,
   createBuilderSession: () => createBuilderSession,
   initBuilderMode: () => initBuilderMode,
@@ -4005,6 +4194,7 @@ __export(builder_exports, {
 });
 var init_builder = __esm({
   "src/plugins/builder/index.ts"() {
+    init_block_drop_target();
     init_builder_mode();
     init_builder_session();
     init_design_manipulator();