dsh-chat-background 0.0.0-stage → 1.0.0

package/client.js

@@ -0,0 +1,3229 @@
+/**
+ * dsh-chat-background v1.0.0
+ * Chat background image, sidebar veil, composer strip, task progress bar and all-session token total for the DeepSeek Harness (DSH) Web GUI.
+ * @author LittleLemonJam
+ * @license MIT
+ * @homepage https://github.com/LittleLemonJam/dsh-chat-background
+ *
+ * Generated by scripts/build.mjs from src/ — do not edit this file by hand.
+ */
+(() => {
+  // src/constants.js
+  var LIST_URL = "/chat-backgrounds/list";
+  var FILE_URL = "/chat-backgrounds/files/";
+  var FOLDER_URL = "/chat-backgrounds/folder";
+  var TOKEN_URL = "/chat-backgrounds/token-total";
+  var FOLDER_HEADER = "x-dsh-chat-background";
+  var FOLDER_HEADER_VALUE = "1";
+  var SELECTION_KEY = "dsh-chat-background:selection";
+  var MODE_KEY = "dsh-chat-background:mode";
+  var ROTATION_INTERVAL_KEY = "dsh-chat-background:rotation-interval";
+  var ROTATION_DURATION_KEY = "dsh-chat-background:rotation-duration";
+  var ROTATION_EFFECT_KEY = "dsh-chat-background:rotation-effect";
+  var ROTATION_GROUP_KEY = "dsh-chat-background:rotation-group";
+  var ROTATION_ORDER_KEY = "dsh-chat-background:rotation-order";
+  var SCRIM_KEY = "dsh-chat-background:scrim";
+  var VEIL_KEY = "dsh-chat-background:veil";
+  var SCRIM_LEFT_KEY = "dsh-chat-background:scrim-left";
+  var SCRIM_MAIN_KEY = "dsh-chat-background:scrim-main";
+  var SCRIM_RIGHT_KEY = "dsh-chat-background:scrim-right";
+  var STRIP_KEY = "dsh-chat-background:strip";
+  var STRIP_COLOR_KEY = "dsh-chat-background:strip-color";
+  var PROGRESS_KEY = "dsh-chat-background:progress";
+  var PROGRESS_COLOR_KEY = "dsh-chat-background:progress-color";
+  var TOKEN_KEY = "dsh-chat-background:token";
+  var TOKEN_SIZE_KEY = "dsh-chat-background:token-size";
+  var ACTIVE_ATTRIBUTE = "data-dsh-chat-background";
+  var LIFT_ATTRIBUTE = "data-dsh-chat-background-lift";
+  var SIDEBAR_COLUMN_ATTRIBUTE = "data-dsh-chat-background-column";
+  var MAIN_COLUMN_ATTRIBUTE = "data-dsh-chat-background-main";
+  var RIGHT_COLUMN_ATTRIBUTE = "data-dsh-chat-background-right";
+  var RIGHT_PANEL_ATTRIBUTE = "data-dsh-chat-background-right-panel";
+  var RIGHT_PANEL_FULL_ATTRIBUTE = "data-dsh-chat-background-right-panel-full";
+  var LAYOUT_FRAME_ATTRIBUTE = "data-dsh-chat-background-frame";
+  var FRAME_ANIMATING_ATTRIBUTE = "data-dsh-chat-background-frame-animating";
+  var RIGHT_FULLSCREEN_ATTRIBUTE = "data-dsh-chat-background-right-fullscreen";
+  var NO_ANIMATION_ATTRIBUTE = "data-dsh-chat-background-no-animation";
+  var BACKGROUND_LAYER_ATTRIBUTE = "data-dsh-chat-background-layer";
+  var STRIP_ATTRIBUTE = "data-dsh-chat-strip";
+  var TOKEN_NODE_ATTRIBUTE = "data-dsh-token-total";
+  var CSS_TAG_ID = "dsh-chat-background/background.css";
+  var DYNAMIC_TAG_ID = "dsh-chat-background/measured.css";
+  var INLINE_PROPERTIES = [
+    "--dsh-chat-background-image",
+    "--dsh-chat-background-scrim-left",
+    "--dsh-chat-background-scrim-main",
+    "--dsh-chat-background-scrim-right",
+    "--dsh-chat-strip-bg",
+    "--dsh-progress-color",
+    "--dsh-token-size"
+  ];
+  var SCRIM_MIN = 0;
+  var SCRIM_MAX = 100;
+  var SCRIM_DEFAULT = 58;
+  var VEIL_MIN = 0;
+  var VEIL_MAX = 90;
+  var VEIL_DEFAULT = 45;
+  var TOKEN_SIZE_MIN = 10;
+  var TOKEN_SIZE_MAX = 20;
+  var TOKEN_SIZE_DEFAULT = 14;
+  var STRIP_DEFAULT_HEX = "#f2f3f5";
+  var PROGRESS_DEFAULT_HEX = "#4176e6";
+  var ROTATION_INTERVAL_MIN = 5;
+  var ROTATION_INTERVAL_MAX = 300;
+  var ROTATION_INTERVAL_DEFAULT = 30;
+  var ROTATION_DURATION_MIN = 0;
+  var ROTATION_DURATION_MAX = 3;
+  var ROTATION_DURATION_DEFAULT = 0.6;
+  var ROTATION_EFFECTS = ["fade", "fade-through", "none"];
+  var ROTATION_EFFECT_DEFAULT = "fade";
+  var ROTATION_EVENT = "dsh-chat-background:selection-changed";
+  var ROTATION_LAYER_ATTRIBUTE = "data-dsh-chat-background-rotate-layer";
+  var PROGRESS_DEFAULT_TOKEN = "--dsw-alias-brand-primary";
+  var TOKEN_POLL_MS = 6e4;
+  var SECTION_ID = "chat-background";
+  var LOCALE_NS = "chat-background";
+  var SECTION_ORDER = 5;
+  var PROGRESS_DOCK_ORDER = 12;
+  var ACCEPTED_IMAGE_EXTENSIONS = [".png", ".apng", ".jpg", ".jpeg", ".webp", ".gif", ".avif", ".bmp", ".svg"];
+
+  // src/diagnostics.js
+  var state = { startedAt: Date.now() };
+  function recordDiagnostics(patch) {
+    state = { ...state, ...patch };
+  }
+  function diagnosticsSnapshot() {
+    return {
+      version: true ? "1.0.0" : "unknown",
+      updatedAt: Date.now(),
+      ...state
+    };
+  }
+
+  // src/lib/layout.js
+  function isFullscreenPanel(panel, viewport) {
+    return panel.width >= viewport.width - 2 && panel.height >= viewport.height - 2 && Math.abs(panel.left) <= 1 && Math.abs(panel.top) <= 1;
+  }
+
+  // src/lib/color.js
+  function cssColorToHex(value) {
+    const raw = String(value ?? "").trim();
+    if (raw === "") return null;
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/iu.exec(raw);
+    if (short !== null) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+    if (/^#[0-9a-f]{6}$/iu.test(raw)) return raw;
+    const parts = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/iu.exec(raw);
+    if (parts === null) return null;
+    const channel = (text) => Number.parseInt(text, 10).toString(16).padStart(2, "0");
+    return `#${channel(parts[1])}${channel(parts[2])}${channel(parts[3])}`;
+  }
+
+  // src/settings.js
+  var installed = null;
+  function installSettings(value) {
+    installed = value;
+  }
+  function settings() {
+    if (installed === null) throw new Error("dsh-chat-background: settings were read before the plugin applied");
+    return installed;
+  }
+
+  // src/strip.js
+  var cachedInputCard = null;
+  var cachedInputCardSource = "none";
+  var cachedUsageRow = null;
+  var cachedUsageRowStable = false;
+  var stripResizeObserver = null;
+  var observedComposerWrapper = null;
+  function ensureComposerSizing(wrapper) {
+    if (typeof ResizeObserver === "undefined") return;
+    if (observedComposerWrapper === wrapper && stripResizeObserver !== null) return;
+    if (stripResizeObserver === null) stripResizeObserver = new ResizeObserver(() => renderComposerStrip());
+    else stripResizeObserver.disconnect();
+    stripResizeObserver.observe(wrapper);
+    observedComposerWrapper = wrapper;
+  }
+  function disconnectComposerSizing() {
+    if (stripResizeObserver !== null) {
+      stripResizeObserver.disconnect();
+      stripResizeObserver = null;
+      observedComposerWrapper = null;
+    }
+    cachedInputCard = null;
+    cachedInputCardSource = "none";
+    cachedUsageRow = null;
+    cachedUsageRowStable = false;
+  }
+  function findInputCard(wrapper) {
+    if (cachedInputCard !== null && cachedInputCard !== wrapper && !wrapper.contains(cachedInputCard)) {
+      cachedInputCard = null;
+    }
+    if (cachedInputCard !== null) return cachedInputCard;
+    const explicit = wrapper.querySelector("[data-composer-card]");
+    if (explicit !== null && explicit.getBoundingClientRect().width > 0) {
+      cachedInputCard = explicit;
+      cachedInputCardSource = "data-composer-card";
+      return explicit;
+    }
+    let best = null;
+    let bestArea = 0;
+    for (const candidate of wrapper.querySelectorAll("*")) {
+      const hasEditor = candidate.matches('textarea, [contenteditable="true"], [data-composer-input]') || candidate.querySelector('textarea, [contenteditable="true"], [data-composer-input]') !== null;
+      if (!hasEditor) continue;
+      const style = getComputedStyle(candidate);
+      if (style.backgroundColor === "rgba(0, 0, 0, 0)" && style.backgroundImage === "none") continue;
+      const rect = candidate.getBoundingClientRect();
+      const area = rect.width * rect.height;
+      if (rect.width === 0 || area <= bestArea) continue;
+      bestArea = area;
+      best = candidate;
+    }
+    if (best !== null) {
+      cachedInputCard = best;
+      cachedInputCardSource = "heuristic";
+    }
+    return best ?? wrapper;
+  }
+  function findComposerWrapper() {
+    const barSlot = document.querySelector('[data-slot="conversation.composer.bar"]');
+    const primary = barSlot === null ? null : barSlot.firstElementChild;
+    if (primary !== null) return primary;
+    const card = document.querySelector("[data-composer-card]");
+    const dock = document.querySelector("[data-composer-dock]");
+    if (card === null || dock === null) return null;
+    let node = dock.parentElement;
+    while (node !== null && !node.contains(card)) node = node.parentElement;
+    return node === null || node === document.body ? null : node;
+  }
+  function rectOf(element) {
+    const own = element.getBoundingClientRect();
+    if (own.width > 0 && own.height > 0) return own;
+    const pills = [...element.querySelectorAll("[data-composer-stat]")].map((pill) => pill.getBoundingClientRect()).filter((rect) => rect.width > 0 && rect.height > 0);
+    if (pills.length === 0) return own;
+    const left = Math.min(...pills.map((rect) => rect.left));
+    const top = Math.min(...pills.map((rect) => rect.top));
+    const right = Math.max(...pills.map((rect) => rect.right));
+    const bottom = Math.max(...pills.map((rect) => rect.bottom));
+    return { left, top, right, bottom, width: right - left, height: bottom - top };
+  }
+  function isUsageRowShape(candidate, wrapperRect) {
+    const rect = rectOf(candidate);
+    if (rect.height === 0 || rect.height > 40) return false;
+    if (rect.width < 120 || rect.width > 900) return false;
+    return rect.top >= wrapperRect.top - 2 && rect.bottom <= wrapperRect.bottom + 80;
+  }
+  function findStableUsageRowCandidates(wrapper) {
+    const dock = wrapper.querySelector("[data-composer-dock]");
+    if (dock === null) return [];
+    const pills = [...dock.querySelectorAll("[data-composer-stat]")];
+    if (pills.length === 0) return [];
+    let row = pills[0].parentElement;
+    while (row !== null && row !== dock && (!pills.every((pill) => row.contains(pill)) || row.children.length > 4)) {
+      row = row.parentElement;
+    }
+    return row !== null && row !== dock ? [row, dock] : [dock];
+  }
+  function findUsageRow(wrapper) {
+    if (cachedUsageRow !== null && !cachedUsageRow.isConnected) cachedUsageRow = null;
+    if (cachedUsageRow !== null && cachedUsageRowStable && cachedUsageRow.querySelector("[data-composer-stat]") === null) {
+      cachedUsageRow = null;
+    }
+    if (cachedUsageRow !== null) return cachedUsageRow;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    for (const candidate of findStableUsageRowCandidates(wrapper)) {
+      if (!isUsageRowShape(candidate, wrapperRect)) continue;
+      cachedUsageRow = candidate;
+      cachedUsageRowStable = true;
+      return candidate;
+    }
+    const counts = /\d+\s*轮[\s\S]{0,14}?步|tok\/s/u;
+    const metric = /tok\/s|缓存命中|上下文/u;
+    let best = null;
+    let bestTop = Number.NEGATIVE_INFINITY;
+    for (const candidate of wrapper.querySelectorAll("div, span, p, section, footer")) {
+      if (candidate.children.length < 2 || candidate.children.length > 4) continue;
+      const text = (candidate.textContent ?? "").trim();
+      if (text.length === 0 || text.length > 80) continue;
+      if (text.includes("\n")) continue;
+      if (!counts.test(text) || !metric.test(text)) continue;
+      if (!isUsageRowShape(candidate, wrapperRect)) continue;
+      const childTexts = [...candidate.children].map((child) => (child.textContent ?? "").trim()).filter((value) => value !== "");
+      if (childTexts.length < 2 || childTexts.includes(text)) continue;
+      const rect = candidate.getBoundingClientRect();
+      if (rect.top > bestTop) {
+        bestTop = rect.top;
+        best = candidate;
+      }
+    }
+    cachedUsageRow = best;
+    cachedUsageRowStable = false;
+    return best;
+  }
+  function renderComposerStrip() {
+    const existing = document.querySelector(`[${STRIP_ATTRIBUTE}]`);
+    const active2 = document.documentElement.hasAttribute(ACTIVE_ATTRIBUTE);
+    const wrapper = findComposerWrapper();
+    if (!settings().switches.strip.read() || !active2 || wrapper === null) {
+      if (existing !== null) existing.remove();
+      recordDiagnostics({
+        strip: { visible: false, wrapper: wrapper !== null, active: active2, enabled: settings().switches.strip.read() }
+      });
+      return null;
+    }
+    ensureComposerSizing(wrapper);
+    const row = findUsageRow(wrapper);
+    if (row === null) {
+      if (existing !== null) existing.remove();
+      recordDiagnostics({ strip: { visible: false, wrapper: true, reason: "no usage row" } });
+      return null;
+    }
+    const card = findInputCard(wrapper);
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const cardRect = card.getBoundingClientRect();
+    const rowRect = rectOf(row);
+    let element = existing;
+    if (element === null) {
+      element = document.createElement("div");
+      element.setAttribute(STRIP_ATTRIBUTE, "");
+      element.setAttribute("aria-hidden", "true");
+    }
+    if (element.parentElement !== wrapper) wrapper.appendChild(element);
+    const top = Math.max(cardRect.bottom, rowRect.top - 4) - wrapperRect.top;
+    const height = rowRect.bottom + 4 - wrapperRect.top - top;
+    const nextLeft = `${Math.round(cardRect.left - wrapperRect.left)}px`;
+    const nextTop = `${Math.round(top)}px`;
+    const nextWidth = `${Math.round(cardRect.width)}px`;
+    const nextHeight = `${Math.round(Math.max(height, 0))}px`;
+    if (element.style.left !== nextLeft) element.style.left = nextLeft;
+    if (element.style.top !== nextTop) element.style.top = nextTop;
+    if (element.style.width !== nextWidth) element.style.width = nextWidth;
+    if (element.style.height !== nextHeight) element.style.height = nextHeight;
+    recordDiagnostics({
+      strip: {
+        visible: true,
+        width: Math.round(cardRect.width),
+        height: Math.round(Math.max(height, 0)),
+        inputCard: cachedInputCardSource,
+        usageRow: cachedUsageRowStable ? "stable-hooks" : "wording-fallback"
+      }
+    });
+    return element;
+  }
+
+  // src/react.js
+  var binding = null;
+  function bindReact(require2) {
+    if (binding !== null) return binding;
+    const React = require2("react");
+    binding = { React, h: React.createElement };
+    return binding;
+  }
+  function getReact() {
+    if (binding === null) throw new Error("dsh-chat-background: React was not bound before first render");
+    return binding.React;
+  }
+  function h(type, props, ...children) {
+    return getReact().createElement(type, props, ...children);
+  }
+  function useState(initialState) {
+    return getReact().useState(initialState);
+  }
+  function useEffect(effect, dependencies) {
+    return getReact().useEffect(effect, dependencies);
+  }
+  function useLayoutEffect(effect, dependencies) {
+    return getReact().useLayoutEffect(effect, dependencies);
+  }
+  function useRef(initialValue) {
+    return getReact().useRef(initialValue);
+  }
+  function useId() {
+    const React = getReact();
+    return typeof React.useId === "function" ? React.useId() : "";
+  }
+
+  // src/i18n.js
+  var zh = {
+    none: "无（纯色背景）",
+    choose: "选择图片",
+    open: "打开文件夹",
+    refresh: "重新扫描",
+    emptyBefore: "文件夹还是空的，把图片放进 ",
+    emptyAfter: " 后点「重新扫描」",
+    loading: "读取中…",
+    failed: "读取背景文件夹失败",
+    openFailed: "打开文件夹失败",
+    truncated: "图片太多，只显示最近的 {shown} 张",
+    scrimLeftTitle: "左侧栏遮罩层",
+    scrimMainTitle: "主窗口遮罩层",
+    scrimRightTitle: "右侧栏遮罩层",
+    stripTitle: "输入栏下方背景条",
+    stripDescription: "在输入栏下方加一条与输入栏等长的背景条，把下面那排用量数据包起来（仅在有背景图时显示）",
+    stripColorTitle: "背景条颜色",
+    stripColorDescription: "这条背景条的底色；点色块打开调色盘，也可以恢复默认",
+    reset: "恢复默认",
+    progressTitle: "任务进度条",
+    progressDescription: "显示当前任务的完成进度：有任务清单时按清单完成度，否则按本轮已完成的步骤粗略估算；空闲时隐藏",
+    progressRunning: "正在执行…",
+    progressRunningHint: "粗略估算：本轮已完成 {steps} 步",
+    progressColorTitle: "进度条颜色",
+    progressColorDescription: "进度条填充色；点色块打开调色盘，也可以恢复默认",
+    tokenTitle: "Token 总用量",
+    tokenDescription: "在左下角用户标上方显示所有会话（含已归档）的 token 总用量",
+    tokenLabel: "Token总用量：",
+    tokenHint: "全部会话累计：{exact} token（含缓存读取；{sessions}/{all} 个会话有用量）",
+    tokenSizeTitle: "Token 字号",
+    tokenSizeDescription: "这一行的字号，10–20 px",
+    modeTitle: "背景显示方式",
+    modeFixed: "固定背景",
+    modeRotation: "轮换背景",
+    rotationEffectTitle: "轮换设置",
+    effectType: "特效方式",
+    effectFade: "淡入淡出",
+    effectFadeThrough: "渐变过渡",
+    effectNone: "无特效",
+    effectDuration: "切换时长",
+    rotationInterval: "轮换间隔",
+    rotationGroupTitle: "轮换分组",
+    rotationGroupAll: "全选",
+    rotationGroupNone: "清空",
+    rotationGroupEmpty: "背景库为空",
+    dragHandle: "拖动排序",
+    nav: "页面设置",
+    tabBackground: "背景",
+    tabUi: "UI",
+    percent: "%"
+  };
+  var en = {
+    none: "None (plain background)",
+    choose: "Choose image",
+    open: "Open folder",
+    refresh: "Rescan",
+    emptyBefore: "The folder is empty — put images in ",
+    emptyAfter: " and press Rescan",
+    loading: "Loading…",
+    failed: "Could not read the background folder",
+    openFailed: "Could not open the folder",
+    truncated: "Too many images; showing the most recent {shown}",
+    scrimLeftTitle: "Left sidebar scrim layer",
+    scrimMainTitle: "Main window scrim layer",
+    scrimRightTitle: "Right sidebar scrim layer",
+    stripTitle: "Bar under the input",
+    stripDescription: "Adds a bar as wide as the input, wrapping the usage row below it (shown while a background image is set)",
+    stripColorTitle: "Bar colour",
+    stripColorDescription: "Fill of that bar; click the swatch for a colour picker, or reset it",
+    reset: "Reset",
+    progressTitle: "Task progress bar",
+    progressDescription: "Shows how far the current task has come: the todo list when the agent keeps one, otherwise a rough estimate from the steps this turn has taken; hidden while idle",
+    progressRunning: "Working…",
+    progressRunningHint: "Rough estimate: {steps} steps taken this turn",
+    progressColorTitle: "Progress colour",
+    progressColorDescription: "Fill of the progress bar; click the swatch to open a colour picker, or reset it",
+    tokenTitle: "Total token usage",
+    tokenDescription: "Shows the token total of every session (archived included) above the account row",
+    tokenLabel: "Total tokens: ",
+    tokenHint: "All sessions: {exact} tokens (cache reads included; {sessions}/{all} sessions carry usage)",
+    tokenSizeTitle: "Token font size",
+    tokenSizeDescription: "Font size of that line, 10–20 px",
+    modeTitle: "Background display",
+    modeFixed: "Fixed image",
+    modeRotation: "Rotate images",
+    rotationEffectTitle: "Rotation settings",
+    effectType: "Effect",
+    effectFade: "Fade",
+    effectFadeThrough: "Fade through",
+    effectNone: "None",
+    effectDuration: "Duration",
+    rotationInterval: "Interval",
+    rotationGroupTitle: "Rotation group",
+    rotationGroupAll: "Select all",
+    rotationGroupNone: "Clear",
+    rotationGroupEmpty: "The background library is empty",
+    dragHandle: "Drag to reorder",
+    nav: "Page settings",
+    tabBackground: "Background",
+    tabUi: "UI",
+    percent: "%"
+  };
+  function copyNow() {
+    if (typeof document === "undefined") return en;
+    const documentLanguage = (document.documentElement.lang || "").toLowerCase();
+    const browserLanguage = (typeof navigator === "undefined" ? "" : navigator.language || "").toLowerCase();
+    if (documentLanguage.startsWith("zh")) return zh;
+    if (documentLanguage === "" && browserLanguage.startsWith("zh")) return zh;
+    return en;
+  }
+  var translate = null;
+  var unsubscribeLocale = null;
+  function installTranslator({ translate: boundTranslate, subscribe = null }) {
+    translate = boundTranslate;
+    unsubscribeLocale = typeof subscribe === "function" ? subscribe : null;
+  }
+  function copyValue(key) {
+    if (translate !== null) {
+      try {
+        const text = translate(key);
+        if (typeof text === "string" && text !== "" && text !== key) return text;
+      } catch {
+      }
+    }
+    return copyNow()[key] ?? key;
+  }
+  var copyView = new Proxy(
+    {},
+    {
+      get: (_target, key) => copyValue(String(key))
+    }
+  );
+  var copyListeners = /* @__PURE__ */ new Set();
+  var copyObserver = null;
+  function subscribeDomLanguage(listener) {
+    if (typeof MutationObserver === "undefined") return () => {
+    };
+    if (copyObserver === null) {
+      copyObserver = new MutationObserver(() => {
+        for (const entry of copyListeners) entry();
+      });
+      copyObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] });
+    }
+    copyListeners.add(listener);
+    return () => {
+      copyListeners.delete(listener);
+      if (copyListeners.size === 0 && copyObserver !== null) {
+        copyObserver.disconnect();
+        copyObserver = null;
+      }
+    };
+  }
+  function useCopy() {
+    const [, forceRender] = useState(0);
+    useEffect(() => {
+      const listener = () => {
+        forceRender((generation) => generation + 1);
+      };
+      const unsubscribe = unsubscribeLocale !== null ? unsubscribeLocale(listener) : subscribeDomLanguage(listener);
+      return () => {
+        unsubscribe();
+      };
+    }, []);
+    return copyView;
+  }
+
+  // src/lib/format.js
+  function formatCompactTokens(value) {
+    if (!Number.isFinite(value) || value <= 0) return "0";
+    if (value < 1e3) return String(Math.round(value));
+    if (value < 1e6) return `${(value / 1e3).toFixed(value < 1e4 ? 1 : 0)}K`;
+    if (value < 1e9) return `${(value / 1e6).toFixed(value < 1e7 ? 1 : 0)}M`;
+    return `${(value / 1e9).toFixed(2)}B`;
+  }
+
+  // src/lib/clamp.js
+  function clampToRange(value, minimum, maximum) {
+    return Math.min(maximum, Math.max(minimum, Math.round(value)));
+  }
+  function parsePercent(raw, fallback, minimum, maximum) {
+    if (raw === null || raw === "") return fallback;
+    const value = Number(raw);
+    if (!Number.isFinite(value)) return fallback;
+    return clampToRange(value, minimum, maximum);
+  }
+
+  // src/storage.js
+  var valueCache = /* @__PURE__ */ new Map();
+  var storageListener = null;
+  function installStorageListener() {
+    if (storageListener !== null) return;
+    if (typeof window === "undefined" || typeof window.addEventListener !== "function") return;
+    storageListener = () => {
+      valueCache.clear();
+    };
+    window.addEventListener("storage", storageListener);
+  }
+  function disposeStorageCache() {
+    if (storageListener !== null && typeof window !== "undefined" && typeof window.removeEventListener === "function") {
+      window.removeEventListener("storage", storageListener);
+    }
+    storageListener = null;
+    valueCache.clear();
+  }
+  function readString(key) {
+    installStorageListener();
+    if (valueCache.has(key)) return valueCache.get(key);
+    try {
+      const raw = window.localStorage.getItem(key);
+      const value = raw === null || raw === "" ? null : raw;
+      valueCache.set(key, value);
+      return value;
+    } catch {
+      return null;
+    }
+  }
+  function writeString(key, value) {
+    valueCache.set(key, value);
+    try {
+      if (value === null) window.localStorage.removeItem(key);
+      else window.localStorage.setItem(key, value);
+    } catch {
+    }
+  }
+  function readPercent(key, fallback, minimum, maximum) {
+    return parsePercent(readString(key), fallback, minimum, maximum);
+  }
+  function readSelection() {
+    const raw = readString(SELECTION_KEY);
+    if (raw === null) return null;
+    if (raw.includes("/") || raw.includes("\\") || raw.includes("\0")) return null;
+    const lowered = raw.toLowerCase();
+    if (!ACCEPTED_IMAGE_EXTENSIONS.some((extension) => lowered.endsWith(extension))) return null;
+    return raw;
+  }
+  function createSwitch({ key, onChange }) {
+    const listeners = /* @__PURE__ */ new Set();
+    const read = () => readString(key) !== "off";
+    const write = (next) => {
+      writeString(key, next ? null : "off");
+      if (typeof onChange === "function") onChange(next);
+      for (const listener of listeners) listener(next);
+    };
+    const useEnabled = () => {
+      const [enabled, setLocal] = useState(read);
+      useEffect(() => {
+        const listener = (next) => {
+          setLocal(next);
+        };
+        listeners.add(listener);
+        setLocal(read());
+        return () => {
+          listeners.delete(listener);
+        };
+      }, []);
+      return enabled;
+    };
+    return { read, write, useEnabled };
+  }
+  function createColorSetting({ key, property, fallback, translucent = false, defaultToken = null }) {
+    const read = () => {
+      const raw = readString(key);
+      return raw !== null && /^#[0-9a-f]{6}$/iu.test(raw) ? raw : null;
+    };
+    const shownDefault = () => {
+      if (defaultToken === null) return fallback;
+      const scope = document.body ?? document.documentElement;
+      const fromBody = getComputedStyle(scope).getPropertyValue(defaultToken);
+      const fromRoot = getComputedStyle(document.documentElement).getPropertyValue(defaultToken);
+      return cssColorToHex(fromBody) ?? cssColorToHex(fromRoot) ?? fallback;
+    };
+    const apply = () => {
+      const hex = read();
+      if (hex === null) document.documentElement.style.removeProperty(property);
+      else document.documentElement.style.setProperty(property, translucent ? `${hex}eb` : hex);
+    };
+    const useColor = (onChange) => {
+      const [color, setColor] = useState(() => read() ?? shownDefault());
+      const change = (next) => {
+        setColor(next);
+        writeString(key, next);
+        apply();
+        if (typeof onChange === "function") onChange(next);
+      };
+      const reset = () => {
+        setColor(shownDefault());
+        writeString(key, null);
+        apply();
+        if (typeof onChange === "function") onChange();
+      };
+      return { color, change, reset };
+    };
+    return { read, apply, useColor };
+  }
+  function createStripColorSetting() {
+    return createColorSetting({
+      key: STRIP_COLOR_KEY,
+      property: "--dsh-chat-strip-bg",
+      fallback: STRIP_DEFAULT_HEX,
+      translucent: true
+    });
+  }
+  function createProgressColorSetting() {
+    return createColorSetting({
+      key: PROGRESS_COLOR_KEY,
+      property: "--dsh-progress-color",
+      fallback: PROGRESS_DEFAULT_HEX,
+      /* Unset means the bar paints the theme's brand token, so the swatch shows
+       * that colour rather than a blue the bar never uses. */
+      defaultToken: PROGRESS_DEFAULT_TOKEN
+    });
+  }
+
+  // src/token-total.js
+  var tokenValue = null;
+  function resetTokenTotal() {
+    tokenValue = null;
+  }
+  var cachedAnchor = null;
+  function readTokenSize() {
+    return readPercent(TOKEN_SIZE_KEY, TOKEN_SIZE_DEFAULT, TOKEN_SIZE_MIN, TOKEN_SIZE_MAX);
+  }
+  function applyTokenSize() {
+    document.documentElement.style.setProperty("--dsh-token-size", `${readTokenSize()}px`);
+  }
+  function refreshTokenTotal() {
+    return fetch(TOKEN_URL, { headers: { accept: "application/json" } }).then((response) => response.ok ? response.json() : null).then((payload) => {
+      if (payload !== null && typeof payload === "object") {
+        tokenValue = payload;
+        recordDiagnostics({
+          token: {
+            status: "ok",
+            total: payload.total,
+            source: payload.source ?? "unknown",
+            sessions: payload.sessions,
+            at: Date.now()
+          }
+        });
+        renderTokenTotal();
+      } else {
+        recordDiagnostics({ token: { status: "http-error", at: Date.now() } });
+      }
+      return payload;
+    }).catch((error) => {
+      recordDiagnostics({ token: { status: "network-error", error: String(error), at: Date.now() } });
+      return null;
+    });
+  }
+  function findAccountAnchor() {
+    if (cachedAnchor !== null && cachedAnchor.parent.isConnected && (cachedAnchor.before === null || cachedAnchor.before.isConnected)) {
+      return cachedAnchor;
+    }
+    cachedAnchor = null;
+    const candidates = [];
+    const account = document.querySelector('[class*="settingsArea"]');
+    if (account !== null && account.parentElement !== null) {
+      candidates.push({ parent: account.parentElement, before: account });
+    }
+    const settingsSlot = document.querySelector('[data-slot="sidebar.settings"]');
+    const settingsRow = settingsSlot === null ? null : settingsSlot.parentElement;
+    if (settingsRow !== null && settingsRow.parentElement !== null) {
+      candidates.push({ parent: settingsRow.parentElement, before: settingsRow });
+    }
+    const foot = document.querySelector('[class*="footArea"]');
+    if (foot !== null) candidates.push({ parent: foot, before: foot.lastElementChild });
+    for (const candidate of candidates) {
+      const rect = candidate.parent.getBoundingClientRect();
+      const inSidebarFooter = rect.width > 100 && rect.left < window.innerWidth * 0.5;
+      const nearBottom = rect.bottom > window.innerHeight * 0.6;
+      if (inSidebarFooter && nearBottom) {
+        cachedAnchor = candidate;
+        return candidate;
+      }
+    }
+    return null;
+  }
+  function renderTokenTotal() {
+    const copy = copyNow();
+    const existing = document.querySelector(`[${TOKEN_NODE_ATTRIBUTE}]`);
+    if (!settings().switches.token.read()) {
+      if (existing !== null) existing.remove();
+      return null;
+    }
+    const anchor = findAccountAnchor();
+    if (anchor === null) {
+      if (existing !== null) existing.remove();
+      return null;
+    }
+    let element = existing;
+    if (element === null) {
+      element = document.createElement("div");
+      element.className = "dshcb-token-total";
+      element.setAttribute(TOKEN_NODE_ATTRIBUTE, "");
+      element.setAttribute("aria-live", "polite");
+    }
+    if (element.parentElement !== anchor.parent || element.nextElementSibling !== anchor.before) {
+      anchor.parent.insertBefore(element, anchor.before);
+    }
+    const account = anchor.parent.querySelector('[data-slot="settings.launcher"] button') ?? anchor.parent.querySelector('button[aria-label="账号菜单"]') ?? anchor.parent.querySelector('button[aria-label="Account menu"]');
+    if (account !== null) {
+      const accountPadding = Number.parseFloat(getComputedStyle(account).paddingLeft) || 0;
+      const target = account.getBoundingClientRect().left + accountPadding;
+      const left = element.getBoundingClientRect().left;
+      if (target > 0 && left > 0) {
+        const nextPadding = String(Math.max(0, Math.round(target - left))) + "px";
+        if (element.style.paddingLeft !== nextPadding) element.style.paddingLeft = nextPadding;
+      }
+    }
+    const total = tokenValue !== null && typeof tokenValue.total === "number" ? tokenValue.total : null;
+    const missing = tokenValue !== null && tokenValue.missing === true;
+    const text = copy.tokenLabel + (total === null ? "…" : missing ? "—" : formatCompactTokens(total));
+    if (element.textContent !== text) element.textContent = text;
+    if (tokenValue !== null) {
+      const hint = copy.tokenHint.replaceAll("{exact}", String(tokenValue.total)).replaceAll("{sessions}", String(tokenValue.countedSessions ?? 0)).replaceAll("{all}", String(tokenValue.sessions ?? 0));
+      if (element.title !== hint) element.title = hint;
+    }
+    return element;
+  }
+
+  // src/background.js
+  function ensureBackgroundLayer(name) {
+    if (document.body === null || name === null) return null;
+    let layer2 = document.querySelector("[" + BACKGROUND_LAYER_ATTRIBUTE + "]");
+    if (layer2 === null || layer2.tagName !== "IMG") {
+      layer2?.remove();
+      layer2 = document.createElement("img");
+      layer2.className = "dshcb-background-layer";
+      layer2.setAttribute(BACKGROUND_LAYER_ATTRIBUTE, "");
+      layer2.setAttribute("aria-hidden", "true");
+      layer2.setAttribute("alt", "");
+      layer2.setAttribute("decoding", "async");
+      layer2.setAttribute("draggable", "false");
+      document.body.appendChild(layer2);
+    }
+    const src = FILE_URL + encodeURIComponent(name);
+    if (layer2.getAttribute("src") !== src) layer2.setAttribute("src", src);
+    return layer2;
+  }
+  function removeBackgroundLayer() {
+    for (const element of document.querySelectorAll("[" + BACKGROUND_LAYER_ATTRIBUTE + "]")) element.remove();
+  }
+  var THEME_BASE_TOKEN = "--dsw-alias-bg-base";
+  function baseSurfaceIsDark() {
+    try {
+      const scope = document.body ?? document.documentElement;
+      const hex = cssColorToHex(getComputedStyle(scope).getPropertyValue(THEME_BASE_TOKEN));
+      if (hex === null) return null;
+      const channel = (start) => Number.parseInt(hex.slice(start, start + 2), 16) / 255;
+      const luminance = 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
+      return luminance < 0.45;
+    } catch {
+      return null;
+    }
+  }
+  function isDark() {
+    if (document.body === null) return false;
+    if (document.body.hasAttribute("data-ds-dark-theme")) return true;
+    return baseSurfaceIsDark() === true;
+  }
+  function readRegionScrim(key, legacyKey, legacyDefault) {
+    const legacy = readPercent(legacyKey, legacyDefault, VEIL_MIN, VEIL_MAX);
+    return readPercent(key, legacy, SCRIM_MIN, SCRIM_MAX);
+  }
+  function readLeftScrim() {
+    return readRegionScrim(SCRIM_LEFT_KEY, VEIL_KEY, VEIL_DEFAULT);
+  }
+  function readMainScrim() {
+    return readRegionScrim(SCRIM_MAIN_KEY, SCRIM_KEY, SCRIM_DEFAULT);
+  }
+  function readRightScrim() {
+    return readRegionScrim(SCRIM_RIGHT_KEY, VEIL_KEY, VEIL_DEFAULT);
+  }
+  function layer(alpha) {
+    const rgb = isDark() ? "9,11,15" : "250,250,250";
+    const value = (alpha / 100).toFixed(3);
+    return `linear-gradient(rgba(${rgb},${value}), rgba(${rgb},${value}))`;
+  }
+  function cssString(name) {
+    return `"${String(name).replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+  }
+  function isOpaque(color) {
+    if (color === "" || color === "transparent") return false;
+    const match = /^rgba?\(([^)]+)\)$/iu.exec(color);
+    if (match === null) return color !== "transparent";
+    const parts = match[1].split(",").map((part) => Number(part.trim()));
+    return parts.length < 4 || parts[3] > 0.05;
+  }
+  var painterMarks = /* @__PURE__ */ new Set();
+  var cachedAnchor2 = null;
+  var cachedContainer = null;
+  function conversationAnchor() {
+    if (cachedAnchor2 !== null && cachedAnchor2.isConnected) return cachedAnchor2;
+    cachedAnchor2 = document.querySelector('[data-slot="main.conversation"]');
+    if (cachedAnchor2 === null) cachedAnchor2 = document.querySelector('[data-slot="main"]');
+    return cachedAnchor2;
+  }
+  function conversationContainer() {
+    const anchor = conversationAnchor();
+    if (anchor === null) return null;
+    if (cachedContainer !== null && cachedContainer.isConnected && (cachedContainer === anchor || anchor.contains(cachedContainer))) {
+      return cachedContainer;
+    }
+    cachedContainer = anchor.firstElementChild ?? anchor;
+    return cachedContainer;
+  }
+  function markedPainters() {
+    for (const element of [...painterMarks]) {
+      if (!element.isConnected) painterMarks.delete(element);
+    }
+    return [...painterMarks];
+  }
+  function clearPainters() {
+    for (const element of painterMarks) element.removeAttribute(LIFT_ATTRIBUTE);
+    painterMarks.clear();
+  }
+  function markColumn(attribute, slotName) {
+    const outlet = document.querySelector(`[data-slot="${slotName}"]`);
+    const column = outlet === null ? null : outlet.parentElement;
+    if (column !== null && !column.hasAttribute(attribute)) column.setAttribute(attribute, "");
+  }
+  function clearColumn(attribute) {
+    for (const element of document.querySelectorAll(`[${attribute}]`)) element.removeAttribute(attribute);
+  }
+  function markSidebarColumn() {
+    const outlet = document.querySelector('[data-slot="sidebar"]');
+    const column = outlet === null ? null : outlet.parentElement;
+    if (column !== null) column.setAttribute(SIDEBAR_COLUMN_ATTRIBUTE, "");
+  }
+  function markMainColumn() {
+    markColumn(MAIN_COLUMN_ATTRIBUTE, "main");
+  }
+  function markRightColumn() {
+    markColumn(RIGHT_COLUMN_ATTRIBUTE, "rightbar");
+  }
+  var fullscreenGraceUntil = 0;
+  var fullscreenTimer = 0;
+  var fullscreenSuppressed = false;
+  var noAnimationTimer = 0;
+  function hasExitFullscreenControl() {
+    return document.querySelector('button[aria-label="退出全屏"], button[aria-label="Exit fullscreen"]') !== null;
+  }
+  function scheduleFullscreenRecheck() {
+    if (fullscreenTimer !== 0) return;
+    const delay = Math.max(60, fullscreenGraceUntil - Date.now() + 20);
+    fullscreenTimer = window.setTimeout(() => {
+      fullscreenTimer = 0;
+      applyBackground(readSelection());
+    }, delay);
+  }
+  var frameAnimTimer = 0;
+  var panelObserver = null;
+  var observedPanel = null;
+  function observeRightPanel(panel) {
+    if (typeof ResizeObserver === "undefined" || observedPanel === panel) return;
+    panelObserver?.disconnect();
+    observedPanel = panel;
+    panelObserver = new ResizeObserver(() => {
+      flushBackground();
+    });
+    panelObserver.observe(panel);
+  }
+  function clearFullscreenLayer() {
+    const root = document.documentElement;
+    root.removeAttribute(RIGHT_FULLSCREEN_ATTRIBUTE);
+    root.style.removeProperty("--dsh-chat-background-full-left");
+    root.style.removeProperty("--dsh-chat-background-full-width");
+    for (const element of document.querySelectorAll(`[${RIGHT_PANEL_FULL_ATTRIBUTE}]`)) {
+      element.removeAttribute(RIGHT_PANEL_FULL_ATTRIBUTE);
+    }
+    fullscreenGraceUntil = 0;
+  }
+  function silenceTransitions() {
+    const root = document.documentElement;
+    root.setAttribute(NO_ANIMATION_ATTRIBUTE, "");
+    if (noAnimationTimer !== 0) window.clearTimeout(noAnimationTimer);
+    noAnimationTimer = window.setTimeout(() => {
+      noAnimationTimer = 0;
+      root.removeAttribute(NO_ANIMATION_ATTRIBUTE);
+    }, 450);
+  }
+  function suppressFullscreenForExit() {
+    fullscreenSuppressed = true;
+    clearFullscreenLayer();
+    silenceTransitions();
+    applyBackground(readSelection());
+  }
+  function markRightPanel() {
+    if (observedPanel !== null && !observedPanel.isConnected) {
+      panelObserver?.disconnect();
+      panelObserver = null;
+      observedPanel = null;
+    }
+    const outlet = document.querySelector('[data-slot="rightbar"]');
+    const column = outlet === null ? null : outlet.parentElement;
+    const panel = outlet === null ? null : outlet.querySelector('[class*="panel"]');
+    const root = document.documentElement;
+    const labelFull = hasExitFullscreenControl();
+    if (!labelFull) fullscreenSuppressed = false;
+    if (labelFull) fullscreenGraceUntil = Math.max(fullscreenGraceUntil, Date.now() + 300);
+    let measured = false;
+    if (panel !== null) {
+      const box = panel.getBoundingClientRect();
+      measured = isFullscreenPanel(
+        { width: box.width, height: box.height, left: box.left, top: box.top },
+        { width: window.innerWidth, height: window.innerHeight }
+      );
+    }
+    const full = !fullscreenSuppressed && (labelFull || measured || Date.now() < fullscreenGraceUntil);
+    if (full) {
+      if (!root.hasAttribute(RIGHT_FULLSCREEN_ATTRIBUTE)) root.setAttribute(RIGHT_FULLSCREEN_ATTRIBUTE, "");
+    } else {
+      root.removeAttribute(RIGHT_FULLSCREEN_ATTRIBUTE);
+      fullscreenGraceUntil = 0;
+    }
+    if (full && !labelFull) scheduleFullscreenRecheck();
+    if (panel === null) return;
+    if (!panel.hasAttribute(RIGHT_PANEL_ATTRIBUTE)) panel.setAttribute(RIGHT_PANEL_ATTRIBUTE, "");
+    const setFull = (element) => {
+      if (full && !element.hasAttribute(RIGHT_PANEL_FULL_ATTRIBUTE)) element.setAttribute(RIGHT_PANEL_FULL_ATTRIBUTE, "");
+      else if (!full && element.hasAttribute(RIGHT_PANEL_FULL_ATTRIBUTE))
+        element.removeAttribute(RIGHT_PANEL_FULL_ATTRIBUTE);
+    };
+    setFull(panel);
+    if (column !== null) setFull(column);
+    if (full) {
+      const leftOutlet = document.querySelector('[data-slot="sidebar"]');
+      const leftColumn = leftOutlet === null ? null : leftOutlet.parentElement;
+      const leftWidth = leftColumn === null ? 0 : leftColumn.getBoundingClientRect().width;
+      const columnLeft = column === null ? 0 : column.getBoundingClientRect().left;
+      const offset = Math.round(leftWidth - columnLeft);
+      const width = Math.round(window.innerWidth - leftWidth);
+      root.style.setProperty("--dsh-chat-background-full-left", offset + "px");
+      root.style.setProperty("--dsh-chat-background-full-width", width + "px");
+    } else if (!full) {
+      root.style.removeProperty("--dsh-chat-background-full-left");
+      root.style.removeProperty("--dsh-chat-background-full-width");
+    }
+    observeRightPanel(panel);
+  }
+  function animateLayoutFrame() {
+    const outlet = document.querySelector('[data-slot="main"]');
+    const column = outlet === null ? null : outlet.parentElement;
+    const frame = column === null ? null : column.parentElement;
+    if (frame === null) return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+    if (!reduced) frame.setAttribute(FRAME_ANIMATING_ATTRIBUTE, "");
+    if (frameAnimTimer !== 0) window.clearTimeout(frameAnimTimer);
+    frameAnimTimer = window.setTimeout(() => {
+      frameAnimTimer = 0;
+      frame.removeAttribute(FRAME_ANIMATING_ATTRIBUTE);
+    }, 340);
+  }
+  function installRightbarGestures() {
+    let labelFull = hasExitFullscreenControl();
+    const observer = new MutationObserver(() => {
+      const next = hasExitFullscreenControl();
+      if (next === labelFull) return;
+      labelFull = next;
+      flushBackground();
+    });
+    observer.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-label"]
+    });
+    const handler = (event) => {
+      const target = event.target instanceof Element ? event.target.closest("button[aria-label]") : null;
+      if (target === null) return;
+      const label = target.getAttribute("aria-label") ?? "";
+      if (/打开右侧边栏|收起右侧边栏|open right sidebar|collapse right sidebar/i.test(label)) {
+        animateLayoutFrame();
+        return;
+      }
+      if (target.closest('[data-slot="rightbar"]') === null) return;
+      if (/退出全屏|exit fullscreen/i.test(label)) {
+        suppressFullscreenForExit();
+        return;
+      }
+      if (/^全屏$|^fullscreen$/i.test(label)) {
+        if (document.querySelector("[data-dsh-chat-background-right-panel]") === null) return;
+        fullscreenSuppressed = false;
+        silenceTransitions();
+        fullscreenGraceUntil = Date.now() + 700;
+        if (fullscreenTimer !== 0) window.clearTimeout(fullscreenTimer);
+        fullscreenTimer = window.setTimeout(() => {
+          fullscreenTimer = 0;
+          applyBackground(readSelection());
+        }, 720);
+        applyBackground(readSelection());
+      }
+    };
+    document.addEventListener("click", handler, { capture: true });
+    return () => {
+      document.removeEventListener("click", handler, { capture: true });
+      observer.disconnect();
+      fullscreenSuppressed = false;
+      if (noAnimationTimer !== 0) window.clearTimeout(noAnimationTimer);
+      noAnimationTimer = 0;
+      document.documentElement.removeAttribute(NO_ANIMATION_ATTRIBUTE);
+      if (frameAnimTimer !== 0) window.clearTimeout(frameAnimTimer);
+      frameAnimTimer = 0;
+      if (fullscreenTimer !== 0) window.clearTimeout(fullscreenTimer);
+      fullscreenTimer = 0;
+      fullscreenGraceUntil = 0;
+    };
+  }
+  function markLayoutFrame() {
+    const outlet = document.querySelector('[data-slot="main"]');
+    const column = outlet === null ? null : outlet.parentElement;
+    const frame = column === null ? null : column.parentElement;
+    if (frame !== null && !frame.hasAttribute(LAYOUT_FRAME_ATTRIBUTE)) frame.setAttribute(LAYOUT_FRAME_ATTRIBUTE, "");
+  }
+  function markRegionColumns() {
+    markSidebarColumn();
+    markMainColumn();
+    markRightColumn();
+    markRightPanel();
+    markLayoutFrame();
+  }
+  function clearRegionColumns() {
+    clearColumn(SIDEBAR_COLUMN_ATTRIBUTE);
+    clearColumn(MAIN_COLUMN_ATTRIBUTE);
+    clearColumn(RIGHT_COLUMN_ATTRIBUTE);
+    clearColumn(RIGHT_PANEL_ATTRIBUTE);
+    clearColumn(RIGHT_PANEL_FULL_ATTRIBUTE);
+    clearColumn(LAYOUT_FRAME_ATTRIBUTE);
+  }
+  function nudgeNativeTitlebar(active2) {
+    if (document.body === null) return;
+    document.body.style.setProperty("--dsh-chat-background-native", active2 ? "1" : "0");
+  }
+  function syncDynamicRules(elements) {
+    if (typeof document === "undefined") return;
+    let tag = document.querySelector(`style[data-plugin-css=${cssString(DYNAMIC_TAG_ID)}]`);
+    if (tag === null) {
+      tag = document.createElement("style");
+      tag.dataset.plugin = "dsh-chat-background";
+      tag.dataset.pluginCss = DYNAMIC_TAG_ID;
+      document.head.appendChild(tag);
+    }
+    const selectors = [];
+    for (const element of elements) {
+      if (element === document.body || element === document.documentElement) {
+        selectors.push(element === document.body ? "body" : "html");
+        continue;
+      }
+      const tokens = [...element.classList].filter((token) => token !== "");
+      for (const token of tokens) selectors.push(`html[data-dsh-chat-background] [class~=${cssString(token)}]`);
+    }
+    const next = selectors.length === 0 ? "" : `${selectors.join(",\n")} { background-color: transparent !important; }`;
+    if (tag.textContent !== next) tag.textContent = next;
+  }
+  function markPainters() {
+    const anchor = conversationAnchor();
+    if (anchor === null) return [];
+    const start = anchor.firstElementChild ?? anchor;
+    const candidates = [];
+    for (let element = start; element !== null && element !== document.documentElement; element = element.parentElement) {
+      if (isOpaque(window.getComputedStyle(element).backgroundColor)) candidates.push(element);
+    }
+    for (const element of candidates) {
+      if (painterMarks.has(element)) continue;
+      painterMarks.add(element);
+      element.setAttribute(LIFT_ATTRIBUTE, "");
+    }
+    if (candidates.length > 0) syncDynamicRules([candidates[0]]);
+    return candidates;
+  }
+  var applied = { selection: void 0, dark: null, scrimLeft: null, scrimMain: null, scrimRight: null };
+  var markSignature = -1;
+  var markContainer = null;
+  var flushHandle = 0;
+  var flushIsTimeout = false;
+  function applyBackground(selection) {
+    const root = document.documentElement;
+    const next = selection === null || selection === "" ? null : selection;
+    const dark = isDark();
+    const scrimLeft = readLeftScrim();
+    const scrimMain = readMainScrim();
+    const scrimRight = readRightScrim();
+    const signature = document.querySelectorAll("[data-slot]").length;
+    const container = conversationContainer();
+    const painters = markedPainters();
+    const needsPaint = signature !== markSignature || container !== markContainer || painters.length === 0;
+    const sameVars = applied.selection === next && applied.dark === dark && applied.scrimLeft === scrimLeft && applied.scrimMain === scrimMain && applied.scrimRight === scrimRight;
+    if (next === null) {
+      if (sameVars && !root.hasAttribute(ACTIVE_ATTRIBUTE)) return;
+      for (const property of INLINE_PROPERTIES) root.style.removeProperty(property);
+      root.removeAttribute(ACTIVE_ATTRIBUTE);
+      removeBackgroundLayer();
+      root.removeAttribute(RIGHT_FULLSCREEN_ATTRIBUTE);
+      root.style.removeProperty("--dsh-chat-background-full-left");
+      root.style.removeProperty("--dsh-chat-background-full-width");
+      clearPainters();
+      clearRegionColumns();
+      syncDynamicRules([]);
+      nudgeNativeTitlebar(false);
+      applied = { selection: null, dark, scrimLeft, scrimMain, scrimRight };
+      markSignature = -1;
+      markContainer = null;
+      recordDiagnostics({ background: { active: false } });
+      return;
+    }
+    markRegionColumns();
+    ensureBackgroundLayer(next);
+    if (sameVars && !needsPaint) return;
+    if (needsPaint) {
+      markSignature = signature;
+      markContainer = container;
+      markPainters();
+    }
+    recordDiagnostics({
+      background: {
+        active: true,
+        painted: markedPainters().length,
+        conversation: container !== null,
+        dark,
+        scrim: { left: scrimLeft, main: scrimMain, right: scrimRight },
+        markers: {
+          rightPanel: document.querySelector("[" + RIGHT_PANEL_ATTRIBUTE + "]") !== null,
+          layoutFrame: document.querySelector("[" + LAYOUT_FRAME_ATTRIBUTE + "]") !== null,
+          rightPanelFull: document.querySelector("[" + RIGHT_PANEL_ATTRIBUTE + "][" + RIGHT_PANEL_FULL_ATTRIBUTE + "]") !== null
+        }
+      }
+    });
+    if (!sameVars) {
+      root.style.setProperty("--dsh-chat-background-image", 'url("' + FILE_URL + encodeURIComponent(next) + '")');
+      root.style.setProperty("--dsh-chat-background-scrim-left", layer(scrimLeft));
+      root.style.setProperty("--dsh-chat-background-scrim-main", layer(scrimMain));
+      root.style.setProperty("--dsh-chat-background-scrim-right", layer(scrimRight));
+      root.setAttribute(ACTIVE_ATTRIBUTE, next);
+      applied = { selection: next, dark, scrimLeft, scrimMain, scrimRight };
+      nudgeNativeTitlebar(true);
+    }
+  }
+  function flushBackground() {
+    if (flushHandle !== 0) return;
+    const run = () => {
+      flushHandle = 0;
+      applyBackground(readSelection());
+      renderComposerStrip();
+      renderTokenTotal();
+    };
+    if (typeof window.requestAnimationFrame === "function") {
+      flushIsTimeout = false;
+      flushHandle = window.requestAnimationFrame(run);
+    } else {
+      flushIsTimeout = true;
+      flushHandle = window.setTimeout(run, 16);
+    }
+  }
+  function teardownVisuals() {
+    if (flushHandle !== 0) {
+      if (flushIsTimeout) window.clearTimeout(flushHandle);
+      else window.cancelAnimationFrame(flushHandle);
+      flushHandle = 0;
+    }
+    const root = document.documentElement;
+    root.removeAttribute(ACTIVE_ATTRIBUTE);
+    removeBackgroundLayer();
+    root.removeAttribute(RIGHT_FULLSCREEN_ATTRIBUTE);
+    root.style.removeProperty("--dsh-chat-background-full-left");
+    root.style.removeProperty("--dsh-chat-background-full-width");
+    for (const property of INLINE_PROPERTIES) root.style.removeProperty(property);
+    document.body?.style.removeProperty("--dsh-chat-background-native");
+    panelObserver?.disconnect();
+    panelObserver = null;
+    observedPanel = null;
+    fullscreenGraceUntil = 0;
+    fullscreenSuppressed = false;
+    if (noAnimationTimer !== 0) window.clearTimeout(noAnimationTimer);
+    noAnimationTimer = 0;
+    root.removeAttribute(NO_ANIMATION_ATTRIBUTE);
+    if (fullscreenTimer !== 0) window.clearTimeout(fullscreenTimer);
+    fullscreenTimer = 0;
+    if (frameAnimTimer !== 0) window.clearTimeout(frameAnimTimer);
+    frameAnimTimer = 0;
+    clearPainters();
+    clearRegionColumns();
+    syncDynamicRules([]);
+    document.querySelector(`style[data-plugin-css=${cssString(DYNAMIC_TAG_ID)}]`)?.remove();
+    document.querySelector(`[${STRIP_ATTRIBUTE}]`)?.remove();
+    document.querySelector(`[${TOKEN_NODE_ATTRIBUTE}]`)?.remove();
+    cachedAnchor2 = null;
+    cachedContainer = null;
+    markSignature = -1;
+    markContainer = null;
+    applied = { selection: void 0, dark: null, scrimLeft: null, scrimMain: null, scrimRight: null };
+  }
+
+  // src/lib/zoom.js
+  var LINE_HEIGHT = 16;
+  var MAX_STEP = 120;
+  var WHEEL_SENSITIVITY = 15e-4;
+  function normalizeWheelDelta(deltaY, deltaMode, viewportHeight) {
+    const unit = deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? Math.max(1, viewportHeight) : 1;
+    return Math.max(-MAX_STEP, Math.min(MAX_STEP, deltaY * unit));
+  }
+  function wheelZoomFactor(delta) {
+    return Math.exp(-delta * WHEEL_SENSITIVITY);
+  }
+
+  // src/image-zoom.js
+  var ZOOM_ATTRIBUTE = "data-dsh-image-zoom";
+  var MIN_SCALE = 0.4;
+  var MAX_SCALE = 8;
+  var originals = /* @__PURE__ */ new WeakMap();
+  var injectingWheel = false;
+  function isViewerElement(element) {
+    const style = getComputedStyle(element);
+    if (style.position !== "fixed" && style.position !== "absolute") return false;
+    const rect = element.getBoundingClientRect();
+    return rect.width * rect.height >= window.innerWidth * window.innerHeight * 0.4;
+  }
+  function findLightboxImage(target) {
+    if (target.closest(".dshcb-section") !== null) return null;
+    const dialog = target.closest('[role="dialog"][aria-modal="true"]');
+    if (dialog === null || !isViewerElement(dialog)) return null;
+    for (const child of dialog.children) {
+      if (child.tagName === "IMG") return child;
+      if (child.tagName !== "DIV" || !isViewerElement(child)) continue;
+      for (const grandchild of child.children) {
+        if (grandchild.tagName === "IMG") return grandchild;
+      }
+    }
+    return null;
+  }
+  function readTransform(image) {
+    const style = getComputedStyle(image);
+    if (style.transform === "none" || style.transform === "") {
+      return { scale: 1, tx: 0, ty: 0 };
+    }
+    const matrix = new DOMMatrixReadOnly(style.transform);
+    const scale = Math.hypot(matrix.a, matrix.b) || 1;
+    return { scale, tx: matrix.e, ty: matrix.f };
+  }
+  function zoomImage(image, event) {
+    const before = readTransform(image);
+    const delta = normalizeWheelDelta(event.deltaY, event.deltaMode, window.innerHeight);
+    const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, before.scale * wheelZoomFactor(delta)));
+    if (nextScale === before.scale) return;
+    const rect = image.getBoundingClientRect();
+    const baseLeft = rect.left - before.tx;
+    const baseTop = rect.top - before.ty;
+    const localX = (event.clientX - rect.left) / before.scale;
+    const localY = (event.clientY - rect.top) / before.scale;
+    const tx = event.clientX - baseLeft - nextScale * localX;
+    const ty = event.clientY - baseTop - nextScale * localY;
+    if (!originals.has(image)) {
+      originals.set(image, { transform: image.style.transform, origin: image.style.transformOrigin });
+    }
+    image.style.transformOrigin = "0 0";
+    image.style.transform = `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${nextScale.toFixed(4)})`;
+    image.setAttribute(ZOOM_ATTRIBUTE, nextScale.toFixed(2));
+  }
+  function resetImage(image) {
+    const original = originals.get(image);
+    originals.delete(image);
+    if (original !== void 0 && original.transform !== "") image.style.transform = original.transform;
+    else image.style.removeProperty("transform");
+    if (original !== void 0 && original.origin !== "") image.style.transformOrigin = original.origin;
+    else image.style.removeProperty("transform-origin");
+    image.removeAttribute(ZOOM_ATTRIBUTE);
+  }
+  function translateSidebarWheel(scrollport, event) {
+    if (event.ctrlKey || injectingWheel) return false;
+    injectingWheel = true;
+    try {
+      scrollport.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: event.deltaX,
+          deltaY: event.deltaY,
+          deltaMode: event.deltaMode,
+          ctrlKey: true,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          bubbles: true,
+          cancelable: true
+        })
+      );
+    } finally {
+      injectingWheel = false;
+    }
+    return true;
+  }
+  function onWheel(event) {
+    const target = event.target instanceof Element ? event.target : null;
+    if (target === null) return;
+    const scrollport = target.closest("[data-document-zoom-scrollport]");
+    if (scrollport !== null && target.closest("[data-image-preview]") !== null) {
+      if (translateSidebarWheel(scrollport, event)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return;
+    }
+    const image = findLightboxImage(target);
+    if (image === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    zoomImage(image, event);
+  }
+  function onDoubleClick(event) {
+    const target = event.target instanceof Element ? event.target : null;
+    if (target === null) return;
+    const image = findLightboxImage(target);
+    if (image === null || !originals.has(image)) return;
+    resetImage(image);
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  function installImageZoom() {
+    window.addEventListener("wheel", onWheel, { capture: true, passive: false });
+    window.addEventListener("dblclick", onDoubleClick, { capture: true });
+    return () => {
+      window.removeEventListener("wheel", onWheel, { capture: true });
+      window.removeEventListener("dblclick", onDoubleClick, { capture: true });
+    };
+  }
+
+  // src/progress.js
+  function ProgressView({ copy, enabled, percent, runningHint, estimating, idle = false }) {
+    recordDiagnostics({ progress: { enabled, idle, percent, estimating, visible: enabled && !idle } });
+    if (!enabled || idle) return null;
+    const track = {
+      className: "dshcb-progress-track",
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": String(percent),
+      "aria-label": copy.progressTitle,
+      title: estimating ? runningHint : copy.progressTitle
+    };
+    if (estimating) track["data-running"] = "";
+    return h(
+      "div",
+      { className: "dshcb-progress-row" },
+      h(
+        "span",
+        { className: "dshcb-progress-value", title: estimating ? copy.progressRunning : void 0 },
+        String(percent) + copy.percent
+      ),
+      h("div", track, h("div", { className: "dshcb-progress-fill", style: { width: `${percent}%` } }))
+    );
+  }
+  function ProgressDockLive({ useProjection, useSession }) {
+    const copy = useCopy();
+    const enabled = settings().switches.progress.useEnabled();
+    const todos = useProjection("todos");
+    const stats = useProjection("sessionStats");
+    const running = useSession((snapshot) => snapshot !== void 0 && snapshot !== null && snapshot.running === true) === true;
+    const steps = stats !== null && typeof stats === "object" && typeof stats.steps === "number" ? stats.steps : 0;
+    const baseline = useRef(null);
+    useEffect(() => {
+      baseline.current = running ? baseline.current ?? steps : null;
+    }, [running, steps]);
+    const turnSteps = running && baseline.current !== null ? Math.max(0, steps - baseline.current) : 0;
+    const list = Array.isArray(todos) ? todos.filter((item) => item !== null && typeof item === "object") : [];
+    if (list.length > 0) {
+      const done = list.filter((item) => item.status === "completed").length;
+      return h(ProgressView, {
+        copy,
+        enabled,
+        percent: Math.round(done / list.length * 100),
+        runningHint: void 0,
+        estimating: false
+      });
+    }
+    if (running) {
+      const percent = turnSteps <= 0 ? 4 : Math.min(92, Math.round(turnSteps / (turnSteps + 6) * 100));
+      return h(ProgressView, {
+        copy,
+        enabled,
+        percent,
+        runningHint: copy.progressRunningHint.replace("{steps}", String(turnSteps)),
+        estimating: true
+      });
+    }
+    return h(ProgressView, { copy, enabled, percent: 100, runningHint: void 0, estimating: false, idle: true });
+  }
+  function ProgressDockStatic() {
+    const copy = useCopy();
+    const enabled = settings().switches.progress.useEnabled();
+    return h(ProgressView, { copy, enabled, percent: 100, runningHint: void 0, estimating: false, idle: true });
+  }
+  function ProgressDock(props) {
+    const live = typeof props.useProjection === "function" && typeof props.useSession === "function";
+    return live ? h(ProgressDockLive, props) : h(ProgressDockStatic);
+  }
+
+  // src/lib/rotation.js
+  function pickNextImage(candidates, current) {
+    if (candidates.length === 0) return null;
+    const index = current === null ? -1 : candidates.indexOf(current);
+    return candidates[(index + 1) % candidates.length];
+  }
+  function normalizeRotationInterval(value) {
+    return Math.round(clampToRange(Number(value), ROTATION_INTERVAL_MIN, ROTATION_INTERVAL_MAX));
+  }
+  function normalizeRotationDuration(value) {
+    const number = Number(value);
+    if (!Number.isFinite(number)) return 0;
+    return Math.round(Math.min(ROTATION_DURATION_MAX, Math.max(ROTATION_DURATION_MIN, number)) * 10) / 10;
+  }
+  function selectRotationGroup(stored, available) {
+    return stored.filter((name) => available.includes(name));
+  }
+  function moveRotationImage(order, from, to) {
+    const fromIndex = order.indexOf(from);
+    const toIndex = order.indexOf(to);
+    if (fromIndex < 0 || toIndex < 0 || from === to) return [...order];
+    const next = [...order];
+    next.splice(fromIndex, 1);
+    const target = next.indexOf(to);
+    next.splice(fromIndex < toIndex ? target + 1 : target, 0, from);
+    return next;
+  }
+
+  // src/rotation.js
+  var LAYER_CLASS = "dshcb-rotate-layer";
+  var timer = 0;
+  var layerTimers = [];
+  var request = null;
+  var installed2 = false;
+  function readRotationMode() {
+    return readString(MODE_KEY) === "rotation";
+  }
+  function readRotationInterval() {
+    const raw = Number.parseFloat(readString(ROTATION_INTERVAL_KEY) ?? "");
+    return normalizeRotationInterval(Number.isFinite(raw) ? raw : ROTATION_INTERVAL_DEFAULT);
+  }
+  function readRotationDuration() {
+    const raw = Number.parseFloat(readString(ROTATION_DURATION_KEY) ?? "");
+    return normalizeRotationDuration(Number.isFinite(raw) ? raw : ROTATION_DURATION_DEFAULT);
+  }
+  function readRotationEffect() {
+    const raw = readString(ROTATION_EFFECT_KEY);
+    return ROTATION_EFFECTS.includes(raw) ? raw : ROTATION_EFFECT_DEFAULT;
+  }
+  function readRotationGroup() {
+    const raw = readString(ROTATION_GROUP_KEY);
+    if (raw === null) return [];
+    try {
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter((value) => typeof value === "string");
+    } catch {
+      return [];
+    }
+  }
+  function scheduleLayer(fn, delay) {
+    const id = window.setTimeout(() => {
+      layerTimers = layerTimers.filter((entry) => entry !== id);
+      fn();
+    }, delay);
+    layerTimers.push(id);
+  }
+  function removeLayer() {
+    for (const element of document.querySelectorAll(`[${ROTATION_LAYER_ATTRIBUTE}]`)) element.remove();
+  }
+  function clearTransient() {
+    for (const id of layerTimers) window.clearTimeout(id);
+    layerTimers = [];
+    request?.abort?.();
+    request = null;
+    removeLayer();
+  }
+  function commit(name) {
+    writeString(SELECTION_KEY, name);
+    applyBackground(name);
+    window.dispatchEvent(new CustomEvent(ROTATION_EVENT, { detail: { name } }));
+  }
+  function themeBaseColour() {
+    const value = getComputedStyle(document.body ?? document.documentElement).getPropertyValue("--dsw-alias-bg-base").trim();
+    if (value !== "") return value;
+    return document.body?.hasAttribute("data-ds-dark-theme") === true ? "rgb(9, 11, 15)" : "rgb(250, 250, 250)";
+  }
+  function createImageLayer(name) {
+    const layer2 = document.createElement("img");
+    layer2.className = LAYER_CLASS;
+    layer2.setAttribute(ROTATION_LAYER_ATTRIBUTE, "");
+    layer2.setAttribute("aria-hidden", "true");
+    layer2.setAttribute("alt", "");
+    layer2.setAttribute("draggable", "false");
+    layer2.src = FILE_URL + encodeURIComponent(name);
+    document.body.appendChild(layer2);
+    return layer2;
+  }
+  function createColorLayer(color) {
+    const layer2 = document.createElement("div");
+    layer2.className = LAYER_CLASS;
+    layer2.setAttribute(ROTATION_LAYER_ATTRIBUTE, "");
+    layer2.setAttribute("aria-hidden", "true");
+    layer2.style.background = color;
+    document.body.appendChild(layer2);
+    return layer2;
+  }
+  function fadeTransition(previous, next, duration) {
+    const layer2 = createImageLayer(previous);
+    layer2.style.opacity = "1";
+    commit(next);
+    void layer2.offsetWidth;
+    layer2.style.transition = `opacity ${String(duration)}s ease`;
+    layer2.style.opacity = "0";
+    scheduleLayer(removeLayer, duration * 1e3 + 80);
+  }
+  function fadeThroughTransition(previous, next, duration) {
+    const half = Math.max(40, duration * 1e3 / 2);
+    const layer2 = createColorLayer(themeBaseColour());
+    layer2.style.opacity = "0";
+    void layer2.offsetWidth;
+    layer2.style.transition = `opacity ${String(half / 1e3)}s ease`;
+    layer2.style.opacity = "1";
+    scheduleLayer(() => {
+      commit(next);
+      layer2.style.transition = `opacity ${String(half / 1e3)}s ease`;
+      layer2.style.opacity = "0";
+      scheduleLayer(removeLayer, half + 80);
+    }, half);
+    void previous;
+  }
+  function transitionTo(next) {
+    const previous = readString(SELECTION_KEY);
+    if (next === null || next === previous) return;
+    const ref = document.documentElement.getAttribute(RIGHT_FULLSCREEN_ATTRIBUTE) !== null;
+    const duration = readRotationDuration();
+    const effect = readRotationEffect();
+    if (ref || duration <= 0 || effect === "none" || previous === null) {
+      commit(next);
+      return;
+    }
+    if (effect === "fade-through") fadeThroughTransition(previous, next, duration);
+    else fadeTransition(previous, next, duration);
+  }
+  async function loadImages() {
+    request?.abort?.();
+    const controller = new AbortController();
+    request = controller;
+    try {
+      const response = await fetch(LIST_URL, { headers: { accept: "application/json" }, signal: controller.signal });
+      if (!response.ok) return [];
+      const payload = await response.json();
+      return Array.isArray(payload.images) ? payload.images.map((image) => image.name) : [];
+    } catch {
+      return [];
+    } finally {
+      if (request === controller) request = null;
+    }
+  }
+  async function tick(advance) {
+    if (!installed2 || !readRotationMode()) return;
+    const names = await loadImages();
+    if (!installed2 || !readRotationMode()) return;
+    const selected = readRotationGroup();
+    const candidates = selected.length === 0 ? names : selectRotationGroup(selected, names);
+    if (candidates.length === 0) return;
+    const current = readString(SELECTION_KEY);
+    if (current === null || !candidates.includes(current)) {
+      transitionTo(candidates[0]);
+    } else if (advance) {
+      transitionTo(pickNextImage(candidates, current));
+    }
+  }
+  function schedule() {
+    window.clearTimeout(timer);
+    timer = 0;
+    if (!installed2 || !readRotationMode()) return;
+    const interval = readRotationInterval();
+    timer = window.setTimeout(() => {
+      timer = 0;
+      void tick(true).finally(() => {
+        schedule();
+      });
+    }, interval * 1e3);
+  }
+  function refreshRotation({ immediate = false } = {}) {
+    window.clearTimeout(timer);
+    timer = 0;
+    if (!installed2) return;
+    if (!readRotationMode()) {
+      clearTransient();
+      return;
+    }
+    if (immediate || readString(SELECTION_KEY) === null) {
+      void tick(false).finally(() => {
+        schedule();
+      });
+    } else {
+      schedule();
+    }
+  }
+  function installRotation() {
+    installed2 = true;
+    refreshRotation({ immediate: true });
+    return () => {
+      installed2 = false;
+      window.clearTimeout(timer);
+      timer = 0;
+      clearTransient();
+    };
+  }
+
+  // src/rows.js
+  function Row({ title, description, children, disabled, status }) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const hasDescription = typeof description === "string" && description !== "";
+    return h(
+      "div",
+      {
+        className: "dshcb-row",
+        "data-disabled": disabled ? "" : void 0,
+        role: "group",
+        "aria-labelledby": titleId === "" ? void 0 : titleId,
+        "aria-describedby": hasDescription ? descriptionId : void 0
+      },
+      h(
+        "div",
+        { className: "dshcb-text" },
+        h("div", { className: "dshcb-title", id: titleId === "" ? void 0 : titleId }, title),
+        hasDescription ? h("div", { className: "dshcb-desc", id: descriptionId }, description) : null,
+        status
+      ),
+      h("div", { className: "dshcb-control", "aria-describedby": hasDescription ? descriptionId : void 0 }, children)
+    );
+  }
+  function BackgroundRow() {
+    const copy = useCopy();
+    const [images, setImages] = useState(null);
+    const [folder, setFolder] = useState("");
+    const [truncated, setTruncated] = useState(false);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [selection, setSelection] = useState(() => readSelection());
+    const alive = useRef(true);
+    const request2 = useRef(null);
+    const load = () => {
+      request2.current?.abort?.();
+      const controller = new AbortController();
+      request2.current = controller;
+      setBusy(true);
+      fetch(LIST_URL, { headers: { accept: "application/json" }, signal: controller.signal }).then((response) => {
+        if (!response.ok) throw new Error("HTTP " + String(response.status));
+        return response.json();
+      }).then((payload) => {
+        if (!alive.current) return;
+        const list = Array.isArray(payload.images) ? payload.images : [];
+        setImages(list);
+        setFolder(typeof payload.folder === "string" ? payload.folder : "");
+        setTruncated(payload.truncated === true);
+        setError(null);
+        recordDiagnostics({
+          list: { status: "ok", images: list.length, truncated: payload.truncated === true, at: Date.now() }
+        });
+      }).catch((failure) => {
+        if (failure?.name === "AbortError") return;
+        recordDiagnostics({ list: { status: "error", error: String(failure), at: Date.now() } });
+        if (alive.current) setError("failed");
+      }).finally(() => {
+        if (alive.current && request2.current === controller) setBusy(false);
+      });
+    };
+    useEffect(() => {
+      alive.current = true;
+      load();
+      const onRotated = (event) => {
+        const name = event?.detail?.name;
+        if (typeof name === "string") setSelection(name);
+      };
+      window.addEventListener(ROTATION_EVENT, onRotated);
+      return () => {
+        alive.current = false;
+        request2.current?.abort?.();
+        window.removeEventListener(ROTATION_EVENT, onRotated);
+      };
+    }, []);
+    const choose = (name) => {
+      const next = name === "" ? null : name;
+      writeString(SELECTION_KEY, next);
+      setSelection(next);
+      applyBackground(next);
+    };
+    const openFolder = () => {
+      fetch(FOLDER_URL, {
+        method: "POST",
+        headers: { [FOLDER_HEADER]: FOLDER_HEADER_VALUE }
+      }).then((response) => {
+        if (!response.ok) throw new Error("HTTP " + String(response.status));
+        if (alive.current) setError(null);
+      }).catch(() => {
+        if (alive.current) setError("openFailed");
+      });
+    };
+    const current = images === null ? null : images.find((image) => image.name === selection) || null;
+    const available = images === null ? [] : images;
+    const errorText = error === null ? null : copy[error];
+    const notices = [];
+    if (errorText !== null) notices.push(h("div", { key: "error", className: "dshcb-error", role: "alert" }, errorText));
+    if (errorText === null && images === null) {
+      notices.push(h("div", { key: "loading", className: "dshcb-notice" }, copy.loading));
+    }
+    if (errorText === null && images !== null && available.length === 0) {
+      notices.push(
+        h(
+          "div",
+          { key: "empty", className: "dshcb-notice" },
+          copy.emptyBefore,
+          h("code", null, folder === "" ? "~/.dsh/backgrounds" : folder),
+          copy.emptyAfter
+        )
+      );
+    }
+    if (errorText === null && images !== null && truncated) {
+      notices.push(
+        h(
+          "div",
+          { key: "truncated", className: "dshcb-notice" },
+          copy.truncated.replace("{shown}", String(available.length))
+        )
+      );
+    }
+    const status = notices.length === 0 ? null : h("div", { className: "dshcb-status" }, notices);
+    return h(
+      "div",
+      { className: "dshcb-background-block" },
+      h(
+        "div",
+        {
+          className: "dshcb-bg-preview",
+          "aria-hidden": true,
+          style: selection === null ? void 0 : { backgroundImage: 'url("' + FILE_URL + encodeURIComponent(selection) + '")' }
+        },
+        selection === null ? h("span", { className: "dshcb-bg-empty" }, copy.none) : null
+      ),
+      h(
+        "div",
+        { className: "dshcb-bg-file" },
+        h(
+          "select",
+          {
+            className: "dshcb-select dshcb-bg-select",
+            value: selection === null ? "" : selection,
+            disabled: busy,
+            "aria-label": copy.choose,
+            onChange: (event) => {
+              choose(event.target.value);
+            }
+          },
+          h("option", { value: "" }, copy.none),
+          available.map((image) => h("option", { key: image.name, value: image.name }, image.name)),
+          selection !== null && current === null ? h("option", { key: selection, value: selection }, selection + " (missing)") : null
+        ),
+        h("button", { type: "button", className: "dshcb-button", onClick: openFolder }, copy.open),
+        h("button", { type: "button", className: "dshcb-button", onClick: load, disabled: busy }, copy.refresh)
+      ),
+      status
+    );
+  }
+  function ModeRow() {
+    const copy = useCopy();
+    const [mode, setMode] = useState(() => readRotationMode() ? "rotation" : "fixed");
+    const change = (next) => {
+      setMode(next);
+      writeString(MODE_KEY, next);
+      refreshRotation({ immediate: next === "rotation" });
+    };
+    return h(
+      Row,
+      { title: copy.modeTitle },
+      h(
+        "div",
+        { className: "dshcb-rotation-controls" },
+        h(
+          "label",
+          { className: "dshcb-control-field" },
+          h("span", { className: "dshcb-control-caption" }, copy.modeTitle),
+          h(
+            "select",
+            {
+              className: "dshcb-select",
+              value: mode,
+              "aria-label": copy.modeTitle,
+              onChange: (event) => change(event.target.value)
+            },
+            h("option", { value: "fixed" }, copy.modeFixed),
+            h("option", { value: "rotation" }, copy.modeRotation)
+          )
+        )
+      )
+    );
+  }
+  function RotationEffectRow() {
+    const copy = useCopy();
+    const [effect, setEffect] = useState(() => readRotationEffect());
+    const [duration, setDuration] = useState(() => readRotationDuration());
+    const [interval, setIntervalValue] = useState(() => readRotationInterval());
+    const changeEffect = (next) => {
+      setEffect(next);
+      writeString(ROTATION_EFFECT_KEY, next);
+      refreshRotation();
+    };
+    const changeDuration = (next) => {
+      const value = normalizeRotationDuration(next);
+      setDuration(value);
+      writeString(ROTATION_DURATION_KEY, String(value));
+      refreshRotation();
+    };
+    const changeInterval = (next) => {
+      const value = normalizeRotationInterval(next);
+      setIntervalValue(value);
+      writeString(ROTATION_INTERVAL_KEY, String(value));
+      refreshRotation();
+    };
+    return h(
+      Row,
+      { title: copy.rotationEffectTitle },
+      h(
+        "div",
+        { className: "dshcb-rotation-controls" },
+        h(
+          "label",
+          { className: "dshcb-control-field" },
+          h("span", { className: "dshcb-control-caption" }, copy.effectType),
+          h(
+            "select",
+            {
+              className: "dshcb-select",
+              value: effect,
+              "aria-label": copy.effectType,
+              onChange: (event) => changeEffect(event.target.value)
+            },
+            h("option", { value: "fade" }, copy.effectFade),
+            h("option", { value: "fade-through" }, copy.effectFadeThrough),
+            h("option", { value: "none" }, copy.effectNone)
+          )
+        ),
+        h(
+          "label",
+          { className: "dshcb-control-field" },
+          h("span", { className: "dshcb-control-caption" }, copy.effectDuration),
+          h("input", {
+            type: "range",
+            className: "dshcb-range",
+            min: String(ROTATION_DURATION_MIN),
+            max: String(ROTATION_DURATION_MAX),
+            step: "0.1",
+            value: String(duration),
+            "aria-label": copy.effectDuration,
+            onChange: (event) => changeDuration(event.target.value)
+          }),
+          h("span", { className: "dshcb-value" }, duration.toFixed(1) + "s")
+        ),
+        h(
+          "label",
+          { className: "dshcb-control-field" },
+          h("span", { className: "dshcb-control-caption" }, copy.rotationInterval),
+          h("input", {
+            type: "range",
+            className: "dshcb-range",
+            min: String(ROTATION_INTERVAL_MIN),
+            max: String(ROTATION_INTERVAL_MAX),
+            step: "5",
+            value: String(interval),
+            "aria-label": copy.rotationInterval,
+            onChange: (event) => changeInterval(event.target.value)
+          }),
+          h("span", { className: "dshcb-value" }, String(interval) + "s")
+        )
+      )
+    );
+  }
+  function RotationGroupRow() {
+    const copy = useCopy();
+    const [images, setImages] = useState(null);
+    const [selected, setSelected] = useState(() => readRotationGroup());
+    const [order, setOrder] = useState(() => {
+      const raw = readString(ROTATION_ORDER_KEY);
+      if (raw === null) return [];
+      try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.filter((value) => typeof value === "string") : [];
+      } catch {
+        return [];
+      }
+    });
+    const [dragging, setDragging] = useState(null);
+    const alive = useRef(true);
+    const listRef = useRef(null);
+    const flipFrom = useRef(null);
+    useEffect(() => {
+      alive.current = true;
+      const controller = new AbortController();
+      fetch(LIST_URL, { headers: { accept: "application/json" }, signal: controller.signal }).then((response) => {
+        if (!response.ok) throw new Error("HTTP " + String(response.status));
+        return response.json();
+      }).then((payload) => {
+        if (!alive.current) return;
+        const names = Array.isArray(payload.images) ? payload.images.map((image) => image.name) : [];
+        setImages(names);
+        setOrder((current) => {
+          const saved = current.filter((name) => names.includes(name));
+          return [...saved, ...names.filter((name) => !saved.includes(name))];
+        });
+        setSelected((current) => current.filter((name) => names.includes(name)));
+      }).catch(() => {
+        if (alive.current) setImages([]);
+      });
+      return () => {
+        alive.current = false;
+        controller.abort();
+      };
+    }, []);
+    const writeSelected = (next) => {
+      setSelected(next);
+      writeString(ROTATION_GROUP_KEY, JSON.stringify(order.filter((name) => next.includes(name))));
+      refreshRotation({ immediate: true });
+    };
+    const writeOrder = (next) => {
+      const list2 = listRef.current;
+      if (list2 !== null) {
+        const rects = /* @__PURE__ */ new Map();
+        for (const item of list2.querySelectorAll(".dshcb-group-item")) {
+          rects.set(item.getAttribute("data-name"), item.getBoundingClientRect());
+        }
+        flipFrom.current = rects;
+      }
+      setOrder(next);
+      writeString(ROTATION_ORDER_KEY, JSON.stringify(next));
+      writeString(ROTATION_GROUP_KEY, JSON.stringify(next.filter((name) => selected.includes(name))));
+      refreshRotation({ immediate: true });
+    };
+    useLayoutEffect(() => {
+      const previous = flipFrom.current;
+      flipFrom.current = null;
+      const list2 = listRef.current;
+      if (previous === null || list2 === null) return;
+      if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true) return;
+      for (const item of list2.querySelectorAll(".dshcb-group-item")) {
+        const before = previous.get(item.getAttribute("data-name"));
+        if (before === void 0) continue;
+        const after = item.getBoundingClientRect();
+        const delta = before.top - after.top;
+        if (Math.abs(delta) < 1) continue;
+        item.animate([{ transform: `translateY(${String(delta)}px)` }, { transform: "translateY(0)" }], {
+          duration: 220,
+          easing: "cubic-bezier(.2, .8, .2, 1)"
+        });
+      }
+    }, [order]);
+    const toggle = (name) => {
+      writeSelected(selected.includes(name) ? selected.filter((entry) => entry !== name) : [...selected, name]);
+    };
+    const available = images ?? [];
+    const displayNames = order.filter((name) => available.includes(name));
+    const move = (from, to) => {
+      if (from === null || from === to) return;
+      writeOrder(moveRotationImage(order, from, to));
+    };
+    const list = images === null ? h("div", { className: "dshcb-notice" }, copy.loading) : available.length === 0 ? h("div", { className: "dshcb-notice" }, copy.rotationGroupEmpty) : h(
+      "div",
+      { className: "dshcb-group-list", ref: listRef },
+      displayNames.map((name) => {
+        const checked = selected.includes(name);
+        return h(
+          "div",
+          {
+            key: name,
+            className: "dshcb-group-item",
+            "data-name": name,
+            "data-selected": checked ? "" : void 0,
+            "data-dragging": dragging === name ? "" : void 0,
+            onDragOver: (event) => {
+              if (dragging !== null) event.preventDefault();
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              move(dragging, name);
+              setDragging(null);
+            }
+          },
+          h("input", {
+            type: "checkbox",
+            checked,
+            "aria-label": name,
+            onChange: () => toggle(name)
+          }),
+          h("img", {
+            className: "dshcb-group-thumb",
+            src: FILE_URL + encodeURIComponent(name),
+            alt: "",
+            loading: "lazy",
+            decoding: "async"
+          }),
+          h("span", { className: "dshcb-group-name" }, name),
+          h(
+            "span",
+            {
+              className: "dshcb-drag-handle",
+              draggable: true,
+              title: copy.dragHandle,
+              "aria-label": copy.dragHandle,
+              onDragStart: (event) => {
+                event.dataTransfer.setData("text/plain", name);
+                event.dataTransfer.effectAllowed = "move";
+                setDragging(name);
+              },
+              onDragEnd: () => setDragging(null),
+              onClick: (event) => event.preventDefault()
+            },
+            "☰"
+          )
+        );
+      })
+    );
+    return h(
+      Row,
+      { title: copy.rotationGroupTitle },
+      h(
+        "div",
+        { className: "dshcb-rotation-controls" },
+        list,
+        h(
+          "div",
+          { className: "dshcb-group-actions" },
+          h(
+            "button",
+            {
+              type: "button",
+              className: "dshcb-button",
+              disabled: available.length === 0,
+              onClick: () => writeSelected(available)
+            },
+            copy.rotationGroupAll
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              className: "dshcb-button",
+              disabled: selected.length === 0,
+              onClick: () => writeSelected([])
+            },
+            copy.rotationGroupNone
+          )
+        )
+      )
+    );
+  }
+  function SwitchRow({ setting, title, description }) {
+    const enabled = setting.useEnabled();
+    return h(
+      Row,
+      { title, description },
+      h("button", {
+        type: "button",
+        role: "switch",
+        "aria-checked": enabled ? "true" : "false",
+        "aria-label": title,
+        className: "dshcb-switch",
+        onClick: () => {
+          setting.write(!enabled);
+        }
+      })
+    );
+  }
+  function ColorRow({ setting, title, description }) {
+    const copy = useCopy();
+    const { color, change, reset } = setting.useColor();
+    return h(
+      Row,
+      { title, description },
+      h("input", {
+        type: "color",
+        className: "dshcb-color",
+        value: color,
+        "aria-label": title,
+        onChange: (event) => {
+          change(event.target.value);
+        }
+      }),
+      h(
+        "button",
+        {
+          type: "button",
+          className: "dshcb-button",
+          onClick: () => {
+            reset();
+          }
+        },
+        copy.reset
+      )
+    );
+  }
+  function ActiveSliderRow({ storageKey, minimum, maximum, fallback, title, description, disabled, unit, after }) {
+    const copy = useCopy();
+    const [value, setValue] = useState(() => readPercent(storageKey, fallback, minimum, maximum));
+    const change = (next) => {
+      const parsed = Number(next);
+      const clamped = Number.isFinite(parsed) ? clampToRange(parsed, minimum, maximum) : value;
+      setValue(clamped);
+      writeString(storageKey, String(clamped));
+      if (typeof after === "function") after(clamped);
+      else applyBackground(readSelection());
+    };
+    return h(
+      Row,
+      { title, description, disabled },
+      h("input", {
+        type: "range",
+        className: "dshcb-range",
+        min: String(minimum),
+        max: String(maximum),
+        step: "1",
+        value: String(value),
+        disabled: disabled === true,
+        "aria-label": title,
+        onChange: (event) => {
+          change(Number(event.target.value));
+        }
+      }),
+      h("span", { className: "dshcb-value" }, String(value) + (unit ?? copy.percent))
+    );
+  }
+  function ScrimLeftRow() {
+    const copy = useCopy();
+    return h(ActiveSliderRow, {
+      storageKey: SCRIM_LEFT_KEY,
+      minimum: SCRIM_MIN,
+      maximum: SCRIM_MAX,
+      fallback: readPercent(VEIL_KEY, VEIL_DEFAULT, VEIL_MIN, VEIL_MAX),
+      title: copy.scrimLeftTitle
+    });
+  }
+  function ScrimMainRow() {
+    const copy = useCopy();
+    return h(ActiveSliderRow, {
+      storageKey: SCRIM_MAIN_KEY,
+      minimum: SCRIM_MIN,
+      maximum: SCRIM_MAX,
+      fallback: readPercent(SCRIM_KEY, SCRIM_DEFAULT, SCRIM_MIN, SCRIM_MAX),
+      title: copy.scrimMainTitle
+    });
+  }
+  function ScrimRightRow() {
+    const copy = useCopy();
+    return h(ActiveSliderRow, {
+      storageKey: SCRIM_RIGHT_KEY,
+      minimum: SCRIM_MIN,
+      maximum: SCRIM_MAX,
+      fallback: readPercent(VEIL_KEY, VEIL_DEFAULT, VEIL_MIN, VEIL_MAX),
+      title: copy.scrimRightTitle
+    });
+  }
+  function StripRow() {
+    const copy = useCopy();
+    return h(SwitchRow, {
+      setting: settings().switches.strip,
+      title: copy.stripTitle,
+      description: copy.stripDescription
+    });
+  }
+  function StripColorRow() {
+    const copy = useCopy();
+    return h(ColorRow, {
+      setting: settings().colors.strip,
+      title: copy.stripColorTitle,
+      description: copy.stripColorDescription
+    });
+  }
+  function ProgressRow() {
+    const copy = useCopy();
+    return h(SwitchRow, {
+      setting: settings().switches.progress,
+      title: copy.progressTitle,
+      description: copy.progressDescription
+    });
+  }
+  function ProgressColorRow() {
+    const copy = useCopy();
+    return h(ColorRow, {
+      setting: settings().colors.progress,
+      title: copy.progressColorTitle,
+      description: copy.progressColorDescription
+    });
+  }
+  function TokenRow() {
+    const copy = useCopy();
+    return h(SwitchRow, {
+      setting: settings().switches.token,
+      title: copy.tokenTitle,
+      description: copy.tokenDescription
+    });
+  }
+  function TokenSizeRow() {
+    const copy = useCopy();
+    return h(ActiveSliderRow, {
+      storageKey: TOKEN_SIZE_KEY,
+      minimum: TOKEN_SIZE_MIN,
+      maximum: TOKEN_SIZE_MAX,
+      fallback: TOKEN_SIZE_DEFAULT,
+      title: copy.tokenSizeTitle,
+      description: copy.tokenSizeDescription,
+      unit: "px",
+      after: () => {
+        applyTokenSize();
+      }
+    });
+  }
+  var BACKGROUND_ROWS = [
+    BackgroundRow,
+    ModeRow,
+    RotationEffectRow,
+    RotationGroupRow,
+    ScrimLeftRow,
+    ScrimMainRow,
+    ScrimRightRow
+  ];
+  var UI_GROUPS = [
+    [StripRow, StripColorRow],
+    [ProgressRow, ProgressColorRow],
+    [TokenRow, TokenSizeRow]
+  ];
+  function UiCard({ rows }) {
+    return h(
+      "div",
+      { className: "dshcb-card" },
+      rows.map((RowComponent, index) => h(RowComponent, { key: String(index) }))
+    );
+  }
+  function PageSection() {
+    const copy = useCopy();
+    const [tab, setTab] = useState("background");
+    const tabs = [
+      { id: "background", label: copy.tabBackground },
+      { id: "ui", label: copy.tabUi }
+    ];
+    const panelId = useId();
+    const tabId = (id) => "dshcb-tab-" + id;
+    return h(
+      "div",
+      { className: "dshcb-section" },
+      h(
+        "div",
+        { className: "dshcb-tabs", role: "tablist" },
+        tabs.map(
+          (entry) => h(
+            "button",
+            {
+              key: entry.id,
+              type: "button",
+              role: "tab",
+              id: tabId(entry.id),
+              "aria-controls": panelId,
+              tabIndex: tab === entry.id ? 0 : -1,
+              className: "dshcb-tab" + (tab === entry.id ? " dshcb-tab-active" : ""),
+              "aria-selected": tab === entry.id ? "true" : "false",
+              onClick: () => setTab(entry.id),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                  event.preventDefault();
+                  setTab(tab === "background" ? "ui" : "background");
+                }
+              }
+            },
+            entry.label
+          )
+        )
+      ),
+      h(
+        "div",
+        { className: "dshcb-tab-panel", role: "tabpanel", id: panelId, "aria-labelledby": tabId(tab) },
+        tab === "background" ? BACKGROUND_ROWS.map((RowComponent, index) => h(RowComponent, { key: String(index) })) : UI_GROUPS.map((rows, index) => h(UiCard, { key: String(index), rows }))
+      )
+    );
+  }
+
+  // src/styles.js
+  var active = `html[${ACTIVE_ATTRIBUTE}]`;
+  var css = `
+/* ---- background image ---------------------------------------------------- */
+
+${active} {
+  background-color: transparent !important;
+}
+
+/* The image lives on its own fixed element, not on <html>: Chromium renders
+ * animated GIF/WebP/APNG backgrounds on the root element as a static first
+ * frame. */
+.dshcb-background-layer {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: block;
+  object-fit: cover;
+  object-position: center center;
+}
+
+/* Temporary rotation layer: painted above the <html> background but below
+ * the app columns and their scrims. The manager sets the image/colour and
+ * animates opacity inline. */
+.dshcb-rotate-layer {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: block;
+  object-fit: cover;
+  object-position: center center;
+}
+
+/* Rotation settings block. The mode/effect/group controls stack inside
+ * the normal row control column so they line up with every other row. */
+.dshcb-rotation-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 260px;
+  max-width: 340px;
+}
+.dshcb-control-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.dshcb-control-field > .dshcb-control-caption {
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-secondary);
+}
+.dshcb-control-field > .dshcb-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.dshcb-control-field > .dshcb-range {
+  flex: 1 1 auto;
+  min-width: 80px;
+}
+.dshcb-control-field > .dshcb-value {
+  flex: 0 0 auto;
+  min-width: 42px;
+  text-align: end;
+}
+.dshcb-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 128px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.dshcb-group-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  height: 24px;
+  max-width: 100%;
+  padding: 0 2px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.dshcb-group-item[data-dragging] {
+  opacity: .5;
+  will-change: transform;
+}
+.dshcb-group-thumb {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  object-fit: cover;
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.dshcb-group-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dshcb-drag-handle {
+  flex: 0 0 auto;
+  padding: 0 2px;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: grab;
+  font-size: 14px;
+  line-height: 1;
+  user-select: none;
+}
+.dshcb-group-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Scrims are independent per region (left sidebar / main column / right
+ * sidebar); each column is marked by the plugin and paints its own layer at
+ * z-index -1 inside an isolated stacking context. There is deliberately no
+ * window-wide pseudo-element: it could not leave the sidebars untouched. */
+
+/* Measured containers: any ancestor of the conversation that paints an opaque
+ * base surface is marked by markPainters(R11-01) and cleared here. */
+${active} [${LIFT_ATTRIBUTE}] {
+  background-color: transparent !important;
+}
+
+/* ---- sidebar ------------------------------------------------------------- */
+
+/* The sidebar column and the sidebar slot's own root are two opaque surfaces of
+ * the app frame. The column is marked by markSidebarColumn() through the
+ * [data-slot=sidebar] outlet's parent, so these rules no longer depend on
+ * the hashed CSS-module class name; the class selector stays as a last-resort
+ * fallback for a composition where the slot outlet is missing. Both clear
+ * background-image too: macOS paints the column with a gradient (R2 F2). */
+${active} [${SIDEBAR_COLUMN_ATTRIBUTE}],
+${active} [${SIDEBAR_COLUMN_ATTRIBUTE}] > [data-slot="sidebar"] > *,
+${active} [class*="sidebarCol"] {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+/* The three painted columns get their own stacking context so a scrim layer
+ * can sit at z-index -1: above the image, below every in-flow surface. A
+ * positioned pseudo-element needs a positioned containing block, so each
+ * column gets position: relative as well (isolation alone is not enough). */
+${active} [${SIDEBAR_COLUMN_ATTRIBUTE}],
+${active} [${MAIN_COLUMN_ATTRIBUTE}],
+${active} [${RIGHT_COLUMN_ATTRIBUTE}],
+${active} [class*="sidebarCol"] {
+  position: relative !important;
+  isolation: isolate !important;
+}
+
+/* Left sidebar scrim. */
+${active} [${SIDEBAR_COLUMN_ATTRIBUTE}]::before,
+${active} [class*="sidebarCol"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: var(--dsh-chat-background-scrim-left);
+}
+
+/* Main conversation column scrim. */
+${active} [${MAIN_COLUMN_ATTRIBUTE}]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: var(--dsh-chat-background-scrim-main);
+}
+
+/* Normal size: the right column carries the scrim like the other columns, so
+ * collapsing the sidebar shrinks the scrim with it. */
+${active} [${RIGHT_COLUMN_ATTRIBUTE}]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: var(--dsh-chat-background-scrim-right);
+}
+${active} [${RIGHT_COLUMN_ATTRIBUTE}][${RIGHT_PANEL_FULL_ATTRIBUTE}]::after {
+  display: none;
+}
+
+/* Full-window preview: the panel itself paints the image + one right scrim,
+ * covering the conversation underneath instead of letting it show through
+ * (R11-01). The marker is only present while the panel is full-window, so a
+ * collapsing normal sidebar never leaves a scrim rectangle behind. */
+/* Fullscreen means "the main window becomes the right sidebar": keep the left
+ * sidebar in place, hide the conversation column, and let the panel cover the
+ * rest. The panel is repositioned through the fullscreen offset variables so
+ * it starts at the left sidebar edge instead of covering the whole window. */
+${active}[${RIGHT_FULLSCREEN_ATTRIBUTE}] [${MAIN_COLUMN_ATTRIBUTE}] {
+  visibility: hidden !important;
+}
+
+${active} [${RIGHT_PANEL_ATTRIBUTE}][${RIGHT_PANEL_FULL_ATTRIBUTE}] {
+  left: var(--dsh-chat-background-full-left, 0px) !important;
+  right: auto !important;
+  width: var(--dsh-chat-background-full-width, 100vw) !important;
+  background-color: transparent !important;
+  background-image: var(--dsh-chat-background-scrim-right), var(--dsh-chat-background-image) !important;
+  background-size: auto, cover !important;
+  background-position: center, center !important;
+  background-repeat: no-repeat !important;
+  background-attachment: fixed !important;
+}
+
+/* While switching fullscreen, freeze the rightbar panel/contents for a few
+ * frames so the app cannot animate the transition (R16-01). */
+${active}[${NO_ANIMATION_ATTRIBUTE}] [data-slot="rightbar"] *,
+${active}[${NO_ANIMATION_ATTRIBUTE}] [${RIGHT_PANEL_ATTRIBUTE}] {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* The layout frame gets a transition only for the duration of an open/collapse
+ * click; it is not left on, otherwise dragging the sidebar edge would lag. The
+ * timing matches the app content transform (0.3s cubic-bezier(.4,0,.2,1)). */
+${active} [${LAYOUT_FRAME_ATTRIBUTE}][${FRAME_ANIMATING_ATTRIBUTE}] {
+  transition: grid-template-columns 300ms cubic-bezier(.4, 0, .2, 1) !important;
+}
+
+/* The session list's own bottom fade ends on the fixed sidebar fill
+ * (linear-gradient(to bottom, transparent, var(--dsw-specific-sidebar-fill))),
+ * which becomes a light band above the account row once the sidebar is
+ * transparent. Re-point its end colour at the veil so it still fades out
+ * instead of leaving an edge.
+ *
+ * Scoped to the workspace slot inside the sidebar: a bare [class*="fade"] also
+ * matches the conversation turn-rail masks and group-body masks, and painting a
+ * background on those leaves visible bars (BG-03). */
+${active} [data-slot="sidebar.workspaces"] [class*="fade"],
+${active} [${SIDEBAR_COLUMN_ATTRIBUTE}] [class*="fade"] {
+  background: linear-gradient(180deg, transparent, var(--dsh-chat-background-scrim-left, transparent)) !important;
+}
+
+/* Windows desktop draws a 40px title-bar fill on the app frame's ::before
+ * (html[data-windows-titlebar] is set by the preload); a measured
+ * background-color cannot see a pseudo-element, so clear it directly. */
+${active}[data-windows-titlebar] [class*="frame"]::before {
+  background: transparent !important;
+}
+
+/* The desktop preload samples a hidden probe span whose background is
+ * var(--dsw-specific-sidebar-fill) and sends it to Electron as the native
+ * title-bar overlay colour. Overriding only that probe (never the token
+ * itself) makes the window-control strip transparent without changing any
+ * app surface that uses the token. appending a body custom property in
+ * background.js nudges the preload into re-sending the colour. */
+${active} body > span[style*="dsw-specific-sidebar-fill"] {
+  background-color: transparent !important;
+}
+
+/* Accessibility: when the user asks for reduced transparency or the system runs
+ * forced-colors, the honest fallback is the plain theme rather than a scrim the
+ * user asked not to have. */
+@media (forced-colors: active) {
+  ${active} {
+    background-image: none !important;
+  }
+  ${active} [${SIDEBAR_COLUMN_ATTRIBUTE}]::before,
+  ${active} [${MAIN_COLUMN_ATTRIBUTE}]::after,
+  ${active} [${RIGHT_COLUMN_ATTRIBUTE}]::after {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  ${active} [${LAYOUT_FRAME_ATTRIBUTE}] {
+    transition: none !important;
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  ${active} {
+    background-image: none !important;
+  }
+  ${active} [${SIDEBAR_COLUMN_ATTRIBUTE}]::before,
+  ${active} [${MAIN_COLUMN_ATTRIBUTE}]::after,
+  ${active} [${RIGHT_COLUMN_ATTRIBUTE}]::after {
+    display: none;
+  }
+}
+
+/* The right sidebar is its own tab host with an opaque section surface; it is
+ * cleared through the stable rightbar slot outlet so the image also shows
+ * there (the slot outlet is display: contents; the section is its DOM
+ * descendant). Content cards inside keep their own surfaces for readability. */
+${active} [data-slot="rightbar"] [class*="tabHost"] {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+/* The conversation's composer seat carries a fade pad
+ * (linear-gradient(180deg, transparent 0px, var(--dsw-alias-bg-base) 36px),
+ * sticky at the bottom), which leaves a white band under the composer. Clear
+ * it while a background is applied so the image reaches the bottom. */
+${active} :is([class*="composerSeat"], [class*="composerFade"], [class*="dockFade"]) {
+  background-image: none !important;
+}
+
+/* The bar under the composer: absolutely positioned inside the composer
+ * wrapper, one layer below every child of that wrapper, so it paints over the
+ * background image and under the usage row. isolation on the wrapper is what
+ * lets the negative layer stop there; it creates a stacking context only,
+ * never a containing block for fixed-position descendants. */
+${active} [data-slot="conversation.composer.bar"] > * {
+  position: relative !important;
+  isolation: isolate !important;
+}
+
+/* Both plugin colours default per theme in the stylesheet; a picked colour
+ * arrives as an inline property on <html> and replaces them. */
+${active} {
+  --dsh-chat-strip-bg: rgba(242, 243, 245, 0.92);
+}
+
+/* The theme service puts data-ds-dark-theme on <body>; <html> cannot be a
+ * descendant of <body>, so the override is published on the body and inherited
+ * down to the injected bar. A selector of the form
+ * body[data-ds-dark-theme] html[...] can never match (BG-01). */
+${active} body[data-ds-dark-theme] {
+  --dsh-chat-strip-bg: rgba(38, 41, 48, 0.92);
+}
+
+${active} [${STRIP_ATTRIBUTE}] {
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: 12px;
+  background: var(--dsh-chat-strip-bg);
+}
+
+/* Settings surfaces stay readable: the section shell paints the app base.
+ *
+ * Deliberately limited to the settings entries: a broader shell.overlay > *
+ * rule would paint an opaque background on every floating layer other plugins
+ * register there (BG-15). */
+${active} :is([data-slot="settings.section"], [data-slot="settings.header"], [data-slot="settings.shell"]) {
+  background-color: var(--dsw-alias-bg-base) !important;
+}
+
+/* ---- settings rows ------------------------------------------------------- */
+
+/* Inline styles cannot express :hover, focus, switch states or a track fill, so
+ * the rows keep their layout in this plugin stylesheet. */
+
+/* Settings page shell: one column of rows, like the built-in sections. The last
+ * row drops its divider so the page does not end on a line. */
+.dshcb-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.dshcb-section > :last-child {
+  border-bottom: none;
+}
+
+/* Sub-navigation mirrors the app’s pill tabs: the active tab is a filled
+ * brand pill, the others stay quiet text buttons. */
+.dshcb-tabs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0 14px;
+}
+.dshcb-tab {
+  height: 32px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.dshcb-tab:hover:not(.dshcb-tab-active) {
+  background: var(--dsw-alias-bg-layer-1);
+}
+.dshcb-tab-active {
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary-inverted, #fff);
+}
+
+/* One card per component on the UI tab, matching the app’s bordered
+ * summary cards: 1px hairline and a large radius. */
+.dshcb-card {
+  margin-top: 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-lg, 12px);
+  padding: 0 16px;
+}
+.dshcb-card .dshcb-row {
+  padding: 14px 0;
+}
+.dshcb-card .dshcb-row:last-child {
+  border-bottom: none;
+}
+.dshcb-tab-panel > .dshcb-row:last-child {
+  border-bottom: none;
+}
+.dshcb-status {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dshcb-background-block {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dshcb-bg-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 180px;
+  border-radius: var(--dsw-radius-md, 8px);
+  background-color: var(--dsw-alias-bg-layer-1);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  overflow: hidden;
+}
+.dshcb-bg-empty {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+}
+.dshcb-bg-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dshcb-bg-select {
+  flex: 1;
+  max-width: none;
+  min-width: 0;
+}
+.dshcb-bg-file .dshcb-select {
+  flex: 1;
+  max-width: none;
+}
+
+.dshcb-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 16px 0;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.dshcb-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+.dshcb-title {
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.dshcb-desc {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.dshcb-notice {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.dshcb-error {
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.dshcb-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+/* ---- controls ------------------------------------------------------------ */
+
+.dshcb-button {
+  height: 32px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.dshcb-button:hover:not(:disabled) {
+  background: var(--dsw-alias-bg-layer-1);
+}
+.dshcb-button:disabled {
+  color: var(--dsw-alias-label-caption);
+  cursor: default;
+}
+.dshcb-select {
+  height: 32px;
+  max-width: 180px;
+  padding: 0 6px;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+}
+
+/* Switch: 36x20 track with a 16px thumb. */
+.dshcb-switch {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-module-platform);
+  cursor: pointer;
+  transition: background .15s;
+}
+.dshcb-switch::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--dsw-alias-switch-thumb, #fff);
+  transition: transform .15s;
+}
+.dshcb-switch[aria-checked="true"] {
+  border-color: var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-brand-primary);
+}
+.dshcb-switch[aria-checked="true"]::after {
+  transform: translateX(16px);
+}
+.dshcb-switch:focus-visible,
+.dshcb-range:focus-visible {
+  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+/* Native colour well, restyled as a swatch so the palette control matches the
+ * other settings rows. */
+.dshcb-color {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  width: 44px;
+  height: 32px;
+  padding: 2px;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  cursor: pointer;
+}
+.dshcb-color::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.dshcb-color::-webkit-color-swatch {
+  border: 0;
+  border-radius: 6px;
+}
+.dshcb-color::-moz-color-swatch {
+  border: 0;
+  border-radius: 6px;
+}
+.dshcb-color:focus-visible {
+  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+/* Range slider. */
+.dshcb-range {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  width: 132px;
+  height: 20px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.dshcb-range:disabled {
+  cursor: default;
+}
+.dshcb-range::-webkit-slider-runnable-track {
+  height: 4px;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-module-platform);
+}
+.dshcb-range::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -50.5px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--dsw-alias-brand-primary);
+}
+.dshcb-range:disabled::-webkit-slider-thumb {
+  background: var(--dsw-alias-state-idle-primary, #a2a4a6);
+}
+.dshcb-range::-moz-range-track {
+  height: 4px;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-module-platform);
+}
+.dshcb-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--dsw-alias-brand-primary);
+}
+.dshcb-value {
+  min-width: 40px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* ---- task progress bar --------------------------------------------------- */
+
+/* Mounted into the composer's input dock (a full-width entry above the composer
+ * card): the percentage first, bar to its right, the pair pushed to the right
+ * edge of the COMPOSER CARD. The dock's parent is the whole centre column,
+ * which is wider than the card, so the row adopts the card's own width variable
+ * and centres itself — otherwise the bar lands at the window edge instead of
+ * above the input bar. */
+.dshcb-progress-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  width: var(--dsh-composer-card-max-width, min(calc(100% - 16px), 952px));
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  /* Right padding is the app's own dock inset, which lines the bar's right end
+   * up with the composer's send button (measured: both land on the same x at a
+   * 1416-wide viewport). */
+  padding: 0 var(--dsh-composer-dock-inset, 8px) 6px;
+}
+.dshcb-progress-value {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 18px;
+}
+.dshcb-progress-track {
+  flex: none;
+  width: 140px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  overflow: hidden;
+}
+.dshcb-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--dsh-progress-color, var(--dsw-alias-brand-primary));
+  transition: width .2s ease;
+}
+
+/* While the estimate drives the bar (a live turn without a task list), a slow
+ * pulse says "still working" without inventing a number. */
+.dshcb-progress-track[data-running] .dshcb-progress-fill {
+  animation: dshcb-progress-pulse 1.6s ease-in-out infinite;
+}
+@keyframes dshcb-progress-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .7; }
+}
+/* Respect a reduced-motion preference: the percentage is still live, the pulse
+ * is only decoration. */
+@media (prefers-reduced-motion: reduce) {
+  .dshcb-progress-track[data-running] .dshcb-progress-fill {
+    animation: none;
+  }
+}
+
+/* ---- total token line ---------------------------------------------------- */
+
+/* Injected into the sidebar footer right above the account row. Type and colour
+ * match that row (14px / label-primary / 22px line box); the font size comes
+ * from the settings row via a custom property, so the slider re-styles it
+ * without a re-render. */
+[${TOKEN_NODE_ATTRIBUTE}] {
+  box-sizing: border-box;
+  /* Left padding is corrected at runtime against the account row. */
+  padding: 6px 12px 2px 4px;
+  color: var(--dsw-alias-label-primary);
+  font-size: var(--dsh-token-size, 14px);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 22px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+`.trim();
+  function installStyles() {
+    const existing = document.querySelector(`style[data-plugin-css=${JSON.stringify(CSS_TAG_ID)}]`);
+    if (existing !== null) return () => {
+    };
+    const tag = document.createElement("style");
+    tag.dataset.plugin = "dsh-chat-background";
+    tag.dataset.pluginCss = CSS_TAG_ID;
+    tag.textContent = css;
+    document.head.appendChild(tag);
+    return () => {
+      tag.remove();
+    };
+  }
+
+  // src/plugin.js
+  function migrateLegacyPreferences() {
+    try {
+      const pairs = [
+        ["dsh-chat-background:scrim-left-enabled", "dsh-chat-background:scrim-left"],
+        ["dsh-chat-background:scrim-main-enabled", "dsh-chat-background:scrim-main"],
+        ["dsh-chat-background:scrim-right-enabled", "dsh-chat-background:scrim-right"]
+      ];
+      for (const [enabledKey, amountKey] of pairs) {
+        if (window.localStorage.getItem(enabledKey) === "off" && window.localStorage.getItem(amountKey) === null) {
+          window.localStorage.setItem(amountKey, "0");
+        }
+        window.localStorage.removeItem(enabledKey);
+      }
+      window.localStorage.removeItem("dsh-chat-background:sidebar");
+    } catch {
+    }
+  }
+  function createPlugin(require2) {
+    bindReact(require2);
+    return {
+      inject: ["slots", "locale"],
+      apply(ctx) {
+        migrateLegacyPreferences();
+        const switches = {
+          strip: createSwitch({
+            key: STRIP_KEY,
+            onChange: () => {
+              renderComposerStrip();
+            }
+          }),
+          progress: createSwitch({ key: PROGRESS_KEY }),
+          token: createSwitch({
+            key: TOKEN_KEY,
+            onChange: (next) => {
+              if (next) void refreshTokenTotal();
+              renderTokenTotal();
+            }
+          })
+        };
+        const colors = {
+          strip: createStripColorSetting(),
+          progress: createProgressColorSetting()
+        };
+        ctx.effect(() => installImageZoom(), "chat-background: image wheel zoom");
+        ctx.effect(() => installRightbarGestures(), "chat-background: rightbar gestures");
+        ctx.effect(() => installRotation(), "chat-background: background rotation");
+        installSettings({ switches, colors });
+        globalThis.__dshcb = { diagnostics: () => diagnosticsSnapshot() };
+        ctx.effect(installStyles, "chat-background: stylesheet");
+        applyBackground(readSelection());
+        colors.strip.apply();
+        colors.progress.apply();
+        applyTokenSize();
+        renderTokenTotal();
+        ctx.effect(
+          () => () => {
+            teardownVisuals();
+            resetTokenTotal();
+            disposeStorageCache();
+            if (globalThis.__dshcb !== void 0) delete globalThis.__dshcb;
+          },
+          "chat-background: document state"
+        );
+        ctx.effect(() => {
+          const onResize = () => {
+            flushBackground();
+          };
+          window.addEventListener("resize", onResize);
+          return () => {
+            window.removeEventListener("resize", onResize);
+            disconnectComposerSizing();
+          };
+        }, "chat-background: viewport and composer re-measure");
+        ctx.effect(() => {
+          const observer = new MutationObserver((records) => {
+            for (const record of records) {
+              if (record.type === "attributes") {
+                if (record.attributeName === "data-ds-dark-theme") {
+                  flushBackground();
+                  return;
+                }
+                continue;
+              }
+              if (record.addedNodes.length > 0 || record.removedNodes.length > 0) {
+                flushBackground();
+                return;
+              }
+            }
+          });
+          const observe = () => {
+            observer.observe(document.body, {
+              attributes: true,
+              attributeFilter: ["data-ds-dark-theme"],
+              childList: true,
+              subtree: true
+            });
+          };
+          if (document.body === null) document.addEventListener("DOMContentLoaded", observe, { once: true });
+          else observe();
+          return () => {
+            observer.disconnect();
+          };
+        }, "chat-background: DOM, scheme and switch follow-up");
+        ctx.effect(() => ctx.locale.register(LOCALE_NS, { zh, en }), "chat-background: settings dictionaries");
+        const t = ctx.locale.bind(LOCALE_NS);
+        installTranslator({
+          translate: t,
+          subscribe: typeof ctx.locale.subscribe === "function" ? (listener) => ctx.locale.subscribe(listener) : null
+        });
+        ctx.slots.inject(
+          "settings.section",
+          () => ctx.slots.register(
+            {
+              name: "settings.section",
+              id: SECTION_ID,
+              order: SECTION_ORDER,
+              label: () => t("nav"),
+              locale: LOCALE_NS
+            },
+            PageSection
+          )
+        );
+        ctx.slots.inject(
+          "conversation.input.dock",
+          () => ctx.slots.register(
+            {
+              name: "conversation.input.dock",
+              id: "chat-background-progress",
+              order: PROGRESS_DOCK_ORDER
+            },
+            ProgressDock
+          )
+        );
+        ctx.effect(() => {
+          let timer2 = 0;
+          const tick2 = () => {
+            if (switches.token.read()) void refreshTokenTotal();
+          };
+          tick2();
+          timer2 = window.setInterval(tick2, TOKEN_POLL_MS);
+          return () => {
+            window.clearInterval(timer2);
+          };
+        }, "chat-background: token total polling");
+      }
+    };
+  }
+
+  // src/index.js
+  window.__ModuleLoader__.load({
+    id: "dsh-chat-background",
+    factory(require2) {
+      return createPlugin(require2);
+    }
+  });
+})();