dsh-background-by-model 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-> The full release history lives here; the two most recent releases (v0.5.4 / v0.5.3) are also listed in [README.md](./README.md#recent-optimizations).
+> The full release history lives here; the two most recent releases (v0.5.5 / v0.5.4) are also listed in [README.md](./README.md#recent-optimizations).
+
+## v0.5.5
+
+- **The color preview field prints its own hex, so it stops reading as a fourth text input** — The live preview swatch sits at the bottom of the same column as the H/S/L (R/G/B) number fields, at the same width and behind the same 1px border, and it was filled with the current color but carried no text at all. On a light color — the reported case was `#BADEE8`, L 82% — a blank bordered rectangle under three editable fields reads as one more field, and there is nothing to type into it. It now prints `#RRGGBB` in monospace, centered on the color itself, with its ink picked by **Rec.709 luma**, the same brightness measure the wallpaper extractor already uses, so a light fill gets dark ink and a dark one light ink and the value never disappears into its own background. The `scale(1.02)` hover went with the old reading: it advertised an interaction the field never had, which is most of why it looked clickable.
+- **The hex caption above the HSL/RGB toggle is gone** — the preview field now prints that same value on the color itself, and printing it twice only added a second thing to explain.
+- **The clear-color button is named for its action, not for the state it lands in** — It read **System theme** while its action was to clear the rule's custom color, so it read as a label for whatever control sat beside it rather than as a control. It is now **Follow system theme** (`跟随系统主题`), carrying the host's own appearance glyph (the sun, migrated from `IconLightOutline16`). This is the same label-versus-action mismatch fixed on the other side of this state in 0.5.3, where the no-color button became **Custom color**; the pair now names the two destinations instead of the two states.
 
 ## v0.5.4
 

package/CHANGELOG.zh.md

@@ -1,6 +1,12 @@
 # 更新日志
 
-> 这里保留完整的历史记录；最近两个版本（v0.5.4 / v0.5.3）同时列在 [README.zh.md](./README.zh.md#近期优化) 里。
+> 这里保留完整的历史记录；最近两个版本（v0.5.5 / v0.5.4）同时列在 [README.zh.md](./README.zh.md#近期优化) 里。
+
+## v0.5.5
+
+- **颜色预览块现在把色值打在自己身上，不再像第四个输入框** — 这块实时预览色块位于 H/S/L（R/G/B）数字字段同一列的底部，宽度相同、边框同样 1px，填的是当前颜色却一个字都没有。颜色一浅就露馅 —— 报告里的例子是 `#BADEE8`，L 82%：三个可编辑字段下面一个空白边框矩形，读起来就是第四个空字段，而它并没有任何可输入的内容。现在把 `#RRGGBB` 用等宽字体居中打在颜色本身上，字色按 **Rec.709 亮度**选取（壁纸取色用的就是同一个亮度公式），浅色配深字、深色配浅字，值不会消失在自己的底色里。`scale(1.02)` 的 hover 也一并去掉：它给这个字段并不存在的交互做了广告，那正是它看起来能点的主要原因。
+- **HSL/RGB 切换器上方那行色值文本删掉了** — 预览块已经把同一个值打在颜色上，再显示一遍只会多出一个需要解释的东西。
+- **清空颜色的按钮改成按动作命名，而不是按它落到什么状态** — 它写的是**「系统主题」**，做的却是清掉这条规则的自定义颜色，于是读起来像是旁边那个控件的标签，而不像一个控件本身。现在叫**「跟随系统主题」**，并带上宿主自己的外观字形（太阳，从 `IconLightOutline16` 迁移而来）。这和 0.5.3 修掉的是同一个「文案写状态、动作做另一件事」的毛病，只是在这个状态的两侧各修一次：当时无颜色状态的按钮改成了**「自定义颜色」**；现在这一对命名的是两个去向，而不是两个状态。
 
 ## v0.5.4
 

package/README.md

@@ -202,21 +202,17 @@ The other half of the same hole: while it owns a color the plugin **forces** `bo
 
 > Only the two most recent releases are listed here; older ones (v0.5.0 and earlier) live in [CHANGELOG.md](./CHANGELOG.md).
 
+### v0.5.5
+
+- **The color preview field prints its own hex** — it sat at the bottom of the H/S/L (R/G/B) column behind the same 1px border and carried no text, so on a light color (reported: `#BADEE8`, L 82%) it read as one more — blank — text input with nothing to type into it. It now prints `#RRGGBB` in monospace centered on the color, inked by **Rec.709 luma** (the wallpaper extractor's own brightness measure) so the value never disappears into its fill, and the hover `scale(1.02)` it never backed up is gone. The duplicate hex caption above the HSL/RGB toggle went with it.
+- **The clear-color button says what it does** — **System theme** (a state) is now **Follow system theme** (the action), with the host's own sun glyph. It is the mirror of the 0.5.3 rename that turned the no-color button into **Custom color**.
+
 ### v0.5.4
 
 - **A brand-filled control takes its label from the host's on-brand ink, not from `brand-text`** — Following the system theme painted the active layout chip, the **+ Add rule** button and the settings brand tile from the host's own `--dsw-alias-brand-primary`, which is a **contrast ink rather than a hue**: near-black (`#0f1115`) in the host's light scheme, near-white (`#f9fafb`) in its dark one. Their labels read `--dsw-alias-brand-text`, which the host defines as that very same color in both schemes and never uses in its own CSS. On a dark system that made them filled boxes with invisible labels — white primary button, white active chip, white icon tile (measured at exactly `#f9fafb`) — and they were only ever readable while the plugin owned the palette and generated its own brand pair. All four now read `--dsw-alias-label-primary-inverted`, the host's own ink for a brand/contrast fill: `#fff` on the light scheme's black fill, `#353638` on the dark scheme's white one.
 - **The toggle's on-state knob was the same bug one size smaller** — a hard-coded `#fff` on a `--dsw-alias-brand-primary` track, i.e. a white knob on the white track the dark scheme paints there.
 - **The plugin's own dark palette had the mirror of it** — that branch deliberately keeps its brand fill at 50%+ lightness, while `--dsw-alias-label-primary-foreground` — the token the **host's** own primary buttons label themselves with over `--dsw-alias-button-primary-fill` — was hard-coded white. It now flips with the fill (one shared verdict with `brand-text`), and the light branch re-emits `label-primary-inverted` so the plugin's palette owns the pair instead of inheriting it from whichever scheme the host happens to be in.
 
-### v0.5.3
-
-- **One palette at a time: clearing the theme color no longer leaves the previous skin behind** — The three redirects inside the settings dialog (`--dsw-alias-bg-layer-*` → plugin-owned variables) have **no host fallback**, and neither do the trajectory view's scope or the AppFrame columns' inline backgrounds; all of them were only ever cleaned up at teardown. Switching a rule back to **System theme** therefore left a dark interface with a light dialog and white-on-white text. Every surface is now driven by one palette source: the rule's own tokens while it has a color, and the host's own tokens read back out of the cascade and re-emitted with your alpha when it has none, handed back on the way out. The no-fallback redirects are gated on `html[data-dab-themed]`, so they are only live while the variables they read are actually written.
-- **Following the system theme keeps the wallpaper and the Interface sliders** — Clearing the color used to drop the whole token set, and the host's opaque `--dsw-alias-bg-base` then buried the wallpaper while every opacity/blur slider (main background, sidebar, cards, input, settings panel, trajectory view, right panel) silently stopped working. The surfaces are now the host's own colors times your opacity, so the wallpaper keeps showing through.
-- **Following the system theme hands the host's dark flag back** — While it owns a color the plugin forces `body[data-ds-dark-theme]` (removing it outright for a light palette), and the host only rewrites that flag when it projects a **theme snapshot** — it does not watch the attribute. A flag dropped by a light skin therefore sticks: the readback captures the host's light palette the moment the color is cleared, and the interface only turned dark once an unrelated slider drag re-ran an apply. The switch now hands the flag back synchronously in the host's own boolean form, using the scheme the host resolved (`ctx.theme`'s `active.colorScheme`, falling back to `html[data-ds-theme-source]` plus `prefers-color-scheme`); the one-second watchdog re-reads the host palette while a rule has no color, and the handback side no longer sits behind the 60 ms skin debounce (which made it read the plugin's own skin on its way out).
-- **The no-color button no longer does the opposite of its label** — It read **System theme** while its action was to install a hard-coded dark blue `#1D3463` (the same label means "clear → follow the system theme" one state over). It is now **Custom color**, and it runs the *Extract from this image* pass first, falling back to the seed swatch only when the image has nothing vivid.
-- **The token fingerprint is only recorded after the stylesheet write succeeds**, so a failed write is retried instead of pinning the interface to the old palette until another key happens to change.
-- **Fixed the mojibake dash in the `package.json` description**, which is what the npm page shows.
-
 ## 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/README.zh.md

@@ -202,21 +202,17 @@ pnpm run typecheck
 
 > 这里只列最近两个版本；更早的版本（v0.5.0 及以前）见 [CHANGELOG.zh.md](./CHANGELOG.zh.md)。
 
+### v0.5.5
+
+- **颜色预览块把色值打在自己身上** — 它位于 H/S/L（R/G/B）那一列的底部，边框同样是 1px，却一个字都没有，于是颜色一浅（报告里是 `#BADEE8`，L 82%）就读成第四个空白输入框，而它没有任何可输入的内容。现在把 `#RRGGBB` 用等宽字体居中打在颜色上，字色按 **Rec.709 亮度**（壁纸取色用的同一个公式）选取，值不会消失在自己的底色里；那个它从未兑现的 `scale(1.02)` hover 也去掉了。HSL/RGB 切换器上方重复的那行色值一并删除。
+- **清空颜色的按钮改成说它做什么** — **「系统主题」**（一个状态）现在是**「跟随系统主题」**（那个动作），并带上宿主自己的太阳字形。它与 0.5.3 把无颜色按钮改成**「自定义颜色」**的那次是同一种修正的两侧。
+
 ### v0.5.4
 
 - **填充上的文字改读宿主的「色块墨色」，不再用 `brand-text`** — 跟随系统主题时，布局模式的选中胶囊、「+ 新增规则」按钮和设置页的品牌方块，底色取自宿主自己的 `--dsw-alias-brand-primary`，而它**不是品牌色、是对比墨色**：宿主浅色档近黑（`#0f1115`），深色档近白（`#f9fafb`）。它们的文字读的是 `--dsw-alias-brand-text`，而宿主在两档里都把它定义成与底色**完全相同**的值、自己的 CSS 从不使用。于是在深色系统上就成了有底色却没有文字的方块 —— 白底主按钮、白底选中胶囊、白底图标块（实测正好 `#f9fafb`），只有插件自己持有一套调色板时才看得见。四处现在统一读 `--dsw-alias-label-primary-inverted`，也就是宿主自己画在品牌/对比色块上的墨色：浅色档 `#fff`，深色档 `#353638`。
 - **开关打开态的圆点是同一个毛病的小号版本** — 硬编码 `#fff` 画在 `--dsw-alias-brand-primary` 轨道上，而深色档那条轨道本身就是白的。
 - **插件自建的深色调色板是同一问题的镜像** — 那一档的品牌填充故意保持 50% 以上亮度，而**宿主自己的主按钮**用来写标签的 `--dsw-alias-label-primary-foreground`（画在 `--dsw-alias-button-primary-fill` 上）被写死成白色。现在它随填充亮度翻转（与 `brand-text` 共用一条判定），浅色分支也补上了 `label-primary-inverted`，让插件的调色板自己成对，而不是继承宿主当前恰好所处的档位。
 
-### v0.5.3
-
-- **一次只用一个调色板：清空主题色不再留下上一次的皮肤** — 设置弹窗里那三段重定向（`--dsw-alias-bg-layer-*` → 插件私有变量）**没有宿主回退**，轨迹页与三栏的内联背景同理，而它们只在 teardown 时才清理。于是把主题色切回「系统主题」后会留下「深色界面 + 浅色弹窗、白底白字」。现在这些表面由一个调色板来源统一驱动：有主题色时用规则自己的令牌，没有时**读取宿主自己的令牌**再套上你的透明度，切换时一并交还；无回退的重定向用 `html[data-dab-themed]` 门控，只有变量确实写了才生效。
-- **无主题色也保住壁纸与「界面」页的滑块** — 以前清空主题色会撤掉整套令牌，宿主的实心 `--dsw-alias-bg-base` 就把壁纸整块盖住，主背景 / 左侧栏 / 卡片 / 输入框 / 设置面板 / 轨迹页 / 右侧栏的透明度与模糊也全部失效。现在表面是宿主的颜色乘你的透明度，壁纸继续从背后透出来。
-- **跟随系统主题会把宿主的深色标记交还回去** — 插件持有主题色时会强改 `body[data-ds-dark-theme]`（浅色皮肤直接删掉），而宿主只在**主题快照变化时**才重写它、并不监听这个属性。被删掉的标记因此会一直生效：切回系统主题时读到的是宿主的浅色调色板，界面要等你碰一下滑块才变深。现在切换时按宿主自己解析出的方案同步交还标记（`ctx.theme` 的 `active.colorScheme`，取不到则回退 `html[data-ds-theme-source]` + `prefers-color-scheme`），并且每秒的守护定时器在无主题色状态下也会重读一次宿主调色板；「交还」这一侧不再走 60ms 防抖，避免读到插件自己那套即将下线的皮肤。
-- **无颜色状态下的按钮不再做相反的事** — 那个按钮的文案是「系统主题」，动作却是塞一个硬编码的深蓝 `#1D3463`（同一条文案在有颜色时表示「清空 → 跟随系统主题」）。现在它叫 **「自定义颜色」**，并且先跑一次「从本图提取」，取不到鲜明颜色才退回种子色。
-- **令牌指纹只在样式表写入成功后记账** — 写入抛错时不再把指纹提前记下，避免界面卡在旧调色板上直到另一个 key 变化。
-- **`package.json` 描述里的乱码破折号修正**（它直接显示在 npm 页面上）。
-
 ## 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

@@ -77,7 +77,7 @@ window.__ModuleLoader__.load({
 			ruleImageRemove: "移除图片",
 			ruleEmptyHint: "这条规则还没有图片，不会被匹配到，也不会作为兜底",
 			ruleColor: "主题色",
-			ruleColorNone: "系统主题",
+			ruleColorNone: "跟随系统主题",
 			ruleColorNoneHint: "未设颜色时跟随系统主题：界面用宿主的配色，壁纸与各部位的透明度、模糊照旧生效",
 			ruleColorPick: "自定义颜色",
 			ruleColorPickHint: "优先从本图取色，取不到就用默认色",
@@ -184,7 +184,7 @@ window.__ModuleLoader__.load({
 			ruleImageRemove: "Remove image",
 			ruleEmptyHint: "This rule has no image — it can neither match nor serve as the fallback",
 			ruleColor: "Theme color",
-			ruleColorNone: "System theme",
+			ruleColorNone: "Follow system theme",
 			ruleColorNoneHint: "Without a color this rule follows the system theme: the host palette paints the interface while the wallpaper and every opacity/blur slider keep working",
 			ruleColorPick: "Custom color",
 			ruleColorPickHint: "Extracts from this image when it can, otherwise uses a default color",
@@ -1100,7 +1100,6 @@ window.__ModuleLoader__.load({
 .dab-orb-wrap{position:relative;width:118px;height:118px;flex:none}
 .dab-orb{position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 44%),var(--c,#888);box-shadow:0 16px 36px -10px var(--c-soft,transparent),inset 0 -10px 20px rgba(0,0,0,.16);animation:dab-orb-in .7s cubic-bezier(.22,1,.36,1) both}
 .dab-orb-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 30%,var(--c,#888) 46%,transparent 62%,transparent 76%,var(--c,#888) 90%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));animation:dab-spin 7s linear infinite;opacity:.9}
-.dab-hex-caption{font-size:11px;color:var(--dsw-alias-label-tertiary);letter-spacing:.04em}
 .dab-hex{font-family:var(--dab-mono);font-size:24px;font-weight:600;letter-spacing:.02em;line-height:1.2;margin-top:2px}
 .dab-hsl-row{display:flex;gap:16px;margin-top:7px;font-family:var(--dab-mono);font-size:11px;color:var(--dsw-alias-label-tertiary)}
 .dab-hsl-row b{font-weight:600;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
@@ -1129,8 +1128,12 @@ window.__ModuleLoader__.load({
 .dab-urlinput{flex:1;min-width:180px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12.5px;outline:none;transition:border-color .2s}
 .dab-urlinput::placeholder{color:var(--dsw-alias-label-quaternary)}
 .dab-urlinput:focus{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
-.dab-swatch-lg{height:38px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);box-shadow:inset 0 0 14px rgba(0,0,0,.1);transition:transform .3s ease}
-.dab-swatch-lg:hover{transform:scale(1.02)}
+/* Prints the current hex on the color itself. Without the value this was an
+ * empty bordered rectangle sitting in the same column as the H/S/L number
+ * fields, which made it read as one more — blank — text input; nothing is ever
+ * typed here, so nothing may look typable. The hover scale went with that
+ * reading: it advertised an interaction this field does not have. */
+.dab-swatch-lg{display:flex;align-items:center;justify-content:center;height:38px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);box-shadow:inset 0 0 14px rgba(0,0,0,.1);font-family:var(--dab-mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;user-select:all}
 
 /* ── buttons & chips ─────────────────────────────────────────────────────── */
 /* Text/icon painted ON --dsw-alias-brand-primary reads
@@ -3334,6 +3337,10 @@ window.__ModuleLoader__.load({
 		function clamp(v, min, max) {
 			return Math.min(max, Math.max(min, v));
 		}
+		/** '#rrggbb' for a 0-255 RGB triple, in the caller's case. */
+		function toHex$2(rgb) {
+			return "#" + rgb.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
+		}
 		/**
 		* A single numeric field that edits one color channel. Keeps its own text
 		* while focused so typing never gets clobbered by the parent re-rendering the
@@ -3376,15 +3383,22 @@ window.__ModuleLoader__.load({
 		}
 		/**
 		* Precise color entry next to the wheel: a HSL/RGB segmented toggle plus three
-		* numeric channel fields and a live swatch. The wheel is HSV end-to-end, so
-		* this panel converts at the boundary — HSL fields map straight onto the
-		* stored HSL, RGB fields round-trip through rgbToHsl — and both emit HSV via
-		* the same onChange the wheel uses, keeping one canonical color.
+		* numeric channel fields and a live preview field that prints its own hex. The
+		* wheel is HSV end-to-end, so this panel converts at the boundary — HSL fields
+		* map straight onto the stored HSL, RGB fields round-trip through rgbToHsl —
+		* and both emit HSV via the same onChange the wheel uses, keeping one canonical
+		* color.
 		*/
 		function ColorInputs({ hue, sat, lit, onChange }) {
 			const [mode, setMode] = (0, react.useState)("hsl");
 			const [h, s, l] = hsvToHsl(hue, sat, lit);
 			const [r, g, b] = hslToRgb(h, s, l);
+			const hex = toHex$2([
+				r,
+				g,
+				b
+			]).toUpperCase();
+			const ink = (.2126 * r + .7152 * g + .0722 * b) / 255 > .55 ? "rgba(0,0,0,.78)" : "rgba(255,255,255,.92)";
 			const setHsl = (nh, ns, nl) => onChange(...hslToHsv(nh, ns, nl));
 			const setRgb = (nr, ng, nb) => {
 				const [nh, ns, nl] = rgbToHsl(nr, ng, nb);
@@ -3475,7 +3489,11 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dab-swatch-lg",
-						style: { background: `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)` }
+						style: {
+							background: `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`,
+							color: ink
+						},
+						children: hex
 					})
 				]
 			});
@@ -4377,17 +4395,14 @@ window.__ModuleLoader__.load({
 											sat: wheel[1],
 											lit: wheel[2],
 											onChange: onColor
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											className: "dab-inputs",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "dab-hex-caption",
-												children: toHex(hslToRgb(h, s, l)).toUpperCase()
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorInputs, {
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorInputs, {
 												hue: wheel[0],
 												sat: wheel[1],
 												lit: wheel[2],
 												onChange: onColor
-											})]
+											})
 										})]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4408,11 +4423,11 @@ window.__ModuleLoader__.load({
 												onClick: () => setPickerOpen(true),
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PipetteIcon, { size: 13 }), t("eyedropper")]
 											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 												type: "button",
 												className: "dab-btn dab-btn-ghost",
 												onClick: () => p.setRule(rule.id, { color: null }),
-												children: t("ruleColorNone")
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }), t("ruleColorNone")]
 											})
 										]
 									}),