dsh-cool-theme 0.6.2 → 0.8.0

package/lib/client.js

@@ -40,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";
 		/**
@@ -249,7 +250,7 @@ window.__ModuleLoader__.load({
 			return map;
 		}
 		/** Mix two colors linearly in RGB. weight 0 -> colorA, 1 -> colorB */
-		function mix(colorA, colorB, weight) {
+		function mix$1(colorA, colorB, weight) {
 			const a = hexToRgb(colorA);
 			const b = hexToRgb(colorB);
 			const w = Math.max(0, Math.min(1, weight));
@@ -320,7 +321,7 @@ window.__ModuleLoader__.load({
 			for (const step of steps) {
 				const w = weights[step];
 				if (w === void 0) continue;
-				const color = step === 500 || step === "500" ? base.toUpperCase() : typeof step === "number" && step > 500 || step === "950" ? mix("#000000", base, w) : mix("#FFFFFF", base, w);
+				const color = step === 500 || step === "500" ? base.toUpperCase() : typeof step === "number" && step > 500 || step === "950" ? mix$1("#000000", base, w) : mix$1("#FFFFFF", base, w);
 				map[`${prefix}-${step}`] = color;
 			}
 			return map;
@@ -353,7 +354,7 @@ window.__ModuleLoader__.load({
 				...buildGreenScale(opts.green),
 				...buildAmberScale(opts.amber),
 				...buildRedScale(opts.red),
-				"--dsw-static-deepseek-700-delete": mix("#000000", opts.deepseek, .7)
+				"--dsw-static-deepseek-700-delete": mix$1("#000000", opts.deepseek, .7)
 			};
 		}
 		//#endregion
@@ -2188,6 +2189,226 @@ window.__ModuleLoader__.load({
 			return out;
 		}
 		//#endregion
+		//#region src/client/css/accents.ts
+		/**
+		* Accent candidates, most specific first. Light takes `deepseek-500` and dark
+		* takes `deepseek-400` — the exact steps DSH picks for `state-business-primary`
+		* and `button-info-fill`, so the themed controls land on the colour the shell
+		* already uses for its own emphasis. The blue scale is the fallback for a
+		* palette that renames or omits the DeepSeek one.
+		*/
+		const ACCENT_KEYS = {
+			light: [
+				"--dsw-static-deepseek-500",
+				"--dsw-static-deepseek-450",
+				"--dsw-static-blue-500",
+				"--dsw-static-blue-450"
+			],
+			dark: [
+				"--dsw-static-deepseek-400",
+				"--dsw-static-deepseek-450",
+				"--dsw-static-blue-400",
+				"--dsw-static-blue-450"
+			]
+		};
+		/**
+		* The step next to the accent on the light→dark axis, which DSH itself uses as
+		* the filled button's hover (`button-info-fill: deepseek-500` with
+		* `button-info-hover: deepseek-400` in light, the pair reversed in dark).
+		*/
+		const HOVER_KEYS = {
+			light: [
+				"--dsw-static-deepseek-400",
+				"--dsw-static-deepseek-450",
+				"--dsw-static-blue-400",
+				"--dsw-static-blue-450"
+			],
+			dark: [
+				"--dsw-static-deepseek-500",
+				"--dsw-static-deepseek-450",
+				"--dsw-static-blue-500",
+				"--dsw-static-blue-450"
+			]
+		};
+		/**
+		* The palette's extremes, used as the two ink candidates. A preset keeps its
+		* neutral ramp identical in both appearances (the alias layer forks, the
+		* primitives do not), so `neutral-bluish-00` is the lightest colour of the theme
+		* in light *and* dark — which is also the label the shell prints on a Tooltip.
+		*/
+		const LIGHTEST_INK_KEY = "--dsw-static-neutral-bluish-00";
+		const DARKEST_INK_KEY = "--dsw-static-neutral-bluish-1000";
+		/**
+		* Alpha of the accent on the interaction overlays. Taken from the literals DSH
+		* ships (`#2631480f`/`#2631481a` light, `#ffffff14`/`#ffffff24` dark), so only
+		* the hue changes and hover weight stays exactly as the shell tuned it.
+		*/
+		const OVERLAY_ALPHA = {
+			light: {
+				hover: 6,
+				active: 10
+			},
+			dark: {
+				hover: 8,
+				active: 14
+			}
+		};
+		/** Share of the palette's darkest neutral mixed into the accent for the tooltip. */
+		const TOOLTIP_INK_WEIGHT = .55;
+		/** Shifting applied per retry when the tooltip label is not yet legible. */
+		const TOOLTIP_SHIFT_STEP = .25;
+		/** Retry cap, so a palette whose lightest ink sits next to the bubble cannot spin here. */
+		const TOOLTIP_SHIFT_RETRIES = 6;
+		/** WCAG 2.1 AA contrast for normal text. */
+		const TOOLTIP_MIN_CONTRAST = 4.5;
+		const BLACK = [
+			0,
+			0,
+			0
+		];
+		const WHITE = [
+			255,
+			255,
+			255
+		];
+		/**
+		* Read one of `keys` from the palette as RGB. `null` when the palette carries
+		* none of them, or carries a value this layer cannot reason about (a `var()`,
+		* a `color-mix()`, a named colour): without a concrete triple there is no way to
+		* derive an ink or a tooltip that is guaranteed to stay readable.
+		*/
+		function pickRgb(palette, keys) {
+			for (const key of keys) {
+				const value = palette[key];
+				if (value === void 0) continue;
+				const rgb = parseColor(value);
+				if (rgb) return rgb;
+			}
+			return null;
+		}
+		function parseColor(value) {
+			const text = value.trim();
+			const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text);
+			if (hex) {
+				const digits = hex[1].length === 3 ? [...hex[1]].map((d) => d + d).join("") : hex[1];
+				return [
+					Number.parseInt(digits.slice(0, 2), 16),
+					Number.parseInt(digits.slice(2, 4), 16),
+					Number.parseInt(digits.slice(4, 6), 16)
+				];
+			}
+			const fn = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(text);
+			if (fn) return [
+				Number(fn[1]),
+				Number(fn[2]),
+				Number(fn[3])
+			];
+			return null;
+		}
+		function linear(channel) {
+			const c = channel / 255;
+			return c <= .03928 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+		}
+		/** WCAG relative luminance. */
+		function luminance(rgb) {
+			return .2126 * linear(rgb[0]) + .7152 * linear(rgb[1]) + .0722 * linear(rgb[2]);
+		}
+		function contrastRatio(a, b) {
+			const first = luminance(a);
+			const second = luminance(b);
+			const [high, low] = first >= second ? [first, second] : [second, first];
+			return (high + .05) / (low + .05);
+		}
+		/** Mix in RGB, weight 0 → `from`, 1 → `to` (the space the preset ramps use). */
+		function mix(from, to, weight) {
+			return [
+				from[0] * (1 - weight) + to[0] * weight,
+				from[1] * (1 - weight) + to[1] * weight,
+				from[2] * (1 - weight) + to[2] * weight
+			];
+		}
+		function toHex$1(rgb) {
+			const channel = (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0");
+			return `#${channel(rgb[0])}${channel(rgb[1])}${channel(rgb[2])}`;
+		}
+		function accentPalette(palette, mode) {
+			const accent = pickRgb(palette, ACCENT_KEYS[mode]);
+			const lightest = pickRgb(palette, [LIGHTEST_INK_KEY]);
+			const darkest = pickRgb(palette, [DARKEST_INK_KEY]);
+			if (!accent || !lightest || !darkest) return null;
+			const tooltipTarget = contrastRatio(lightest, BLACK) >= contrastRatio(lightest, WHITE) ? BLACK : WHITE;
+			let tooltipBg = mix(accent, darkest, TOOLTIP_INK_WEIGHT);
+			let retry = 0;
+			while (retry < TOOLTIP_SHIFT_RETRIES && contrastRatio(tooltipBg, lightest) < TOOLTIP_MIN_CONTRAST) {
+				tooltipBg = mix(tooltipBg, tooltipTarget, TOOLTIP_SHIFT_STEP);
+				retry += 1;
+			}
+			const onAccent = contrastRatio(accent, lightest) >= contrastRatio(accent, darkest) ? lightest : darkest;
+			const accentHex = toHex$1(accent);
+			return {
+				accent: accentHex,
+				hover: toHex$1(pickRgb(palette, HOVER_KEYS[mode]) ?? accent),
+				onAccent: toHex$1(onAccent),
+				tooltipBg: toHex$1(tooltipBg),
+				hoverOverlay: `color-mix(in srgb, ${accentHex} ${OVERLAY_ALPHA[mode].hover}%, transparent)`,
+				activeOverlay: `color-mix(in srgb, ${accentHex} ${OVERLAY_ALPHA[mode].active}%, transparent)`
+			};
+		}
+		/**
+		* The alias tokens that carry the accent. Empty when either appearance has no
+		* usable accent: publishing half a layer would leave the two appearances
+		* disagreeing about the theme's brand colour.
+		*/
+		function accentOverrides(light, dark) {
+			const lightPalette = accentPalette(light, "light");
+			const darkPalette = accentPalette(dark, "dark");
+			if (!lightPalette || !darkPalette) return {};
+			return {
+				"--dsw-alias-brand-primary": {
+					light: lightPalette.accent,
+					dark: darkPalette.accent
+				},
+				"--dsw-alias-button-primary-fill": {
+					light: lightPalette.accent,
+					dark: darkPalette.accent
+				},
+				"--dsw-alias-button-primary-hover": {
+					light: lightPalette.hover,
+					dark: darkPalette.hover
+				},
+				"--dsw-alias-label-primary-foreground": {
+					light: lightPalette.onAccent,
+					dark: darkPalette.onAccent
+				},
+				"--dsw-alias-tooltip-bg": {
+					light: lightPalette.tooltipBg,
+					dark: darkPalette.tooltipBg
+				},
+				"--dsw-alias-interactive-bg-hover": {
+					light: lightPalette.hoverOverlay,
+					dark: darkPalette.hoverOverlay
+				},
+				"--dsw-alias-interactive-bg-active": {
+					light: lightPalette.activeOverlay,
+					dark: darkPalette.activeOverlay
+				}
+			};
+		}
+		/**
+		* The same layer as CSS, for the fallback used when the client exposes no
+		* `theme.overrideTokens`. DSH declares its aliases on `body`, so the light block
+		* rides on `:root` (a pseudo-class outranks it) and the dark block adds
+		* `html[data-ds-dark-theme] body` to outrank `body[data-ds-dark-theme]`
+		* regardless of where the injected sheet lands in the cascade.
+		*/
+		function buildAccentCss(light, dark) {
+			const overrides = accentOverrides(light, dark);
+			const names = Object.keys(overrides);
+			if (names.length === 0) return "";
+			const block = (selector, mode) => `${selector} {\n${names.map((name) => `  ${name}: ${overrides[name][mode]};`).join("\n")}\n}`;
+			return `${block(":root, body", "light")}\n\n${block("html[data-ds-dark-theme] body, body[data-ds-dark-theme]", "dark")}`;
+		}
+		//#endregion
 		//#region src/client/css/shiki.ts
 		/**
 		* Shiki token palette: values behind --shiki-* custom properties emitted by
@@ -2253,15 +2474,24 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				}
 			};
 		}
+		/**
+		* Every token a theme publishes, in one layer: the primitive ramps it retints,
+		* plus the alias tokens that move DSH's interactive components onto the theme's
+		* accent (see css/accents.ts). The accent goes last so it wins over any alias a
+		* custom theme's own map happens to carry.
+		*/
 		function buildOverrides(src) {
 			const resolved = resolvePreset(src);
 			if (!resolved) return {};
-			return primitiveOverrides(resolved.light, resolved.dark);
+			return {
+				...primitiveOverrides(resolved.light, resolved.dark),
+				...accentOverrides(resolved.light, resolved.dark)
+			};
 		}
 		function buildFullCssFallback(src) {
 			const resolved = resolvePreset(src);
 			if (!resolved) return "";
-			return buildPrimitivesCss(resolved.light, resolved.dark);
+			return `${buildPrimitivesCss(resolved.light, resolved.dark)}\n\n${buildAccentCss(resolved.light, resolved.dark)}`;
 		}
 		//#endregion
 		//#region src/client/style-injector.ts
@@ -2458,6 +2688,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			var r = y(e);
 			return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
 		};
+		var q = function(e) {
+			var r = y(e);
+			return "hsla(" + r.h + ", " + r.s + "%, " + r.l + "%, " + r.a + ")";
+		};
 		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;
@@ -2671,6 +2905,67 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		var Z = function(r) {
 			return react.default.createElement(J, l({}, r, { colorModel: Q }));
 		};
+		var ee = function(r) {
+			var n = r.className, t = r.hsva, o = r.onChange, a = r.onChangeEnd, u = { backgroundImage: "linear-gradient(90deg, " + q(Object.assign({}, t, { a: 0 })) + ", " + q(Object.assign({}, t, { a: 1 })) + ")" }, l = m(["react-colorful__alpha", n]), c = b(100 * t.a);
+			return react.default.createElement("div", { className: l }, react.default.createElement("div", {
+				className: "react-colorful__alpha-gradient",
+				style: u
+			}), react.default.createElement(g, {
+				onMove: function(e) {
+					o({ a: e.left });
+				},
+				onKey: function(e) {
+					o({ a: s(t.a + e.left) });
+				},
+				onEnd: a,
+				"aria-label": "Alpha",
+				"aria-valuetext": c + "%",
+				"aria-valuenow": c,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100"
+			}, react.default.createElement(p, {
+				className: "react-colorful__alpha-pointer",
+				left: t.a,
+				color: q(t)
+			})));
+		};
+		var re = 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
+			}), react.default.createElement(ee, {
+				hsva: h,
+				onChange: g,
+				onChangeEnd: p,
+				className: "react-colorful__last-control"
+			}));
+		};
+		var ne = {
+			defaultColor: "0001",
+			toHsva: E,
+			fromHsva: w,
+			equal: P
+		};
+		var te = function(r) {
+			return react.default.createElement(re, l({}, r, { colorModel: ne }));
+		};
 		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, [
@@ -2769,11 +3064,51 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		const HEX = /^#([0-9a-f]{3,8})$/i;
 		const RGB_FN = /^rgba?\(([^)]*)\)$/i;
 		const HSL_FN = /^hsla?\(([^)]*)\)$/i;
+		/**
+		* DSH's own `--dsw-alias-border-l1`: a 4% black hairline in light and a 6% white
+		* one in dark. A fresh custom theme starts here, so turning custom mode on
+		* leaves the borders exactly as the shell paints them until the seed is moved.
+		*/
+		const DEFAULT_BORDER = {
+			light: {
+				color: "#000000",
+				alpha: 4
+			},
+			dark: {
+				color: "#FFFFFF",
+				alpha: 6
+			}
+		};
+		/**
+		* How far above the seed each derived level sits, in percentage points — DSH's
+		* own spacing. Its light ladder runs 4 / 10 / 12 / 16 and its dark one
+		* 6 / 12 / 16 / 20, so these offsets reproduce the shipped values exactly at the
+		* default seed while letting one picker move every level together.
+		*
+		* `thin` tracks l2 where DSH does not thin it (light) and collapses onto l1
+		* where it does (dark), which is exactly how the shell's pair is authored.
+		*/
+		const BORDER_ALPHA_STEPS = {
+			light: {
+				l2: 6,
+				l3: 8,
+				l4: 12,
+				thin: 6
+			},
+			dark: {
+				l2: 6,
+				l3: 10,
+				l4: 14,
+				thin: 0
+			}
+		};
 		function isRecord$1(value) {
 			return typeof value === "object" && value !== null && !Array.isArray(value);
 		}
 		const clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
 		const clamp01 = (n) => Math.max(0, Math.min(1, n));
+		/** An opacity percentage, folded into the 0–100 the seed stores. */
+		const clampAlpha = (n) => Math.max(0, Math.min(100, Math.round(n)));
 		/** Accepts both `a, b, c` and the modern `a b c / d` argument syntax. */
 		function fnArgs(body) {
 			return body.replace(/\//g, " ").split(/[\s,]+/).filter(Boolean);
@@ -2802,8 +3137,9 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		* Parse a colour into `#RRGGBB`, or null when it is not a format we understand.
 		*
 		* Accepted: `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`, `rgb()`/`rgba()` with
-		* numbers or percentages, and `hsl()`/`hsla()`. Alpha is parsed but dropped —
-		* every token these seeds drive is an opaque theme colour.
+		* numbers or percentages, and `hsl()`/`hsla()`. Alpha is parsed but dropped:
+		* every seed stores an opaque colour, and the one overlay — the border — keeps
+		* its opacity in a field of its own.
 		*
 		* `primitives.ts` stores `rgb(r, g, b)` while presets store hex, so both shapes
 		* have to work; the extra forms are there for what users may type.
@@ -2848,6 +3184,38 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		function toHex(input) {
 			return tryToHex(input) ?? "#000000";
 		}
+		/** A stored opacity: a finite number folded into 0–100, anything else the fallback. */
+		function pickAlpha(value, fallback) {
+			return typeof value === "number" && Number.isFinite(value) ? clampAlpha(value) : fallback;
+		}
+		/**
+		* One border alias value, at the seed's own opacity or an override of it.
+		*
+		* Written as `rgba()` rather than an 8-digit hex because the seed stores the
+		* opacity as a percentage and `rgba()` is the form DSH's own border tokens take.
+		*/
+		function borderCss(seed, alpha = seed.alpha) {
+			const hex = toHex(seed.color);
+			const channel = (from) => parseInt(hex.slice(from, from + 2), 16);
+			return `rgba(${channel(1)}, ${channel(3)}, ${channel(5)}, ${clampAlpha(alpha) / 100})`;
+		}
+		/**
+		* The whole border ladder, from one seed. l1 is the seed itself and every
+		* stronger level is the same hue at DSH's own spacing above it, so a single
+		* picker moves sidebars, tab bars, cards and buttons together, and a stronger
+		* level can never end up weaker than a subtler one. The alpha is clamped, so a
+		* near-opaque seed flattens the top of the ladder instead of overflowing it.
+		*/
+		function borderTokens(mode, seed) {
+			const step = BORDER_ALPHA_STEPS[mode];
+			return {
+				"--dsw-alias-border-l1": borderCss(seed),
+				"--dsw-alias-border-l2": borderCss(seed, seed.alpha + step.l2),
+				"--dsw-alias-border-l3": borderCss(seed, seed.alpha + step.l3),
+				"--dsw-alias-border-l4": borderCss(seed, seed.alpha + step.l4),
+				"--dsw-alias-border-l2-darkmode-thin": borderCss(seed, seed.alpha + step.thin)
+			};
+		}
 		function readSeed(map, fallback, key) {
 			return toHex(map[key] ?? fallback[key]);
 		}
@@ -2888,14 +3256,22 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				green: pair("--dsw-static-green-500"),
 				amber: pair("--dsw-static-amber-500"),
 				red: pair("--dsw-static-red-500"),
+				border: {
+					light: { ...DEFAULT_BORDER.light },
+					dark: { ...DEFAULT_BORDER.dark }
+				},
 				shiki
 			};
 		}
-		/** v1 carried one neutral ramp shared by both appearances. */
-		const CUSTOM_SCHEMA_VERSION_LEGACY = 1;
+		/** Every stored version this build still reads; anything else is foreign data. */
+		const READABLE_SCHEMA_VERSIONS = [
+			1,
+			2,
+			3
+		];
 		function encodeCustom(base, theme) {
 			return JSON.stringify({
-				v: 2,
+				v: 3,
 				base,
 				theme
 			});
@@ -2906,9 +3282,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			try {
 				const parsed = JSON.parse(raw);
 				if (!parsed || typeof parsed !== "object") return null;
-				if (parsed.v !== 2 && parsed.v !== CUSTOM_SCHEMA_VERSION_LEGACY) return null;
+				const version = parsed.v;
+				if (typeof version !== "number" || !READABLE_SCHEMA_VERSIONS.includes(version)) return null;
 				return {
-					v: 2,
+					v: 3,
 					base: String(parsed.base ?? ""),
 					theme: parsed.theme
 				};
@@ -2951,6 +3328,13 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					darkest: pick(v.darkest, fb.darkest)
 				};
 			};
+			const pickBorder = (value, fb) => {
+				const v = value ?? {};
+				return {
+					color: pick(v.color, fb.color),
+					alpha: pickAlpha(v.alpha, fb.alpha)
+				};
+			};
 			const shikiSrc = src.shiki ?? {};
 			const shiki = SHIKI_KEYS.reduce((acc, k) => {
 				acc[k] = pickPair(shikiSrc[k], fallback.shiki[k]);
@@ -2966,6 +3350,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				green: pickPair(src.green, fallback.green),
 				amber: pickPair(src.amber, fallback.amber),
 				red: pickPair(src.red, fallback.red),
+				border: {
+					light: pickBorder(src.border?.light, fallback.border.light),
+					dark: pickBorder(src.border?.dark, fallback.border.dark)
+				},
 				shiki
 			};
 		}
@@ -2975,6 +3363,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		* Unlike the presets (which ship one ramp for both appearances), the ramp is
 		* built once per appearance, so the light text and the dark text are no longer
 		* the two ends of the same colour axis.
+		*
+		* The border aliases are the one set of tokens a seed publishes directly
+		* instead of through a `--dsw-static-*` ramp: DSH keeps its border levels as
+		* alpha overlays in the base stylesheets, so they have no scale to hang off.
 		*/
 		function buildCustomPreset(v) {
 			/** One appearance's ramp, published under both prefixes DSH reads from. */
@@ -2997,16 +3389,20 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				for (const k of SHIKI_KEYS) out[`--shiki-token-${k}`] = v.shiki[k][mode];
 				return out;
 			};
+			/** Every border alias, derived from this appearance's one border seed. */
+			const border = (mode) => borderTokens(mode, v.border[mode]);
 			return {
 				label: "Custom",
 				light: {
 					...ramp("light"),
 					...semantic("light"),
+					...border("light"),
 					...shiki("light")
 				},
 				dark: {
 					...ramp("dark"),
 					...semantic("dark"),
+					...border("dark"),
 					...shiki("dark")
 				}
 			};
@@ -3024,8 +3420,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			if (!raw) return [];
 			try {
 				const parsed = JSON.parse(raw);
-				const known = parsed?.v === 2 || parsed?.v === CUSTOM_SCHEMA_VERSION_LEGACY;
-				if (!parsed || !known || !Array.isArray(parsed.items)) return [];
+				if (!parsed || typeof parsed.v !== "number" || !READABLE_SCHEMA_VERSIONS.includes(parsed.v)) return [];
+				if (!Array.isArray(parsed.items)) return [];
 				const out = [];
 				for (const item of parsed.items) {
 					const e = item;
@@ -3229,6 +3625,96 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			return legacy.filter((entry) => !known.has(entry.id));
 		}
 		//#endregion
+		//#region src/client/assets/delete.svg
+		var delete_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n</svg>\n";
+		//#endregion
+		//#region src/client/assets/edit.svg
+		var edit_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n		<path d=\"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n		<path d=\"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z\" />\n	</g>\n</svg>\n";
+		//#endregion
+		//#region src/client/assets/export.svg
+		var export_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n</svg>\n";
+		//#endregion
+		//#region src/client/assets/import.svg
+		var import_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n		<path d=\"M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n		<path d=\"m7 10l5 5l5-5\" />\n	</g>\n</svg>\n";
+		//#endregion
+		//#region src/client/assets/plus.svg
+		var plus_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7v14\" />\n</svg>\n";
+		//#endregion
+		//#region src/client/assets/theme.svg
+		var theme_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\n		<path d=\"M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\" />\n		<circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\" />\n		<circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\" />\n		<circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\" />\n		<circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />\n	</g>\n</svg>\n";
+		//#endregion
+		//#region src/client/icons.tsx
+		/**
+		* The plugin's own icon set.
+		*
+		* Every glyph lives in `assets/` as an SVG, and that file is the source of
+		* truth for its artwork: `tsdown` inlines it as text (the `loader` map in
+		* tsdown.config.ts, described by assets.d.ts), and the wrapper below narrows the
+		* markup to the same `{ size, className }` surface the shell's icons expose, so
+		* a call site swaps one for the other without touching its layout.
+		*
+		* Two properties of the artwork the wrapper keeps: the strokes draw in
+		* `currentColor`, so whichever control owns an icon goes on painting it — hover,
+		* disabled and the danger face included — with no CSS here; and React owns the
+		* `<svg>` root, so `size` stays a real prop instead of riding on the asset's own
+		* `1em` box.
+		*/
+		/**
+		* Splits the root `<svg>` off an asset. The halves are needed separately because
+		* React draws the root — that is where `size` and `className` land — while the
+		* inside ships exactly as the file wrote it.
+		*
+		* A source that is not one `<svg>` carrying a `viewBox` is a mistake in this repo
+		* and not something a user can reach, so it throws instead of quietly drawing an
+		* empty box.
+		*/
+		function parseAsset(source, file) {
+			const match = /<svg\b[^>]*\bviewBox="([^"]+)"[^>]*>([\s\S]*)<\/svg>/.exec(source);
+			if (match === null) throw new Error(`dsh-cool-theme: assets/${file} is not a single <svg> with a viewBox`);
+			return {
+				viewBox: match[1],
+				inner: match[2]
+			};
+		}
+		/**
+		* Builds one icon component from an asset.
+		*
+		* The inner markup is this repo's own build-time text, never user input — which
+		* is what makes `dangerouslySetInnerHTML` safe here, and the only way to keep the
+		* paths byte-identical to the set's own drawing, `stroke-width` and all.
+		*/
+		function icon(displayName, file, source) {
+			const { viewBox, inner } = parseAsset(source, file);
+			const Icon = ({ size = 16, className }) => react.createElement("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: size,
+				height: size,
+				viewBox,
+				className,
+				"aria-hidden": "true",
+				dangerouslySetInnerHTML: { __html: inner }
+			});
+			Icon.displayName = displayName;
+			return Icon;
+		}
+		const IconDelete = icon("IconDelete", "delete.svg", delete_default);
+		const IconEdit = icon("IconEdit", "edit.svg", edit_default);
+		const IconExport = icon("IconExport", "export.svg", export_default);
+		const IconImport = icon("IconImport", "import.svg", import_default);
+		const IconPlus = icon("IconPlus", "plus.svg", plus_default);
+		/** The palette is the one glyph whose seat belongs to the shell; see below. */
+		const THEME_ASSET = parseAsset(theme_default, "theme.svg");
+		const THEME_NAV_ICON_SIZE = 16;
+		/**
+		* The palette as markup instead of as a component, because its only consumer
+		* patches shell DOM rather than rendering it: `patchThemeNavIcon` in theme.tsx
+		* hides the gear the settings nav draws for an unknown section and writes this
+		* into the seat beside it. The string therefore travels whole, with width and
+		* height pinned to the shell's 16px icon slot — the asset's own `1em` would
+		* resolve against whatever font the nav happens to carry.
+		*/
+		const THEME_NAV_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" width="${THEME_NAV_ICON_SIZE}" height="${THEME_NAV_ICON_SIZE}" viewBox="${THEME_ASSET.viewBox}" aria-hidden="true">${THEME_ASSET.inner}</svg>`;
+		//#endregion
 		//#region src/client/components.tsx
 		/**
 		* Theme settings UI: scheme selector, preset picker, and the custom colour editor.
@@ -3244,11 +3730,61 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		*/
 		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.
+		* Key of the border swatch in the shared colour popover. It is the one seed that
+		* is not a plain fill — it carries an opacity too — which is why its picker is
+		* the alpha-aware one and one control taller (see `seedPickerHeight`).
+		*/
+		const BORDER_SEED_KEY = "border";
+		/**
+		* The colour popover's box. It comes in two heights: the picker itself is a
+		* saturation panel plus a hue slider, and the border seed's picker carries an
+		* opacity slider under those. These are estimates for choosing which side of
+		* the swatch to open on — the popover is `position:fixed`, so being taller than
+		* estimated only means it hangs higher.
+		*/
+		const PICKER_WIDTH = 224;
+		const PICKER_HEIGHT = 240;
+		/** One more 24px control in the picker, one more 24px of popover. */
+		const PICKER_HEIGHT_WITH_ALPHA = 264;
+		const PICKER_GAP = 8;
+		const PICKER_MARGIN = 8;
+		/**
+		* The alpha checkerboard behind a translucent swatch. Both squares are the same
+		* grey at different alphas, so the pattern reads on a light and a dark panel
+		* alike without needing a colour per appearance.
+		*/
+		const ALPHA_CHECKERBOARD = "repeating-conic-gradient(rgba(128, 128, 128, .45) 0% 25%, rgba(128, 128, 128, .18) 0% 50%)";
+		/**
+		* The picker carries opacity as an 8-bit hex channel while a seed keeps it as a
+		* whole percentage, so the two have to be converted at the popover's edge. A
+		* byte is finer than one percent, so every percentage a seed can hold survives
+		* the round trip unchanged.
+		*/
+		const opacityToByte = (percent) => Math.round(percent / 100 * 255);
+		const byteToOpacity = (byte) => Math.round(parseInt(byte, 16) / 255 * 100);
+		/**
+		* A seed as the picker reads it: `#RRGGBB`, plus `#RRGGBBAA` when there is an
+		* opacity to carry. An opaque colour stays six digits, which is the form the
+		* picker itself hands back.
+		*/
+		function withAlpha(hex, alpha) {
+			if (alpha >= 100) return hex;
+			return `${hex}${opacityToByte(alpha).toString(16).padStart(2, "0").toUpperCase()}`;
+		}
+		/** A picker value back in seed shape: the opaque colour and its opacity. */
+		function splitAlpha(value) {
+			const hex = value.replace(/^#/, "");
+			return {
+				color: `#${hex.slice(0, 6)}`.toUpperCase(),
+				alpha: hex.length >= 8 ? byteToOpacity(hex.slice(6, 8)) : 100
+			};
+		}
+		/**
+		* The one glyph size this panel draws at, passed explicitly by every call site.
+		* The two halves of a row disagree on their own: the shell's chevron falls back
+		* to 14 while this plugin's icons default to 16, so leaving it implicit would
+		* silently mix two scales in the same panel. 14 is what the shell's own settings
+		* pages pass.
 		*/
 		const ICON_SIZE = 14;
 		/**
@@ -3269,11 +3805,16 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		function sameRamp(a, b) {
 			return a?.lightest === b?.lightest && a?.darkest === b?.darkest;
 		}
-		/** Structural equality over all 30 seeds, ignoring key order. */
+		/** Structural equality of one border seed: both its channels have to match. */
+		function sameBorder(a, b) {
+			return a?.color === b?.color && a?.alpha === b?.alpha;
+		}
+		/** Structural equality over every seed, ignoring key order. */
 		function sameSeeds(a, b) {
 			if (!sameRamp(a.neutral?.light, b.neutral?.light) || !sameRamp(a.neutral?.dark, b.neutral?.dark)) return false;
 			if (!samePair(a.accent, b.accent) || !samePair(a.green, b.green)) return false;
 			if (!samePair(a.amber, b.amber) || !samePair(a.red, b.red)) return false;
+			if (!sameBorder(a.border?.light, b.border?.light) || !sameBorder(a.border?.dark, b.border?.dark)) return false;
 			return SHIKI_KEYS.every((k) => samePair(a.shiki?.[k], b.shiki?.[k]));
 		}
 		/** The two roles one appearance's neutral ramp fills, in display order. */
@@ -3422,7 +3963,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(_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 })));
+			}, active ? react.createElement("span", { className: "ct-list-badge" }, t("custom.inUse")) : null, action(t("custom.edit"), react.createElement(IconEdit, { size: ICON_SIZE }), onEdit, { leave: true }), action(t("custom.export"), react.createElement(IconExport, { size: ICON_SIZE }), onExport), action(t("custom.delete"), react.createElement(IconDelete, { size: ICON_SIZE }), onDelete, { danger: true })));
 		}
 		/**
 		* Which appearance the colour dots edit. `system` resolves through the same
@@ -3438,7 +3979,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}
 		}
 		function ThemePanel(props) {
-			const { theme, getSelection, setSelection, getCustom, setCustom, setCustomBase, resetCustom, saved, 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();
@@ -3457,6 +3998,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. */
@@ -3497,29 +4039,40 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			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;
+			/**
+			* Height of the box the open popover was placed with, captured beside its
+			* anchor. The two popovers differ by one control, and a scroll or resize has
+			* to rebuild the same box; the clicked dot is not in that scope, so its own
+			* fact travels here rather than being re-derived from the dot's key.
+			*/
+			const pickerHeightRef = react.useRef(PICKER_HEIGHT);
+			/**
+			* Viewport coordinates that put the popover beside its anchor swatch. The
+			* caller passes the height of the box being opened, because the border seed's
+			* popover carries one more row than every other seed's.
+			*/
+			function placePicker(anchor, height) {
 				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)
+					left: Math.min(Math.max(PICKER_MARGIN, rect.right - PICKER_WIDTH), Math.max(PICKER_MARGIN, viewW - PICKER_WIDTH - PICKER_MARGIN)),
+					top: rect.bottom + PICKER_GAP + height <= viewH - PICKER_MARGIN ? rect.bottom + PICKER_GAP : Math.max(PICKER_MARGIN, rect.top - PICKER_GAP - height)
 				};
 			}
-			/** Toggle one seed's popover; `anchor` is the swatch that was clicked. */
-			function togglePicker(key, anchor) {
+			/**
+			* Toggle one seed's popover; `anchor` is the swatch that was clicked and
+			* `height` the height of the box it opens.
+			*/
+			function togglePicker(key, anchor, height) {
 				if (pickerDotKey === key) {
 					closePicker();
 					return;
 				}
 				pickerAnchorRef.current = anchor;
+				pickerHeightRef.current = height;
 				setPickerDotKey(key);
-				setPickerPos(placePicker(anchor));
+				setPickerPos(placePicker(anchor, height));
 			}
 			function closePicker() {
 				setPickerDotKey(null);
@@ -3544,7 +4097,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					const anchor = pickerAnchorRef.current;
 					if (!anchor) return;
 					cancelAnimationFrame(raf);
-					raf = requestAnimationFrame(() => setPickerPos(placePicker(anchor)));
+					raf = requestAnimationFrame(() => setPickerPos(placePicker(anchor, pickerHeightRef.current)));
 				};
 				window.addEventListener("scroll", update, true);
 				window.addEventListener("resize", update);
@@ -3553,7 +4106,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					window.removeEventListener("resize", update);
 					cancelAnimationFrame(raf);
 				};
-			}, [pickerOpen]);
+			}, [pickerOpen, pickerDotKey]);
 			/** Re-read both the list and the active pointer after any list mutation. */
 			function syncSaved() {
 				setList(saved.list());
@@ -3916,6 +4469,17 @@ 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"
@@ -3926,6 +4490,12 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				}))
 			];
 			if (customOn) {
+				/**
+				* Height of the box one seed's dot opens. Only the border seed's picker
+				* carries an opacity slider, and that seed is the one that declares it, so
+				* the height follows `SeedDot.alpha` rather than a name.
+				*/
+				const seedPickerHeight = (dot) => dot.alpha ? PICKER_HEIGHT_WITH_ALPHA : PICKER_HEIGHT;
 				/** A group row: its name on the left, every seed's dot on the right. */
 				const dotRow = (key, label, dots) => react.createElement("div", {
 					className: "ct-seed-row",
@@ -3938,11 +4508,11 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					children: react.createElement("button", {
 						type: "button",
 						className: "ct-seed-dot",
-						style: { background: d.value },
+						style: d.swatch ?? { background: d.value },
 						"aria-haspopup": "dialog",
 						"aria-expanded": pickerDotKey === d.key,
 						"aria-label": `${d.name} — ${d.hint}`,
-						onClick: (e) => togglePicker(d.key, e.currentTarget)
+						onClick: (e) => togglePicker(d.key, e.currentTarget, seedPickerHeight(d))
 					})
 				}))));
 				const pair = (key, title, desc) => ({
@@ -3977,9 +4547,46 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 						})
 					};
 				});
+				/**
+				* The border swatch. It is the one seed that is an overlay rather than a
+				* fill, so it is also the only one whose picker carries an opacity slider
+				* (`SeedDot.alpha`) and whose swatch previews that opacity over a
+				* checkerboard. DSH's whole border ladder follows from it: l1 is the seed
+				* and every stronger level is derived while the palette is built.
+				*/
+				const borderDot = () => {
+					const seed = custom.border[seedMode];
+					const set = (next) => editCustom({
+						...custom,
+						border: {
+							...custom.border,
+							[seedMode]: {
+								...seed,
+								...next
+							}
+						}
+					});
+					const rgba = borderCss(seed);
+					return {
+						key: BORDER_SEED_KEY,
+						name: t("custom.border.title"),
+						hint: `${t("custom.border.desc")} — ${seed.alpha}%`,
+						value: seed.color,
+						onChange: (v) => set({ color: v }),
+						alpha: {
+							value: seed.alpha,
+							onPicked: (v) => set(splitAlpha(v))
+						},
+						swatch: {
+							backgroundImage: `linear-gradient(${rgba}, ${rgba}), ${ALPHA_CHECKERBOARD}`,
+							backgroundSize: "auto, 10px 10px"
+						}
+					};
+				};
 				const seedDots = [
 					pair("accent", "custom.accent.title", "custom.accent.desc"),
 					...neutralDots,
+					borderDot(),
 					pair("green", "custom.green.title", "custom.green.desc"),
 					pair("amber", "custom.amber.title", "custom.amber.desc"),
 					pair("red", "custom.red.title", "custom.red.desc")
@@ -4043,17 +4650,18 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					onClick: () => void saveEdit()
 				}, t("custom.save")));
 				const pickerDot = pickerDotKey ? [...seedDots, ...shikiDots].find((d) => d.key === pickerDotKey) ?? null : null;
+				const pickerAlpha = pickerDot?.alpha;
 				const pickerPop = pickerDot && pickerPos ? react.createElement("div", {
 					key: "color-picker",
-					className: "ct-color-pop",
+					className: pickerAlpha ? "ct-color-pop ct-color-pop-alpha" : "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(pickerAlpha ? te : Z, {
+					color: pickerAlpha ? withAlpha(pickerDot.value, pickerAlpha.value) : pickerDot.value,
+					onChange: pickerAlpha ? pickerAlpha.onPicked : (v) => pickerDot.onChange(v.toUpperCase())
 				}), react.createElement(Oe, {
 					className: "ct-hex-input",
 					color: pickerDot.value,
@@ -4093,13 +4701,13 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					className: "ct-add-btn",
 					disabled: importing,
 					onClick: startImport
-				}, react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutlineRegular, { size: ICON_SIZE }), t("custom.import")), react.createElement("button", {
+				}, react.createElement(IconImport, { size: ICON_SIZE }), t("custom.import")), react.createElement("button", {
 					key: "add",
 					type: "button",
 					className: "ct-add-btn",
 					disabled: editing !== null,
 					onClick: startAdd
-				}, react.createElement(_deepseek_ai_dsh_client_ui_primitives.IconPlusOutlineRegular, { size: ICON_SIZE }), t("custom.add")), react.createElement("input", {
+				}, react.createElement(IconPlus, { size: ICON_SIZE }), t("custom.add")), react.createElement("input", {
 					key: "import-input",
 					ref: importInputRef,
 					type: "file",
@@ -4175,6 +4783,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": "跟随系统",
@@ -4197,6 +4807,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"custom.amber.desc": "警告状态",
 			"custom.red.title": "错误",
 			"custom.red.desc": "错误状态",
+			"custom.border.title": "边框",
+			"custom.border.desc": "分隔线与描边的颜色和透明度；较强的边框会自动加深",
 			"custom.shiki.desc": "9 个语法标记的颜色",
 			"custom.seed.light": "浅色",
 			"custom.seed.dark": "深色",
@@ -4248,6 +4860,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",
@@ -4270,6 +4884,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"custom.amber.desc": "Warning states",
 			"custom.red.title": "Error",
 			"custom.red.desc": "Error states",
+			"custom.border.title": "Border",
+			"custom.border.desc": "Color and opacity for separators and outlines; the stronger border is derived automatically",
 			"custom.shiki.desc": "Colors for the nine syntax tokens",
 			"custom.seed.light": "Light",
 			"custom.seed.dark": "Dark",
@@ -4336,6 +4952,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".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-alpha .react-colorful{height:194px;}",
+			".ct-color-pop .react-colorful__pointer{width:24px;height:24px;}",
 			".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;}",
@@ -4434,6 +5052,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);
@@ -4657,6 +5294,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				if (env && isPresetId(env.base)) lastPreset = env.base;
 			}
 			apply(initialSelection);
+			applySidebarOpaque(!sidebarTransparent());
 			ctx.effect(() => () => {
 				disposed = true;
 				cancelApply();
@@ -4664,6 +5302,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", () => {
@@ -4684,10 +5323,11 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					setCustomBase,
 					resetCustom,
 					saved,
+					getSidebarTransparent: sidebarTransparent,
+					setSidebarTransparent,
 					onRequestClose: typeof props?.close === "function" ? props.close : null
 				}));
 			});
-			const PALETTE_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/></g></svg>";
 			let paletteObs = null;
 			function patchThemeNavIcon() {
 				if (typeof document === "undefined") return;
@@ -4715,7 +5355,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					holder.style.display = "inline-flex";
 					holder.style.flex = "none";
 					holder.setAttribute("aria-hidden", "true");
-					holder.innerHTML = PALETTE_SVG;
+					holder.innerHTML = THEME_NAV_MARKUP;
 					svg.parentNode?.insertBefore(holder, svg.nextSibling);
 				}
 			}