dsh-sidebar-organizer 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 版本格式遵循 [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` +

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.1**: fixes jittery ordering after repeated drags and tightens
-> the “More” drop zone.
+> 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.1**：修复反复拖动时的排序抖动，并收窄「更多」的投放判定。
+> 当前版本 **0.4.2**：拖动到「更多」时新增收纳动画（按钮呼吸高亮、拖影飞入收纳）。
 
 ## 现在能做什么
 
@@ -132,8 +132,9 @@ npm run check   # 语法检查
 - [x] 0.3.4 — 图标内嵌 id 加前缀；「已收纳」内排序
 - [x] 0.3.5 — 指针捕获延后到拖动成立，修复收纳条目无法点击
 - [x] 0.3.6 — 点击收纳条目只打开面板，不再自动放回侧栏
-- [x] 0.4.0 — 源码模块化与构建脚本、多语言文档、AI 使用与代码来源声明
+- [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.1).
+ * 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.1";
+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) {
@@ -694,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);
@@ -717,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");
@@ -937,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;
@@ -998,6 +1135,7 @@ function createRuntime(ctx) {
           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;
@@ -1007,6 +1145,7 @@ function createRuntime(ctx) {
       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";
@@ -1055,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") {
@@ -1115,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;
@@ -1254,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.1",
+  "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) {
@@ -399,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);
@@ -422,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");
@@ -642,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;
@@ -703,6 +799,7 @@ function createRuntime(ctx) {
           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;
@@ -712,6 +809,7 @@ function createRuntime(ctx) {
       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";
@@ -760,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") {
@@ -820,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;
@@ -959,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; }