dsh-sidebar-organizer 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 版本格式遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
 本文件的中文条目为默认语言；英文条目见英文段落（同一版本内）。
 
+## 0.4.2 — 2026-11-02
+
+- 拖动到「更多」按钮上时新增收纳动画：按钮呼吸高亮、图标下沉，拖影微微缩小
+  变淡；松手后拖影飞向按钮并缩小消失，随后该行被收纳，按钮播放一次「吞入」
+  回弹。只剩最后一行可见时不再静默失败，改为按钮左右轻抖提示不可收纳。
+- 动画只使用 `transform` / `opacity`（拖影飞入用 WAAPI，其余为 CSS），拖动热路
+  径不新增布局读取；同一时刻只允许一个飞入动画，连续快速收纳不会叠加拖影。
+- 尊重 `prefers-reduced-motion: reduce`：关闭呼吸、回弹与抖动，飞入改为立即
+  收纳。
+
+### English
+
+- Added the tuck-away animation on the “More” anchor: the button breathes, its
+  glyph dips, and the carried ghost shrinks slightly while armed; on release the
+  ghost flies into the anchor and fades, the row is tucked away, and the button
+  plays a short “swallow” bounce. When only one row is visible the anchor shakes
+  instead of silently refusing to hide it.
+- Only `transform` / `opacity` animate (the flight uses WAAPI, the rest is CSS),
+  the drag hot path gains no layout reads, and a single flight runs at a time so
+  rapid drops cannot pile ghosts up.
+- Honors `prefers-reduced-motion: reduce`: no breathing, bounce or shake, and the
+  row is tucked away immediately.
+
+## 0.4.1 — 2026-11-02
+
+- 修复反复拖动时排序“抽搐”：落点改为按当前视觉顺序（`layout.order` +
+  内联 `style.order`）计算，并把目标位置锚定到具体某一行的 key，而不是页面里
+  的 DOM 序号；长按成立时会先强制落一次布局，避免用上一帧的旧几何做判定。
+- 「更多」的投放判定收窄：只有指针真正落在「更多」按钮矩形内、且位于最后一
+  行下方时才收纳，拖到列表末尾不再被误判成收纳。
+
+### English
+
+- Fixed jittery ordering after repeated drags: the drop index is now computed
+  from the visual order (`layout.order` plus inline `style.order`) and anchored
+  to a row key instead of the DOM index, and a layout pass is forced when the
+  long-press succeeds so the frozen geometry is current.
+- Tightened the “More” drop zone: a row is tucked away only when the pointer is
+  inside the anchor's own rectangle and below the last row, so dropping at the
+  end of the list no longer hides it by mistake.
+
 ## 0.4.0 — 2026-11-02
 
 - 源码拆分为 `src/` 下的模块（constants / styles / storage / icons / slot /

package/README.en.md

@@ -6,8 +6,8 @@ Adds **custom ordering** and **tucking away** to the "global panels" strip at th
 top-left of the DSH (DeepSeek Harness) sidebar — the column of icons for plugins,
 marketplace, skills manager, scheduled tasks, and so on.
 
-> Version **0.4.0**: sources split into `src/` modules with a build script;
-> AI-usage and code-origin disclosure added; multilingual docs.
+> Version **0.4.2**: adds the tuck-away animation when dragging onto “More”
+> (breathing highlight, ghost flight, receive bounce).
 
 ## What it does
 

package/README.md

@@ -4,7 +4,7 @@
 
 给 DSH（DeepSeek Harness）左侧栏左上角那块「全局面板」栏——插件、市场、技能管理、定时任务……那一列图标——加上**自定义排序**与**收纳**能力。
 
-> 当前版本 **0.4.0**：源码拆分为 `src/` 模块并加入构建脚本；补齐 AI 使用与代码来源声明；多语言文档。
+> 当前版本 **0.4.2**：拖动到「更多」时新增收纳动画（按钮呼吸高亮、拖影飞入收纳）。
 
 ## 现在能做什么
 
@@ -133,6 +133,8 @@ npm run check   # 语法检查
 - [x] 0.3.5 — 指针捕获延后到拖动成立，修复收纳条目无法点击
 - [x] 0.3.6 — 点击收纳条目只打开面板，不再自动放回侧栏
 - [x] 0.4.0 — 源码模块化与构建脚本、多语言文档、AI 使用与代码来源声明
+- [x] 0.4.1 — 修复反复拖动时的排序抖动与「更多」误收纳
+- [x] 0.4.2 — 拖动到「更多」的收纳动画（呼吸高亮、拖影飞入、回弹与拒绝抖动）
 - [ ] 0.5.0 — 无障碍补强（菜单内上移 / 下移按钮、屏幕阅读器朗读顺序变化）
 
 ## 声明与引用

package/lib/client.js

@@ -1,5 +1,5 @@
 /**
- * dsh-sidebar-organizer — client half (v0.4.0).
+ * dsh-sidebar-organizer — client half (v0.4.2).
  *
  * GENERATED FILE — do not edit by hand.
  * Sources live in src/; run `npm run build` to regenerate.
@@ -15,7 +15,7 @@ window.__ModuleLoader__.load({
 /* Constants, locale strings and the module-level shared handles. */
 
 // Replaced at build time from package.json by scripts/build.mjs.
-const VERSION = "0.4.0";
+const VERSION = "0.4.2";
 
 const PANEL_SLOT = "sidebar.panellist";
 const ACTIONS_SLOT = "sidebar.panellist.actions";
@@ -92,10 +92,51 @@ const CSS = `
 button[data-dso-key].dso-dragging { opacity: 0.35; }
 button[data-dso-key].dso-pressing { transform: scale(0.94); transition: transform 120ms ease; }
 button[data-dso-key] { -webkit-user-select: none; user-select: none; }
-button[data-dso-key].dso-drop-more {
+/* The "More" anchor, armed: it breathes a ring and dips its glyph to read as
+   "release here and this row drops into me". */
+button.dso-drop-more {
   outline: 2px dashed var(--dsw-alias-state-business-primary, #4d6bfe);
   outline-offset: -2px;
   background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08));
+  animation: dso-more-breathe 1100ms ease-in-out infinite;
+}
+button.dso-drop-more span[aria-hidden="true"] {
+  transform: translateY(2px) scale(0.88);
+  transition: transform 160ms ease;
+}
+@keyframes dso-more-breathe {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0.38); }
+  55% { box-shadow: 0 0 0 8px rgba(77, 107, 254, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0); }
+}
+@keyframes dso-more-receive {
+  0% { transform: scale(1); }
+  35% { transform: scale(0.86); }
+  70% { transform: scale(1.06); }
+  100% { transform: scale(1); }
+}
+button.dso-drop-receive { animation: dso-more-receive 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
+@keyframes dso-drop-reject {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-4px); }
+  40% { transform: translateX(4px); }
+  60% { transform: translateX(-3px); }
+  80% { transform: translateX(2px); }
+}
+button.dso-drop-reject { animation: dso-drop-reject 240ms ease; }
+/* Carrying a row towards the anchor: the ghost dims and shrinks a little, so
+   its eventual absorption does not feel like a jump. */
+.dso-ghost.dso-ghost-armed {
+  opacity: 0.82;
+  transform: scale(0.94);
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  button.dso-drop-more,
+  button.dso-drop-receive,
+  button.dso-drop-reject { animation: none !important; }
+  .dso-ghost,
+  .dso-ghost.dso-ghost-armed { transition: none !important; }
 }
 body.dso-dragging,
 body.dso-dragging * { cursor: grabbing !important; }
@@ -312,6 +353,7 @@ function createRuntime(ctx) {
     passDeferred: false,
     menuListeners: new Set(),
     dismissMenu: null,
+    absorbing: null,
   };
 
   function log(...args) {
@@ -424,8 +466,24 @@ function createRuntime(ctx) {
     return { nav, rows, moreHost, moreButton };
   }
 
+  /**
+   * Keys of the rows currently visible in the strip, in the order the user sees
+   * them — i.e. the persisted layout order, NOT the DOM order. The sidebar keeps
+   * rendering rows in registration order and we only move them with CSS
+   * `order`, so a DOM-order list would shift every time a drag committed and
+   * make drops land somewhere other than where the user released the pointer.
+   */
   function visibleKeys(rows) {
-    return rows.filter((row) => !row.hidden).map((row) => row.key);
+    const layout = readLayout();
+    const visible = rows.filter((row) => !row.hidden).map((row) => row.key);
+    const ordered = [];
+    for (const key of layout.order) {
+      if (visible.includes(key) && !ordered.includes(key)) ordered.push(key);
+    }
+    for (const key of visible) {
+      if (!ordered.includes(key)) ordered.push(key);
+    }
+    return ordered;
   }
 
   function applyOrder(nav, rows, moreHost, moreButton) {
@@ -500,11 +558,13 @@ function createRuntime(ctx) {
     }
   }
 
-  function pass() {
+  function pass(force) {
     if (!alive()) return;
     // A pass would fight the drag ghost for layout: rows must not move while a
-    // row is being carried. Re-run once the gesture is over.
-    if (state.gesture) {
+    // row is being carried. Re-run once the gesture is over. `force` is used
+    // right before a drag starts to make sure the DOM already reflects the
+    // persisted order, so frozen rects and the committed order agree.
+    if (state.gesture && !force) {
       state.passDeferred = true;
       return;
     }
@@ -676,9 +736,10 @@ function createRuntime(ctx) {
 
   /* --- drag gesture ------------------------------------------------ */
 
-  function clearGesture() {
+  function clearGesture(options) {
     const gesture = state.gesture;
     if (!gesture) return;
+    const keepGhost = Boolean(options && options.keepGhost);
     state.gesture = null;
     if (gesture.timer) window.clearTimeout(gesture.timer);
     if (gesture.pressTimer) window.clearTimeout(gesture.pressTimer);
@@ -699,7 +760,11 @@ function createRuntime(ctx) {
         /* the element may already be detached */
       }
     }
-    if (gesture.ghost && gesture.ghost.parentNode) gesture.ghost.remove();
+    if (gesture.ghost) {
+      gesture.ghost.classList.remove("dso-ghost-armed");
+      // A drop on the "More" anchor keeps the ghost alive for the absorb flight.
+      if (!keepGhost && gesture.ghost.parentNode) gesture.ghost.remove();
+    }
     if (gesture.indicator && gesture.indicator.parentNode) gesture.indicator.remove();
     if (gesture.element) {
       gesture.element.classList.remove("dso-dragging");
@@ -778,6 +843,16 @@ function createRuntime(ctx) {
       clearGesture();
       return;
     }
+    // Flush any pending layout before freezing rects: after a previous drop the
+    // rAF pass may not have run yet, and stale visuals would make the next drop
+    // land somewhere else than where the pointer is.
+    try {
+      pass(true);
+    } catch (error) {
+      /* a failed flush must not block the drag */
+    }
+    if (!element.isConnected) element = locateRowButton(gesture.key) || element;
+    gesture.element = element;
     const rect = element.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
       clearGesture();
@@ -909,6 +984,96 @@ function createRuntime(ctx) {
     );
   }
 
+  function prefersReducedMotion() {
+    try {
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /** Replay a one-shot CSS animation class, even if it is already on. */
+  function pulseClass(element, className, duration) {
+    if (!element) return;
+    element.classList.remove(className);
+    // force a style flush so a repeated pulse restarts instead of being ignored
+    void element.offsetWidth;
+    element.classList.add(className);
+    window.setTimeout(() => element.classList.remove(className), duration);
+  }
+
+  /** The carried row leans towards the anchor: dim and shrink the ghost. */
+  function setGhostArmed(gesture, armed) {
+    const ghost = gesture.ghost;
+    if (!ghost || !ghost.isConnected) return;
+    if (ghost.classList.contains("dso-ghost-armed") === armed) return;
+    ghost.classList.toggle("dso-ghost-armed", armed);
+  }
+
+  /**
+   * Fly the carried ghost into the "More" anchor, then tuck the row away.
+   * Only transform/opacity animate, and only one flight runs at a time; a drop
+   * that arrives mid-flight lands immediately so ghosts can never pile up.
+   */
+  function absorbIntoMore(gesture) {
+    const moreButton =
+      gesture.moreButton && gesture.moreButton.isConnected ? gesture.moreButton : null;
+    const ghost = gesture.ghost;
+    if (!ghost || !ghost.isConnected || !moreButton || prefersReducedMotion() || state.absorbing) {
+      if (moreButton) pulseClass(moreButton, "dso-drop-receive", 260);
+      if (ghost && ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+      return;
+    }
+
+    const ghostRect = ghost.getBoundingClientRect();
+    const moreRect = moreButton.getBoundingClientRect();
+    const dx = moreRect.left + moreRect.width / 2 - (ghostRect.left + ghostRect.width / 2);
+    const dy = moreRect.top + moreRect.height / 2 - (ghostRect.top + ghostRect.height / 2);
+
+    let animation = null;
+    try {
+      animation = ghost.animate(
+        [
+          { transform: "translate(0px, 0px) scale(1)", opacity: 0.96, offset: 0 },
+          {
+            transform: `translate(${dx * 0.55}px, ${dy * 0.55}px) scale(0.7)`,
+            opacity: 0.9,
+            offset: 0.55,
+          },
+          {
+            transform: `translate(${dx}px, ${dy}px) scale(0.12)`,
+            opacity: 0,
+            offset: 1,
+          },
+        ],
+        { duration: 180, easing: "cubic-bezier(.2,.7,.3,1)", fill: "forwards" }
+      );
+    } catch (error) {
+      animation = null;
+    }
+
+    pulseClass(moreButton, "dso-drop-receive", 260);
+
+    if (!animation) {
+      if (ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+      return;
+    }
+
+    state.absorbing = animation;
+    const finish = () => {
+      if (state.absorbing === animation) state.absorbing = null;
+      if (ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+    };
+    if (animation.finished && typeof animation.finished.then === "function") {
+      animation.finished.then(finish, finish);
+    } else {
+      window.setTimeout(finish, 200);
+    }
+  }
+
   function updateTarget(gesture) {
     const indicator = gesture.indicator;
     if (!indicator) return;
@@ -955,21 +1120,32 @@ function createRuntime(ctx) {
       gesture.target = null;
     }
 
-    // Dropping a sidebar row on the "More" anchor tucks it away.
-    if (gesture.source === "nav" && snapshot.moreRect && insideRect(snapshot.moreRect, x, y, 6)) {
-      if (gesture.moreButton !== snapshot.moreButton) {
-        if (gesture.moreButton) gesture.moreButton.classList.remove("dso-drop-more");
-        gesture.moreButton = snapshot.moreButton;
-        if (gesture.moreButton) gesture.moreButton.classList.add("dso-drop-more");
+    // Dropping a sidebar row on the "More" anchor tucks it away. The anchor is
+    // a small target: require the pointer to be inside its own rectangle
+    // (no padding) and strictly below the last row, otherwise a drop meant for
+    // "end of the strip" would quietly hide the row instead of reordering it.
+    if (gesture.source === "nav" && snapshot.moreRect) {
+      const lastBottom = others.length
+        ? others[others.length - 1].rect.top + others[others.length - 1].rect.height
+        : -Infinity;
+      const overMore = insideRect(snapshot.moreRect, x, y, 0) && y > lastBottom + 1;
+      if (overMore) {
+        if (gesture.moreButton !== snapshot.moreButton) {
+          if (gesture.moreButton) gesture.moreButton.classList.remove("dso-drop-more");
+          gesture.moreButton = snapshot.moreButton;
+          if (gesture.moreButton) gesture.moreButton.classList.add("dso-drop-more");
+        }
+        setGhostArmed(gesture, true);
+        if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
+        gesture.target = { kind: "hide" };
+        return;
       }
-      if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
-      gesture.target = { kind: "hide" };
-      return;
     }
     if (gesture.moreButton) {
       gesture.moreButton.classList.remove("dso-drop-more");
       gesture.moreButton = null;
     }
+    setGhostArmed(gesture, false);
 
     if (!insideRect(snapshot.navRect, x, y, 24) || others.length === 0) {
       if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
@@ -985,7 +1161,15 @@ function createRuntime(ctx) {
         break;
       }
     }
-    gesture.target = { kind: "place", index };
+    // Remember which row the drop line sits in front of. Indices are computed
+    // from frozen rects (the visual order at drag start) while commits apply to
+    // the persisted order, so carrying the neighbour key keeps the two aligned
+    // even when another drop has just rewritten the layout.
+    gesture.target = {
+      kind: "place",
+      index,
+      beforeKey: index < others.length ? others[index].key : null,
+    };
 
     if (index === snapshot.lastIndex) {
       if (indicator.dataset.visible !== "1") indicator.dataset.visible = "1";
@@ -1010,7 +1194,15 @@ function createRuntime(ctx) {
     const { key, target, source } = gesture;
     if (!target) return;
     if (target.kind === "hide") {
-      hideKey(key);
+      // Last-visible-row protection lives in hideKey; bounce the anchor instead
+      // of starting an absorb flight that would end in nothing.
+      const { rows } = visibleRows();
+      const visible = visibleKeys(rows);
+      if (!visible.includes(key) || visible.length <= 1) {
+        pulseClass(gesture.moreButton, "dso-drop-reject", 240);
+        return;
+      }
+      absorbIntoMore(gesture);
       return;
     }
     if (target.kind === "place-menu") {
@@ -1018,8 +1210,16 @@ function createRuntime(ctx) {
       return;
     }
     if (target.kind === "place") {
+      // Map the drop position onto the persisted order (see visibleKeys): the
+      // anchor row is the key we resolved from the frozen rects.
+      const { rows } = visibleRows();
+      const others = visibleKeys(rows).filter((item) => item !== key);
+      let index = Math.max(0, Math.min(target.index, others.length));
+      if (target.beforeKey && others.includes(target.beforeKey)) {
+        index = others.indexOf(target.beforeKey);
+      }
       if (source === "menu") {
-        revealKey(key, target.index);
+        revealKey(key, index);
         if (state.dismissMenu) {
           try {
             state.dismissMenu();
@@ -1028,7 +1228,7 @@ function createRuntime(ctx) {
           }
         }
       } else {
-        reorderKey(key, target.index);
+        reorderKey(key, index);
       }
     }
   }
@@ -1062,7 +1262,10 @@ function createRuntime(ctx) {
     if (!gesture) return;
     if (gesture.phase === "dragging") {
       const pending = gesture;
-      clearGesture();
+      // A drop on the anchor keeps the ghost for the absorb flight; every other
+      // drop tears the drag down first so commits never see stale classes.
+      const absorbing = Boolean(pending.target && pending.target.kind === "hide");
+      clearGesture({ keepGhost: absorbing });
       commitDrag(pending);
       state.guardUntil = Date.now() + CLICK_GUARD_MS;
       return;
@@ -1201,6 +1404,21 @@ function createRuntime(ctx) {
   function stop() {
     state.stopped = true;
     clearGesture();
+    if (state.absorbing) {
+      try {
+        state.absorbing.cancel();
+      } catch (error) {
+        /* ignore */
+      }
+      state.absorbing = null;
+    }
+    // the absorb flight may have left a ghost or a one-shot class behind
+    for (const ghost of document.querySelectorAll(".dso-ghost")) ghost.remove();
+    for (const node of document.querySelectorAll(
+      ".dso-drop-more, .dso-drop-receive, .dso-drop-reject"
+    )) {
+      node.classList.remove("dso-drop-more", "dso-drop-receive", "dso-drop-reject");
+    }
     if (state.pollTimer) {
       window.clearInterval(state.pollTimer);
       state.pollTimer = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidebar-organizer",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "description": "DSH 侧栏面板整理器：长按拖动排序、拖入/拖出「更多」收纳、键盘排序",
   "type": "module",

package/src/runtime.js

@@ -17,6 +17,7 @@ function createRuntime(ctx) {
     passDeferred: false,
     menuListeners: new Set(),
     dismissMenu: null,
+    absorbing: null,
   };
 
   function log(...args) {
@@ -129,8 +130,24 @@ function createRuntime(ctx) {
     return { nav, rows, moreHost, moreButton };
   }
 
+  /**
+   * Keys of the rows currently visible in the strip, in the order the user sees
+   * them — i.e. the persisted layout order, NOT the DOM order. The sidebar keeps
+   * rendering rows in registration order and we only move them with CSS
+   * `order`, so a DOM-order list would shift every time a drag committed and
+   * make drops land somewhere other than where the user released the pointer.
+   */
   function visibleKeys(rows) {
-    return rows.filter((row) => !row.hidden).map((row) => row.key);
+    const layout = readLayout();
+    const visible = rows.filter((row) => !row.hidden).map((row) => row.key);
+    const ordered = [];
+    for (const key of layout.order) {
+      if (visible.includes(key) && !ordered.includes(key)) ordered.push(key);
+    }
+    for (const key of visible) {
+      if (!ordered.includes(key)) ordered.push(key);
+    }
+    return ordered;
   }
 
   function applyOrder(nav, rows, moreHost, moreButton) {
@@ -205,11 +222,13 @@ function createRuntime(ctx) {
     }
   }
 
-  function pass() {
+  function pass(force) {
     if (!alive()) return;
     // A pass would fight the drag ghost for layout: rows must not move while a
-    // row is being carried. Re-run once the gesture is over.
-    if (state.gesture) {
+    // row is being carried. Re-run once the gesture is over. `force` is used
+    // right before a drag starts to make sure the DOM already reflects the
+    // persisted order, so frozen rects and the committed order agree.
+    if (state.gesture && !force) {
       state.passDeferred = true;
       return;
     }
@@ -381,9 +400,10 @@ function createRuntime(ctx) {
 
   /* --- drag gesture ------------------------------------------------ */
 
-  function clearGesture() {
+  function clearGesture(options) {
     const gesture = state.gesture;
     if (!gesture) return;
+    const keepGhost = Boolean(options && options.keepGhost);
     state.gesture = null;
     if (gesture.timer) window.clearTimeout(gesture.timer);
     if (gesture.pressTimer) window.clearTimeout(gesture.pressTimer);
@@ -404,7 +424,11 @@ function createRuntime(ctx) {
         /* the element may already be detached */
       }
     }
-    if (gesture.ghost && gesture.ghost.parentNode) gesture.ghost.remove();
+    if (gesture.ghost) {
+      gesture.ghost.classList.remove("dso-ghost-armed");
+      // A drop on the "More" anchor keeps the ghost alive for the absorb flight.
+      if (!keepGhost && gesture.ghost.parentNode) gesture.ghost.remove();
+    }
     if (gesture.indicator && gesture.indicator.parentNode) gesture.indicator.remove();
     if (gesture.element) {
       gesture.element.classList.remove("dso-dragging");
@@ -483,6 +507,16 @@ function createRuntime(ctx) {
       clearGesture();
       return;
     }
+    // Flush any pending layout before freezing rects: after a previous drop the
+    // rAF pass may not have run yet, and stale visuals would make the next drop
+    // land somewhere else than where the pointer is.
+    try {
+      pass(true);
+    } catch (error) {
+      /* a failed flush must not block the drag */
+    }
+    if (!element.isConnected) element = locateRowButton(gesture.key) || element;
+    gesture.element = element;
     const rect = element.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
       clearGesture();
@@ -614,6 +648,96 @@ function createRuntime(ctx) {
     );
   }
 
+  function prefersReducedMotion() {
+    try {
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /** Replay a one-shot CSS animation class, even if it is already on. */
+  function pulseClass(element, className, duration) {
+    if (!element) return;
+    element.classList.remove(className);
+    // force a style flush so a repeated pulse restarts instead of being ignored
+    void element.offsetWidth;
+    element.classList.add(className);
+    window.setTimeout(() => element.classList.remove(className), duration);
+  }
+
+  /** The carried row leans towards the anchor: dim and shrink the ghost. */
+  function setGhostArmed(gesture, armed) {
+    const ghost = gesture.ghost;
+    if (!ghost || !ghost.isConnected) return;
+    if (ghost.classList.contains("dso-ghost-armed") === armed) return;
+    ghost.classList.toggle("dso-ghost-armed", armed);
+  }
+
+  /**
+   * Fly the carried ghost into the "More" anchor, then tuck the row away.
+   * Only transform/opacity animate, and only one flight runs at a time; a drop
+   * that arrives mid-flight lands immediately so ghosts can never pile up.
+   */
+  function absorbIntoMore(gesture) {
+    const moreButton =
+      gesture.moreButton && gesture.moreButton.isConnected ? gesture.moreButton : null;
+    const ghost = gesture.ghost;
+    if (!ghost || !ghost.isConnected || !moreButton || prefersReducedMotion() || state.absorbing) {
+      if (moreButton) pulseClass(moreButton, "dso-drop-receive", 260);
+      if (ghost && ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+      return;
+    }
+
+    const ghostRect = ghost.getBoundingClientRect();
+    const moreRect = moreButton.getBoundingClientRect();
+    const dx = moreRect.left + moreRect.width / 2 - (ghostRect.left + ghostRect.width / 2);
+    const dy = moreRect.top + moreRect.height / 2 - (ghostRect.top + ghostRect.height / 2);
+
+    let animation = null;
+    try {
+      animation = ghost.animate(
+        [
+          { transform: "translate(0px, 0px) scale(1)", opacity: 0.96, offset: 0 },
+          {
+            transform: `translate(${dx * 0.55}px, ${dy * 0.55}px) scale(0.7)`,
+            opacity: 0.9,
+            offset: 0.55,
+          },
+          {
+            transform: `translate(${dx}px, ${dy}px) scale(0.12)`,
+            opacity: 0,
+            offset: 1,
+          },
+        ],
+        { duration: 180, easing: "cubic-bezier(.2,.7,.3,1)", fill: "forwards" }
+      );
+    } catch (error) {
+      animation = null;
+    }
+
+    pulseClass(moreButton, "dso-drop-receive", 260);
+
+    if (!animation) {
+      if (ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+      return;
+    }
+
+    state.absorbing = animation;
+    const finish = () => {
+      if (state.absorbing === animation) state.absorbing = null;
+      if (ghost.parentNode) ghost.remove();
+      if (alive()) hideKey(gesture.key);
+    };
+    if (animation.finished && typeof animation.finished.then === "function") {
+      animation.finished.then(finish, finish);
+    } else {
+      window.setTimeout(finish, 200);
+    }
+  }
+
   function updateTarget(gesture) {
     const indicator = gesture.indicator;
     if (!indicator) return;
@@ -660,21 +784,32 @@ function createRuntime(ctx) {
       gesture.target = null;
     }
 
-    // Dropping a sidebar row on the "More" anchor tucks it away.
-    if (gesture.source === "nav" && snapshot.moreRect && insideRect(snapshot.moreRect, x, y, 6)) {
-      if (gesture.moreButton !== snapshot.moreButton) {
-        if (gesture.moreButton) gesture.moreButton.classList.remove("dso-drop-more");
-        gesture.moreButton = snapshot.moreButton;
-        if (gesture.moreButton) gesture.moreButton.classList.add("dso-drop-more");
+    // Dropping a sidebar row on the "More" anchor tucks it away. The anchor is
+    // a small target: require the pointer to be inside its own rectangle
+    // (no padding) and strictly below the last row, otherwise a drop meant for
+    // "end of the strip" would quietly hide the row instead of reordering it.
+    if (gesture.source === "nav" && snapshot.moreRect) {
+      const lastBottom = others.length
+        ? others[others.length - 1].rect.top + others[others.length - 1].rect.height
+        : -Infinity;
+      const overMore = insideRect(snapshot.moreRect, x, y, 0) && y > lastBottom + 1;
+      if (overMore) {
+        if (gesture.moreButton !== snapshot.moreButton) {
+          if (gesture.moreButton) gesture.moreButton.classList.remove("dso-drop-more");
+          gesture.moreButton = snapshot.moreButton;
+          if (gesture.moreButton) gesture.moreButton.classList.add("dso-drop-more");
+        }
+        setGhostArmed(gesture, true);
+        if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
+        gesture.target = { kind: "hide" };
+        return;
       }
-      if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
-      gesture.target = { kind: "hide" };
-      return;
     }
     if (gesture.moreButton) {
       gesture.moreButton.classList.remove("dso-drop-more");
       gesture.moreButton = null;
     }
+    setGhostArmed(gesture, false);
 
     if (!insideRect(snapshot.navRect, x, y, 24) || others.length === 0) {
       if (indicator.dataset.visible !== "0") indicator.dataset.visible = "0";
@@ -690,7 +825,15 @@ function createRuntime(ctx) {
         break;
       }
     }
-    gesture.target = { kind: "place", index };
+    // Remember which row the drop line sits in front of. Indices are computed
+    // from frozen rects (the visual order at drag start) while commits apply to
+    // the persisted order, so carrying the neighbour key keeps the two aligned
+    // even when another drop has just rewritten the layout.
+    gesture.target = {
+      kind: "place",
+      index,
+      beforeKey: index < others.length ? others[index].key : null,
+    };
 
     if (index === snapshot.lastIndex) {
       if (indicator.dataset.visible !== "1") indicator.dataset.visible = "1";
@@ -715,7 +858,15 @@ function createRuntime(ctx) {
     const { key, target, source } = gesture;
     if (!target) return;
     if (target.kind === "hide") {
-      hideKey(key);
+      // Last-visible-row protection lives in hideKey; bounce the anchor instead
+      // of starting an absorb flight that would end in nothing.
+      const { rows } = visibleRows();
+      const visible = visibleKeys(rows);
+      if (!visible.includes(key) || visible.length <= 1) {
+        pulseClass(gesture.moreButton, "dso-drop-reject", 240);
+        return;
+      }
+      absorbIntoMore(gesture);
       return;
     }
     if (target.kind === "place-menu") {
@@ -723,8 +874,16 @@ function createRuntime(ctx) {
       return;
     }
     if (target.kind === "place") {
+      // Map the drop position onto the persisted order (see visibleKeys): the
+      // anchor row is the key we resolved from the frozen rects.
+      const { rows } = visibleRows();
+      const others = visibleKeys(rows).filter((item) => item !== key);
+      let index = Math.max(0, Math.min(target.index, others.length));
+      if (target.beforeKey && others.includes(target.beforeKey)) {
+        index = others.indexOf(target.beforeKey);
+      }
       if (source === "menu") {
-        revealKey(key, target.index);
+        revealKey(key, index);
         if (state.dismissMenu) {
           try {
             state.dismissMenu();
@@ -733,7 +892,7 @@ function createRuntime(ctx) {
           }
         }
       } else {
-        reorderKey(key, target.index);
+        reorderKey(key, index);
       }
     }
   }
@@ -767,7 +926,10 @@ function createRuntime(ctx) {
     if (!gesture) return;
     if (gesture.phase === "dragging") {
       const pending = gesture;
-      clearGesture();
+      // A drop on the anchor keeps the ghost for the absorb flight; every other
+      // drop tears the drag down first so commits never see stale classes.
+      const absorbing = Boolean(pending.target && pending.target.kind === "hide");
+      clearGesture({ keepGhost: absorbing });
       commitDrag(pending);
       state.guardUntil = Date.now() + CLICK_GUARD_MS;
       return;
@@ -906,6 +1068,21 @@ function createRuntime(ctx) {
   function stop() {
     state.stopped = true;
     clearGesture();
+    if (state.absorbing) {
+      try {
+        state.absorbing.cancel();
+      } catch (error) {
+        /* ignore */
+      }
+      state.absorbing = null;
+    }
+    // the absorb flight may have left a ghost or a one-shot class behind
+    for (const ghost of document.querySelectorAll(".dso-ghost")) ghost.remove();
+    for (const node of document.querySelectorAll(
+      ".dso-drop-more, .dso-drop-receive, .dso-drop-reject"
+    )) {
+      node.classList.remove("dso-drop-more", "dso-drop-receive", "dso-drop-reject");
+    }
     if (state.pollTimer) {
       window.clearInterval(state.pollTimer);
       state.pollTimer = 0;

package/src/styles.js

@@ -31,10 +31,51 @@ const CSS = `
 button[data-dso-key].dso-dragging { opacity: 0.35; }
 button[data-dso-key].dso-pressing { transform: scale(0.94); transition: transform 120ms ease; }
 button[data-dso-key] { -webkit-user-select: none; user-select: none; }
-button[data-dso-key].dso-drop-more {
+/* The "More" anchor, armed: it breathes a ring and dips its glyph to read as
+   "release here and this row drops into me". */
+button.dso-drop-more {
   outline: 2px dashed var(--dsw-alias-state-business-primary, #4d6bfe);
   outline-offset: -2px;
   background: var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08));
+  animation: dso-more-breathe 1100ms ease-in-out infinite;
+}
+button.dso-drop-more span[aria-hidden="true"] {
+  transform: translateY(2px) scale(0.88);
+  transition: transform 160ms ease;
+}
+@keyframes dso-more-breathe {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0.38); }
+  55% { box-shadow: 0 0 0 8px rgba(77, 107, 254, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0); }
+}
+@keyframes dso-more-receive {
+  0% { transform: scale(1); }
+  35% { transform: scale(0.86); }
+  70% { transform: scale(1.06); }
+  100% { transform: scale(1); }
+}
+button.dso-drop-receive { animation: dso-more-receive 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
+@keyframes dso-drop-reject {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-4px); }
+  40% { transform: translateX(4px); }
+  60% { transform: translateX(-3px); }
+  80% { transform: translateX(2px); }
+}
+button.dso-drop-reject { animation: dso-drop-reject 240ms ease; }
+/* Carrying a row towards the anchor: the ghost dims and shrinks a little, so
+   its eventual absorption does not feel like a jump. */
+.dso-ghost.dso-ghost-armed {
+  opacity: 0.82;
+  transform: scale(0.94);
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  button.dso-drop-more,
+  button.dso-drop-receive,
+  button.dso-drop-reject { animation: none !important; }
+  .dso-ghost,
+  .dso-ghost.dso-ghost-armed { transition: none !important; }
 }
 body.dso-dragging,
 body.dso-dragging * { cursor: grabbing !important; }