dsh-quick-toc 0.5.1 → 0.6.1

package/lib/client.js

@@ -55,7 +55,6 @@ window.__ModuleLoader__.load({
         "outline.bottom": "回到底部",
         "turn.jumpReply": "跳转到该回合的模型回答开头",
         "turn.jumpTurn": "跳转到该回合开头",
-        "turn.loading": "正在加载这个回合…",
         "turn.unloaded": "未加载",
         "turn.loadTip": "点击加载这个回合并跳转过去",
         "turn.failed": "请求失败",
@@ -65,17 +64,502 @@ window.__ModuleLoader__.load({
         "preview.truncated": "预览由宿主提供，可能被截断",
         "resize.w": "拖拽调整宽度",
         "resize.h": "拖拽调整高度",
-        "resize.wh": "拖拽同时调整宽高"
+        "resize.wh": "拖拽同时调整宽高",
+        "settings.desc": "对话大纲面板的语言与显示偏好，保存在 DSH 的设置里。",
+        "settings.language": "语言",
+        "settings.language.tip": "「跟随宿主」使用 DSH 当前的语言",
+        "settings.lang.auto": "跟随宿主",
+        "settings.lang.zh": "中文",
+        "settings.lang.en": "English",
+        "settings.dock": "默认停靠边缘",
+        "settings.dock.left": "左侧",
+        "settings.dock.right": "右侧",
+        "settings.levels": "显示的标题层级",
+        "settings.zoom": "面板缩放",
+        "settings.zoom.tip": "文字、图标与按钮按比例缩放，面板本身的尺寸不变",
+        "settings.on": "开启",
+        "settings.off": "关闭",
+        "settings.fuzzy": "模糊搜索",
+        "settings.hover": "悬停预览卡片",
+        "settings.debug": "在控制台打印诊断日志",
+        "settings.debug.tip": "开启后控制台会打印一行挂载诊断（宿主能力与跳转加载器状态）",
+        "settings.overridden": "已自定义",
+        "settings.resetField": "重置",
+        "settings.readOnly": "当前页面无法写入 DSH 设置，面板暂时使用本浏览器保存的偏好。"
+      },
+      en: {
+        "panel.title": "Conversation Outline",
+        "error.panel": "dsh-quick-toc panel error: ",
+        "handle.dragY": "Drag to move the panel",
+        "handle.dockLeft": "Move to the left",
+        "handle.dockRight": "Move to the right",
+        "handle.collapse": "Collapse",
+        "handle.expand": "Expand the outline",
+        "levels.tip": "Heading level filter",
+        "levels.show": "Show H",
+        "levels.hide": "Hide H",
+        "search.open": "Search headings",
+        "search.word": "Search",
+        "search.tail": ", Enter to jump…",
+        "search.scope.title": "Title",
+        "search.scope.full": "Full text",
+        "search.scope.tipTitle": "Titles only. Click for full-text search",
+        "search.scope.tipFull": "Full text. Click for titles only",
+        "search.fuzzy": "Fuzzy",
+        "search.fuzzy.tipOn": "Fuzzy matching is on: a few other characters may sit between the keywords, so more matches hit",
+        "search.fuzzy.tipOff": "Fuzzy matching is off: only contiguous text matches. Click to turn it on",
+        "search.empty": "No matches",
+        "search.hintMore": "Scroll up to load earlier messages",
+        "search.hintOldest": "This is the earliest message",
+        "hint.bottom": "You have reached the end",
+        "outline.bottom": "Back to the newest entry",
+        "turn.jumpReply": "Jump to the start of this turn's model reply",
+        "turn.jumpTurn": "Jump to the start of this turn",
+        "turn.unloaded": "Not loaded",
+        "turn.loadTip": "Click to load this turn and jump to it",
+        "turn.failed": "Request failed",
+        "turn.jumpFailed": "Jump to this turn's error",
+        // NB: "time.beforeYesterday" stays Chinese-only on purpose — English has no
+        // natural word for it that beats the date, so anything older than yesterday
+        // carries the numeric date. Yesterday itself reads as the word in both.
+        "time.yesterday": "yesterday",
+        "preview.truncated": "Preview comes from the host and may be truncated",
+        "resize.w": "Drag to resize the width",
+        "resize.h": "Drag to resize the height",
+        "resize.wh": "Drag to resize width and height",
+        "settings.desc": "Language and display preferences for the conversation outline panel, kept in DSH's settings.",
+        "settings.language": "Language",
+        "settings.language.tip": "\"Follow the host\" uses whatever language DSH currently runs in",
+        "settings.lang.auto": "Follow the host",
+        "settings.lang.zh": "中文",
+        "settings.lang.en": "English",
+        "settings.dock": "Default docked edge",
+        "settings.dock.left": "Left",
+        "settings.dock.right": "Right",
+        "settings.levels": "Heading levels shown",
+        "settings.zoom": "Panel scale",
+        "settings.zoom.tip": "Scales the text, icons and buttons; the panel's own size is unchanged",
+        "settings.on": "On",
+        "settings.off": "Off",
+        "settings.fuzzy": "Fuzzy search",
+        "settings.hover": "Hover preview card",
+        "settings.debug": "Print the mount diagnostic to the console",
+        "settings.debug.tip": "The console then prints one mount line (host capabilities and jump-loader state)",
+        "settings.overridden": "Customized",
+        "settings.resetField": "Reset",
+        "settings.readOnly": "This page cannot write DSH settings; the panel is using the preferences saved in this browser."
       }
     };
-    // The dictionary the current render reads. Kept as a module-level binding so
-    // the module-scope render helpers (renderItem/renderResultRow/...) can localise
-    // without threading a `t` argument through every call.
-    var activeDict = DICTS.zh;
+    // The dictionary the current render reads. `T` prefers the HOST translation for
+    // the active language when one is bound (that is what makes "follow the host"
+    // work and what makes a language switch in Settings live), and falls back to the
+    // built-in table so the panel still speaks a language when the host has no
+    // locale service. Kept as a module-level binding so the module-scope render
+    // helpers (renderItem/renderResultRow/...) can localise without threading a `t`
+    // argument through every call.
+    var activeLang = "zh";        // resolved language: "zh" | "en"
+    var langPref = "auto";        // user preference: "auto" | "zh" | "en"
+    var hostTranslate = null;     // (key) => string | undefined, bound by apply()
+    var builtinDict = function () { return DICTS[activeLang] || DICTS.zh; };
+    // The English table is complete except for the two Chinese-only relative days (see
+    // the note in it), so the Chinese table is the last stop before the key itself —
+    // a raw key like "turn.unloaded" must never reach the screen.
     function T(key) {
-      var s = activeDict[key];
+      if (langPref === "auto" && typeof hostTranslate === "function") {
+        var viaHost = hostTranslate(key);
+        if (typeof viaHost === "string" && viaHost !== "") return viaHost;
+      }
+      var s = builtinDict()[key];
+      if (s === undefined && activeLang !== "zh") s = DICTS.zh[key];
       return s === undefined ? key : s;
     }
+    // The host reports the language it resolved for us; `auto` follows it, an explicit
+    // preference wins, and an unknown host language falls back to Chinese.
+    function setLanguage(pref, hostLang) {
+      langPref = pref === "zh" || pref === "en" ? pref : "auto";
+      activeLang = langPref === "auto" ? (hostLang === "en" ? "en" : "zh") : langPref;
+      return activeLang;
+    }
+    // Which language the HOST is running in. The bound translate function is the only
+    // signal a plugin gets, so it is probed with one key whose two translations differ
+    // (both are registered below, so the answer is exact rather than a guess).
+    function hostLanguage() {
+      if (typeof hostTranslate !== "function") return null;
+      try {
+        return hostTranslate("panel.title") === DICTS.en["panel.title"] ? "en" : "zh";
+      } catch (e) {
+        return null;
+      }
+    }
+
+    // ---------- preferences ----------
+    // ONE module-level home for the panel's preferences, shared by the panel and by
+    // the plugin-configuration card, so a change on either side is live on the other.
+    //
+    // Two layers sit behind it. The Host settings document (the namespace the host
+    // half registers) is authoritative on a loopback page — that is what the card in
+    // Settings → Plugins → Plugin configuration edits, and what follows the account
+    // across browsers. localStorage is the mirror this browser falls back to: DSH
+    // marks settings read-only on a non-loopback page, and there the panel keeps
+    // working exactly as 0.5.x did. Position and size (y/w/h) are local-only on
+    // purpose — they describe THIS screen, not the account.
+    var NAMESPACE = "dsh-quick-toc";
+    // Fields backed by the Host settings document; everything else is localStorage.
+    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, zoom: 1, fuzzy: 1, hover: 1, debug: 1 };
+    // The schema defaults (mirrored here for the card's per-field reset and for the
+    // one-time import of a 0.5.x install's stored values).
+    var DEFAULTS = {
+      dock: "left", y: 0, w: 0, h: 0,
+      levels: [1, 2, 3, 4, 5, 6],
+      zoom: 1,
+      fuzzy: false, hover: true, lang: "auto", debug: false
+    };
+    var PREF_KEYS = {
+      dock: "dsh-quick-toc.dock.v2",
+      y: "dsh-quick-toc.panelY.v1",
+      w: "dsh-quick-toc.panelW.v1",
+      h: "dsh-quick-toc.panelH.v1",
+      levels: "dsh-quick-toc.levels.v1",
+      zoom: "dsh-quick-toc.zoom.v1",
+      fuzzy: "dsh-quick-toc.fuzzy.v1",
+      hover: "dsh-quick-toc.hover.v1",
+      lang: "dsh-quick-toc.lang.v1",
+      debug: "dsh-quick-toc.debug"
+    };
+    // Legacy keys from the renamed plugin (dsh-dagang -> dsh-contents -> dsh-quick-toc).
+    var PREF_LEGACY = {
+      dock: ["dsh-contents.dock.v2", "dsh-dagang.dock.v2"],
+      y: ["dsh-contents.panelY.v1", "dsh-dagang.panelY.v1"]
+    };
+    var OLD_MAX_LEVEL_KEY = "dsh-quick-toc.maxLevel.v1";
+    var LEVELS_ALL = [1, 2, 3, 4, 5, 6];
+    var prefsStore = (function () {
+      var hasOwn = function (obj, key) { return Object.prototype.hasOwnProperty.call(obj, key); };
+      var read = function (key, legacy) {
+        try {
+          var v = localStorage.getItem(key);
+          if (v !== null) return v;
+          var list = legacy || [];
+          for (var i = 0; i < list.length; i++) {
+            var old = localStorage.getItem(list[i]);
+            if (old !== null) { localStorage.setItem(key, old); return old; }
+          }
+        } catch (e) {}
+        return null;
+      };
+      var parseLevelList = function (arr) {
+        if (!Array.isArray(arr)) return null;
+        var out = [];
+        for (var i = 0; i < arr.length; i++) {
+          var lv = Number(arr[i]);
+          if (lv >= 1 && lv <= 6 && out.indexOf(lv) < 0) out.push(lv);
+        }
+        if (out.length > 0) { out.sort(); return out; }
+        return null;
+      };
+      var parseLevels = function (raw) {
+        if (raw === null) return null;
+        try { return parseLevelList(JSON.parse(raw)); } catch (e) { return null; }
+      };
+      var loadLocal = function () {
+        var rawLevels = read(PREF_KEYS.levels);
+        if (rawLevels === null) {
+          // pre-0.4.0 stored a single max level instead of a set
+          try {
+            var max = Number(read(OLD_MAX_LEVEL_KEY));
+            if (isFinite(max) && max >= 1) {
+              var grown = [];
+              for (var lv = 1; lv <= Math.min(6, max); lv++) grown.push(lv);
+              rawLevels = JSON.stringify(grown);
+            }
+          } catch (e) {}
+        }
+        var dockRaw = read(PREF_KEYS.dock, PREF_LEGACY.dock);
+        var yRaw = read(PREF_KEYS.y, PREF_LEGACY.y);
+        var wRaw = read(PREF_KEYS.w);
+        var hRaw = read(PREF_KEYS.h);
+        var langRaw = read(PREF_KEYS.lang);
+        var zoomRaw = read(PREF_KEYS.zoom); // NB: absent (null) means 1 — Number(null) is 0!
+        return {
+          dock: dockRaw === "right" ? "right" : "left",
+          // 0 means "the panel's own default" (see PANEL_WIDTH / auto height)
+          y: yRaw !== null && isFinite(Number(yRaw)) ? Number(yRaw) : 0,
+          w: wRaw !== null && isFinite(Number(wRaw)) && Number(wRaw) >= 180 ? Number(wRaw) : 0,
+          h: hRaw !== null && isFinite(Number(hRaw)) && Number(hRaw) >= 160 ? Number(hRaw) : 0,
+          levels: parseLevels(rawLevels) || LEVELS_ALL.slice(),
+          zoom: zoomRaw !== null && isFinite(Number(zoomRaw)) ? Math.min(2, Math.max(0.5, Math.round(Number(zoomRaw) * 100) / 100)) : 1,
+          fuzzy: read(PREF_KEYS.fuzzy) === "1",
+          // absent means "on": the hover card predates this switch
+          hover: read(PREF_KEYS.hover) !== "0",
+          lang: langRaw === "zh" || langRaw === "en" ? langRaw : "auto",
+          debug: read(PREF_KEYS.debug) === "1"
+        };
+      };
+      var write = function (patch) {
+        var map = {
+          dock: function (v) { return v; },
+          y: function (v) { return String(v); },
+          w: function (v) { return String(v); },
+          h: function (v) { return String(v); },
+          levels: function (v) { return JSON.stringify(v); },
+          zoom: function (v) { return String(v); },
+          fuzzy: function (v) { return v ? "1" : "0"; },
+          hover: function (v) { return v ? "1" : "0"; },
+          lang: function (v) { return v; },
+          debug: function (v) { return v ? "1" : "0"; }
+        };
+        for (var key in patch) {
+          if (!hasOwn(patch, key) || !map[key]) continue;
+          try { localStorage.setItem(PREF_KEYS[key], map[key](patch[key])); } catch (e) {}
+        }
+      };
+      var listeners = [];
+      var localValues = null;
+      var hostScope = null;   // the bound client settings scope, or null
+      var hostSnap = null;    // its last snapshot: {status, value, user, writable, revision}
+      var values = null;
+      var valuesVersion = -1;
+      // The host layer arrives schema-validated, but the overlay still normalises so a
+      // half-written document can never hand the panel a wrong type.
+      var hostOverlay = function (snap) {
+        if (!snap || snap.status !== "ready" || typeof snap.value !== "object" || snap.value === null) return null;
+        var v = snap.value;
+        var levels = parseLevelList(v.levels);
+        var zoomNum = Number(v.zoom);
+        return {
+          dock: v.dock === "right" ? "right" : "left",
+          lang: v.lang === "zh" || v.lang === "en" ? v.lang : "auto",
+          levels: levels || LEVELS_ALL.slice(),
+          zoom: isFinite(zoomNum) ? Math.min(2, Math.max(0.5, Math.round(zoomNum * 100) / 100)) : 1,
+          fuzzy: v.fuzzy === true,
+          hover: v.hover !== false,
+          debug: v.debug === true
+        };
+      };
+      var compute = function () {
+        var local = localValues || (localValues = loadLocal());
+        var over = hostOverlay(hostSnap);
+        if (!over) return local;
+        return {
+          dock: over.dock, y: local.y, w: local.w, h: local.h,
+          levels: over.levels, zoom: over.zoom, fuzzy: over.fuzzy, hover: over.hover,
+          lang: over.lang, debug: over.debug
+        };
+      };
+      var notify = function () {
+        for (var i = 0; i < listeners.length; i++) {
+          try { listeners[i](store.get()); } catch (e) {}
+        }
+      };
+      // Fold write operations into the cached snapshot so the next read is already the
+      // new value; the host's own answer replaces it when the write settles.
+      var foldOps = function (snap, ops) {
+        if (!snap || typeof snap.value !== "object" || snap.value === null) return snap;
+        var value = Object.assign({}, snap.value);
+        var user = snap.user && typeof snap.user === "object" ? Object.assign({}, snap.user) : {};
+        for (var i = 0; i < ops.length; i++) {
+          var field = ops[i].path[0];
+          value[field] = ops[i].value;
+          user[field] = ops[i].value;
+        }
+        return Object.assign({}, snap, { value: value, user: user });
+      };
+      var foldUnset = function (snap, field) {
+        if (!snap || typeof snap.value !== "object" || snap.value === null) return snap;
+        var value = Object.assign({}, snap.value); delete value[field];
+        var user = snap.user && typeof snap.user === "object" ? Object.assign({}, snap.user) : {}; delete user[field];
+        return Object.assign({}, snap, { value: value, user: user });
+      };
+      var sendHost = function (ops) {
+        if (!ops.length || !hostScope || !hostSnap || hostSnap.writable !== true) return;
+        hostSnap = foldOps(hostSnap, ops);
+        var settle = function () {
+          if (!hostScope) return;
+          hostSnap = hostScope.getSnapshot();
+          store.version++;
+          notify();
+        };
+        try {
+          var p = hostScope.mutate(ops);
+          if (p && typeof p.then === "function") p.then(settle, settle);
+        } catch (e) { settle(); }
+      };
+      /**
+       * One-time import: a 0.5.x install kept every preference in localStorage. The
+       * first time the host layer answers, hand it any STORED value that differs from
+       * the schema defaults — but only while the user layer is still empty, so a
+       * preference already configured through the card is never stomped. The local
+       * keys stay: they remain this browser's fallback on non-loopback pages.
+       */
+      var importLegacy = function () {
+        if (!hostSnap || hostSnap.status !== "ready" || hostSnap.writable !== true) return;
+        if (hostSnap.user && typeof hostSnap.user === "object" && Object.keys(hostSnap.user).length > 0) return;
+        var local = localValues || loadLocal(); // the stored layer, NOT the merged view
+        var ops = [];
+        if (local.dock !== DEFAULTS.dock) ops.push({ op: "set", path: ["dock"], value: local.dock });
+        if (local.lang !== DEFAULTS.lang) ops.push({ op: "set", path: ["lang"], value: local.lang });
+        if (JSON.stringify(local.levels) !== JSON.stringify(DEFAULTS.levels)) ops.push({ op: "set", path: ["levels"], value: local.levels.slice() });
+        if (local.zoom !== DEFAULTS.zoom) ops.push({ op: "set", path: ["zoom"], value: local.zoom });
+        if (local.fuzzy !== DEFAULTS.fuzzy) ops.push({ op: "set", path: ["fuzzy"], value: local.fuzzy });
+        if (local.hover !== DEFAULTS.hover) ops.push({ op: "set", path: ["hover"], value: local.hover });
+        if (local.debug !== DEFAULTS.debug) ops.push({ op: "set", path: ["debug"], value: local.debug });
+        sendHost(ops);
+      };
+      var store = {
+        version: 0,
+        get: function () {
+          if (values === null || valuesVersion !== store.version) {
+            values = compute();
+            valuesVersion = store.version;
+          }
+          return values;
+        },
+        /** Merge a patch: route it to the host document and/or the mirror, then tell every subscriber (panel + card). */
+        set: function (patch) {
+          var current = store.get();
+          var next = {};
+          var changed = false;
+          for (var key in current) {
+            if (!hasOwn(current, key)) continue;
+            next[key] = hasOwn(patch, key) ? patch[key] : current[key];
+            if (key === "levels") {
+              if (JSON.stringify(next[key]) !== JSON.stringify(current[key])) changed = true;
+            } else if (next[key] !== current[key]) changed = true;
+          }
+          if (!changed) return current;
+          var ops = [];
+          for (var k in patch) {
+            if (!hasOwn(patch, k)) continue;
+            if (HOST_FIELDS[k]) ops.push({ op: "set", path: [k], value: patch[k] });
+          }
+          sendHost(ops);
+          write(patch); // the localStorage mirror (and the local-only y/w/h)
+          store.version++;
+          notify();
+          return store.get();
+        },
+        /**
+         * Clear one field back to its base layer (the card's per-field reset): the
+         * host entry is removed — the schema default takes over and the "customized"
+         * badge goes away — and the mirror records the default for non-loopback pages.
+         */
+        unset: function (field) {
+          // the mirror FIRST: clearing the host entry empties the user layer, and the
+          // one-time import must not read a stale mirror value and push it right back
+          var mirror = {};
+          mirror[field] = field === "levels" ? DEFAULTS.levels.slice() : DEFAULTS[field];
+          write(mirror);
+          if (HOST_FIELDS[field] && hostScope && hostSnap && hostSnap.writable === true) {
+            hostSnap = foldUnset(hostSnap, field);
+            var settle = function () {
+              if (!hostScope) return;
+              hostSnap = hostScope.getSnapshot();
+              store.version++;
+              notify();
+            };
+            try {
+              var p = hostScope.unset(field);
+              if (p && typeof p.then === "function") p.then(settle, settle);
+            } catch (e) { settle(); }
+          }
+          store.version++;
+          notify();
+          return store.get();
+        },
+        subscribe: function (fn) {
+          listeners.push(fn);
+          return function () {
+            var at = listeners.indexOf(fn);
+            if (at >= 0) listeners.splice(at, 1);
+          };
+        },
+        /** The raw host snapshot for surfaces that need more than the merged values (the card's badges). */
+        host: function () { return hostSnap; },
+        /**
+         * Adopt the client settings scope: its snapshot becomes the authoritative layer
+         * for the host-backed fields, and its changes flow through the store like any
+         * other write.
+         */
+        attachHost: function (scope) {
+          hostScope = scope;
+          hostSnap = scope.getSnapshot();
+          store.version++;
+          notify();
+          scope.subscribe(function () {
+            hostSnap = scope.getSnapshot();
+            store.version++;
+            notify();
+            importLegacy();
+          });
+          importLegacy();
+        },
+        /**
+         * Re-read localStorage and tell every subscriber. Used when another tab writes
+         * one of these keys (a `storage` event) — the cached snapshot would otherwise
+         * keep the stale value for the rest of this page's life.
+         */
+        reload: function () {
+          localValues = null;
+          store.version++;
+          var next = store.get();
+          for (var i = 0; i < listeners.length; i++) {
+            try { listeners[i](next); } catch (e) {}
+          }
+          return next;
+        }
+      };
+      return store;
+    })();
+    // Read the live preferences from a component: the store is versioned so a plain
+    // state counter is enough to re-render on every change.
+    function usePrefs() {
+      var box = react.useState(prefsStore.version);
+      react.useEffect(function () {
+        return prefsStore.subscribe(function () { box[1](prefsStore.version); });
+      }, []);
+      return prefsStore.get();
+    }
+
+    // ---- timestamp helpers (module scope: the stamp formatter is used by the
+    // component AND by module-scope render helpers) ----
+    // Accepts ms / seconds epochs and ISO strings; null when unreadable.
+    function toDateOf(t) {
+      if (t === undefined || t === null) return null;
+      if (typeof t === "string") {
+        var d0 = new Date(t);
+        return isNaN(d0.getTime()) ? null : d0;
+      }
+      var n = Number(t);
+      if (!isFinite(n) || n <= 0) return null;
+      if (n < 1e12) n = n * 1000; // epoch seconds -> ms
+      var d = new Date(n);
+      return isNaN(d.getTime()) ? null : d;
+    }
+    function pad2Of(n) { return ("0" + n).slice(-2); }
+    function startOfDayOf(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); }
+    function fmtNumericDate(d) {
+      return pad2Of(d.getFullYear() % 100) + "-" + pad2Of(d.getMonth() + 1) + "-" + pad2Of(d.getDate());
+    }
+    // A stamp the reader can place in time. Yesterday reads as a word in both
+    // languages; Chinese also names the day before, while English falls straight
+    // back to the numeric date for anything older (today is always just the clock).
+    function fmtStampOf(t) {
+      var d = toDateOf(t);
+      if (!d) return "";
+      var clock = pad2Of(d.getHours()) + ":" + pad2Of(d.getMinutes());
+      var days = Math.round((startOfDayOf(d) - startOfDayOf(new Date())) / 86400000);
+      if (days >= 0) return clock; // today (a future skew also reads as today)
+      if (days === -1) return T("time.yesterday") + " " + clock;
+      if (days === -2 && activeLang === "zh") return T("time.beforeYesterday") + " " + clock;
+      return fmtNumericDate(d) + " " + clock;
+    }
+    // The jump in flight (null when none). A newer jump retires the previous one,
+    // and the auto-follow stays out of the way while one is running.
+    var glide = null;
+    // Set once a jump has been seen handed back already finished: from then on the
+    // glide is drawn frame by frame instead of asked for again.
+    var smoothTeleports = false;
+
 
     // ---------- markdown helpers ----------
     function extractReplyText(node) {
@@ -685,16 +1169,26 @@ window.__ModuleLoader__.load({
     })();
 
     // ---------- component ----------
+    // The bail-out lives in this OUTER component, which deliberately calls NO hooks:
+    // a slot occupant can be rendered once without session props and again with them
+    // (a remount, a store that binds late), and a guard that returns before/after a
+    // different number of hooks makes React abort the whole panel with
+    // "Rendered more hooks than during the previous render" (#310). The hooks all
+    // live in the body below, which is only ever mounted with complete props.
     function OutlinePanel(props) {
+      if (!props.useChat) {
+        console.warn("[dsh-quick-toc] useChat prop missing (requires DSH >= 0.1.5-rc.1)");
+        return null;
+      }
+      return react_jsx_runtime.jsx(OutlinePanelBody, props);
+    }
+
+    function OutlinePanelBody(props) {
       // Recent DSH (0.1.5-rc.1): the conversation moved out of the session snapshot —
       // it is now the session-scope `chat` hook (ChatSnapshot: order + nodes
       // map + legacy projection), contributed by dsh-client-ui-chat. Same node
       // shape as before (kind user/assistant-step, location.turn, data.blocks).
       var useChat = props.useChat;
-      if (!useChat) {
-        console.warn("[dsh-quick-toc] useChat prop missing (requires DSH >= 0.1.5-rc.1)");
-        return null;
-      }
       var order = useChat(function (s) { return s.order; });
       var nodes = useChat(function (s) { return s.nodes; });
 
@@ -792,43 +1286,17 @@ window.__ModuleLoader__.load({
         };
       }, []);
 
-      // dock side: 'left' | 'right' (persisted; migrates old dsh-contents /
-      // dsh-dagang keys, default left)
-      var DOCK_KEY = "dsh-quick-toc.dock.v2";
-      var OLD_DOCK_KEYS = ["dsh-contents.dock.v2", "dsh-dagang.dock.v2"];
-      var _s3 = react.useState(function () {
-        try {
-          var d = localStorage.getItem(DOCK_KEY);
-          if (d === "left" || d === "right") return d;
-          for (var oi = 0; oi < OLD_DOCK_KEYS.length; oi++) {
-            var old = localStorage.getItem(OLD_DOCK_KEYS[oi]);
-            if (old === "left" || old === "right") { localStorage.setItem(DOCK_KEY, old); return old; }
-          }
-        } catch (e) {}
-        return "left";
-      });
+      // dock side: 'left' | 'right' (the store owns persistence, legacy-key migration
+      // and the default; the panel keeps a live copy so drags stay instant)
+      var _s3 = react.useState(function () { return prefsStore.get().dock; });
       var dock = _s3[0];
       var setDock = _s3[1];
       var toggleDock = function () {
-        var next = dock === "right" ? "left" : "right";
-        setDock(next);
-        try { localStorage.setItem(DOCK_KEY, next); } catch (e) {}
+        setDock(dock === "right" ? "left" : "right");
       };
 
-      // vertical drag offset (persisted; migrates old dsh-contents / dsh-dagang keys)
-      var PANEL_Y_KEY = "dsh-quick-toc.panelY.v1";
-      var OLD_PANEL_Y_KEYS = ["dsh-contents.panelY.v1", "dsh-dagang.panelY.v1"];
-      var _s4 = react.useState(function () {
-        try {
-          var v = localStorage.getItem(PANEL_Y_KEY);
-          if (v !== null && isFinite(Number(v))) return Number(v);
-          for (var oi = 0; oi < OLD_PANEL_Y_KEYS.length; oi++) {
-            var old = localStorage.getItem(OLD_PANEL_Y_KEYS[oi]);
-            if (old !== null && isFinite(Number(old))) { localStorage.setItem(PANEL_Y_KEY, old); return Number(old); }
-          }
-        } catch (e) {}
-        return 0;
-      });
+      // vertical drag offset (the store owns the key and the legacy-key migration)
+      var _s4 = react.useState(function () { return prefsStore.get().y; });
       var panelY = _s4[0];
       var setPanelY = _s4[1];
       var handleRef = react.useRef(null);      // panel top drag bar
@@ -851,47 +1319,20 @@ window.__ModuleLoader__.load({
       var hovered = _s6[0];
       var setHovered = _s6[1];
 
-      // panel size (persisted; width default 288, height 0 = auto)
-      var PANEL_W_KEY = "dsh-quick-toc.panelW.v1";
-      var PANEL_H_KEY = "dsh-quick-toc.panelH.v1";
-      var _s7 = react.useState(function () {
-        try { var w = Number(localStorage.getItem(PANEL_W_KEY)); if (isFinite(w) && w >= 180) return w; } catch (e) {}
-        return PANEL_WIDTH;
-      });
+      // panel size (the store owns the keys; width 0 = the panel default, height 0 = auto)
+      var _s7 = react.useState(function () { return prefsStore.get().w || PANEL_WIDTH; });
       var panelW = _s7[0];
       var setPanelW = _s7[1];
-      var _s8 = react.useState(function () {
-        try { var h = Number(localStorage.getItem(PANEL_H_KEY)); if (isFinite(h) && h >= 160) return h; } catch (e) {}
-        return 0;
-      });
+      var _s8 = react.useState(function () { return prefsStore.get().h; });
       var panelH = _s8[0];
       var setPanelH = _s8[1];
 
-      // ---- heading level filter (persisted) ----
+      // ---- heading level filter (the store owns the key and the legacy migration) ----
       // An arbitrary SET of levels, not a "show up to N" prefix: every chip is an
       // independent on/off switch, so H1 + H3 without H2 is a valid view. Turning
       // the last remaining level off restores all six (the panel is never empty).
-      var LEVELS_KEY = "dsh-quick-toc.levels.v1";
-      var OLD_MAX_LEVEL_KEY = "dsh-quick-toc.maxLevel.v1";
-      var ALL_LEVELS = [1, 2, 3, 4, 5, 6];
-      var _sLv = react.useState(function () {
-        try {
-          var raw = localStorage.getItem(LEVELS_KEY);
-          if (raw !== null) {
-            var arr = JSON.parse(raw);
-            if (Array.isArray(arr)) {
-              var kept = ALL_LEVELS.filter(function (lv) { return arr.indexOf(lv) !== -1; });
-              if (kept.length > 0) return kept;
-            }
-          }
-          // migrate the "show up to N" value written by earlier builds
-          var v = Number(localStorage.getItem(OLD_MAX_LEVEL_KEY));
-          if (isFinite(v) && v >= 1 && v <= 6) {
-            return ALL_LEVELS.filter(function (lv) { return lv <= v; });
-          }
-        } catch (e) {}
-        return ALL_LEVELS.slice();
-      });
+      var ALL_LEVELS = LEVELS_ALL;
+      var _sLv = react.useState(function () { return prefsStore.get().levels.slice(); });
       var levels = _sLv[0];
       var setLevels = _sLv[1];
       var levelSet = react.useMemo(function () {
@@ -908,7 +1349,6 @@ window.__ModuleLoader__.load({
           next = ALL_LEVELS.filter(function (x) { return x === lv || levelSet[x]; });
         }
         setLevels(next);
-        try { localStorage.setItem(LEVELS_KEY, JSON.stringify(next)); } catch (e) {}
       };
 
       // ---- heading-level picker popup (transient): opens from the round button
@@ -1033,6 +1473,9 @@ window.__ModuleLoader__.load({
       var hoverTimerRef = react.useRef(null);
       var hoverCloseTimerRef = react.useRef(null);
       var hoverStart = function (info, el) {
+        // the hover card is a preference: off means it never opens (the outline rows
+        // themselves keep their hover tint)
+        if (!prefsStore.get().hover) return;
         if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
         hoverTimerRef.current = setTimeout(function () {
           var r = el && el.getBoundingClientRect ? el.getBoundingClientRect() : null;
@@ -1139,18 +1582,79 @@ window.__ModuleLoader__.load({
       // ---- fuzzy matching: an independent switch beside the scope pill --------
       // Off (default) = the folded CONTIGUOUS match. On = subsequence matching, so
       // keywords tolerate text wedged in between ("模糊匹配" also finds "模糊的匹配").
-      var FUZZY_KEY = "dsh-quick-toc.fuzzy.v1";
-      var _sFz = react.useState(function () {
-        try { return localStorage.getItem(FUZZY_KEY) === "1"; } catch (e) { return false; }
-      });
+      var _sFz = react.useState(function () { return prefsStore.get().fuzzy; });
       var fuzzy = _sFz[0];
       var setFuzzy = _sFz[1];
       var toggleFuzzy = function () {
-        var next = !fuzzy;
-        setFuzzy(next);
+        setFuzzy(!fuzzy);
         setMatchIdx(0);
-        try { localStorage.setItem(FUZZY_KEY, next ? "1" : "0"); } catch (e) {}
       };
+
+      // ---- preference plumbing -------------------------------------------------
+      // The store is the shared source (the native Settings section writes into it);
+      // the states above are the panel's LIVE copy, so a drag or a toggle never waits
+      // for a round-trip. `lastSeen` records every value the panel has already agreed
+      // on, which is what separates "someone else changed this" (adopt it) from "the
+      // panel itself just changed it" (leave the live value alone — otherwise a stale
+      // store value would snap a half-finished drag back).
+      //
+      // Both effects MUST agree on the exact shape they compare, so every entry is kept
+      // in the panel's own form rather than the stored one: `levels` as the joined key
+      // (never the raw array) and `w` as the EFFECTIVE pixel width (a stored 0 only
+      // means "the panel default"). Recording the raw stored value instead makes the
+      // two comparisons disagree forever — the panel then republishes its default on
+      // every pass and stomps a fresh change with the value it had just read back.
+      var prefs = usePrefs();
+      // Resolve the language for this render FIRST: the group builder below bakes the
+      // localised turn stamps (昨天 versus a numeric date) into its memo, and `langKey`
+      // is what tells that memo a language switch has to rebuild it.
+      var langKey = setLanguage(prefs.lang, hostLanguage());
+      // What the panel last handed to the store. A store value that comes back equal to
+      // this is our own echo, not news — and the panel may already have moved on: it
+      // restores all six levels the moment the last one is switched off, long before
+      // that restore is written out, and the echo of the previous write would otherwise
+      // undo it. So only a value that differs from BOTH the live state and this record is
+      // an external change worth adopting. Size and position are not adopted at all:
+      // this panel is their only writer, so a pull can never bring news, only a stale
+      // copy — which is exactly what made a drag spring back to its previous size.
+      var sent = react.useRef({
+        dock: prefs.dock, y: prefs.y, w: prefs.w || PANEL_WIDTH, h: prefs.h,
+        levels: prefs.levels.join(","), fuzzy: prefs.fuzzy
+      });
+      react.useEffect(function () {
+        var localLevels = levels.join(",");
+        var storeLevels = prefs.levels.join(",");
+        if (prefs.dock !== dock && prefs.dock !== sent.current.dock) setDock(prefs.dock);
+        if (storeLevels !== localLevels && storeLevels !== sent.current.levels) setLevels(prefs.levels.slice());
+        if (prefs.fuzzy !== fuzzy && prefs.fuzzy !== sent.current.fuzzy) setFuzzy(prefs.fuzzy);
+      }, [prefs]);
+      // ...and publish the panel's own changes back, debounced: a drag fires on every
+      // pointer move and the Settings section does not need that resolution.
+      react.useEffect(function () {
+        var seen = sent.current;
+        var nextLevels = levels.join(",");
+        var patch = {};
+        if (dock !== seen.dock) patch.dock = dock;
+        if (panelY !== seen.y) patch.y = panelY;
+        if (panelW !== seen.w) patch.w = panelW;
+        if (panelH !== seen.h) patch.h = panelH;
+        if (nextLevels !== seen.levels) patch.levels = levels.slice();
+        if (fuzzy !== seen.fuzzy) patch.fuzzy = fuzzy;
+        if (!Object.keys(patch).length) return;
+        // agree on the panel's form of each published value (see the note above), so the
+        // next pass — including the one the store's own notification triggers — finds
+        // nothing left to publish and the debounced write cannot bounce back
+        var has = function (key) { return Object.prototype.hasOwnProperty.call(patch, key); };
+        if (has("dock")) seen.dock = patch.dock;
+        if (has("y")) seen.y = patch.y;
+        if (has("w")) seen.w = patch.w;
+        if (has("h")) seen.h = patch.h;
+        if (has("levels")) seen.levels = nextLevels;
+        if (has("fuzzy")) seen.fuzzy = patch.fuzzy;
+        var timer = setTimeout(function () { prefsStore.set(patch); }, 400);
+        return function () { clearTimeout(timer); };
+      }, [dock, panelY, panelW, panelH, levels, fuzzy]);
+
       var openSearch = function () {
         setSearchOpen(true);
         setSearchAnim("enter");
@@ -1322,23 +1826,39 @@ window.__ModuleLoader__.load({
         }
       };
 
+      // ---- panel scale (prefs.zoom) ------------------------------------------
+      // The preference magnifies what is INSIDE the panel — text, icons, buttons and
+      // their spacing — and never the panel's own box: the reader keeps full control
+      // of the size by dragging. A CSS zoom on the panel would scale the box as well,
+      // so every length that defines the box is divided by the factor and zoom
+      // multiplies it straight back: the box stays exactly the size that was dragged
+      // while the content inside is magnified (and simply shows less of itself).
+      // Measured on this Chromium: zoom scales the element's own box, its insets, its
+      // clip-path and viewport units, and getBoundingClientRect reports the scaled
+      // (visual) values.
+      var zoom = prefs.zoom > 0 ? prefs.zoom : 1;
+      // a length that must keep its VISUAL value under zoom (zoom multiplies it back)
+      var zLen = function (v) {
+        if (zoom === 1) return typeof v === "number" ? v + "px" : v;
+        return typeof v === "number" ? (v / zoom) + "px" : "calc(" + v + " / " + zoom + ")";
+      };
+
       // ---- resize drags (right edge = width, bottom edge = height) ----
+      // No upper bound and only a keep-it-usable floor: the reader decides how small
+      // the panel gets. The drags only move the live state; the preference effect
+      // persists the settled value (debounced), so there is exactly one writer.
       var onResizeWDown = function (e) {
         e.preventDefault();
         e.stopPropagation();
         if (e.button !== 0) return;
         var startX = e.clientX;
         var startW = panelW;
-        var lastW = panelW;
         var move = function (ev) {
-          var next = Math.max(180, Math.min(560, startW + (ev.clientX - startX)));
-          lastW = next;
-          setPanelW(next);
+          setPanelW(Math.max(120, startW + (ev.clientX - startX)));
         };
         var up = function () {
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
-          try { localStorage.setItem(PANEL_W_KEY, String(lastW)); } catch (e2) {}
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
@@ -1349,16 +1869,12 @@ window.__ModuleLoader__.load({
         if (e.button !== 0) return;
         var startY = e.clientY;
         var startH = panelH > 0 ? panelH : 400;
-        var lastH = startH;
         var move = function (ev) {
-          var next = Math.max(160, Math.min(window.innerHeight - 60, startH + (ev.clientY - startY)));
-          lastH = next;
-          setPanelH(next);
+          setPanelH(Math.max(60, startH + (ev.clientY - startY)));
         };
         var up = function () {
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
-          try { localStorage.setItem(PANEL_H_KEY, String(lastH)); } catch (e2) {}
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
@@ -1371,69 +1887,26 @@ window.__ModuleLoader__.load({
         var startY = e.clientY;
         var startW = panelW;
         var startH = panelH > 0 ? panelH : 400;
-        var lastW = startW;
-        var lastH = startH;
         var move = function (ev) {
-          var w = Math.max(180, Math.min(560, startW + (ev.clientX - startX)));
-          var h = Math.max(160, Math.min(window.innerHeight - 60, startH + (ev.clientY - startY)));
-          lastW = w;
-          lastH = h;
-          setPanelW(w);
-          setPanelH(h);
+          setPanelW(Math.max(120, startW + (ev.clientX - startX)));
+          setPanelH(Math.max(60, startH + (ev.clientY - startY)));
         };
         var up = function () {
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
-          try {
-            localStorage.setItem(PANEL_W_KEY, String(lastW));
-            localStorage.setItem(PANEL_H_KEY, String(lastH));
-          } catch (e2) {}
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
       };
 
-      // ---- node timestamp -> Date (handles ms / s epochs / ISO strings) ----
-      var toDate = function (t) {
-        if (t === undefined || t === null) return null;
-        if (typeof t === "string") {
-          var d0 = new Date(t);
-          return isNaN(d0.getTime()) ? null : d0;
-        }
-        var n = Number(t);
-        if (!isFinite(n) || n <= 0) return null;
-        if (n < 1e12) n = n * 1000; // epoch seconds -> ms
-        var d = new Date(n);
-        return isNaN(d.getTime()) ? null : d;
-      };
-      var pad2 = function (n) { return ("0" + n).slice(-2); };
-      // ---- node timestamp -> HH:MM ----
-      var fmtTime = function (t) {
-        var d = toDate(t);
-        return d ? pad2(d.getHours()) + ":" + pad2(d.getMinutes()) : "";
-      };
-
-      // ---- turn stamp: the clock alone is ambiguous in a session that spans days,
-      // so today stays "HH:MM", yesterday and the day before get a word, and anything
-      // older gets its date as YY-MM-DD (weekday-free, sortable, short).
-      var startOfDay = function (d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); };
-      var fmtStamp = function (t) {
-        var d = toDate(t);
-        if (!d) return "";
-        var clock = pad2(d.getHours()) + ":" + pad2(d.getMinutes());
-        var days = Math.round((startOfDay(new Date()) - startOfDay(d)) / 86400000);
-        if (days <= 0) return clock; // today (a future skew also reads as today)
-        if (days === 1) return T("time.yesterday") + " " + clock;
-        if (days === 2) return T("time.beforeYesterday") + " " + clock;
-        return pad2(d.getFullYear() % 100) + "-" + pad2(d.getMonth() + 1) + "-" + pad2(d.getDate()) + " " + clock;
-      };
-
+      // ---- node timestamp -> a readable stamp (helpers live at module scope so the
+      // language-sensitive formatting has exactly one home) ----
       // ---- best-effort node time across common field names ----
       var getNodeTime = function (node) {
         var d = node && node.data;
         if (!d) return "";
         var t = d.time !== undefined ? d.time : (d.createdAt !== undefined ? d.createdAt : d.timestamp);
-        return fmtStamp(t);
+        return fmtStampOf(t);
       };
 
       // ---- group headings by conversation turn (node.location.turn) ----
@@ -1559,7 +2032,7 @@ window.__ModuleLoader__.load({
         }
         while (li < ready.length) { merged.push(ready[li]); li++; }
         return merged;
-      }, [order, nodes, outlineTurns]);
+      }, [order, nodes, outlineTurns, langKey]);
       // first time content appears, scroll the list to the bottom (newest).
       // NOTE: must stay BELOW the `groups` memo — a deps array is evaluated
       // during render, so reading `groups` before that `var` is assigned would
@@ -1578,21 +2051,38 @@ window.__ModuleLoader__.load({
       }, [groups.length, query, visibleCount, panelW, panelH, open]);
       // Mount diagnostic: the host capabilities this panel actually reached
       // (whole-log turn index + jump loader). SILENT by default — a normal console
-      // should stay clean — and switched on with
-      //   localStorage.setItem("dsh-quick-toc.debug", "1")
-      // plus a reload. Kept because it is the fastest way to tell "the host has no
+      // should stay clean — and switched on from the plugin-configuration card
+      // ("print the mount diagnostic"), which persists the flag in the host settings
+      // document. Kept because it is the fastest way to tell "the host has no
       // turnOutline projection" apart from "the jump-loader bridge is broken".
       var mountLogRef = react.useRef(false);
       react.useEffect(function () {
         if (mountLogRef.current) return;
+        if (!prefsStore.get().debug) return; // the host has not answered yet, or it is off
         mountLogRef.current = true;
-        var debug = false;
-        try { debug = localStorage.getItem("dsh-quick-toc.debug") === "1"; } catch (e) { debug = false; }
-        if (!debug) return;
         console.log("[dsh-quick-toc] panel mounted · turnOutline=" +
           (outlineTurns ? outlineTurns.length + " turns" : "unavailable") +
-          " · jumpLoader=" + jumpLoaderState());
-      }, [outlineTurns]);
+          " · jumpLoader=" + jumpLoaderState() +
+          " · lang=" + activeLang + (langPref === "auto" ? " (auto)" : "") +
+          " · prefs=" + JSON.stringify(prefsStore.get()));
+        // `prefs` too: the host snapshot answers after mount, so a switch turned on in
+        // the card prints on the spot instead of asking for a reload
+      }, [outlineTurns, prefs]);
+
+      // Locator fallback for a turn the jump loader just paged in: once the paged
+      // window covers the turn, OUR OWN rebuilt outline has a loaded group for it,
+      // which carries that turn's node keys — that path does not depend on the host
+      // keeping a `data-chat-turn` attribute on the row.
+      //
+      // NOTE: this hook pair lives HERE, with the other hooks, and NOT next to the
+      // function that reads it further down. Hooks must run on EVERY render: the
+      // panel bails out early while the conversation is still empty (no groups), so a
+      // hook declared after that return is skipped on the empty render and added back
+      // on the next one — "Rendered more hooks than during the previous render"
+      // (React #310), which killed the panel exactly when a session went from empty
+      // to loaded.
+      var groupsRef = react.useRef([]);
+      react.useEffect(function () { groupsRef.current = groups; }, [groups]);
 
       var groupTrees = react.useMemo(function () {
         return groups.map(function (g) {
@@ -1751,6 +2241,11 @@ window.__ModuleLoader__.load({
         var followTimer = null;
         var lastRun = 0;
         var update = function (force) {
+          // a jump glide carries the conversation past many turns; following each
+          // transient position would make the rail sprint through the whole
+          // outline (wild jumps on rapid consecutive clicks), so hold still while
+          // one is in flight — the poll syncs the rail to the landing afterwards
+          if (glide) return;
           // scroll frames are hot and a document-level capture listener sees every
           // scroll in the app; the rail only changes when a different turn crosses
           // the viewport, so cap the row measurement at ~16/s
@@ -1893,6 +2388,20 @@ window.__ModuleLoader__.load({
         setHint(canLoadOlder() ? "more" : "");
       }, [query, matches.length]);
 
+      // keep the outline filled: after opening the panel or dragging it taller,
+      // the latest page may be shorter than the list viewport, leaving dead space
+      // below the newest group. Grow the window until the content fills the height
+      // (or every group is already shown). Outline mode only — the search list
+      // grows with its matches.
+      react.useEffect(function () {
+        if (query.trim() !== "") return;
+        var el = listRef.current;
+        if (!el || el.clientHeight === 0) return;
+        if (el.scrollHeight - el.clientHeight > 4) return; // content overflows: nothing blank below
+        if (visibleCount >= groups.length) return;
+        setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
+      }, [groups.length, visibleCount, panelW, panelH, open, query]);
+
       // keep the current row in view while stepping with Enter
       react.useEffect(function () {
         if (!query.trim() || activeResultRow < 0) return;
@@ -1906,10 +2415,52 @@ window.__ModuleLoader__.load({
         else if (er.bottom > lr2.bottom - 2) el.scrollTop += er.bottom - lr2.bottom + 2;
       }, [activeResultRow, query]);
 
+      // ---- crowded header: squeeze the middle, then scroll sideways -----------
+      // Four fixed-size controls share one header row. While there is room, the
+      // flexible spacer between the two pairs takes up the slack; once the controls
+      // would touch, the spacer is already at zero and the row becomes a sideways
+      // scroll strip — the wheel scrolls it, and the grab bar above fades out because
+      // there is no slack left to signal. Declared BEFORE the "nothing to show" return
+      // below, so the hook count never depends on the data (the React #310 lesson).
+      var headerRef = react.useRef(null);
+      var _sCrowd = react.useState(false);
+      var crowded = _sCrowd[0];
+      var setCrowded = _sCrowd[1];
+      // A scale change moves the box's LOCAL lengths while `zoom` itself cannot
+      // animate: that single render skips the `left` transition instead of sliding.
+      var prevZoom = react.useRef(zoom);
+      var zoomJustChanged = prevZoom.current !== zoom;
+      react.useEffect(function () { prevZoom.current = zoom; }, [zoom]);
+      react.useEffect(function () {
+        var el = headerRef.current;
+        if (!el) return;
+        var tight = el.scrollWidth > el.clientWidth + 1;
+        setCrowded(function (prev) { return prev === tight ? prev : tight; });
+      }, [open, panelW, zoom, dock, levelsOpen, searchOpen, groups.length]);
+      react.useEffect(function () {
+        var el = headerRef.current;
+        if (!el) return;
+        // `crowded` is captured here and the listener is re-attached whenever it
+        // changes, so the hot path (every wheel event) reads no layout at all —
+        // measuring scrollWidth per event would force a synchronous layout.
+        if (!crowded) return;
+        var onWheel = function (e) {
+          var d = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+          if (!d) return;
+          el.scrollLeft += d;
+          e.preventDefault(); // the transcript behind must not scroll instead
+          e.stopPropagation();
+        };
+        el.addEventListener("wheel", onWheel, { passive: false });
+        return function () { el.removeEventListener("wheel", onWheel); };
+      }, [open, crowded, groups.length]);
+
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
 
       // ---- geometry: always position by `left` (px) so dock-switch & slide share one animated transition
+      // (The scale preference leaves all of this alone: it acts on the panel's inner
+      // box, so the panel itself keeps the width and height the reader dragged.)
       var dockRight = dock === "right";
       var panelLeft;
       if (dockRight) {
@@ -1937,36 +2488,45 @@ window.__ModuleLoader__.load({
         if (e.button !== 0) return;
         var startY = e.clientY;
         var origY = panelY;
-        var lastY = panelY;
         var move = function (ev) {
           var next = origY + (ev.clientY - startY);
           next = Math.max(-(viewport ? viewport.top : 0), Math.min(window.innerHeight - 90, next));
-          lastY = next;
           setPanelY(next);
         };
         var up = function () {
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
-          // persist the DRAGGED value: `panelY` here is the value captured when
-          // the drag started (the state setter has not re-rendered this closure)
-          try { localStorage.setItem(PANEL_Y_KEY, String(lastY)); } catch (e2) {}
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
       };
       var handleBright = function (on) {
-        if (handleRef.current) handleRef.current.style.opacity = on ? "1" : "0.35";
+        // while the header is crowded the grab hint stays hidden even on hover
+        if (handleRef.current) handleRef.current.style.opacity = crowded ? "0" : (on ? "1" : "0.35");
       };
 
       // ---- jump: glide to the exact heading element ---------------------------
-      // A SMOOTH scroll is only trustworthy while the paged conversation keeps its
-      // geometry. A LONG jump travels through the whole window, and the host mounts
-      // and drops turns along the way, so the target's offset moves mid-flight and
-      // the animation lands short ("it scrolled halfway and stopped"). Long jumps
-      // therefore position INSTANTLY and then re-check for a short while (the same
-      // "instant, never smooth" rule the outline's own follow uses), while nearby
-      // headings keep the glide. When glued to the bottom, lift just past DSH's 25px
-      // stick-to-bottom threshold first so the landing is not yanked back.
+      // The glide is the browser's own smooth scrolling. It runs off the wall
+      // clock, not off a frame count, so it takes the same time on a 60Hz and on
+      // a 240Hz panel, and it coasts to a stop instead of stopping dead. Three
+      // guards, each one learned from a real failure:
+      //   * DSH holds the transcript at the bottom. A jump upward has to step out
+      //     of that 25px stick zone first, or the compensation scroll that comes
+      //     with it undoes the jump.
+      //   * A long jump makes the host page history in, which moves the target
+      //     while the animation is running, and the host's own compensation
+      //     scrolls cancel the animation outright. So the landing is watched and
+      //     the call re-issued — but only on a real drift (>40px) or a real stop
+      //     (>400ms with less than a pixel of movement). A watchdog that cannot
+      //     tell a slow start from a dead scroll re-issues on every tick, and
+      //     then the jump never animates at all: this curve begins with almost no
+      //     movement by design.
+      //   * If a browser carries the call out as an instant jump (none seen; the
+      //     check is cheap) the glide is drawn frame by frame instead, over a
+      //     real-time duration for the same reason as above.
+      // A short re-check after the landing keeps it honest while the host
+      // finishes measuring; a newer jump retires the previous one; and the
+      // auto-follow stays out of the way while one is in flight.
       var scrollTargetOf = function (el, sp) {
         var t = el.getBoundingClientRect().top - sp.getBoundingClientRect().top + sp.scrollTop - 20;
         var floor = Math.max(0, sp.scrollHeight - sp.clientHeight);
@@ -1974,28 +2534,94 @@ window.__ModuleLoader__.load({
       };
       var glideTo = function (el) {
         var sp = el.closest ? el.closest("[data-conversation-scroll]") : null;
-        if (!sp) {
-          el.scrollIntoView({ behavior: "smooth", block: "start" });
-          return;
-        }
-        var t = scrollTargetOf(el, sp);
+        if (!sp) return;
+        var t0 = scrollTargetOf(el, sp);
         var floor = Math.max(0, sp.scrollHeight - sp.clientHeight);
-        if (floor - sp.scrollTop <= 25 && Math.abs(t - sp.scrollTop) > 60) {
-          sp.scrollTop = Math.max(0, floor - 26);
+        if (floor - sp.scrollTop <= 25 && Math.abs(t0 - sp.scrollTop) > 60) {
+          sp.scrollTop = Math.max(0, floor - 26); // break the stick-to-bottom hold first
         }
-        if (Math.abs(t - sp.scrollTop) <= sp.clientHeight * 1.5) {
-          sp.scrollTo({ top: t, behavior: "smooth" });
-          return;
+        var from = sp.scrollTop;
+        var dist = Math.abs(t0 - from);
+        if (dist < 2) return;
+        if (glide) glide.done = true; // a newer jump takes over
+        var mine = { done: false };
+        glide = mine;
+        var aimed = t0;
+        var drawn = false;
+        var landed = false;
+
+        // landed: hand control back to the auto-follow immediately — holding the
+        // glide until the re-checks finish would delay the "currently reading"
+        // highlight by ~1s. The re-checks keep running in the background; they
+        // only nudge small offsets, which cannot re-trigger the wild rail chase.
+        var land = function () {
+          if (landed) return;
+          landed = true;
+          if (glide === mine) glide = null;
+          var ticks = 0;
+          var iv = setInterval(function () {
+            if (mine.done || (ticks += 1) > 5) { clearInterval(iv); return; }
+            var next = scrollTargetOf(el, sp);
+            if (Math.abs(next - sp.scrollTop) > 2) sp.scrollTop = next;
+          }, 120);
+        };
+
+        // fallback: draw the glide ourselves, in real time, decelerating to a stop
+        var draw = function () {
+          if (drawn) return;
+          drawn = true;
+          var start = Math.abs(sp.scrollTop - aimed) <= 2 ? from : sp.scrollTop; // undo an instant jump
+          // paced like the browser's own glide: ~0.7s for two screens, ~1.3s across a long session
+          var dur = Math.min(1400, Math.max(300, 190 + Math.sqrt(Math.abs(aimed - start)) * 13));
+          var started = Date.now();
+          sp.scrollTop = start;
+          var frame = function () {
+            if (mine.done) { if (glide === mine) glide = null; return; }
+            var k = Math.min(1, (Date.now() - started) / dur);
+            var eased = 1 - (1 - k) * (1 - k); // quick off the mark, long coast to a stop
+            var live = scrollTargetOf(el, sp); // the target's offset RIGHT NOW
+            sp.scrollTop = start + (live - start) * eased;
+            if (k < 1) requestAnimationFrame(frame);
+            else land();
+          };
+          requestAnimationFrame(frame);
+        };
+
+        var aim = function (top) {
+          aimed = top;
+          if (drawn) return; // a drawn glide cannot be re-aimed through the browser
+          if (smoothTeleports) { draw(); return; }
+          try { sp.scrollTo({ top: top, behavior: "smooth" }); }
+          catch (e) { sp.scrollTop = top; }
+        };
+
+        aim(t0);
+        if (!smoothTeleports && dist > (sp.clientHeight || 400) * 1.5) {
+          // one frame is enough to tell the two apart: an animation cannot have
+          // covered that much ground yet, whereas a jump carried out at once is
+          // already there and has to be drawn by hand from now on.
+          requestAnimationFrame(function () {
+            if (mine.done || drawn) return;
+            if (Math.abs(sp.scrollTop - t0) <= 2) { smoothTeleports = true; draw(); }
+          });
         }
-        // long jump: land now, then keep the landing honest for ~0.6s while the host
-        // finishes measuring the window it just re-paged
-        sp.scrollTop = t;
-        var ticks = 0;
-        var settle = setInterval(function () {
-          ticks++;
-          var next = scrollTargetOf(el, sp);
-          if (Math.abs(next - sp.scrollTop) > 2) sp.scrollTop = next;
-          if (ticks >= 5) clearInterval(settle);
+
+        var lastTop = from;
+        var lastMove = Date.now();
+        var stalls = 0;
+        var watch = setInterval(function () {
+          if (mine.done || glide !== mine || drawn) { clearInterval(watch); return; }
+          var live = scrollTargetOf(el, sp);
+          var top = sp.scrollTop;
+          if (Math.abs(live - aimed) > 40) { aim(live); lastTop = top; lastMove = Date.now(); return; }
+          if (Math.abs(top - aimed) <= 2) { clearInterval(watch); land(); return; }
+          if (Math.abs(top - lastTop) > 1) { lastTop = top; lastMove = Date.now(); stalls = 0; return; }
+          if (Date.now() - lastMove > 400) { // cancelled, or the call never took
+            stalls += 1;
+            if (stalls >= 2) draw();
+            aim(aimed);
+            lastMove = Date.now();
+          }
         }, 120);
       };
 
@@ -2024,12 +2650,7 @@ window.__ModuleLoader__.load({
         }
       };
 
-      // Fallback locator for the poll below: once the paged window covers the
-      // turn, OUR OWN rebuilt outline has a loaded group for it, which carries the
-      // anchor keys of that turn's nodes. That path does not depend on the host
-      // keeping a `data-chat-turn` attribute on the row.
-      var groupsRef = react.useRef([]);
-      react.useEffect(function () { groupsRef.current = groups; }, [groups]);
+      // reads the outline groups via the ref declared with the other hooks above
       var loadedGroupRow = function (turn) {
         var list = groupsRef.current || [];
         for (var i = 0; i < list.length; i++) {
@@ -2238,9 +2859,13 @@ window.__ModuleLoader__.load({
       // the dock edge, clipped by the sidebar line (looks covered, not
       // dissolving) and only fades at the very end. No box-shadow: a shadow
       // would get cut in half by the clip-path, so the panel is flat.
-      var panelTransition = open
-        ? "left 0.6s " + EASE + ", clip-path 0.6s " + EASE + ", opacity 0.45s ease"
-        : "left 0.28s " + EASE + ", clip-path 0.28s " + EASE + ", opacity 0.14s ease 0.26s";
+      // A scale change moves the box's LOCAL lengths (they are divided by the factor)
+      // while `zoom` itself does not animate: leaving `left` in the transition on that
+      // one render would let the panel slide across the screen. It lands on exactly the
+      // same visual spot either way, so that render simply skips the transition.
+      var slide = open ? "0.6s " + EASE : "0.28s " + EASE;
+      var panelTransition = (zoomJustChanged ? "" : "left " + slide + ", ")
+        + "clip-path " + slide + ", opacity " + (open ? "0.45s ease" : "0.14s ease 0.26s");
 
       // clip the panel at the dock edge while collapsed, so sliding away looks
       // like being covered by the sidebar (the sidebar stays untouched):
@@ -2252,9 +2877,9 @@ window.__ModuleLoader__.load({
       if (!open) {
         if (dockRight) {
           // mirror of LEFT: clip the RIGHT side (panel flies right, shrinking from its right)
-          panelClip = "inset(0 " + panelW + "px 0 0)";
+          panelClip = "inset(0 " + zLen(panelW) + " 0 0)";
         } else {
-          panelClip = "inset(0 0 0 " + (panelW + 8) + "px)";
+          panelClip = "inset(0 0 0 " + zLen(panelW + 8) + ")";
         }
       }
       // faded out entirely while another center-column view is active
@@ -2268,11 +2893,12 @@ window.__ModuleLoader__.load({
       var panelEl = react_jsx_runtime.jsx("div", {
         style: {
           position: "fixed",
-          top: baseTopPx + "px",
-          left: panelLeft + "px",
-          width: panelW + "px",
-          maxHeight: vMaxH,
-          height: panelH > 0 ? panelH + "px" : undefined,
+          top: zLen(baseTopPx),
+          left: zLen(panelLeft),
+          width: zLen(panelW),
+          maxHeight: zLen(vMaxH),
+          height: panelH > 0 ? zLen(panelH) : undefined,
+          zoom: zoom === 1 ? undefined : zoom,
           display: "flex",
           flexDirection: "column",
           background: C.panelBg,
@@ -2322,16 +2948,20 @@ window.__ModuleLoader__.load({
                 ref: handleRef,
                 style: {
                   width: 56,
+                  maxWidth: "calc(100% - 12px)",
                   height: 5,
                   borderRadius: 999,
                   cornerShape: "round",
                   background: "var(--dsw-alias-border-l2, rgba(128,128,128,0.55))",
-                  opacity: 0.35,
+                  // no slack left in the header -> the grab hint fades away
+                  opacity: crowded ? 0 : 0.35,
                   transition: "opacity 0.2s ease",
                   margin: "5px auto 2px"
                 }
               }),
               react_jsx_runtime.jsx("div", {
+                ref: headerRef,
+                className: "dqt-header",
                 style: {
                   display: "flex",
                   alignItems: "center",
@@ -2340,7 +2970,14 @@ window.__ModuleLoader__.load({
                   borderBottom: "1px solid " + C.panelBorder,
                   fontSize: 13,
                   fontWeight: 600,
-                  gap: 6
+                  gap: 6,
+                  // the four controls keep their size and stay on ONE line; when the row
+                  // runs out of room it scrolls sideways (wheel) instead of wrapping or
+                  // overlapping, and the flexible spacer below collapses first
+                  flexWrap: "nowrap",
+                  overflowX: "auto",
+                  overflowY: "hidden",
+                  scrollbarWidth: "none"
                 },
                 children: [
                   // LEFT pair: the heading-level filter and the dock toggle take the
@@ -2403,8 +3040,9 @@ window.__ModuleLoader__.load({
                       iconBtn(toggleDock, dockRight ? T("handle.dockLeft") : T("handle.dockRight"), dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: -1 } : { x: 1, y: -1 })
                     ]
                   }),
-                  // spacer: nothing here, it just pins the two pairs to the two ends
-                  react_jsx_runtime.jsx("div", { style: { flex: "1 1 auto" } }),
+                  // spacer: nothing here, it just pins the two pairs to the two ends —
+                  // and it is the first thing to give way when the panel narrows
+                  react_jsx_runtime.jsx("div", { style: { flex: "1 1 auto", minWidth: 0 } }),
                   // RIGHT pair: search + collapse
                   react_jsx_runtime.jsx("div", {
                     style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
@@ -2787,13 +3425,15 @@ window.__ModuleLoader__.load({
           }),
           toastEl,
           // resize handles (right edge: width, bottom edge: height)
+          // Their grab strips keep their SCREEN thickness under the scale factor:
+          // they are part of the panel's box, not of its magnified content.
           react_jsx_runtime.jsx("div", {
             style: {
               position: "absolute",
               top: 0,
               bottom: 0,
               right: 0,
-              width: 8,
+              width: zLen(8),
               cursor: "col-resize",
               touchAction: "none",
               zIndex: 2
@@ -2807,7 +3447,7 @@ window.__ModuleLoader__.load({
               left: 0,
               right: 0,
               bottom: 0,
-              height: 8,
+              height: zLen(8),
               cursor: "row-resize",
               touchAction: "none",
               zIndex: 2
@@ -2821,8 +3461,8 @@ window.__ModuleLoader__.load({
               position: "absolute",
               right: 0,
               bottom: 0,
-              width: 16,
-              height: 16,
+              width: zLen(16),
+              height: zLen(16),
               cursor: "nwse-resize",
               touchAction: "none",
               zIndex: 3
@@ -3240,7 +3880,7 @@ window.__ModuleLoader__.load({
               bottom: 0,
               background: C.groupTint,
               opacity: isActive ? 1 : 0,
-              transition: "opacity 0.18s ease",
+              transition: "opacity 0.4s ease",
               pointerEvents: "none"
             }
           }, "g-h-tint-" + gi),
@@ -3441,7 +4081,7 @@ window.__ModuleLoader__.load({
             // the box fades in AND out: colour transitions only, and the left accent
             // keeps its 3px width in both states so activating a group never reflows
             // (a width change would shift every row by 2px)
-            transition: "opacity 0.15s ease, background-color 0.18s ease, border-color 0.18s ease",
+            transition: "opacity 0.4s ease, background-color 0.4s ease, border-color 0.4s ease",
             backgroundColor: isActive ? C.groupTint : "transparent",
             borderTop: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
             borderRight: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
@@ -3457,23 +4097,255 @@ window.__ModuleLoader__.load({
       return out;
     }
 
-    // Host-facing locale namespace: the slot declares `locale: "dsh-quick-toc"`,
-    // which is what hands the panel its `t` prop. The panel's own visible strings
-    // live in DICTS and are kept in sync with this table.
-    var zh = {
-      "panel.title": DICTS.zh["panel.title"]
-    };
-    var en = {
-      "panel.title": "Conversation Outline"
-    };
+    // Host-facing locale namespace: the slot declares `locale: "dsh-quick-toc"`, and
+    // registering BOTH tables under the same keys is what lets the panel follow the
+    // host's language: `T` asks the host translation first and only falls back to the
+    // built-in table. Keep the two hand-written tables below in sync with DICTS — the
+    // offline suite asserts that every DICTS key exists in both languages, and the
+    // host-facing tables are derived from DICTS so they cannot drift.
+    var zh = {};
+    var en = {};
+    (function () {
+      for (var key in DICTS.zh) {
+        if (!Object.prototype.hasOwnProperty.call(DICTS.zh, key)) continue;
+        zh[key] = DICTS.zh[key];
+        en[key] = DICTS.en[key] === undefined ? DICTS.zh[key] : DICTS.en[key];
+      }
+    })();
+
+    // ---------- plugin-configuration card ----------
+    // Settings → Plugins → Plugin configuration renders one collapsible card per
+    // served settings namespace; this is ours, keyed on the namespace the host half
+    // registers. It edits the SAME store the panel writes to, so the two sides are
+    // live in both directions. The chrome mirrors the section's own card (radii,
+    // borders, spacing, tokens) because a plugin bundle cannot import the section's
+    // CSS module.
+    function TocSettingsCard() {
+      var prefs = usePrefs();
+      setLanguage(prefs.lang, hostLanguage());
+      var snap = prefsStore.host();
+      var writable = !!snap && snap.writable === true;
+      var user = snap && snap.user && typeof snap.user === "object" ? snap.user : {};
+      var openState = react.useState(false);
+      var open = openState[0];
+      var setOpen = openState[1];
+      var commit = function (patch) { prefsStore.set(patch); };
+      var resetField = function (key) { prefsStore.unset(key); };
+      // joined segments: one outer frame, the options split by thin dividers —
+      // the same control shape the fonttune card uses (heights, fonts, surfaces)
+      var seg = function (options, current, onPick) {
+        return react_jsx_runtime.jsx("div", {
+          className: "dqt-seg",
+          children: options.map(function (pair) {
+            var on = current === pair[0];
+            return react_jsx_runtime.jsx("button", {
+              type: "button",
+              "aria-pressed": on,
+              disabled: !writable,
+              onClick: function () { onPick(pair[0]); },
+              className: "dqt-segBtn" + (on ? " dqt-segOn" : ""),
+              children: pair[1]
+            }, pair[0]);
+          })
+        });
+      };
+      // the boolean rows use the same joined segments (开启/关闭), not a checkbox
+      var onoff = function (on, onToggle) {
+        return seg([["on", T("settings.on")], ["off", T("settings.off")]], on ? "on" : "off",
+          function (v) { onToggle(v === "on"); });
+      };
+      // Scale slider, 50%..200% in 5% notches — the same control shape as the fonttune
+      // card's slider. Dragging only moves a LOCAL value: the settings document is
+      // written once the pointer is released (a per-notch rewrite would recompute the
+      // panel mid-drag), and the local value stays on screen until the host confirms it,
+      // so the readout never bounces back to the old number for a frame.
+      var _sZoomDrag = react.useState(null);
+      var zoomDrag = _sZoomDrag[0];
+      var setZoomDrag = _sZoomDrag[1];
+      var zoomAwaiting = react.useRef(null);
+      var commitZoom = function (pct) {
+        zoomAwaiting.current = pct;
+        commit({ zoom: pct / 100 });
+      };
+      react.useEffect(function () {
+        if (zoomAwaiting.current === null) { setZoomDrag(null); return; }
+        if (Math.round(prefs.zoom * 100) === zoomAwaiting.current) {
+          zoomAwaiting.current = null;
+          setZoomDrag(null);
+        }
+      }, [prefs.zoom]);
+      react.useEffect(function () {
+        if (zoomDrag === null) return undefined;
+        var release = function () {
+          // one release per drag: a late pointerup must not rewrite the same value
+          if (zoomAwaiting.current !== null) return;
+          commitZoom(zoomDrag);
+        };
+        window.addEventListener("pointerup", release, true);
+        window.addEventListener("touchend", release, true);
+        return function () {
+          window.removeEventListener("pointerup", release, true);
+          window.removeEventListener("touchend", release, true);
+        };
+      }, [zoomDrag]);
+      var zoomPct = (zoomDrag === null ? Math.round(prefs.zoom * 100) : zoomDrag);
+      var zoomControl = react_jsx_runtime.jsxs("div", {
+        children: [
+          react_jsx_runtime.jsxs("div", {
+            className: "dqt-sliderRow",
+            children: [
+              react_jsx_runtime.jsx("input", {
+                type: "range",
+                className: "dqt-slider",
+                min: 50,
+                max: 200,
+                step: 5,
+                value: zoomPct,
+                disabled: !writable,
+                "aria-label": T("settings.zoom"),
+                onChange: function (e) { setZoomDrag(Number(e.target.value)); },
+                onKeyUp: function () { if (zoomDrag !== null) commitZoom(zoomDrag); },
+                onBlur: function () { if (zoomDrag !== null) commitZoom(zoomDrag); }
+              }),
+              react_jsx_runtime.jsx("span", { className: "dqt-sliderValue", children: zoomPct + "%" })
+            ]
+          }),
+          react_jsx_runtime.jsxs("div", {
+            className: "dqt-sliderScale",
+            children: [
+              react_jsx_runtime.jsx("span", { children: "50%" }),
+              react_jsx_runtime.jsx("span", { children: "200%" })
+            ]
+          })
+        ]
+      });
+      var field = function (key, label, hint, control, inline, last) {
+        var overridden = Object.prototype.hasOwnProperty.call(user, key);
+        var reset = overridden ? react_jsx_runtime.jsx("button", {
+          type: "button",
+          className: "dqt-pfieldReset",
+          disabled: !writable,
+          onClick: function () { resetField(key); },
+          children: T("settings.resetField")
+        }) : null;
+        return react_jsx_runtime.jsxs("div", {
+          className: "dqt-pfield" + (last ? " dqt-pfieldLast" : ""),
+          children: [
+            react_jsx_runtime.jsxs("div", {
+              className: "dqt-pfieldHead",
+              children: [
+                react_jsx_runtime.jsx("span", { className: "dqt-pfieldLabel", children: label }),
+                overridden ? react_jsx_runtime.jsx("span", { className: "dqt-poverridden", children: T("settings.overridden") }) : null,
+                reset,
+                inline ? react_jsx_runtime.jsx("span", { className: "dqt-pinline", children: control }) : null
+              ]
+            }),
+            hint ? react_jsx_runtime.jsx("p", { className: "dqt-phint", children: hint }) : null,
+            inline ? null : control
+          ]
+        }, key);
+      };
+      var levelsControl = function (inline) {
+        return react_jsx_runtime.jsx("div", {
+          className: "dqt-pseg" + (inline ? " dqt-psegInline" : ""),
+        children: LEVELS_ALL.map(function (lv) {
+          var on = prefs.levels.indexOf(lv) !== -1;
+          return react_jsx_runtime.jsx("button", {
+            type: "button",
+            disabled: !writable,
+            onClick: function () {
+              var next;
+              if (on) {
+                next = prefs.levels.filter(function (x) { return x !== lv; });
+                if (next.length === 0) next = LEVELS_ALL.slice(); // never leave the panel empty
+              } else {
+                next = LEVELS_ALL.filter(function (x) { return x === lv || prefs.levels.indexOf(x) !== -1; });
+              }
+              commit({ levels: next });
+            },
+            title: (on ? T("levels.hide") : T("levels.show")) + lv,
+            className: "dqt-psegBtn" + (on ? " dqt-psegOn" : ""),
+            children: "H" + lv
+          }, "lv-" + lv);
+        })
+      });
+      };
+      var fields = [
+        field("lang", T("settings.language"), T("settings.language.tip"),
+          seg([["auto", T("settings.lang.auto")], ["zh", T("settings.lang.zh")], ["en", T("settings.lang.en")]], prefs.lang,
+            function (v) { commit({ lang: v }); }), true),
+        field("dock", T("settings.dock"), "",
+          seg([["left", T("settings.dock.left")], ["right", T("settings.dock.right")]], prefs.dock,
+            function (v) { commit({ dock: v }); }), true),
+        field("levels", T("settings.levels"), "", levelsControl(true), true),
+        field("zoom", T("settings.zoom"), T("settings.zoom.tip"), zoomControl, false),
+        field("fuzzy", T("settings.fuzzy"), "", onoff(prefs.fuzzy, function (v) { commit({ fuzzy: v }); }), true),
+        field("hover", T("settings.hover"), "", onoff(prefs.hover, function (v) { commit({ hover: v }); }), true),
+        field("debug", T("settings.debug"), T("settings.debug.tip"), onoff(prefs.debug, function (v) { commit({ debug: v }); }), true, true)
+      ];
+      return react_jsx_runtime.jsxs("li", {
+        className: "dqt-pcard" + (open ? " dqt-pcardOpen" : ""),
+        children: [
+          react_jsx_runtime.jsxs("button", {
+            type: "button",
+            className: "dqt-phead",
+            "aria-expanded": open,
+            onClick: function () { setOpen(!open); },
+            children: [
+              react_jsx_runtime.jsxs("span", { className: "dqt-pheadText", children: [
+                react_jsx_runtime.jsx("span", { className: "dqt-pname", children: T("panel.title") }),
+                react_jsx_runtime.jsx("span", { className: "dqt-pdesc", children: T("settings.desc") })
+              ] }),
+              react_jsx_runtime.jsx("span", { className: "dqt-pchev" + (open ? " dqt-pchevOpen" : ""), "aria-hidden": "true", children: "⌄" })
+            ]
+          }),
+          open ? react_jsx_runtime.jsx("div", {
+            className: "dqt-pbody",
+            children: [
+              writable ? null : react_jsx_runtime.jsx("p", { className: "dqt-preadOnly", role: "status", children: T("settings.readOnly") }),
+              fields
+            ]
+          }) : null
+        ]
+      });
+    }
 
-    var inject = ["slots", "locale"];
+    var inject = ["slots", "locale", "settingsScope"];
 
     function apply(ctx) {
       ctx.effect(function () {
         return ctx.locale.register("dsh-quick-toc", { zh: zh, en: en });
       }, "dsh-quick-toc: dictionaries");
 
+      // The host's translate function for our namespace is what makes "follow the
+      // host" work: `T` prefers it, so the panel speaks whatever language DSH is in.
+      // Optional on purpose — a host without a locale service leaves the built-in
+      // table in charge.
+      if (ctx.locale && typeof ctx.locale.bind === "function") {
+        try {
+          var bound = ctx.locale.bind("dsh-quick-toc");
+          hostTranslate = function (key) {
+            try {
+              var s = bound(key);
+              // the host echoes the key back for anything it cannot translate, and the
+              // built-in table is the better fallback in that case
+              return typeof s === "string" && s !== key ? s : undefined;
+            } catch (e) {
+              return undefined;
+            }
+          };
+        } catch (e) {
+          hostTranslate = null;
+        }
+      }
+
+      // Two open DSH tabs should agree: the other tab's write to one of these keys
+      // arrives here as a `storage` event, and the store re-reads and notifies, so the
+      // panel and the configuration card both follow along.
+      if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+        window.addEventListener("storage", function () { prefsStore.reload(); });
+      }
+
       // Bridge to the host session face, used to open a turn whose events the
       // paged window has not loaded: ctx.sessions.binding(id).session.loadThrough(seq)
       // is the host's documented "page history backwards until the window covers
@@ -3512,6 +4384,36 @@ window.__ModuleLoader__.load({
           return OutlinePanel(Object.assign({}, props, { tocHost: host }));
         });
       });
+
+      // The client settings scope: the browser face of the namespace the host half
+      // registers. The store adopts its snapshot as the authoritative layer for the
+      // host-backed fields and routes writes to it; on a host without the service (or
+      // on a non-loopback page, where DSH keeps settings read-only) the localStorage
+      // mirror keeps every preference working, exactly as 0.5.x did.
+      var boundScope = null;
+      if (ctx.settingsScope && typeof ctx.settingsScope.bind === "function") {
+        try {
+          boundScope = ctx.settingsScope.bind({ namespace: NAMESPACE });
+          prefsStore.attachHost(boundScope);
+        } catch (e) {
+          boundScope = null;
+          console.warn("[dsh-quick-toc] settings scope unavailable, preferences stay in this browser:", e);
+        }
+      }
+
+      // The plugin-configuration card: Settings → Plugins → Plugin configuration, a
+      // keyed slot dispatched only for namespaces the Host actually serves. Registering
+      // it only when the scope bound keeps a half-configured host from rendering a card
+      // that could not read or write anything.
+      if (boundScope) {
+        ctx.slots.inject("settings.plugin.item", function () {
+          return ctx.slots.register({
+            name: "settings.plugin.item",
+            key: NAMESPACE,
+            locale: "dsh-quick-toc"
+          }, TocSettingsCard);
+        });
+      }
     }
 
     exports.name = "dsh-quick-toc"; // runner attributes slot entries to this registrant
@@ -3549,7 +4451,57 @@ window.__ModuleLoader__.load({
         ".dqt-list::-webkit-scrollbar-button{display:none;height:0;width:0}" +
         ".dqt-list::-webkit-scrollbar-track{background:transparent}" +
         ".dqt-list::-webkit-scrollbar-thumb{background:transparent}" +
-        ".dqt-list::-webkit-scrollbar-corner{background:transparent}";
+        ".dqt-list::-webkit-scrollbar-corner{background:transparent}" +
+        // the header scrolls sideways once the four controls fill it: the native bar
+        // would be taller than the row, so it is hidden (the wheel still scrolls)
+        ".dqt-header{scrollbar-width:none;-ms-overflow-style:none}" +
+        ".dqt-header::-webkit-scrollbar{display:none;width:0;height:0}" +
+        ".dqt-header::-webkit-scrollbar-thumb{background:transparent}" +
+        // Plugin-configuration card (Settings → Plugins → Plugin configuration).
+        // The chrome reproduces the section's own card — a plugin bundle cannot
+        // import that CSS module — with the same tokens, radii and spacing.
+        ".dqt-pcard{border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-3);border-radius:16px;list-style:none;transition:border-color .16s,background .16s}" +
+        ".dqt-pcard:hover{border-color:var(--dsw-alias-label-dimmed)}" +
+        ".dqt-pcardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}" +
+        ".dqt-phead{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}" +
+        ".dqt-phead:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}" +
+        ".dqt-pheadText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}" +
+        ".dqt-pname{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}" +
+        ".dqt-pdesc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}" +
+        ".dqt-pchev{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}" +
+        ".dqt-pchevOpen{transform:rotate(180deg)}" +
+        ".dqt-pbody{border-top:.5px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}" +
+        ".dqt-preadOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}" +
+        ".dqt-pfield{padding:14px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}" +
+        ".dqt-pfieldLast{border-bottom:0}" +
+        ".dqt-pfieldHead{align-items:center;gap:8px;display:flex}" +
+        ".dqt-pfieldLabel{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}" +
+        ".dqt-poverridden{flex:none;color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-layer-2);border:.5px solid var(--dsw-alias-border-l3);border-radius:999px;padding:1px 8px;font-size:11px;line-height:16px}" +
+        ".dqt-pfieldReset{flex:none;appearance:none;font:inherit;cursor:pointer;background:0 0;border:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;padding:0}" +
+        ".dqt-pfieldReset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}" +
+        ".dqt-pfieldReset:disabled{opacity:.4;cursor:default}" +
+        ".dqt-pinline{flex:1;justify-content:flex-end;align-items:center;gap:10px;display:flex}" +
+        ".dqt-phint{color:var(--dsw-alias-label-tertiary);margin:4px 0 0;font-size:12px;line-height:18px}" +
+        ".dqt-pseg{align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}" +
+        ".dqt-psegInline{margin-top:0}" +
+        ".dqt-psegBtn{appearance:none;font:inherit;cursor:pointer;height:28px;padding:0 12px;color:var(--dsw-alias-label-secondary);background:0 0;border:.5px solid var(--dsw-alias-border-l3);border-radius:8px;font-size:13px;line-height:18px}" +
+        ".dqt-psegBtn:hover:not(:disabled):not(.dqt-psegOn){background:var(--dsw-specific-sidebar-nav-item-hover)}" +
+        ".dqt-psegBtn:disabled{opacity:.4;cursor:default}" +
+        ".dqt-psegOn{color:var(--dsw-alias-label-primary);background:var(--dsw-specific-sidebar-nav-item-active);border-color:transparent}" +
+        // joined segmented control — one outer frame, options split by thin
+        // dividers; same heights, fonts and surfaces as the fonttune card's
+        ".dqt-seg{flex:none;display:inline-flex;overflow:hidden;background:var(--dsw-alias-bg-layer-2);border:.5px solid var(--dsw-alias-border-l3);border-radius:8px}" +
+        ".dqt-segBtn{appearance:none;font:inherit;cursor:pointer;height:28px;padding:0 14px;color:var(--dsw-alias-label-secondary);background:0 0;border:none;border-left:.5px solid var(--dsw-alias-border-l3);font-size:13px;line-height:18px}" +
+        ".dqt-segBtn:first-child{border-left:none}" +
+        ".dqt-segBtn:hover:not(:disabled):not(.dqt-segOn){background:var(--dsw-specific-sidebar-nav-item-hover)}" +
+        ".dqt-segBtn:disabled{opacity:.4;cursor:default}" +
+        ".dqt-segOn{color:var(--dsw-alias-label-primary);background:var(--dsw-specific-sidebar-nav-item-active)}" +
+        // scale slider — the fonttune card's slider shape (track, readout, end labels)
+        ".dqt-sliderRow{align-items:center;gap:10px;margin-top:10px;display:flex}" +
+        ".dqt-slider{flex:1;min-width:0;height:20px;accent-color:var(--dsw-alias-brand-primary)}" +
+        ".dqt-slider:disabled{opacity:.4;cursor:default}" +
+        ".dqt-sliderValue{flex:none;min-width:56px;text-align:right;color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}" +
+        ".dqt-sliderScale{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;display:flex;justify-content:space-between}";
       document.head.appendChild(s);
     })();