dsh-m 0.9.55 → 0.9.56

package/CHANGELOG.md

@@ -8,6 +8,13 @@ The full release history of dsh-m, maintained bilingually: **Chinese first, Engl
 
 ## 中文
 
+### 0.9.56 变更：ZoneChips +N 重叠根治——in-flow 文档流布局 + 折行减类（主人方案）
+
+- **缺陷（0.9.55 真机复现）**：折叠态 `+N` 采用「绝对定位 + contentW−48 夹取」，当末可见行剩余空间小于徽章宽时，徽章压住末可见 chip（真机：+9 压住「文档与渲染 61」右端计数）。
+- **根治（in-flow 文档流布局）**：`+N` 弃绝对定位，以 in-flow 插在「末可见分类」与「被裁分类」之间——flow 布局与 chip 的重叠在构造上不可能。
+- **折行减类（主人方案）**：被裁分类 `visibility:hidden` → **`display:none`**（不占位，折行减类生效前提）；测量发现 `+N` 顶 > 末可见 chip 行顶（被折出）⇒ `hiddenCount +1`，一枚可见分类退位、`+N` 退回末可见行，同时 `max-height` 扩一行给 `+N` 独占；棘轮单向下行，宽度增大时保守不多显（+N 计数仍真实）。
+- **测试**：全量 1221 例零失败、typecheck 零错误；无头探针实证常宽 880/窄宽 420/展开/收起/Q1 回归全部 `chipOverlapPx = 0`、`+N` 全程可见、展开态 23+⌃+筛选全量、收起后 +N 回归蓝筐位。
+
 ### 0.9.55 变更：ZoneChips 折叠/展开切换钮内联化（对齐 dsh-market 参考设计）+ overlay 叠涂 scrim 强化对比度
 
 - **切换钮内联化（主人提出，dsh-market v1.66.11 参考设计）**：`+N` 从右侧 overlay 组改为**绝对定位内联**——钉在「末可见分类 chip 右侧 +6px」（即末可见行剩余空位），与展开态 `⌃`（列表末尾 in-flow）构成统一位置语义「紧跟当前列表末尾」，只翻方向不挪位；窄宽度放不下时贴内容右缘收口（不侵入筛选槽）。gutter 随 `+N` 移出由 132px 瘦身至 96px（仅承载钉住筛选），同宽度可多显示约 1 颗分类。overlay 组内 `+N` 移除后仅剩钉住筛选，第④类碰撞（R2-N1）自然消解。
@@ -412,6 +419,13 @@ The full release history of dsh-m, maintained bilingually: **Chinese first, Engl
 
 ## English
 
+### 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).
+- **Fix (in-flow document layout)**: `+N` abandons absolute positioning and flows inline between the last visible category and the clipped categories — chip/badge overlap is impossible by construction.
+- **Wrap-yield-a-category (owner's design)**: clipped categories switch `visibility:hidden` → **`display:none`** (no space — the prerequisite for yielding to work); when the measure finds the `+N` top beyond the last visible chip's row top (wrapped), `hiddenCount +1` — one visible category yields, `+N` pulls back into the last visible row, and `max-height` grows one row to give `+N` its own line; the ratchet is single-direction (down), staying conservative on width growth while the count stays truthful.
+- **Tests**: full suite 1221 cases zero failures, typecheck clean; headless probe verified 880px/420px/expanded/collapsed/Q1-regression all at `chipOverlapPx = 0` with `+N` visible throughout, expanded view showing 23+⌃+filter in full, and `+N` returning to its inline slot after collapse.
+
 ### Changed in 0.9.55 — ZoneChips expand/collapse toggle inline (aligned with the dsh-market reference design) + overlay stacked scrim for contrast
 
 - **Inline toggle (owner-requested, reference: dsh-market v1.66.11)**: `+N` moves out of the right-side overlay group into an **absolutely-positioned inline slot** pinned at "last visible category chip's right edge + 6px" (the leftover of the last visible row), sharing one position semantic with the expanded `⌃` (in-flow at list end): "hug the current end of the list", flipping direction without relocating; when the leftover is too narrow it clamps to the content right edge without entering the filter gutter. The gutter slims from 132px to 96px (hosting only the pinned filter), showing ~1 more category per width. With `+N` removed, the overlay group hosts only the pinned filter and the R2-N1 4th collision class dissolves naturally.

package/lib/client.js

@@ -1558,7 +1558,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, clipTopOf: clipTopOf2, 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, chipRows: chipRows2, countBeyondRows: countBeyondRows2, 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));
@@ -2190,7 +2190,6 @@ var CSS = `
 .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}
-.dsvm-chipmore-plus{position:absolute;z-index:2;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}
@@ -2720,44 +2719,42 @@ 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 maxH = maxRows * (rowHeight || 22) + (maxRows - 1) * 6;
+  const plusWrapped = !!(geom && geom.plusWrapped);
+  const maxRowsEff = maxRows + (plusWrapped ? 1 : 0);
+  const maxH = maxRowsEff * (rowHeight || 22) + (maxRowsEff - 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) || k.getAttribute("data-chip") !== "1") continue;
+      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;
+      }
       tops.push(k.offsetTop);
       if (!rh && k.offsetHeight) rh = k.offsetHeight;
     }
     if (!tops.length) return;
-    const clipTop2 = clipTopOf2(tops, maxRows);
-    let lastVisRight = 0;
-    let lastVisTop = 0;
-    let idx = -1;
-    for (const k of el.children) {
-      if (!(k instanceof HTMLElement) || k.getAttribute("data-chip") !== "1") continue;
-      idx += 1;
-      if (idx === 0) continue;
-      if (k.offsetTop < clipTop2) {
-        lastVisRight = k.offsetLeft + k.offsetWidth;
-        lastVisTop = k.offsetTop;
-      }
-    }
-    const cs = getComputedStyle(el);
-    const contentW = el.clientWidth - (parseFloat(cs.paddingRight) || 0);
-    const plusLeft = Math.max(0, Math.min(lastVisRight + 6, contentW - 48));
-    const next = {
-      tops,
-      clipTop: clipTop2,
-      hiddenCount: countBeyondRows2(tops.slice(1), maxRows),
-      plusLeft,
-      plusTop: lastVisTop
-    };
-    setGeom((prev) => prev && prev.tops.length === next.tops.length && prev.clipTop === next.clipTop && prev.hiddenCount === next.hiddenCount && prev.plusLeft === next.plusLeft && prev.plusTop === next.plusTop ? prev : next);
+    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]);
+      return same ? prev : next;
+    });
     setRowHeight((prev) => Math.abs(prev - rh) <= 0.5 ? prev : rh);
-  }, [expanded, maxRows]);
+  }, [expanded, maxRows, chips.length]);
   useEffect(() => {
     if (!active) {
       autoRef.current = null;
@@ -2766,14 +2763,14 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
   }, [active]);
   useEffect(() => {
     if (!active || !geom) return;
-    const activeTop = geom.tops[activeIdx + 1];
-    const d = autoExpandDecision2(activeTop, geom.clipTop, autoRef.current === active, expanded);
+    const visCats = geom.tops.length - 1;
+    const d = autoExpandDecision2(activeIdx, visCats, 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]);
+  }, [chips, active, expanded, zone, stuck, rowHeight, measure, geom]);
   useEffect(() => {
     const el = wrapRef.current;
     if (!el || expanded || typeof ResizeObserver === "undefined") return;
@@ -2807,24 +2804,20 @@ 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 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}`
-    );
-  };
+  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}`
+  );
   return h(
     React.Fragment,
     null,
@@ -2846,16 +2839,10 @@ function ZoneChips({ zone, counts, labels, active, onPick, trailing, wrapTitle }
           style: { maxHeight: clip ? `${maxH}px` : "none" }
         },
         h("button", { "data-chip": "1", className: `dshm-chip${active == null ? " on" : ""}`, onClick: () => onPick(null) }, lookup("cat.all")),
-        ...chips.map((c, i) => btn(c, i)),
-        // 折叠态 +N（0.9.55 对齐 dsh-market 参考设计）：绝对定位内联钉在「末可见分类 chip 右侧 +6px」，
-        // 与展开态 ⌃（列表末尾 in-flow）构成同一位置语义——「紧跟当前列表末尾」，只翻方向不挪位。
-        // 不带 data-chip（不参与行分组测量）；位于可见行区内，不受 overflow 裁剪。
-        clip && geom && hiddenCount > 0 ? h("button", {
-          key: "more",
-          className: "dshm-chip dsvm-chipmore-plus",
-          style: { left: `${geom.plusLeft}px`, top: `${geom.plusTop}px` },
-          onClick: () => setExpanded(true)
-        }, `+${hiddenCount}`) : null,
+        ...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 仅折叠态生效；展开态全量可见
         expanded ? [
           h("button", {
             key: "collapse",

package/package.json

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