dsh-deepseek-style-theme 1.43.1 → 1.43.3

package/README.md

@@ -112,13 +112,28 @@ dsh plugin --profile web add ./releases/dsh-deepseek-style-theme-1.43.1.tgz
 
 ### 从 npm
 
+> ⚠️ **暂时不要用这一条。** npm 上的 `latest` 仍是 **1.43.1**，而那一版带着一个致命缺陷：客户端 bundle 的注册 id 还是旧 scope 的 `@dsh-external/dsh-deepseek-style-theme`，而宿主按包名 `dsh-deepseek-style-theme` 要求它自我注册，于是 **bundle 加载成功却什么都没注册**，主题的整个客户端半边失效。1.43.3 已修复。
+>
+> 在 1.43.3 发到 npm 之前，请用上面的 **tgz 别名地址** 或 `github:` 安装。
+
 ```bash
+# 修复版发到 npm 之后可用；在那之前用 tgz 别名地址
 dsh plugin --profile web add dsh-deepseek-style-theme
 ```
 
-> 包名是**无 scope** 的 `dsh-deepseek-style-theme`。这是刻意的：`@dsh-external` 这个 scope 在 npm 上属于别人（`wulei1107`，下面挂着 `@dsh-external/dsh-vision-toolkit`），不是本项目的命名空间，也发不进去。仓库里 `cordis.patch.yml` 的 `name:` 与 `package.json` 的 `name` 必须始终一致——前者是 Loader 用来解析模块的说明符，写成解析不到的旧名会让插件装配失败。
+> 包名是**无 scope** 的 `dsh-deepseek-style-theme`。这是刻意的：`@dsh-external` 这个 scope 在 npm 上属于别人（`wulei1107`，下面挂着 `@dsh-external/dsh-vision-toolkit`），不是本项目的命名空间，也发不进去。
+>
+> **改名的三个引用点必须同时对齐**，缺一个都会静默失效，且失效方式各不相同：
+>
+> | 位置 | 不对齐的后果 |
+> |---|---|
+> | `package.json` 的 `name` | 包装不进去 / 目录名不符 |
+> | `cordis.patch.yml` 的 `name:` | Loader 解析不到模块，**插件装配失败** |
+> | `lib/client.js` 里 `__ModuleLoader__.load` 的 `id` | bundle 加载成功却什么都没注册，**客户端半边失效**（1.43.1 的缺陷） |
+>
+> 自查：`grep '@dsh-external' lib/` 应当**一处都不命中**；命中即漏改（有意保留的兼容位置除外）。
 >
-> npm 是最省事的安装源：不走 `git clone`（绕开代理/证书问题），也不依赖 GitHub Release 资产（绕开 `releases/latest` 那类 URL 腐烂）。插件市场的目录条目一旦写上 `npm` 字段，市场就会优先用它而不是 tarball。
+> npm 是最省事的安装源：不走 `git clone`（绕开代理/证书问题），也不依赖 GitHub Release 资产（绕开 `releases/latest` 那类 URL 腐烂）。
 
 ```bash
 # 或任意 git 仓库地址（若该仓库未提交构建产物，

package/lib/client.js

@@ -1,5 +1,15 @@
 window.__ModuleLoader__.load({
-	id: "@dsh-external/dsh-deepseek-style-theme",
+	// This id must equal the package name: the host builds the browser bundle
+	// URL as /plugins/<entry.id>/client.js (dsh-client-modules), and the loader
+	// then requires that the bundle registers itself under that same id. The
+	// package was renamed to the unscoped dsh-deepseek-style-theme in 1.43.1
+	// while this literal kept the old scope, so on any profile carrying the new
+	// name the bundle loaded and registered nothing --
+	//   "loaded without registering \"dsh-deepseek-style-theme\" via __ModuleLoader__.load"
+	// -- which took the whole client half down. It stayed invisible on the
+	// development machine because that profile still installs the scoped package,
+	// whose bundle URL matches the stale literal.
+	id: "dsh-deepseek-style-theme",
 	factory: (require) => {
 		var module = { exports: {} };
 		var exports = module.exports;
@@ -26,7 +36,7 @@ window.__ModuleLoader__.load({
 		// page data — session titles, file paths, workspace names — must go
 		// through `textContent`/`title`/`setAttribute`, never `innerHTML`. An
 		// interpolated value there would be DOM XSS.
-		const PLUGIN_ID = "@dsh-external/dsh-deepseek-style-theme";
+		const PLUGIN_ID = "dsh-deepseek-style-theme";
 
 		// ─── fluid background + liquid-glass refraction ───────────────────────
 		// Ported from dsh-theme-mineradio v2.3.8 (MIT, Copyright (c) 2026 John Wu).
@@ -632,7 +642,40 @@ void main() {
 		var TALL_FILTER_ID = "dshome-glass-dispersion-tall";
 		var TALL_TINT_ID = "dshome-glass-dispersion-tall-tint";
 		var TALL_REFRACT_ID = "dshome-glass-dispersion-tall-refract";
-		var ATTR = "data-dshome-dispersion";
+		// Two composer filters: `narrow` (an 8px band) and `wide` (16px).
+		//
+		// The band is sized by what the user can actually SEE, which is the top and
+		// bottom edges: the card's top abuts the 任务 bar and its bottom abuts the
+		// status line, so displacing the backdrop across those hard edges shows,
+		// while left and right sit over a continuous background where the same
+		// displacement changes nothing. The user accepted that asymmetry ("允许左右
+		// 无反射"), so these maps are tuned for the VERTICAL band and the horizontal
+		// one is left wherever it lands.
+		//
+		// Vertical band on screen = (edge + softness) / mapHeight * 1.56 * cardHeight
+		// -- the filter region is 156% of the surface's height (see filterMarkup) --
+		// so at the upstream 400x92 aspect and a 112px-tall card that is 1.90x the
+		// map inset: 1.7 + 2.5 gives 8px, 3.4 + 5 gives 16px.
+		var COMPOSER_FILTER_ID = "dshome-glass-dispersion-composer";
+		var COMPOSER_TINT_ID = "dshome-glass-dispersion-composer-tint";
+		var COMPOSER_REFRACT_ID = "dshome-glass-dispersion-composer-refract";
+		var WIDE_FILTER_ID = "dshome-glass-dispersion-composer-wide";
+		var WIDE_TINT_ID = "dshome-glass-dispersion-composer-wide-tint";
+		var WIDE_REFRACT_ID = "dshome-glass-dispersion-composer-wide-refract";
+		var COMPOSER_MAP_W = 400;
+		var COMPOSER_MAP_H = 92;
+		var COMPOSER_MAP_RADIUS = 50;
+		var COMPOSER_MAP_EDGE = 1.7;
+		var COMPOSER_MAP_SOFTNESS = 2.5;
+		var COMPOSER_WIDE_EDGE = 3.4;
+		var COMPOSER_WIDE_SOFTNESS = 5;
+		// Chromatic aberration, composer filters only. 0.18 splits the base
+		// displacement into three: red at 118%, blue at 82%, green in the middle,
+		// which is what makes a lens edge fringe instead of merely tinting. Kept to
+		// the two composer filters because it triples the displacement passes, and
+		// because the shared filters have to keep upstream's exact shape for the
+		// frosted recipe.
+		var COMPOSER_ABERRATION = 0.18;
 		var DEFAULT_REF_SCALE = 60;
 		// The liquid recipe drives the same feDisplacementMap harder: at 60 the
 		// bend is there but only just legible once the blur sits on top of it, and
@@ -644,15 +687,20 @@ void main() {
 		var TINT_SAT = 0.85;
 		var TINT_LIGHT = 0.6;
 		var DEFAULT_TINT_HUE = 44;
-		function buildDisplacementMapDataUrl(width = 400, height = 92, radius = 50) {
+		// Upstream derives the inset from the map's SHORT side (7% of it, halved),
+		// which is only uniform if the map is square. The composer passes `edge`
+		// instead: one absolute inset for both axes, which comes out uniform as
+		// long as the map's aspect matches the filter region's (see COMPOSER_MAP_*).
+		// Defaults reproduce upstream's numbers exactly, so the frosted recipe's
+		// map stays byte for byte what it was.
+		function buildDisplacementMapDataUrl(width = 400, height = 92, radius = 50, edge = null, softness = 11) {
 			const w = Math.max(240, Math.round(width));
 			const h = Math.max(48, Math.round(height));
 			const r = Math.max(12, Math.round(radius));
-			const borderWidth = 0.07;
-			const edge = Math.min(w, h) * (borderWidth * 0.5);
-			const innerW = Math.max(1, w - edge * 2);
-			const innerH = Math.max(1, h - edge * 2);
-			const svg2 = `<svg viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="glass-x" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#f00"/></linearGradient><linearGradient id="glass-y" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#00f"/></linearGradient></defs><rect x="0" y="0" width="${w}" height="${h}" fill="#000"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-x)"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-y)" style="mix-blend-mode:screen"/><rect x="${edge.toFixed(2)}" y="${edge.toFixed(2)}" width="${innerW.toFixed(2)}" height="${innerH.toFixed(2)}" rx="${r}" fill="hsl(0 0% 50% / 1)" style="filter:blur(11px)"/></svg>`;
+			const inset = edge === null ? Math.min(w, h) * 0.035 : Math.max(0, edge);
+			const innerW = Math.max(1, w - inset * 2);
+			const innerH = Math.max(1, h - inset * 2);
+			const svg2 = `<svg viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="glass-x" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#f00"/></linearGradient><linearGradient id="glass-y" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#000"/><stop offset="100%" stop-color="#00f"/></linearGradient></defs><rect x="0" y="0" width="${w}" height="${h}" fill="#000"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-x)"/><rect x="0" y="0" width="${w}" height="${h}" rx="${r}" fill="url(#glass-y)" style="mix-blend-mode:screen"/><rect x="${inset.toFixed(2)}" y="${inset.toFixed(2)}" width="${innerW.toFixed(2)}" height="${innerH.toFixed(2)}" rx="${r}" fill="hsl(0 0% 50% / 1)" style="filter:blur(${softness})"/></svg>`;
 			return `data:image/svg+xml,${encodeURIComponent(svg2)}`;
 		}
 		// Inlined from upstream `src/client/glass-dispersion.ts` (line 2409) —
@@ -693,8 +741,29 @@ void main() {
 		}
 		// Inlined from upstream `src/client/glass-dispersion.ts` (line 2443) —
 		// builds the wide/tall SVG <filter> pair startGlassDispersion injects.
-		function filterMarkup(id, refractId, tintId, map) {
-			return `<filter id="${id}" color-interpolation-filters="sRGB" x="-12%" y="-28%" width="124%" height="156%"><feImage href="${map}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map"></feImage><feDisplacementMap id="${refractId}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refracted"></feDisplacementMap><feOffset in="refracted" dx="${EDGE_DX}" dy="0" result="shifted"></feOffset><feBlend in="shifted" in2="refracted" mode="difference" result="edgeDiff"></feBlend><feColorMatrix id="${tintId}" in="edgeDiff" type="matrix" values="${tintMatrix(DEFAULT_TINT_HUE, TINT_OPACITY)}" result="edgeTint"></feColorMatrix><feBlend in="refracted" in2="edgeTint" mode="screen" result="output"></feBlend><feGaussianBlur in="output" stdDeviation="0.5"></feGaussianBlur></filter>`;
+		//
+		// `aberration` (0 = off, upstream's shape byte for byte) adds true
+		// chromatic aberration: the backdrop is displaced TWICE MORE at slightly
+		// different scales, and the result is assembled channel by channel -- R
+		// from the stronger displacement, B from the weaker, G from the base. That
+		// is what puts a red/blue fringe on a real lens edge; the tinted
+		// difference-blend below is only a colour wash and does not separate
+		// channels at all.
+		//
+		// The two extra maps carry a data-aberration factor so setRefraction() can
+		// rescale them in step with the base one instead of flattening all three
+		// to the same value.
+		function filterMarkup(id, refractId, tintId, map, aberration = 0) {
+			const chromatic = aberration <= 0 ? '' :
+				`<feDisplacementMap data-aberration="${(1 + aberration).toFixed(3)}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refractR"></feDisplacementMap>` +
+				`<feDisplacementMap data-aberration="${(1 - aberration).toFixed(3)}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refractB"></feDisplacementMap>` +
+				`<feColorMatrix in="refracted" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="onlyG"></feColorMatrix>` +
+				`<feColorMatrix in="refractR" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="onlyR"></feColorMatrix>` +
+				`<feColorMatrix in="refractB" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="onlyB"></feColorMatrix>` +
+				`<feBlend in="onlyG" in2="onlyR" mode="screen" result="rgMerge"></feBlend>` +
+				`<feBlend in="rgMerge" in2="onlyB" mode="screen" result="aberrated"></feBlend>`;
+			const merged = chromatic === '' ? 'refracted' : 'aberrated';
+			return `<filter id="${id}" color-interpolation-filters="sRGB" x="-12%" y="-28%" width="124%" height="156%"><feImage href="${map}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map"></feImage><feDisplacementMap id="${refractId}" in="SourceGraphic" in2="map" scale="${DEFAULT_REF_SCALE}" xChannelSelector="R" yChannelSelector="B" result="refracted"></feDisplacementMap>${chromatic}<feOffset in="${merged}" dx="${EDGE_DX}" dy="0" result="shifted"></feOffset><feBlend in="shifted" in2="${merged}" mode="difference" result="edgeDiff"></feBlend><feColorMatrix id="${tintId}" in="edgeDiff" type="matrix" values="${tintMatrix(DEFAULT_TINT_HUE, TINT_OPACITY)}" result="edgeTint"></feColorMatrix><feBlend in="${merged}" in2="edgeTint" mode="screen" result="output"></feBlend><feGaussianBlur in="output" stdDeviation="0.5"></feGaussianBlur></filter>`;
 		}
 		/**
 		 * Mount the two SVG backdrop filters and set `ATTR` on <html> so the
@@ -721,7 +790,9 @@ void main() {
 			}
 			const mapWide = buildDisplacementMapDataUrl(400, 92, 50);
 			const mapTall = buildDisplacementMapDataUrl(92, 400, 50);
-			const markup = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute;overflow:hidden"><defs>` + filterMarkup(FILTER_ID, REFRACT_ID, TINT_ID, mapWide) + filterMarkup(TALL_FILTER_ID, TALL_REFRACT_ID, TALL_TINT_ID, mapTall) + `</defs></svg>`;
+			const mapComposer = buildDisplacementMapDataUrl(COMPOSER_MAP_W, COMPOSER_MAP_H, COMPOSER_MAP_RADIUS, COMPOSER_MAP_EDGE, COMPOSER_MAP_SOFTNESS);
+			const mapComposerWide = buildDisplacementMapDataUrl(COMPOSER_MAP_W, COMPOSER_MAP_H, COMPOSER_MAP_RADIUS, COMPOSER_WIDE_EDGE, COMPOSER_WIDE_SOFTNESS);
+			const markup = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute;overflow:hidden"><defs>` + filterMarkup(FILTER_ID, REFRACT_ID, TINT_ID, mapWide) + filterMarkup(TALL_FILTER_ID, TALL_REFRACT_ID, TALL_TINT_ID, mapTall) + filterMarkup(COMPOSER_FILTER_ID, COMPOSER_REFRACT_ID, COMPOSER_TINT_ID, mapComposer, COMPOSER_ABERRATION) + filterMarkup(WIDE_FILTER_ID, WIDE_REFRACT_ID, WIDE_TINT_ID, mapComposerWide, COMPOSER_ABERRATION) + `</defs></svg>`;
 			const container = document.createElement("div");
 			container.setAttribute("aria-hidden", "true");
 			container.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;";
@@ -736,8 +807,15 @@ void main() {
 					tint.forEach((node) => node.setAttribute("values", values));
 				},
 				setRefraction(scale) {
-					const next = String(Math.max(0, Math.min(140, Number(scale) || 0)));
-					refract.forEach((node) => node.setAttribute("scale", next));
+					// The aberration maps are the same displacement at a slightly
+					// different scale, so they carry a factor and are rescaled in step;
+					// flattening them all to one value would erase the fringing.
+					const base = Math.max(0, Math.min(140, Number(scale) || 0));
+					refract.forEach((node) => {
+						const factor = Number(node.getAttribute("data-aberration"));
+						const value = Number.isFinite(factor) && factor > 0 ? base * factor : base;
+						node.setAttribute("scale", String(Math.max(0, Math.min(140, value))));
+					});
 				},
 				dispose() {
 					root.removeAttribute(ATTR);
@@ -1343,7 +1421,15 @@ html[data-dshome-dispersion] .VOzbGW_panel{
 		// agent is already working is `"steering"`. Measured on the current build,
 		// a transcript can contain ONLY steering bubbles — anchoring the selector
 		// on "user" alone silently skipped every bubble on the page.
-		const LIQUID_BUBBLE = ':is([data-chat-flow-kind="user"],[data-chat-flow-kind="steering"]) [class*="bubble" i]';
+		//
+		// The second half covers the gap the user hit: a message typed while the
+		// agent is still working is painted in the transcript BEFORE it is picked
+		// up, and at that moment it sits outside any flow-kind container, so the
+		// two anchored selectors miss it and it renders unglazed until the turn
+		// consumes it. Rather than enumerate the container it lands in, this side
+		// takes any bubble that is NOT part of an assistant step — which is the
+		// only place a bubble must not be glassed.
+		const LIQUID_BUBBLE = ':is([data-chat-flow-kind="user"],[data-chat-flow-kind="steering"]) [class*="bubble" i],[class*="bubble" i]:not([data-chat-flow-kind="assistant-step"] *)';
 		const LIQUID_CSS = `
 @property --dshome-liquid-sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
 @keyframes dshome-liquid-sweep{from{--dshome-liquid-sweep:0deg}to{--dshome-liquid-sweep:360deg}}
@@ -1362,6 +1448,13 @@ html[data-dshome-glass="liquid"]{
      than everything else on purpose: at the shared 11px the flow behind it stays
      legible and the pane never separates from the transcript. */
   --dshome-liquid-blur-sidebar:24px;
+  /* The composer blurs less than the rest on purpose. Filters in a backdrop
+     chain apply left to right, so url(refract) followed by blur(N) blurs the
+     refraction AFTER it happens: a band narrower than about the blur radius is
+     simply erased. At 11px the purpose-built ~4px band was invisible, which is
+     exactly what was reported. 8px lets a ~10px band read while still frosting
+     the backdrop. */
+  --dshome-liquid-blur-composer:8px;
   /* One extra veil on top of the sidebar's glass. The pane sits over the fluid
      at roughly the same tone as the conversation it borders, so without this
      lift the two read as one surface. It is white in light mode. */
@@ -1424,6 +1517,25 @@ html[data-dshome-glass="liquid"] [data-composer-card]::after{
   background-image:none!important;
   box-shadow:none!important;
 }
+/* The frosted recipe gives the composer a brand-tinted conic ring, painted by
+   the patch block at inset:-1px and spun by dsh-border-spin. Under liquid the
+   user asked for it to go: it sits one pixel OUTSIDE the card's own 1.5px white
+   border, so the pair reads as a coloured line with a white line outside it, and
+   two competing edges is what liquid glass is not. content:none removes the
+   pseudo-element outright rather than painting it transparent. */
+html[data-dshome-glass="liquid"] body [data-composer-card]::before{
+  content:none!important;
+  background:none!important;
+  animation:none!important;
+}
+/* With the ring gone the card's own 1.5px white border is the only edge left,
+   and on its own it reads as a flat white outline rather than as glass — which
+   is what the user saw next. Liquid's edge is the inset hairline plus the
+   refraction, so the border goes transparent. The WIDTH stays: removing it
+   would resize the box and shift every control inside by 3px. */
+html[data-dshome-glass="liquid"] body [data-composer-card]{
+  border-color:transparent!important;
+}
 /* The sidebar pane carries its own fill and its own shape: rounded only on the
    edge that faces the conversation, so it reads as a panel clipped to the
    window rather than as a full-bleed column. The hairline ring in the shared
@@ -1462,9 +1574,14 @@ html[data-dshome-glass="liquid"] body .hHd-Xa_root::after{
 }
 /* The travelling edge highlight. mask-composite:exclude turns the filled
    conic gradient into a 1px perimeter band; padding:1px on the pseudo-element
-   sets that band's width without touching the product's box model. */
-html[data-dshome-glass="liquid"] .hHd-Xa_root::after,
-html[data-dshome-glass="liquid"] ${LIQUID_BUBBLE}::after{
+   sets that band's width without touching the product's box model.
+   It is drawn on the SIDEBAR ONLY. The user asked for it off the composer and
+   off the message bubbles under liquid: on a small pill the band reads as a
+   bright white outline rather than as light travelling a glass edge, and on the
+   composer it doubled up with the card's own border. The bubbles and the
+   composer keep liquid's other three marks — the translucent fill, the sheen
+   and the refraction. */
+html[data-dshome-glass="liquid"] .hHd-Xa_root::after{
   content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
   padding:1px;
   background:conic-gradient(from var(--dshome-liquid-sweep),
@@ -1477,12 +1594,31 @@ html[data-dshome-glass="liquid"] ${LIQUID_BUBBLE}::after{
   mask-composite:exclude;
   animation:dshome-liquid-sweep 6.5s linear infinite;
 }
-html[data-dshome-dispersion][data-dshome-glass="liquid"] body [data-composer-card],
+/* The composer's edge refraction. Three states, selected by the durable
+   composerRefraction setting (see html[data-dshome-composer]):
+     narrow (default) -- an 8px band top and bottom
+     wide             -- a 16px band top and bottom
+     off              -- no dispersion at all
+   Left and right are left as they fall: the band is there, but over a
+   continuous background a horizontal displacement has nothing to show, which
+   the user accepted. */
 html[data-dshome-dispersion][data-dshome-glass="liquid"] body .wSkVaW_header:hover::before,
 html[data-dshome-dispersion][data-dshome-glass="liquid"] body ${LIQUID_BUBBLE}{
   -webkit-backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate))!important;
   backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur)) saturate(var(--dshome-liquid-saturate))!important;
 }
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="narrow"] body [data-composer-card]{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion-composer) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion-composer) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="wide"] body [data-composer-card]{
+  -webkit-backdrop-filter:url(#dshome-glass-dispersion-composer-wide) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:url(#dshome-glass-dispersion-composer-wide) blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
+html[data-dshome-dispersion][data-dshome-glass="liquid"][data-dshome-composer="off"] body [data-composer-card]{
+  -webkit-backdrop-filter:blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+  backdrop-filter:blur(var(--dshome-liquid-blur-composer)) saturate(var(--dshome-liquid-saturate))!important;
+}
 /* The workspace list is faded out at its bottom by a gradient whose end stop is
    the sidebar-fill token — an OPAQUE colour matched to the product's own sidebar
    background. Over a translucent glass pane that stop no longer matches what is
@@ -1504,8 +1640,7 @@ html[data-dshome-dispersion][data-dshome-glass="liquid"] body .hHd-Xa_root::befo
   backdrop-filter:url(#dshome-glass-dispersion) blur(var(--dshome-liquid-blur-sidebar)) saturate(var(--dshome-liquid-saturate))!important;
 }
 @media (prefers-reduced-motion:reduce){
-  html[data-dshome-glass="liquid"] .hHd-Xa_root::after,
-  html[data-dshome-glass="liquid"] ${LIQUID_BUBBLE}::after{
+  html[data-dshome-glass="liquid"] .hHd-Xa_root::after{
     animation:none;
   }
 }
@@ -1577,12 +1712,17 @@ html[data-dshome-dispersion][data-dshome-glass="liquid"] body .hHd-Xa_root::befo
 		function createDarkSync(ctx, theme) {
 			const apply = () => {
 				let dark = false;
-				// The product's own attribute is authoritative when it is there: it
-				// is the same signal its `--dsw-alias-*` tokens are keyed on, and the
-				// page background is painted from this marker, so the two must not be
-				// allowed to drift apart.
-				if (document.body.hasAttribute('data-ds-dark-theme')) dark = true;
-				if (!dark && theme !== undefined && theme !== null && typeof theme.getTheme === 'function') {
+				// Two signals, and BOTH of them lie in some state -- measured, not
+				// assumed:
+				//   * the theme service reported `light` while the page was in dark
+				//     mode, so treating it as the only source painted a dark page light;
+				//   * `data-ds-dark-theme` was still on <body> after a switch back to
+				//     light, so treating IT as authoritative painted a light page dark.
+				// This is the precedence that shipped through 1.43.1 and behaved in both
+				// modes: ask the service first, and let the product's own attribute
+				// override a "not dark" answer. Keep it, and sanity-check the signal
+				// before touching it again.
+				if (theme !== undefined && theme !== null && typeof theme.getTheme === 'function') {
 					try {
 						const snap = theme.getTheme();
 						dark = snap !== undefined && snap !== null &&
@@ -1592,6 +1732,7 @@ html[data-dshome-dispersion][data-dshome-glass="liquid"] body .hHd-Xa_root::befo
 						dark = false;
 					}
 				}
+				if (!dark) dark = document.body.hasAttribute('data-ds-dark-theme');
 				if (dark) document.body.setAttribute('data-dshome-dark', '');
 				else document.body.removeAttribute('data-dshome-dark');
 			};
@@ -1629,12 +1770,14 @@ html[data-dshome-dispersion][data-dshome-glass="liquid"] body .hHd-Xa_root::befo
 			const root = document.documentElement;
 			const apply = () => {
 				root.setAttribute('data-dshome-glass', dsttGetGlass());
+				root.setAttribute('data-dshome-composer', dsttGetComposer());
 			};
 			apply();
 			const unsubscribe = dsttSubscribe(apply);
 			return () => {
 				unsubscribe();
 				root.removeAttribute('data-dshome-glass');
+				root.removeAttribute('data-dshome-composer');
 			};
 		}
 
@@ -3258,6 +3401,18 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 			liquid: { zh: "液态", en: "Liquid" },
 			frosted: { zh: "白磨砂", en: "Frosted" }
 		};
+		// How wide the composer's edge refraction is under liquid, measured on the
+		// top and bottom edges -- the only two where a displacement has anything to
+		// show. The stylesheet gates the three states on <html data-dshome-composer>.
+		// `origin` was this option's first id and is still accepted from a settings
+		// file written before the rename; it reads back as `wide`.
+		const DSTT_COMPOSER = ["narrow", "wide", "off"];
+		const DSTT_COMPOSER_DEFAULT = "narrow";
+		const DSTT_COMPOSER_LABELS = {
+			narrow: { zh: "窄 8px", en: "Narrow 8px" },
+			wide: { zh: "宽 16px", en: "Wide 16px" },
+			off: { zh: "无", en: "Off" }
+		};
 
 		/**
 		* Shared in-memory mirror of the durable DSTT mode. The settings domain's
@@ -3265,21 +3420,66 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 		* plugin's own loopback channel instead; every reader (the color driver,
 		* the settings tab) subscribes to this mirror.
 		*/
-		const dsttState = { mode: "peakvalley-redblue", fluidBrush: false, glassStyle: DSTT_GLASS_DEFAULT, listeners: new Set() };
+		const dsttState = { mode: "peakvalley-redblue", fluidBrush: false, glassStyle: DSTT_GLASS_DEFAULT, composer: DSTT_COMPOSER_DEFAULT, listeners: new Set() };
+		// Fields the user has chosen in this session. A host half that predates a
+		// field ignores it and answers without it -- or with its own default -- so
+		// without this a fresh choice gets overwritten by the next sync and the
+		// option appears to snap straight back to its default.
+		const dsttTouched = new Set();
 		const dsttGetMode = () => dsttState.mode;
 		const dsttGetGlass = () => (DSTT_GLASS_STYLES.includes(dsttState.glassStyle) ? dsttState.glassStyle : DSTT_GLASS_DEFAULT);
-		/** Persist the glass recipe through the bridge; resolves with success. */
+		const dsttGetComposer = () => {
+			if (dsttState.composer === "origin") return "wide";
+			return DSTT_COMPOSER.includes(dsttState.composer) ? dsttState.composer : DSTT_COMPOSER_DEFAULT;
+		};
+		/**
+		* Persist the composer's refraction width through the bridge.
+		*
+		* Applied locally FIRST, before the round trip. Both this and glassStyle
+		* only flip a CSS attribute, so the choice is fully usable the moment it is
+		* made — and it has to be, because a running dsh keeps the host half it
+		* booted with: until `dsh web` is restarted, `dstt.mode.set` ignores fields
+		* it does not know and answers without them, which used to make a brand new
+		* setting look broken. The cost of applying first is that a choice made
+		* against a stale host is not persisted and reverts on reload, so the
+		* return value still reports the truth.
+		*/
+		async function dsttSetComposer(ctx, next) {
+			if (!DSTT_COMPOSER.includes(next)) return false;
+			dsttState.composer = next;
+			dsttTouched.add("composer");
+			dsttNotify();
+			try {
+				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, composerRefraction: next });
+				// The response is used ONLY to confirm. It must never be written back
+				// into the mirror: a host that accepts the call but does not store the
+				// field answers with its own value (the default, `narrow`), and copying
+				// that in is what made the option snap straight back the moment the
+				// round trip landed.
+				if (result !== undefined && result !== null && result.ok === true && DSTT_COMPOSER.includes(result.value.composerRefraction)) {
+					return result.value.composerRefraction === next;
+				}
+			} catch (error) {
+				// Fall through: the local choice stands, it just was not stored.
+			}
+			return false;
+		}
+		/** Persist the glass recipe through the bridge; resolves with success.
+		 * Applied locally first for the same reason as dsttSetComposer above. */
 		async function dsttSetGlass(ctx, next) {
 			if (!DSTT_GLASS_STYLES.includes(next)) return false;
+			dsttState.glassStyle = next;
+			dsttTouched.add("glassStyle");
+			dsttNotify();
 			try {
 				const result = await bridgeCall(DSTT_SET, { mode: dsttState.mode, glassStyle: next });
+				// Confirmation only -- see dsttSetComposer for why the host's echo must
+				// not be copied back into the mirror.
 				if (result !== undefined && result !== null && result.ok === true && DSTT_GLASS_STYLES.includes(result.value.glassStyle)) {
-					dsttState.glassStyle = result.value.glassStyle;
-					dsttNotify();
-					return true;
+					return result.value.glassStyle === next;
 				}
 			} catch (error) {
-				// Fall through to the caller's failure handling.
+				// Fall through: the local choice stands, it just was not stored.
 			}
 			return false;
 		}
@@ -3335,8 +3535,12 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 					dsttState.mode = result.value.mode;
 					dsttState.fluidBrush = result.value.fluidBrush === true;
 					// An older host half answers without a glass recipe: keep the
-					// default rather than clearing the attribute to nothing.
-					if (DSTT_GLASS_STYLES.includes(result.value.glassStyle)) dsttState.glassStyle = result.value.glassStyle;
+					// default rather than clearing the attribute to nothing. And a
+					// field the user has already chosen this session is never taken
+					// back from the host -- a stale host answers with its own default,
+					// which is what made a fresh choice look like it snapped back.
+					if (!dsttTouched.has("glassStyle") && DSTT_GLASS_STYLES.includes(result.value.glassStyle)) dsttState.glassStyle = result.value.glassStyle;
+					if (!dsttTouched.has("composer") && DSTT_COMPOSER.includes(result.value.composerRefraction)) dsttState.composer = result.value.composerRefraction;
 					dsttNotify();
 				}
 			} catch (error) {}
@@ -3592,6 +3796,11 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 				if (dstt === undefined || typeof dstt.setGlass !== 'function' || next === glassNow) return;
 				dstt.setGlass(next);
 			};
+			const composerNow = dstt !== undefined && typeof dstt.composer === 'function' ? dstt.composer() : DSTT_COMPOSER_DEFAULT;
+			const pickComposer = (next) => {
+				if (dstt === undefined || typeof dstt.setComposer !== 'function' || next === composerNow) return;
+				dstt.setComposer(next);
+			};
 
 			return React.createElement('div', { className: 'dshome-dstt' },
 				React.createElement('h3', null,
@@ -3643,6 +3852,21 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 							className: 'dshome-dstt-seg-btn' + (glassNow === style ? ' dshome-on' : ''),
 							onClick: () => pickGlass(style)
 						}, isZh ? DSTT_GLASS_LABELS[style].zh : DSTT_GLASS_LABELS[style].en)))),
+				React.createElement('div', { className: 'dshome-dstt-row' },
+					React.createElement('div', { className: 'dshome-dstt-row-body' },
+						React.createElement('div', { className: 'dshome-dstt-row-title' }, isZh ? '对话框边缘倒影' : 'Composer edge reflection'),
+						React.createElement('div', { className: 'dshome-dstt-row-hint' }, isZh
+							? '液态下对话框边缘的折射带宽（按上下量——左右背后是连续背景，同样的位移看不出变化）。窄 8px（默认）/ 宽 16px / 无，三者都是专为这张卡片做的位移图。'
+							: 'Width of the lens band at the composer edge under liquid, measured top and bottom — left and right sit over a continuous backdrop where the same displacement shows nothing. Narrow 8px (default) / Wide 16px / Off; each is a map built for this card.')),
+					React.createElement('div', { className: 'dshome-dstt-seg', role: 'radiogroup', 'aria-label': isZh ? '对话框边缘倒影' : 'Composer edge reflection' },
+						DSTT_COMPOSER.map((choice) => React.createElement('button', {
+							key: choice,
+							type: 'button',
+							role: 'radio',
+							'aria-checked': composerNow === choice,
+							className: 'dshome-dstt-seg-btn' + (composerNow === choice ? ' dshome-on' : ''),
+							onClick: () => pickComposer(choice)
+						}, isZh ? DSTT_COMPOSER_LABELS[choice].zh : DSTT_COMPOSER_LABELS[choice].en)))),
 				React.createElement('div', { className: 'dshome-dstt-status', 'data-peak': timeSliced && peakNow },
 					'当前：' + colorName + ' · ' + status));
 		}
@@ -3760,6 +3984,8 @@ body[data-dshome-dark] .${CLS}{background:rgba(14,30,60,.94);box-shadow:0 18px 4
 							setBrush: (next) => dsttSetBrush(ctx, next),
 							glass: dsttGetGlass,
 							setGlass: (next) => dsttSetGlass(ctx, next),
+							composer: dsttGetComposer,
+							setComposer: (next) => dsttSetComposer(ctx, next),
 							subscribe: dsttSubscribe
 						},
 						locale: ctx.get('locale')