@dfy-plugins/dsh-wallpaper 0.1.2

package/lib/client.js

@@ -0,0 +1,1245 @@
+window.__ModuleLoader__.load({
+  id: "@dfy-plugins/dsh-wallpaper",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.tsx
+var client_exports = {};
+__export(client_exports, {
+  apply: () => apply,
+  inject: () => inject,
+  name: () => name
+});
+module.exports = __toCommonJS(client_exports);
+var import_react = __toESM(require("react"), 1);
+var import_client = require("react-dom/client");
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+
+// src/logic.ts
+var WALLPAPER_MODES = [
+  "cover",
+  "contain",
+  "stretch",
+  "fit-width",
+  "fit-height",
+  "center",
+  "tile"
+];
+var WALLPAPER_POSITIONS = [
+  "left top",
+  "center top",
+  "right top",
+  "left center",
+  "center center",
+  "right center",
+  "left bottom",
+  "center bottom",
+  "right bottom"
+];
+var WALLPAPER_REGIONS = ["settings", "sidebar"];
+var DEFAULT_SURFACE_SETTINGS = {
+  enabled: true,
+  imageName: null,
+  mode: "cover",
+  position: "center center",
+  offsetXPercent: 0,
+  offsetYPercent: 0,
+  imageOpacity: 1,
+  blur: 0,
+  maskColor: "#000000",
+  maskOpacity: 0.18,
+  surfaceOpacity: 0.56
+};
+function defaultRegionSettings() {
+  const { enabled: _enabled, ...appearance } = DEFAULT_SURFACE_SETTINGS;
+  return { ...appearance, source: "none", imageOpacity: 0.45, blur: 8, maskOpacity: 0, surfaceOpacity: 0.95 };
+}
+var DEFAULT_SETTINGS = {
+  ...DEFAULT_SURFACE_SETTINGS,
+  regions: { settings: defaultRegionSettings(), sidebar: defaultRegionSettings() }
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function clamp(value, fallback, min, max) {
+  const parsed = typeof value === "number" ? value : Number.NaN;
+  if (!Number.isFinite(parsed)) return fallback;
+  return Math.min(max, Math.max(min, parsed));
+}
+function isMode(value) {
+  return typeof value === "string" && WALLPAPER_MODES.includes(value);
+}
+function isPosition(value) {
+  return typeof value === "string" && WALLPAPER_POSITIONS.includes(value);
+}
+function normalizeHexColor(value) {
+  if (typeof value !== "string") return DEFAULT_SETTINGS.maskColor;
+  const trimmed = value.trim();
+  if (/^#[0-9a-f]{6}$/i.test(trimmed)) return trimmed.toLowerCase();
+  if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+    const [r, g, b] = trimmed.slice(1).split("");
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  return DEFAULT_SETTINGS.maskColor;
+}
+function normalizeSurface(value, maxSurfaceOpacity = 0.95) {
+  const input = isRecord(value) ? value : {};
+  const rawName = typeof input.imageName === "string" ? input.imageName.trim() : "";
+  return {
+    enabled: typeof input.enabled === "boolean" ? input.enabled : DEFAULT_SETTINGS.enabled,
+    imageName: rawName.length > 0 ? rawName.slice(0, 260) : null,
+    mode: isMode(input.mode) ? input.mode : DEFAULT_SETTINGS.mode,
+    position: isPosition(input.position) ? input.position : DEFAULT_SETTINGS.position,
+    offsetXPercent: clamp(input.offsetXPercent, DEFAULT_SETTINGS.offsetXPercent, -100, 100),
+    offsetYPercent: clamp(input.offsetYPercent, DEFAULT_SETTINGS.offsetYPercent, -100, 100),
+    imageOpacity: clamp(input.imageOpacity, DEFAULT_SETTINGS.imageOpacity, 0, 1),
+    blur: clamp(input.blur, DEFAULT_SETTINGS.blur, 0, 40),
+    maskColor: normalizeHexColor(input.maskColor),
+    maskOpacity: clamp(input.maskOpacity, DEFAULT_SETTINGS.maskOpacity, 0, 0.9),
+    surfaceOpacity: clamp(input.surfaceOpacity, DEFAULT_SETTINGS.surfaceOpacity, 0, maxSurfaceOpacity)
+  };
+}
+function normalizeSettings(value) {
+  const input = isRecord(value) ? value : {};
+  const regions = isRecord(input.regions) ? input.regions : {};
+  const region = (key) => {
+    const value2 = isRecord(regions[key]) ? regions[key] : {};
+    const { enabled: _enabled, ...appearance } = normalizeSurface({ ...defaultRegionSettings(), ...value2 }, 1);
+    return { ...appearance, source: value2.source === "global" || value2.source === "custom" ? value2.source : "none" };
+  };
+  return { ...normalizeSurface(input), regions: { settings: region("settings"), sidebar: region("sidebar") } };
+}
+function offsetAxis(anchor, offset, viewportUnit) {
+  if (offset === 0) return anchor;
+  const operator = offset < 0 ? "-" : "+";
+  return `calc(${anchor} ${operator} ${Math.abs(offset)}${viewportUnit})`;
+}
+function backgroundPositionWithOffset(position, offsetXPercent, offsetYPercent) {
+  const [horizontal, vertical] = position.split(" ");
+  const horizontalAnchor = { left: "0%", center: "50%", right: "100%" }[horizontal];
+  const verticalAnchor = { top: "0%", center: "50%", bottom: "100%" }[vertical];
+  return `${offsetAxis(horizontalAnchor, offsetXPercent, "vw")} ${offsetAxis(verticalAnchor, offsetYPercent, "vh")}`;
+}
+function modeStyle(mode) {
+  switch (mode) {
+    case "contain":
+      return { size: "contain", repeat: "no-repeat" };
+    case "stretch":
+      return { size: "100% 100%", repeat: "no-repeat" };
+    case "fit-width":
+      return { size: "100% auto", repeat: "no-repeat" };
+    case "fit-height":
+      return { size: "auto 100%", repeat: "no-repeat" };
+    case "center":
+      return { size: "auto", repeat: "no-repeat" };
+    case "tile":
+      return { size: "auto", repeat: "repeat" };
+    case "cover":
+    default:
+      return { size: "cover", repeat: "no-repeat" };
+  }
+}
+function hexToRgb(value) {
+  const color = normalizeHexColor(value).slice(1);
+  return [
+    Number.parseInt(color.slice(0, 2), 16),
+    Number.parseInt(color.slice(2, 4), 16),
+    Number.parseInt(color.slice(4, 6), 16)
+  ];
+}
+function surfaceLayerAlphas(base, maxOpacity = 0.95) {
+  const normalized = clamp(base, DEFAULT_SETTINGS.surfaceOpacity, 0, maxOpacity);
+  return [normalized, Math.max(normalized, Math.min(0.97, normalized + 0.1)), Math.max(normalized, Math.min(0.99, normalized + 0.2))];
+}
+
+// src/regions.ts
+var REGIONS_ATTRIBUTE = "data-dsh-wallpaper-regions";
+var REGION_SELECTORS = {
+  settings: '[role="dialog"][aria-modal="true"]:has([data-slot="settings.header"])',
+  sidebar: "[data-sidebar-right-panel]"
+};
+var PROPERTIES = ["image", "size", "repeat", "position", "opacity", "blur", "mask-rgb", "mask-opacity", "surface-1", "surface-2", "surface-3"];
+var REGION_VARIABLES = WALLPAPER_REGIONS.flatMap((region) => PROPERTIES.map((property) => `--dsh-wallpaper-${region}-${property}`));
+function regionVariables(settings, globalUrl, images) {
+  const variables = {};
+  for (const region of WALLPAPER_REGIONS) {
+    const value = settings.regions[region];
+    const url = value.source === "custom" ? images[region] : value.source === "global" ? globalUrl : null;
+    const style = modeStyle(value.mode);
+    const surfaces = surfaceLayerAlphas(value.surfaceOpacity, 1);
+    const values = [
+      url === null ? "none" : `url(${JSON.stringify(url)})`,
+      style.size,
+      style.repeat,
+      backgroundPositionWithOffset(value.position, value.offsetXPercent, value.offsetYPercent),
+      String(value.imageOpacity),
+      `${value.blur}px`,
+      hexToRgb(value.maskColor).join(" "),
+      String(url === null ? 0 : value.maskOpacity),
+      ...surfaces.map(String)
+    ];
+    PROPERTIES.forEach((property, index) => {
+      variables[`--dsh-wallpaper-${region}-${property}`] = values[index];
+    });
+  }
+  return variables;
+}
+var REGION_STYLES = `
+body[${REGIONS_ATTRIBUTE}] { --dsh-wallpaper-region-rgb: 255 255 255; }
+body[${REGIONS_ATTRIBUTE}][data-ds-dark-theme] { --dsh-wallpaper-region-rgb: 18 22 32; }
+${WALLPAPER_REGIONS.map((region) => {
+  const selector = `body[${REGIONS_ATTRIBUTE}] ${REGION_SELECTORS[region]}`;
+  const variable = (name2) => `var(--dsh-wallpaper-${region}-${name2})`;
+  return `
+${selector} {
+  isolation: isolate;
+  background: rgb(var(--dsh-wallpaper-region-rgb) / ${variable("surface-1")});
+  --dsh-wallpaper-local-1: rgb(var(--dsh-wallpaper-region-rgb) / ${variable("surface-1")});
+  --dsh-wallpaper-local-2: rgb(var(--dsh-wallpaper-region-rgb) / ${variable("surface-2")});
+  --dsh-wallpaper-local-3: rgb(var(--dsh-wallpaper-region-rgb) / ${variable("surface-3")});
+  --dsw-alias-bg-base: transparent;
+  --dsw-specific-sidebar-fill: transparent;
+  --dsw-alias-bg-layer-1: var(--dsh-wallpaper-local-1);
+  --dsw-alias-bg-layer-2: var(--dsh-wallpaper-local-2);
+  --dsw-alias-bg-layer-3: var(--dsh-wallpaper-local-3);
+  --dsw-alias-bg-module-platform: var(--dsh-wallpaper-local-2);
+  --dsw-specific-input-major: var(--dsh-wallpaper-local-2);
+  --dsw-specific-selector: var(--dsh-wallpaper-local-2);
+  --dsw-specific-tip: var(--dsh-wallpaper-local-2);
+  --dsw-alias-button-elevated-fill: var(--dsh-wallpaper-local-2);
+  --dsw-alias-button-floating-fill: var(--dsh-wallpaper-local-3);
+  --dsw-alias-markdown-code-block: var(--dsh-wallpaper-local-2);
+  --dsw-alias-markdown-code-block-banner: var(--dsh-wallpaper-local-3);
+  --dsw-alias-markdown-inline-code: var(--dsh-wallpaper-local-2);
+}
+${selector}::before, ${selector}::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
+}
+${selector}::before {
+  z-index: -2;
+  background-image: ${variable("image")};
+  background-size: ${variable("size")};
+  background-repeat: ${variable("repeat")};
+  background-position: ${variable("position")};
+  opacity: ${variable("opacity")};
+  filter: blur(${variable("blur")});
+  clip-path: inset(0);
+}
+${selector}::after {
+  z-index: -1; background: rgb(${variable("mask-rgb")} / ${variable("mask-opacity")});
+}`;
+}).join("\n")}
+`;
+
+// src/client.tsx
+var name = "wallpaper";
+var inject = ["slots"];
+var OWNER = "dsh-wallpaper";
+var STYLE_ID = "@dfy-plugins/dsh-wallpaper";
+var ACTIVE_ATTRIBUTE = "data-dsh-wallpaper-active";
+var API_BASE = "/api/dsh-wallpaper";
+var SETTINGS_DEBOUNCE_MS = 180;
+var PANEL_POSITION_KEY = "dsh-wallpaper.panel-position.v1";
+var PANEL_MARGIN = 12;
+var PAGE_RUNTIME_KEY = "__xiao443DshWallpaperPageRuntime__";
+var CLIENT_BUILD_TOKEN = Object.freeze({});
+var BODY_VARIABLES = [
+  "--dsh-wallpaper-image-opacity",
+  "--dsh-wallpaper-blur",
+  "--dsh-wallpaper-inset",
+  "--dsh-wallpaper-mask-rgb",
+  "--dsh-wallpaper-mask-opacity",
+  "--dsh-wallpaper-surface-alpha-1",
+  "--dsh-wallpaper-surface-alpha-2",
+  "--dsh-wallpaper-surface-alpha-3"
+];
+var MODE_OPTIONS = [
+  { value: "cover", label: "\u8986\u76D6\u7A97\u53E3", hint: "\u586B\u6EE1\u7A97\u53E3\uFF0C\u5FC5\u8981\u65F6\u88C1\u5207\u56FE\u7247" },
+  { value: "contain", label: "\u5B8C\u6574\u663E\u793A", hint: "\u663E\u793A\u5B8C\u6574\u56FE\u7247\uFF0C\u53EF\u80FD\u7559\u6709\u7A7A\u767D" },
+  { value: "stretch", label: "\u62C9\u4F38\u586B\u6EE1", hint: "\u5FFD\u7565\u539F\u59CB\u6BD4\u4F8B\u94FA\u6EE1\u7A97\u53E3" },
+  { value: "fit-width", label: "\u9002\u5E94\u5BBD\u5EA6", hint: "\u5BBD\u5EA6\u94FA\u6EE1\uFF0C\u9AD8\u5EA6\u6309\u6BD4\u4F8B\u7F29\u653E" },
+  { value: "fit-height", label: "\u9002\u5E94\u9AD8\u5EA6", hint: "\u9AD8\u5EA6\u94FA\u6EE1\uFF0C\u5BBD\u5EA6\u6309\u6BD4\u4F8B\u7F29\u653E" },
+  { value: "center", label: "\u539F\u59CB\u5927\u5C0F", hint: "\u6309\u539F\u59CB\u5C3A\u5BF8\u663E\u793A\uFF0C\u4E0D\u7F29\u653E" },
+  { value: "tile", label: "\u5E73\u94FA", hint: "\u6309\u539F\u59CB\u5C3A\u5BF8\u91CD\u590D\u56FE\u7247" }
+];
+var POSITION_OPTIONS = [
+  { value: "left top", label: "\u5DE6\u4E0A" },
+  { value: "center top", label: "\u9876\u90E8\u5C45\u4E2D" },
+  { value: "right top", label: "\u53F3\u4E0A" },
+  { value: "left center", label: "\u5DE6\u4FA7\u5C45\u4E2D" },
+  { value: "center center", label: "\u6B63\u4E2D" },
+  { value: "right center", label: "\u53F3\u4FA7\u5C45\u4E2D" },
+  { value: "left bottom", label: "\u5DE6\u4E0B" },
+  { value: "center bottom", label: "\u5E95\u90E8\u5C45\u4E2D" },
+  { value: "right bottom", label: "\u53F3\u4E0B" }
+];
+var STYLES = `
+${REGION_STYLES}
+body[${ACTIVE_ATTRIBUTE}] {
+  isolation: isolate;
+  --dsh-wallpaper-surface-rgb: 255 255 255;
+  --dsh-wallpaper-surface-1: rgb(var(--dsh-wallpaper-surface-rgb) / var(--dsh-wallpaper-surface-alpha-1));
+  --dsh-wallpaper-surface-2: rgb(var(--dsh-wallpaper-surface-rgb) / var(--dsh-wallpaper-surface-alpha-2));
+  --dsh-wallpaper-surface-3: rgb(var(--dsh-wallpaper-surface-rgb) / var(--dsh-wallpaper-surface-alpha-3));
+  --dsw-alias-bg-base: transparent;
+  --dsw-specific-sidebar-fill: transparent;
+  --dsw-alias-bg-layer-1: var(--dsh-wallpaper-surface-1);
+  --dsw-alias-bg-layer-2: var(--dsh-wallpaper-surface-2);
+  --dsw-alias-bg-layer-3: var(--dsh-wallpaper-surface-3);
+  --dsw-alias-bg-module-platform: var(--dsh-wallpaper-surface-2);
+  --dsw-specific-input-major: var(--dsh-wallpaper-surface-2);
+  --dsw-specific-selector: var(--dsh-wallpaper-surface-2);
+  --dsw-specific-tip: var(--dsh-wallpaper-surface-2);
+  --dsw-alias-button-elevated-fill: var(--dsh-wallpaper-surface-2);
+  --dsw-alias-button-floating-fill: var(--dsh-wallpaper-surface-3);
+  --dsw-alias-markdown-code-block: var(--dsh-wallpaper-surface-2);
+  --dsw-alias-markdown-code-block-banner: var(--dsh-wallpaper-surface-3);
+  --dsw-alias-markdown-inline-code: var(--dsh-wallpaper-surface-2);
+}
+body[${ACTIVE_ATTRIBUTE}][data-ds-dark-theme] {
+  --dsh-wallpaper-surface-rgb: 18 22 32;
+}
+[data-dsh-wallpaper-owner='${OWNER}'][data-dsh-wallpaper-layer] {
+  display: none;
+  position: fixed;
+  pointer-events: none;
+  user-select: none;
+}
+body[${ACTIVE_ATTRIBUTE}] > [data-dsh-wallpaper-owner='${OWNER}'][data-dsh-wallpaper-layer='media'] {
+  display: block;
+  inset: var(--dsh-wallpaper-inset, 0px);
+  z-index: -2;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: blur(var(--dsh-wallpaper-blur, 0px));
+  opacity: var(--dsh-wallpaper-image-opacity, 1);
+}
+body[${ACTIVE_ATTRIBUTE}] > [data-dsh-wallpaper-owner='${OWNER}'][data-dsh-wallpaper-layer='mask'] {
+  display: block;
+  inset: 0;
+  z-index: -1;
+  background: rgb(var(--dsh-wallpaper-mask-rgb, 0 0 0) / var(--dsh-wallpaper-mask-opacity, .18));
+}
+
+[data-dsh-wallpaper-owner='${OWNER}'][data-dsh-wallpaper-panel-root] {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  pointer-events: none;
+}
+.dsh-wallpaper-floating {
+  position: absolute;
+  display: flex;
+  width: min(480px, calc(100vw - 24px));
+  max-height: min(760px, calc(100vh - 24px));
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(34, 38, 48, .14);
+  border-radius: 18px;
+  background: rgba(249, 250, 252, .91);
+  box-shadow: 0 22px 64px rgba(25, 31, 43, .22), 0 4px 16px rgba(25, 31, 43, .12);
+  color: var(--dsw-alias-label-primary);
+  pointer-events: auto;
+  backdrop-filter: blur(24px) saturate(1.18);
+  -webkit-backdrop-filter: blur(24px) saturate(1.18);
+}
+body[data-ds-dark-theme] .dsh-wallpaper-floating {
+  border-color: rgba(255, 255, 255, .12);
+  background: rgba(28, 30, 36, .91);
+  box-shadow: 0 24px 72px rgba(0, 0, 0, .48), 0 4px 18px rgba(0, 0, 0, .28);
+}
+.dsh-wallpaper-floating:focus { outline: none; }
+.dsh-wallpaper-floating-header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 14px 13px 18px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+  cursor: default;
+  touch-action: none;
+  user-select: none;
+}
+.dsh-wallpaper-floating-heading { min-width: 0; }
+.dsh-wallpaper-floating-title { margin: 0; font-size: 16px; font-weight: 680; line-height: 23px; }
+.dsh-wallpaper-floating-subtitle { overflow: hidden; margin: 1px 0 0; color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-wallpaper-close {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 28px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.dsh-wallpaper-close:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-wallpaper-floating-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
+.dsh-wallpaper-settings { padding: 16px 18px 20px; color: inherit; }
+.dsh-wallpaper-targets { display:flex; gap:4px; padding:4px; margin-bottom:16px; border-radius:12px; background:var(--dsw-alias-bg-module-platform); }
+.dsh-wallpaper-targets button { flex:1; padding:9px 8px; border:0; border-radius:9px; background:transparent; color:var(--dsw-alias-label-secondary); font:inherit; font-size:13px; cursor:pointer; }
+.dsh-wallpaper-targets button[aria-pressed=true] { background:var(--dsw-alias-bg-layer-3); color:var(--dsw-alias-label-primary); box-shadow:0 1px 4px rgba(0,0,0,.08); font-weight:600; }
+.dsh-wallpaper-targets button:focus-visible { outline:2px solid var(--dsw-alias-state-business-primary); outline-offset:1px; }
+.dsh-wallpaper-region-source { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
+.dsh-wallpaper-region-source .dsh-wallpaper-source-hint { margin: 0; }
+.dsh-wallpaper-controls { min-width:0; margin:0; padding:0; border:0; }
+.dsh-wallpaper-controls:disabled { opacity:.6; }
+.dsh-wallpaper-launcher { padding: 20px; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
+.dsh-wallpaper-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 16px; background: rgba(127,127,127,.06); overflow: hidden; }
+.dsh-wallpaper-source { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 14px; align-items: center; padding: 14px; }
+.dsh-wallpaper-preview { aspect-ratio: 16 / 10; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; background-color: rgba(127,127,127,.1); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
+.dsh-wallpaper-settings[data-wallpaper-target='sidebar'] .dsh-wallpaper-preview { aspect-ratio: 2 / 3; }
+.dsh-wallpaper-preview[data-empty] { display: grid; place-items: center; color: var(--dsw-alias-label-tertiary); font-size: 12px; }
+.dsh-wallpaper-source-copy { min-width: 0; }
+.dsh-wallpaper-source-name { overflow: hidden; margin-bottom: 4px; color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-wallpaper-source-hint { margin: 0 0 12px; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.dsh-wallpaper-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.dsh-wallpaper-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-button-elevated-fill); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
+.dsh-wallpaper-button:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-solid); }
+.dsh-wallpaper-button:disabled { cursor: wait; opacity: .48; }
+.dsh-wallpaper-button[data-danger] { color: var(--dsw-alias-state-error-primary); }
+.dsh-wallpaper-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.dsh-wallpaper-error { margin: 12px 16px 0; padding: 9px 11px; border-radius: 9px; color: var(--dsw-alias-state-error-primary); background: rgba(229,72,77,.1); font-size: 12px; line-height: 18px; }
+.dsh-wallpaper-enable { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 16px; border-top: 1px solid var(--dsw-alias-border-l1); }
+.dsh-wallpaper-enable-copy { min-width: 0; }
+.dsh-wallpaper-enable-title { font-size: 13px; font-weight: 600; line-height: 20px; }
+.dsh-wallpaper-enable-hint { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.dsh-wallpaper-switch { position: relative; flex: none; width: 40px; height: 22px; }
+.dsh-wallpaper-switch input { position: absolute; opacity: 0; }
+.dsh-wallpaper-switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(127,127,127,.32); cursor: pointer; transition: background .15s ease; }
+.dsh-wallpaper-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
+.dsh-wallpaper-switch input:checked + span { background: var(--dsw-alias-state-business-primary); }
+.dsh-wallpaper-switch input:checked + span::after { transform: translateX(18px); }
+.dsh-wallpaper-switch input:disabled + span { cursor: not-allowed; opacity: .45; }
+.dsh-wallpaper-section { margin-top: 20px; }
+.dsh-wallpaper-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
+.dsh-wallpaper-section-title { margin: 0; font-size: 13px; font-weight: 650; }
+.dsh-wallpaper-section-note { color: var(--dsw-alias-label-tertiary); font-size: 11px; }
+.dsh-wallpaper-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
+.dsh-wallpaper-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 14px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; background: rgba(127,127,127,.045); }
+.dsh-wallpaper-field-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--dsw-alias-label-secondary); font-size: 12px; font-weight: 600; }
+.dsh-wallpaper-field-output { color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; }
+.dsh-wallpaper-select-menu { display: flex; width: 100%; }
+.dsh-wallpaper-select-trigger { display: flex; width: 100%; height: 36px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 0; border-radius: 18px; outline: none; background: var(--dsw-alias-bg-module-platform); color: inherit; cursor: pointer; font: inherit; font-size: 14px; line-height: 22px; }
+.dsh-wallpaper-select-trigger:hover, .dsh-wallpaper-select-trigger[aria-expanded='true'] { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-wallpaper-select-trigger:focus-visible { box-shadow: 0 0 0 2px var(--dsw-alias-state-business-primary); }
+.dsh-wallpaper-select-trigger svg { flex: none; }
+.dsh-wallpaper-range-row { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 10px; align-items: center; }
+.dsh-wallpaper-field input[type='range'] { width: 100%; accent-color: var(--dsw-alias-state-business-primary); }
+.dsh-wallpaper-number { text-align: right; color: var(--dsw-alias-label-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
+.dsh-wallpaper-number-input { box-sizing: border-box; width: 64px; height: 30px; padding: 0 6px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; outline: none; background: var(--dsw-alias-bg-layer-1); color: inherit; text-align: right; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
+.dsh-wallpaper-number-input:focus-visible { border-color: var(--dsw-alias-state-business-primary); }
+.dsh-wallpaper-offset-row { grid-template-columns: minmax(0,1fr) 64px; }
+.dsh-wallpaper-color-row { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; }
+.dsh-wallpaper-color { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 9px; background: transparent; cursor: pointer; }
+.dsh-wallpaper-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
+.dsh-wallpaper-footer .dsh-wallpaper-storage-note { flex: 1 1 200px; min-width: 0; }
+.dsh-wallpaper-footer .dsh-wallpaper-button { flex: none; margin-left: auto; white-space: nowrap; }
+.dsh-wallpaper-storage-note { color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 17px; }
+@media (max-width: 680px) {
+  .dsh-wallpaper-floating { border-radius: 15px; }
+  .dsh-wallpaper-source { grid-template-columns: 1fr; }
+  .dsh-wallpaper-preview { max-width: 260px; }
+  .dsh-wallpaper-grid { grid-template-columns: 1fr; }
+  .dsh-wallpaper-footer { align-items: stretch; flex-direction: column; }
+  .dsh-wallpaper-footer .dsh-wallpaper-storage-note { flex-basis: auto; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dsh-wallpaper-switch span, .dsh-wallpaper-switch span::after { transition: none; }
+}
+`;
+function installStyles() {
+  const existing = document.querySelector(`style[data-plugin=${JSON.stringify(STYLE_ID)}]`);
+  const tag = document.createElement("style");
+  tag.dataset.plugin = STYLE_ID;
+  tag.textContent = STYLES;
+  if (existing === null) document.head.appendChild(tag);
+  else existing.replaceWith(tag);
+  return () => tag.remove();
+}
+async function readApiState(response) {
+  const payload = await response.json();
+  if (!response.ok) {
+    throw new Error(typeof payload.error === "string" ? payload.error : `HTTP ${response.status}`);
+  }
+  const settings = normalizeSettings(payload.settings);
+  const imageUrl = typeof payload.imageUrl === "string" ? payload.imageUrl : null;
+  const hasImage = payload.hasImage === true && imageUrl !== null;
+  const regionImage = (region) => {
+    const image = payload.regionImages?.[region];
+    return { hasImage: image?.hasImage === true, imageUrl: image?.hasImage === true && typeof image.imageUrl === "string" ? image.imageUrl : null };
+  };
+  return { settings, hasImage, imageUrl: hasImage ? imageUrl : null, regionImages: { settings: regionImage("settings"), sidebar: regionImage("sidebar") } };
+}
+async function validateImage(blob) {
+  const url = URL.createObjectURL(blob);
+  try {
+    await new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve();
+      image.onerror = () => reject(new Error("\u65E0\u6CD5\u8BFB\u53D6\u8FD9\u5F20\u56FE\u7247"));
+      image.src = url;
+    });
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function cssUrl(url) {
+  return `url(${JSON.stringify(url)})`;
+}
+var WallpaperController = class {
+  settings = { ...DEFAULT_SETTINGS };
+  imageUrl = null;
+  regionImages = { settings: null, sidebar: null };
+  panelOpen = false;
+  mounted = false;
+  disposed = false;
+  persistTimer = null;
+  persistTail = Promise.resolve();
+  listeners = /* @__PURE__ */ new Set();
+  mediaLayer = null;
+  maskLayer = null;
+  panelHost = null;
+  panelRoot = null;
+  snapshot = {
+    settings: this.settings,
+    hasImage: false,
+    previewUrl: null,
+    regionImages: this.regionImages,
+    panelOpen: false,
+    loading: true,
+    error: null
+  };
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  getSnapshot = () => this.snapshot;
+  mount() {
+    if (this.mounted) return;
+    this.mounted = true;
+    this.disposed = false;
+    document.querySelectorAll(`[data-dsh-wallpaper-owner='${OWNER}']`).forEach((node) => node.remove());
+    document.body.removeAttribute(ACTIVE_ATTRIBUTE);
+    document.body.removeAttribute(REGIONS_ATTRIBUTE);
+    const media = document.createElement("div");
+    media.dataset.dshWallpaperOwner = OWNER;
+    media.dataset.dshWallpaperLayer = "media";
+    media.setAttribute("aria-hidden", "true");
+    const mask = document.createElement("div");
+    mask.dataset.dshWallpaperOwner = OWNER;
+    mask.dataset.dshWallpaperLayer = "mask";
+    mask.setAttribute("aria-hidden", "true");
+    const panelHost = document.createElement("div");
+    panelHost.dataset.dshWallpaperOwner = OWNER;
+    panelHost.dataset.dshWallpaperPanelRoot = "";
+    document.body.append(media, mask, panelHost);
+    this.mediaLayer = media;
+    this.maskLayer = mask;
+    this.panelHost = panelHost;
+    this.panelRoot = (0, import_client.createRoot)(panelHost);
+    this.panelRoot.render(/* @__PURE__ */ import_react.default.createElement(WallpaperFloatingPanel, { controller: this }));
+    this.applyVisualState();
+    void this.restoreState();
+  }
+  dispose() {
+    if (!this.mounted) return;
+    this.disposed = true;
+    this.mounted = false;
+    if (this.persistTimer !== null) {
+      window.clearTimeout(this.persistTimer);
+      this.persistTimer = null;
+      void this.queuePersist(this.settings);
+    }
+    this.imageUrl = null;
+    this.regionImages = { settings: null, sidebar: null };
+    this.panelOpen = false;
+    this.panelRoot?.unmount();
+    this.mediaLayer?.remove();
+    this.maskLayer?.remove();
+    this.panelHost?.remove();
+    this.mediaLayer = null;
+    this.maskLayer = null;
+    this.panelHost = null;
+    this.panelRoot = null;
+    document.body.removeAttribute(ACTIVE_ATTRIBUTE);
+    document.body.removeAttribute(REGIONS_ATTRIBUTE);
+    for (const variable of [...BODY_VARIABLES, ...REGION_VARIABLES]) document.body.style.removeProperty(variable);
+    this.listeners.clear();
+  }
+  openPanel() {
+    if (!this.mounted) return;
+    if (!this.panelOpen) {
+      this.panelOpen = true;
+      this.publish();
+    }
+    window.requestAnimationFrame(() => {
+      this.panelHost?.querySelector(".dsh-wallpaper-floating")?.focus({ preventScroll: true });
+    });
+  }
+  closePanel() {
+    if (!this.panelOpen) return;
+    this.panelOpen = false;
+    this.publish();
+  }
+  update(patch) {
+    this.settings = normalizeSettings({ ...this.settings, ...patch });
+    this.schedulePersist();
+    this.applyVisualState();
+    this.publish({ error: null });
+  }
+  updateRegion(region, patch) {
+    this.update({ regions: { ...this.settings.regions, [region]: { ...this.settings.regions[region], ...patch } } });
+  }
+  resetAppearance(target) {
+    if (target !== "global") {
+      this.updateRegion(target, { ...defaultRegionSettings(), imageName: this.settings.regions[target].imageName });
+      return;
+    }
+    this.settings = {
+      ...DEFAULT_SETTINGS,
+      regions: this.settings.regions,
+      enabled: this.settings.enabled,
+      imageName: this.settings.imageName
+    };
+    this.schedulePersist();
+    this.applyVisualState();
+    this.publish({ error: null });
+  }
+  async setImage(file, target) {
+    if (!file.type.startsWith("image/")) {
+      this.publish({ error: "\u8BF7\u9009\u62E9\u56FE\u7247\u6587\u4EF6\u3002" });
+      return;
+    }
+    this.publish({ loading: true, error: null });
+    try {
+      await validateImage(file);
+      await this.flushPersist();
+      const response = await fetch(`${API_BASE}/image?region=${target}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": file.type,
+          "X-DSH-Wallpaper-Filename": encodeURIComponent(file.name)
+        },
+        body: file
+      });
+      const state = await readApiState(response);
+      if (this.disposed) return;
+      this.acceptState(state);
+      this.applyVisualState();
+      this.publish({ loading: false, error: null });
+    } catch (error) {
+      if (!this.disposed) this.publish({ loading: false, error: String(error) });
+    }
+  }
+  async removeImage(target) {
+    this.publish({ loading: true, error: null });
+    try {
+      await this.flushPersist();
+      const state = await readApiState(await fetch(`${API_BASE}/image?region=${target}`, { method: "DELETE" }));
+      if (this.disposed) return;
+      this.acceptState(state);
+      this.applyVisualState();
+      this.publish({ loading: false, error: null });
+    } catch (error) {
+      if (!this.disposed) this.publish({ loading: false, error: String(error) });
+    }
+  }
+  clearError() {
+    if (this.snapshot.error !== null) this.publish({ error: null });
+  }
+  async restoreState() {
+    try {
+      const state = await readApiState(
+        await fetch(`${API_BASE}/state`, { method: "GET", cache: "no-store" })
+      );
+      if (this.disposed) return;
+      this.acceptState(state);
+      this.applyVisualState();
+      this.publish({ loading: false, error: null });
+    } catch (error) {
+      if (!this.disposed) {
+        this.applyVisualState();
+        this.publish({ loading: false, error: `\u8BFB\u53D6\u5DF2\u4FDD\u5B58\u7684\u58C1\u7EB8\u5931\u8D25\uFF1A${String(error)}` });
+      }
+    }
+  }
+  acceptState(state) {
+    this.settings = state.settings;
+    this.imageUrl = state.imageUrl;
+    this.regionImages = { settings: state.regionImages.settings.imageUrl, sidebar: state.regionImages.sidebar.imageUrl };
+  }
+  applyVisualState() {
+    if (!this.mounted) return;
+    const body = document.body;
+    const active = this.settings.enabled && this.imageUrl !== null;
+    const [r, g, b] = hexToRgb(this.settings.maskColor);
+    const [layer1, layer2, layer3] = surfaceLayerAlphas(this.settings.surfaceOpacity);
+    const style = modeStyle(this.settings.mode);
+    const overscan = Math.ceil(this.settings.blur * 2);
+    body.style.setProperty("--dsh-wallpaper-image-opacity", String(this.settings.imageOpacity));
+    body.style.setProperty("--dsh-wallpaper-blur", `${this.settings.blur}px`);
+    body.style.setProperty("--dsh-wallpaper-inset", `${-overscan}px`);
+    body.style.setProperty("--dsh-wallpaper-mask-rgb", `${r} ${g} ${b}`);
+    body.style.setProperty("--dsh-wallpaper-mask-opacity", String(this.settings.maskOpacity));
+    body.style.setProperty("--dsh-wallpaper-surface-alpha-1", String(layer1));
+    body.style.setProperty("--dsh-wallpaper-surface-alpha-2", String(layer2));
+    body.style.setProperty("--dsh-wallpaper-surface-alpha-3", String(layer3));
+    if (this.mediaLayer !== null) {
+      this.mediaLayer.style.backgroundImage = this.imageUrl === null ? "none" : cssUrl(this.imageUrl);
+      this.mediaLayer.style.backgroundSize = style.size;
+      this.mediaLayer.style.backgroundRepeat = style.repeat;
+      this.mediaLayer.style.backgroundPosition = backgroundPositionWithOffset(
+        this.settings.position,
+        this.settings.offsetXPercent,
+        this.settings.offsetYPercent
+      );
+    }
+    body.toggleAttribute(ACTIVE_ATTRIBUTE, active);
+    for (const [name2, value] of Object.entries(regionVariables(this.settings, this.imageUrl, this.regionImages))) body.style.setProperty(name2, value);
+    body.setAttribute(REGIONS_ATTRIBUTE, "");
+  }
+  schedulePersist() {
+    if (this.persistTimer !== null) window.clearTimeout(this.persistTimer);
+    this.persistTimer = window.setTimeout(() => {
+      this.persistTimer = null;
+      void this.queuePersist(this.settings);
+    }, SETTINGS_DEBOUNCE_MS);
+  }
+  flushPersist() {
+    if (this.persistTimer !== null) {
+      window.clearTimeout(this.persistTimer);
+      this.persistTimer = null;
+      return this.queuePersist(this.settings);
+    }
+    return this.persistTail;
+  }
+  queuePersist(settings) {
+    const payload = JSON.stringify(settings);
+    const persist = async () => {
+      try {
+        await readApiState(
+          await fetch(`${API_BASE}/settings`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: payload
+          })
+        );
+      } catch (error) {
+        if (!this.disposed) this.publish({ error: `\u4FDD\u5B58\u8BBE\u7F6E\u5931\u8D25\uFF1A${String(error)}` });
+      }
+    };
+    const next = this.persistTail.then(persist, persist);
+    this.persistTail = next;
+    return next;
+  }
+  publish(patch = {}) {
+    this.snapshot = {
+      settings: this.settings,
+      hasImage: this.imageUrl !== null,
+      previewUrl: this.imageUrl,
+      regionImages: this.regionImages,
+      panelOpen: this.panelOpen,
+      loading: patch.loading ?? this.snapshot.loading,
+      error: patch.error === void 0 ? this.snapshot.error : patch.error
+    };
+    for (const listener of this.listeners) listener();
+  }
+};
+function pageController() {
+  const page = globalThis;
+  const current = page[PAGE_RUNTIME_KEY];
+  if (current?.buildToken === CLIENT_BUILD_TOKEN) return current.controller;
+  current?.controller.dispose();
+  const controller = new WallpaperController();
+  page[PAGE_RUNTIME_KEY] = { buildToken: CLIENT_BUILD_TOKEN, controller };
+  return controller;
+}
+function RangeField(props) {
+  return /* @__PURE__ */ import_react.default.createElement("label", { className: "dsh-wallpaper-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-label" }, /* @__PURE__ */ import_react.default.createElement("span", null, props.label), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-output" }, props.display)), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-range-row" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "range",
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      value: props.value,
+      onChange: (event) => props.onChange(Number(event.currentTarget.value))
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-number" }, props.display)));
+}
+function WallpaperSelect({
+  ariaLabel,
+  value,
+  options,
+  onChange
+}) {
+  const [open, setOpen] = import_react.default.useState(false);
+  const selectedLabel = options.find((option) => option.value === value)?.label ?? value;
+  const items = import_react.default.useMemo(
+    () => options.map((option) => ({ id: option.value, label: option.label })),
+    [options]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_dsh_client_ui_primitives.Menu,
+    {
+      className: "dsh-wallpaper-select-menu",
+      open,
+      portal: true,
+      items,
+      selectedId: value,
+      onClose: () => setOpen(false),
+      onSelect: (id) => {
+        onChange(id);
+        setOpen(false);
+      },
+      anchor: /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dsh-wallpaper-select-trigger",
+          "aria-label": `${ariaLabel}\uFF0C\u5F53\u524D\uFF1A${selectedLabel}`,
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          onClick: () => setOpen((current) => !current)
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", null, selectedLabel),
+        /* @__PURE__ */ import_react.default.createElement(import_dsh_client_ui_primitives.IconChevronDownOutline14, { size: 16 })
+      )
+    }
+  );
+}
+function formatPercent(value) {
+  return `${Number.isInteger(value) ? value : value.toFixed(1)}%`;
+}
+function PercentOffsetField(props) {
+  return /* @__PURE__ */ import_react.default.createElement("label", { className: "dsh-wallpaper-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-label" }, /* @__PURE__ */ import_react.default.createElement("span", null, props.label), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-output" }, formatPercent(props.value))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-range-row dsh-wallpaper-offset-row" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "range",
+      min: -100,
+      max: 100,
+      step: 0.5,
+      value: props.value,
+      onChange: (event) => props.onChange(Number(event.currentTarget.value))
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      className: "dsh-wallpaper-number-input",
+      type: "number",
+      min: -100,
+      max: 100,
+      step: 0.5,
+      value: props.value,
+      onChange: (event) => {
+        const value = event.currentTarget.valueAsNumber;
+        if (Number.isFinite(value)) props.onChange(value);
+      },
+      "aria-label": `${props.label}\uFF08\u7A97\u53E3\u767E\u5206\u6BD4\uFF09`
+    }
+  )));
+}
+function WallpaperSettingsSection({ controller }) {
+  const snapshot = import_react.default.useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  const [target, setTarget] = import_react.default.useState("global");
+  const settings = target === "global" ? snapshot.settings : snapshot.settings.regions[target];
+  const source = target === "global" ? "custom" : snapshot.settings.regions[target].source;
+  const ownUrl = target === "global" ? snapshot.previewUrl : snapshot.regionImages[target];
+  const previewUrl = source === "global" ? snapshot.previewUrl : ownUrl;
+  const hasImage = ownUrl !== null;
+  const displayName = source === "global" ? snapshot.settings.imageName : settings.imageName;
+  const update = (patch) => {
+    if (target === "global") controller.update(patch);
+    else controller.updateRegion(target, patch);
+  };
+  const fileRef = import_react.default.useRef(null);
+  const mode = MODE_OPTIONS.find((option) => option.value === settings.mode) ?? MODE_OPTIONS[0];
+  const chooseImage = () => {
+    controller.clearError();
+    fileRef.current?.click();
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-settings", "data-wallpaper-target": target }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-targets", role: "group", "aria-label": "\u80CC\u666F\u8C03\u6574\u533A\u57DF" }, [["global", "\u4E3B\u754C\u9762"], ["settings", "\u8BBE\u7F6E\u9762\u677F"], ["sidebar", "\u53F3\u4FA7 Sidebar"]].map(([value, label]) => /* @__PURE__ */ import_react.default.createElement("button", { type: "button", key: value, "aria-pressed": target === value, onClick: () => setTarget(value) }, label))), /* @__PURE__ */ import_react.default.createElement("fieldset", { className: "dsh-wallpaper-controls", disabled: snapshot.loading }, target === "global" ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-region-source" }, /* @__PURE__ */ import_react.default.createElement(
+    WallpaperSelect,
+    {
+      ariaLabel: "\u80CC\u666F\u6765\u6E90",
+      value: source,
+      options: [
+        { value: "none", label: "\u4E0D\u4F7F\u7528\u58C1\u7EB8\uFF08\u9ED8\u8BA4\uFF09" },
+        { value: "custom", label: "\u4F7F\u7528\u72EC\u7ACB\u56FE\u7247" },
+        { value: "global", label: "\u4F7F\u7528\u4E3B\u754C\u9762\u56FE\u7247" }
+      ],
+      onChange: (source2) => controller.updateRegion(target, { source: source2 })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { className: "dsh-wallpaper-source-hint" }, "\u53EA\u8C03\u6574", target === "settings" ? "\u5E94\u7528\u8BBE\u7F6E\u5F39\u7A97" : "\u53F3\u4FA7 Sidebar\uFF08\u5305\u62EC\u5206\u680F\u548C\u5168\u5C4F\uFF09", "\uFF0C\u4E0D\u5F71\u54CD\u5176\u4ED6\u533A\u57DF\u3002")), /* @__PURE__ */ import_react.default.createElement("section", { className: "dsh-wallpaper-card" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-source" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "dsh-wallpaper-preview",
+      "data-empty": previewUrl === null ? true : void 0,
+      style: previewUrl === null ? void 0 : {
+        backgroundImage: cssUrl(previewUrl),
+        backgroundSize: modeStyle(settings.mode).size,
+        backgroundRepeat: modeStyle(settings.mode).repeat,
+        backgroundPosition: settings.position
+      }
+    },
+    previewUrl === null ? "\u5C1A\u672A\u9009\u62E9\u56FE\u7247" : null
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-source-copy" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-source-name" }, snapshot.loading ? "\u6B63\u5728\u8BFB\u53D6\u56FE\u7247\u2026" : displayName ?? "\u9009\u62E9\u4E00\u5F20\u672C\u673A\u56FE\u7247"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dsh-wallpaper-source-hint" }, "\u539F\u56FE\u4FDD\u5B58\u5728 Harness \u6570\u636E\u76EE\u5F55\u4E2D\uFF0C\u4E0D\u4F1A\u4E0A\u4F20\u5230\u5916\u90E8\u7F51\u7EDC\u3002"), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-actions" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "dsh-wallpaper-button",
+      disabled: snapshot.loading,
+      onClick: chooseImage
+    },
+    target === "global" ? hasImage ? "\u66F4\u6362\u56FE\u7247" : "\u9009\u62E9\u56FE\u7247" : hasImage ? "\u66F4\u6362\u72EC\u7ACB\u56FE\u7247" : "\u9009\u62E9\u72EC\u7ACB\u56FE\u7247"
+  ), hasImage && source !== "global" ? /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "dsh-wallpaper-button",
+      "data-danger": true,
+      disabled: snapshot.loading,
+      onClick: () => void controller.removeImage(target)
+    },
+    "\u79FB\u9664"
+  ) : null), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ref: fileRef,
+      className: "dsh-wallpaper-file",
+      type: "file",
+      accept: "image/*",
+      onChange: (event) => {
+        const file = event.currentTarget.files?.[0];
+        event.currentTarget.value = "";
+        if (file !== void 0) void controller.setImage(file, target);
+      }
+    }
+  ))), snapshot.error === null ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-error", role: "alert" }, snapshot.error), target === "global" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-enable" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-enable-copy" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-enable-title" }, "\u542F\u7528\u4E3B\u754C\u9762\u58C1\u7EB8"), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-enable-hint" }, "\u5173\u95ED\u540E\u4FDD\u7559\u56FE\u7247\u548C\u6240\u6709\u8BBE\u7F6E\u3002")), /* @__PURE__ */ import_react.default.createElement("label", { className: "dsh-wallpaper-switch" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: snapshot.settings.enabled && hasImage,
+      disabled: !hasImage || snapshot.loading,
+      onChange: (event) => update({ enabled: event.currentTarget.checked }),
+      "aria-label": "\u542F\u7528\u4E3B\u754C\u9762\u58C1\u7EB8"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", null))) : null), /* @__PURE__ */ import_react.default.createElement("section", { className: "dsh-wallpaper-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-section-head" }, /* @__PURE__ */ import_react.default.createElement("h4", { className: "dsh-wallpaper-section-title" }, "\u56FE\u7247\u5E03\u5C40"), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-section-note" }, mode.hint)), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-grid" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-label" }, "\u9002\u5E94\u6A21\u5F0F"), /* @__PURE__ */ import_react.default.createElement(
+    WallpaperSelect,
+    {
+      ariaLabel: "\u9002\u5E94\u6A21\u5F0F",
+      value: settings.mode,
+      options: MODE_OPTIONS,
+      onChange: (mode2) => update({ mode: mode2 })
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-label" }, "\u56FE\u7247\u4F4D\u7F6E"), /* @__PURE__ */ import_react.default.createElement(
+    WallpaperSelect,
+    {
+      ariaLabel: "\u56FE\u7247\u4F4D\u7F6E",
+      value: settings.position,
+      options: POSITION_OPTIONS,
+      onChange: (position) => update({ position })
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    PercentOffsetField,
+    {
+      label: "\u6A2A\u5411\u504F\u79FB",
+      value: settings.offsetXPercent,
+      onChange: (offsetXPercent) => update({ offsetXPercent })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    PercentOffsetField,
+    {
+      label: "\u7EB5\u5411\u504F\u79FB",
+      value: settings.offsetYPercent,
+      onChange: (offsetYPercent) => update({ offsetYPercent })
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("section", { className: "dsh-wallpaper-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-section-head" }, /* @__PURE__ */ import_react.default.createElement("h4", { className: "dsh-wallpaper-section-title" }, "\u56FE\u7247\u6548\u679C"), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-section-note" }, "\u5B9E\u65F6\u9884\u89C8")), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-grid" }, /* @__PURE__ */ import_react.default.createElement(
+    RangeField,
+    {
+      label: "\u56FE\u7247\u4E0D\u900F\u660E\u5EA6",
+      min: 0,
+      max: 1,
+      step: 0.01,
+      value: settings.imageOpacity,
+      display: `${Math.round(settings.imageOpacity * 100)}%`,
+      onChange: (imageOpacity) => update({ imageOpacity })
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    RangeField,
+    {
+      label: "\u80CC\u666F\u6A21\u7CCA",
+      min: 0,
+      max: 40,
+      step: 1,
+      value: settings.blur,
+      display: `${Math.round(settings.blur)}px`,
+      onChange: (blur) => update({ blur })
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("section", { className: "dsh-wallpaper-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-section-head" }, /* @__PURE__ */ import_react.default.createElement("h4", { className: "dsh-wallpaper-section-title" }, "\u906E\u7F69\u4E0E\u754C\u9762"), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-section-note" }, "\u4FDD\u6301\u6587\u5B57\u53EF\u8BFB\u6027")), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-grid" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "dsh-wallpaper-field" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-label" }, /* @__PURE__ */ import_react.default.createElement("span", null, "\u906E\u7F69\u989C\u8272"), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-field-output" }, settings.maskColor)), /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-color-row" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      className: "dsh-wallpaper-color",
+      type: "color",
+      value: settings.maskColor,
+      onChange: (event) => update({ maskColor: event.currentTarget.value }),
+      "aria-label": "\u906E\u7F69\u989C\u8272"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-source-hint", style: { margin: 0 } }, "\u56FE\u7247\u4E0A\u65B9\u7684\u7EDF\u4E00\u989C\u8272\u5C42"))), /* @__PURE__ */ import_react.default.createElement(
+    RangeField,
+    {
+      label: "\u906E\u7F69\u5F3A\u5EA6",
+      min: 0,
+      max: 0.9,
+      step: 0.01,
+      value: settings.maskOpacity,
+      display: `${Math.round(settings.maskOpacity * 100)}%`,
+      onChange: (maskOpacity) => update({ maskOpacity })
+    }
+  ), target === "global" ? /* @__PURE__ */ import_react.default.createElement(
+    RangeField,
+    {
+      label: "\u754C\u9762\u586B\u5145",
+      min: 0,
+      max: 0.95,
+      step: 0.01,
+      value: settings.surfaceOpacity,
+      display: `${Math.round(settings.surfaceOpacity * 100)}%`,
+      onChange: (surfaceOpacity) => update({ surfaceOpacity })
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    RangeField,
+    {
+      label: "\u80CC\u666F\u4E0D\u900F\u660E\u5EA6",
+      min: 0,
+      max: 100,
+      step: 1,
+      value: Math.round(settings.surfaceOpacity * 100),
+      display: `${Math.round(settings.surfaceOpacity * 100)}%`,
+      onChange: (opacity) => update({ surfaceOpacity: opacity / 100 })
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement("footer", { className: "dsh-wallpaper-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "dsh-wallpaper-storage-note" }, "\u6A21\u7CCA\u53EA\u4F5C\u7528\u4E8E\u80CC\u666F\u56FE\u7247\uFF0C\u4E0D\u4F1A\u6539\u53D8\u6587\u5B57\u3001\u83DC\u5355\u6216\u5F39\u7A97\u7684\u5B9A\u4F4D\u3002"), /* @__PURE__ */ import_react.default.createElement("button", { type: "button", className: "dsh-wallpaper-button", onClick: () => controller.resetAppearance(target) }, "\u6062\u590D\u9ED8\u8BA4\u6548\u679C"))));
+}
+function defaultPanelPosition() {
+  return {
+    x: Math.max(PANEL_MARGIN, window.innerWidth - 480 - 24),
+    y: Math.min(84, Math.max(PANEL_MARGIN, window.innerHeight - 240))
+  };
+}
+function readPanelPosition() {
+  try {
+    const saved = JSON.parse(window.localStorage.getItem(PANEL_POSITION_KEY) ?? "null");
+    if (saved !== null && typeof saved.x === "number" && typeof saved.y === "number" && Number.isFinite(saved.x) && Number.isFinite(saved.y)) {
+      return { x: saved.x, y: saved.y };
+    }
+  } catch {
+  }
+  return defaultPanelPosition();
+}
+function savePanelPosition(position) {
+  try {
+    window.localStorage.setItem(PANEL_POSITION_KEY, JSON.stringify(position));
+  } catch {
+  }
+}
+function clampPanelPosition(position, panel) {
+  const width = panel?.offsetWidth ?? Math.min(480, Math.max(0, window.innerWidth - PANEL_MARGIN * 2));
+  const height = panel?.offsetHeight ?? Math.min(760, Math.max(0, window.innerHeight - PANEL_MARGIN * 2));
+  const maxX = Math.max(PANEL_MARGIN, window.innerWidth - width - PANEL_MARGIN);
+  const maxY = Math.max(PANEL_MARGIN, window.innerHeight - height - PANEL_MARGIN);
+  return {
+    x: Math.round(Math.min(maxX, Math.max(PANEL_MARGIN, position.x))),
+    y: Math.round(Math.min(maxY, Math.max(PANEL_MARGIN, position.y)))
+  };
+}
+function samePanelPosition(left, right) {
+  return left.x === right.x && left.y === right.y;
+}
+function WallpaperFloatingPanel({ controller }) {
+  const snapshot = import_react.default.useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot
+  );
+  const panelRef = import_react.default.useRef(null);
+  const dragRef = import_react.default.useRef(null);
+  const [position, setPosition] = import_react.default.useState(readPanelPosition);
+  import_react.default.useLayoutEffect(() => {
+    if (!snapshot.panelOpen) return;
+    setPosition((current) => {
+      const next = clampPanelPosition(current, panelRef.current);
+      return samePanelPosition(current, next) ? current : next;
+    });
+  }, [snapshot.panelOpen]);
+  import_react.default.useEffect(() => {
+    savePanelPosition(position);
+  }, [position]);
+  import_react.default.useEffect(() => {
+    if (!snapshot.panelOpen) return;
+    const handleResize = () => {
+      setPosition((current) => {
+        const next = clampPanelPosition(current, panelRef.current);
+        return samePanelPosition(current, next) ? current : next;
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [snapshot.panelOpen]);
+  if (!snapshot.panelOpen) return null;
+  const startDrag = (event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button, input, select, textarea, a")) return;
+    const rect = panelRef.current?.getBoundingClientRect();
+    const start = clampPanelPosition(
+      rect === void 0 ? position : { x: rect.left, y: rect.top },
+      panelRef.current
+    );
+    setPosition(start);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      x: start.x,
+      y: start.y
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  };
+  const moveDrag = (event) => {
+    const drag = dragRef.current;
+    if (drag === null || drag.pointerId !== event.pointerId) return;
+    setPosition(
+      clampPanelPosition(
+        {
+          x: drag.x + event.clientX - drag.clientX,
+          y: drag.y + event.clientY - drag.clientY
+        },
+        panelRef.current
+      )
+    );
+  };
+  const finishDrag = (event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: panelRef,
+      className: "dsh-wallpaper-floating",
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": "\u56FE\u7247\u58C1\u7EB8\u8BBE\u7F6E",
+      tabIndex: -1,
+      style: { left: position.x, top: position.y },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          controller.closePanel();
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "dsh-wallpaper-floating-header",
+        onPointerDown: startDrag,
+        onPointerMove: moveDrag,
+        onPointerUp: finishDrag,
+        onPointerCancel: finishDrag
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-floating-heading" }, /* @__PURE__ */ import_react.default.createElement("h3", { className: "dsh-wallpaper-floating-title" }, "\u56FE\u7247\u58C1\u7EB8"), /* @__PURE__ */ import_react.default.createElement("p", { className: "dsh-wallpaper-floating-subtitle" }, "\u62D6\u52A8\u6807\u9898\u680F\u79FB\u52A8 \xB7 \u8C03\u6574\u65F6\u53EF\u76F4\u63A5\u67E5\u770B\u4E3B\u754C\u9762\u6548\u679C")),
+      /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "dsh-wallpaper-close",
+          onClick: () => controller.closePanel(),
+          "aria-label": "\u5173\u95ED\u58C1\u7EB8\u8BBE\u7F6E",
+          title: "\u5173\u95ED"
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_dsh_client_ui_primitives.IconCloseOutline16, { size: 14 })
+      )
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-floating-body" }, /* @__PURE__ */ import_react.default.createElement(WallpaperSettingsSection, { controller }))
+  );
+}
+function WallpaperSettingsLauncher({
+  controller,
+  close
+}) {
+  const launched = import_react.default.useRef(false);
+  import_react.default.useEffect(() => {
+    if (launched.current) return;
+    launched.current = true;
+    controller.openPanel();
+    close();
+  }, [close, controller]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dsh-wallpaper-launcher" }, "\u6B63\u5728\u6253\u5F00\u56FE\u7247\u58C1\u7EB8\u9762\u677F\u2026");
+}
+function apply(ctx) {
+  ctx.effect(installStyles, "dsh-wallpaper: client styles");
+  const controller = pageController();
+  ctx.effect(() => {
+    controller.mount();
+  }, "dsh-wallpaper.page-background");
+  ctx.slots.inject(
+    "settings.section",
+    () => ctx.slots.register(
+      {
+        name: "settings.section",
+        id: "wallpaper",
+        order: 35,
+        label: "\u58C1\u7EB8"
+      },
+      (props) => /* @__PURE__ */ import_react.default.createElement(WallpaperSettingsLauncher, { controller, close: props.close })
+    )
+  );
+}
+
+    return module.exports;
+  }
+});