dsh-quick-toc 0.1.1 → 0.2.0-beta

package/lib/client.js

@@ -322,6 +322,57 @@ window.__ModuleLoader__.load({
       var didInitScroll = react.useRef(false);
       var outlineTouchRef = react.useRef(0); // last time the user touched the outline
 
+      // ---- search: header button opens a keyword box; Enter cycles through
+      // matching headings and jumps to each ----
+      var _s13 = react.useState(false);
+      var searchOpen = _s13[0];
+      var setSearchOpen = _s13[1];
+      var _s14 = react.useState("");
+      var query = _s14[0];
+      var setQuery = _s14[1];
+      var _s15 = react.useState(0);
+      var matchIdx = _s15[0];
+      var setMatchIdx = _s15[1];
+      var searchRef = react.useRef(null);
+      // animation state: hidden | enter | shown | out; and a transient
+      // "searching" flag that drives the spinner
+      var _s16 = react.useState("hidden");
+      var searchAnim = _s16[0];
+      var setSearchAnim = _s16[1];
+      var _s17 = react.useState(false);
+      var searching = _s17[0];
+      var setSearching = _s17[1];
+      var searchTimerRef = react.useRef(null);
+      var openSearch = function () {
+        setSearchOpen(true);
+        setSearchAnim("enter");
+      };
+      var closeSearch = function () {
+        setSearchAnim("out");
+        setQuery("");
+        setTimeout(function () {
+          setSearchOpen(false);
+          setSearchAnim("hidden");
+        }, 240);
+      };
+      react.useEffect(function () {
+        if (searchAnim === "enter") {
+          var raf = requestAnimationFrame(function () { setSearchAnim("shown"); });
+          return function () { cancelAnimationFrame(raf); };
+        }
+        return undefined;
+      }, [searchAnim]);
+      react.useEffect(function () {
+        if (searchOpen && searchRef.current) searchRef.current.focus();
+      }, [searchOpen]);
+      var onQueryChange = function (v) {
+        setQuery(v);
+        setMatchIdx(0);
+        setSearching(true);
+        if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+        searchTimerRef.current = setTimeout(function () { setSearching(false); }, 220);
+      };
+
       // the group currently being read (under the list viewport middle):
       // it stays at full opacity, every other group is dimmed
       var _s10 = react.useState([]);
@@ -610,6 +661,23 @@ window.__ModuleLoader__.load({
         return function () { sp.removeEventListener("scroll", update); };
       }, [keyToGroup]);
 
+      // ---- search matches: headings whose title contains the query ----
+      var matches = react.useMemo(function () {
+        var q = query.trim().toLowerCase();
+        if (!q) return [];
+        var out = [];
+        for (var gi = 0; gi < groups.length; gi++) {
+          var g = groups[gi];
+          for (var j = 0; j < g.headings.length; j++) {
+            var h = g.headings[j];
+            if (h.title.toLowerCase().indexOf(q) >= 0) {
+              out.push({ gi: gi, title: h.title, key: h.key, idx: h.idx });
+            }
+          }
+        }
+        return out;
+      }, [groups, query]);
+
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
 
@@ -686,6 +754,24 @@ window.__ModuleLoader__.load({
         sp.scrollTo({ top: t, behavior: "smooth" });
       };
 
+      // jump to the n-th match, cycling; also reveal the group in the outline
+      var goToMatch = function (n) {
+        if (matches.length === 0) return;
+        var i = ((n % matches.length) + matches.length) % matches.length;
+        setMatchIdx(i);
+        var m = matches[i];
+        jump(m.key, m.idx);
+        setVisibleCount(function (prev) {
+          return Math.max(prev, Math.min(groups.length, groups.length - m.gi));
+        });
+        setTimeout(function () {
+          var el = listRef.current;
+          if (!el) return;
+          var node = el.querySelector('[data-group-idx="' + m.gi + '"]');
+          if (node) node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 150);
+      };
+
       // ---- circular icon button (glyph optical offset: ox/oy px) ----
       var iconBtn = function (onClick, tip, glyph, fontSize, offset) {
         var ox = offset ? (offset.x || 0) : 0;
@@ -844,15 +930,164 @@ window.__ModuleLoader__.load({
                   react_jsx_runtime.jsx("div", {
                     style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
                     children: [
-                      // triangle tips toward the side it will move TO: shift slightly down + toward the tip
-                      iconBtn(toggleDock, dockRight ? "移到左侧" : "移到右侧", dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: 1 } : { x: 1, y: 1 }),
-                      iconBtn(function () { setOpen(false); }, "收起", "✕", 13, { x: 0, y: -1 })
+                      // magnifier button (SVG, matches the other buttons' style)
+                      react_jsx_runtime.jsx("button", {
+                        onClick: function () { searchOpen ? closeSearch() : openSearch(); },
+                        title: "搜索标题",
+                        style: {
+                          width: 24,
+                          height: 24,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "50%",
+                          background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          border: "none",
+                          color: C.muted,
+                          cursor: "pointer"
+                        },
+                        onMouseEnter: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
+                          e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+                        },
+                        onMouseLeave: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = C.muted;
+                        },
+                        children: react_jsx_runtime.jsx("svg", {
+                          width: 15,
+                          height: 15,
+                          viewBox: "0 0 24 24",
+                          // overflow visible: the stroke may extend past the
+                          // viewBox without being clipped at the svg boundary
+                          style: { display: "block", transform: "translate(-1px, -1px)", overflow: "visible" },
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 3.6,
+                          strokeLinecap: "round",
+                          children: [
+                            react_jsx_runtime.jsx("circle", { cx: 11, cy: 11, r: 7 }),
+                            react_jsx_runtime.jsx("line", { x1: 21, y1: 21, x2: 16, y2: 16 })
+                          ]
+                        })
+                      }),
+                      // triangle tips toward the side it will move TO: shift slightly up + toward the tip
+                      iconBtn(toggleDock, dockRight ? "移到左侧" : "移到右侧", dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: -1 } : { x: 1, y: -1 }),
+                      // close: thick SVG cross, nudged slightly down
+                      react_jsx_runtime.jsx("button", {
+                        onClick: function () { setOpen(false); },
+                        title: "收起",
+                        style: {
+                          width: 24,
+                          height: 24,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "50%",
+                          background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          border: "none",
+                          color: C.muted,
+                          cursor: "pointer"
+                        },
+                        onMouseEnter: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
+                          e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+                        },
+                        onMouseLeave: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = C.muted;
+                        },
+                        children: react_jsx_runtime.jsx("svg", {
+                          width: 15,
+                          height: 15,
+                          viewBox: "0 0 24 24",
+                          style: { display: "block", transform: "translate(1px, 0px)", overflow: "visible" },
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 3.4,
+                          strokeLinecap: "round",
+                          children: [
+                            // cross lines span 5..19, intersection (12,12) centered
+                            react_jsx_runtime.jsx("line", { x1: 5, y1: 5, x2: 19, y2: 19 }),
+                            react_jsx_runtime.jsx("line", { x1: 19, y1: 5, x2: 5, y2: 19 })
+                          ]
+                        })
+                      })
                     ]
                   })
                 ]
               })
             ]
           }),
+          // search input row: outer grid row animates 0fr<->1fr so the row
+          // collapses/expands to its EXACT natural height (no max-height
+          // overshoot stutter); the outline below moves smoothly with it
+          (searchOpen || searchAnim === "out") ? react_jsx_runtime.jsx("div", {
+            style: {
+              display: "grid",
+              gridTemplateRows: (searchAnim === "enter" || searchAnim === "out") ? "0fr" : "1fr",
+              transition: "grid-template-rows 0.2s " + EASE,
+              flex: "none"
+            },
+            children: react_jsx_runtime.jsx("div", {
+              style: { overflow: "hidden", minHeight: 0 },
+              children: react_jsx_runtime.jsx("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "2px 8px 4px",
+                  borderBottom: "1px solid " + C.panelBorder,
+                  opacity: (searchAnim === "enter" || searchAnim === "out") ? 0 : 1,
+                  transform: (searchAnim === "enter" || searchAnim === "out") ? "translateY(-6px)" : "none",
+                  transition: "opacity 0.2s ease, transform 0.2s ease"
+                },
+                children: [
+              react_jsx_runtime.jsx("input", {
+                ref: searchRef,
+                value: query,
+                onChange: function (e) { onQueryChange(e.target.value); },
+                onKeyDown: function (e) {
+                  if (e.key === "Enter") { goToMatch(matchIdx + 1); e.preventDefault(); }
+                  if (e.key === "Escape") { closeSearch(); }
+                },
+                placeholder: "搜索标题，回车定位…",
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  border: "none",
+                  borderRadius: 6,
+                  padding: "3px 8px",
+                  fontSize: 12,
+                  color: C.text,
+                  outline: "none"
+                }
+              }),
+              searching ? react_jsx_runtime.jsx("span", {
+                style: { width: 13, height: 13, flex: "none", display: "flex", alignItems: "center", justifyContent: "center" },
+                children: react_jsx_runtime.jsx("svg", {
+                  width: 12,
+                  height: 12,
+                  viewBox: "0 0 24 24",
+                  style: { display: "block", animation: "dqt-spin 0.8s linear infinite" },
+                  children: react_jsx_runtime.jsx("circle", {
+                    cx: 12, cy: 12, r: 9,
+                    fill: "none",
+                    stroke: C.muted,
+                    strokeWidth: 3,
+                    strokeDasharray: "42 22",
+                    strokeLinecap: "round"
+                  })
+                })
+              }) : react_jsx_runtime.jsx("span", {
+                style: { fontSize: 11, color: C.muted, flex: "none", minWidth: 30, textAlign: "center" },
+                children: matches.length > 0 ? ((matchIdx % matches.length) + 1) + "/" + matches.length : ""
+              })
+                ]
+              })
+            })
+          }) : null,
           // outline list (paged: newest first, scroll to the top loads older);
           // the scrollbar follows the dock side (rtl flips it to the left)
           react_jsx_runtime.jsx("div", {
@@ -1131,6 +1366,17 @@ window.__ModuleLoader__.load({
 
     exports.apply = apply;
     exports.inject = inject;
+
+    // inject the small keyframe stylesheet once (spinner rotation)
+    (function () {
+      if (typeof document === "undefined") return;
+      if (document.getElementById("dsh-quick-toc-css")) return;
+      var s = document.createElement("style");
+      s.id = "dsh-quick-toc-css";
+      s.textContent = "@keyframes dqt-spin{to{transform:rotate(360deg)}}";
+      document.head.appendChild(s);
+    })();
+
     return module.exports;
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quick-toc",
-  "version": "0.1.1",
+  "version": "0.2.0-beta",
   "description": "Quick conversation TOC for DeepSeek Harness: markdown heading outline grouped by turn, with auto-follow highlight and smooth jump navigation",
   "type": "module",
   "main": "lib/index.js",