dsh-cool-theme 0.6.1 → 0.7.0

package/lib/client.js

@@ -28,6 +28,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		let react = require("react");
 		react = __toESM(react, 1);
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		//#region src/contract.ts
 		/**
 		* Shared contract for dsh-cool-theme.
@@ -39,6 +40,7 @@ window.__ModuleLoader__.load({
 		const CUSTOM_LIST_STORAGE_KEY = "cool-theme-custom-list";
 		const CUSTOM_ACTIVE_STORAGE_KEY = "cool-theme-custom-active";
 		const CUSTOM_MIGRATED_STORAGE_KEY = "cool-theme-custom-migrated";
+		const SIDEBAR_TRANSPARENT_STORAGE_KEY = "cool-theme-sidebar-transparent";
 		const THEME_API_PATH_THEMES = `/cool-theme/api/themes`;
 		const THEME_ARCHIVE_EXTENSION = ".zip";
 		/**
@@ -2301,6 +2303,432 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			};
 		}
 		//#endregion
+		//#region node_modules/.pnpm/react-colorful@5.8.1_react-dom@19.3.0_react@18.3.1__react@18.3.1/node_modules/react-colorful/dist/index.mjs
+		function l() {
+			return (l = Object.assign || function(e) {
+				for (var r = 1; r < arguments.length; r++) {
+					var n = arguments[r];
+					for (var t in n) Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+				}
+				return e;
+			}).apply(this, arguments);
+		}
+		function c(e, r) {
+			if (null == e) return {};
+			var n, t, o = {}, a = Object.keys(e);
+			for (t = 0; t < a.length; t++) r.indexOf(n = a[t]) >= 0 || (o[n] = e[n]);
+			return o;
+		}
+		function i(e) {
+			var n = (0, react.useRef)(e), t = (0, react.useRef)(function(e) {
+				n.current && n.current(e);
+			});
+			return n.current = e, t.current;
+		}
+		var s = function(e, r, n) {
+			return void 0 === r && (r = 0), void 0 === n && (n = 1), e > n ? n : e < r ? r : e;
+		};
+		var f = function(e) {
+			return "touches" in e;
+		};
+		var d = function(e) {
+			return e && e.ownerDocument.defaultView || self;
+		};
+		var v = function(e, r, n) {
+			var t = e.getBoundingClientRect(), o = f(r) ? function(e, r) {
+				for (var n = 0; n < e.length; n++) if (e[n].identifier === r) return e[n];
+				return e[0];
+			}(r.touches, n) : r;
+			return {
+				left: s((o.pageX - (t.left + d(e).pageXOffset)) / t.width),
+				top: s((o.pageY - (t.top + d(e).pageYOffset)) / t.height)
+			};
+		};
+		var h = function(e) {
+			!f(e) && e.preventDefault();
+		};
+		var g = react.default.memo(function(o) {
+			var a = o.onMove, u = o.onKey, s = o.onEnd, g = c(o, [
+				"onMove",
+				"onKey",
+				"onEnd"
+			]), m = (0, react.useRef)(null), p = i(a), b = i(u), _ = i(s), E = (0, react.useRef)(null), C = (0, react.useRef)(!1), x = (0, react.useMemo)(function() {
+				var e = function(e) {
+					h(e), (f(e) ? e.touches.length > 0 : e.buttons > 0) && m.current ? p(v(m.current, e, E.current)) : (n(!1), _());
+				}, r = function() {
+					n(!1), _();
+				};
+				function n(n) {
+					var t = C.current, o = d(m.current), a = n ? o.addEventListener : o.removeEventListener;
+					a(t ? "touchmove" : "mousemove", e), a(t ? "touchend" : "mouseup", r);
+				}
+				return [
+					function(e) {
+						var r = e.nativeEvent, t = m.current;
+						if (t && (h(r), !function(e, r) {
+							return r && !f(e);
+						}(r, C.current) && t)) {
+							if (f(r)) {
+								C.current = !0;
+								var o = r.changedTouches || [];
+								o.length && (E.current = o[0].identifier);
+							}
+							t.focus(), p(v(t, r, E.current)), n(!0);
+						}
+					},
+					function(e) {
+						var r = e.which || e.keyCode;
+						r < 37 || r > 40 || (e.preventDefault(), b({
+							left: 39 === r ? .05 : 37 === r ? -.05 : 0,
+							top: 40 === r ? .05 : 38 === r ? -.05 : 0
+						}));
+					},
+					function(e) {
+						var r = e.which || e.keyCode;
+						r >= 37 && r <= 40 && _();
+					},
+					n
+				];
+			}, [
+				b,
+				p,
+				_
+			]), H = x[0], M = x[1], N = x[2], w = x[3];
+			return (0, react.useEffect)(function() {
+				return w;
+			}, [w]), react.default.createElement("div", l({}, g, {
+				onTouchStart: H,
+				onMouseDown: H,
+				className: "react-colorful__interactive",
+				ref: m,
+				onKeyDown: M,
+				onKeyUp: N,
+				tabIndex: 0,
+				role: "slider"
+			}));
+		});
+		var m = function(e) {
+			return e.filter(Boolean).join(" ");
+		};
+		var p = function(r) {
+			var n = r.color, t = r.left, o = r.top, a = void 0 === o ? .5 : o, u = m(["react-colorful__pointer", r.className]);
+			return react.default.createElement("div", {
+				className: u,
+				style: {
+					top: 100 * a + "%",
+					left: 100 * t + "%"
+				}
+			}, react.default.createElement("div", {
+				className: "react-colorful__pointer-fill",
+				style: { backgroundColor: n }
+			}));
+		};
+		var b = function(e, r, n) {
+			return void 0 === r && (r = 0), void 0 === n && (n = Math.pow(10, r)), Math.round(n * e) / n;
+		};
+		360 / (2 * Math.PI);
+		var E = function(e) {
+			return L(C(e));
+		};
+		var C = function(e) {
+			return "#" === e[0] && (e = e.substring(1)), e.length < 6 ? {
+				r: parseInt(e[0] + e[0], 16),
+				g: parseInt(e[1] + e[1], 16),
+				b: parseInt(e[2] + e[2], 16),
+				a: 4 === e.length ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+			} : {
+				r: parseInt(e.substring(0, 2), 16),
+				g: parseInt(e.substring(2, 4), 16),
+				b: parseInt(e.substring(4, 6), 16),
+				a: 8 === e.length ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+			};
+		};
+		var w = function(e) {
+			return B(I(e));
+		};
+		var y = function(e) {
+			var r = e.s, n = e.v, t = e.a, o = (200 - r) * n / 100;
+			return {
+				h: b(e.h),
+				s: b(o > 0 && o < 200 ? r * n / 100 / (o <= 100 ? o : 200 - o) * 100 : 0),
+				l: b(o / 2),
+				a: b(t, 2)
+			};
+		};
+		var k = function(e) {
+			var r = y(e);
+			return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
+		};
+		var I = function(e) {
+			var r = e.h, n = e.s, t = e.v, o = e.a;
+			r = r / 360 * 6, n /= 100, t /= 100;
+			var a = Math.floor(r), u = t * (1 - n), l = t * (1 - (r - a) * n), c = t * (1 - (1 - r + a) * n), i = a % 6;
+			return {
+				r: b(255 * [
+					t,
+					l,
+					u,
+					u,
+					c,
+					t
+				][i]),
+				g: b(255 * [
+					c,
+					t,
+					t,
+					l,
+					u,
+					u
+				][i]),
+				b: b(255 * [
+					u,
+					u,
+					c,
+					t,
+					t,
+					l
+				][i]),
+				a: b(o, 2)
+			};
+		};
+		var K = function(e) {
+			var r = e.toString(16);
+			return r.length < 2 ? "0" + r : r;
+		};
+		var B = function(e) {
+			var r = e.r, n = e.g, t = e.b, o = e.a, a = o < 1 ? K(b(255 * o)) : "";
+			return "#" + K(r) + K(n) + K(t) + a;
+		};
+		var L = function(e) {
+			var r = e.r, n = e.g, t = e.b, o = e.a, a = Math.max(r, n, t), u = a - Math.min(r, n, t), l = u ? a === r ? (n - t) / u : a === n ? 2 + (t - r) / u : 4 + (r - n) / u : 0;
+			return {
+				h: 60 * (l < 0 ? l + 6 : l),
+				s: a ? u / a * 100 : 0,
+				v: a / 255 * 100,
+				a: o
+			};
+		};
+		var R = react.default.memo(function(r) {
+			var n = r.hue, t = r.onChange, o = r.onChangeEnd, a = m(["react-colorful__hue", r.className]);
+			return react.default.createElement("div", { className: a }, react.default.createElement(g, {
+				onMove: function(e) {
+					t({ h: 360 * e.left });
+				},
+				onKey: function(e) {
+					t({ h: s(n + 360 * e.left, 0, 360) });
+				},
+				onEnd: o,
+				"aria-label": "Hue",
+				"aria-valuenow": b(n),
+				"aria-valuemax": "360",
+				"aria-valuemin": "0"
+			}, react.default.createElement(p, {
+				className: "react-colorful__hue-pointer",
+				left: n / 360,
+				color: k({
+					h: n,
+					s: 100,
+					v: 100,
+					a: 1
+				})
+			})));
+		});
+		var S = react.default.memo(function(r) {
+			var n = r.hsva, t = r.onChange, o = r.onChangeEnd, a = { backgroundColor: k({
+				h: n.h,
+				s: 100,
+				v: 100,
+				a: 1
+			}) };
+			return react.default.createElement("div", {
+				className: "react-colorful__saturation",
+				style: a
+			}, react.default.createElement(g, {
+				onMove: function(e) {
+					t({
+						s: 100 * e.left,
+						v: 100 - 100 * e.top
+					});
+				},
+				onKey: function(e) {
+					t({
+						s: s(n.s + 100 * e.left, 0, 100),
+						v: s(n.v - 100 * e.top, 0, 100)
+					});
+				},
+				onEnd: o,
+				"aria-label": "Color",
+				"aria-valuetext": "Saturation " + b(n.s) + "%, Brightness " + b(n.v) + "%"
+			}, react.default.createElement(p, {
+				className: "react-colorful__saturation-pointer",
+				top: 1 - n.v / 100,
+				left: n.s / 100,
+				color: k(n)
+			})));
+		});
+		var T = function(e, r) {
+			if (e === r) return !0;
+			for (var n in e) if (e[n] !== r[n]) return !1;
+			return !0;
+		};
+		var P = function(e, r) {
+			return e.toLowerCase() === r.toLowerCase() || T(C(e), C(r));
+		};
+		function X(e, n, u, l) {
+			var c = i(u), s = i(l), f = (0, react.useState)(function() {
+				return e.toHsva(n);
+			}), d = f[0], v = f[1], h = (0, react.useRef)({
+				color: n,
+				hsva: d
+			}), g = (0, react.useRef)(!1);
+			(0, react.useEffect)(function() {
+				if (!e.equal(n, h.current.color)) {
+					var r = e.toHsva(n);
+					h.current = {
+						hsva: r,
+						color: n
+					}, v(r), g.current = !1;
+				}
+			}, [n, e]), (0, react.useEffect)(function() {
+				var r;
+				T(d, h.current.hsva) || e.equal(r = e.fromHsva(d), h.current.color) || (h.current = {
+					hsva: d,
+					color: r
+				}, c(r), g.current = !0);
+			}, [
+				d,
+				e,
+				c
+			]);
+			return [
+				d,
+				(0, react.useCallback)(function(e) {
+					v(function(r) {
+						return Object.assign({}, r, e);
+					});
+				}, []),
+				(0, react.useCallback)(function() {
+					g.current && (g.current = !1, s(h.current.color));
+				}, [s])
+			];
+		}
+		var Y;
+		var U = "undefined" != typeof window ? react.useLayoutEffect : react.useEffect;
+		var V = function() {
+			return Y || ("undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0);
+		};
+		var $ = /* @__PURE__ */ new WeakMap();
+		var G = function(e) {
+			U(function() {
+				var r = e.current;
+				if ("undefined" != typeof document && r) {
+					var n = r.getRootNode ? r.getRootNode() : r.ownerDocument, t = n && ("head" in n || "host" in n) ? n : r.ownerDocument;
+					if (!$.has(t)) {
+						var o = "head" in t ? t.head : t, a = (o.ownerDocument || document).createElement("style");
+						a.innerHTML = ".react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}";
+						var u = V();
+						u && a.setAttribute("nonce", u), $.set(t, a), o.appendChild(a);
+					}
+				}
+			}, []);
+		};
+		var J = function(n) {
+			var t = n.className, o = n.colorModel, a = n.color, u = void 0 === a ? o.defaultColor : a, i = n.onChange, s = n.onChangeEnd, f = c(n, [
+				"className",
+				"colorModel",
+				"color",
+				"onChange",
+				"onChangeEnd"
+			]), d = (0, react.useRef)(null);
+			G(d);
+			var v = X(o, u, i, s), h = v[0], g = v[1], p = v[2], b = m(["react-colorful", t]);
+			return react.default.createElement("div", l({}, f, {
+				ref: d,
+				className: b
+			}), react.default.createElement(S, {
+				hsva: h,
+				onChange: g,
+				onChangeEnd: p
+			}), react.default.createElement(R, {
+				hue: h.h,
+				onChange: g,
+				onChangeEnd: p,
+				className: "react-colorful__last-control"
+			}));
+		};
+		var Q = {
+			defaultColor: "000",
+			toHsva: E,
+			fromHsva: function(e) {
+				return w({
+					h: e.h,
+					s: e.s,
+					v: e.v,
+					a: 1
+				});
+			},
+			equal: P
+		};
+		var Z = function(r) {
+			return react.default.createElement(J, l({}, r, { colorModel: Q }));
+		};
+		var ke = /^#?([0-9A-F]{3,8})$/i;
+		var qe = function(r) {
+			var n = r.color, u = void 0 === n ? "" : n, s = r.onChange, f = r.onBlur, d = r.escape, v = r.validate, h = r.format, g = r.process, m = c(r, [
+				"color",
+				"onChange",
+				"onBlur",
+				"escape",
+				"validate",
+				"format",
+				"process"
+			]), p = (0, react.useState)(function() {
+				return d(u);
+			}), b = p[0], _ = p[1], E = i(s), C = i(f), x = (0, react.useCallback)(function(e) {
+				var r = d(e.target.value);
+				_(r), v(r) && E(g ? g(r) : r);
+			}, [
+				d,
+				g,
+				v,
+				E
+			]), H = (0, react.useCallback)(function(e) {
+				v(e.target.value) || _(d(u)), C(e);
+			}, [
+				u,
+				d,
+				v,
+				C
+			]);
+			return (0, react.useEffect)(function() {
+				_(d(u));
+			}, [u, d]), react.default.createElement("input", l({}, m, {
+				value: h ? h(b) : b,
+				spellCheck: "false",
+				onChange: x,
+				onBlur: H
+			}));
+		};
+		var Ie = function(e) {
+			return "#" + e;
+		};
+		var Oe = function(r) {
+			var n = r.prefixed, t = r.alpha, o = c(r, ["prefixed", "alpha"]), u = (0, react.useCallback)(function(e) {
+				return e.replace(/([^0-9A-F]+)/gi, "").substring(0, t ? 8 : 6);
+			}, [t]), i = (0, react.useCallback)(function(e) {
+				return function(e, r) {
+					var n = ke.exec(e), t = n ? n[1].length : 0;
+					return 3 === t || 6 === t || !!r && 4 === t || !!r && 8 === t;
+				}(e, t);
+			}, [t]);
+			return react.default.createElement(qe, l({}, o, {
+				escape: u,
+				format: n ? Ie : void 0,
+				process: Ie,
+				validate: i
+			}));
+		};
+		//#endregion
 		//#region src/client/custom.ts
 		/** The nine `--shiki-token-*` slots, in stylesheet order. */
 		const SHIKI_KEYS = [
@@ -2809,6 +3237,22 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		/** Reserved menu value that switches to the user-defined theme. */
 		const CUSTOM_SELECTION = CUSTOM_PRESET_ID;
 		/**
+		* Base id of the light/dark control in the colour editor — and the only place
+		* that string is written. The shell's `SegmentedControl` derives both the tab
+		* ids (`<id>-<value>`) and the panel ids (`<id>-<value>-panel`) from it, so the
+		* tabpanel that answers them has to be built from the same value: a second
+		* literal would drift silently and leave `aria-controls` pointing at nothing.
+		*/
+		const SEED_MODE_CONTROL_ID = "ct-seed-mode";
+		/**
+		* The one glyph size this panel draws at. Every icon here is explicit about it
+		* because the shell's artwork does not default uniformly — the chevron falls
+		* back to 14, the edit/share/trash/add/import glyphs to 16 — so passing no size
+		* silently picks a different scale per icon. 14 is what the shell's own
+		* settings pages pass.
+		*/
+		const ICON_SIZE = 14;
+		/**
 		* Which message an import failure deserves. The Host answers with its own
 		* reason, so the shape of that reason is what selects the localized text; an
 		* unrecognised failure keeps the Host's own words rather than hiding them.
@@ -2854,114 +3298,54 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			if (open.id === null) return true;
 			return open.name.trim() !== open.originName.trim() || !sameSeeds(current, open.originTheme);
 		}
-		function IconChevron() {
-			return react.createElement("svg", {
-				width: 14,
-				height: 14,
-				viewBox: "0 0 14 14",
-				fill: "none",
-				xmlns: "http://www.w3.org/2000/svg"
-			}, react.createElement("path", {
-				d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
-				fill: "currentColor"
-			}));
-		}
-		/** The menu's selected-row tick: 16px, pushed to the trailing edge. */
-		function IconCheck(props) {
-			const { size = 16, className } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 16 16",
-				fill: "none",
-				xmlns: "http://www.w3.org/2000/svg",
-				className
-			}, react.createElement("path", {
-				d: "M15.0498 3.92579L8.49512 12.3818C8.25774 12.6881 8.04517 12.9645 7.84668 13.1689C7.63957 13.3823 7.38732 13.5841 7.04492 13.6719C6.86373 13.7183 6.6757 13.7346 6.48926 13.7197C6.13666 13.6915 5.8528 13.5355 5.6123 13.3604C5.38201 13.1926 5.12573 12.9567 4.83984 12.6953L1.03125 9.21289L1.96875 8.1875L5.77734 11.6699C6.08684 11.9529 6.27773 12.1249 6.43066 12.2363C6.50183 12.2882 6.54699 12.3135 6.57324 12.3252C6.58525 12.3305 6.59269 12.3322 6.5957 12.333C6.59802 12.3336 6.59961 12.334 6.59961 12.334C6.63317 12.3367 6.66758 12.3335 6.7002 12.3252C6.7002 12.3252 6.70211 12.3251 6.7041 12.3242C6.70698 12.3229 6.71348 12.319 6.72461 12.3115C6.74849 12.2956 6.78843 12.2642 6.84961 12.2012C6.98138 12.0654 7.13957 11.8628 7.39648 11.5313L13.9502 3.07422L15.0498 3.92579Z",
-				fill: "currentColor"
-			}));
-		}
+		/**
+		* The panel's value picker: a trigger in the row, the shell's `Menu` for the
+		* list. Everything the list needs — outside pointerdown, Escape, the arrow
+		* walk, the focus return to the trigger, the translucent material, the
+		* viewport-clamped portal — belongs to the primitive, so this owns `open` and
+		* which label the trigger shows, and nothing else.
+		*/
 		function SchemeMenu(props) {
 			const { value, options, onSelect, disabled } = props;
 			const [open, setOpen] = react.useState(false);
-			const rootRef = react.useRef(null);
-			const listRef = react.useRef(null);
-			react.useEffect(() => {
-				if (!open) return;
-				function onDown(e) {
-					if (!(e.target instanceof Node)) return;
-					if (rootRef.current?.contains(e.target)) return;
-					if (listRef.current?.contains(e.target)) return;
-					setOpen(false);
-				}
-				function onKey(e) {
-					if (e.key === "Escape") setOpen(false);
-				}
-				document.addEventListener("pointerdown", onDown);
-				document.addEventListener("keydown", onKey);
-				return () => {
-					document.removeEventListener("pointerdown", onDown);
-					document.removeEventListener("keydown", onKey);
-				};
-			}, [open]);
 			const selected = options.find((o) => o.value === value);
-			return react.createElement("span", {
-				ref: rootRef,
-				style: {
-					position: "relative",
-					display: "inline-flex"
-				}
-			}, react.createElement("button", {
-				type: "button",
-				className: "ct-select",
-				disabled,
-				"aria-haspopup": "menu",
-				"aria-expanded": open && !disabled,
-				onClick: () => setOpen(!open)
-			}, react.createElement("span", { className: "ct-select-label" }, selected?.label ?? ""), react.createElement("span", { className: "ct-select-chevron" }, react.createElement(IconChevron, null))), open && !disabled ? react.createElement("div", {
-				ref: listRef,
-				className: "ct-menu-list",
-				style: {
-					position: "absolute",
-					top: "calc(100% + 4px)",
-					right: 0,
-					zIndex: 100
+			const expanded = open && !disabled;
+			return react.createElement(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+				open: expanded,
+				align: "end",
+				side: "bottom",
+				portal: true,
+				items: options.map((o) => ({
+					id: o.value,
+					label: o.label
+				})),
+				selectedId: value,
+				onSelect: (v) => {
+					setOpen(false);
+					onSelect(v);
 				},
-				role: "menu",
-				onClick: (e) => e.stopPropagation()
-			}, ...options.map((o) => {
-				const sel = o.value === value;
-				return react.createElement("button", {
-					key: o.value,
+				onClose: () => setOpen(false),
+				anchor: react.createElement("button", {
 					type: "button",
-					role: "menuitem",
-					className: "ct-menu-item",
-					onClick: () => {
-						setOpen(false);
-						onSelect(o.value);
-					}
-				}, react.createElement("span", { className: "ct-menu-item-label" }, o.label), sel ? react.createElement(IconCheck, { className: "ct-menu-check" }) : null);
-			})) : null);
-		}
-		/** Accessible on/off switch used to enable the custom theme. */
-		function Switch(props) {
-			const { checked, label, onChange } = props;
-			return react.createElement("button", {
-				type: "button",
-				role: "switch",
-				"aria-checked": checked,
-				"aria-label": label,
-				className: checked ? "ct-switch ct-switch-on" : "ct-switch",
-				onClick: () => onChange(!checked)
-			}, react.createElement("span", { className: "ct-switch-knob" }));
+					className: "ct-select",
+					disabled,
+					"aria-haspopup": "menu",
+					"aria-expanded": expanded,
+					onClick: () => setOpen(!open)
+				}, react.createElement("span", { className: "ct-select-label" }, selected?.label ?? ""), react.createElement("span", { className: "ct-select-chevron" }, react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { size: ICON_SIZE })))
+			});
 		}
 		/**
 		* Confirmation dialog for destructive actions, mirroring DSH's own Modal
-		* (design-platform mask token + blur, r24 card on layer-2, prominent shadow).
-		* Rendered inline rather than through a portal so it needs no react-dom import.
+		* (design-platform mask token + blur, `radius-panel` card on layer-2,
+		* prominent shadow) and the footer its `RiskConfirmation` lays out: an outline
+		* cancel beside the confirming action.
+		* Still rendered inline rather than through the shell's `Modal`: its Escape has
+		* to take part in the panel's own leave-the-draft questions, and a shell-owned
+		* modal layer would answer the key before this dialog could.
 		*/
 		function ConfirmDialog(props) {
-			const { title, description, confirmLabel, cancelLabel, onConfirm, onCancel } = props;
+			const { title, description, confirmLabel, cancelLabel, danger, onConfirm, onCancel } = props;
 			react.useEffect(() => {
 				const onKey = (e) => {
 					if (e.key === "Escape") onCancel();
@@ -2978,13 +3362,13 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				role: "dialog",
 				"aria-modal": true,
 				"aria-label": title
-			}, react.createElement("div", { className: "ct-modal-title" }, title), react.createElement("div", { className: "ct-modal-desc" }, description), react.createElement("div", { className: "ct-modal-footer" }, react.createElement("button", {
-				type: "button",
-				className: "ct-btn",
+			}, react.createElement("div", { className: "ct-modal-title" }, title), react.createElement("div", { className: "ct-modal-desc" }, description), react.createElement("div", { className: "ct-modal-footer" }, react.createElement(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "outline",
+				className: "ct-action-cancel",
 				onClick: onCancel
-			}, cancelLabel), react.createElement("button", {
-				type: "button",
-				className: "ct-btn ct-btn-danger",
+			}, cancelLabel), react.createElement(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: danger ? "outline" : "primary",
+				className: danger ? "ct-action-confirm ct-danger" : "ct-action-confirm",
 				onClick: onConfirm
 			}, confirmLabel))));
 		}
@@ -2993,148 +3377,6 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			return error instanceof ThemeApiUnavailableError ? "custom.toast.unavailable" : "custom.toast.failed";
 		}
 		/**
-		* Transient confirmation banner: a leading result badge plus the copy, top
-		* center, sliding in, holding, fading out, then reporting done so the owner can
-		* unmount it. Metrics, tokens, badge and timing follow DSH's own toast — the
-		* badge is the success circle its confirmations wear — but the component is
-		* local: the plugin must keep answering a save on a host that does not share
-		* the primitives module.
-		*
-		* TOAST_HOLD_MS and TOAST_FADE_MS have to agree with the `ct-toast` animation
-		* in the injected stylesheet, which owns the visual timing.
-		* @param props.text - resolved, already-localized copy.
-		* @param props.onDone - called once the fade completes; unmount the toast here.
-		*/
-		function Toast(props) {
-			const { text, onDone } = props;
-			react.useEffect(() => {
-				const timer = setTimeout(onDone, 4e3);
-				return () => clearTimeout(timer);
-			}, [onDone]);
-			return react.createElement("div", {
-				className: "ct-toast",
-				role: "status"
-			}, react.createElement(ToastBadge), react.createElement("span", { className: "ct-toast-text" }, text));
-		}
-		/** The leading badge every confirmation wears: a success ring around the check. */
-		function ToastBadge() {
-			return react.createElement("span", {
-				className: "ct-toast-icon",
-				"aria-hidden": true
-			}, react.createElement(IconCheck, { size: 12 }));
-		}
-		/**
-		* Plus glyph for the add button, path data taken verbatim from DSH's own
-		* `IconPlusOutline16` so the two controls read as the same affordance.
-		*/
-		function IconPlus(props) {
-			const { size = 14 } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 16 16",
-				fill: "none",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": true,
-				focusable: false
-			}, react.createElement("path", {
-				d: "M8.64453 1.5V7.34961H14.5V8.65039H8.64453V14.5H7.34473V8.65039H1.5V7.34961H7.34473V1.5H8.64453Z",
-				fill: "currentColor"
-			}));
-		}
-		/**
-		* Lucide `edit` (the pencil in a square), path data verbatim. Row actions are
-		* icon-only, so the glyph has to read as the label the accessible name still
-		* carries.
-		*/
-		function IconEdit(props) {
-			const { size = 14 } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 2,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": true,
-				focusable: false
-			}, react.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), react.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" }));
-		}
-		/** Lucide `trash`, path data verbatim; the row's danger action. */
-		function IconTrash(props) {
-			const { size = 14 } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 2,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": true,
-				focusable: false
-			}, react.createElement("path", { d: "M3 6h18" }), react.createElement("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), react.createElement("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), react.createElement("line", {
-				x1: 10,
-				y1: 11,
-				x2: 10,
-				y2: 17
-			}), react.createElement("line", {
-				x1: 14,
-				y1: 11,
-				x2: 14,
-				y2: 17
-			}));
-		}
-		/** Lucide `share`, path data verbatim; sends one theme out as an archive. */
-		function IconShare(props) {
-			const { size = 14 } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 2,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": true,
-				focusable: false
-			}, react.createElement("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }), react.createElement("polyline", { points: "16 6 12 2 8 6" }), react.createElement("line", {
-				x1: 12,
-				y1: 2,
-				x2: 12,
-				y2: 15
-			}));
-		}
-		/** Lucide `download`, path data verbatim; takes one archive in. */
-		function IconDownload(props) {
-			const { size = 14 } = props;
-			return react.createElement("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 2,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": true,
-				focusable: false
-			}, react.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), react.createElement("polyline", { points: "7 10 12 15 17 10" }), react.createElement("line", {
-				x1: 12,
-				y1: 15,
-				x2: 12,
-				y2: 3
-			}));
-		}
-		/**
 		* One collapsed saved-theme card: the name activates the theme, and the trailing
 		* controls export it, open the editor or delete it. The card as a whole is a
 		* click target too, but its controls own their clicks.
@@ -3142,22 +3384,29 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		function ThemeCard(props) {
 			const { entry, active, disabled, t, onActivate, onExport, onEdit, onDelete } = props;
 			/**
-			* One square icon action; `danger` is the tinted delete variant. The glyph is
-			* decorative, so the label travels as the accessible name instead of as text,
-			* and as `data-tip` for the hover tooltip. `leave` marks the button on the
-			* markup the outside-click guard watches (see the guard's own comment).
+			* One square icon action. The glyph is decorative, so the label travels as
+			* the accessible name and as the shell's own `Tooltip` above the button.
+			* `danger` paints the error face; `leave` marks the button on the markup the
+			* outside-click guard watches (see that guard) — it is not a visual state.
 			*/
-			const action = (label, icon, onClick, variant) => react.createElement("button", {
-				type: "button",
-				className: variant === "danger" ? "ct-list-btn ct-list-btn-danger ct-tip" : "ct-list-btn ct-tip",
-				"aria-label": label,
-				"data-tip": label,
-				...variant === "leave" ? {
-					"data-ct-leave": "true",
-					"data-ct-entry": entry.id
-				} : {},
-				onClick
-			}, icon);
+			const action = (label, icon, onClick, marks) => {
+				const button = react.createElement("button", {
+					type: "button",
+					className: marks?.danger ? "ct-list-btn ct-list-btn-danger" : "ct-list-btn",
+					"aria-label": label,
+					...marks?.leave ? {
+						"data-ct-leave": "true",
+						"data-ct-entry": entry.id
+					} : {},
+					onClick
+				}, icon);
+				return react.createElement(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+					label,
+					side: "top",
+					gap: 6,
+					children: button
+				});
+			};
 			return react.createElement("div", {
 				className: "ct-list-row",
 				"data-ct-leave": "true",
@@ -3174,7 +3423,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}, entry.name)), react.createElement("div", {
 				className: "ct-list-actions",
 				onClick: (e) => e.stopPropagation()
-			}, active ? react.createElement("span", { className: "ct-list-badge" }, t("custom.inUse")) : null, action(t("custom.edit"), react.createElement(IconEdit, { size: 14 }), onEdit, "leave"), action(t("custom.export"), react.createElement(IconShare, { size: 14 }), onExport), action(t("custom.delete"), react.createElement(IconTrash, { size: 14 }), onDelete, "danger")));
+			}, active ? react.createElement("span", { className: "ct-list-badge" }, t("custom.inUse")) : null, action(t("custom.edit"), react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconEditOutlineRegular, { size: ICON_SIZE }), onEdit, { leave: true }), action(t("custom.export"), react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconShareOutlineRegular, { size: ICON_SIZE }), onExport), action(t("custom.delete"), react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconTrashOutlineRegular, { size: ICON_SIZE }), onDelete, { danger: true })));
 		}
 		/**
 		* Which appearance the colour dots edit. `system` resolves through the same
@@ -3190,7 +3439,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}
 		}
 		function ThemePanel(props) {
-			const { theme, getSelection, setSelection, getCustom, setCustom, setCustomBase, resetCustom, saved, getHostToast, t, onRequestClose } = props;
+			const { theme, getSelection, setSelection, getCustom, setCustom, setCustomBase, resetCustom, saved, getSidebarTransparent, setSidebarTransparent, t, onRequestClose } = props;
 			let initScheme = "system";
 			try {
 				const snap = theme?.getTheme();
@@ -3209,6 +3458,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			});
 			const [list, setList] = react.useState(() => saved.list());
 			const [activeId, setActiveId] = react.useState(() => saved.activeId());
+			const [sidebarTransparent, setSidebarTransparentState] = react.useState(() => getSidebarTransparent());
 			const [pendingDelete, setPendingDelete] = react.useState(null);
 			const [importing, setImporting] = react.useState(false);
 			/** The hidden picker the import button opens. */
@@ -3240,6 +3490,72 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					text
 				});
 			}
+			const [pickerDotKey, setPickerDotKey] = react.useState(null);
+			const [pickerPos, setPickerPos] = react.useState(null);
+			const pickerOpen = pickerDotKey !== null;
+			const pickerOpenRef = react.useRef(false);
+			pickerOpenRef.current = pickerOpen;
+			/** The swatch the popover is anchored to; re-read on every reposition. */
+			const pickerAnchorRef = react.useRef(null);
+			/** The popover node itself; outside-pointerdown detection needs its bounds. */
+			const pickerPopRef = react.useRef(null);
+			/** Viewport coordinates that put the popover beside its anchor swatch. */
+			function placePicker(anchor) {
+				const WIDTH = 224;
+				const HEIGHT = 240;
+				const GAP = 8;
+				const MARGIN = 8;
+				const rect = anchor.getBoundingClientRect();
+				const viewW = window.innerWidth;
+				const viewH = window.innerHeight;
+				return {
+					left: Math.min(Math.max(MARGIN, rect.right - WIDTH), Math.max(MARGIN, viewW - WIDTH - MARGIN)),
+					top: rect.bottom + GAP + HEIGHT <= viewH - MARGIN ? rect.bottom + GAP : Math.max(MARGIN, rect.top - GAP - HEIGHT)
+				};
+			}
+			/** Toggle one seed's popover; `anchor` is the swatch that was clicked. */
+			function togglePicker(key, anchor) {
+				if (pickerDotKey === key) {
+					closePicker();
+					return;
+				}
+				pickerAnchorRef.current = anchor;
+				setPickerDotKey(key);
+				setPickerPos(placePicker(anchor));
+			}
+			function closePicker() {
+				setPickerDotKey(null);
+				setPickerPos(null);
+			}
+			react.useEffect(() => {
+				if (!pickerOpen) return;
+				function onPointerDown(e) {
+					const target = e.target instanceof Element ? e.target : null;
+					if (!target) return;
+					if (pickerPopRef.current?.contains(target)) return;
+					if (pickerAnchorRef.current?.contains(target)) return;
+					closePicker();
+				}
+				document.addEventListener("pointerdown", onPointerDown, true);
+				return () => document.removeEventListener("pointerdown", onPointerDown, true);
+			}, [pickerOpen]);
+			react.useEffect(() => {
+				if (!pickerOpen) return;
+				let raf = 0;
+				const update = () => {
+					const anchor = pickerAnchorRef.current;
+					if (!anchor) return;
+					cancelAnimationFrame(raf);
+					raf = requestAnimationFrame(() => setPickerPos(placePicker(anchor)));
+				};
+				window.addEventListener("scroll", update, true);
+				window.addEventListener("resize", update);
+				return () => {
+					window.removeEventListener("scroll", update, true);
+					window.removeEventListener("resize", update);
+					cancelAnimationFrame(raf);
+				};
+			}, [pickerOpen]);
 			/** Re-read both the list and the active pointer after any list mutation. */
 			function syncSaved() {
 				setList(saved.list());
@@ -3361,6 +3677,12 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				}
 				function onKeyDown(e) {
 					if (e.key !== "Escape") return;
+					if (pickerOpenRef.current) {
+						e.preventDefault();
+						e.stopPropagation();
+						closePicker();
+						return;
+					}
 					if (confirmCloseRef.current || pendingLeaveRef.current) {
 						e.preventDefault();
 						e.stopPropagation();
@@ -3378,6 +3700,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					const target = e.target instanceof Element ? e.target : null;
 					if (!target) return;
 					if (target.closest("[data-ct-editor]")) return;
+					if (target.closest("[role=\"menu\"]")) return;
 					const panel = settingsPanel();
 					if (!!panel && !panel.contains(target) || isCloseButton(target)) {
 						if (!onRequestClose) return;
@@ -3414,6 +3737,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}, [onRequestClose]);
 			/** Open a fresh, unsaved theme seeded from the currently selected preset. */
 			function startAdd() {
+				closePicker();
 				const origin = beginEditing(null, nextThemeName(t("custom.defaultName"), list.map((e) => e.name)), "", getCustom().theme);
 				setCustomBase(shownPreset);
 				const draft = resetCustom();
@@ -3422,6 +3746,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}
 			/** Open an existing card for editing; it also becomes the previewed theme. */
 			function startEdit(entry) {
+				closePicker();
 				const next = beginEditing(entry.id, entry.name, entry.name, entry.theme);
 				setEditing(next);
 				onLoadSaved(entry.id);
@@ -3429,6 +3754,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			/** Discard the open editor and put the previously applied theme back. */
 			function cancelEdit() {
 				if (!editing) return;
+				closePicker();
 				revertEditing(editing);
 				setEditing(null);
 				syncSaved();
@@ -3491,6 +3817,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			/** Commit the open editor: create a new entry, or update the one being edited. */
 			async function saveEdit() {
 				if (!editing) return;
+				closePicker();
 				const name = editing.name.trim() || t("custom.defaultName");
 				const id = editing.id;
 				savingRef.current = true;
@@ -3547,6 +3874,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					setCustomState(getCustom().theme);
 					return;
 				}
+				closePicker();
 				if (editing) revertEditing(editing);
 				setEditing(null);
 				setSelectionState(shownPreset);
@@ -3590,10 +3918,21 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					onSelect: (v) => pickPreset(v),
 					disabled: customOn
 				})),
+				react.createElement("div", {
+					className: "ct-row",
+					key: "sidebar-transparency"
+				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("sidebar.title")), react.createElement("div", { className: "ct-row-desc" }, t("sidebar.desc"))), react.createElement(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+					checked: sidebarTransparent,
+					label: t("sidebar.title"),
+					onChange: (on) => {
+						setSidebarTransparentState(on);
+						setSidebarTransparent(on);
+					}
+				})),
 				react.createElement("div", {
 					className: "ct-row ct-row-flush",
 					key: "custom-toggle"
-				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("custom.title")), react.createElement("div", { className: "ct-row-desc" }, t("custom.toggle.desc"))), react.createElement(Switch, {
+				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("custom.title")), react.createElement("div", { className: "ct-row-desc" }, t("custom.toggle.desc"))), react.createElement(_deepseek_ai_dsh_client_ui_primitives.Switch, {
 					checked: customOn,
 					label: t("custom.title"),
 					onChange: toggleCustom
@@ -3604,18 +3943,21 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				const dotRow = (key, label, dots) => react.createElement("div", {
 					className: "ct-seed-row",
 					key
-				}, react.createElement("div", { className: "ct-seed-label" }, label), react.createElement("div", { className: "ct-seed-dots" }, ...dots.map((d) => react.createElement("label", {
+				}, react.createElement("div", { className: "ct-seed-label" }, label), react.createElement("div", { className: "ct-seed-dots" }, ...dots.map((d) => react.createElement(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
 					key: d.key,
-					className: "ct-seed-dot ct-tip",
-					style: { background: d.value },
-					"data-tip": d.name
-				}, react.createElement("input", {
-					className: "ct-seed-input",
-					type: "color",
-					value: d.value,
-					"aria-label": `${d.name} — ${d.hint}`,
-					onChange: (e) => d.onChange(e.target.value.toUpperCase())
-				})))));
+					label: d.name,
+					side: "top",
+					gap: 6,
+					children: react.createElement("button", {
+						type: "button",
+						className: "ct-seed-dot",
+						style: { background: d.value },
+						"aria-haspopup": "dialog",
+						"aria-expanded": pickerDotKey === d.key,
+						"aria-label": `${d.name} — ${d.hint}`,
+						onClick: (e) => togglePicker(d.key, e.currentTarget)
+					})
+				}))));
 				const pair = (key, title, desc) => ({
 					key,
 					name: t(title),
@@ -3672,21 +4014,24 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					})
 				}));
 				/** The light/dark segmented control above the dots. */
-				const modeButton = (id, label) => react.createElement("button", {
-					key: id,
-					type: "button",
-					className: seedMode === id ? "ct-mode-btn ct-mode-btn-on" : "ct-mode-btn",
-					"aria-pressed": seedMode === id,
-					onClick: () => {
-						setSeedMode(id);
-						previewAppearance(id);
-					}
-				}, label);
-				const modeToggle = react.createElement("div", {
-					className: "ct-mode",
-					role: "group",
-					"aria-label": t("custom.mode.label")
-				}, modeButton("light", t("custom.seed.light")), modeButton("dark", t("custom.seed.dark")));
+				const modeToggle = react.createElement(_deepseek_ai_dsh_client_ui_primitives.SegmentedControl, {
+					id: SEED_MODE_CONTROL_ID,
+					value: seedMode,
+					options: [{
+						value: "light",
+						label: t("custom.seed.light")
+					}, {
+						value: "dark",
+						label: t("custom.seed.dark")
+					}],
+					onChange: (next) => {
+						const mode = next;
+						setSeedMode(mode);
+						previewAppearance(mode);
+					},
+					label: t("custom.mode.label"),
+					className: "ct-mode"
+				});
 				const editorName = react.createElement("input", {
 					className: "ct-editor-name",
 					type: "text",
@@ -3703,20 +4048,40 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 						else if (e.key === "Escape") cancelEdit();
 					}
 				});
-				const editorActions = react.createElement("div", { className: "ct-editor-actions" }, react.createElement("button", {
-					type: "button",
-					className: "ct-btn",
+				const editorActions = react.createElement("div", { className: "ct-editor-actions" }, react.createElement(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "outline",
 					onClick: cancelEdit
-				}, t("custom.cancel")), react.createElement("button", {
-					type: "button",
-					className: "ct-btn ct-btn-primary",
+				}, t("custom.cancel")), react.createElement(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "primary",
 					onClick: () => void saveEdit()
 				}, t("custom.save")));
+				const pickerDot = pickerDotKey ? [...seedDots, ...shikiDots].find((d) => d.key === pickerDotKey) ?? null : null;
+				const pickerPop = pickerDot && pickerPos ? react.createElement("div", {
+					key: "color-picker",
+					className: "ct-color-pop",
+					ref: pickerPopRef,
+					style: {
+						left: pickerPos.left,
+						top: pickerPos.top
+					}
+				}, react.createElement(Z, {
+					color: pickerDot.value,
+					onChange: (v) => pickerDot.onChange(v.toUpperCase())
+				}), react.createElement(Oe, {
+					className: "ct-hex-input",
+					color: pickerDot.value,
+					"aria-label": pickerDot.name,
+					onChange: (v) => pickerDot.onChange(v.toUpperCase())
+				})) : null;
 				const editorCard = (key) => react.createElement("div", {
 					className: "ct-editor",
 					key,
 					"data-ct-editor": "true"
-				}, react.createElement("div", { className: "ct-editor-head" }, editorName, modeToggle), dotRow("seeds", t("custom.group.seeds"), seedDots), dotRow("shiki", t("custom.group.shiki"), shikiDots), editorActions);
+				}, react.createElement("div", { className: "ct-editor-head" }, editorName, modeToggle), react.createElement("div", {
+					role: "tabpanel",
+					id: `${SEED_MODE_CONTROL_ID}-${seedMode}-panel`,
+					"aria-labelledby": `${SEED_MODE_CONTROL_ID}-${seedMode}`
+				}, dotRow("seeds", t("custom.group.seeds"), seedDots), dotRow("shiki", t("custom.group.shiki"), shikiDots)), editorActions, pickerPop);
 				const cards = list.map((entry) => editing && editing.id === entry.id ? editorCard(entry.id) : react.createElement(ThemeCard, {
 					key: entry.id,
 					entry,
@@ -3741,13 +4106,13 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					className: "ct-add-btn",
 					disabled: importing,
 					onClick: startImport
-				}, react.createElement(IconDownload, null), t("custom.import")), react.createElement("button", {
+				}, react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutlineRegular, { size: ICON_SIZE }), t("custom.import")), react.createElement("button", {
 					key: "add",
 					type: "button",
 					className: "ct-add-btn",
 					disabled: editing !== null,
 					onClick: startAdd
-				}, react.createElement(IconPlus, null), t("custom.add")), react.createElement("input", {
+				}, react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutlineRegular, { size: ICON_SIZE }), t("custom.add")), react.createElement("input", {
 					key: "import-input",
 					ref: importInputRef,
 					type: "file",
@@ -3762,6 +4127,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				description: t("custom.delete.desc").replace("{0}", pendingDelete.name),
 				confirmLabel: t("custom.delete"),
 				cancelLabel: t("custom.cancel"),
+				danger: true,
 				onConfirm: onConfirmDelete,
 				onCancel: () => setPendingDelete(null)
 			}));
@@ -3794,20 +4160,12 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				},
 				onCancel: () => setPendingLeave(null)
 			}));
-			if (toast) {
-				const onDone = () => setToast((cur) => cur?.seq === toast.seq ? null : cur);
-				const HostToast = getHostToast();
-				children.push(HostToast ? react.createElement(HostToast, {
-					key: `toast-${String(toast.seq)}`,
-					text: toast.text,
-					icon: react.createElement(ToastBadge),
-					onDone
-				}) : react.createElement(Toast, {
-					key: `toast-${String(toast.seq)}`,
-					text: toast.text,
-					onDone
-				}));
-			}
+			if (toast) children.push(react.createElement(_deepseek_ai_dsh_client_ui_primitives.Toast, {
+				key: `toast-${String(toast.seq)}`,
+				text: toast.text,
+				tone: "success",
+				onDone: () => setToast((cur) => cur?.seq === toast.seq ? null : cur)
+			}));
 			return react.createElement("div", { style: {
 				display: "flex",
 				flexDirection: "column",
@@ -3830,6 +4188,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"presets.title": "预设主题",
 			"presets.desc": "一键套用主流配色方案",
 			"presets.disabled": "自定义主题已启用，关闭后才能选择预设",
+			"sidebar.title": "侧边栏透明",
+			"sidebar.desc": "侧边栏面板透明效果，仅 Mac 端生效",
 			"scheme.light": "浅色",
 			"scheme.dark": "深色",
 			"scheme.system": "跟随系统",
@@ -3903,6 +4263,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"presets.title": "Preset themes",
 			"presets.desc": "Apply popular color schemes in one click",
 			"presets.disabled": "Custom theme is on — turn it off to choose a preset",
+			"sidebar.title": "Transparent sidebar",
+			"sidebar.desc": "Sidebar panel transparency effect, macOS only",
 			"scheme.light": "Light",
 			"scheme.dark": "Dark",
 			"scheme.system": "System",
@@ -3978,19 +4340,6 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-select-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}",
 			".ct-select-chevron{flex:none;color:var(--dsw-alias-label-tertiary);display:inline-flex;transition:transform 120ms ease;}",
 			".ct-select[aria-expanded=\"true\"] .ct-select-chevron{transform:rotate(180deg);}",
-			".ct-menu-list{box-sizing:border-box;padding:4px;display:flex;flex-direction:column;gap:0;border:1px solid var(--dsw-alias-border-inverted);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:var(--dsw-shadow-lv3);min-width:218px;max-width:360px;max-height:min(320px,50vh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-border-l2) transparent;scrollbar-gutter:stable;}",
-			".ct-menu-list:not(:hover){scrollbar-color:transparent transparent;}",
-			".ct-menu-list::-webkit-scrollbar{width:8px;height:8px;}",
-			".ct-menu-list::-webkit-scrollbar-thumb{background:var(--dsw-alias-border-l2);border-radius:999px;border:2px solid var(--dsw-specific-menu);background-clip:content-box;transition:background 150ms ease, border-color 150ms ease;}",
-			".ct-menu-list::-webkit-scrollbar-thumb:hover{background:var(--dsw-alias-label-tertiary);border:2px solid var(--dsw-specific-menu);background-clip:content-box;}",
-			".ct-menu-list::-webkit-scrollbar-thumb:active{background:var(--dsw-alias-label-secondary, var(--dsw-alias-label-tertiary));border:2px solid var(--dsw-specific-menu);background-clip:content-box;}",
-			".ct-menu-list:not(:hover)::-webkit-scrollbar-thumb{background:transparent;border-color:transparent;}",
-			".ct-menu-list::-webkit-scrollbar-track{background:transparent;margin:4px 0;}",
-			".ct-menu-list::-webkit-scrollbar-corner{background:transparent;}",
-			".ct-menu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:none;border-radius:10px;background:transparent;cursor:pointer;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);text-align:left;font-family:inherit;}",
-			".ct-menu-item:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);}",
-			".ct-menu-check{flex:none;color:var(--dsw-alias-label-primary);display:inline-flex;margin-left:auto;}",
-			".ct-menu-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
 			".ct-row{border-bottom:1px solid var(--dsw-alias-border-l2);padding:16px 2px;display:flex;align-items:center;gap:16px;}",
 			".ct-row:last-child{border-bottom:none;}",
 			".ct-row-flush{border-bottom:none;}",
@@ -4000,13 +4349,12 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-seed-row{display:flex;align-items:center;gap:16px;padding:12px 0;}",
 			".ct-seed-label{flex:0 0 auto;min-width:96px;padding-left:3px;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);}",
 			".ct-seed-dots{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;}",
-			".ct-seed-dot{position:relative;box-sizing:border-box;display:inline-block;flex:none;width:26px;height:26px;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;cursor:pointer;}",
-			".ct-seed-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;padding:0;border:none;background:transparent;opacity:0;cursor:pointer;}",
-			".ct-seed-dot:focus-within{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
-			".ct-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:100;box-sizing:border-box;width:max-content;max-width:220px;padding:3px 7px;border-radius:8px;background:var(--dsw-alias-tooltip-bg);color:var(--dsw-static-neutral-bluish-00);font-size:13px;font-weight:400;line-height:20px;white-space:pre-line;overflow-wrap:break-word;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 120ms ease;}",
-			".ct-seed-dot:hover::after,.ct-seed-dot:focus-within::after{opacity:1;visibility:visible;}",
-			".ct-list-btn:hover::after,.ct-list-btn:focus-visible::after{opacity:1;visibility:visible;}",
-			"@media (prefers-reduced-motion: reduce){.ct-tip::after{transition:none;}}",
+			".ct-seed-dot{position:relative;box-sizing:border-box;display:inline-block;flex:none;width:26px;height:26px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;cursor:pointer;font:inherit;}",
+			".ct-seed-dot:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-color-pop{position:fixed;z-index:1200;box-sizing:border-box;width:224px;padding:12px;border:1px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-shadow-lv3);display:flex;flex-direction:column;gap:10px;}",
+			".ct-color-pop .react-colorful{width:198px;height:170px;}",
+			".ct-color-pop .ct-hex-input{box-sizing:border-box;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:20px;text-align:center;outline:none;}",
+			".ct-color-pop .ct-hex-input:focus{border-color:var(--dsw-alias-border-l3);}",
 			".ct-list{margin-top:4px;display:flex;flex-direction:column;gap:8px;}",
 			".ct-list-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l4);border-radius:16px;background:transparent;cursor:pointer;transition:border-color .16s ease,background .16s ease;}",
 			".ct-list-row:hover{background:var(--dsw-alias-interactive-bg-hover);}",
@@ -4016,7 +4364,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-list-actions{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto;}",
 			".ct-list-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:14px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-bg-layer-2));color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12px;line-height:18px;white-space:nowrap;}",
 			".ct-list-badge + .ct-list-btn{margin-left:8px;}",
-			".ct-list-btn{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;padding:0;border:none;border-radius:14px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;line-height:0;}",
+			".ct-list-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;padding:0;border:none;border-radius:14px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;line-height:0;}",
 			".ct-list-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}",
 			".ct-list-btn:active{background:var(--dsw-alias-interactive-bg-active);}",
 			".ct-list-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
@@ -4025,19 +4373,15 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-list-btn-danger{color:var(--dsw-alias-state-error-primary);}",
 			".ct-list-btn-danger:hover{background:var(--dsw-alias-interactive-bg-hover-danger);}",
 			".ct-list-btn-danger:active{background:var(--dsw-alias-interactive-bg-hover-danger);}",
-			".ct-editor{padding:16px;border:.5px solid var(--dsw-alias-border-l4);border-radius:16px;background:transparent;display:flex;flex-direction:column;gap:0;}",
+			".ct-editor{padding:16px;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-lg);background:transparent;display:flex;flex-direction:column;gap:0;}",
 			".ct-editor-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;}",
 			".ct-editor-name{flex:1 1 auto;min-width:0;box-sizing:border-box;height:36px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;}",
 			".ct-editor-name::placeholder{color:var(--dsw-alias-label-tertiary);}",
 			".ct-editor-name:hover{border-color:var(--dsw-alias-border-l3);}",
 			".ct-editor-name:focus{outline:none;border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-base);}",
-			".ct-mode{box-sizing:border-box;display:inline-flex;flex:none;height:36px;padding:2px;border-radius:10px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-bg-layer-2));}",
-			".ct-mode-btn{box-sizing:border-box;height:32px;padding:0 10px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;font:inherit;font-size:12px;line-height:18px;}",
-			".ct-mode-btn:hover{color:var(--dsw-alias-label-primary);}",
-			".ct-mode-btn-on{background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);}",
-			".ct-mode-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-mode{flex:none;}",
 			".ct-editor-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:12px;}",
-			".ct-add-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:8px;padding:0 14px;border:1px dashed var(--dsw-alias-border-l3);border-radius:16px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:14px;line-height:22px;}",
+			".ct-add-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:8px;padding:0 14px;border:1px dashed var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-lg);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:14px;line-height:22px;}",
 			".ct-add-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);}",
 			".ct-add-btn:disabled{opacity:.4;cursor:default;}",
 			".ct-add-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
@@ -4045,28 +4389,13 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-add-row .ct-add-btn{flex:1 1 0;width:auto;margin-top:0;min-width:0;}",
 			".ct-modal-root{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}",
 			".ct-modal-mask{position:absolute;inset:0;background:var(--dsw-alias-bg-mask-1,rgba(0,0,0,.24));backdrop-filter:var(--dsw-mask-blur,blur(2px));}",
-			".ct-modal-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(380px,100%);padding:24px;border-radius:24px;background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent);}",
+			".ct-modal-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(380px,100%);padding:24px;border-radius:var(--dsw-radius-panel);background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent);}",
 			".ct-modal-title{font-size:16px;line-height:24px;font-weight:600;color:var(--dsw-alias-label-primary);}",
 			".ct-modal-desc{font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary);}",
 			".ct-modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:12px;}",
-			".ct-switch{position:relative;flex:none;width:40px;height:24px;padding:0;border:none;border-radius:12px;background:var(--dsw-alias-border-l2);cursor:pointer;transition:background 150ms ease;}",
-			".ct-switch-on{background:var(--dsw-static-deepseek-500,rgb(65,118,230));}",
-			".ct-switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform 150ms ease;}",
-			".ct-switch-on .ct-switch-knob{transform:translateX(16px);}",
-			".ct-switch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
-			".ct-btn{box-sizing:border-box;display:inline-flex;align-items:center;height:34px;padding:0 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:17px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:13px;line-height:20px;}",
-			".ct-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}",
-			".ct-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
-			".ct-btn-primary{background:var(--dsw-static-deepseek-500,rgb(65,118,230));border-color:transparent;color:#fff;}",
-			".ct-btn-primary:hover{background:var(--dsw-static-deepseek-450,var(--dsw-static-deepseek-500,rgb(86,134,254)));}",
-			".ct-btn-danger{background:var(--dsw-static-red-500,rgb(239,68,68));border-color:transparent;color:#fff;}",
-			".ct-btn-danger:hover{background:var(--dsw-static-red-600,var(--dsw-static-red-500,rgb(236,19,19)));}",
-			".ct-toast{position:fixed;top:40px;left:50%;z-index:1100;pointer-events:none;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(640px,calc(100vw - 48px));padding:12px 16px;border-radius:14px;background:var(--dsw-alias-button-contrast-fill);color:var(--dsw-alias-label-primary-inverted);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);transform:translateX(-50%);animation:ct-toast-in 160ms ease-out,ct-toast-fade 1s ease 3s forwards;}",
-			".ct-toast-icon{display:grid;place-items:center;flex:none;width:18px;height:18px;border:1.5px solid var(--dsw-alias-state-success-primary);border-radius:50%;corner-shape:round;color:var(--dsw-alias-state-success-primary);}",
-			".ct-toast-text{min-width:0;}",
-			"@keyframes ct-toast-in{from{opacity:0;transform:translate(-50%,-6px);}to{opacity:1;transform:translate(-50%,0);}}",
-			"@keyframes ct-toast-fade{to{opacity:0;}}",
-			"@media (prefers-reduced-motion: reduce){.ct-toast{animation:ct-toast-fade 1s ease 3s forwards;}}"
+			".ct-action-cancel{min-width:72px}",
+			".ct-action-confirm{min-width:136px}",
+			"button.ct-danger{color:var(--dsw-alias-state-error-primary);border-color:color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent);--dsw-alias-interactive-bg-hover:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);}"
 		].join("\n");
 		function isValidSelection(v) {
 			return !!v && (v === CUSTOM_SELECTION || NOOP_PRESET_IDS.has(v) || v in PRESETS);
@@ -4122,6 +4451,25 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					else localStorage.setItem(key, value);
 				} catch {}
 			}
+			const SIDEBAR_OPAQUE_CSS = "html[data-platform=\"darwin\"] [class*=\"sidebarCol\"]:not([class*=\"sidebarCollapsed\"]){background:var(--dsw-specific-sidebar-fill) !important;}";
+			let sidebarOpaqueDisposer = null;
+			/**
+			* Whether the sidebar keeps DSH's translucency. Only an explicit '1' turns it
+			* on: an absent key means opaque, which is the state a fresh install starts in.
+			*/
+			function sidebarTransparent() {
+				return readRaw(SIDEBAR_TRANSPARENT_STORAGE_KEY) === "1";
+			}
+			/** Paint the sidebar column opaque (on), or hand it back to DSH (off). */
+			function applySidebarOpaque(opaque) {
+				if (opaque) {
+					if (!sidebarOpaqueDisposer) sidebarOpaqueDisposer = injector.insert(SIDEBAR_OPAQUE_CSS);
+				} else if (sidebarOpaqueDisposer) sidebarOpaqueDisposer = release(sidebarOpaqueDisposer);
+			}
+			function setSidebarTransparent(on) {
+				writeRaw(SIDEBAR_TRANSPARENT_STORAGE_KEY, on ? "1" : "0");
+				applySidebarOpaque(!on);
+			}
 			function getSelection() {
 				for (const key of [THEME_STORAGE_KEY, THEME_STORAGE_KEY_LEGACY]) {
 					const cur = readRaw(key);
@@ -4189,8 +4537,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			/**
 			* Coalesce a burst of palette applications into one.
 			*
-			* A native colour input fires `change` on every pointer move while its slider
-			* is dragged. Each application rebuilds both ramps, rewrites every token on
+			* A colour picker fires continuously while its slider is dragged. Each
+			* application rebuilds both ramps, rewrites every token on
 			* `body` and forces a style flush in the shell's presenter, so applying once
 			* per event is what makes the colour editor stutter. The first change lands
 			* immediately and the rest are throttled to one per interval, newest request
@@ -4345,13 +4693,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				if (env && isPresetId(env.base)) lastPreset = env.base;
 			}
 			apply(initialSelection);
-			let sharedToast = null;
-			const modules = ctx.get("modules");
-			try {
-				modules?.import?.("@deepseek-ai/dsh-client-ui-primitives").then((mod) => {
-					if (typeof mod?.Toast === "function") sharedToast = mod.Toast;
-				}).catch(() => {});
-			} catch {}
+			applySidebarOpaque(!sidebarTransparent());
 			ctx.effect(() => () => {
 				disposed = true;
 				cancelApply();
@@ -4359,6 +4701,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				baselineDisposer = release(baselineDisposer);
 				overrideDispose = release(overrideDispose);
 				fallbackDispose = release(fallbackDispose);
+				sidebarOpaqueDisposer = release(sidebarOpaqueDisposer);
 				injector.disposeAll();
 			});
 			slots.inject("settings.section", () => {
@@ -4379,7 +4722,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					setCustomBase,
 					resetCustom,
 					saved,
-					getHostToast: () => sharedToast,
+					getSidebarTransparent: sidebarTransparent,
+					setSidebarTransparent,
 					onRequestClose: typeof props?.close === "function" ? props.close : null
 				}));
 			});