dsh-m 0.9.56 → 0.9.57

package/CHANGELOG.md

@@ -8,6 +8,13 @@ The full release history of dsh-m, maintained bilingually: **Chinese first, Engl
 
 ## 中文
 
+### 0.9.57 修复：精选切换后面板崩溃/无法重开 + 折叠筛选双框与 +N 重叠
+
+- **根因（0.9.56 真机复现）**：精选区的标签对象可能每次父级重渲染都重建；layout effect 依赖 `chips` 数组引用及自身更新的 `geom`，同步测量反复进入、最终触发 React `Maximum update depth exceeded`（#185）。React 清空面板树但留下 `#dshm-panel-root`，旧入口守卫只检查容器存在，导致点击入口永久无效。叠加折叠筛选定位壳和按钮的双边框、以及 +N 位置夹取/文档流试验在窄宽下压住相邻 chip。
+- **修复**：按实际渲染的分类 id/文案/计数生成稳定内容签名，layout effect 不再同步依赖自身 `geom`；预留槽变化改在上一轮状态提交后的 rAF 复测。回退 0.9.56 的 `display:none`/in-flow 反馈链，恢复分类全量占位 + 越界 `visibility:hidden`，以完整 `offsetTop` 按行纯派生隐藏数；+N 脱离文档流，独占右侧 52px 槽（筛选另占 96px），双类 CSS 选择器确保总预留不被 gutter 覆盖。末可见行顶按**去重行**而非第 N 颗 chip 计算。筛选外壳去边框仅保留定位；若崩溃留下无可见面板的空容器，再次点击时先移除再挂载。
+- **取舍**：+N 优先保证零重叠、正确计数和可重开；不再强求其贴着最后一颗分类。窄宽下边界分类自然少显示，`+N` 如实计入；展开态 `⌃` 仍在分类列表末尾。
+- **验证**：新增 3 个回归断言，累计 1224 测试全绿、typecheck 零错误；真实 DSH Web 加载候选客户端验证精选↔社区连续三次、关闭再开及崩溃残留空容器恢复；260–880px 六档 +N/chip/筛选相交面积恒 0，精选五类不出现错误 +N。
+
 ### 0.9.56 变更：ZoneChips +N 重叠根治——in-flow 文档流布局 + 折行减类（主人方案）
 
 - **缺陷（0.9.55 真机复现）**：折叠态 `+N` 采用「绝对定位 + contentW−48 夹取」，当末可见行剩余空间小于徽章宽时，徽章压住末可见 chip（真机：+9 压住「文档与渲染 61」右端计数）。
@@ -419,6 +426,13 @@ The full release history of dsh-m, maintained bilingually: **Chinese first, Engl
 
 ## English
 
+### Fixed in 0.9.57 — curated-zone update loop, dead panel entry, and collapsed filter/overflow overlaps
+
+- **Root cause (reproduced on 0.9.56)**: curated labels may get a fresh object on every parent render; the layout effect depended on the `chips` array identity and on its own `geom` update. Synchronous remeasurement repeatedly entered the same commit, eventually throwing React `Maximum update depth exceeded` (#185). React emptied the panel tree while leaving `#dshm-panel-root`; the old entry guard checked only for a container and silently blocked every later open. The pinned Filter wrapper also added a second border around its bordered button, while the clamped/inline `+N` iterations overlapped neighboring chips at narrow widths.
+- **Fix**: depend on a stable signature of rendered category IDs, labels and counts; defer geometry-dependent remeasurement to an animation frame after state commits. Retire the 0.9.56 `display:none`/in-flow feedback path in favor of a full in-flow chip layout with `visibility:hidden` beyond the clip; derive the hidden count from all chip row offsets. Give out-of-flow `+N` its own 52px right slot, separate from Filter's 96px, with a more specific selector so the total reservation wins the cascade. Measure the last visible **distinct row** rather than the Nth chip. Strip the redundant Filter-wrapper border; discard an orphaned panel root on the next open.
+- **Tradeoff**: correctness, zero overlap and reopenability take precedence over keeping `+N` flush against the last chip. Its count remains truthful; expanded `⌃` remains at list end.
+- **Verification**: three additional regression assertions, 1224 tests passing and clean typecheck; real DSH Web with the candidate client survived three curated↔community round trips, close/reopen and stale-root recovery; six widths from 260–880px showed zero badge/chip/Filter intersection, and curated's five categories showed no spurious `+N`.
+
 ### Fixed in 0.9.56 — ZoneChips +N overlap eradicated: in-flow document layout + wrap-yield-a-category (owner's design)
 
 - **Defect (reproduced on 0.9.55)**: the collapsed `+N` used "absolute positioning + contentW−48 clamp"; when the last visible row's leftover was narrower than the badge, the badge covered the last visible chip (real panel: +9 covering the tail of 文档与渲染 61).

package/lib/client.js

@@ -41,6 +41,7 @@ __export(market_state_exports, {
   registryNotice: () => registryNotice,
   resetPageOnFilterChange: () => resetPageOnFilterChange,
   searchSourceOf: () => searchSourceOf,
+  visibleRowTop: () => visibleRowTop,
   zoneChips: () => zoneChips
 });
 function toSafeInt(value, fallback, min, max) {
@@ -278,6 +279,20 @@ function clipTopOf(offsets, maxRows) {
   }
   return Infinity;
 }
+function visibleRowTop(offsets, maxRows) {
+  if (!Array.isArray(offsets) || !Number.isInteger(maxRows) || maxRows < 1) return 0;
+  let rows = 0;
+  let last = null;
+  for (const top of offsets) {
+    if (typeof top !== "number" || !Number.isFinite(top)) continue;
+    if (last === null || top !== last) {
+      rows += 1;
+      last = top;
+      if (rows === maxRows) return top;
+    }
+  }
+  return last ?? 0;
+}
 function autoExpandDecision(activeTop, clipTop, autoRefMatched, expanded) {
   const beyond = typeof activeTop === "number" && Number.isFinite(activeTop) && typeof clipTop === "number" && Number.isFinite(clipTop) && activeTop >= clipTop;
   if (!beyond || autoRefMatched) return { record: false, expand: false };
@@ -1558,7 +1573,7 @@ var h = React.createElement;
 var { useState, useEffect, useLayoutEffect, useCallback, useMemo, useRef } = React;
 var PLUGIN_ID = "dsh-m";
 var API = "/dshm";
-var { DEFAULT_PAGE_SIZE: DEFAULT_PAGE_SIZE2, MARKET_PAGE_SIZES: MARKET_PAGE_SIZES2, pageItems: pageItems2, createZoneState: createZoneState2, normalizeMarketQuery: normalizeMarketQuery2, resetPageOnFilterChange: resetPageOnFilterChange2, normalizeMarketResponse: normalizeMarketResponse2, registryNotice: registryNotice2, zoneChips: zoneChips2, marketNotice: marketNotice2, searchSourceOf: searchSourceOf2, mergeLatestFields: mergeLatestFields2, chipRows: chipRows2, countBeyondRows: countBeyondRows2, autoExpandDecision: autoExpandDecision2 } = (init_market_state(), __toCommonJS(market_state_exports));
+var { DEFAULT_PAGE_SIZE: DEFAULT_PAGE_SIZE2, MARKET_PAGE_SIZES: MARKET_PAGE_SIZES2, pageItems: pageItems2, createZoneState: createZoneState2, normalizeMarketQuery: normalizeMarketQuery2, resetPageOnFilterChange: resetPageOnFilterChange2, normalizeMarketResponse: normalizeMarketResponse2, registryNotice: registryNotice2, zoneChips: zoneChips2, marketNotice: marketNotice2, searchSourceOf: searchSourceOf2, mergeLatestFields: mergeLatestFields2, countBeyondRows: countBeyondRows2, clipTopOf: clipTopOf2, visibleRowTop: visibleRowTop2, autoExpandDecision: autoExpandDecision2 } = (init_market_state(), __toCommonJS(market_state_exports));
 var { readMarketSnapshot: readMarketSnapshot2, writeMarketSnapshot: writeMarketSnapshot2, isDefaultFirstPageQuery: isDefaultFirstPageQuery2 } = (init_market_snapshot(), __toCommonJS(market_snapshot_exports));
 var { backdropCloseHandlers: backdropCloseHandlers2 } = (init_backdrop(), __toCommonJS(backdrop_exports));
 var { createMarkdown: createMarkdown2 } = (init_markdown(), __toCommonJS(markdown_exports));
@@ -2189,7 +2204,11 @@ var CSS = `
 .dshm-chips{display:flex;flex-wrap:wrap;gap:6px;position:relative}
 .dshm-chips-clip{overflow:hidden}
 .dshm-chips-gutter{padding-right:var(--dshm-clip-gutter,96px)}
-.dsvm-chipmore{position:absolute;right:8px;display:flex;align-items:center;gap:8px;min-height:28px;background-color:var(--dsw-alias-bg-base,#fff);background-image:linear-gradient(var(--dsw-alias-bg-base,#fff),var(--dsw-alias-bg-base,#fff)),linear-gradient(var(--dsw-alias-bg-base,#fff),var(--dsw-alias-bg-base,#fff));border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.18));border-radius:999px;padding:2px 8px;box-sizing:border-box}
+/* +N/\u7B5B\u9009\u5206\u522B\u5360\u53F3\u4FA7 52/96px\uFF0C\u4E0D\u80FD\u8BA9 gutter \u540C\u7279\u5F02\u6027\u89C4\u5219\u8986\u76D6\u603B\u9884\u7559\u5BBD\u5EA6\u3002 */
+.dshm-chips.dshm-chips-clip.dshm-chips-reserve{padding-right:52px}
+.dshm-chips.dshm-chips-clip.dshm-chips-gutter.dshm-chips-reserve{padding-right:calc(var(--dshm-clip-gutter,96px) + 52px)}
+.dsvm-chipmore{position:absolute;right:8px}
+.dsvm-chipmore-plus{position:absolute;right:calc(var(--dshm-clip-gutter,96px) + 6px);z-index:1;background-color:var(--dsw-alias-bg-base,#fff);background-image:linear-gradient(var(--dsw-alias-bg-base,#fff),var(--dsw-alias-bg-base,#fff)),linear-gradient(var(--dsw-alias-bg-base,#fff),var(--dsw-alias-bg-base,#fff))}
 .dsvm-searchrow{display:flex;align-items:center;gap:8px}
 .dsvm-searchrow .dshm-search{flex:1;display:flex}
 .dshm-search{position:relative}
@@ -2710,6 +2729,7 @@ function SearchBox({ placeholder, initial, onCommit }) {
 }
 function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }) {
   const chips = useMemo(() => zoneChips2(counts, labels, zone), [counts, labels, zone]);
+  const chipsSignature = JSON.stringify(chips.map((c) => [c.id, c.labelKey ? lookup(c.labelKey) : c.label, c.count]));
   const [expanded, setExpanded] = useState(false);
   const [stuck, setStuck] = useState(false);
   const [geom, setGeom] = useState(null);
@@ -2719,38 +2739,24 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
   const autoRef = useRef(null);
   const maxRows = stuck ? 1 : 2;
   const activeIdx = active ? chips.findIndex((c) => c.id === active) : -1;
-  const plusWrapped = !!(geom && geom.plusWrapped);
-  const maxRowsEff = maxRows + (plusWrapped ? 1 : 0);
-  const maxH = maxRowsEff * (rowHeight || 22) + (maxRowsEff - 1) * 6;
+  const maxH = maxRows * (rowHeight || 22) + (maxRows - 1) * 6;
   const measure = useCallback(() => {
     const el = wrapRef.current;
     if (!el || expanded) return;
     const tops = [];
     let rh = 0;
-    let plusTopMeas = null;
-    let hiddenMeas = 0;
     for (const k of el.children) {
-      if (!(k instanceof HTMLElement)) continue;
-      if (k.getAttribute("data-more") === "1") {
-        plusTopMeas = k.offsetTop;
-        continue;
-      }
-      if (k.getAttribute("data-chip") !== "1") continue;
-      if (getComputedStyle(k).display === "none") {
-        hiddenMeas += 1;
-        continue;
-      }
+      if (!(k instanceof HTMLElement) || k.getAttribute("data-chip") !== "1") continue;
       tops.push(k.offsetTop);
       if (!rh && k.offsetHeight) rh = k.offsetHeight;
     }
     if (!tops.length) return;
-    const lastRowTop = tops[tops.length - 1];
-    const plusWrappedNow = plusTopMeas != null && plusTopMeas > lastRowTop;
     setGeom((prev) => {
-      const prevHC = prev ? prev.hiddenCount : countBeyondRows2(tops.slice(1), maxRows);
-      const hiddenCount2 = plusWrappedNow ? prevHC + 1 : prevHC;
-      const next = { tops, hiddenCount: hiddenCount2 };
-      const same = prev && prev.hiddenCount === next.hiddenCount && prev.tops.length === next.tops.length && prev.tops.every((t, i) => t === next.tops[i]);
+      const clipTopV = clipTopOf2(tops, maxRows);
+      const hiddenCount2 = countBeyondRows2(tops, maxRows);
+      const lastVisTop2 = visibleRowTop2(tops, maxRows);
+      const next = { tops, clipTop: clipTopV, hiddenCount: hiddenCount2, lastVisTop: lastVisTop2 };
+      const same = prev && prev.hiddenCount === next.hiddenCount && prev.clipTop === next.clipTop && prev.lastVisTop === next.lastVisTop && prev.tops.length === next.tops.length && prev.tops.every((t, i) => t === next.tops[i]);
       return same ? prev : next;
     });
     setRowHeight((prev) => Math.abs(prev - rh) <= 0.5 ? prev : rh);
@@ -2763,14 +2769,19 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
   }, [active]);
   useEffect(() => {
     if (!active || !geom) return;
-    const visCats = geom.tops.length - 1;
-    const d = autoExpandDecision2(activeIdx, visCats, autoRef.current === active, expanded);
+    const activeTop = geom.tops[activeIdx + 1];
+    const d = autoExpandDecision2(activeTop, geom.clipTop, autoRef.current === active, expanded);
     if (d.record) autoRef.current = active;
     if (d.expand) setExpanded(true);
   }, [active, activeIdx, expanded, geom]);
   useLayoutEffect(() => {
     if (!expanded) measure();
-  }, [chips, active, expanded, zone, stuck, rowHeight, measure, geom]);
+  }, [chipsSignature, active, expanded, zone, stuck, rowHeight, measure]);
+  useEffect(() => {
+    if (expanded || !geom || typeof requestAnimationFrame !== "function") return;
+    const raf = requestAnimationFrame(measure);
+    return () => cancelAnimationFrame(raf);
+  }, [geom, expanded, measure]);
   useEffect(() => {
     const el = wrapRef.current;
     if (!el || expanded || typeof ResizeObserver === "undefined") return;
@@ -2804,20 +2815,25 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
   }, []);
   const clip = !expanded;
   const filterPinned = clip && trailing != null;
+  const clipTop = geom ? geom.clipTop : Infinity;
   const hiddenCount = geom ? geom.hiddenCount : 0;
-  const visCount = geom ? Math.max(0, chips.length - hiddenCount) : chips.length;
-  const btn = (c, i, hide) => h(
-    "button",
-    {
-      key: c.id,
-      "data-chip": "1",
-      style: hide ? { display: "none" } : void 0,
-      className: `dshm-chip${active === c.id ? " on" : ""}${c.count === 0 ? " zero" : ""}`,
-      onClick: () => onPick(active === c.id ? null : c.id)
-    },
-    // 0.9.45 U3/U7：0 计数桶显式渲染「0」+ 降透明（社区区 chip 计数恒 >0，行为不变）
-    `${c.labelKey ? lookup(c.labelKey) : c.label} ${c.count || 0}`
-  );
+  const lastVisTop = geom ? geom.lastVisTop : 0;
+  const btn = (c, i) => {
+    const top = geom ? geom.tops[i + 1] : null;
+    const clipped = clip && geom && typeof top === "number" && top >= clipTop;
+    return h(
+      "button",
+      {
+        key: c.id,
+        "data-chip": "1",
+        style: clipped ? { visibility: "hidden" } : void 0,
+        className: `dshm-chip${active === c.id ? " on" : ""}${c.count === 0 ? " zero" : ""}`,
+        onClick: () => onPick(active === c.id ? null : c.id)
+      },
+      // 0.9.45 U3/U7：0 计数桶显式渲染「0」+ 降透明（社区区 chip 计数恒 >0，行为不变）
+      `${c.labelKey ? lookup(c.labelKey) : c.label} ${c.count || 0}`
+    );
+  };
   return h(
     React.Fragment,
     null,
@@ -2834,15 +2850,22 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
         "div",
         {
           ref: wrapRef,
-          className: `dshm-chips${clip ? " dshm-chips-clip" : ""}${filterPinned ? " dshm-chips-gutter" : ""}`,
+          className: `dshm-chips${clip ? " dshm-chips-clip" : ""}${filterPinned ? " dshm-chips-gutter" : ""}${clip && hiddenCount > 0 ? " dshm-chips-reserve" : ""}`,
           title: wrapTitle || void 0,
           style: { maxHeight: clip ? `${maxH}px` : "none" }
         },
         h("button", { "data-chip": "1", className: `dshm-chip${active == null ? " on" : ""}`, onClick: () => onPick(null) }, lookup("cat.all")),
-        ...chips.slice(0, visCount).map((c, i) => btn(c, i, false)),
-        clip && chips.length > 0 && hiddenCount > 0 ? h("button", { key: "more", "data-more": "1", className: "dshm-chip", onClick: () => setExpanded(true) }, `+${hiddenCount}`) : null,
-        ...chips.slice(visCount).map((c, i) => btn(c, visCount + i, clip)),
-        // hide 仅折叠态生效；展开态全量可见
+        ...chips.map((c, i) => btn(c, i)),
+        // 折叠态 +N（0.9.57 终版）：绝对定位钉在「末可见行右端预留槽」——出流不挤压 chip、不参与
+        // 行分组（data-more）；预留槽由 .dshm-chips-clip 的 padding-right 划出，几何保证零重叠；
+        // 位置右对齐紧贴筛选 gutter 左侧，垂直对齐末可见行（top = lastVisTop，测量派生）。
+        clip && geom && hiddenCount > 0 ? h("button", {
+          key: "more",
+          "data-more": "1",
+          className: "dshm-chip dsvm-chipmore-plus",
+          style: { top: `${lastVisTop}px` },
+          onClick: () => setExpanded(true)
+        }, `+${hiddenCount}`) : null,
         expanded ? [
           h("button", {
             key: "collapse",
@@ -4497,7 +4520,11 @@ function MarketPanel({ onClose }) {
 function mountPanel() {
   if (typeof document === "undefined") return;
   ensureCss();
-  if (document.getElementById("dshm-panel-root")) return;
+  const existing = document.getElementById("dshm-panel-root");
+  if (existing) {
+    if (existing.querySelector(".dshm-panel")) return;
+    existing.remove();
+  }
   const container = document.createElement("div");
   container.id = "dshm-panel-root";
   document.body.appendChild(container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-m",
-  "version": "0.9.56",
+  "version": "0.9.57",
   "description": "可自定义收录清单的 DSH 插件市场：收录、安装、卸载、升级一站完成，附 agent 工具与 dshm CLI。",
   "license": "MIT",
   "type": "module",