dsh-theme-gallery 0.2.0 → 0.4.0

package/lib/client.js

@@ -33,6 +33,21 @@
  * one plugin is one sidebar entrance plus one main-column page — so it has room
  * for previews, descriptions and whatever this gallery grows into.
  *
+ * ## 出处与致谢（这是别人的劳动成果，必须写清楚）
+ *
+ * - **纯色/拼色卡片上的 15 个色值，全部取自「中国传统色库」项目**
+ *   （chinese-colors）：<https://github.com/zerosoul/chinese-colors>
+ *   作者 **tristan**（GitHub [@zerosoul](https://github.com/zerosoul)），
+ *   在线手册 <https://colors.ichuantong.cn>，许可 ISC。
+ *   该项目的 `src/assets/colors.json` 整理了 170 个中国传统色的名字与色值，
+ *   本插件只做**取色与派生**（每套方案只挑三四个名字色，其余 token 由
+ *   `schemeTokens()` 按同一条造色规则算出来）。色值与命名是作者整理的成果，
+ *   **感谢作者 tristan 的整理与开源**。取色数据见 `lib/palette-schemes.json`，
+ *   每套方案都带 `source` 字段记着它在色库里的「组 + id」。
+ * - 七套**复刻**皮肤的场景与配色复刻自**蜂链商城**电商新零售系统管理后台的主题，
+ *   项目地址：<https://github.com/renjie2026/fenglianshop-open>（该项目的开发者即本插件作者）。
+ * - 两套宠物主题（琥珀猫咪、虎子阿黄）为本插件原创。
+ *
  * ## Two conversational states
  *
  * A skin covers the screen; a screen covered by a gradient is what makes a long
@@ -84,13 +99,479 @@ window.__ModuleLoader__.load({
     const BUILT_IN_LABELS = { light: '浅色', dark: '深色', system: '跟随系统' }
 
     /**
-     * Built-in ids the gallery leaves to the official Appearance row.
+     * One-line copy for the built-in cards.
+     *
+     * The official themes declare no `description` of their own, so without this their
+     * cards would be a bare label. These two cards switch the PALETTE back to the system
+     * appearance — and they deliberately keep the previous skin's sidebar scenery on
+     * screen, which is the behaviour the second sentence advertises (see `syncAmbient`).
+     */
+    const BUILT_IN_DESCRIPTIONS = {
+      light: '系统默认浅色外观：与「设置 → 通用 → 外观」里的浅色是同一套配色。'
+        + '先选中主题皮肤，再切换浅色/深色 会有惊喜哦',
+      dark: '系统默认深色外观：与「设置 → 通用 → 外观」里的深色是同一套配色。'
+        + '先选中主题皮肤，再切换浅色/深色 会有惊喜哦',
+      system: '跟随系统外观设置（按桌面端的浅色/深色自动决定，因此不作为卡片展示）',
+    }
+
+    /**
+     * Built-in ids the gallery does not show as a card.
+     *
+     * `system` is a preference value rather than a look of its own — it resolves to
+     * `light` or `dark` depending on the desktop — so a card for it would duplicate one
+     * of the two cards above and change meaning with the OS setting. `light` and `dark`
+     * are BOTH shown now: together they are the way back out of every skin.
+     */
+    const OMITTED_IDS = new Set(['system'])
+
+    /**
+     * Display order of the gallery's cards — larger first.
+     *
+     * These are the user's own ranking numbers, kept as one table so the order is data
+     * rather than an implicit consequence of some other list. The REGISTRY order (and
+     * with it the contribution order in `BUNDLED_THEMES`) is deliberately untouched:
+     * this table is applied to the copy the page renders, and to nothing else.
+     *
+     * A theme with no entry sorts after every ranked one and keeps its registry order
+     * among the unranked (the sort is stable), so a theme contributed by another plugin
+     * still appears on the page instead of silently vanishing.
+     */
+    const CARD_ORDER = {
+      light: 99,
+      dark: 98,
+      'shi-liu-jin': 97,
+      'ying-mu-cai-yun': 96,
+      'shan-qing-ting-cai': 95,
+      'pei-an-jie-xin': 91,
+      'meng-hai-you-yu': 80,
+      'hu-po-mao-mi': 76,
+      'hu-zi-a-huang': 75,
+    }
+
+    /**
+     * The skin this plugin puts in effect when the user has never chosen anything.
+     *
+     * Requested behaviour: installing/enabling the plugin lands on 山青婷彩 instead of the
+     * built-in white theme. Applied by the ordinary restore path, so it obeys the same
+     * global write budget and paint confirmation as a remembered skin — and it stops the
+     * moment the user makes any choice of their own, because that choice is recorded.
+     */
+    const DEFAULT_SKIN = 'shan-qing-ting-cai'
+
+    /**
+     * The two keys this plugin owns in `localStorage`.
+     *
+     * Never `ui-theme.preference`: that field is read while the boot graph is still
+     * assembling, and a skin id in it makes `buildSnapshot()` throw `theme registry lost`
+     * and refuse to start. `localStorage` is private to this plugin, so a disabled or
+     * uninstalled plugin simply stops being consulted — that is the fallback.
+     *
+     * They live at module scope because the card-click handler runs in the page component,
+     * far from `mountGallery`, and it must be able to write them BEFORE the click reaches
+     * the theme service (which publishes synchronously).
+     */
+    const SKIN_KEY = 'theme-gallery:last-skin'
+    const BUILT_IN_KEY = 'theme-gallery:built-in-choice'
+
+    /**
+     * A theme's card rank; unranked themes sort last.
+     * @param id - the theme id.
+     * @returns its rank, or -1 when the table has no entry for it.
+     */
+    function cardRank(id) {
+      const rank = CARD_ORDER[id]
+      return typeof rank === 'number' ? rank : -1
+    }
+
+    /**
+     * Order a card list for display: highest rank first.
+     *
+     * Applied to the copy the page renders, never to the array the service is given, so a
+     * theme's registration and its card position are independent concerns (and a reorder
+     * can never change which themes exist or what they contain).
+     * @param themes - theme definitions, in registry order.
+     * @returns a new array in display order.
+     */
+    function cardsInDisplayOrder(themes) {
+      return [...themes].sort((a, b) => cardRank(b.id) - cardRank(a.id))
+    }
+
+    /** 配色方案 id 的形态：`p-` 前缀，避免与主题 id 混淆（锚主题就叫 `shi-liu-jin`）。 */
+    const SCHEME_ID = /^p-[a-z0-9-]+$/
+
+    /**
+     * 15 套「纯色/拼色」配色方案的落点。
+     *
+     * 声明在这里、赋值在文件下方（紧接内联的 `BUNDLED_PALETTES`）—— 工厂体自上而下执行，
+     * 而 `const BUNDLED_PALETTES` 内联在主题数组之后，所以这里只能先给一个空表。
+     * 表为空时**不会**静默画错：`cardRowShape` 找不到方案就退回默认色带，
+     * 而建期（`embed-themes.mjs`）与测试都要求每个方案 id 真实存在。
+     */
+    let PALETTE_SCHEMES = []
+
+    /** 配色卡自己的主题 id（"锚"）：只有它是活动主题时，所选方案才有效。 */
+    const PALETTE_ANCHOR = 'shi-liu-jin'
+
+    /** 所选配色方案记在这里。与皮肤 id 一样，**绝不**写进 `ui-theme.preference`。 */
+    const SCHEME_KEY = 'theme-gallery:palette'
+
+    /**
+     * 按 id 取一套配色方案。
+     * @param id - 方案 id。
+     * @param schemes - 方案表（显式传入，便于测试与预览各自喂数据）。
+     * @returns 方案，或 undefined。
+     */
+    function schemeById(id, schemes) {
+      const list = Array.isArray(schemes) ? schemes : []
+      return list.find((scheme) => scheme !== null && typeof scheme === 'object' && scheme.id === id)
+    }
+
+    /**
+     * 两个 6 位 hex 之间线性插值。
+     * @param a - 起点 `#rrggbb`。
+     * @param b - 终点 `#rrggbb`。
+     * @param t - 0 = a，1 = b。
+     * @returns `#rrggbb`。
+     */
+    function blendHex(a, b, t) {
+      const parts = (hex) => [1, 3, 5].map((at) => parseInt(hex.slice(at, at + 2), 16))
+      const [r1, g1, b1] = parts(a)
+      const [r2, g2, b2] = parts(b)
+      const mix = (x, y) => Math.round(x + (y - x) * t).toString(16).padStart(2, '0')
+      return `#${mix(r1, r2)}${mix(g1, g2)}${mix(b1, b2)}`
+    }
+
+    /**
+     * 把颜色往白（t > 0）或往黑（t < 0）推。
+     *
+     * 15 套配色里除了主色与底色，其余 60 多个 token 全靠它派生 —— 这样 15 套不会各写各的，
+     * 也就不会彼此漂移。压深出来的色值不是色库里的名字色，这是**派生的深浅阶**，
+     * 与既有皮肤的做法一致（例如琥珀猫咪用「琥珀深焙」做按钮族、`琥珀` 做强调色）。
+     * @param hex - `#rrggbb`。
+     * @param t - 正数提亮、负数压深，绝对值是幅度。
+     * @returns `#rrggbb`。
+     */
+    function shade(hex, t) {
+      if (!/^#[0-9a-fA-F]{6}$/.test(String(hex))) return hex
+      return t >= 0 ? blendHex(hex, '#FFFFFF', t) : blendHex(hex, '#000000', -t)
+    }
+
+    /**
+     * 卡片上那 15 个色值按钮的数据。
+     *
+     * ── 这一版换了语义 ─────────────────────────────────────────────────────────
+     *
+     * 早先 `card.rows` 直接写十六进制色块（纯展示）。现在每一格是**一个可点的配色方案 id**：
+     * 颜色从方案表来，所以卡片显示什么、点下去换什么，是同一条数据，不可能对不上。
+     *
+     * 仍然按老规矩消毒：`embed-themes.mjs` 校验的是本包出货的皮肤，而注册表里还有别的插件
+     * 贡献的主题；坏数据在这里退回默认色带，而不是把 `undefined` 画进背景。
+     * @param theme - 注册表里的主题定义。
+     * @param schemes - 配色方案表。
+     * @returns 两到三排 `{ kind, schemes }`，或 undefined（回落默认色带）。
+     */
+    function cardRowShape(theme, schemes) {
+      const card = theme.card
+      const rows = card === undefined || card === null ? undefined : card.rows
+      if (!Array.isArray(rows) || rows.length < 2 || rows.length > 3) return undefined
+      const clean = []
+      for (let index = 0; index < rows.length; index += 1) {
+        const row = rows[index]
+        if (row === null || typeof row !== 'object') return undefined
+        // 最后一排是「拼色」，前面都是「纯色」：这是用户定的版式，也让"哪一排是拼色"
+        // 不再靠眼睛判断。写歪就整张卡退回默认色带（可见地与预期不同，而不是微妙地错）。
+        const isLast = index === rows.length - 1
+        const wanted = isLast ? 'clash' : 'solid'
+        if (row.kind !== wanted) return undefined
+        if (!Array.isArray(row.schemes) || row.schemes.length < 1 || row.schemes.length > 5) return undefined
+        for (const id of row.schemes) {
+          if (typeof id !== 'string' || !SCHEME_ID.test(id)) return undefined
+          const scheme = schemeById(id, schemes)
+          // 方案存在、且它自己的 kind 与本排一致 —— 否则会把拼色画成一块纯色。
+          if (scheme === undefined || scheme.kind !== wanted) return undefined
+        }
+        clean.push({ kind: wanted, schemes: [...row.schemes] })
+      }
+      return clean
+    }
+
+    /**
+     * WCAG 对比度（1..21）。与 `scripts/lib/card-rows.mjs` 里那份是同一条公式的两个落点：
+     * 那份在**建期**拦配色表，这份在**运行期**决定按钮文字取白还是取深。
+     * @param a - `#rrggbb`。
+     * @param b - `#rrggbb`。
+     * @returns 对比度；任一输入非法时返回 0。
+     */
+    function wcagContrast(a, b) {
+      const lum = (hex) => {
+        if (!/^#[0-9a-fA-F]{6}$/.test(String(hex))) return null
+        const linear = [1, 3, 5].map((at) => parseInt(hex.slice(at, at + 2), 16) / 255)
+          .map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+        return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2]
+      }
+      const la = lum(a)
+      const lb = lum(b)
+      if (la === null || lb === null) return 0
+      // 先算再返回，**不要**写成 `return (…)`：`check-scope-reach.mjs` 的调用识别会把
+      // `return (` 读成"调用了名为 return 的函数"，于是报一条假违规（规则 6 的另一面：
+      // 审计误报同样要消除，否则它就不再可信）。
+      const ratio = (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05)
+      return ratio
+    }
+
+    /**
+     * 这个方案的按钮/链接填充色。
+     *
+     * 缃色、橘黄、桃红这类**亮色**做填充时，白字压上去只有 1.7–3.7:1（读不清）。
+     * 所以填充色按对比度**逐个候选**试出来，而不是写死一个压深量：
+     *
+     *   1. 本色 + 本方案的深色文字（最好：按钮留在色库那个名字色上）—— 缃色/橘黄/桃红都是这一条；
+     *   2. 本色 + 白字；
+     *   3. 依次压深 0.35 / 0.5 / 0.65 再用白字（海棠红、松柏绿、竹青、苍青走这条）。
+     *
+     * 方案可以用 `fill` 显式指定（石榴金就是：用户定的按钮色是色库里的「胭脂」`#9D2933`，
+     * 而不是把石榴红压深出来的合成色）。
+     * @param scheme - 一套配色方案。
+     * @returns `#rrggbb`。
+     */
+    function schemeButtonFill(scheme) {
+      const choice = schemeButtonChoice(scheme)
+      return choice[0]
+    }
+
+    /**
+     * 按钮填充色上的文字色（白或方案自己的深色），取对比度更高的那个。
+     * @param scheme - 一套配色方案。
+     * @returns `#rrggbb`。
+     */
+    function schemeOnMain(scheme) {
+      return schemeButtonChoice(scheme)[1]
+    }
+
+    /**
+     * 选出「填充色 + 文字色」这一对（规则见 {@link schemeButtonFill}）。
+     * @param scheme - 一套配色方案。
+     * @returns `[fill, onFill]`。
+     */
+    function schemeButtonChoice(scheme) {
+      const main = String(scheme.main)
+      const ink = String(scheme.ink)
+      if (typeof scheme.fill === 'string' && /^#[0-9a-fA-F]{6}$/.test(scheme.fill)) {
+        const onFill = wcagContrast(scheme.fill, '#FFFFFF') >= wcagContrast(scheme.fill, ink)
+          ? '#FFFFFF' : ink
+        return [scheme.fill, onFill]
+      }
+      const candidates = [
+        [main, ink],
+        [main, '#FFFFFF'],
+        [shade(main, -0.35), '#FFFFFF'],
+        [shade(main, -0.5), '#FFFFFF'],
+        [shade(main, -0.65), '#FFFFFF'],
+      ]
+      for (const candidate of candidates) {
+        if (wcagContrast(candidate[0], candidate[1]) >= 4.5) return candidate
+      }
+      return candidates.reduce((best, candidate) => (
+        wcagContrast(candidate[0], candidate[1]) > wcagContrast(best[0], best[1]) ? candidate : best
+      ))
+    }
+
+    /**
+     * 把一套配色方案展开成完整的 67 个 token（`overrideTokens` 层的成对格式）。
+     *
+     * 只有 `main` / `ground` / `ink` / `dots` 是色库里的名字色，其余全部由
+     * {@link shade} 派生：底色深浅阶、主色透明度边线、侧栏渐变。侧栏**刻意停在浅阶**
+     * （最深处只到主色的 0.42 白化），因为 `label-*` 是全界面共享的 —— 深底会让导航文字读不清，
+     * 这条教训写在 SKILL §14（深色系源侧栏一律"保色相提明度"）。
+     *
+     * `state-{error,success,warn}` 三族**不随配色变**：它们是语义色，跟着调色板走的后果是
+     * 报错不再像报错。`state-business-primary` 除外 —— 它画"当前文件夹"的图标，属于品牌语汇：
+     * 纯色方案用主色，拼色方案用第三个点缀色（那正是"撞"出来的那个）。
+     * @param scheme - 一套配色方案。
+     * @returns `{ token: { light, dark } }`。
+     */
+    function schemeTokens(scheme) {
+      const main = String(scheme.main)
+      const ground = String(scheme.ground)
+      const ink = String(scheme.ink)
+      const fill = schemeButtonFill(scheme)
+      const onFill = schemeOnMain(scheme)
+      const business = scheme.kind === 'clash' && Array.isArray(scheme.dots) && scheme.dots.length > 2
+        ? String(scheme.dots[2])
+        : main
+      const pair = (value) => ({ light: value, dark: value })
+      const stops = [0, 20, 36, 50, 62, 74, 86, 100]
+      const sidebar = [0.94, 0.86, 0.78, 0.70, 0.62, 0.54, 0.48, 0.42]
+        .map((t, index) => `${shade(main, t)} ${stops[index]}%`).join(',')
+      return {
+        '--dsw-alias-bg-base': pair(`linear-gradient(to bottom,${shade(ground, 0.5)} 0%,${ground} 55%,${shade(ground, -0.06)} 100%)`),
+        '--dsw-alias-bg-layer-1': pair(shade(ground, 0.72)),
+        '--dsw-alias-bg-layer-2': pair('#FFFFFF'),
+        '--dsw-alias-bg-layer-3': pair('#FFFFFF'),
+        '--dsw-alias-bg-overlay': pair(shade(ground, -0.1)),
+        '--dsw-alias-bg-skeleton': pair(`${main}14`),
+        '--dsw-alias-bg-module-platform': pair(shade(ground, -0.1)),
+        '--dsw-alias-bg-multi-select': pair(shade(ground, -0.1)),
+        '--dsw-alias-border-l1': pair(`${main}0F`),
+        '--dsw-alias-border-l2': pair(`${main}21`),
+        '--dsw-alias-border-l3': pair(`${main}2E`),
+        '--dsw-alias-border-l4': pair(`${main}3D`),
+        '--dsw-alias-brand-primary': pair(fill),
+        '--dsw-alias-brand-primary-invert': pair('#FFFFFF'),
+        '--dsw-alias-brand-text': pair(fill),
+        '--dsw-alias-label-primary': pair(ink),
+        '--dsw-alias-label-primary-bluish': pair(ink),
+        '--dsw-alias-label-secondary': pair(shade(ink, 0.22)),
+        '--dsw-alias-label-tertiary': pair(shade(ink, 0.42)),
+        '--dsw-alias-label-caption': pair(shade(ink, 0.42)),
+        '--dsw-alias-label-dimmed': pair(shade(ink, 0.62)),
+        '--dsw-alias-label-primary-dimmed': pair(shade(ink, 0.22)),
+        '--dsw-alias-label-primary-foreground': pair(onFill),
+        '--dsw-alias-label-primary-inverted': pair('#FFFFFF'),
+        '--dsw-alias-link': pair(fill),
+        '--dsw-alias-interactive-bg-hover': pair(`${main}14`),
+        '--dsw-alias-interactive-bg-active': pair(`${main}2E`),
+        '--dsw-alias-interactive-bg-hover-solid': pair(shade(ground, -0.08)),
+        '--dsw-alias-interactive-bg-hover-accent': pair(`${main}3D`),
+        '--dsw-alias-button-primary-fill': pair(fill),
+        '--dsw-alias-button-primary-hover': pair(shade(fill, 0.12)),
+        '--dsw-alias-button-primary-dimmed': pair(`${fill}47`),
+        '--dsw-alias-button-ghost-active-fill': pair(`${main}29`),
+        '--dsw-alias-button-ghost-active-border': pair(main),
+        '--dsw-alias-button-ghost-active-hover': pair(`${main}47`),
+        '--dsw-alias-button-info-fill': pair(shade(ink, 0.22)),
+        '--dsw-alias-button-info-hover': pair(shade(ink, 0.1)),
+        '--dsw-alias-button-elevated-fill': pair('#FFFFFF'),
+        '--dsw-alias-button-floating-fill': pair('#FFFFFF'),
+        '--dsw-alias-button-floating-hover': pair(shade(ground, 0.8)),
+        '--dsw-alias-button-contrast-fill': pair(ink),
+        '--dsw-alias-markdown-code-block': pair(shade(ground, 0.6)),
+        '--dsw-alias-markdown-code-block-banner': pair(shade(ground, 0.45)),
+        '--dsw-alias-markdown-inline-code': pair(shade(ground, -0.08)),
+        '--dsw-alias-markdown-citation': pair(shade(ground, -0.08)),
+        '--dsw-alias-markdown-tag': pair(shade(ground, -0.08)),
+        '--dsw-alias-markdown-placeholder': pair(shade(ground, 0.4)),
+        '--dsw-alias-markdown-code-segment-selected': pair(`${main}29`),
+        '--dsw-alias-markdown-code-segment-unselected': pair(shade(ground, 0.6)),
+        '--dsw-alias-scrollbar-bg-l1': pair(`${main}29`),
+        '--dsw-alias-scrollbar-bg-l2': pair(`${main}38`),
+        '--dsw-alias-scrollbar-hover-l1': pair(`${main}52`),
+        '--dsw-alias-scrollbar-hover-l2': pair(`${main}66`),
+        '--dsw-alias-tooltip-bg': pair(ink),
+        '--dsw-alias-toast-bg': pair('#FFFFFF'),
+        '--dsw-alias-state-error-primary': pair('#C2352B'),
+        '--dsw-alias-state-error-secondary': pair('#DB5A6B'),
+        '--dsw-alias-state-success-primary': pair('#1DA981'),
+        '--dsw-alias-state-success-secondary': pair('#7FE3C0'),
+        '--dsw-alias-state-success-tertiary': pair('#D8F5E8'),
+        '--dsw-alias-state-warn-primary': pair('#C89B40'),
+        '--dsw-alias-state-warn-secondary': pair('#EACD76'),
+        '--dsw-alias-state-warn-tertiary': pair('#F7EBC8'),
+        '--dsw-alias-state-warn-label': pair('#7A5A0E'),
+        '--dsw-alias-state-business-primary': pair(business),
+        '--dsw-alias-state-business-tertiary': pair(shade(business, 0.55)),
+        '--dsw-specific-sidebar-fill': pair(`linear-gradient(to bottom,${sidebar})`),
+      }
+    }
+
+    /**
+     * Record the user's card choice BEFORE it reaches the theme service.
+     *
+     * ── WHY THE ORDER IS LOAD-BEARING ───────────────────────────────────────────
+     *
+     * `ctx.theme.setTheme()` publishes synchronously, and the publisher re-applies the
+     * remembered skin whenever the active theme is not one of ours. So a built-in card
+     * clicked after any skin had been chosen used to be undone a microtask later: the click
+     * landed, the restore read `SKIN_KEY`, and the skin came straight back. On screen the
+     * 深色 card simply did nothing.
+     *
+     * Removing `SKIN_KEY` here, before the write, is what makes a built-in choice stick.
+     * `BUILT_IN_KEY` is written so the default skin does NOT fire on the next restart and
+     * undo the choice — see `wantedSkin`.
+     *
+     * Any theme this package does not provide counts as "not a skin": another plugin's
+     * theme must win as well, for exactly the same reason.
+     * @param id - the card's theme id.
+     */
+    function rememberCardChoice(id) {
+      try {
+        if (typeof window === 'undefined') return
+        const storage = window.localStorage
+        if (storage === undefined || storage === null) return
+        if (bundledTheme(id) === undefined) {
+          storage.removeItem(SKIN_KEY)
+          storage.setItem(BUILT_IN_KEY, String(id))
+          return
+        }
+        // A skin: it is recorded by the restore once it is genuinely active, so the stale
+        // built-in marker is cleared here rather than there.
+        storage.removeItem(BUILT_IN_KEY)
+      } catch (error) {
+        console.error('[theme-gallery] could not record the card choice:', error)
+      }
+    }
+
+    /**
+     * The built-in appearance the user picked in this panel, if any.
+     * @returns the id, or null when the user never picked one here.
+     */
+    function builtInChoice() {
+      try {
+        if (typeof window === 'undefined') return null
+        const value = window.localStorage?.getItem(BUILT_IN_KEY)
+        return typeof value === 'string' && value !== '' ? value : null
+      } catch {
+        return null
+      }
+    }
+
+    /**
+     * Record the palette scheme the user clicked on the picker card.
      *
-     * `light` is exactly what "follow the system" resolves to on a light desktop,
-     * so offering it beside that row is duplicate UI. `dark` stays because it is a
-     * distinct choice a user may want without a full skin.
+     * Same storage rule as the skin id: **`localStorage` only**, never
+     * `ui-theme.preference` (a value the boot graph reads would have to be a built-in
+     * id, and an unknown one makes `buildSnapshot()` throw and refuse to start).
+     * @param id - the scheme id (`p-…`).
      */
-    const OMITTED_IDS = new Set(['light'])
+    function rememberScheme(id) {
+      try {
+        if (typeof window === 'undefined') return
+        window.localStorage?.setItem(SCHEME_KEY, String(id))
+      } catch (error) {
+        console.error('[theme-gallery] could not record the palette scheme:', error)
+      }
+    }
+
+    /**
+     * The palette scheme the user picked, if any.
+     * @returns the id, or null when the user never picked one.
+     */
+    function rememberedScheme() {
+      try {
+        if (typeof window === 'undefined') return null
+        const value = window.localStorage?.getItem(SCHEME_KEY)
+        if (typeof value !== 'string' || value === '') return null
+        // 只认表里真实存在的 id：换过色表、手改过 localStorage 时，宁可当作没选，
+        // 也不要叠一层空方案（那会把整屏的颜色悄悄换掉）。
+        return schemeById(value, PALETTE_SCHEMES) === undefined ? null : value
+      } catch {
+        return null
+      }
+    }
+
+    /** 卡片上默认点亮的那一格：锚主题自己的那套配色（没选过任何方案时）。 */
+    const DEFAULT_SCHEME = 'p-shi-liu-jin'
+
+    /**
+     * 卡片上应当点亮哪一格。
+     *
+     * 没选过时给默认值**只是为了显示**：那时并不叠配色层，屏幕上是锚主题自己
+     * 手工写的那套 token（与这一格同一组关键色，观感几乎一致）。
+     * @returns 方案 id。
+     */
+    function wantedScheme() {
+      return rememberedScheme() ?? DEFAULT_SCHEME
+    }
 
     /** Body attribute publishing the reading state; the injected rule reads it. */
     const READING_ATTRIBUTE = 'data-dsh-theme-reading'
@@ -118,7 +599,7 @@ window.__ModuleLoader__.load({
      * package.json, and the release workflow fails when re-running the embed step
      * changes a tracked file.
      */
-    const BUNDLED_VERSION = '0.2.0'
+    const BUNDLED_VERSION = '0.4.0'
 
     /**
      * Themes this package contributes, inlined from lib/themes/*.json.
@@ -131,10 +612,586 @@ window.__ModuleLoader__.load({
      * Regenerate after editing those files: `node scripts/embed-themes.mjs`.
      */
     const BUNDLED_THEMES = [
+      {
+        "id": "hu-po-mao-mi",
+        "label": "琥珀猫咪",
+        "description": "琥珀暖光，双猫伴读 —— 原创宠物主题：两只虎斑短毛猫守着洒满阳光的窗台",
+        "colorScheme": "light",
+        "tokens": {
+          "--dsw-alias-bg-base": {
+            "light": "linear-gradient(to bottom,#FEFBF5 0%,#FBF2E3 55%,#F8EDD8 100%)",
+            "dark": "linear-gradient(to bottom,#FEFBF5 0%,#FBF2E3 55%,#F8EDD8 100%)"
+          },
+          "--dsw-alias-bg-layer-1": {
+            "light": "#FEFCF7",
+            "dark": "#FEFCF7"
+          },
+          "--dsw-alias-bg-layer-2": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-layer-3": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-overlay": {
+            "light": "#F3E5CD",
+            "dark": "#F3E5CD"
+          },
+          "--dsw-alias-bg-skeleton": {
+            "light": "#9C5F2414",
+            "dark": "#9C5F2414"
+          },
+          "--dsw-alias-bg-module-platform": {
+            "light": "#F3E5CD",
+            "dark": "#F3E5CD"
+          },
+          "--dsw-alias-bg-multi-select": {
+            "light": "#F3E5CD",
+            "dark": "#F3E5CD"
+          },
+          "--dsw-alias-border-l1": {
+            "light": "#9C5F240F",
+            "dark": "#9C5F240F"
+          },
+          "--dsw-alias-border-l2": {
+            "light": "#9C5F2421",
+            "dark": "#9C5F2421"
+          },
+          "--dsw-alias-border-l3": {
+            "light": "#9C5F242E",
+            "dark": "#9C5F242E"
+          },
+          "--dsw-alias-border-l4": {
+            "light": "#9C5F243D",
+            "dark": "#9C5F243D"
+          },
+          "--dsw-alias-brand-primary": {
+            "light": "#9C5F24",
+            "dark": "#9C5F24"
+          },
+          "--dsw-alias-brand-primary-invert": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-brand-text": {
+            "light": "#9C5F24",
+            "dark": "#9C5F24"
+          },
+          "--dsw-alias-label-primary": {
+            "light": "#453019",
+            "dark": "#453019"
+          },
+          "--dsw-alias-label-primary-bluish": {
+            "light": "#453019",
+            "dark": "#453019"
+          },
+          "--dsw-alias-label-secondary": {
+            "light": "#6A4E2F",
+            "dark": "#6A4E2F"
+          },
+          "--dsw-alias-label-tertiary": {
+            "light": "#8C6F4C",
+            "dark": "#8C6F4C"
+          },
+          "--dsw-alias-label-caption": {
+            "light": "#8C6F4C",
+            "dark": "#8C6F4C"
+          },
+          "--dsw-alias-label-dimmed": {
+            "light": "#B49C7F",
+            "dark": "#B49C7F"
+          },
+          "--dsw-alias-label-primary-dimmed": {
+            "light": "#6A4E2F",
+            "dark": "#6A4E2F"
+          },
+          "--dsw-alias-label-primary-foreground": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-label-primary-inverted": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-link": {
+            "light": "#CA6924",
+            "dark": "#CA6924"
+          },
+          "--dsw-alias-interactive-bg-hover": {
+            "light": "#9C5F2414",
+            "dark": "#9C5F2414"
+          },
+          "--dsw-alias-interactive-bg-active": {
+            "light": "#CA69242E",
+            "dark": "#CA69242E"
+          },
+          "--dsw-alias-interactive-bg-hover-solid": {
+            "light": "#F3E5CD",
+            "dark": "#F3E5CD"
+          },
+          "--dsw-alias-interactive-bg-hover-accent": {
+            "light": "#CA69243D",
+            "dark": "#CA69243D"
+          },
+          "--dsw-alias-button-primary-fill": {
+            "light": "#9C5F24",
+            "dark": "#9C5F24"
+          },
+          "--dsw-alias-button-primary-hover": {
+            "light": "#B0702F",
+            "dark": "#B0702F"
+          },
+          "--dsw-alias-button-primary-dimmed": {
+            "light": "#9C5F2447",
+            "dark": "#9C5F2447"
+          },
+          "--dsw-alias-button-ghost-active-fill": {
+            "light": "#CA692429",
+            "dark": "#CA692429"
+          },
+          "--dsw-alias-button-ghost-active-border": {
+            "light": "#CA6924",
+            "dark": "#CA6924"
+          },
+          "--dsw-alias-button-ghost-active-hover": {
+            "light": "#CA692447",
+            "dark": "#CA692447"
+          },
+          "--dsw-alias-button-info-fill": {
+            "light": "#B0702F",
+            "dark": "#B0702F"
+          },
+          "--dsw-alias-button-info-hover": {
+            "light": "#9C5F24",
+            "dark": "#9C5F24"
+          },
+          "--dsw-alias-button-elevated-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-hover": {
+            "light": "#FDF8F0",
+            "dark": "#FDF8F0"
+          },
+          "--dsw-alias-button-contrast-fill": {
+            "light": "#453019",
+            "dark": "#453019"
+          },
+          "--dsw-alias-markdown-code-block": {
+            "light": "#F7EEDF",
+            "dark": "#F7EEDF"
+          },
+          "--dsw-alias-markdown-code-block-banner": {
+            "light": "#F0E3CB",
+            "dark": "#F0E3CB"
+          },
+          "--dsw-alias-markdown-inline-code": {
+            "light": "#F3E9D6",
+            "dark": "#F3E9D6"
+          },
+          "--dsw-alias-markdown-citation": {
+            "light": "#F3E9D6",
+            "dark": "#F3E9D6"
+          },
+          "--dsw-alias-markdown-tag": {
+            "light": "#F3E9D6",
+            "dark": "#F3E9D6"
+          },
+          "--dsw-alias-markdown-placeholder": {
+            "light": "#F0E3CB",
+            "dark": "#F0E3CB"
+          },
+          "--dsw-alias-markdown-code-segment-selected": {
+            "light": "#CA692429",
+            "dark": "#CA692429"
+          },
+          "--dsw-alias-markdown-code-segment-unselected": {
+            "light": "#F7EEDF",
+            "dark": "#F7EEDF"
+          },
+          "--dsw-alias-scrollbar-bg-l1": {
+            "light": "#9C5F2429",
+            "dark": "#9C5F2429"
+          },
+          "--dsw-alias-scrollbar-bg-l2": {
+            "light": "#9C5F2438",
+            "dark": "#9C5F2438"
+          },
+          "--dsw-alias-scrollbar-hover-l1": {
+            "light": "#9C5F2452",
+            "dark": "#9C5F2452"
+          },
+          "--dsw-alias-scrollbar-hover-l2": {
+            "light": "#9C5F2466",
+            "dark": "#9C5F2466"
+          },
+          "--dsw-alias-tooltip-bg": {
+            "light": "#453019",
+            "dark": "#453019"
+          },
+          "--dsw-alias-toast-bg": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-state-error-primary": {
+            "light": "#C65B6A",
+            "dark": "#C65B6A"
+          },
+          "--dsw-alias-state-error-secondary": {
+            "light": "#DB5A6B",
+            "dark": "#DB5A6B"
+          },
+          "--dsw-alias-state-success-primary": {
+            "light": "#21A675",
+            "dark": "#21A675"
+          },
+          "--dsw-alias-state-success-secondary": {
+            "light": "#9C5F24",
+            "dark": "#9C5F24"
+          },
+          "--dsw-alias-state-success-tertiary": {
+            "light": "#CFBA9C",
+            "dark": "#CFBA9C"
+          },
+          "--dsw-alias-state-warn-primary": {
+            "light": "#B97F3A",
+            "dark": "#B97F3A"
+          },
+          "--dsw-alias-state-warn-secondary": {
+            "light": "#D9A45E",
+            "dark": "#D9A45E"
+          },
+          "--dsw-alias-state-warn-tertiary": {
+            "light": "#EFDCC0",
+            "dark": "#EFDCC0"
+          },
+          "--dsw-alias-state-warn-label": {
+            "light": "#8A5A22",
+            "dark": "#8A5A22"
+          },
+          "--dsw-alias-state-business-primary": {
+            "light": "#CA6924",
+            "dark": "#CA6924"
+          },
+          "--dsw-alias-state-business-tertiary": {
+            "light": "#E29C45",
+            "dark": "#E29C45"
+          },
+          "--dsw-specific-sidebar-fill": {
+            "light": "linear-gradient(to bottom,#FBF0DE 0%,#F5E3C6 20%,#EDD5AE 36%,#E3C593 50%,#D8B57D 62%,#CBA468 74%,#C69E5F 86%,#BB904F 100%)",
+            "dark": "linear-gradient(to bottom,#FBF0DE 0%,#F5E3C6 20%,#EDD5AE 36%,#E3C593 50%,#D8B57D 62%,#CBA468 74%,#C69E5F 86%,#BB904F 100%)"
+          }
+        },
+        "reading": {
+          "colorScheme": "light",
+          "bg": "#FFFFFF",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "accent": "#CA6924",
+        "ambient": {
+          "kind": "humao",
+          "dust": 6
+        }
+      },
+      {
+        "id": "hu-zi-a-huang",
+        "label": "虎子阿黄",
+        "description": "麦香田园，黄犬相迎 —— 原创宠物主题：中黄田园犬「虎子阿黄」摇着尾巴守在田埂上",
+        "colorScheme": "light",
+        "tokens": {
+          "--dsw-alias-bg-base": {
+            "light": "linear-gradient(to bottom,#FEFDF6 0%,#FBF5E0 55%,#F7EFD0 100%)",
+            "dark": "linear-gradient(to bottom,#FEFDF6 0%,#FBF5E0 55%,#F7EFD0 100%)"
+          },
+          "--dsw-alias-bg-layer-1": {
+            "light": "#FEFCF4",
+            "dark": "#FEFCF4"
+          },
+          "--dsw-alias-bg-layer-2": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-layer-3": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-bg-overlay": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-bg-skeleton": {
+            "light": "#896C3914",
+            "dark": "#896C3914"
+          },
+          "--dsw-alias-bg-module-platform": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-bg-multi-select": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-border-l1": {
+            "light": "#896C390F",
+            "dark": "#896C390F"
+          },
+          "--dsw-alias-border-l2": {
+            "light": "#896C3921",
+            "dark": "#896C3921"
+          },
+          "--dsw-alias-border-l3": {
+            "light": "#896C392E",
+            "dark": "#896C392E"
+          },
+          "--dsw-alias-border-l4": {
+            "light": "#896C393D",
+            "dark": "#896C393D"
+          },
+          "--dsw-alias-brand-primary": {
+            "light": "#896C39",
+            "dark": "#896C39"
+          },
+          "--dsw-alias-brand-primary-invert": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-brand-text": {
+            "light": "#896C39",
+            "dark": "#896C39"
+          },
+          "--dsw-alias-label-primary": {
+            "light": "#3B3018",
+            "dark": "#3B3018"
+          },
+          "--dsw-alias-label-primary-bluish": {
+            "light": "#3B3018",
+            "dark": "#3B3018"
+          },
+          "--dsw-alias-label-secondary": {
+            "light": "#5D4E2B",
+            "dark": "#5D4E2B"
+          },
+          "--dsw-alias-label-tertiary": {
+            "light": "#857451",
+            "dark": "#857451"
+          },
+          "--dsw-alias-label-caption": {
+            "light": "#857451",
+            "dark": "#857451"
+          },
+          "--dsw-alias-label-dimmed": {
+            "light": "#B2A47E",
+            "dark": "#B2A47E"
+          },
+          "--dsw-alias-label-primary-dimmed": {
+            "light": "#5D4E2B",
+            "dark": "#5D4E2B"
+          },
+          "--dsw-alias-label-primary-foreground": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-label-primary-inverted": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-link": {
+            "light": "#AE7000",
+            "dark": "#AE7000"
+          },
+          "--dsw-alias-interactive-bg-hover": {
+            "light": "#896C3914",
+            "dark": "#896C3914"
+          },
+          "--dsw-alias-interactive-bg-active": {
+            "light": "#F0C2392E",
+            "dark": "#F0C2392E"
+          },
+          "--dsw-alias-interactive-bg-hover-solid": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-interactive-bg-hover-accent": {
+            "light": "#F0C2393D",
+            "dark": "#F0C2393D"
+          },
+          "--dsw-alias-button-primary-fill": {
+            "light": "#896C39",
+            "dark": "#896C39"
+          },
+          "--dsw-alias-button-primary-hover": {
+            "light": "#A88462",
+            "dark": "#A88462"
+          },
+          "--dsw-alias-button-primary-dimmed": {
+            "light": "#896C3947",
+            "dark": "#896C3947"
+          },
+          "--dsw-alias-button-ghost-active-fill": {
+            "light": "#F0C23929",
+            "dark": "#F0C23929"
+          },
+          "--dsw-alias-button-ghost-active-border": {
+            "light": "#F0C239",
+            "dark": "#F0C239"
+          },
+          "--dsw-alias-button-ghost-active-hover": {
+            "light": "#F0C23947",
+            "dark": "#F0C23947"
+          },
+          "--dsw-alias-button-info-fill": {
+            "light": "#A88462",
+            "dark": "#A88462"
+          },
+          "--dsw-alias-button-info-hover": {
+            "light": "#896C39",
+            "dark": "#896C39"
+          },
+          "--dsw-alias-button-elevated-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-fill": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-button-floating-hover": {
+            "light": "#FCF8EC",
+            "dark": "#FCF8EC"
+          },
+          "--dsw-alias-button-contrast-fill": {
+            "light": "#3B3018",
+            "dark": "#3B3018"
+          },
+          "--dsw-alias-markdown-code-block": {
+            "light": "#F8F1DC",
+            "dark": "#F8F1DC"
+          },
+          "--dsw-alias-markdown-code-block-banner": {
+            "light": "#F1E7C6",
+            "dark": "#F1E7C6"
+          },
+          "--dsw-alias-markdown-inline-code": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-markdown-citation": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-markdown-tag": {
+            "light": "#F4EAD0",
+            "dark": "#F4EAD0"
+          },
+          "--dsw-alias-markdown-placeholder": {
+            "light": "#F1E7C6",
+            "dark": "#F1E7C6"
+          },
+          "--dsw-alias-markdown-code-segment-selected": {
+            "light": "#F0C23929",
+            "dark": "#F0C23929"
+          },
+          "--dsw-alias-markdown-code-segment-unselected": {
+            "light": "#F8F1DC",
+            "dark": "#F8F1DC"
+          },
+          "--dsw-alias-scrollbar-bg-l1": {
+            "light": "#896C3929",
+            "dark": "#896C3929"
+          },
+          "--dsw-alias-scrollbar-bg-l2": {
+            "light": "#896C3938",
+            "dark": "#896C3938"
+          },
+          "--dsw-alias-scrollbar-hover-l1": {
+            "light": "#896C3952",
+            "dark": "#896C3952"
+          },
+          "--dsw-alias-scrollbar-hover-l2": {
+            "light": "#896C3966",
+            "dark": "#896C3966"
+          },
+          "--dsw-alias-tooltip-bg": {
+            "light": "#3B3018",
+            "dark": "#3B3018"
+          },
+          "--dsw-alias-toast-bg": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-state-error-primary": {
+            "light": "#C65B6A",
+            "dark": "#C65B6A"
+          },
+          "--dsw-alias-state-error-secondary": {
+            "light": "#DB5A6B",
+            "dark": "#DB5A6B"
+          },
+          "--dsw-alias-state-success-primary": {
+            "light": "#21A675",
+            "dark": "#21A675"
+          },
+          "--dsw-alias-state-success-secondary": {
+            "light": "#896C39",
+            "dark": "#896C39"
+          },
+          "--dsw-alias-state-success-tertiary": {
+            "light": "#D1C69C",
+            "dark": "#D1C69C"
+          },
+          "--dsw-alias-state-warn-primary": {
+            "light": "#B97F3A",
+            "dark": "#B97F3A"
+          },
+          "--dsw-alias-state-warn-secondary": {
+            "light": "#D9A45E",
+            "dark": "#D9A45E"
+          },
+          "--dsw-alias-state-warn-tertiary": {
+            "light": "#EFDCC0",
+            "dark": "#EFDCC0"
+          },
+          "--dsw-alias-state-warn-label": {
+            "light": "#8A5A22",
+            "dark": "#8A5A22"
+          },
+          "--dsw-alias-state-business-primary": {
+            "light": "#F0C239",
+            "dark": "#F0C239"
+          },
+          "--dsw-alias-state-business-tertiary": {
+            "light": "#F5D46B",
+            "dark": "#F5D46B"
+          },
+          "--dsw-specific-sidebar-fill": {
+            "light": "linear-gradient(to bottom,#FAF3DC 0%,#F4EAC2 20%,#ECDFAB 36%,#E2D191 50%,#D6C078 62%,#C9AF63 74%,#C4A85F 86%,#B89B51 100%)",
+            "dark": "linear-gradient(to bottom,#FAF3DC 0%,#F4EAC2 20%,#ECDFAB 36%,#E2D191 50%,#D6C078 62%,#C9AF63 74%,#C4A85F 86%,#B89B51 100%)"
+          }
+        },
+        "reading": {
+          "colorScheme": "light",
+          "bg": "#FFFFFF",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "accent": "#F0C239",
+        "ambient": {
+          "kind": "ahuang",
+          "dust": 5
+        }
+      },
       {
         "id": "meng-hai-you-yu",
         "label": "梦海游鱼",
-        "description": "梦幻海洋，游鱼作伴 —— 复刻自电商新零售系统管理后台的默认主题",
+        "description": "梦幻海洋，游鱼作伴 —— 复刻自蜂链商城电商新零售系统管理后台的默认主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -424,7 +1481,7 @@ window.__ModuleLoader__.load({
       {
         "id": "pei-an-jie-xin",
         "label": "佩安杰心",
-        "description": "檀香禅影，自在安顿 —— 复刻自电商新零售系统管理后台同名主题",
+        "description": "檀香禅影，自在安顿 —— 复刻自蜂链商城电商新零售系统管理后台同名主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -712,7 +1769,7 @@ window.__ModuleLoader__.load({
       {
         "id": "shan-qing-ting-cai",
         "label": "山青婷彩",
-        "description": "青山叠翠，蜓舞生姿 —— 复刻自电商新零售系统管理后台同名主题",
+        "description": "青山叠翠，蜓舞生姿 —— 复刻自蜂链商城电商新零售系统管理后台同名主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -976,31 +2033,349 @@ window.__ModuleLoader__.load({
             "dark": "#E88BB0"
           },
           "--dsw-alias-state-business-tertiary": {
-            "light": "#F8A8C2",
-            "dark": "#F8A8C2"
+            "light": "#F8A8C2",
+            "dark": "#F8A8C2"
+          },
+          "--dsw-specific-sidebar-fill": {
+            "light": "linear-gradient(to bottom,#EAF7F0 0%,#D8EFE4 20%,#C9E8DA 36%,#BFE2D2 50%,#B4DCCA 62%,#A8D2BE 74%,#9CC9B2 86%,#90C0A8 100%)",
+            "dark": "linear-gradient(to bottom,#EAF7F0 0%,#D8EFE4 20%,#C9E8DA 36%,#BFE2D2 50%,#B4DCCA 62%,#A8D2BE 74%,#9CC9B2 86%,#90C0A8 100%)"
+          }
+        },
+        "reading": {
+          "colorScheme": "light",
+          "bg": "#FFFFFF",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "accent": "#E88BB0",
+        "ambient": {
+          "kind": "shan",
+          "petals": 7
+        }
+      },
+      {
+        "id": "shi-liu-jin",
+        "label": "纯色/拼色",
+        "description": "石榴红撞赤金与翡翠 —— 纯色排 × 拼色排的配色卡：15 个色块铺满卡面，不含侧栏素材",
+        "colorScheme": "light",
+        "tokens": {
+          "--dsw-alias-bg-base": {
+            "light": "linear-gradient(to bottom,#FBF7EC 0%,#F2ECDE 55%,#EADFC4 100%)",
+            "dark": "linear-gradient(to bottom,#FBF7EC 0%,#F2ECDE 55%,#EADFC4 100%)"
+          },
+          "--dsw-alias-bg-layer-1": {
+            "light": "#F0F0F4",
+            "dark": "#F0F0F4"
+          },
+          "--dsw-alias-bg-layer-2": {
+            "light": "#FFFBF0",
+            "dark": "#FFFBF0"
+          },
+          "--dsw-alias-bg-layer-3": {
+            "light": "#FFFBF0",
+            "dark": "#FFFBF0"
+          },
+          "--dsw-alias-bg-overlay": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-bg-skeleton": {
+            "light": "#D1D9E0",
+            "dark": "#D1D9E0"
+          },
+          "--dsw-alias-bg-module-platform": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-bg-multi-select": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-border-l1": {
+            "light": "#9D29330F",
+            "dark": "#9D29330F"
+          },
+          "--dsw-alias-border-l2": {
+            "light": "#9D293321",
+            "dark": "#9D293321"
+          },
+          "--dsw-alias-border-l3": {
+            "light": "#9D29332E",
+            "dark": "#9D29332E"
+          },
+          "--dsw-alias-border-l4": {
+            "light": "#D1D9E080",
+            "dark": "#D1D9E080"
+          },
+          "--dsw-alias-brand-primary": {
+            "light": "#9D2933",
+            "dark": "#9D2933"
+          },
+          "--dsw-alias-brand-primary-invert": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-brand-text": {
+            "light": "#9D2933",
+            "dark": "#9D2933"
+          },
+          "--dsw-alias-label-primary": {
+            "light": "#312520",
+            "dark": "#312520"
+          },
+          "--dsw-alias-label-primary-bluish": {
+            "light": "#312520",
+            "dark": "#312520"
+          },
+          "--dsw-alias-label-secondary": {
+            "light": "#574266",
+            "dark": "#574266"
+          },
+          "--dsw-alias-label-tertiary": {
+            "light": "#75664D",
+            "dark": "#75664D"
+          },
+          "--dsw-alias-label-caption": {
+            "light": "#75664D",
+            "dark": "#75664D"
+          },
+          "--dsw-alias-label-dimmed": {
+            "light": "#9A8C76",
+            "dark": "#9A8C76"
+          },
+          "--dsw-alias-label-primary-dimmed": {
+            "light": "#574266",
+            "dark": "#574266"
+          },
+          "--dsw-alias-label-primary-foreground": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-label-primary-inverted": {
+            "light": "#FFFFFF",
+            "dark": "#FFFFFF"
+          },
+          "--dsw-alias-link": {
+            "light": "#9D2933",
+            "dark": "#9D2933"
+          },
+          "--dsw-alias-interactive-bg-hover": {
+            "light": "#9D293314",
+            "dark": "#9D293314"
+          },
+          "--dsw-alias-interactive-bg-active": {
+            "light": "#F20C002E",
+            "dark": "#F20C002E"
+          },
+          "--dsw-alias-interactive-bg-hover-solid": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-interactive-bg-hover-accent": {
+            "light": "#F20C003D",
+            "dark": "#F20C003D"
+          },
+          "--dsw-alias-button-primary-fill": {
+            "light": "#9D2933",
+            "dark": "#9D2933"
+          },
+          "--dsw-alias-button-primary-hover": {
+            "light": "#B33A45",
+            "dark": "#B33A45"
+          },
+          "--dsw-alias-button-primary-dimmed": {
+            "light": "#9D293347",
+            "dark": "#9D293347"
+          },
+          "--dsw-alias-button-ghost-active-fill": {
+            "light": "#F20C0029",
+            "dark": "#F20C0029"
+          },
+          "--dsw-alias-button-ghost-active-border": {
+            "light": "#F20C00",
+            "dark": "#F20C00"
+          },
+          "--dsw-alias-button-ghost-active-hover": {
+            "light": "#F20C0047",
+            "dark": "#F20C0047"
+          },
+          "--dsw-alias-button-info-fill": {
+            "light": "#574266",
+            "dark": "#574266"
+          },
+          "--dsw-alias-button-info-hover": {
+            "light": "#75664D",
+            "dark": "#75664D"
+          },
+          "--dsw-alias-button-elevated-fill": {
+            "light": "#FFFBF0",
+            "dark": "#FFFBF0"
+          },
+          "--dsw-alias-button-floating-fill": {
+            "light": "#FFFBF0",
+            "dark": "#FFFBF0"
+          },
+          "--dsw-alias-button-floating-hover": {
+            "light": "#F7F0E0",
+            "dark": "#F7F0E0"
+          },
+          "--dsw-alias-button-contrast-fill": {
+            "light": "#312520",
+            "dark": "#312520"
+          },
+          "--dsw-alias-markdown-code-block": {
+            "light": "#F0F0F4",
+            "dark": "#F0F0F4"
+          },
+          "--dsw-alias-markdown-code-block-banner": {
+            "light": "#E4E6EC",
+            "dark": "#E4E6EC"
+          },
+          "--dsw-alias-markdown-inline-code": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-markdown-citation": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-markdown-tag": {
+            "light": "#EEDEB0",
+            "dark": "#EEDEB0"
+          },
+          "--dsw-alias-markdown-placeholder": {
+            "light": "#D1D9E0",
+            "dark": "#D1D9E0"
+          },
+          "--dsw-alias-markdown-code-segment-selected": {
+            "light": "#F20C0029",
+            "dark": "#F20C0029"
+          },
+          "--dsw-alias-markdown-code-segment-unselected": {
+            "light": "#F0F0F4",
+            "dark": "#F0F0F4"
+          },
+          "--dsw-alias-scrollbar-bg-l1": {
+            "light": "#9D293329",
+            "dark": "#9D293329"
+          },
+          "--dsw-alias-scrollbar-bg-l2": {
+            "light": "#9D293338",
+            "dark": "#9D293338"
+          },
+          "--dsw-alias-scrollbar-hover-l1": {
+            "light": "#9D293352",
+            "dark": "#9D293352"
+          },
+          "--dsw-alias-scrollbar-hover-l2": {
+            "light": "#9D293366",
+            "dark": "#9D293366"
+          },
+          "--dsw-alias-tooltip-bg": {
+            "light": "#312520",
+            "dark": "#312520"
+          },
+          "--dsw-alias-toast-bg": {
+            "light": "#FFFBF0",
+            "dark": "#FFFBF0"
+          },
+          "--dsw-alias-state-error-primary": {
+            "light": "#C2352B",
+            "dark": "#C2352B"
+          },
+          "--dsw-alias-state-error-secondary": {
+            "light": "#DB5A6B",
+            "dark": "#DB5A6B"
+          },
+          "--dsw-alias-state-success-primary": {
+            "light": "#1DA981",
+            "dark": "#1DA981"
+          },
+          "--dsw-alias-state-success-secondary": {
+            "light": "#7FE3C0",
+            "dark": "#7FE3C0"
+          },
+          "--dsw-alias-state-success-tertiary": {
+            "light": "#D8F5E8",
+            "dark": "#D8F5E8"
+          },
+          "--dsw-alias-state-warn-primary": {
+            "light": "#C89B40",
+            "dark": "#C89B40"
+          },
+          "--dsw-alias-state-warn-secondary": {
+            "light": "#EACD76",
+            "dark": "#EACD76"
+          },
+          "--dsw-alias-state-warn-tertiary": {
+            "light": "#F7EBC8",
+            "dark": "#F7EBC8"
+          },
+          "--dsw-alias-state-warn-label": {
+            "light": "#7A5A0E",
+            "dark": "#7A5A0E"
+          },
+          "--dsw-alias-state-business-primary": {
+            "light": "#3DE1AD",
+            "dark": "#3DE1AD"
+          },
+          "--dsw-alias-state-business-tertiary": {
+            "light": "#A8F0D8",
+            "dark": "#A8F0D8"
           },
           "--dsw-specific-sidebar-fill": {
-            "light": "linear-gradient(to bottom,#EAF7F0 0%,#D8EFE4 20%,#C9E8DA 36%,#BFE2D2 50%,#B4DCCA 62%,#A8D2BE 74%,#9CC9B2 86%,#90C0A8 100%)",
-            "dark": "linear-gradient(to bottom,#EAF7F0 0%,#D8EFE4 20%,#C9E8DA 36%,#BFE2D2 50%,#B4DCCA 62%,#A8D2BE 74%,#9CC9B2 86%,#90C0A8 100%)"
+            "light": "linear-gradient(to bottom,#D6ECF0 0%,#E4E6E4 8%,#F2ECDE 18%,#F5E7CE 30%,#EFD6AE 44%,#E5BE86 58%,#D6A45C 72%,#C48F3C 86%,#BA8330 100%)",
+            "dark": "linear-gradient(to bottom,#D6ECF0 0%,#E4E6E4 8%,#F2ECDE 18%,#F5E7CE 30%,#EFD6AE 44%,#E5BE86 58%,#D6A45C 72%,#C48F3C 86%,#BA8330 100%)"
           }
         },
         "reading": {
           "colorScheme": "light",
-          "bg": "#FFFFFF",
+          "bg": "#FFFBF0",
           "alpha": 0.62,
           "blur": 3,
           "maxWidth": 640
         },
-        "accent": "#E88BB0",
-        "ambient": {
-          "kind": "shan",
-          "petals": 7
-        }
+        "card": {
+          "rows": [
+            {
+              "kind": "solid",
+              "schemes": [
+                "p-xiang-se",
+                "p-ju-huang",
+                "p-tao-hong",
+                "p-hai-tang-hong",
+                "p-jiang-zi"
+              ]
+            },
+            {
+              "kind": "solid",
+              "schemes": [
+                "p-song-bai-lu",
+                "p-zhu-qing",
+                "p-cang-qing",
+                "p-dai-zi",
+                "p-xuan-qing"
+              ]
+            },
+            {
+              "kind": "clash",
+              "schemes": [
+                "p-shi-liu-jin",
+                "p-bao-lan-jin",
+                "p-qing-lian-jin",
+                "p-song-hua-tao",
+                "p-wu-jin"
+              ]
+            }
+          ]
+        },
+        "accent": "#F20C00"
       },
       {
         "id": "ying-mu-cai-yun",
         "label": "营慕彩云",
-        "description": "营幕之下，彩云为伴 —— 复刻自电商新零售系统管理后台同名主题",
+        "description": "营幕之下，彩云为伴 —— 复刻自蜂链商城电商新零售系统管理后台同名主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -1287,6 +2662,181 @@ window.__ModuleLoader__.load({
       }
     ]
 
+    /**
+     * 15 套「纯色/拼色」配色（`lib/palette-schemes.json`，由 embed-themes 内联）。
+     *
+     * 它们**不是主题**：不注册进主题服务、不占面板卡片、不进官方「外观」下拉。
+     * 点卡片上的色值按钮时，插件把 {@link schemeTokens} 展出来的这一层叠上去，
+     * 整屏就换成那套配色；切到别的皮肤时这一层必须撤除（见 `syncScheme`）。
+     */
+    const BUNDLED_PALETTES = [
+      {
+        "id": "p-xiang-se",
+        "kind": "solid",
+        "label": "缃色",
+        "main": "#F0C239",
+        "ground": "#F2ECDE",
+        "ink": "#312520",
+        "source": "黄 1-9 缃色（浅黄色）"
+      },
+      {
+        "id": "p-ju-huang",
+        "kind": "solid",
+        "label": "橘黄",
+        "main": "#FF8936",
+        "ground": "#F2ECDE",
+        "ink": "#312520",
+        "source": "黄 1-5 橘黄（柑橘的黄色）"
+      },
+      {
+        "id": "p-tao-hong",
+        "kind": "solid",
+        "label": "桃红",
+        "main": "#F47983",
+        "ground": "#EDD1D8",
+        "ink": "#56004F",
+        "source": "红 0-3 桃红（桃花的颜色）"
+      },
+      {
+        "id": "p-hai-tang-hong",
+        "kind": "solid",
+        "label": "海棠红",
+        "main": "#DB5A6B",
+        "ground": "#EDD1D8",
+        "ink": "#56004F",
+        "source": "红 0-4 海棠红（淡紫红色、较桃红色深一些）"
+      },
+      {
+        "id": "p-jiang-zi",
+        "kind": "solid",
+        "label": "绛紫",
+        "main": "#8C4356",
+        "ground": "#EDD1D8",
+        "ink": "#56004F",
+        "source": "红 0-9 绛紫（紫中略带红的颜色）"
+      },
+      {
+        "id": "p-song-bai-lu",
+        "kind": "solid",
+        "label": "松柏绿",
+        "main": "#057748",
+        "ground": "#E0F0E9",
+        "ink": "#424C50",
+        "source": "绿 2-30 松花绿（松柏叶的墨绿）"
+      },
+      {
+        "id": "p-zhu-qing",
+        "kind": "solid",
+        "label": "竹青",
+        "main": "#789262",
+        "ground": "#E0EEE8",
+        "ink": "#424C50",
+        "source": "绿 2-3 竹青（竹子的绿色）"
+      },
+      {
+        "id": "p-cang-qing",
+        "kind": "solid",
+        "label": "苍青",
+        "main": "#7397AB",
+        "ground": "#D6ECF0",
+        "ink": "#4A4266",
+        "source": "苍 4-3 苍青"
+      },
+      {
+        "id": "p-dai-zi",
+        "kind": "solid",
+        "label": "黛紫",
+        "main": "#574266",
+        "ground": "#E4C6D0",
+        "ink": "#56004F",
+        "source": "蓝 3-12 黛紫（深紫色）"
+      },
+      {
+        "id": "p-xuan-qing",
+        "kind": "solid",
+        "label": "玄青",
+        "main": "#3D3B4F",
+        "ground": "#F0F0F4",
+        "ink": "#312520",
+        "source": "黑 7-1 玄青（深黑色）"
+      },
+      {
+        "id": "p-shi-liu-jin",
+        "kind": "clash",
+        "label": "石榴金",
+        "main": "#F20C00",
+        "ground": "#F2ECDE",
+        "ink": "#312520",
+        "fill": "#9D2933",
+        "dots": [
+          "#FFFFFF",
+          "#D6ECF0",
+          "#EACD76",
+          "#3DE1AD"
+        ],
+        "source": "红 0-5 石榴红 + 金银 8-0 赤金 + 绿 2-14 翡翠色；按钮族用红 0-11 胭脂（白字 7.50:1，而压在石榴红上只有 4.35:1）"
+      },
+      {
+        "id": "p-bao-lan-jin",
+        "kind": "clash",
+        "label": "宝蓝·赤金",
+        "main": "#4B5CC4",
+        "ground": "#D6ECF0",
+        "ink": "#4A4266",
+        "dots": [
+          "#F2BE45",
+          "#EACD76",
+          "#D9B611",
+          "#FFFFFF"
+        ],
+        "source": "蓝 3-5 宝蓝（多和小面积纯黄色（金色）配合使用）+ 金银 8-0 赤金"
+      },
+      {
+        "id": "p-qing-lian-jin",
+        "kind": "clash",
+        "label": "青莲·金玉",
+        "main": "#801DAE",
+        "ground": "#E4C6D0",
+        "ink": "#56004F",
+        "dots": [
+          "#F2BE45",
+          "#FFF143",
+          "#3DE1AD",
+          "#FFFFFF"
+        ],
+        "source": "蓝 3-19 青莲（偏蓝的紫色）+ 黄 1-0 鹅黄 + 绿 2-14 翡翠色"
+      },
+      {
+        "id": "p-song-hua-tao",
+        "kind": "clash",
+        "label": "松花·桃粉",
+        "main": "#BCE672",
+        "ground": "#F7FBEC",
+        "ink": "#424C50",
+        "dots": [
+          "#C93756",
+          "#057748"
+        ],
+        "source": "绿 2-31 松花色（嫩黄绿）+ 红 0-1 樱桃色 + 绿 2-30 松花绿"
+      },
+      {
+        "id": "p-wu-jin",
+        "kind": "clash",
+        "label": "藏青·鹅黄",
+        "main": "#2E4E7E",
+        "ground": "#E2E9F2",
+        "ink": "#312520",
+        "dots": [
+          "#F2BE45",
+          "#FFFFFF",
+          "#FFB3A7",
+          "#3DE1AD"
+        ],
+        "source": "蓝 8-2 藏青（深蓝）+ 金银 8-0 赤金 + 精白 + 红 0-0 粉红 + 绿 2-14 翡翠色"
+      }
+    ]
+    PALETTE_SCHEMES = Array.isArray(BUNDLED_PALETTES) ? BUNDLED_PALETTES : []
+
     /**
      * Marks the ambient nodes this run created.
      *
@@ -1610,6 +3160,32 @@ window.__ModuleLoader__.load({
       '@keyframes dsh-amb-gc-wing{0%{transform:rotate(0deg)}40%{transform:rotate(-3.5deg)}60%{transform:rotate(2.5deg)}100%{transform:rotate(0deg)}}',
       '@keyframes dsh-amb-gc-dew{0%{opacity:.3;transform:scale(1)}100%{opacity:1;transform:scale(1.5)}}',
 
+      /* ── 琥珀猫咪 / 虎子阿黄（原创宠物场景）──────────────────────────────
+         Like the five ported scenes above: element geometry, colour and
+         per-element timing are INLINE in the scene builders, so only the
+         @keyframes live here — each prefixed (hm / hz) so they cannot collide,
+         and each defined exactly once (a duplicate would silently win). Every
+         animated vertical term stays at or below the resting baseline, because
+         the scene box clips at its own top edge. */
+      '@keyframes dsh-amb-hm-glow{from{opacity:.55}to{opacity:.85}}',
+      '@keyframes dsh-amb-hm-dust{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}'
+        + '60%{transform:translate(-.5em,-3.2em);opacity:.45}100%{transform:translate(.4em,-4.6em);opacity:0}}',
+      '@keyframes dsh-amb-hm-tail{from{transform:rotate(-3deg)}to{transform:rotate(5deg)}}',
+      '@keyframes dsh-amb-hm-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}',
+      '@keyframes dsh-amb-hm-ear{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}94%{transform:rotate(4deg)}}',
+      '@keyframes dsh-amb-hm-zzz{0%{transform:translate(0,0);opacity:0}18%{opacity:.85}'
+        + '100%{transform:translate(1.2em,-2.6em);opacity:0}}',
+      '@keyframes dsh-amb-hz-glow{from{opacity:.45}to{opacity:.75}}',
+      /* The fluff crosses the whole band and dies at the far edge; its vertical
+         wobble stays within ±1.2em so a low-seeded puff never reaches the clip. */
+      '@keyframes dsh-amb-hz-fluff{0%{transform:translate(0,0);opacity:0}7%{opacity:.95}'
+        + '30%{transform:translate(8em,-1.2em)}55%{transform:translate(14em,.7em)}'
+        + '80%{transform:translate(20em,-.9em);opacity:.75}96%{opacity:.4}'
+        + '100%{transform:translate(26em,0);opacity:0}}',
+      '@keyframes dsh-amb-hz-wag{from{transform:rotate(-9deg)}to{transform:rotate(11deg)}}',
+      '@keyframes dsh-amb-hz-grass{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}',
+      '@keyframes dsh-amb-hz-tilt{0%,40%,100%{transform:rotate(0)}55%{transform:rotate(2.4deg)}75%{transform:rotate(-1.4deg)}}',
+
       /* Respect a user who has asked the system for less motion: the scenery
          stays, the movement does not. */
       '@media (prefers-reduced-motion:reduce){#dsh-theme-ambient *{animation:none!important}}',
@@ -1619,7 +3195,7 @@ window.__ModuleLoader__.load({
     const zh = {
       title: '主题皮肤',
       hint: '点一下即切换，选中会记入设置',
-      count: '{count} 个可选主题',
+      count: '{count} 款皮肤（另有内置浅色/深色两张卡）',
       current: '当前',
       applied: '已应用',
       empty: '正在读取官方主题注册表…',
@@ -1631,7 +3207,7 @@ window.__ModuleLoader__.load({
     const en = {
       title: 'Theme skins',
       hint: 'Click to switch; the choice is remembered',
-      count: '{count} themes available',
+      count: '{count} skins (+ built-in light/dark cards)',
       current: 'Current',
       applied: 'Applied',
       empty: 'Reading the theme registry…',
@@ -1687,6 +3263,51 @@ window.__ModuleLoader__.load({
       '.tg-desc{font-size:12px;color:var(--dsw-alias-label-secondary);line-height:1.5}',
       '.tg-strip{display:flex;height:6px;border-radius:999px;overflow:hidden;border:.5px solid var(--dsw-alias-border-l3)}',
       '.tg-strip span{flex:1}',
+      /* ── the PALETTE PICKER card (15 clickable colour buttons) ────────────────
+         ** 这些色格里的颜色全部来自「中国传统色库」项目（chinese-colors）**
+            https://github.com/zerosoul/chinese-colors
+            作者 tristan（GitHub @zerosoul）｜在线手册 https://colors.ichuantong.cn ｜许可 ISC
+            取色表见 lib/palette-schemes.json（每套都带 source = 该库的「组 + id」）。
+            色名与色值是作者整理的开源成果，本插件只做取色与派生 —— **感谢作者 tristan**。
+
+         Three rows of 16px keep the picker within a few px of a strip card that
+         carries a two-line description, so it does not sit visibly short in the
+         grid. Each slot carries its own hairline: the pale schemes are near-white,
+         and against a white card in the official LIGHT appearance a borderless
+         swatch would simply vanish. `--dsw-alias-border-l3` adapts to both. */
+      '.tg-picker{display:flex;flex-direction:column;gap:3px}',
+      '.tg-pickrow{display:flex;gap:3px;height:16px}',
+      /* 卡片本体也可点（= 用亮着的那一格），所以要给出"可点"的手势提示 —— 它是一个 div，
+         浏览器不会自带 cursor:pointer。 */
+      '.tg-picker-card{cursor:pointer}',
+      /* 色格本体做成 flex 行：里面的色带按 `flex-grow` 分宽度（主色 2、次色各 1）。 */
+      '.tg-swatch{flex:1;min-width:0;padding:0;background:none;cursor:pointer;position:relative;',
+      'display:flex;border:.5px solid var(--dsw-alias-border-l3);border-radius:3px;font:inherit}',
+      '.tg-swatch[aria-pressed="true"]{border-color:var(--dsw-alias-brand-primary);',
+      'box-shadow:inset 0 0 0 1px var(--dsw-alias-brand-primary)}',
+      '.tg-swatch:focus-visible{outline:1.5px solid var(--dsw-alias-brand-primary);outline-offset:1px}',
+      /* 一条色带。宽度由内联的 `flex-grow` 决定（纯色格是"一条带占满"的特例），
+         左右两端的圆角靠 `:first-child` / `:last-child` 补 —— 色格自己没有 overflow:hidden
+         （那会把悬停标签裁掉）。 */
+      '.tg-band{display:block;height:100%;min-width:0}',
+      '.tg-band:first-child{border-radius:2px 0 0 2px}',
+      '.tg-band:last-child{border-radius:0 2px 2px 0}',
+      '.tg-band:only-child{border-radius:2px}',
+      /* ── THE HOVER NAME (user's request: no layout change, name on hover) ──────
+         15 slots at ~34px wide cannot carry a legible name, and adding a name line
+         would change the card's height — so the name appears ONLY while the pointer
+         is on that slot, as an absolutely positioned chip (out of flow: nothing in
+         the card moves by a single pixel).
+
+         Note `.tg-swatch` deliberately has NO `overflow:hidden`: it would clip this
+         chip. The rounded corners are kept by rounding the CHILDREN (`.tg-band`)
+         instead, which is what the clipping was for. */
+      '.tg-swatch:hover::after,.tg-swatch:focus-visible::after{content:attr(data-name);',
+      'position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);',
+      'white-space:nowrap;z-index:5;pointer-events:none;padding:2px 6px;border-radius:4px;',
+      'font-size:11px;line-height:1.3;background:var(--dsw-alias-bg-base);',
+      'color:var(--dsw-alias-label-primary);border:.5px solid var(--dsw-alias-border-l3);',
+      'box-shadow:0 2px 8px rgba(0,0,0,.18)}',
     ].join('')
 
     /**
@@ -1699,22 +3320,27 @@ window.__ModuleLoader__.load({
      */
     function createGalleryStore() {
       return defineStore({
-        init: () => ({ ids: [], labels: {}, descriptions: {}, swatches: {}, selected: 'system', status: '', revision: -1 }),
+        init: () => ({
+          ids: [], labels: {}, descriptions: {}, swatches: {}, cardRows: {},
+          scheme: '', selected: 'system', status: '', revision: -1,
+        }),
         actions: {
           sync: (draft, themes, selected, revision) => {
             if (revision <= draft.revision) return
             const labels = {}
             const descriptions = {}
             const swatches = {}
+            const cardRows = {}
             for (const theme of themes) {
               // Built-in themes carry no label — the official Appearance row
               // localizes them from its own dictionaries — so name them here
               // rather than showing a bare `light` / `dark` id.
               labels[theme.id] = theme.label || BUILT_IN_LABELS[theme.id] || theme.id
-              // A built-in theme derives its colours from the base palette rather
-              // than declaring tokens, so its card gets a plain line.
-              descriptions[theme.id] = theme.description
-                || (theme.id in BUILT_IN_LABELS ? '' : '')
+              // A built-in theme derives its colours from the base palette rather than
+              // declaring tokens, so its card gets a plain line — and it carries no
+              // description of its own, so the copy for the built-in cards is the
+              // gallery's own (`BUILT_IN_DESCRIPTIONS`).
+              descriptions[theme.id] = theme.description || BUILT_IN_DESCRIPTIONS[theme.id] || ''
               // A card's colour strip comes from the theme's own tokens, so a
               // theme authored anywhere shows its identity without extra metadata.
               const tokens = theme.tokens || {}
@@ -1728,11 +3354,17 @@ window.__ModuleLoader__.load({
                 pick('--dsw-alias-label-secondary'),
                 pick('--dsw-alias-state-business-primary'),
               ].filter((value) => typeof value === 'string' && value !== '')
+              // A palette-shaped skin can replace the strip with the palette picker
+              // (`card.rows`). Absent — which is every scene-carrying skin and both
+              // built-in cards — the strip above stays exactly as it was.
+              const rows = cardRowShape(theme, PALETTE_SCHEMES)
+              if (rows !== undefined) cardRows[theme.id] = rows
             }
             draft.ids = themes.map((theme) => theme.id)
             draft.labels = labels
             draft.descriptions = descriptions
             draft.swatches = swatches
+            draft.cardRows = cardRows
             draft.selected = selected
             draft.revision = revision
           },
@@ -1745,39 +3377,170 @@ window.__ModuleLoader__.load({
            * @param status - one line describing the state.
            */
           note: (draft, status) => { draft.status = status },
+          /**
+           * 记住配色卡上点亮的是哪一格。
+           *
+           * 与主题列表分开放：方案 id 不是主题，混进 `ids` 会让"皮肤数"的计数口径
+           * 与 README、与 npm 描述一起失真。
+           * @param draft - store draft.
+           * @param id - the scheme id.
+           */
+          markScheme: (draft, id) => { draft.scheme = String(id) },
+        },
+      })
+    }
+
+    /**
+     * Render one palette slot: a button that applies a colour scheme.
+     *
+     * ── 拼色格的画法：按**宽度比例**分带（不再用"底 + 圆点"）──────────────────────
+     *
+     * 用户要的：拼色不要点子，改成把色块**按宽度分份** —— 主色占 2 份、每个次色各占 1 份。
+     * 于是 2/1 就是"一主一次"、2/1/1 就是"一主两次"；而当前 5 套拼色都是"一主四次"
+     * （`dots` 各有 4 个），画出来自然是 2/1/1/1/1 —— **比值由数据算出来，不是写死的**。
+     * 纯色格是同一机制的退化情况（一条带占满整格），所以两类格子共用一套 DOM 与样式，
+     * 不会出现"两种格子两套画法"的漂移。
+     *
+     * 画出来的颜色与实际点击后生效的颜色来自**同一张表**，所以按钮不可能宣传一个
+     * 方案根本没画的颜色。
+     * @param scheme - one entry from `lib/palette-schemes.json`.
+     * @param selected - whether this scheme is the one in effect.
+     * @param onPick - called with the scheme id.
+     * @param index - React key.
+     * @returns the swatch button.
+     */
+    function schemeSwatch(scheme, selected, onPick, index) {
+      const accents = Array.isArray(scheme.dots) ? scheme.dots : []
+      const bands = scheme.kind === 'clash'
+        ? [[scheme.main, 2]].concat(accents.map((colour) => [colour, 1]))
+        : [[scheme.main, 1]]
+      const inner = bands.map(([colour, weight], band) => jsx('span', {
+        className: 'tg-band',
+        style: { background: colour, flexGrow: weight },
+      }, band))
+      return jsx('button', {
+        type: 'button',
+        className: 'tg-swatch',
+        'aria-pressed': selected,
+        // 悬停/聚焦时显示的色名（CSS `content:attr(data-name)`，不改布局）。
+        'data-name': scheme.label,
+        // The label is the only text a picker slot carries; the full provenance
+        // (which colour-library entry it came from) lives in the tooltip.
+        title: scheme.source === undefined ? scheme.label : `${scheme.label} · ${scheme.source}`,
+        onClick: (event) => {
+          // ── 必须拦住冒泡 ──────────────────────────────────────────────────────
+          //
+          // 卡片本体也处理点击（用它记住的那一格）。不拦的话，点子格会先切到那一格，
+          // 紧接着冒泡到卡片的处理器、被覆盖回原来那格 —— 症状就是"点色块没反应"。
+          // 事件参数在测试里可能缺省，所以要容错（jsx 桩调用处理器时不给事件）。
+          if (event !== undefined && typeof event.stopPropagation === 'function') event.stopPropagation()
+          onPick(scheme.id)
         },
+        children: inner,
+      }, index)
+    }
+
+    /**
+     * Render the palette-picker card's three rows of slots.
+     * @param rows - rows sanitised by {@link cardRowShape}.
+     * @param selectedScheme - the scheme id currently in effect, if any.
+     * @param onPick - called with the scheme id.
+     * @param schemes - the palette table.
+     * @returns the picker element.
+     */
+    function cardPickerElement(rows, selectedScheme, onPick, schemes) {
+      return jsx('span', {
+        className: 'tg-picker',
+        children: rows.map((row, index) => jsx('span', {
+          className: 'tg-pickrow',
+          children: row.schemes.map((id, slot) => {
+            const scheme = schemeById(id, schemes)
+            // `cardRowShape` already proved every id resolves; the guard is here so a
+            // table that changed between sanitising and rendering can only drop a
+            // slot, never throw inside the render and blank the panel.
+            if (scheme === undefined) return null
+            return schemeSwatch(scheme, id === selectedScheme, onPick, slot)
+          }),
+        }, index)),
       })
     }
 
     /**
-     * Render one selectable theme card.
-     * @param props - id, label, description, swatches, selected, onSelect.
+     * Render one card.
+     *
+     * Three layouts share the card: the default token strip, the palette picker (a
+     * theme that declares `card.rows`), and — for the picker — no description body,
+     * because the swatches already fill it. The description still becomes the tooltip
+     * (`title`), which is what the schema says the field is for.
+     *
+     * A picker card is a `div`, not a `button`: it CONTAINS 15 buttons, and nesting
+     * buttons inside a button is invalid markup that browsers silently re-parent.
+     * @param props - id, label, description, swatches, rows, selected, applied,
+     *                selectedScheme, onSelect, onPickScheme.
      * @returns the card element.
      */
     function ThemeCard(props) {
-      const { id, label, description, swatches, selected, applied, onSelect, t } = props
+      const {
+        id, label, description, swatches, rows, selected, applied,
+        selectedScheme, onSelect, onPickScheme, t,
+      } = props
+      // ── WHY THE FLAG, AND NOT `blocks !== null` ──────────────────────────────
+      //
+      // Whether this card is a picker has to be read off the DATA, not off the rendered
+      // element. `jsx()` returns a real element in React but `null` under this
+      // repository's jsx stub, so an element-identity test silently takes the STRIP
+      // branch in every test while being correct in the app — a stub that does not
+      // reproduce the runtime's return value is the same trap rule 8 records for
+      // missing side effects.
+      //
+      // The flag comes from re-running the sanitiser rather than from a bare
+      // `rows !== undefined`, so a component never trusts its inputs: whatever ends up
+      // in the store, the card either draws a valid picker or falls back to the strip.
+      // Handing malformed rows to the picker would throw inside the render and blank
+      // the whole panel — the silent-failure shape this project keeps paying for.
+      const shape = cardRowShape({ card: { rows } }, PALETTE_SCHEMES)
+      const hasPicker = shape !== undefined
+      const head = jsxs('div', {
+        className: 'tg-card-top',
+        children: [
+          jsx('span', { className: 'tg-name', children: label || id }),
+          selected ? jsx('span', { className: 'tg-badge', children: applied }) : null,
+        ],
+      })
+      const body = hasPicker
+        ? cardPickerElement(shape, selectedScheme, onPickScheme, PALETTE_SCHEMES)
+        : swatches.length > 0
+          ? jsx('span', {
+            className: 'tg-strip',
+            children: swatches.map((colour, index) => jsx('span', { style: { background: colour } }, index)),
+          })
+          : null
+      // The picker fills the card, so it prints no body copy; `description` stays the
+      // tooltip, which is what the schema says the field is for.
+      const desc = !hasPicker && description
+        ? jsx('span', { className: 'tg-desc', children: description })
+        : null
+      if (hasPicker) {
+        return jsxs('div', {
+          className: 'tg-card tg-picker-card',
+          title: description || label,
+          // ── 点卡片本体 = 用"亮着的那一格"──────────────────────────────────────
+          //
+          // 用户要的：点这张卡要**生效**（换成它的配色），点具体某一格才换成那一格。
+          // 亮着的那一格就是记住的那套；从没选过时是 `DEFAULT_SCHEME`（石榴金，
+          // 也就是锚主题自己那套）。所以"卡片本体"与"最左那格"最终落到同一件事上，
+          // 只是入口不同 —— 用户不必知道这个区别。
+          onClick: () => { onPickScheme(selectedScheme || DEFAULT_SCHEME) },
+          children: [head, body, desc],
+        })
+      }
       return jsxs('button', {
         type: 'button',
         className: 'tg-card',
         'aria-pressed': selected,
         onClick: () => { onSelect(id) },
         title: description || label,
-        children: [
-          jsxs('div', {
-            className: 'tg-card-top',
-            children: [
-              jsx('span', { className: 'tg-name', children: label || id }),
-              selected ? jsx('span', { className: 'tg-badge', children: applied }) : null,
-            ],
-          }),
-          swatches.length > 0
-            ? jsx('span', {
-              className: 'tg-strip',
-              children: swatches.map((colour, index) => jsx('span', { style: { background: colour } }, index)),
-            })
-            : null,
-          description ? jsx('span', { className: 'tg-desc', children: description }) : null,
-        ],
+        children: [head, body, desc],
       })
     }
 
@@ -3279,6 +5042,328 @@ window.__ModuleLoader__.load({
         + '</div>'
     }
 
+    /**
+     * One sun-warmed haze for the two ORIGINAL pet scenes (琥珀猫咪 / 虎子阿黄).
+     *
+     * Both scenes open with the same soft light pool at the band's top, built the way
+     * dream's corner glow was taught to behave: it starts AT the edge, is dimmer than
+     * the source skies, and is masked to zero at its top so the scene box's
+     * `overflow:hidden` clip never cuts a hard line against the un-lit sidebar above.
+     * @param tint - the rgba() fill of the haze, in the theme's own family.
+     * @param keyframe - the pulse animation, `dsh-amb-hm-glow` or `dsh-amb-hz-glow`.
+     * @returns the haze markup.
+     */
+    function petHazeMarkup(tint, keyframe) {
+      return open('div', {
+        class: 'pet-haze',
+        style: `position:absolute;top:0;left:-20%;width:130%;height:52%;z-index:2;`
+          + `background:radial-gradient(ellipse at 30% 0%,${tint} 0%,rgba(255,236,200,0) 64%);`
+          + 'filter:blur(10px);'
+          + '-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42%);'
+          + 'mask-image:linear-gradient(to bottom,transparent 0,#000 42%);'
+          + `animation:${keyframe} 9s ease-in-out infinite alternate`,
+      }) + '</div>'
+    }
+
+    /**
+     * The 琥珀猫咪 scene: a warm haze, a sunlit sill, TWO tabby shorthairs —
+     * one sitting with a slow tail sway and the odd ear twitch, one curled asleep,
+     * breathing, with tiny z's drifting off it — and amber dust motes floating
+     * through the light.
+     *
+     * This is the first ORIGINAL scene in the pack (not ported from a source
+     * system), drawn in the pack's own idiom: inline geometry in % / em, flat
+     * fills from one warm amber family, the count knob seeding the dust, and
+     * every animated transform bounded below the band's top edge — the sleeping
+     * cat breathes from its base and the z's fade out well before they could
+     * reach the clip.
+     * @param dust - how many dust motes to seed.
+     * @returns the scene markup.
+     */
+    function humaoAmbientScene(dust) {
+      const count = Math.max(0, Math.min(20, dust ?? 6))
+      let dustNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 2.5 + ((n * 5) % 4)
+        dustNodes += open('div', {
+          class: 'hm-dust',
+          style: 'position:absolute;border-radius:50%;'
+            + `left:${((n * 19) % 52) + 22}%;top:${((n * 13) % 24) + 36}%;`
+            + `width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,rgba(255,236,200,.95) 0%,rgba(255,214,140,0) 100%);'
+            + 'box-shadow:0 0 6px rgba(255,214,140,.75);'
+            + `animation:dsh-amb-hm-dust ${9 + ((n * 7) % 6)}s linear infinite;`
+            + `animation-delay:${-(n * 2.3)}s`,
+        }) + '</div>'
+      }
+
+      // 猫 A —— 坐姿虎斑，面朝左（第一版形态：地面绕尾、橄榄形上身、后侧三道
+      // 弧纹）。连接方式按用户指定：**不垫任何脖子形状**，头部整组（头圆 + 双耳
+      // + 五官 + 胡须 + 额头纹）作为整体下移 28、右移 2，头圆下缘直接压进身体
+      // 上缘约 7.5 个单位（肩点 (52,52) 距头心 14.1 < r15，也埋进头圆），同色
+      // 填充使接缝不可见；下巴与胸口之间留下的小凹角正是猫下巴该有的位置。
+      // 奶油色胸部椭圆按用户要求落在 (39,76)。
+      const catSit = open('svg', {
+        viewBox: '0 0 100 118',
+        style: 'display:block;width:100%;height:auto;overflow:visible',
+      })
+        + open('g', {
+          class: 'hm-tail',
+          style: 'transform-box:fill-box;transform-origin:0% 100%;'
+            + 'animation:dsh-amb-hm-tail 5.5s ease-in-out infinite alternate',
+        })
+        + open('path', {
+          d: 'M62 112 C82 115 90 103 85 90 C82 82 74 80 70 84',
+          fill: 'none', stroke: '#C98B4B', 'stroke-width': '7', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          d: 'M86 92 C83 84 76 81 71 84',
+          fill: 'none', stroke: '#8A5A2B', 'stroke-width': '7', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + '</g>'
+        + open('path', {
+          d: 'M30 116 C26 106 26 92 30 78 C34 64 42 56 52 52 C62 48 70 56 72 70 C74 86 72 104 66 116 Z',
+          fill: '#D9A05B',
+        }) + '</path>'
+        + open('ellipse', { cx: '39', cy: '76', rx: '10', ry: '19', fill: '#F0D6A6' }) + '</ellipse>'
+        + open('rect', { x: '32', y: '88', width: '6', height: '28', rx: '3', fill: '#E5BC7E', stroke: '#C98B4B', 'stroke-width': '1' }) + '</rect>'
+        + open('rect', { x: '42', y: '88', width: '6', height: '28', rx: '3', fill: '#E5BC7E', stroke: '#C98B4B', 'stroke-width': '1' }) + '</rect>'
+        + open('path', { d: 'M56 54 C64 58 68 64 70 72', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.85' }) + '</path>'
+        + open('path', { d: 'M60 74 C66 78 69 84 70 90', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.85' }) + '</path>'
+        + open('path', { d: 'M58 96 C63 99 66 104 67 110', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.85' }) + '</path>'
+        + open('path', { d: 'M34 40 L34 46 M38 39 L38 45 M30 41 L30 47', stroke: '#8A5A2B', 'stroke-width': '2', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M26 46 L23 31 L35 39 Z', fill: '#D9A05B' }) + '</path>'
+        + open('path', { d: 'M27.5 43 L26 35 L33 40 Z', fill: '#C97B6B', opacity: '0.75' }) + '</path>'
+        + open('g', {
+          class: 'hm-ear',
+          style: 'transform-box:fill-box;transform-origin:0% 100%;'
+            + 'animation:dsh-amb-hm-ear 7s ease-in-out infinite',
+        })
+        + open('path', { d: 'M44 42 L52 30 L50 44 Z', fill: '#D9A05B' }) + '</path>'
+        + open('path', { d: 'M46 40.5 L50.5 33.5 L48.5 41.5 Z', fill: '#C97B6B', opacity: '0.75' }) + '</path>'
+        + '</g>'
+        + open('circle', { cx: '38', cy: '54', r: '15', fill: '#D9A05B' }) + '</circle>'
+        + open('circle', { cx: '32', cy: '52', r: '2.2', fill: '#3B2A16' }) + '</circle>'
+        + open('circle', { cx: '44', cy: '52', r: '2.2', fill: '#3B2A16' }) + '</circle>'
+        + open('circle', { cx: '32.7', cy: '51.2', r: '0.7', fill: '#FFFFFF' }) + '</circle>'
+        + open('circle', { cx: '44.7', cy: '51.2', r: '0.7', fill: '#FFFFFF' }) + '</circle>'
+        + open('path', { d: 'M36 58 L40 58 L38 61 Z', fill: '#C97B6B' }) + '</path>'
+        + open('path', { d: 'M38 61 C38 63 36 64 34 64 M38 61 C38 63 40 64 42 64', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '1', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M26 57 L14 55 M26 60 L14 62 M52 57 L62 55 M52 60 L62 62', stroke: '#B98A55', 'stroke-width': '1', 'stroke-linecap': 'round', opacity: '0.8' }) + '</path>'
+        + '</svg>'
+
+      // 猫 B —— 蜷成一团酣睡：圆头明显叠在身子右前侧（同色相接），折耳 +
+      // 闭眼 + 鼻尖胡须 + 身前露出一只奶油色前爪，尾巴沿身前绕一圈、
+      // 深色尾尖收在左侧；整体随呼吸微微起伏，头顶冒出两枚会消散的小 z。
+      const catCurled = open('svg', {
+        viewBox: '0 0 112 66',
+        style: 'display:block;width:100%;height:auto;overflow:visible',
+      })
+        + open('g', {
+          class: 'hm-breathe',
+          style: 'transform-box:fill-box;transform-origin:50% 100%;'
+            + 'animation:dsh-amb-hm-breathe 3.8s ease-in-out infinite',
+        })
+        + open('path', {
+          d: 'M6 62 C6 44 24 28 52 27 C80 26 100 40 99 53 C98 60 92 62 84 62 Z',
+          fill: '#D9A05B',
+        }) + '</path>'
+        + open('path', { d: 'M26 30 C28 38 28 48 26 57', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.8' }) + '</path>'
+        + open('path', { d: 'M38 28 C40 37 40 49 38 59', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.8' }) + '</path>'
+        + open('path', { d: 'M50 27 C52 36 52 47 51 56', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '4', 'stroke-linecap': 'round', opacity: '0.8' }) + '</path>'
+        + open('path', { d: 'M6 58 C26 66 62 67 92 59', fill: 'none', stroke: '#C98B4B', 'stroke-width': '6', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M6 58 C12 61 18 63 24 64', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '6', 'stroke-linecap': 'round' }) + '</path>'
+        + open('circle', { cx: '80', cy: '44', r: '15', fill: '#D9A05B' }) + '</circle>'
+        + open('path', { d: 'M70 33 L65 23 L75.5 28.5 Z', fill: '#D9A05B' }) + '</path>'
+        + open('path', { d: 'M88 31 L94 22 L95.5 32 Z', fill: '#D9A05B' }) + '</path>'
+        + open('path', { d: 'M70.5 30.5 L68 25 L73.5 28 Z', fill: '#C97B6B', opacity: '0.75' }) + '</path>'
+        + open('path', { d: 'M88.5 29.5 L92.5 24 L93.5 30.5 Z', fill: '#C97B6B', opacity: '0.75' }) + '</path>'
+        + open('path', { d: 'M72 45 Q75 48 78 45', fill: 'none', stroke: '#8A5A2B', 'stroke-width': '1.4', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M65.5 46.5 L69 46.5 L67.25 49.5 Z', fill: '#C97B6B' }) + '</path>'
+        + open('path', { d: 'M62 48.5 L54 47.5 M62 51 L55 52.5', stroke: '#B98A55', 'stroke-width': '1', 'stroke-linecap': 'round', opacity: '0.8' }) + '</path>'
+        + open('ellipse', { cx: '60', cy: '60', rx: '7', ry: '3.5', fill: '#F0D6A6', stroke: '#C98B4B', 'stroke-width': '1' }) + '</ellipse>'
+        + '</g>'
+        + '</svg>'
+        + open('span', {
+          class: 'hm-z hm-z-1',
+          style: 'position:absolute;right:12%;top:-12%;font-size:.85em;font-style:italic;'
+            + "font-family:Georgia,'Times New Roman',serif;color:#A97F4C;"
+            + 'animation:dsh-amb-hm-zzz 5s ease-in-out infinite',
+        }) + 'z</span>'
+        + open('span', {
+          class: 'hm-z hm-z-2',
+          style: 'position:absolute;right:5%;top:-22%;font-size:.65em;font-style:italic;'
+            + "font-family:Georgia,'Times New Roman',serif;color:#B98F55;"
+            + 'animation:dsh-amb-hm-zzz 5s ease-in-out infinite;animation-delay:-2.5s',
+        }) + 'z</span>'
+
+      return open('div', { class: 'hm', style: 'position:absolute;inset:0;display:block' })
+        + petHazeMarkup('rgba(255,214,140,.5)', 'dsh-amb-hm-glow')
+        + open('div', {
+          class: 'hm-sill',
+          style: 'position:absolute;left:0;right:0;bottom:0;height:12%;z-index:4;'
+            + 'background:linear-gradient(to bottom,rgba(154,95,36,0) 0%,rgba(154,95,36,.16) 40%,rgba(138,84,30,.3) 100%)',
+        })
+        + open('div', {
+          class: 'hm-sill-line',
+          style: 'position:absolute;top:0;left:0;right:0;height:1.2px;opacity:.55;'
+            + 'background:linear-gradient(90deg,transparent,rgba(255,244,220,.9),transparent)',
+        }) + '</div>'
+        + '</div>'
+        + open('div', {
+          class: 'hm-cat-sit',
+          style: 'position:absolute;left:7%;bottom:9%;width:7.5em;z-index:6',
+        }) + catSit + '</div>'
+        + open('div', {
+          class: 'hm-cat-curled',
+          style: 'position:absolute;right:6%;bottom:7%;width:8.4em;z-index:6',
+        }) + catCurled + '</div>'
+        + dustNodes
+        + '</div>'
+    }
+
+    /**
+     * The 虎子阿黄 scene: a golden haze, a field-path bank, the yellow Chinese
+     * pastoral dog himself — upright ears, a sickle tail wagging at speed, an
+     * occasional curious head tilt, a straw collar with a bell — with dry
+     * grass tufts, a ball in the theme's own 缃色, and dandelion fluff drifting
+     * across on the wind.
+     *
+     * The second ORIGINAL scene in the pack, same idiom as the cat: inline
+     * % / em geometry, one warm wheat-gold family, and every animated transform
+     * bounded below the band's top edge — the fluff fades out at the far edge
+     * instead of clipping.
+     * @param dust - how many dandelion-fluff puffs to seed.
+     * @returns the scene markup.
+     */
+    function ahuangAmbientScene(dust) {
+      const count = Math.max(0, Math.min(20, dust ?? 5))
+      let fluffNodes = ''
+      for (let n = 1; n <= count; n += 1) {
+        const size = 4 + ((n * 3) % 3)
+        fluffNodes += open('div', {
+          class: 'hz-fluff',
+          style: 'position:absolute;border-radius:50%;'
+            + `left:-6%;top:${((n * 11) % 30) + 18}%;`
+            + `width:${size}px;height:${size}px;`
+            + 'background:radial-gradient(circle,#FFFDF4 0%,rgba(255,246,214,.85) 55%,rgba(255,246,214,0) 100%);'
+            + 'box-shadow:0 0 5px rgba(255,244,200,.8);'
+            + `animation:dsh-amb-hz-fluff ${15 + ((n * 7) % 8)}s linear infinite;`
+            + `animation-delay:${-(n * 2.6)}s`,
+        }) + '</div>'
+      }
+
+      // 虎子阿黄 —— 坐姿面朝左。头与躯干同样按「必须重叠」构造：头部圆下缘
+      // 压进胸腔椭圆上缘 3 个单位，项圈画在重叠带上把脖子束出来；立耳、
+      // 镰刀尾（尾根埋进后臀圆里）快速摇摆、偶尔歪头，吐着舌头等主人。
+      const dog = open('svg', {
+        viewBox: '0 0 112 122',
+        style: 'display:block;width:100%;height:auto;overflow:visible',
+      })
+        + open('g', {
+          class: 'hz-tail',
+          style: 'transform-box:fill-box;transform-origin:0% 100%;'
+            + 'animation:dsh-amb-hz-wag .95s ease-in-out infinite alternate',
+        })
+        + open('path', {
+          d: 'M76 70 C92 66 100 50 92 36 C88 30 82 29 78 32',
+          fill: 'none', stroke: '#D8A44E', 'stroke-width': '8', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + open('path', {
+          d: 'M93 37 C90 32 85 30 79 32',
+          fill: 'none', stroke: '#B97F3A', 'stroke-width': '8', 'stroke-linecap': 'round',
+        }) + '</path>'
+        + '</g>'
+        + open('circle', { cx: '72', cy: '94', r: '26', fill: '#E8B45A' }) + '</circle>'
+        + open('ellipse', { cx: '44', cy: '93', rx: '18', ry: '27', fill: '#E8B45A' }) + '</ellipse>'
+        + open('ellipse', { cx: '56', cy: '117', rx: '13', ry: '5', fill: '#E8B45A' }) + '</ellipse>'
+        + open('ellipse', { cx: '42', cy: '97', rx: '10', ry: '19', fill: '#F6E3B8' }) + '</ellipse>'
+        + open('rect', { x: '32', y: '92', width: '7.5', height: '26', rx: '3.7', fill: '#E8B45A', stroke: '#C98F35', 'stroke-width': '1' }) + '</rect>'
+        + open('rect', { x: '44', y: '92', width: '7.5', height: '26', rx: '3.7', fill: '#E8B45A', stroke: '#C98F35', 'stroke-width': '1' }) + '</rect>'
+        + open('ellipse', { cx: '35.7', cy: '117', rx: '6', ry: '3.2', fill: '#F6E3B8' }) + '</ellipse>'
+        + open('ellipse', { cx: '47.7', cy: '117', rx: '6', ry: '3.2', fill: '#F6E3B8' }) + '</ellipse>'
+        + open('path', { d: 'M31 68 C38 74 50 74 56 66', fill: 'none', stroke: '#896C39', 'stroke-width': '5', 'stroke-linecap': 'round' }) + '</path>'
+        + open('circle', { cx: '33', cy: '72.5', r: '2.6', fill: '#F0C239', stroke: '#B98A20', 'stroke-width': '0.8' }) + '</circle>'
+        + open('path', { d: 'M30.6 72.5 L35.4 72.5', stroke: '#B98A20', 'stroke-width': '0.8' }) + '</path>'
+        + open('g', {
+          class: 'hz-head',
+          style: 'transform-box:fill-box;transform-origin:60% 88%;'
+            + 'animation:dsh-amb-hz-tilt 7s ease-in-out infinite',
+        })
+        + open('path', { d: 'M28 40 C24 30 23 23 26 18 C30 21 34 28 35.5 36 Z', fill: '#D8A44E' }) + '</path>'
+        + open('path', { d: 'M48 38 C50 28 52 21 56 18 C58 23 56 30 52.5 38.5 Z', fill: '#D8A44E' }) + '</path>'
+        + open('path', { d: 'M29 36 C27 29 26.5 25 28 21.5 C30.5 24.5 32.5 29 33.5 34 Z', fill: '#C97B6B', opacity: '0.7' }) + '</path>'
+        + open('path', { d: 'M49.5 34 C51 27.5 52.5 23.5 55 21 C56 25 54.5 30 52 35.5 Z', fill: '#C97B6B', opacity: '0.7' }) + '</path>'
+        + open('circle', { cx: '42', cy: '51', r: '18', fill: '#E8B45A' }) + '</circle>'
+        + open('ellipse', { cx: '27', cy: '57', rx: '11', ry: '8.5', fill: '#F6E3B8' }) + '</ellipse>'
+        + open('ellipse', { cx: '19', cy: '53.5', rx: '3', ry: '2.4', fill: '#4A331C' }) + '</ellipse>'
+        + open('circle', { cx: '44', cy: '47', r: '2.4', fill: '#3B2A16' }) + '</circle>'
+        + open('circle', { cx: '44.8', cy: '46.2', r: '0.8', fill: '#FFFFFF' }) + '</circle>'
+        + open('path', { d: 'M22.5 61 C24.5 64.5 29.5 65.5 32.5 62.5', fill: 'none', stroke: '#8A5F2B', 'stroke-width': '1.3', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M24 62.5 C28 63.5 29 67.5 27 70 C25 72 22 71 22 68.5 C22 66 22.5 64 24 62.5 Z', fill: '#DE7E68' }) + '</path>'
+        + open('path', { d: 'M24.5 64 C25.5 65.5 25.8 67.5 25.2 69.5', fill: 'none', stroke: '#C05E4E', 'stroke-width': '0.9', 'stroke-linecap': 'round' }) + '</path>'
+        + '</g>'
+        + '</svg>'
+
+      const grassTuft = (left, bottom, width, zIndex) => open('div', {
+        class: 'hz-grass',
+        style: `position:absolute;${left};bottom:${bottom};width:${width};z-index:${zIndex}`,
+      })
+        + open('svg', {
+          viewBox: '0 0 60 30',
+          style: 'display:block;width:100%;height:auto;overflow:visible',
+        })
+        + open('g', {
+          class: 'hz-blades',
+          style: 'transform-box:fill-box;transform-origin:50% 100%;'
+            + 'animation:dsh-amb-hz-grass 5.2s ease-in-out infinite alternate',
+        })
+        + open('path', { d: 'M6 30 C4 22 6 14 10 8', fill: 'none', stroke: '#C2A24E', 'stroke-width': '2.6', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M14 30 C13 20 16 12 20 6', fill: 'none', stroke: '#B08F3E', 'stroke-width': '2.4', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M24 30 C24 20 27 12 32 7', fill: 'none', stroke: '#C2A24E', 'stroke-width': '2.2', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M36 30 C38 22 42 15 48 10', fill: 'none', stroke: '#B08F3E', 'stroke-width': '2.4', 'stroke-linecap': 'round' }) + '</path>'
+        + open('path', { d: 'M46 30 C48 24 52 18 56 14', fill: 'none', stroke: '#C2A24E', 'stroke-width': '2.2', 'stroke-linecap': 'round' }) + '</path>'
+        + '</g>'
+        + '</svg>'
+        + '</div>'
+
+      return open('div', { class: 'hz', style: 'position:absolute;inset:0;display:block' })
+        + petHazeMarkup('rgba(240,194,57,.42)', 'dsh-amb-hz-glow')
+        + open('div', {
+          class: 'hz-bank',
+          style: 'position:absolute;left:0;right:0;bottom:0;height:14%;z-index:4;'
+            + 'background:linear-gradient(to bottom,rgba(137,108,57,0) 0%,rgba(137,108,57,.16) 40%,rgba(120,92,44,.3) 100%)',
+        })
+        + open('div', {
+          class: 'hz-bank-line',
+          style: 'position:absolute;top:0;left:0;right:0;height:1.2px;opacity:.5;'
+            + 'background:linear-gradient(90deg,transparent,rgba(255,250,228,.9),transparent)',
+        }) + '</div>'
+        + '</div>'
+        + grassTuft('left:2%', '0', '4.5em', '5')
+        + grassTuft('left:17%', '1%', '3.6em', '7')
+        + grassTuft('right:3%', '0', '4.2em', '5')
+        + open('div', {
+          class: 'hz-ball',
+          style: 'position:absolute;left:14%;bottom:8%;width:1.7em;z-index:6',
+        })
+        + open('svg', {
+          viewBox: '0 0 20 20',
+          style: 'display:block;width:100%;height:auto',
+        })
+        + open('circle', { cx: '10', cy: '10', r: '9', fill: '#F0C239', stroke: '#C9A02F', 'stroke-width': '1' }) + '</circle>'
+        + open('path', { d: 'M4 4 C8 8 8 12 4 16 M16 4 C12 8 12 12 16 16', fill: 'none', stroke: '#B98A20', 'stroke-width': '1.2', 'stroke-linecap': 'round' }) + '</path>'
+        + open('ellipse', { cx: '7', cy: '6.5', rx: '2.6', ry: '1.6', fill: '#FFF3C4', opacity: '0.85' }) + '</ellipse>'
+        + '</svg>'
+        + '</div>'
+        + open('div', {
+          class: 'hz-dog',
+          style: 'position:absolute;left:32%;bottom:7%;width:8em;z-index:6',
+        }) + dog + '</div>'
+        + fluffNodes
+        + '</div>'
+    }
+
     /**
      * Apply a function on every tick until the thing it observes stops changing.
      *
@@ -3369,7 +5454,11 @@ window.__ModuleLoader__.load({
                   ? jiexinAmbientScene(options?.dust)
                   : kind === 'fengchen'
                     ? fengchenAmbientScene(options?.feathers, options?.dew)
-                    : ''
+                    : kind === 'humao'
+                      ? humaoAmbientScene(options?.dust)
+                      : kind === 'ahuang'
+                        ? ahuangAmbientScene(options?.dust)
+                        : ''
       // The builder is fed only attributes and hex values, but this is the one place
       // markup from outside this file could ever arrive, so it refuses anyway.
       if (/<script|\son[a-z]+\s*=/i.test(markup)) {
@@ -3731,11 +5820,12 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Remove every ambient node, ownership aside.
+     * Remove every legacy ambient SEAT, ownership aside.
      *
-     * Used when no scenery should exist at all: a theme without `ambient`, or a seat
-     * whose placement can no longer be computed. Leaving a layer behind would paint one
-     * theme's scenery over the next one's.
+     * Despite the name it does NOT touch the live `.dsh-amb-control` layer: that layer is
+     * owned by `drawScene`, and it is only rewritten when a theme actually has scenery. So
+     * this call is safe on the "theme has no scenery" path, where leaving the layer in
+     * place is the INTENDED behaviour — see the note in `syncAmbient`.
      */
     function removeAllAmbientSeats() {
       if (typeof document === 'undefined') return
@@ -3858,10 +5948,21 @@ window.__ModuleLoader__.load({
     /**
      * Render the active theme's scenery into the sidebar column.
      *
-     * Idempotent: the seat is created once and its contents are replaced whenever
-     * the active theme (or its ambient config) changes, so re-running is cheap and
-     * cannot stack duplicate scenes. Themes with no `ambient` get an empty seat —
-     * the scenery belongs to the skin, so switching skins must remove it.
+     * Idempotent: the scene box is reused and its content is replaced only when the markup
+     * changes, so re-running never stacks duplicate scenes (two copies of a scene = two of
+     * every animated element, which is what produced the duplicated dragonflies).
+     *
+     * Two different "no scenery" cases, and they are NOT the same:
+     *
+     *  · switching to ANOTHER skin — the markup differs, so the box is repainted with the
+     *    new skin's artwork;
+     *  · switching to a theme that has no `ambient` at all — the BUILT-IN 浅色 / 深色 cards.
+     *    Only the legacy seats are swept; the live `.dsh-amb-control` layer is deliberately
+     *    LEFT ALONE, so the previous skin's artwork (balloons, fish, mountains…) stays on
+     *    screen over the system palette. That leftover is a feature the user asked to keep
+     *    — the built-in cards advertise it ("会有惊喜哦") and
+     *    `tests/check-boot-path.mjs` asserts it, so a later "cleanup" cannot remove it
+     *    without turning the test red.
      * @param kind - the ambient kind, or undefined for none.
      * @param options - the theme's ambient options.
      */
@@ -3934,6 +6035,18 @@ window.__ModuleLoader__.load({
       const markup = sceneMarkup(kind, options)
 
       if (markup === '') {
+        // ── THE LIVE LAYER IS NOT TOUCHED HERE, ON PURPOSE ───────────────────────
+        //
+        // This branch runs when the active theme has no scenery — i.e. after clicking one of
+        // the built-in 浅色 / 深色 cards. `removeAllAmbientSeats()` only sweeps
+        // `#dsh-theme-ambient` SEATS (a container earlier builds created); the layer that
+        // actually paints is `.dsh-amb-control`, and it is only ever rewritten by
+        // `drawScene()`. So the previous skin's artwork stays where it is.
+        //
+        // That is the user's "惊喜": pick a skin, then switch to 浅色 / 深色, and the
+        // sidebar keeps the balloons / fish / mountains while the palette goes back to the
+        // system appearance. It is asserted in `tests/check-boot-path.mjs`
+        // (「切到内置主题后装饰层保留」) — do not "fix" it by clearing the layer here.
         removeAllAmbientSeats()
         if (record) noteAmbientAttempt({ kind, column: true, band: '无装饰' })
         ambientReport = { found: true, kind: '(none)', note: '该主题无装饰' }
@@ -4403,6 +6516,59 @@ window.__ModuleLoader__.load({
       })
     }
 
+    /** 当前叠着的配色方案 id，没有就是 undefined。 */
+    let stackedScheme
+
+    /** 配色层的 disposer（见 `syncScheme`）。 */
+    let schemeLayerDispose
+
+    /**
+     * 把所选配色方案叠到整屏上。
+     *
+     * ── 两条与 `syncAccent` 同源的约束 ────────────────────────────────────────
+     *
+     *  1. **只有锚主题是活动主题时才叠。** `overrideTokens` 的层是压在"当前活动主题"
+     *     之上的，所以用户切到山青婷彩之后这一层必须撤除，否则会把配色糊到别人身上。
+     *     判据取 `snapshot.active.id`，与 `syncAccent` 完全一致（**不能**引用
+     *     `wantedSkin` —— 那个函数在 `mountGallery` 内部，工厂级函数够不到它，
+     *     正是硬性规则 4 记着的那个作用域事故）。
+     *  2. **既有跳过、又有自发光守卫。** `overrideTokens` 与它返回的 disposer **都会**
+     *     emit `theme/change`，而本函数是被 `publish()` 调的，`publish` 又由那个事件驱动 ——
+     *     少了守卫就是 0.1.4 那次 `RangeError` 刷屏的同一形状（规则 1）。
+     * @param snapshot - 官方主题快照。
+     */
+    function syncScheme(snapshot) {
+      if (ctx === undefined) return
+      const active = snapshot === undefined || snapshot === null ? {} : (snapshot.active ?? {})
+      const remembered = rememberedScheme()
+      // ── 石榴金那一格**不叠派生层**（用户实机反馈："不是你第一遍做的颜色"）──────────
+      //
+      // 第一版那套配色（两排 10 个纯色 + 拼色那一排，合起来这一整套）**不是三个颜色**，
+      // 而是锚主题皮肤 `lib/themes/shi-liu-jin.json` 里手工写好的 67 个 token —— 侧栏渐变、
+      // 两层底、正文、按钮族都在里面。用户说"这个配色保留，很漂亮"，留的就是这一整套。
+      //
+      // 所以这一格必须**等于皮肤自己那套**：只要锚主题是活动主题，`syncSkin` 就已经把
+      // 皮肤自己的调色叠上了，这里撤掉配色层即可精确复原第一版。
+      // 反过来说：若照旧拿 `main/ground/ink` 去派生 67 个 token，得到的是一套"相似但不等"
+      // 的颜色（`state-business-primary` 会变成金色圆点色、侧栏渐变会按主色重算），
+      // 用户一眼就看出来了 —— 这正是本次被指出来的问题。
+      const wanted = remembered !== null && remembered !== DEFAULT_SCHEME && active.id === PALETTE_ANCHOR
+        ? remembered
+        : null
+      if (wanted === stackedScheme) return
+      const scheme = wanted === null ? undefined : schemeById(wanted, PALETTE_SCHEMES)
+      emitting(() => {
+        if (schemeLayerDispose !== undefined) {
+          schemeLayerDispose()
+          schemeLayerDispose = undefined
+        }
+        stackedScheme = undefined
+        if (scheme === undefined) return
+        schemeLayerDispose = ctx.theme.overrideTokens('theme-gallery: 配色', schemeTokens(scheme))
+        stackedScheme = wanted
+      })
+    }
+
     /**
      * Report whether the accent token layer actually reached the theme snapshot.
      *
@@ -4486,12 +6652,14 @@ window.__ModuleLoader__.load({
      * @param props - composed slot props.
      * @returns the page element tree.
      */
-    function ThemeGalleryPage({ t, setTheme, useStore, usePanelInfo }) {
+    function ThemeGalleryPage({ t, setTheme, pickScheme, useStore, usePanelInfo }) {
       const info = usePanelInfo((s) => s.activePanelId)
       const ids = useStore((s) => s.ids)
       const labels = useStore((s) => s.labels)
       const descriptions = useStore((s) => s.descriptions)
       const swatches = useStore((s) => s.swatches)
+      const cardRows = useStore((s) => s.cardRows)
+      const scheme = useStore((s) => s.scheme)
       const selected = useStore((s) => s.selected)
       const status = useStore((s) => s.status)
       // The layout keeps this page registered whatever the selection is, so it
@@ -4511,6 +6679,14 @@ window.__ModuleLoader__.load({
       // Detail lines are opt-in; a line that reports a problem is not detail.
       const scenery = sceneryLine(selected)
       const showScenery = scenery !== null && (debugEnabled() || sceneryLineIsWarning(scenery))
+      // ── THE HEADER COUNT IS SKINS, NOT CARDS ─────────────────────────────────
+      //
+      // The built-in 浅色 / 深色 cards are not skins — they only switch the palette back to the
+      // official appearance — so counting them here would advertise a number that disagrees
+      // with the README and with npm's description ("6 skins"). The cards are named in the
+      // same line instead, so nothing is hidden by leaving them out of the number.
+      const builtInCards = ids.filter((id) => BUILT_IN_LABELS[id] !== undefined).length
+      const skinCount = ids.length - builtInCards
       return jsxs('div', {
         className: 'tg-page',
         children: [
@@ -4519,7 +6695,7 @@ window.__ModuleLoader__.load({
             children: [
               jsx('span', { className: 'tg-title', children: t('title') }),
               jsx('span', { className: 'tg-hint', children: t('hint') }),
-              jsx('span', { className: 'tg-hint', children: t('count', { count: ids.length }) }),
+              jsx('span', { className: 'tg-hint', children: t('count', { count: skinCount }) }),
               // What this copy is, so a reader can compare it with the version npm
               // publishes without digging through the profile.
               jsx('span', { className: 'tg-hint', children: `v${BUNDLED_VERSION}` }),
@@ -4532,9 +6708,22 @@ window.__ModuleLoader__.load({
               label: labels[id],
               description: descriptions[id],
               swatches: swatches[id] || [],
+              // Absent for every strip card; the palette-picker card is the only one
+              // that has it.
+              rows: (cardRows || {})[id],
+              // Which of the picker's 15 slots is lit. Ignored by strip cards.
+              selectedScheme: scheme,
               selected: id === selected,
               applied: t('applied'),
-              onSelect: setTheme,
+              // The click is recorded BEFORE it is handed to the shell, because the theme
+              // service publishes synchronously and the publisher re-applies the remembered
+              // skin: a built-in card clicked after a skin used to be undone immediately.
+              // `rememberCardChoice` is what lets 浅色 / 深色 win — see its documentation.
+              onSelect: (id) => { rememberCardChoice(id); setTheme(id) },
+              // A picker slot: record the scheme first, then hand the anchor theme to the
+              // shell exactly like clicking the card would — so the anchor becomes active
+              // and the scheme layer has something to sit on.
+              onPickScheme: (schemeId) => { pickScheme(schemeId) },
               t,
             }, id)),
           }),
@@ -4918,8 +7107,11 @@ window.__ModuleLoader__.load({
        * handler, so the safety has to live in the CONFIGURATION CONTRACT rather than in code.
        * The one way to break it is to hand-write a skin id into `preference` — which the
        * official service would then reject at boot. Never do that.
+       *
+       * The keys themselves live at MODULE scope ({@link SKIN_KEY} / {@link BUILT_IN_KEY}):
+       * the card-click handler runs in the page component, far from this body, and it must
+       * be able to write them before the click reaches the theme service.
        */
-      const SKIN_KEY = 'theme-gallery:last-skin'
 
       /**
        * The token used to prove a skin's palette reached the document.
@@ -4952,6 +7144,45 @@ window.__ModuleLoader__.load({
         }
       }
 
+      /**
+       * Record that a skin is the active theme — the restart-time memory.
+       *
+       * Written only once the service actually reports the skin, so the key never names a
+       * skin that was merely requested and then lost. Clearing the built-in marker in the
+       * same breath keeps the two keys from disagreeing about what the user last chose.
+       * @param id - the active skin id.
+       */
+      function rememberActiveSkin(id) {
+        try {
+          if (window.localStorage.getItem(SKIN_KEY) !== id) window.localStorage.setItem(SKIN_KEY, id)
+          if (window.localStorage.getItem(BUILT_IN_KEY) !== null) window.localStorage.removeItem(BUILT_IN_KEY)
+        } catch (error) {
+          console.error('[theme-gallery] could not remember the active skin:', error)
+        }
+      }
+
+      /**
+       * The skin this plugin should be showing, or null when the user is entitled to a
+       * built-in appearance.
+       *
+       * Three-way precedence, and all three arms are load-bearing:
+       *
+       *  1. a skin the user chose — restore it, across restarts (the original feature);
+       *  2. a built-in the user chose IN THIS PANEL — null, so the restore does not fight it;
+       *  3. nothing chosen yet — the gallery's own default ({@link DEFAULT_SKIN}), which is
+       *     what makes a fresh install land on 山青婷彩 instead of the built-in white.
+       *
+       * Arm 2 is why the built-in cards work at all: without it, arm 1 keeps winning and the
+       * click is undone a moment later.
+       * @returns the skin id, or null.
+       */
+      function wantedSkin() {
+        const remembered = rememberedSkin()
+        if (remembered !== null) return remembered
+        if (builtInChoice() !== null) return null
+        return DEFAULT_SKIN
+      }
+
       /** The skin whose palette layer is currently stacked, and how to remove it. */
       let stackedSkin
       let stackedSkinDispose
@@ -5221,17 +7452,20 @@ window.__ModuleLoader__.load({
           // the presenter subscribed leaves the service reporting the skin while the page still
           // shows the built-in palette.
           if (typeof activeId === 'string' && bundledTheme(activeId) !== undefined) {
-            if (window.localStorage.getItem(SKIN_KEY) !== activeId) {
-              window.localStorage.setItem(SKIN_KEY, activeId)
-            }
+            rememberActiveSkin(activeId)
             ensureSkinPainted(activeId, activeId)
             return
           }
 
-          // The app is on a built-in theme even though a skin is remembered: the boot race lost
-          // the preference. Re-checked on every publish rather than once per session, because a
-          // single attempt can be swallowed by a presenter that is not listening yet.
-          const wanted = rememberedSkin()
+          // The app is on a built-in theme even though one of our skins is wanted: either the
+          // boot race lost the preference, or nothing has been chosen yet and the gallery's
+          // default has still to be applied. Re-checked on every publish rather than once per
+          // session, because a single attempt can be swallowed by a presenter that is not
+          // listening yet.
+          //
+          // `wantedSkin()` returns null when the user deliberately picked a built-in card, and
+          // that null is the whole fix for "点深色又被弹回皮肤" — see its documentation.
+          const wanted = wantedSkin()
           if (wanted === null) return
           ensureSkinPainted(wanted, activeId)
         } catch (error) {
@@ -5300,10 +7534,19 @@ window.__ModuleLoader__.load({
        */
       function publish(snapshot) {
         revision += 1
-        const themes = [...snapshot.themes].filter((theme) => !OMITTED_IDS.has(theme.id))
-        storeActions.sync(themes, snapshot.preference, revision)
+        // DISPLAY ORDER IS APPLIED HERE, TO THE PAGE'S COPY ONLY.
+        //
+        // The registry keeps the order things were registered in, so re-ranking a card can
+        // never change which themes exist, what they contain, or the order they were
+        // contributed — `cardsInDisplayOrder` is a view over the filtered list.
+        const themes = cardsInDisplayOrder([...snapshot.themes].filter((theme) => !OMITTED_IDS.has(theme.id)))
+        storeActions.sync(themes, appliedCardId(snapshot), revision)
+        // 卡片上点亮哪一格，以及要不要把那一层配色叠上去 —— 两件事都读同一份
+        // localStorage，所以"看到的选中态"与"屏幕上的颜色"不可能对不上。
+        storeActions.markScheme(wantedScheme())
         syncSkin(snapshot)
         syncRememberedSkin(snapshot)
+        syncScheme(snapshot)
         // Expose what the theme SERVICE believes, so the page can compare it with
         // what is actually in effect on the document. The presenter consumes this
         // same snapshot (`snapshot.active.tokens`) and writes it to `body`, so a
@@ -5326,6 +7569,74 @@ window.__ModuleLoader__.load({
         }
       }
 
+      /**
+       * 用户点了配色卡上的一个色值按钮（或卡片本体 = 用它记住的那一套，没有就是默认那套）。
+       *
+       * ── 为什么必须显式切主题（第一版漏了这一步，用户实机报"点了没反应"）──────────
+       *
+       * 第一版只做了 `rememberScheme` + `rememberCardChoice(锚主题)` + `publish()`，以为
+       * `syncRememberedSkin` 会把锚主题切过去。**它不会**：
+       *
+       *   • `rememberCardChoice` 只**清掉**"内置外观"标记，它从不写 `last-skin`；
+       *   • 于是 `wantedSkin()` 仍指向原来那套皮肤，而 `syncRememberedSkin` 见到活动主题
+       *     是本包皮肤就走"记住它"那条分支 —— 活动主题被原样记回去并继续维持；
+       *   • `syncScheme` 的判据是 `active.id === PALETTE_ANCHOR`，不成立 → 配色层永不叠加。
+       *
+       * 面板上的普通皮肤卡之所以能切，是因为它把 `setTheme` 交给了外壳（槽位动作那条例外）。
+       *
+       * ── 为什么这里用 `emitting(...)` 而不是再加一条审计例外 ─────────────────────
+       *
+       * 这次 `theme/change` 确实是"用户换了主题"的信号，但它**不需要**靠事件传递：本函数
+       * 紧接着自己调一次 `publish()`，那一次的快照里活动主题已经是锚主题。把它标成"我造成的"，
+       * 订阅者就跳过这次回声，正好避免一次点击触发两轮同步（规则 1）。
+       * @param schemeId - 配色方案 id（`p-…`）。
+       */
+      function chooseScheme(schemeId) {
+        // 不认识的 id 直接丢：写进 localStorage 会让下次启动带着一个永远点不亮的选中态。
+        if (schemeById(schemeId, PALETTE_SCHEMES) === undefined) return
+        try {
+          rememberScheme(schemeId)
+          rememberCardChoice(PALETTE_ANCHOR)
+          // 锚主题不是活动主题时必须真的切过去，否则上面那条链一步都不会发生。判据取活动主题，
+          // 所以"已经在锚主题上再点另一格"不会白写一次 setTheme（同一个 id 的 setTheme
+          // 是**不会 emit 的**，见 SKILL §12）。
+          const activeId = ctx.theme.getTheme()?.active?.id
+          if (activeId !== PALETTE_ANCHOR) {
+            emitting(() => ctx.theme.setTheme(PALETTE_ANCHOR))
+          }
+          publish(ctx.theme.getTheme())
+        } catch (error) {
+          console.error('[theme-gallery] could not switch the palette scheme:', error)
+        }
+      }
+
+      /**
+       * 卡片上「已应用」徽标应该落在哪一张卡上。
+       *
+       * ── 为什么不直接用 `snapshot.preference`（用户实机报的 bug）────────────────
+       *
+       * 点一个色值按钮时，徽标在「浅色」与「纯色/拼色」之间来回跳。根因是
+       * {@link ensureSkinPainted} 的**跳转重试**：当服务已经报告皮肤、而文档还没落色时，
+       * 它会先切到内置主题再切回皮肤（`emitting(() => ctx.theme.setTheme(BUILT_IN_PROBE_THEME))`），
+       * 每次都是一次真实的 preference 变化 → 一次 publish → 徽标跟着那个**中间态**跳一下。
+       *
+       * 徽标要回答的是"用户选的是哪一张卡"，不是"服务此刻停在哪一帧"。中间态有两个特征可以
+       * 一票排除：它等于 {@link BUILT_IN_PROBE_THEME}，而且用户**没有**在面板里选过任何内置外观
+       * （`builtInChoice()` 为空）。两条同时成立时，按"想要的那套皮肤"显示 —— 跳转只是为了
+       * 让表现层重新落色，不是一次选择。
+       *
+       * 其余情况一律照服务当下的活动主题显示（用户点深色就走深色、外部改外观也跟着走），
+       * 所以这不是"徽标只认 localStorage"，而是"只把中间态排除掉"。
+       * @param snapshot - 官方主题快照。
+       * @returns 应该带徽标的卡片 id。
+       */
+      function appliedCardId(snapshot) {
+        const active = snapshot === undefined || snapshot === null ? {} : (snapshot.active ?? {})
+        const wanted = wantedSkin()
+        if (wanted !== null && active.id === BUILT_IN_PROBE_THEME && builtInChoice() === null) return wanted
+        return active.id ?? snapshot?.preference
+      }
+
       /**
        * Resolve a bundled theme into the shape `register` actually consumes.
        *
@@ -5556,7 +7867,9 @@ window.__ModuleLoader__.load({
             try {
               const snapshot = ctx.theme.getTheme()
               const active = snapshot?.active?.id
-              const wanted = rememberedSkin()
+              // The default skin counts here too: on a fresh install this window is what keeps
+              // asking until 山青婷彩 is genuinely on the document, not merely requested.
+              const wanted = wantedSkin()
               if (wanted === null) {
                 done = true
               } else if (skinIsPainted(wanted)) {
@@ -5662,7 +7975,12 @@ window.__ModuleLoader__.load({
             // — so it is set BEFORE the publish that reads it.
             injectRan = true
             publish(ctx.theme.getTheme())
-            return { setTheme: (id) => { ctx.theme.setTheme(id) } }
+            return {
+              setTheme: (id) => { ctx.theme.setTheme(id) },
+              // 配色卡上的 15 个色值按钮走这条。它**不直接**切主题（见 `chooseScheme`），
+              // 所以这里不新增主题写入点。
+              pickScheme: (schemeId) => { chooseScheme(schemeId) },
+            }
           },
         }, ThemeGalleryPage)