dsh-sidebar-organizer 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 版本格式遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
 本文件的中文条目为默认语言；英文条目见英文段落（同一版本内）。
 
+## 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.1**: fixes jittery ordering after repeated drags and tightens
+> the “More” drop zone.
 
 ## What it does
 

package/README.md

@@ -4,7 +4,7 @@
 
 给 DSH（DeepSeek Harness）左侧栏左上角那块「全局面板」栏——插件、市场、技能管理、定时任务……那一列图标——加上**自定义排序**与**收纳**能力。
 
-> 当前版本 **0.4.0**：源码拆分为 `src/` 模块并加入构建脚本；补齐 AI 使用与代码来源声明；多语言文档。
+> 当前版本 **0.4.1**：修复反复拖动时的排序抖动，并收窄「更多」的投放判定。
 
 ## 现在能做什么
 
@@ -132,7 +132,8 @@ 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 — 修复反复拖动时的排序抖动与「更多」误收纳
 - [ ] 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.1).
  *
  * 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.1";
 
 const PANEL_SLOT = "sidebar.panellist";
 const ACTIONS_SLOT = "sidebar.panellist.actions";
@@ -424,8 +424,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 +516,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;
     }
@@ -778,6 +796,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();
@@ -955,16 +983,25 @@ 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");
+        }
+        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");
@@ -985,7 +1022,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";
@@ -1018,8 +1063,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 +1081,7 @@ function createRuntime(ctx) {
           }
         }
       } else {
-        reorderKey(key, target.index);
+        reorderKey(key, index);
       }
     }
   }

package/package.json

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

package/src/runtime.js

@@ -129,8 +129,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 +221,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;
     }
@@ -483,6 +501,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();
@@ -660,16 +688,25 @@ 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");
+        }
+        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");
@@ -690,7 +727,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";
@@ -723,8 +768,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 +786,7 @@ function createRuntime(ctx) {
           }
         }
       } else {
-        reorderKey(key, target.index);
+        reorderKey(key, index);
       }
     }
   }