dsh-background-by-model 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
-> The full release history lives here; the **Recent optimizations** section of [README.md](./README.md#recent-optimizations) lists only the two most recent releases (v0.9.0 / v0.8.2).
+> The full release history lives here; the **Recent optimizations** section of [README.md](./README.md#recent-optimizations) lists only the two most recent releases (v0.9.1 / v0.9.0).
+
+## v0.9.1
+
+- **The wallpaper layer's three sliders are one slider with a picker beside it** — opacity, brightness and blur share the row, the menu reads **Image opacity / Image brightness / Image blur**, and switching swaps the range, unit and written field together.
+- **The picker uses the button fill and size, and the hint under the slider is gone.**
 
 ## v0.9.0
 

package/CHANGELOG.zh.md

@@ -1,6 +1,11 @@
 # 更新日志
 
-> 这里保留完整的历史记录；[README.zh.md](./README.zh.md#近期优化) 的「近期优化」一节只列最近两个版本（v0.9.0 / v0.8.2）。
+> 这里保留完整的历史记录；[README.zh.md](./README.zh.md#近期优化) 的「近期优化」一节只列最近两个版本（v0.9.1 / v0.9.0）。
+
+## v0.9.1
+
+- **壁纸层的三条滑块合并成一条，旁边用下拉框切换调节项** —— 透明度、亮度与模糊共用同一行，选项改叫「图片透明度 / 图片亮度 / 图片模糊」，切换时范围、单位与写回的字段一起换。
+- **下拉框沿用按钮的底色与尺寸，滑块下方的说明文字删掉。**
 
 ## v0.9.0
 

package/README.md

@@ -116,7 +116,7 @@ One switch on the Config page and nothing else: on 中秋节 and 国庆节 the w
 - **Theme color** — HSL wheel, numeric input, **Extract from this image** and an eyedropper. It belongs to the **image**, and an image with none follows the system theme rather than inheriting its rule's.
 - **Layout mode** — fit / fill / stretch / tile / center, stored per image; disabled on a rule that holds no picture, rather than hidden.
 - **Framing** — drag to pan and scroll to zoom, editable in fit mode only, stored per image and stable across window resizes.
-- **Background opacity** `0–100%`, **background brightness** `0–200%` (`100%` is the picture as saved) and **background blur** `0–60 px`, all three per rule. They treat the wallpaper layer only — the Interface tab's opacity treats interface surfaces.
+- **Image opacity** `0–100%`, **image brightness** `0–200%` (`100%` is the picture as saved) and **image blur** `0–60 px`, all three per rule and edited through **one slider with a menu beside it** that picks the effect. They treat the image (wallpaper) layer only — the Interface tab's opacity treats interface surfaces.
 
 ### Global settings (Interface tab)
 
@@ -270,6 +270,10 @@ The effect is **Instant**, or the duration is `0` — an effect and a duration a
 
 > Only the two most recent releases are listed here; older ones live in [CHANGELOG.md](./CHANGELOG.md).
 
+### v0.9.1
+
+- **The three wallpaper sliders are now one slider plus a picker** — the options read Image opacity / Image brightness / Image blur, the picker matches the buttons, and the hint below is gone.
+
 ### v0.9.0
 
 - **The RPC channel is the plugin's own prefix route on `webServer`**, so envelope, body cap and the auth fence stay here and `requestRejection` is asked per request.
@@ -277,12 +281,7 @@ The effect is **Instant**, or the duration is `0` — an effect and a duration a
 - **The browser entry point is wiring again** — skin, watchdogs, rotation, boot, model state, extraction and theme files are their own modules.
 - **Exporting a theme no longer cancels its own download**, and comments say why the code is what it is rather than what it used to be.
 
-### v0.8.2
-
-- **The dsh dependency floor follows the host** — `engines.dsh`, the five `dsh-client-*` peers and `dsh-home-paths` now declare `>=0.2.1-alpha.2` instead of the 0.1.7 generation, so an install cannot be paired with the previous client packages, while `dsh-invariants` and `@deepseek-ai/cordis` stay as they are.
-
 ## Star History
-
 [![Star History Chart](https://api.star-history.com/chart?repos=HarmlessFunny/dsh-background-by-model&type=timeline&legend=bottom-right)](https://www.star-history.com/?repos=HarmlessFunny%2Fdsh-background-by-model&type=timeline&legend=bottom-right)
 
 ## License

package/README.zh.md

@@ -116,7 +116,7 @@
 - **主题色** —— HSL 色轮、数值输入、**从本图提取**与吸管。它属于**图片**，没有自己颜色的图跟随系统主题，而不是继承规则色。
 - **布局模式** —— 适应 / 填充 / 拉伸 / 平铺 / 居中，逐图保存；规则没有图片时这排是禁用而不是隐藏。
 - **取景** —— 拖动平移、滚轮缩放，只在适应模式下可编辑，逐图保存，窗口缩放后保持一致。
-- **背景透明度** `0–100%`、**背景亮度** `0–200%`（`100%` 即原图）与**背景模糊** `0–60 px`，三者都按规则。它们只作用于壁纸层；「界面」页的透明度作用于界面各区域。
+- **图片透明度** `0–100%`、**图片亮度** `0–200%`（`100%` 即原图）与**图片模糊** `0–60 px`，三者都按规则，并通过**同一条滑块 + 旁边的下拉框**切换调节项。它们只作用于图片层；「界面」页的透明度作用于界面各区域。
 
 ### 全局设置（「界面」页）
 
@@ -270,6 +270,10 @@ pnpm test            # 构建 lib/、类型检查、跑十道检查
 
 > 这里只列最近两个版本；更早的版本见 [CHANGELOG.zh.md](./CHANGELOG.zh.md)。
 
+### v0.9.1
+
+- **三条壁纸滑块合并成一条，旁边用下拉框切换** —— 选项改叫图片透明度 / 图片亮度 / 图片模糊，下拉框与按钮同色，滑块下的说明文字删掉。
+
 ### v0.9.0
 
 - **RPC 通道是插件自己在 `webServer` 上的 prefix 路由** —— envelope、请求上限与鉴权围墙留在插件这侧，每个请求都询问 `requestRejection`。
@@ -277,10 +281,6 @@ pnpm test            # 构建 lib/、类型检查、跑十道检查
 - **浏览器半边入口只剩接线** —— 皮肤、看守、轮换、启动、模型状态、取色与主题文件各自成模块。
 - **导出主题不再取消自己的下载**，注释也只讲代码为什么是现在这样、不讲它曾经是什么样。
 
-### v0.8.2
-
-- **dsh 依赖下界跟着宿主走** —— `engines.dsh`、5 个 `dsh-client-*` peer 与 `dsh-home-paths` 从 0.1.7 那一代改成声明 `>=0.2.1-alpha.2`，装出来的插件不会再被配上上一代客户端包，而 `dsh-invariants` 与 `@deepseek-ai/cordis` 各有理由、保持不动。
-
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/chart?repos=HarmlessFunny/dsh-background-by-model&type=timeline&legend=bottom-right)](https://www.star-history.com/?repos=HarmlessFunny%2Fdsh-background-by-model&type=timeline&legend=bottom-right)

package/lib/client.js

@@ -1875,6 +1875,16 @@ window.__ModuleLoader__.load({
 .dab-slider:hover::-webkit-slider-thumb,.dab-slider:focus-visible::-webkit-slider-thumb{transform:scale(1.22)}
 .dab-slider:active::-webkit-slider-thumb{transform:scale(1.34)}
 .dab-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--dsw-alias-button-elevated-fill,#fff);border:2px solid var(--dsw-alias-brand-primary)}
+/* The wallpaper effects share one track and one row: the menu that names the
+   target sits BESIDE the track, not above it, so the merged control is no taller
+   than a single slider used to be. The track takes the remaining width and the
+   menu sizes itself to its longest option (which is what keeps the English
+   "Background brightness" from clipping at a width chosen for Chinese). */
+.dab-wp-row{display:flex;align-items:center;gap:10px}
+.dab-wp-row .dab-slider-block{flex:1;min-width:0}
+.dab-select{flex:none;max-width:50%;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:12.5px;font-weight:550;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
+.dab-select:hover{border-color:var(--dsw-alias-brand-primary)}
+.dab-select:focus-visible{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
 
 /* ── interface part cards ────────────────────────────────────────────────── */
 .dab-grid-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:13px}
@@ -4683,10 +4693,10 @@ window.__ModuleLoader__.load({
 			ruleLayout: "布局模式",
 			ruleLayoutNoImage: "添加图片后可分别设置每张图的布局模式",
 			ruleFramingEdit: "编辑位置",
-			ruleOpacity: "背景透明度",
-			ruleBrightness: "背景亮度",
-			ruleBlur: "背景模糊",
-			ruleBlurHint: "这三条滑块都作用于壁纸层；界面页里的透明度作用于界面各区域，两者互不影响",
+			ruleOpacity: "图片透明度",
+			ruleBrightness: "图片亮度",
+			ruleBlur: "图片模糊",
+			ruleEffectPick: "调节项",
 			rotTitle: "多图轮换",
 			rotEnable: "轮换这组图",
 			rotNeedTwo: "至少两张图才能轮换",
@@ -4854,10 +4864,10 @@ window.__ModuleLoader__.load({
 			ruleLayout: "Layout mode",
 			ruleLayoutNoImage: "Add an image to give each one its own layout mode",
 			ruleFramingEdit: "Edit position",
-			ruleOpacity: "Background opacity",
-			ruleBrightness: "Background brightness",
-			ruleBlur: "Background blur",
-			ruleBlurHint: "These three sliders all treat the wallpaper layer; the opacity on the Interface page affects interface surfaces — they are independent",
+			ruleOpacity: "Image opacity",
+			ruleBrightness: "Image brightness",
+			ruleBlur: "Image blur",
+			ruleEffectPick: "Effect",
 			rotTitle: "Image rotation",
 			rotEnable: "Rotate these images",
 			rotNeedTwo: "At least two images are needed to rotate",
@@ -5137,7 +5147,7 @@ window.__ModuleLoader__.load({
 		* the canonical default. The track fill is a gradient driven by the --pct
 		* custom property, updated imperatively alongside the thumb.
 		*/
-		function LiveSlider({ min, max, step, def, fmt, label, onInput, onChange }) {
+		function LiveSlider({ min, max, step, def, fmt, label, ariaLabel, onInput, onChange }) {
 			const inputRef = (0, react.useRef)(null);
 			const valRef = (0, react.useRef)(null);
 			const paint = (el, v) => {
@@ -5164,6 +5174,7 @@ window.__ModuleLoader__.load({
 				onInput?.(v);
 				onChange(v);
 			};
+			const name = label ?? ariaLabel;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dab-slider-block",
 				children: [label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5184,7 +5195,8 @@ window.__ModuleLoader__.load({
 						max,
 						step,
 						defaultValue: def,
-						title: label ? `${label} · ${fmt(def)}` : fmt(def),
+						"aria-label": name,
+						title: name !== void 0 ? `${name} · ${fmt(def)}` : fmt(def),
 						onDoubleClick: () => apply(def),
 						onInput: (e) => {
 							const el = e.target;
@@ -6192,6 +6204,7 @@ window.__ModuleLoader__.load({
 				...m,
 				[id]: i
 			});
+			const [wpField, setWpField] = (0, react.useState)("opacity");
 			/** Select a rule as the edited one; keyboard stepping shares this. */
 			const selectRule = (id) => {
 				pickedRef.current = true;
@@ -6286,6 +6299,8 @@ window.__ModuleLoader__.load({
 								notify,
 								sel: selIdxOf(rule.id),
 								onSel: (i) => setSelIdxOf(rule.id, i),
+								field: wpField,
+								onField: setWpField,
 								onRemove: () => removeRule(rule.id)
 							}, rule.id);
 						})()
@@ -6451,7 +6466,78 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		function RuleCard({ p, rule, index, total, active, liveIndex, notify, sel, onSel, onRemove }) {
+		/**
+		* The rule's three wallpaper effects on ONE row: the menu names the target and a
+		* single track edits it.
+		*
+		* The three ranges are not interchangeable — opacity and brightness are
+		* percentages (brightness ceilings at the shared `WALLPAPER_BRIGHTNESS_MAX`),
+		* blur is pixels — so changing the menu swaps the whole track: limits, formatter
+		* and writer together. It never reinterprets one track under another name. The
+		* `key` remounts the input so `defaultValue` starts at the new field's current
+		* value; LiveSlider's drag-live path then works exactly as it did when the three
+		* tracks were stacked.
+		*/
+		function WallpaperEffectRow({ p, rule, field, onField }) {
+			const { t } = p;
+			const spec = field === "opacity" ? {
+				label: t("ruleOpacity"),
+				min: 0,
+				max: 100,
+				step: 1,
+				def: Math.round(rule.wallpaperOpacity * 100),
+				fmt: (v) => `${v}%`,
+				onChange: (v) => p.setRule(rule.id, { wallpaperOpacity: v / 100 })
+			} : field === "brightness" ? {
+				label: t("ruleBrightness"),
+				min: 0,
+				max: 200,
+				step: 1,
+				def: rule.brightness ?? 100,
+				fmt: (v) => `${v}%`,
+				onChange: (v) => p.setRule(rule.id, { brightness: v })
+			} : {
+				label: t("ruleBlur"),
+				min: 0,
+				max: 60,
+				step: 1,
+				def: rule.blur,
+				fmt: (v) => `${v}px`,
+				onChange: (v) => p.setRule(rule.id, { blur: v })
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dab-wp-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					className: "dab-select",
+					value: field,
+					"aria-label": t("ruleEffectPick"),
+					onChange: (e) => onField(e.target.value),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "opacity",
+							children: t("ruleOpacity")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "brightness",
+							children: t("ruleBrightness")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "blur",
+							children: t("ruleBlur")
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
+					ariaLabel: spec.label,
+					min: spec.min,
+					max: spec.max,
+					step: spec.step,
+					def: spec.def,
+					fmt: spec.fmt,
+					onChange: spec.onChange
+				}, field)]
+			});
+		}
+		function RuleCard({ p, rule, index, total, active, liveIndex, notify, sel, onSel, field, onField, onRemove }) {
 			const { t } = p;
 			const [dragOver, setDragOver] = (0, react.useState)(false);
 			const pendingDrag = (0, react.useRef)(null);
@@ -7049,42 +7135,14 @@ window.__ModuleLoader__.load({
 										})
 									]
 								})] }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									style: { marginTop: 16 },
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
-											label: t("ruleOpacity"),
-											min: 0,
-											max: 100,
-											step: 1,
-											def: Math.round(rule.wallpaperOpacity * 100),
-											fmt: (v) => `${v}%`,
-											onChange: (v) => p.setRule(rule.id, { wallpaperOpacity: v / 100 })
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
-											label: t("ruleBrightness"),
-											min: 0,
-											max: 200,
-											step: 1,
-											def: rule.brightness ?? 100,
-											fmt: (v) => `${v}%`,
-											onChange: (v) => p.setRule(rule.id, { brightness: v })
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
-											label: t("ruleBlur"),
-											min: 0,
-											max: 60,
-											step: 1,
-											def: rule.blur,
-											fmt: (v) => `${v}px`,
-											onChange: (v) => p.setRule(rule.id, { blur: v })
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dab-hint",
-											style: { marginTop: 10 },
-											children: t("ruleBlurHint")
-										})
-									]
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WallpaperEffectRow, {
+										p,
+										rule,
+										field,
+										onField
+									})
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									style: { marginTop: 14 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-background-by-model",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Appearance plugin for DeepSeek Harness: an ordered list of model rules, each carrying its own wallpapers — every image with its own framing and theme color — plus layout mode, opacity, brightness and blur; the background follows the model you switch to, and a rule can rotate through several images on its own rhythm.",
   "keywords": [
     "deepseek-harness",