koishi-plugin-mcdle 0.1.6 → 0.2.0

package/lib/index.js

@@ -14621,7 +14621,355 @@ var itemChineseTitle = [
   "铜粒"
 ];
 
+// src/m3.ts
+var WHITE_X = 95.047;
+var WHITE_Y = 100;
+var WHITE_Z = 108.883;
+function labToXyz(l, a, b) {
+  const fy = (l + 16) / 116;
+  const fx = fy + a / 500;
+  const fz = fy - b / 200;
+  const f = /* @__PURE__ */ __name((t) => t > 6 / 29 ? t * t * t : 3 * (6 / 29) ** 2 * (t - 4 / 29), "f");
+  return [f(fx) * WHITE_X, f(fy) * WHITE_Y, f(fz) * WHITE_Z];
+}
+__name(labToXyz, "labToXyz");
+function gamma(value) {
+  return value <= 31308e-7 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - 0.055;
+}
+__name(gamma, "gamma");
+function xyzToRgb(x, y, z) {
+  x /= 100;
+  y /= 100;
+  z /= 100;
+  return [
+    gamma(3.2406 * x - 1.5372 * y - 0.4986 * z),
+    gamma(-0.9689 * x + 1.8758 * y + 0.0415 * z),
+    gamma(0.0557 * x - 0.204 * y + 1.057 * z)
+  ];
+}
+__name(xyzToRgb, "xyzToRgb");
+var EPSILON = 1 / 512;
+function lch(tone, chroma, hue) {
+  const radian = hue * Math.PI / 180;
+  const at = /* @__PURE__ */ __name((c) => xyzToRgb(...labToXyz(tone, Math.cos(radian) * c, Math.sin(radian) * c)), "at");
+  const inGamut = /* @__PURE__ */ __name((rgb2) => rgb2.every((value) => value >= -EPSILON && value <= 1 + EPSILON), "inGamut");
+  let rgb = at(chroma);
+  if (!inGamut(rgb)) {
+    let low = 0;
+    let high = chroma;
+    while (high - low > 0.05) {
+      const mid = (low + high) / 2;
+      if (inGamut(at(mid))) low = mid;
+      else high = mid;
+    }
+    rgb = at(low);
+  }
+  return "#" + rgb.map((value) => Math.round(Math.min(1, Math.max(0, value)) * 255).toString(16).padStart(2, "0")).join("");
+}
+__name(lch, "lch");
+function palette(hue, chroma) {
+  const cache = /* @__PURE__ */ new Map();
+  return (tone) => {
+    const hit = cache.get(tone);
+    if (hit) return hit;
+    const value = lch(tone, chroma, hue);
+    cache.set(tone, value);
+    return value;
+  };
+}
+__name(palette, "palette");
+function palettesOf(hue, options = {}) {
+  const { chroma = 56, tertiaryShift = 60 } = options;
+  return {
+    primary: palette(hue, chroma),
+    secondary: palette(hue, Math.max(16, chroma / 3.2)),
+    tertiary: palette(hue + tertiaryShift, Math.max(28, chroma / 1.8)),
+    neutral: palette(hue, 4),
+    neutralVariant: palette(hue, 9),
+    error: palette(36, 68)
+  };
+}
+__name(palettesOf, "palettesOf");
+function scheme(hue, dark = false, options = {}) {
+  const p = palettesOf(hue, options);
+  const { primary: P, secondary: S, tertiary: T, neutral: N, neutralVariant: V, error: E } = p;
+  if (dark) {
+    return {
+      primary: P(80),
+      onPrimary: P(20),
+      primaryContainer: P(30),
+      onPrimaryContainer: P(90),
+      secondary: S(80),
+      onSecondary: S(20),
+      secondaryContainer: S(30),
+      onSecondaryContainer: S(90),
+      tertiary: T(80),
+      onTertiary: T(20),
+      tertiaryContainer: T(30),
+      onTertiaryContainer: T(90),
+      error: E(80),
+      onError: E(20),
+      errorContainer: E(30),
+      onErrorContainer: E(90),
+      background: N(6),
+      onBackground: N(90),
+      surface: N(6),
+      onSurface: N(90),
+      surfaceVariant: V(30),
+      onSurfaceVariant: V(80),
+      surfaceDim: N(6),
+      surfaceBright: N(24),
+      surfaceContainerLowest: N(4),
+      surfaceContainerLow: N(10),
+      surfaceContainer: N(12),
+      surfaceContainerHigh: N(17),
+      surfaceContainerHighest: N(22),
+      outline: V(60),
+      outlineVariant: V(30),
+      inverseSurface: N(90),
+      inverseOnSurface: N(20),
+      inversePrimary: P(40),
+      scrim: N(0),
+      shadow: N(0)
+    };
+  }
+  return {
+    primary: P(40),
+    onPrimary: P(100),
+    primaryContainer: P(90),
+    onPrimaryContainer: P(30),
+    secondary: S(40),
+    onSecondary: S(100),
+    secondaryContainer: S(90),
+    onSecondaryContainer: S(30),
+    tertiary: T(40),
+    onTertiary: T(100),
+    tertiaryContainer: T(90),
+    onTertiaryContainer: T(30),
+    error: E(40),
+    onError: E(100),
+    errorContainer: E(90),
+    onErrorContainer: E(30),
+    background: N(98),
+    onBackground: N(10),
+    surface: N(98),
+    onSurface: N(10),
+    surfaceVariant: V(90),
+    onSurfaceVariant: V(30),
+    surfaceDim: N(87),
+    surfaceBright: N(98),
+    surfaceContainerLowest: N(100),
+    surfaceContainerLow: N(96),
+    surfaceContainer: N(94),
+    surfaceContainerHigh: N(92),
+    surfaceContainerHighest: N(90),
+    outline: V(50),
+    outlineVariant: V(80),
+    inverseSurface: N(20),
+    inverseOnSurface: N(95),
+    inversePrimary: P(80),
+    scrim: N(0),
+    shadow: N(0)
+  };
+}
+__name(scheme, "scheme");
+var SHAPE = {
+  none: 0,
+  extraSmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  largeIncreased: 20,
+  extraLarge: 28,
+  extraLargeIncreased: 32,
+  extraExtraLarge: 48,
+  full: 9999
+};
+var FONT_STACK = '"Roboto Flex", "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif';
+var MONO_STACK = '"Roboto Mono", "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, "Noto Sans Mono", monospace';
+var TYPE = {
+  displayLarge: { size: 57, line: 64, weight: 400, tracking: -0.25 },
+  displayMedium: { size: 45, line: 52, weight: 400, tracking: 0 },
+  displaySmall: { size: 36, line: 44, weight: 400, tracking: 0 },
+  headlineLarge: { size: 32, line: 40, weight: 400, tracking: 0 },
+  headlineMedium: { size: 28, line: 36, weight: 400, tracking: 0 },
+  headlineSmall: { size: 24, line: 32, weight: 400, tracking: 0 },
+  titleLarge: { size: 22, line: 28, weight: 400, tracking: 0 },
+  titleMedium: { size: 16, line: 24, weight: 500, tracking: 0.15 },
+  titleSmall: { size: 14, line: 20, weight: 500, tracking: 0.1 },
+  bodyLarge: { size: 16, line: 24, weight: 400, tracking: 0.5 },
+  bodyMedium: { size: 14, line: 20, weight: 400, tracking: 0.25 },
+  bodySmall: { size: 12, line: 16, weight: 400, tracking: 0.4 },
+  labelLarge: { size: 14, line: 20, weight: 500, tracking: 0.1 },
+  labelMedium: { size: 12, line: 16, weight: 500, tracking: 0.5 },
+  labelSmall: { size: 11, line: 16, weight: 500, tracking: 0.5 }
+};
+var ELEVATION = [
+  "none",
+  "0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15)",
+  "0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15)",
+  "0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15)",
+  "0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15)",
+  "0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15)"
+];
+var kebab = /* @__PURE__ */ __name((name2) => name2.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()), "kebab");
+function colorVars(s) {
+  return Object.entries(s).map(([role, value]) => `--md-sys-color-${kebab(role)}:${value}`).join(";");
+}
+__name(colorVars, "colorVars");
+function systemVars() {
+  const shape = Object.entries(SHAPE).map(([name2, value]) => `--md-sys-shape-corner-${kebab(name2)}:${value}px`);
+  const elevation = ELEVATION.map((value, level) => `--md-sys-elevation-level${level}:${value}`);
+  const type = Object.entries(TYPE).flatMap(([name2, style]) => [
+    `--md-sys-typescale-${kebab(name2)}-size:${style.size}px`,
+    `--md-sys-typescale-${kebab(name2)}-line-height:${style.line}px`,
+    `--md-sys-typescale-${kebab(name2)}-weight:${style.weight}`,
+    `--md-sys-typescale-${kebab(name2)}-tracking:${style.tracking}px`
+  ]);
+  return [...shape, ...elevation, ...type, `--md-sys-typescale-font:${FONT_STACK}`, `--md-sys-typescale-font-mono:${MONO_STACK}`].join(";");
+}
+__name(systemVars, "systemVars");
+function baseline(s) {
+  return `
+:root{${colorVars(s)};${systemVars()}}
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+  background:var(--md-sys-color-background);
+  color:var(--md-sys-color-on-surface);
+  font-family:var(--md-sys-typescale-font);
+  font-synthesis-weight:none;
+  -webkit-font-smoothing:antialiased;
+  text-rendering:optimizeLegibility;
+  font-variant-numeric:tabular-nums;
+}
+.m3-display-large{font-size:57px;line-height:64px;font-weight:600;letter-spacing:-.25px}
+.m3-display-medium{font-size:45px;line-height:52px;font-weight:600;letter-spacing:0}
+.m3-display-small{font-size:36px;line-height:44px;font-weight:600;letter-spacing:0}
+.m3-headline-large{font-size:32px;line-height:40px;font-weight:600;letter-spacing:0}
+.m3-headline-medium{font-size:28px;line-height:36px;font-weight:600;letter-spacing:0}
+.m3-headline-small{font-size:24px;line-height:32px;font-weight:600;letter-spacing:0}
+.m3-title-large{font-size:22px;line-height:28px;font-weight:600;letter-spacing:0}
+.m3-title-medium{font-size:16px;line-height:24px;font-weight:600;letter-spacing:.15px}
+.m3-title-small{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
+.m3-body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:.5px}
+.m3-body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px}
+.m3-body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px}
+.m3-label-large{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px}
+.m3-label-medium{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.5px}
+.m3-label-small{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.5px}
+`;
+}
+__name(baseline, "baseline");
+var MEDAL = {
+  gold: lch(58, 52, 85),
+  silver: lch(66, 5, 260),
+  bronze: lch(48, 36, 48)
+};
+function components() {
+  return `
+.m3-surface{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}
+.m3-card{
+  background:var(--md-sys-color-surface-container-low);
+  color:var(--md-sys-color-on-surface);
+  border-radius:var(--md-sys-shape-corner-extra-large);
+  padding:24px;
+}
+.m3-card--elevated{background:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1)}
+.m3-card--outlined{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant)}
+.m3-card--filled{background:var(--md-sys-color-surface-container-highest)}
+
+/* 药丸形，Expressive 里用得最多的一种形状 */
+.m3-chip{
+  display:inline-flex;align-items:center;gap:6px;
+  height:32px;padding:0 16px;
+  border-radius:var(--md-sys-shape-corner-full);
+  background:var(--md-sys-color-secondary-container);
+  color:var(--md-sys-color-on-secondary-container);
+  font-size:14px;line-height:20px;font-weight:600;letter-spacing:.1px;white-space:nowrap;
+}
+.m3-chip--primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
+.m3-chip--tertiary{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
+.m3-chip--error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}
+.m3-chip--outlined{background:transparent;border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-on-surface-variant)}
+
+.m3-divider{height:1px;border:0;margin:0;background:var(--md-sys-color-outline-variant)}
+
+/* 列表项：靠圆角与容器色分组，不画分隔线 */
+.m3-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
+.m3-list-item{
+  display:flex;align-items:center;gap:16px;
+  min-height:56px;padding:8px 16px;
+  border-radius:var(--md-sys-shape-corner-medium);
+  background:var(--md-sys-color-surface-container);
+  color:var(--md-sys-color-on-surface);
+}
+/* 一组里的首尾项圆角放大，整组读起来像一个整体 */
+.m3-list-item:first-child{border-top-left-radius:var(--md-sys-shape-corner-extra-large);border-top-right-radius:var(--md-sys-shape-corner-extra-large)}
+.m3-list-item:last-child{border-bottom-left-radius:var(--md-sys-shape-corner-extra-large);border-bottom-right-radius:var(--md-sys-shape-corner-extra-large)}
+.m3-list-item--accent{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
+
+.m3-avatar{
+  width:40px;height:40px;flex:none;
+  border-radius:var(--md-sys-shape-corner-full);
+  object-fit:cover;background:var(--md-sys-color-surface-container-highest);
+}
+
+/* 序号徽章，名次靠它一眼可辨 */
+.m3-badge{
+  display:inline-flex;align-items:center;justify-content:center;
+  min-width:28px;height:28px;padding:0 8px;flex:none;
+  border-radius:var(--md-sys-shape-corner-full);
+  background:var(--md-sys-color-surface-container-highest);
+  color:var(--md-sys-color-on-surface-variant);
+  font-size:14px;font-weight:600;letter-spacing:0;
+  font-variant-numeric:tabular-nums;
+}
+/*
+ * 前三名用真正的金银铜，而不是主题的主 / 次 / 第三色：
+ * 名次的含义是固定的，跟着主题变色反而认不出来。三种金属色本身也走 LCh，
+ * 色调彼此拉开一档，所以放在任何主题里明暗关系都成立。
+ */
+.m3-badge--gold{background:${MEDAL.gold};color:#fff}
+.m3-badge--silver{background:${MEDAL.silver};color:#fff}
+.m3-badge--bronze{background:${MEDAL.bronze};color:#fff}
+
+/*
+ * 进度 / 排行条。填充与轨道是两个独立的全圆角色块，中间留 4px 空隙——
+ * 这是 M3 新版进度指示器的标志性细节，靠 flex 比例分配长度，不必算百分比。
+ */
+.m3-bar{display:flex;align-items:center;gap:4px;height:16px;flex:1;min-width:0}
+.m3-bar__fill{
+  height:100%;min-width:16px;
+  border-radius:var(--md-sys-shape-corner-full);
+  background:var(--md-sys-color-primary);
+}
+.m3-bar__track{
+  height:100%;
+  border-radius:var(--md-sys-shape-corner-full);
+  background:var(--md-sys-color-surface-container-highest);
+}
+.m3-bar--on-accent .m3-bar__track{background:var(--md-sys-color-surface-container-lowest)}
+
+/* 页眉：大标题 + 辅助说明，Expressive 强调标题本身的体量 */
+.m3-header{display:flex;flex-direction:column;gap:4px;padding:8px 4px 20px}
+.m3-header__title{font-size:32px;line-height:40px;font-weight:600;letter-spacing:0;color:var(--md-sys-color-on-surface);margin:0}
+.m3-header__support{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px;color:var(--md-sys-color-on-surface-variant);margin:0}
+
+/* 页脚署名，压到最低对比度，不与正文抢视线 */
+.m3-footnote{
+  padding-top:16px;text-align:center;
+  font-size:12px;line-height:16px;letter-spacing:.4px;
+  color:var(--md-sys-color-outline);
+}
+`;
+}
+__name(components, "components");
+
 // src/view.ts
+var HUE = 138;
+var SCHEME = scheme(HUE, true);
+var accentOf = /* @__PURE__ */ __name((hue) => lch(80, 46, hue), "accentOf");
 var PIXELS = {
   // 品牌与模式
   creeper: [
@@ -14988,7 +15336,7 @@ var MODES = {
   mob: {
     name: "生物",
     icon: "creeper",
-    accent: "#8ec96a",
+    accent: accentOf(138),
     pixelArt: false,
     tagline: "从生命、体型与生成方式里辨认它",
     total: mobData.length
@@ -14996,7 +15344,7 @@ var MODES = {
   item: {
     name: "物品",
     icon: "ingot",
-    accent: "#e7b249",
+    accent: accentOf(82),
     pixelArt: true,
     tagline: "从稀有度、来源与用途里辨认它",
     total: itemData.length
@@ -15004,7 +15352,7 @@ var MODES = {
   block: {
     name: "方块",
     icon: "grassblock",
-    accent: "#7fb0d6",
+    accent: accentOf(238),
     pixelArt: true,
     tagline: "从硬度、工具与光学性质里辨认它",
     total: blockData.length
@@ -15110,207 +15458,260 @@ function statusOf(guess, key) {
   return STATUS_META[v] ? v : "unknown";
 }
 __name(statusOf, "statusOf");
-var FONT_STACK = `"Minecraft", "Fusion Pixel 12px monospaced", "Fusion Pixel 12px", "Zpix", "HarmonyOS Sans SC", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", ui-sans-serif, sans-serif`;
+var STATUS_TILE = {
+  hit: lch(42, 44, 142),
+  half: lch(44, 46, 82),
+  miss: lch(42, 48, 28),
+  none: SCHEME.surfaceContainerHigh
+};
+var FONT_STACK_CJK = `"Minecraft", "Fusion Pixel 12px monospaced", "Fusion Pixel 12px", "Zpix", ` + FONT_STACK;
 var CSS = `
-*{margin:0;padding:0;box-sizing:border-box}
+${baseline(SCHEME)}${components()}
+body{font-family:${FONT_STACK_CJK};background:transparent}
 html,body{background:transparent}
-body{font-family:${FONT_STACK};-webkit-font-smoothing:antialiased}
 .px{display:block;flex:none}
 
 #card{
   position:relative;
   display:inline-block;
-  background:#1b201a;
-  color:#e9ece5;
-  border:4px solid #0b0d0a;
-  box-shadow:inset 0 0 0 4px #3c4438, inset 0 0 0 5px #262c24, 0 0 0 1px #000;
-  /* 石质底噪：两层错位的斜向条纹，比纯色更有材质但不抢内容 */
-  background-image:
-    repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 2px, transparent 2px 5px),
-    repeating-linear-gradient(45deg, rgba(0,0,0,.10) 0 3px, transparent 3px 7px);
+  overflow:hidden;
+  background:var(--md-sys-color-surface);
+  color:var(--md-sys-color-on-surface);
+  border-radius:${SHAPE.extraLarge}px;
 }
-#card::after{
-  content:"";position:absolute;inset:0;pointer-events:none;
-  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 60%);
-}
-.pad{padding:22px 24px 20px}
+.pad{padding:24px}
 
-/* ── 页眉：横切面的草方块 ────────────────────────────── */
-.hd{position:relative;overflow:hidden;background:#3a2a1c;
-  background-image:
-    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 4px, transparent 4px 9px),
-    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px);
-  border-bottom:4px solid #0b0d0a;padding:16px 24px 15px}
-.hd .turf{position:absolute;left:0;right:0;top:0;height:9px;background:var(--accent);
-  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.35)}
-.hd .turf::after{content:"";position:absolute;inset:0;
-  background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 8px)}
-.hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:9px}
-.brand{display:flex;align-items:center;gap:10px}
-.brand .mark{color:var(--accent);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55))}
-.brand .word{font-size:26px;font-weight:800;letter-spacing:.22em;line-height:1;
-  text-shadow:3px 3px 0 rgba(0,0,0,.55)}
-.brand .word b{color:var(--accent)}
-.hd .sub{margin-top:7px;font-size:12.5px;letter-spacing:.14em;color:#a8b09f;
-  text-shadow:2px 2px 0 rgba(0,0,0,.4)}
+/* ── 页眉 ─────────────────────────────────────────── */
+.hd{
+  position:relative;
+  background:var(--md-sys-color-surface-container);
+  padding:20px 24px 18px;
+}
+/* 顶端那道强调色仍在，但收成一条细的圆头指示条，不再模拟草皮 */
+.hd .turf{
+  position:absolute;left:24px;top:14px;width:56px;height:4px;
+  border-radius:${SHAPE.full}px;background:var(--accent);
+}
+.hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:18px}
+.brand{display:flex;align-items:center;gap:12px}
+.brand .mark{color:var(--accent)}
+.brand .word{font-size:28px;font-weight:600;letter-spacing:.18em;line-height:1}
+.brand .word b{color:var(--accent);font-weight:600}
+.hd .sub{margin-top:8px;font-size:13px;letter-spacing:.05em;color:var(--md-sys-color-on-surface-variant)}
 .hd-meta{text-align:right;flex:none}
-.hd-meta .big{font-size:22px;font-weight:800;color:var(--accent);line-height:1;
-  text-shadow:3px 3px 0 rgba(0,0,0,.5)}
-.hd-meta .cap{font-size:11px;letter-spacing:.2em;color:#939b8b;margin-top:6px}
+.hd-meta .big{font-size:28px;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
+.hd-meta .cap{font-size:11px;letter-spacing:.1em;color:var(--md-sys-color-on-surface-variant);margin-top:6px}
 
-/* 模式徽记 */
-.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;font-size:12.5px;
-  letter-spacing:.1em;color:#12160f;background:var(--accent);font-weight:700;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.26), inset 3px 3px 0 rgba(255,255,255,.34)}
+/* 模式徽记：药丸形 */
+.badge{
+  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;
+  border-radius:${SHAPE.full}px;
+  background:var(--accent);color:var(--md-sys-color-surface);
+  font-size:12.5px;letter-spacing:.06em;font-weight:600;
+}
 
 /* ── 猜测板 ───────────────────────────────────────── */
-table{border-collapse:separate;border-spacing:5px;margin:0 -5px}
-th{padding:0 0 6px;vertical-align:bottom}
-.col{display:flex;flex-direction:column;align-items:center;gap:5px;
-  min-width:80px;max-width:132px;color:#8d9683}
-.col .lb{font-size:11px;letter-spacing:.08em;color:#a5ad9a;text-align:center;line-height:1.25}
+table{border-collapse:separate;border-spacing:6px;margin:0 -6px}
+th{padding:0 0 8px;vertical-align:bottom}
+.col{display:flex;flex-direction:column;align-items:center;gap:6px;
+  min-width:80px;max-width:132px;color:var(--md-sys-color-on-surface-variant)}
+.col .lb{font-size:11px;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);
+  text-align:center;line-height:1.25;font-weight:600}
 th.n .col{align-items:flex-start;min-width:150px}
 
 td{padding:0}
-.tile{position:relative;overflow:hidden;height:100%;min-height:56px;min-width:76px;max-width:132px;
-  padding:8px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
+.tile{
+  position:relative;overflow:hidden;height:100%;
+  min-height:60px;min-width:76px;max-width:132px;
+  padding:9px 10px;
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
+  border-radius:${SHAPE.medium}px;
   background:var(--tile);
-  box-shadow:inset -4px -4px 0 rgba(0,0,0,.30), inset 4px 4px 0 rgba(255,255,255,.16)}
+}
 /* 多标签字段给更宽的上限，否则一列里会折成很高的一坨 */
 .tile.list{max-width:168px}
 th.list .col{max-width:168px}
-.tile .v{font-size:13px;font-weight:700;line-height:1.3;text-align:center;color:#f2f4ee;
-  text-shadow:2px 2px 0 rgba(0,0,0,.4);word-break:break-word}
-.tile .chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
-.chip{font-size:11.5px;line-height:1.35;padding:2px 5px;color:#eef1e9;
-  background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
+.tile .v{font-size:13px;font-weight:600;line-height:1.35;text-align:center;
+  color:#fff;word-break:break-word}
+.tile .chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
+.chip{
+  font-size:11.5px;line-height:1.35;padding:2px 8px;
+  border-radius:${SHAPE.full}px;
+  color:#fff;background:rgba(0,0,0,.24);
+}
 /* 部分匹配时把真正命中的标签点亮，让「黄」变得可读 */
-.chip.on{background:rgba(255,255,255,.9);color:#1b2016;font-weight:700;
-  box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
-.tile .flag{position:absolute;top:4px;right:4px;color:rgba(255,255,255,.8)}
+.chip.on{background:#fff;color:${SCHEME.surface};font-weight:600}
+.tile .flag{position:absolute;top:5px;right:5px;color:rgba(255,255,255,.85)}
 /* 数值方向不只靠角标：整块的上/下边缘会亮起一条，指向答案所在的一侧 */
-.tile.s-up::after,.tile.s-down::after{content:"";position:absolute;left:0;right:0;height:5px;
-  background:rgba(255,255,255,.45)}
-.tile.s-up::after{top:0}
-.tile.s-down::after{bottom:0}
+.tile.s-up::after,.tile.s-down::after{content:"";position:absolute;left:12px;right:12px;height:4px;
+  border-radius:${SHAPE.full}px;background:rgba(255,255,255,.62)}
+.tile.s-up::after{top:5px}
+.tile.s-down::after{bottom:5px}
 
-.s-hit{--tile:#4a8a35}
-.s-half{--tile:#b8862a}
-.s-miss{--tile:#8e3f34}
-.s-none{--tile:#3a4036}
+.s-hit{--tile:${STATUS_TILE.hit}}
+.s-half{--tile:${STATUS_TILE.half}}
+.s-miss{--tile:${STATUS_TILE.miss}}
+.s-none{--tile:${STATUS_TILE.none}}
 
 /* 名称格 */
-.name{display:flex;align-items:center;gap:11px;min-height:56px;min-width:150px;padding:7px 11px 7px 8px;
-  background:#2a3027;
-  box-shadow:inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 4px 0 rgba(255,255,255,.10)}
-.name.correct{background:#4a8a35}
-.thumb{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
-  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
+.name{
+  display:flex;align-items:center;gap:12px;min-height:60px;min-width:150px;
+  padding:8px 12px 8px 9px;
+  border-radius:${SHAPE.medium}px;
+  background:var(--md-sys-color-surface-container-high);
+}
+.name.correct{background:${STATUS_TILE.hit}}
+.thumb{
+  width:44px;height:44px;flex:none;
+  display:flex;align-items:center;justify-content:center;
+  border-radius:${SHAPE.small}px;
+  background:var(--md-sys-color-surface-container-lowest);
+}
 .thumb img{max-width:38px;max-height:38px;display:block}
 .thumb img.sharp{image-rendering:pixelated}
 .thumb img.broken{display:none}
-.thumb .fb{display:none;color:#6f7866}
+.thumb .fb{display:none;color:var(--md-sys-color-outline)}
 .thumb.failed .fb{display:block}
 .name .txt{min-width:0}
-.name .cn{font-size:15px;font-weight:800;line-height:1.2;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
-.name .en{font-size:10.5px;letter-spacing:.06em;color:#98a08e;margin-top:3px;
+.name .cn{font-size:15px;font-weight:600;line-height:1.25}
+.name .en{font-size:10.5px;letter-spacing:.04em;color:var(--md-sys-color-on-surface-variant);margin-top:3px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
-.name.correct .en{color:rgba(255,255,255,.72)}
-.name .no{font-size:10px;color:#79826e;margin-top:3px}
-.name.correct .no{color:rgba(255,255,255,.6)}
+.name.correct .cn,.name.correct .en,.name.correct .no{color:#fff}
+.name.correct .en,.name.correct .no{opacity:.78}
+.name .no{font-size:10px;color:var(--md-sys-color-outline);margin-top:3px}
 
-/* 最新一行的强调：外侧描边 + 左侧标记 */
-tr.fresh .tile,tr.fresh .name{box-shadow:inset -4px -4px 0 rgba(0,0,0,.30),
-  inset 4px 4px 0 rgba(255,255,255,.16), 0 0 0 2px var(--accent)}
+/* 最新一行的强调：外圈描边 + 行首的圆头标记 */
+tr.fresh .tile,tr.fresh .name{box-shadow:0 0 0 2px var(--accent)}
 tr.fresh .name{position:relative}
-tr.fresh .name::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
+tr.fresh .name::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
+  border-radius:${SHAPE.full}px;background:var(--accent)}
 
 /* ── 进度条 ───────────────────────────────────────── */
-.prog{display:flex;align-items:center;gap:10px;margin-top:18px}
-.prog .bar{flex:1;height:12px;background:#12160f;
-  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.05)}
-.prog .fill{height:100%;background:var(--accent);
-  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.28)}
-.prog .num{font-size:12px;color:#a5ad9a;letter-spacing:.08em;flex:none}
+.prog{display:flex;align-items:center;gap:12px;margin-top:20px}
+.prog .bar{
+  flex:1;height:12px;overflow:hidden;
+  border-radius:${SHAPE.full}px;
+  background:var(--md-sys-color-surface-container-highest);
+}
+.prog .fill{height:100%;border-radius:${SHAPE.full}px;background:var(--accent)}
+.prog .num{font-size:12px;color:var(--md-sys-color-on-surface-variant);letter-spacing:.04em;flex:none;
+  font-variant-numeric:tabular-nums}
 
 /* ── 图例 / 页脚 ──────────────────────────────────── */
-.legend{display:flex;flex-wrap:wrap;gap:7px 9px;align-items:center;
-  border-top:3px solid #0f120e;padding:13px 24px;background:rgba(0,0,0,.22)}
-.lg{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:11.5px;color:#dfe3d9;
-  background:var(--tile);box-shadow:inset -2px -2px 0 rgba(0,0,0,.28), inset 2px 2px 0 rgba(255,255,255,.14)}
-.tip{margin-left:auto;font-size:11.5px;color:#828b78;letter-spacing:.05em}
+.legend{
+  display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
+  padding:14px 24px;
+  background:var(--md-sys-color-surface-container);
+}
+.lg{
+  display:flex;align-items:center;gap:6px;padding:5px 12px;
+  border-radius:${SHAPE.full}px;
+  font-size:11.5px;color:#fff;background:var(--tile);
+}
+.lg.s-none{color:var(--md-sys-color-on-surface-variant)}
+.tip{margin-left:auto;font-size:11.5px;color:var(--md-sys-color-outline);letter-spacing:.02em}
 
 /* ── 通用区块 ─────────────────────────────────────── */
-.sec{margin-top:20px}
+.sec{margin-top:22px}
 .sec:first-child{margin-top:0}
-.sec-t{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;color:#8d9683;
-  margin-bottom:11px}
-.sec-t::after{content:"";flex:1;height:3px;background:
-  repeating-linear-gradient(90deg,#333a2f 0 4px,transparent 4px 8px)}
-.panel{background:#232820;padding:14px 16px;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.32), inset 3px 3px 0 rgba(255,255,255,.06)}
-.rows{display:flex;flex-direction:column;gap:8px}
-.row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#dfe3d9;line-height:1.5}
-.row .k{color:var(--accent);flex:none}
-.row .m{color:#8d9683;font-size:12px}
-.cmd{font-weight:700;color:#f0f3ea;background:rgba(0,0,0,.3);padding:2px 7px;
-  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
+.sec-t{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;
+  font-weight:600;color:var(--md-sys-color-on-surface-variant);margin-bottom:12px}
+.sec-t::after{content:"";flex:1;height:1px;background:var(--md-sys-color-outline-variant)}
+.panel{
+  padding:16px 18px;
+  border-radius:${SHAPE.large}px;
+  background:var(--md-sys-color-surface-container);
+}
+.rows{display:flex;flex-direction:column;gap:9px}
+.row{display:flex;align-items:center;gap:10px;font-size:13.5px;
+  color:var(--md-sys-color-on-surface);line-height:1.5}
+.row .k{color:var(--accent);flex:none;font-weight:600}
+.row .m{color:var(--md-sys-color-on-surface-variant);font-size:12px}
+.cmd{
+  font-weight:600;color:var(--md-sys-color-on-surface);
+  background:var(--md-sys-color-surface-container-highest);
+  padding:2px 9px;border-radius:${SHAPE.small}px;
+}
 
-.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
-.mode-card{padding:13px 14px;background:#232820;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.32), inset 3px 3px 0 rgba(255,255,255,.06)}
-.mode-card .top{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
-.mode-card .cnt{font-size:11.5px;color:#8d9683;margin-top:7px;letter-spacing:.06em}
-.mode-card .tl{font-size:11.5px;color:#aab29d;margin-top:5px;line-height:1.5}
+.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
+.mode-card{
+  padding:15px 16px;
+  border-radius:${SHAPE.large}px;
+  background:var(--md-sys-color-surface-container);
+}
+.mode-card .top{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
+.mode-card .cnt{font-size:11.5px;color:var(--md-sys-color-on-surface-variant);margin-top:8px;letter-spacing:.04em}
+.mode-card .tl{font-size:11.5px;color:var(--md-sys-color-on-surface-variant);margin-top:6px;line-height:1.5}
 
-.attrs{display:flex;flex-wrap:wrap;gap:7px}
-.attr{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12.5px;color:#dfe3d9;
-  background:#2b3128;box-shadow:inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.08)}
+.attrs{display:flex;flex-wrap:wrap;gap:8px}
+.attr{
+  display:flex;align-items:center;gap:7px;padding:7px 14px;
+  border-radius:${SHAPE.full}px;
+  font-size:12.5px;color:var(--md-sys-color-on-secondary-container);
+  background:var(--md-sys-color-secondary-container);
+}
 .attr .px{color:var(--accent)}
 
 /* ── 揭晓卡 ───────────────────────────────────────── */
-.reveal{display:flex;align-items:center;gap:20px}
+.reveal{display:flex;align-items:center;gap:22px}
 .reveal .who{flex:1;min-width:0}
 .reveal .cn .crown{display:inline-block;vertical-align:middle;margin-left:12px;color:var(--accent)}
-.reveal .big-thumb{width:132px;height:132px;flex:none;display:flex;align-items:center;justify-content:center;
-  background:#232820;box-shadow:inset -4px -4px 0 rgba(0,0,0,.34), inset 4px 4px 0 rgba(255,255,255,.08)}
-.reveal .big-thumb img{max-width:116px;max-height:116px;display:block}
+.reveal .big-thumb{
+  width:136px;height:136px;flex:none;
+  display:flex;align-items:center;justify-content:center;
+  border-radius:${SHAPE.extraLarge}px;
+  background:var(--md-sys-color-surface-container);
+}
+.reveal .big-thumb img{max-width:112px;max-height:112px;display:block}
 .reveal .big-thumb img.sharp{image-rendering:pixelated}
 .reveal .big-thumb img.broken{display:none}
-.reveal .big-thumb .fb{display:none;color:#5f6857}
+.reveal .big-thumb .fb{display:none;color:var(--md-sys-color-outline)}
 .reveal .big-thumb.failed .fb{display:block}
-.reveal .cn{font-size:34px;font-weight:800;line-height:1.1;text-shadow:3px 3px 0 rgba(0,0,0,.5)}
-.reveal .en{font-size:13px;letter-spacing:.14em;color:#98a08e;margin-top:8px}
-.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
-.stat{padding:11px 14px;background:#2b3128;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.08)}
-.stat .n{font-size:19px;font-weight:800;color:var(--accent);line-height:1;
-  text-shadow:2px 2px 0 rgba(0,0,0,.45)}
-.stat .c{font-size:10.5px;color:#8d9683;margin-top:6px;letter-spacing:.1em}
+.reveal .cn{font-size:36px;font-weight:600;line-height:1.1}
+.reveal .en{font-size:13px;letter-spacing:.1em;color:var(--md-sys-color-on-surface-variant);margin-top:10px}
+.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
+.stat{
+  padding:13px 16px;
+  border-radius:${SHAPE.large}px;
+  background:var(--md-sys-color-surface-container);
+}
+.stat .n{font-size:22px;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
+.stat .c{font-size:10.5px;color:var(--md-sys-color-on-surface-variant);margin-top:7px;letter-spacing:.06em}
 
 /* ── 排行榜 ───────────────────────────────────────── */
 .rank{display:flex;flex-direction:column;gap:6px}
-.rk{display:flex;align-items:center;gap:13px;padding:10px 13px;background:#232820;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.32), inset 3px 3px 0 rgba(255,255,255,.06)}
-.rk .pos{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
-  font-size:15px;font-weight:800;color:#12160f;background:#59614f;
-  box-shadow:inset -3px -3px 0 rgba(0,0,0,.24), inset 3px 3px 0 rgba(255,255,255,.28)}
-.rk.p1 .pos{background:#e8b53c}
-.rk.p2 .pos{background:#c3cad3}
-.rk.p3 .pos{background:#c47a45}
-.rk.p1{box-shadow:inset -3px -3px 0 rgba(0,0,0,.32), inset 3px 3px 0 rgba(255,255,255,.06), 0 0 0 2px #e8b53c}
+.rk{
+  display:flex;align-items:center;gap:14px;padding:12px 14px;
+  border-radius:${SHAPE.medium}px;
+  background:var(--md-sys-color-surface-container);
+}
+.rk:first-child{border-top-left-radius:${SHAPE.extraLarge}px;border-top-right-radius:${SHAPE.extraLarge}px}
+.rk:last-child{border-bottom-left-radius:${SHAPE.extraLarge}px;border-bottom-right-radius:${SHAPE.extraLarge}px}
+.rk .pos{
+  width:34px;height:34px;flex:none;
+  display:flex;align-items:center;justify-content:center;
+  border-radius:${SHAPE.full}px;
+  font-size:15px;font-weight:600;
+  color:var(--md-sys-color-on-surface-variant);
+  background:var(--md-sys-color-surface-container-highest);
+}
+.rk.p1 .pos,.rk.p2 .pos,.rk.p3 .pos{color:#fff}
+.rk.p1 .pos{background:${MEDAL.gold}}
+.rk.p2 .pos{background:${MEDAL.silver}}
+.rk.p3 .pos{background:${MEDAL.bronze}}
+.rk.p1{box-shadow:0 0 0 2px ${MEDAL.gold}}
 .rk .who{flex:1;min-width:0}
-.rk .nm{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+.rk .nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
   max-width:260px}
-.rk .split{display:flex;gap:9px;margin-top:6px}
-.rk .sp{display:flex;align-items:center;gap:4px;font-size:11px;color:#98a08e}
+.rk .split{display:flex;gap:10px;margin-top:6px}
+.rk .sp{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--md-sys-color-on-surface-variant)}
 .rk .tot{flex:none;text-align:right}
-.rk .tot .n{font-size:21px;font-weight:800;color:var(--accent);line-height:1;
-  text-shadow:2px 2px 0 rgba(0,0,0,.45)}
-.rk .tot .c{font-size:10px;color:#7c856f;margin-top:5px;letter-spacing:.1em}
+.rk .tot .n{font-size:22px;font-weight:600;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
+.rk .tot .c{font-size:10px;color:var(--md-sys-color-outline);margin-top:5px;letter-spacing:.06em}
 
-.empty{padding:34px 20px;min-width:400px;text-align:center;color:#7c856f;font-size:13.5px;line-height:2}
-.empty .px{margin:0 auto 14px;color:#3f4739}
+.empty{padding:36px 20px;min-width:400px;text-align:center;
+  color:var(--md-sys-color-on-surface-variant);font-size:13.5px;line-height:2}
+.empty .px{margin:0 auto 14px;color:var(--md-sys-color-outline)}
 `;
 function shell(body, opts) {
   const width = opts.width ? `width:${opts.width}px;` : "";
@@ -15532,21 +15933,21 @@ function helpCard(dailyLimit, allowRepeat, middleware) {
         </div></div>
       </div>
     </div>` + noteRow("灵感来自 Wordle 与 mcdle.net");
-  return shell(body, { accent: "#8ec96a", width: 760 });
+  return shell(body, { accent: accentOf(138), width: 760 });
 }
 __name(helpCard, "helpCard");
 function rankCard(entries, shown) {
   if (!entries.length) {
     const body2 = header(null, "排行榜", { big: "0", cap: "上榜人数" }) + `<div class="pad"><div class="empty">${px("trophy", 44)}
         榜单还空着<br><span style="font-size:12px">用 <span class="cmd">mcdle.猜 苦力怕</span> 开出第一局，成为榜首</span></div></div>`;
-    return shell(body2, { accent: "#e8b53c", width: 560 });
+    return shell(body2, { accent: accentOf(90), width: 560 });
   }
   const max = Math.max(...entries.map((e) => e.total), 1);
   const rows = entries.map((e, i) => {
     const pos = i + 1;
     const split = ["mob", "item", "block"].map((m) => {
       const n = m === "mob" ? e.mob : m === "item" ? e.item : e.block;
-      return `<span class="sp" style="color:${n ? MODES[m].accent : "#5f6857"}">${px(MODES[m].icon, 10)}<span>${n}</span></span>`;
+      return `<span class="sp" style="color:${n ? MODES[m].accent : SCHEME.outline}">${px(MODES[m].icon, 10)}<span>${n}</span></span>`;
     }).join("");
     const w = Math.round(e.total / max * 100);
     return `<div class="rk p${pos <= 3 ? pos : "n"}">
@@ -15558,7 +15959,7 @@ function rankCard(entries, shown) {
       </div>`;
   }).join("");
   const body = header(null, "群内战绩 · 按累计猜中排序", { big: `${shown}`, cap: "上榜人数" }) + `<div class="pad"><div class="rank">${rows}</div></div>` + noteRow("每猜中一局记一分，按模式分别计数");
-  return shell(body, { accent: "#e8b53c", width: 560 });
+  return shell(body, { accent: accentOf(90), width: 560 });
 }
 __name(rankCard, "rankCard");
 

package/lib/m3.d.ts

@@ -0,0 +1,256 @@
+/**
+ * Material 3 Expressive 设计系统。
+ *
+ * 只依赖标准库，输出纯 CSS 变量与常量，任何渲染后端（puppeteer / canvas）都能用。
+ * 色板按 M3 的做法从一个源色推出六套色调板，再按角色映射成明暗两套配色。
+ */
+/** M3 的「色调」就是 CIE L*，0 为黑、100 为白。 */
+export type Tone = number;
+/** LCh -> #rrggbb。超出 sRGB 色域时按二分法降低彩度，色调与色相保持不变。 */
+export declare function lch(tone: Tone, chroma: number, hue: number): string;
+/** `#rrggbb` -> LCh，`lch()` 的逆运算。 */
+export declare function lchOf(hex: string): {
+    tone: number;
+    chroma: number;
+    hue: number;
+};
+/**
+ * 把一个任意来源的颜色（头像主色、用户自选色）收进本设计系统。
+ *
+ * 只保留它的色相，色调与彩度一律换成设计系统里的取值——于是每个人都还有
+ * 自己的颜色，整张图的明度节奏却是齐的，不会因为某个头像特别暗就糊成一团。
+ * 彩度太低的灰色头像没有可用的色相，退回主色。
+ */
+export declare function harmonize(hex: string, tone: Tone, chroma?: number, fallbackHue?: number): string;
+/** 一套色调板：固定色相与彩度，按色调取色。 */
+export type Palette = (tone: Tone) => string;
+export declare function palette(hue: number, chroma: number): Palette;
+export interface Palettes {
+    primary: Palette;
+    secondary: Palette;
+    tertiary: Palette;
+    neutral: Palette;
+    neutralVariant: Palette;
+    error: Palette;
+}
+export interface SourceOptions {
+    /** 主色彩度，默认 56，够鲜艳又不至于在浅色调上大面积溢出色域。 */
+    chroma?: number;
+    /**
+     * 第三色相对主色的相位差，默认 +60°。
+     * 这个值规范里是个经验值，并非永远合适：暖橙 +60° 会落到发闷的橄榄绿，
+     * 这种时候改成 -60° 取玫红，强调色才跳得出来。
+     */
+    tertiaryShift?: number;
+}
+/**
+ * 按 M3 的推导规则从源色相生成六套色调板。
+ *
+ * Expressive 相比基础风格更敢用彩度：第三色比规范里的保守取值更高，
+ * 中性色也留了一点源色的味道，成片的表面不会灰得发死。
+ */
+export declare function palettesOf(hue: number, options?: SourceOptions): Palettes;
+export interface Scheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    scrim: string;
+    shadow: string;
+}
+/** 生成一套完整的角色配色。`dark` 为真时返回暗色方案。 */
+export declare function scheme(hue: number, dark?: boolean, options?: SourceOptions): Scheme;
+/**
+ * M3 Expressive 形状刻度（px）。
+ * Expressive 把圆角整体推大了一档，容器之间靠「圆角差」而不是分隔线来分层。
+ */
+export declare const SHAPE: {
+    readonly none: 0;
+    readonly extraSmall: 4;
+    readonly small: 8;
+    readonly medium: 12;
+    readonly large: 16;
+    readonly largeIncreased: 20;
+    readonly extraLarge: 28;
+    readonly extraLargeIncreased: 32;
+    readonly extraExtraLarge: 48;
+    readonly full: 9999;
+};
+/** 正文与标题字体栈，覆盖 Windows / macOS / Linux 与随包字体三种情况。 */
+export declare const FONT_STACK = "\"Roboto Flex\", \"Roboto\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", \"Source Han Sans SC\", system-ui, sans-serif";
+/** 等宽字体栈，用于比分、倒计时这类需要对齐的数字。 */
+export declare const MONO_STACK = "\"Roboto Mono\", \"JetBrains Mono\", \"SF Mono\", \"Cascadia Mono\", Consolas, \"Noto Sans Mono\", monospace";
+export interface TypeStyle {
+    size: number;
+    line: number;
+    weight: number;
+    tracking: number;
+}
+/**
+ * M3 Expressive 字阶。`emphasized` 档提高字重，用在需要被一眼看到的地方，
+ * 这是 Expressive 与基础风格最直观的差别之一。
+ */
+export declare const TYPE: {
+    displayLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    displayMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    displaySmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodyLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodyMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodySmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+};
+/**
+ * Expressive 的强调字重。取 600 而非规范里的 500：很多机器上只装了 400 / 700 两档，
+ * 500 会回落成常规字重，强调就白做了；600 在这种字体集下会匹配到 700，效果才稳定。
+ * 正文维持 400，字重拉高反而伤可读性。
+ */
+export declare const EMPHASIZED_WEIGHT: {
+    readonly display: 600;
+    readonly headline: 600;
+    readonly title: 600;
+    readonly label: 600;
+};
+/** 阴影高度（dp -> box-shadow），M3 只有 0 ~ 5 六档。 */
+export declare const ELEVATION: readonly ["none", "0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15)", "0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15)", "0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15)", "0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15)", "0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15)"];
+/** 把配色方案铺成 `--md-sys-color-*` 变量。 */
+export declare function colorVars(s: Scheme): string;
+/** 形状、字阶、高度的变量，与配色一起构成完整的令牌集。 */
+export declare function systemVars(): string;
+/** 一段可直接塞进 `<style>` 的基础样式：令牌 + 排版重置。 */
+export declare function baseline(s: Scheme): string;
+/**
+ * 通用组件样式。各插件按需挑用，命名统一为 `m3-` 前缀。
+ *
+ * Expressive 的取向体现在三处：圆角整体偏大且同一张图里刻意拉开层次、
+ * 强调元素用高彩度的容器色而不是描边、以及成组元素之间用间距而不是分隔线来断句。
+ */
+/** 金银铜。色调依次 58 / 66 / 48，深浅本身就排出了名次。 */
+export declare const MEDAL: {
+    readonly gold: string;
+    readonly silver: string;
+    readonly bronze: string;
+};
+export declare function components(): string;
+/**
+ * 浏览器端的配色小库，序列化进页面脚本用。
+ *
+ * 有些图是在页面里用 canvas 画的，那边拿不到这个模块。与其在客户端另写一套
+ * HSL 近似，不如把同一套 LCh 运算原样送过去——服务端与浏览器端算出来的颜色
+ * 必须一致，否则「同一支色相」的承诺在两边会对不上。
+ *
+ * 暴露的接口与本模块同名：`M3.lch` / `M3.lchOf` / `M3.harmonize`。
+ */
+export declare function clientColorScript(): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-mcdle",
   "description": "Koishi 的 Minecraft 猜词游戏插件。",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [