wallpaper-engine-dsh 0.1.2 → 0.1.4

package/README.md

@@ -10,6 +10,7 @@ A DSH bundle that turns your local **Wallpaper Engine** library into the live ba
 - **Search** — filter the grid instantly by title or workshop id.
 - **Rotation lists** — any number of carousel lists, each with its own wallpapers, interval (1–120 min) and order (sequence/random). Your first playable Wallpaper Engine playlist is imported automatically; others can be imported into any list.
 - **Four live sliders** — wallpaper blur, scrim, border contrast, and glass frosting, all instant and persisted.
+- **Canvas fit** — cover/contain/stretch/original sizing plus five-way alignment for video and still wallpapers.
 - **Resource monitor** — FPS readout with a low-framerate hint, plus auto-pause when the tab is hidden or the battery runs low (both optional).
 - **Bilingual** — the settings UI follows the shell's Language preference (Chinese/English), with a manual override in the picker.
 - **Crossfade** — wallpaper switches and clearing fade smoothly instead of snapping.

package/README.zh.md

@@ -10,6 +10,7 @@
 - **搜索** —— 按标题或创意工坊 ID 即时筛选网格。
 - **轮播列表** —— 可建任意多个列表，各自拥有壁纸集合、切换间隔（1–120 分钟）和顺序（顺序/随机）。首次运行自动导入第一个可播放的 Wallpaper Engine 播放列表，其余列表可随时导入。
 - **四个实时滑杆** —— 壁纸模糊、暗化、边框对比、玻璃磨砂，即时生效并持久保存。
+- **画布排布** —— 视频与静态壁纸支持填充/适应/拉伸/原始四种排布和五向对齐。
 - **资源监控** —— 帧率读数与低帧率提示，页面隐藏或电量不足时自动暂停（均可开关）。
 - **中英双语** —— 设置界面跟随 DSH 的"语言"偏好自动切换，也可在面板内手动指定。
 - **交叉淡入** —— 切换与关闭都平滑过渡，不生硬跳变。

package/lib/client.js

@@ -83,6 +83,17 @@ window.__ModuleLoader__.load({
 		    lowFpsHint: "帧率偏低,可尝试暂停视频、增大壁纸模糊或换用静态壁纸",
 		    language: "语言",
 		    langAuto: "自动",
+		    fit: "排布",
+		    fitCover: "填充",
+		    fitContain: "适应",
+		    fitFill: "拉伸",
+		    fitNone: "原始",
+		    position: "对齐",
+		    posCenter: "居中",
+		    posTop: "顶部",
+		    posBottom: "底部",
+		    posLeft: "居左",
+		    posRight: "居右",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "列表「" + name + "」:" + total + " 项 · " + usable + " 可用 · 每 " + interval + " 分钟 · " + order,
 		    statusUsable: (n) => n + " 张可用壁纸",
@@ -148,6 +159,17 @@ window.__ModuleLoader__.load({
 		    lowFpsHint: "Low frame rate — try pausing the video, raising wallpaper blur, or using a still wallpaper",
 		    language: "Language",
 		    langAuto: "Auto",
+		    fit: "Fit",
+		    fitCover: "Cover",
+		    fitContain: "Contain",
+		    fitFill: "Stretch",
+		    fitNone: "Original",
+		    position: "Align",
+		    posCenter: "Center",
+		    posTop: "Top",
+		    posBottom: "Bottom",
+		    posLeft: "Left",
+		    posRight: "Right",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "List \"" + name + "\": " + total + " items · " + usable + " usable · every " + interval + " min · " + order,
 		    statusUsable: (n) => n + " usable wallpapers",
@@ -193,8 +215,13 @@ window.__ModuleLoader__.load({
 		  pauseOnHidden: true,
 		  pauseOnBattery: true,
 		  lang: "auto",
+		  fit: "cover",
+		  position: "center",
 		};
 
+		const FIT_MODES = ["cover", "contain", "fill", "none"];
+		const POSITIONS = ["center", "top", "bottom", "left", "right"];
+
 		// ── Persisted selection ─────────────────────────────────────────────────────
 		function clampNum(v, lo, hi, fallback) {
 		  return typeof v === "number" && isFinite(v) && v >= lo && v <= hi ? v : fallback;
@@ -238,6 +265,8 @@ window.__ModuleLoader__.load({
 		      pauseOnHidden: o.pauseOnHidden !== false,
 		      pauseOnBattery: o.pauseOnBattery !== false,
 		      lang: o.lang === "zh" || o.lang === "en" ? o.lang : "auto",
+		      fit: FIT_MODES.indexOf(o.fit) >= 0 ? o.fit : DEFAULTS.fit,
+		      position: POSITIONS.indexOf(o.position) >= 0 ? o.position : DEFAULTS.position,
 		    };
 		  } catch {
 		    return { id: "", ...DEFAULTS };
@@ -287,6 +316,8 @@ window.__ModuleLoader__.load({
 		      pauseOnHidden: selection.pauseOnHidden,
 		      pauseOnBattery: selection.pauseOnBattery,
 		      lang: selection.lang,
+		      fit: selection.fit,
+		      position: selection.position,
 		    }));
 		  } catch { /* storage full / blocked → session-only state, not fatal */ }
 		}
@@ -693,6 +724,10 @@ window.__ModuleLoader__.load({
 		  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);
+		  s.setProperty("--webg-position", selection.position);
 
 		  // Write the scrim colour directly too, then force a synchronous layout, so
 		  // slider feedback lands on this frame even on stalled compositors.
@@ -712,6 +747,8 @@ window.__ModuleLoader__.load({
 		  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);
 		  if (scrim) scrim.style.background = "";
 		}
@@ -838,6 +875,18 @@ window.__ModuleLoader__.load({
 		  const onBorder = (pct) => { selection.border = pct / 100; persistSelection(); applyEffects(); emit(); };
 		  const onBlur = (px) => { selection.blur = px; persistSelection(); applyEffects(); emit(); };
 		  const onWallpaperBlur = (px) => { selection.wallpaperBlur = px; persistSelection(); applyEffects(); emit(); };
+		  const onFit = (e) => {
+		    selection.fit = FIT_MODES.indexOf(e.target.value) >= 0 ? e.target.value : "cover";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
+		  const onPosition = (e) => {
+		    selection.position = POSITIONS.indexOf(e.target.value) >= 0 ? e.target.value : "center";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
 
 		  if (!sel.loaded) {
 		    return React.createElement("div", { className: "webg-picker" },
@@ -1073,6 +1122,28 @@ window.__ModuleLoader__.load({
 		    ),
 		    // ── Effects ──
 		    sel.id && React.createElement(React.Fragment, null,
+		      // Canvas fit only matters for video/still wallpapers — an iframe
+		      // ignores object-fit and always fills its layer.
+		      sel.type !== "web" && React.createElement("div", { className: "webg-row webg-fit-row" },
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.fit),
+		        React.createElement("select", {
+		          className: "webg-select webg-fit-select",
+		          value: sel.fit,
+		          onChange: onFit,
+		        },
+		        ...[t.fitCover, t.fitContain, t.fitFill, t.fitNone].map((label, i) =>
+		          React.createElement("option", { key: FIT_MODES[i], value: FIT_MODES[i] }, label),
+		        )),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.position),
+		        React.createElement("select", {
+		          className: "webg-select webg-position-select",
+		          value: sel.position,
+		          onChange: onPosition,
+		        },
+		        ...[t.posCenter, t.posTop, t.posBottom, t.posLeft, t.posRight].map((label, i) =>
+		          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) + "%"),
@@ -1128,7 +1199,9 @@ window.__ModuleLoader__.load({
 		  .webg-layer--enter { opacity: 0; }
 		  .webg-layer--leave { opacity: 0; }
 		  .webg-layer .webg-media {
-		    width: 100%; height: 100%; object-fit: cover; display: block;
+		    width: 100%; height: 100%; 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));
@@ -1189,11 +1262,14 @@ window.__ModuleLoader__.load({
 		  }
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */
-		  .webg-picker { display: flex; flex-direction: column; gap: 10px; }
+		  /* padding-top lifts the first row off the settings-section divider so the
+		     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; }
@@ -1206,21 +1282,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 {
@@ -1229,7 +1310,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; }
@@ -1238,11 +1319,11 @@ 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 { flex: 1; accent-color: var(--dsw-alias-brand-primary, rgb(15, 17, 21)); }
 		  .webg-slider-row { display: flex; align-items: center; gap: 8px; }
 
 		  .webg-monitor-row { gap: 14px; }
@@ -1268,23 +1349,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;
@@ -1292,7 +1373,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. */
@@ -1318,12 +1399,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.2",
+  "version": "0.1.4",
   "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",