wallpaper-engine-dsh 0.1.3 → 0.1.5

package/lib/client.js

@@ -722,8 +722,6 @@ window.__ModuleLoader__.load({
 		  s.setProperty("--webg-saturate", String(1.15 + selection.blur * 0.028));
 		  s.setProperty("--webg-glass-brightness", "1.04");
 		  s.setProperty("--webg-wallpaper-blur", selection.wallpaperBlur + "px");
-		  // Scaling compensates the transparent fringe CSS blur reveals at edges.
-		  s.setProperty("--webg-wallpaper-scale", (1 + selection.wallpaperBlur * 0.006).toFixed(4));
 		  // Canvas fit: object-fit/position for video and still wallpapers (iframes
 		  // ignore object-fit — web wallpapers always fill their layer).
 		  s.setProperty("--webg-fit", selection.fit);
@@ -746,7 +744,6 @@ window.__ModuleLoader__.load({
 		  s.removeProperty("--webg-saturate");
 		  s.removeProperty("--webg-glass-brightness");
 		  s.removeProperty("--webg-wallpaper-blur");
-		  s.removeProperty("--webg-wallpaper-scale");
 		  s.removeProperty("--webg-fit");
 		  s.removeProperty("--webg-position");
 		  const scrim = document.getElementById(SCRIM_ID);
@@ -755,7 +752,10 @@ window.__ModuleLoader__.load({
 
 		// ── Settings picker ─────────────────────────────────────────────────────────
 		function SliderRow(label, min, max, step, value, onInput, suffix) {
-		  return React.createElement("div", { className: "webg-row webg-slider-row" },
+		  // A Fragment of three cells — the surrounding .webg-effects grid keeps
+		  // every slider starting and ending at the same x regardless of how wide
+		  // the label text is (壁纸模糊 vs 暗化 vs Wallpaper blur…).
+		  return React.createElement(React.Fragment, null,
 		    React.createElement("span", { className: "webg-hint webg-label" }, label),
 		    React.createElement("input", {
 		      className: "webg-slider", type: "range",
@@ -1144,10 +1144,12 @@ window.__ModuleLoader__.load({
 		          React.createElement("option", { key: POSITIONS[i], value: POSITIONS[i] }, label),
 		        )),
 		      ),
-		      SliderRow(t.wallpaperBlur, 0, 60, 1, sel.wallpaperBlur, onWallpaperBlur, sel.wallpaperBlur + "px"),
-		      SliderRow(t.scrim, 0, 90, 5, Math.round(sel.scrim * 100), onScrim, Math.round(sel.scrim * 100) + "%"),
-		      SliderRow(t.border, 0, 90, 5, Math.round(sel.border * 100), onBorder, Math.round(sel.border * 100) + "%"),
-		      SliderRow(t.glass, 0, 40, 1, sel.blur, onBlur, sel.blur + "px"),
+		      React.createElement("div", { className: "webg-effects" },
+		        SliderRow(t.wallpaperBlur, 0, 60, 1, sel.wallpaperBlur, onWallpaperBlur, sel.wallpaperBlur + "px"),
+		        SliderRow(t.scrim, 0, 90, 5, Math.round(sel.scrim * 100), onScrim, Math.round(sel.scrim * 100) + "%"),
+		        SliderRow(t.border, 0, 90, 5, Math.round(sel.border * 100), onBorder, Math.round(sel.border * 100) + "%"),
+		        SliderRow(t.glass, 0, 40, 1, sel.blur, onBlur, sel.blur + "px"),
+		      ),
 		    ),
 		    // ── Resource monitor ──
 		    sel.id && React.createElement("div", { className: "webg-row webg-monitor-row" },
@@ -1198,14 +1200,21 @@ window.__ModuleLoader__.load({
 		  }
 		  .webg-layer--enter { opacity: 0; }
 		  .webg-layer--leave { opacity: 0; }
+		  /* Overscan: the media is LARGER than the layer by two blur radii on every
+		     side, so the transparent fringe CSS blur produces is clipped by the
+		     layer's overflow:hidden instead of compensated with a content-warping
+		     scale. A slight saturate keeps blurred colours from washing out. */
 		  .webg-layer .webg-media {
-		    width: 100%; height: 100%; object-fit: var(--webg-fit, cover);
+		    position: absolute;
+		    inset: calc(-2 * var(--webg-wallpaper-blur, 0px));
+		    width: calc(100% + 4 * var(--webg-wallpaper-blur, 0px));
+		    height: calc(100% + 4 * var(--webg-wallpaper-blur, 0px));
+		    max-width: none; max-height: none;
+		    object-fit: var(--webg-fit, cover);
 		    object-position: var(--webg-position, center);
 		    display: block;
 		    background: transparent; border: 0;
-		    filter: blur(var(--webg-wallpaper-blur, 0px));
-		    transform: scale(var(--webg-wallpaper-scale, 1));
-		    transform-origin: center;
+		    filter: blur(var(--webg-wallpaper-blur, 0px)) saturate(1.06);
 		  }
 
 		  /* Scrim: above the wallpaper (-1 > -2), below the UI. */
@@ -1263,15 +1272,16 @@ window.__ModuleLoader__.load({
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */
 		  /* padding-top lifts the first row off the settings-section divider so the
-		     search/language row breathes; gap keeps every row evenly spaced. */
+		     search/language row breathes; gap keeps every row evenly spaced.
+		     Type scale follows the shell: 14px body → 13px controls → 12px hints. */
 		  .webg-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
 		  .webg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-		  .webg-hint { font-size: 0.8em; opacity: 0.7; color: var(--dsw-alias-label-tertiary, inherit); }
+		  .webg-hint { font-size: 12px; opacity: 0.7; color: var(--dsw-alias-label-tertiary, inherit); }
 		  .webg-error {
-		    font-size: 0.85em;
+		    font-size: 13px;
 		    color: var(--dsw-alias-state-error-primary, #d44);
 		  }
-		  .webg-label { min-width: 28px; }
+		  .webg-label { white-space: nowrap; }
 		  .webg-value { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
 
 		  .webg-btn {
@@ -1281,21 +1291,26 @@ window.__ModuleLoader__.load({
 		    border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
 		    background: var(--dsw-alias-bg-layer-1, rgba(128, 128, 128, 0.12));
 		    color: var(--dsw-alias-label-primary, inherit);
-		    font-size: 0.85em;
+		    font-size: 12px;
 		    transition: background-color 120ms ease, border-color 120ms ease;
 		  }
+		  /* Ghost-button hover rides the shell's own interactive-hover token. */
 		  .webg-btn:hover:not(:disabled) {
-		    background: var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.2));
+		    background: var(--dsw-alias-interactive-bg-hover,
+		      var(--dsw-alias-bg-layer-2, rgba(128, 128, 128, 0.2)));
 		    border-color: var(--dsw-alias-border-l1, rgba(128, 128, 128, 0.5));
 		  }
 		  .webg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+		  /* brand-primary is monochrome (near-black light / near-white dark), so
+		     the label must use its inverse token — never a hardcoded white. */
 		  .webg-btn--primary {
-		    background: var(--dsw-alias-brand-primary, #3964fe);
+		    background: var(--dsw-alias-brand-primary, rgb(15, 17, 21));
 		    border-color: transparent;
-		    color: #fff;
+		    color: var(--dsw-alias-brand-primary-invert, rgb(249, 250, 251));
 		  }
 		  .webg-btn--primary:hover:not(:disabled) {
-		    background: var(--dsw-alias-brand-primary-hover, #4f74ff);
+		    background: var(--dsw-alias-brand-primary, rgb(15, 17, 21));
+		    opacity: 0.85;
 		  }
 
 		  .webg-select, .webg-text {
@@ -1304,7 +1319,7 @@ window.__ModuleLoader__.load({
 		    border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
 		    background: var(--dsw-alias-bg-layer-1, rgba(128, 128, 128, 0.12));
 		    color: var(--dsw-alias-label-primary, inherit);
-		    font-size: 0.85em;
+		    font-size: 13px;
 		  }
 		  .webg-text { flex: 1; min-width: 0; }
 		  .webg-search { max-width: 320px; }
@@ -1313,12 +1328,21 @@ window.__ModuleLoader__.load({
 		  .webg-rotation-interval { margin-left: auto; }
 		  .webg-toggle {
 		    display: inline-flex; align-items: center; gap: 6px;
-		    accent-color: var(--dsw-alias-brand-primary, #3964fe);
-		    font-size: 0.85em; cursor: pointer;
+		    accent-color: var(--dsw-alias-brand-primary, rgb(15, 17, 21));
+		    font-size: 13px; cursor: pointer;
 		  }
 
-		  .webg-slider { flex: 1; accent-color: var(--dsw-alias-brand-primary, #3964fe); }
-		  .webg-slider-row { display: flex; align-items: center; gap: 8px; }
+		  .webg-slider { width: 100%; accent-color: var(--dsw-alias-brand-primary, rgb(15, 17, 21)); }
+		  /* Effects grid: one shared grid across all slider rows, so every slider
+		     starts and ends at the same x no matter how wide its label is. */
+		  .webg-effects {
+		    display: grid;
+		    grid-template-columns: max-content 1fr 3.2em;
+		    gap: 8px 10px;
+		    align-items: center;
+		  }
+		  .webg-effects .webg-label { white-space: nowrap; }
+		  .webg-effects .webg-value { text-align: right; }
 
 		  .webg-monitor-row { gap: 14px; }
 		  .webg-fps { font-variant-numeric: tabular-nums; }
@@ -1343,23 +1367,23 @@ window.__ModuleLoader__.load({
 		  }
 		  .webg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
 		  .webg-card--selected {
-		    outline: 2px solid var(--dsw-alias-brand-primary, #3964fe);
+		    outline: 2px solid var(--dsw-alias-brand-primary, rgb(15, 17, 21));
 		    outline-offset: -2px;
 		  }
 		  .webg-card-close {
 		    position: absolute; inset: 0;
 		    display: flex; align-items: center; justify-content: center;
-		    font-size: 0.8em; color: var(--dsw-alias-label-secondary, #888);
+		    font-size: 12px; color: var(--dsw-alias-label-secondary, #888);
 		  }
 		  .webg-card-type {
 		    position: absolute; top: 4px; right: 4px;
 		    padding: 1px 6px; border-radius: 4px;
-		    font-size: 0.65em; line-height: 1.5;
+		    font-size: 10px; line-height: 1.5;
 		    color: #fff; background: rgba(0, 0, 0, 0.5);
 		  }
 		  .webg-card-title {
 		    position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
-		    font-size: 0.7em; line-height: 1.2; color: #fff;
+		    font-size: 11px; line-height: 1.2; color: #fff;
 		    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
 		    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
 		    text-align: left;
@@ -1367,7 +1391,7 @@ window.__ModuleLoader__.load({
 		  .webg-card-placeholder {
 		    position: absolute; inset: 0;
 		    display: flex; align-items: center; justify-content: center;
-		    font-size: 0.72em; opacity: 0.55;
+		    font-size: 11px; opacity: 0.55;
 		  }
 
 		  /* Rotation group editor. */
@@ -1393,12 +1417,14 @@ window.__ModuleLoader__.load({
 		  .webg-editor-card:hover { transform: translateY(-1px); }
 		  .webg-editor-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
 		  .webg-editor-card--checked {
-		    outline: 2px solid var(--dsw-alias-brand-primary, #3964fe);
+		    outline: 2px solid var(--dsw-alias-brand-primary, rgb(15, 17, 21));
 		    outline-offset: -2px;
 		  }
 		  .webg-editor-check {
 		    position: absolute; top: 4px; left: 4px; width: 18px; height: 18px;
-		    border-radius: 4px; background: var(--dsw-alias-brand-primary, #3964fe); color: #fff;
+		    border-radius: 4px;
+		    background: var(--dsw-alias-brand-primary, rgb(15, 17, 21));
+		    color: var(--dsw-alias-brand-primary-invert, rgb(249, 250, 251));
 		    font-size: 12px; line-height: 18px; text-align: center;
 		  }
 		`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Wallpaper Engine Video/Web wallpapers as the DSH web GUI background — discovery, sandboxed rendering, rotation lists, liquid-glass tuning.",
   "type": "module",
   "main": "lib/index.js",