dsh-theme-gallery 0.3.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
@@ -124,6 +139,7 @@ window.__ModuleLoader__.load({
     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,
@@ -180,6 +196,284 @@ window.__ModuleLoader__.load({
       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.
      *
@@ -231,6 +525,54 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * Record the palette scheme the user clicked on the picker card.
+     *
+     * 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-…`).
+     */
+    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'
 
@@ -257,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.3.0'
+    const BUNDLED_VERSION = '0.4.0'
 
     /**
      * Themes this package contributes, inlined from lib/themes/*.json.
@@ -849,7 +1191,7 @@ window.__ModuleLoader__.load({
       {
         "id": "meng-hai-you-yu",
         "label": "梦海游鱼",
-        "description": "梦幻海洋，游鱼作伴 —— 复刻自电商新零售系统管理后台的默认主题",
+        "description": "梦幻海洋，游鱼作伴 —— 复刻自蜂链商城电商新零售系统管理后台的默认主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -1139,7 +1481,7 @@ window.__ModuleLoader__.load({
       {
         "id": "pei-an-jie-xin",
         "label": "佩安杰心",
-        "description": "檀香禅影，自在安顿 —— 复刻自电商新零售系统管理后台同名主题",
+        "description": "檀香禅影，自在安顿 —— 复刻自蜂链商城电商新零售系统管理后台同名主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -1427,7 +1769,7 @@ window.__ModuleLoader__.load({
       {
         "id": "shan-qing-ting-cai",
         "label": "山青婷彩",
-        "description": "青山叠翠，蜓舞生姿 —— 复刻自电商新零售系统管理后台同名主题",
+        "description": "青山叠翠，蜓舞生姿 —— 复刻自蜂链商城电商新零售系统管理后台同名主题",
         "colorScheme": "light",
         "tokens": {
           "--dsw-alias-bg-base": {
@@ -1712,10 +2054,328 @@ window.__ModuleLoader__.load({
           "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,#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": "#FFFBF0",
+          "alpha": 0.62,
+          "blur": 3,
+          "maxWidth": 640
+        },
+        "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": {
@@ -2002,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.
      *
@@ -2428,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('')
 
     /**
@@ -2440,13 +3320,17 @@ 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
@@ -2470,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
           },
@@ -2487,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],
       })
     }
 
@@ -5495,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.
      *
@@ -5578,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
@@ -5632,6 +6708,11 @@ 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'),
               // The click is recorded BEFORE it is handed to the shell, because the theme
@@ -5639,6 +6720,10 @@ window.__ModuleLoader__.load({
               // 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)),
           }),
@@ -6455,9 +7540,13 @@ window.__ModuleLoader__.load({
         // 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, snapshot.preference, revision)
+        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
@@ -6480,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.
        *
@@ -6818,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)