dsh-background-by-model 0.5.4 → 0.6.0

package/lib/client.js

@@ -21,7 +21,6 @@ window.__ModuleLoader__.load({
 		const zh = {
 			nav: "模型背景",
 			brandTag: "按模型换背景",
-			close: "关闭",
 			pageInterface: "界面",
 			pageModelBg: "模型背景",
 			pageProfile: "配置",
@@ -58,7 +57,6 @@ window.__ModuleLoader__.load({
 			autoExtractHint: "只在规则还没有颜色时自动取色，绝不覆盖你手动选的颜色",
 			ruleAdd: "新增规则",
 			ruleFallbackBadge: "兜底",
-			ruleMatchLabel: "匹配串",
 			ruleMatchPlaceholder: "如 flash / glm（忽略大小写，留空则不参与匹配）",
 			ruleEnabled: "启用",
 			ruleUp: "上移",
@@ -77,21 +75,16 @@ window.__ModuleLoader__.load({
 			ruleImageRemove: "移除图片",
 			ruleEmptyHint: "这条规则还没有图片，不会被匹配到，也不会作为兜底",
 			ruleColor: "主题色",
-			ruleColorNone: "系统主题",
+			ruleColorNone: "跟随系统主题",
 			ruleColorNoneHint: "未设颜色时跟随系统主题：界面用宿主的配色，壁纸与各部位的透明度、模糊照旧生效",
 			ruleColorPick: "自定义颜色",
 			ruleColorPickHint: "优先从本图取色，取不到就用默认色",
 			ruleColorExtract: "从本图提取",
 			ruleLayout: "布局模式",
-			ruleFraming: "取景",
 			ruleFramingEdit: "编辑位置",
-			ruleFramingLocked: "仅「适应」模式可编辑位置",
 			ruleOpacity: "背景透明度",
 			ruleBlur: "背景模糊",
 			ruleBlurHint: "背景模糊作用于壁纸层；界面页里的模糊作用于界面各区域，两者互不影响",
-			colorHint: "在色轮外圈选择色相，在内部方形中调整饱和度和明度；双击滑块可恢复默认值",
-			swatchTitle: "灵感色板",
-			hexCaption: "当前颜色",
 			bgModeFit: "适应",
 			bgModeFill: "填充",
 			bgModeStretch: "拉伸",
@@ -102,9 +95,7 @@ window.__ModuleLoader__.load({
 			editorCommit: "确认",
 			editorCancel: "取消",
 			editorReset: "重置",
-			extractColor: "从图片提取主题色",
 			extracting: "取色中…",
-			extractNoWp: "请先为该规则选择图片",
 			extractDone: "已应用图片配色",
 			extractFail: "未在这张图里找到鲜明的颜色，请换一张",
 			eyedropper: "从图片取色",
@@ -123,12 +114,13 @@ window.__ModuleLoader__.load({
 			toastExportDone: "配置文件已开始下载",
 			importDone: "已导入配置",
 			importFail: "导入失败，文件格式不正确",
-			footerTag: "按模型换背景插件"
+			footerTag: "按模型换背景插件",
+			holidayTitle: "节日特殊背景",
+			holidayEnable: "启用节日特殊背景（中秋当天、国庆 10 月 1–7 日）"
 		};
 		const en = {
 			nav: "Model background",
 			brandTag: "Per-model wallpaper",
-			close: "Close",
 			pageInterface: "Interface",
 			pageModelBg: "Model background",
 			pageProfile: "Profile",
@@ -165,7 +157,6 @@ window.__ModuleLoader__.load({
 			autoExtractHint: "Only fills a rule that has no color yet — a color you picked is never overwritten",
 			ruleAdd: "Add rule",
 			ruleFallbackBadge: "fallback",
-			ruleMatchLabel: "Match",
 			ruleMatchPlaceholder: "e.g. flash / glm (case-insensitive, empty never matches)",
 			ruleEnabled: "Enabled",
 			ruleUp: "Move up",
@@ -184,21 +175,16 @@ 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",
 			ruleColorExtract: "Extract from image",
 			ruleLayout: "Layout mode",
-			ruleFraming: "Framing",
 			ruleFramingEdit: "Edit position",
-			ruleFramingLocked: "Position editing is only available in Fit mode",
 			ruleOpacity: "Background opacity",
 			ruleBlur: "Background blur",
 			ruleBlurHint: "Background blur affects the wallpaper layer; the blur on the Interface page affects interface surfaces — they are independent",
-			colorHint: "Pick hue on the outer ring, adjust saturation & lightness in the square; double-click a slider to reset",
-			swatchTitle: "Quick swatches",
-			hexCaption: "Current color",
 			bgModeFit: "Fit",
 			bgModeFill: "Fill",
 			bgModeStretch: "Stretch",
@@ -209,9 +195,7 @@ window.__ModuleLoader__.load({
 			editorCommit: "Confirm",
 			editorCancel: "Cancel",
 			editorReset: "Reset",
-			extractColor: "Extract from image",
 			extracting: "Extracting…",
-			extractNoWp: "Choose an image for this rule first",
 			extractDone: "Image colors applied",
 			extractFail: "No vivid color found in this image, try another",
 			eyedropper: "Eyedropper",
@@ -230,10 +214,168 @@ window.__ModuleLoader__.load({
 			toastExportDone: "Export started",
 			importDone: "Profile imported",
 			importFail: "Import failed — invalid file",
-			footerTag: "Per-model wallpaper plugin"
+			footerTag: "Per-model wallpaper plugin",
+			holidayTitle: "Holiday backgrounds",
+			holidayEnable: "Enable holiday backgrounds (Mid-Autumn day, Oct 1–7)"
 		};
 		//#endregion
+		//#region src/holiday.ts
+		const HOLIDAYS = [{
+			id: "mid-autumn",
+			slot: "h-midautumn",
+			asset: "mid-autumn.webp",
+			color: "#384A77",
+			kind: "lunar"
+		}, {
+			id: "national-day",
+			slot: "h-nationalday",
+			asset: "national-day.webp",
+			color: "#FFF6EB",
+			kind: "gregorian"
+		}];
+		const TZ = "Asia/Shanghai";
+		let civilFormatter;
+		function civilFmt() {
+			if (civilFormatter === void 0) try {
+				civilFormatter = new Intl.DateTimeFormat("en-US", {
+					timeZone: TZ,
+					year: "numeric",
+					month: "numeric",
+					day: "numeric"
+				});
+			} catch {
+				civilFormatter = null;
+			}
+			return civilFormatter;
+		}
+		let lunarFormatter;
+		function lunarFmt() {
+			if (lunarFormatter === void 0) try {
+				lunarFormatter = new Intl.DateTimeFormat("en-u-ca-chinese", {
+					timeZone: TZ,
+					year: "numeric",
+					month: "numeric",
+					day: "numeric"
+				});
+			} catch {
+				lunarFormatter = null;
+			}
+			return lunarFormatter;
+		}
+		function partsOf(fmt, date) {
+			try {
+				const out = {};
+				for (const p of fmt.formatToParts(date)) if (p.type !== "literal") out[p.type] = p.value;
+				return out;
+			} catch {
+				return null;
+			}
+		}
+		/** The civil (Gregorian) date in Asia/Shanghai, or null when ICU cannot answer. */
+		function shanghaiDate(date) {
+			const fmt = civilFmt();
+			if (fmt === null) return null;
+			const p = partsOf(fmt, date);
+			if (p === null) return null;
+			const y = Number(p.year);
+			const m = Number(p.month);
+			const d = Number(p.day);
+			if (!isFinite(y) || !isFinite(m) || !isFinite(d)) return null;
+			return {
+				y,
+				m,
+				d
+			};
+		}
+		/**
+		* The Chinese-calendar month and day in Asia/Shanghai.
+		*
+		* ICU marks a **leap** month by suffixing `bis` — a leap fourth month reads
+		* `4bis`, a leap eighth month would read `8bis`. 中秋 is the FIFTEENTH DAY OF THE
+		* REGULAR EIGHTH MONTH, so the exact `month === '8'` test below is what keeps a
+		* leap eighth month (which does occur, roughly once every few decades) from
+		* dragging the festival a month late.
+		*/
+		function lunarMonthDay(date) {
+			const fmt = lunarFmt();
+			if (fmt === null) return null;
+			const p = partsOf(fmt, date);
+			if (p === null || p.month === void 0 || p.day === void 0) return null;
+			return {
+				month: p.month,
+				day: p.day
+			};
+		}
+		/** 农历八月十五, in the regular eighth month — i.e. 中秋 itself. */
+		function isMidAutumn(date = /* @__PURE__ */ new Date()) {
+			const lunar = lunarMonthDay(date);
+			return lunar !== null && lunar.month === "8" && lunar.day === "15";
+		}
+		/** 公历 10 月 1–7 日 — the National Day holiday period. */
+		function isNationalDay(date = /* @__PURE__ */ new Date()) {
+			const civil = shanghaiDate(date);
+			return civil !== null && civil.m === 10 && civil.d >= 1 && civil.d <= 7;
+		}
+		/**
+		* The holiday whose window contains `date`, or null.
+		*
+		* 中秋 wins the overlap: it is a single precise day, while National Day is a
+		* seven-day window, and the two do collide (2025-10-06 was both). On a tie the
+		* rarer, more specific answer is the better one.
+		*/
+		function activeHoliday(date = /* @__PURE__ */ new Date()) {
+			if (isMidAutumn(date)) return "mid-autumn";
+			if (isNationalDay(date)) return "national-day";
+			return null;
+		}
+		/**
+		* The holiday the background must follow right now, or null.
+		*
+		* Four gates, every one of them deliberate:
+		*
+		*   1. the master switch — an override that discards the user's rule list must
+		*      never happen without being asked for;
+		*   2. a built-in holiday whose window contains today;
+		*   3. that holiday's own switch;
+		*   4. actual bytes in its slot.
+		*
+		* The last one matters most, and it is the reason this is not a one-liner at the
+		* call site: a switched-on holiday with no image at all has to fall through to
+		* the model rules, not blank the wallpaper.
+		*
+		* It lives here, as a pure function, so the decision is covered by
+		* `scripts/holiday-check.ts` instead of hiding inside the plugin's apply closure
+		* where nothing can reach it.
+		*/
+		function pickHoliday(master, items, todayId, hasImage) {
+			if (!master || todayId === null) return null;
+			const item = items.find((i) => i.id === todayId);
+			if (item === void 0 || !item.enabled) return null;
+			return hasImage(item.slot) ? item : null;
+		}
+		//#endregion
 		//#region src/schema.ts
+		/**
+		* The persisted configuration shape — declared exactly ONCE, for both halves.
+		*
+		* This shape used to be written out twice: the node half owns persistence and
+		* sanitizes every write, the browser half owns the UI and its own reading of the
+		* same file. A field added to only one side was silently dropped by the other
+		* side's sanitizer — the matching slider stayed live in memory, `writeConfig`
+		* wrote a config without it, and the next load fell back to the default.
+		* `blurs.rightbar` / `rightbarOpacity` in 0.3.2 was exactly that bug, and the key
+		* lists were duplicated 6 times across the two halves, so it was due to happen.
+		*
+		* The types, the key lists, the defaults and the pure normalizers therefore live
+		* here and both halves import them: adding a field means editing this file, and
+		* the two halves cannot disagree about the shape. The host additionally logs one
+		* warning per unknown key while sanitizing a write (see `warnUnknownConfigKeys`
+		* in `src/index.ts`), so a field that reaches the node half without being
+		* declared here shows up in the host log instead of quietly disappearing.
+		*
+		* Nothing in this module may touch the DOM, Node or the Cordis context: it is
+		* imported by the browser bundle and by the node half alike.
+		*/
 		const DEFAULT_BG_STATE = {
 			zoom: 1,
 			x: 0,
@@ -300,6 +442,67 @@ window.__ModuleLoader__.load({
 			rightbar: 0,
 			input: 0
 		};
+		/**
+		* `#RRGGBB` → the `[h, s, l]` triple every rule stores (`s` and `l` in 0..1), or
+		* null when the string is not a hex color.
+		*
+		* A holiday names its color as hex because that is how a color is quoted, and a
+		* hand-converted triple is a magic number nothing downstream can check. The
+		* conversion lives here rather than in ./holiday because `[h, s, l]` is this
+		* module's own rule shape.
+		*/
+		function hexToHsl(hex) {
+			const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+			if (m === null) return null;
+			const n = parseInt(m[1], 16);
+			const r = (n >> 16 & 255) / 255;
+			const g = (n >> 8 & 255) / 255;
+			const b = (n & 255) / 255;
+			const max = Math.max(r, g, b);
+			const min = Math.min(r, g, b);
+			const l = (max + min) / 2;
+			const d = max - min;
+			if (d === 0) return [
+				0,
+				0,
+				l
+			];
+			const s = d / (1 - Math.abs(2 * l - 1));
+			let h;
+			if (max === r) h = 60 * ((g - b) / d % 6);
+			else if (max === g) h = 60 * ((b - r) / d + 2);
+			else h = 60 * ((r - g) / d + 4);
+			if (h < 0) h += 360;
+			return [
+				clamp$1(h, 0, 360, 0),
+				clamp01(s, 0),
+				clamp01(l, .5)
+			];
+		}
+		/**
+		* One holiday's appearance, untouched.
+		*
+		* Holidays default to `fill` rather than a rule's `fit`: these are full-bleed
+		* festival wallpapers, and `fit` would letterbox them on every aspect ratio the
+		* art was not cut for.
+		*/
+		function defaultHolidayRule(def) {
+			return {
+				id: def.id,
+				slot: def.slot,
+				match: "",
+				enabled: true,
+				color: hexToHsl(def.color),
+				bgMode: "fill",
+				wallpaperOpacity: 1,
+				blur: 0,
+				bgState: { ...DEFAULT_BG_STATE }
+			};
+		}
+		/** Every built-in holiday at its default, in `HOLIDAYS` order. */
+		function defaultHolidayRules() {
+			return HOLIDAYS.map(defaultHolidayRule);
+		}
 		/** A default config with independent nested objects (never hand out the shared ones). */
 		function freshThemeConfig() {
 			return {
@@ -310,7 +513,11 @@ window.__ModuleLoader__.load({
 				chatTextOpacity: 0,
 				trajectoryOpacity: 1,
 				rightbarOpacity: null,
-				autoExtract: true
+				autoExtract: true,
+				holidays: {
+					enabled: true,
+					items: defaultHolidayRules()
+				}
 			};
 		}
 		/** Slot names reach the filesystem, so they are strictly whitelisted. */
@@ -358,6 +565,41 @@ window.__ModuleLoader__.load({
 				bgState: normalizeBgState(r.bgState)
 			};
 		}
+		/**
+		* Coerce one persisted holiday entry.
+		*
+		* `id`, `slot` and `color` come from the DEFINITION, never from disk: a holiday's
+		* slot is the only thing tying it to its bytes, and its theme color is a fixed
+		* part of what that holiday looks like — so a stale or hand-edited value would
+		* either orphan the wallpaper, point the holiday at a rule's image, or paint a
+		* festival in a color it does not have. Everything else is sanitized exactly like
+		* a rule's field.
+		*/
+		function normalizeHolidayRule(def, raw) {
+			const r = raw ?? {};
+			const base = defaultHolidayRule(def);
+			return {
+				...base,
+				enabled: r.enabled !== false,
+				bgMode: BG_MODES$1.includes(r.bgMode) ? r.bgMode : base.bgMode,
+				wallpaperOpacity: clamp01(r.wallpaperOpacity, base.wallpaperOpacity),
+				blur: clamp$1(r.blur, 0, 60, base.blur),
+				bgState: normalizeBgState(r.bgState)
+			};
+		}
+		/** Coerce the whole holiday block; unknown ids are dropped, missing ones defaulted. */
+		function normalizeHolidays(raw) {
+			const r = raw ?? {};
+			const stored = /* @__PURE__ */ new Map();
+			if (Array.isArray(r.items)) for (const item of r.items) {
+				const id = item?.id;
+				if (typeof id === "string") stored.set(id, item);
+			}
+			return {
+				enabled: r.enabled !== false,
+				items: HOLIDAYS.map((def) => normalizeHolidayRule(def, stored.get(def.id)))
+			};
+		}
 		/** Coerce an unknown persisted value into a valid ThemeConfig, falling back per-field. */
 		function normalizeConfig(raw) {
 			const r = raw ?? {};
@@ -376,7 +618,8 @@ window.__ModuleLoader__.load({
 				chatTextOpacity: clamp01(r.chatTextOpacity, 0),
 				trajectoryOpacity: clamp01(r.trajectoryOpacity, 1),
 				rightbarOpacity: typeof r.rightbarOpacity === "number" && isFinite(r.rightbarOpacity) ? clamp01(r.rightbarOpacity, 1) : null,
-				autoExtract: r.autoExtract !== false
+				autoExtract: r.autoExtract !== false,
+				holidays: normalizeHolidays(r.holidays)
 			};
 		}
 		//#endregion
@@ -484,12 +727,24 @@ window.__ModuleLoader__.load({
 		function setModelLabel(label) {
 			modelLabel = label;
 		}
+		/**
+		* One rule by id — from the USER's list first, then from the holiday overrides.
+		*
+		* Every render accessor (`rWp` / `rColor` / `rBgMode` / `rBgState` …) resolves
+		* through here, so teaching this one function about holidays is what makes an
+		* active holiday paint through the entire existing pipeline instead of needing a
+		* parallel one.
+		*/
 		function ruleById(id) {
-			return cfg.rules.find((r) => r.id === id) ?? null;
+			return cfg.rules.find((r) => r.id === id) ?? cfg.holidays.items.find((r) => r.id === id) ?? null;
 		}
 		function activeRule() {
 			return activeRuleId === null ? null : ruleById(activeRuleId);
 		}
+		/** One holiday override entry, or null for an unknown id. */
+		function holidayById(id) {
+			return cfg.holidays.items.find((r) => r.id === id) ?? null;
+		}
 		function newRule(id, slot) {
 			return {
 				id,
@@ -577,7 +832,7 @@ window.__ModuleLoader__.load({
 		/** Move a possibly-absent partial config into the shape the UI reads. */
 		function adoptConfig(raw) {
 			cfg = normalizeConfig(raw);
-			if (activeRuleId !== null && !cfg.rules.some((r) => r.id === activeRuleId)) {
+			if (activeRuleId !== null && ruleById(activeRuleId) === null) {
 				activeRuleId = null;
 				activeMatched = false;
 			}
@@ -1100,7 +1355,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 +1383,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
@@ -1297,6 +1555,11 @@ window.__ModuleLoader__.load({
 .dab-check-where code{font-family:var(--dab-mono);font-size:10.5px;overflow-wrap:anywhere}
 .dab-check-note{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary);position:relative;z-index:1}
 
+/* ── holiday override (Profile page) ─────────────────────────────────────── */
+/* Only a label: the whole feature is one switch, and dab-toggle already exists.
+   The per-holiday cards that used to live here are gone by design. */
+.dab-holiday-label{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}
+
 /* ── keyframes ───────────────────────────────────────────────────────────── */
 @keyframes dab-fade-in{from{opacity:0}to{opacity:1}}
 @keyframes dab-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@@ -3334,6 +3597,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 +3643,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 +3749,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 +4655,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 +4683,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")]
 											})
 										]
 									}),
@@ -4508,6 +4783,8 @@ window.__ModuleLoader__.load({
 		function ProfilePage({ p, notify }) {
 			const { t, exportTheme, importTheme } = p;
 			const importRef = (0, react.useRef)(null);
+			p.useStore((s) => s.rev + s.rulesRev);
+			const holidays = cfg.holidays;
 			const onImport = async (file) => {
 				try {
 					const ok = await importTheme(file);
@@ -4535,11 +4812,31 @@ window.__ModuleLoader__.load({
 						})
 					]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 1 },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dab-chip-row",
+						style: { alignItems: "center" },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: `dab-toggle${holidays.enabled ? " is-on" : ""}`,
+							role: "switch",
+							"aria-checked": holidays.enabled,
+							title: t("holidayEnable"),
+							onClick: () => p.setHolidaysEnabled(!holidays.enabled),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dab-holiday-label",
+							children: t("holidayTitle")
+						})]
+					})
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dab-profile-grid",
+					className: "dab-profile-grid dab-rise",
+					style: { "--d": 2 },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "dab-card dab-card-hover dab-rise",
-						style: { "--d": 1 },
+						className: "dab-card dab-card-hover",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dab-profile-ico",
@@ -4564,8 +4861,7 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "dab-card dab-card-hover dab-rise",
-						style: { "--d": 2 },
+						className: "dab-card dab-card-hover",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dab-profile-ico",
@@ -4814,7 +5110,11 @@ window.__ModuleLoader__.load({
 			};
 			/** Resolve the active rule for the current model and repaint everything. */
 			const applyActive = () => {
-				const { rule, matched } = matchRule(cfg.rules, modelText);
+				const holiday = activeHolidayRule();
+				const { rule, matched } = holiday !== null ? {
+					rule: holiday,
+					matched: false
+				} : matchRule(cfg.rules, modelText);
 				setActive(rule === null ? null : rule.id, matched);
 				const color = rule === null ? null : rule.color;
 				if (skinTimer !== null) window.clearTimeout(skinTimer);
@@ -4829,6 +5129,14 @@ window.__ModuleLoader__.load({
 				applyWp();
 				sync();
 			};
+			/**
+			* The holiday the background must follow right now, or null.
+			*
+			* The decision itself is `pickHoliday` (pure, and covered by
+			* `scripts/holiday-check.ts`); this only supplies the two things it cannot
+			* know — today's holiday from the calendar, and whether the slot has bytes.
+			*/
+			const activeHolidayRule = () => pickHoliday(cfg.holidays.enabled, cfg.holidays.items, activeHoliday(), (slot) => imageOf(slot) !== null);
 			syncHostScheme();
 			applyWp();
 			sync();
@@ -4858,18 +5166,63 @@ window.__ModuleLoader__.load({
 					applyActive();
 				}
 			})();
+			let holidayKey = activeHoliday() ?? "";
+			const holidayTimer = window.setInterval(() => {
+				const next = activeHoliday() ?? "";
+				if (next === holidayKey) return;
+				holidayKey = next;
+				const slot = todayHolidaySlot();
+				if (slot === null) applyActive();
+				else loadSlot(slot).then(() => applyActive());
+			}, 3e4);
+			ctx.effect(() => () => {
+				window.clearInterval(holidayTimer);
+			}, "dsh-background-by-model: holiday rollover");
+			/** Read one slot's bytes into the cache unless they are already there. */
+			const loadSlot = async (slot) => {
+				if (imageOf(slot) !== null) return;
+				const url = await readImage(slot);
+				if (url !== null) setImage(slot, url);
+			};
+			/**
+			* The slot of the holiday that could paint TODAY, or null.
+			*
+			* Gated on the CALENDAR, not merely on the switch. Now that the override is on
+			* by default and invisible, a profile that simply is not on a holiday must not
+			* pull ~730 KB of bundled art (≈970 KB of base64 over this channel) at every
+			* boot just because the feature is armed.
+			*/
+			const todayHolidaySlot = () => {
+				if (!cfg.holidays.enabled) return null;
+				const id = activeHoliday();
+				if (id === null) return null;
+				const item = holidayById(id);
+				return item !== null && item.enabled ? item.slot : null;
+			};
+			/** Every slot that can paint: the stored ones plus every slot the config names. */
+			const allSlots = (stored) => {
+				const holiday = todayHolidaySlot();
+				return Array.from(/* @__PURE__ */ new Set([
+					...stored,
+					...cfg.rules.map((r) => r.slot),
+					...holiday === null ? [] : [holiday]
+				]));
+			};
+			/**
+			* The slot that paints before anything else: the holiday in force when there
+			* is one, otherwise the slot the current model's rule uses. A holiday outranks
+			* the rule here for the same reason it outranks it when painting.
+			*/
+			const prioritySlot = () => todayHolidaySlot() ?? matchRule(cfg.rules, modelText).rule?.slot ?? null;
 			(async () => {
 				const persisted = await loadPersisted();
 				if (persisted !== null) {
 					adoptConfig(persisted.config);
-					const slots = Array.from(/* @__PURE__ */ new Set([...persisted.slots, ...cfg.rules.map((r) => r.slot)]));
-					const priority = matchRule(cfg.rules, modelText).rule;
-					const first = priority === null ? null : priority.slot;
+					const first = prioritySlot();
+					const slots = allSlots(persisted.slots);
 					const order = first === null ? slots : [first, ...slots.filter((s) => s !== first)];
 					for (const slot of order) {
-						if (imageOf(slot) !== null) continue;
-						const url = await readImage(slot);
-						if (url !== null) setImage(slot, url);
+						await loadSlot(slot);
 						if (slot === first) applyActive();
 					}
 				}
@@ -5074,11 +5427,19 @@ window.__ModuleLoader__.load({
 						saveConfig();
 						sync();
 					},
+					setHolidaysEnabled: (v) => {
+						cfg.holidays.enabled = v;
+						persistConfig();
+						const slot = todayHolidaySlot();
+						if (v && slot !== null) loadSlot(slot).then(() => applyActive());
+						applyActive();
+					},
 					exportTheme: () => {
 						const images = {};
-						for (const rule of cfg.rules) {
-							const url = imageOf(rule.slot);
-							if (url !== null) images[rule.slot] = url;
+						const slots = cfg.rules.map((r) => r.slot);
+						for (const slot of slots) {
+							const url = imageOf(slot);
+							if (url !== null) images[slot] = url;
 						}
 						const payload = {
 							version: 3,
@@ -5103,15 +5464,15 @@ window.__ModuleLoader__.load({
 							adoptConfig(d.config);
 							const incoming = d.images ?? {};
 							const keep = /* @__PURE__ */ new Set();
-							for (const rule of cfg.rules) {
-								keep.add(rule.slot);
-								const raw = incoming[rule.slot];
+							for (const slot of cfg.rules.map((r) => r.slot)) {
+								keep.add(slot);
+								const raw = incoming[slot];
 								if (typeof raw === "string" && /^data:image\//.test(raw)) {
-									setImage(rule.slot, raw);
-									writeImage(rule.slot, raw);
+									setImage(slot, raw);
+									writeImage(slot, raw);
 								} else {
-									setImage(rule.slot, null);
-									deleteImage(rule.slot);
+									setImage(slot, null);
+									deleteImage(slot);
 								}
 							}
 							for (const slot of Object.keys(incoming)) if (!keep.has(slot) && /^[A-Za-z0-9_-]{1,32}$/.test(slot)) deleteImage(slot);