Merge branch 'feat/m229-ink-cat-skin-rollout-app-iced-inksk'

2026-11-11 01:49:19 +08:00
commit 654e12c100
@@ -13,6 +13,7 @@ use iced::window;
 use unlucky_design::color::SchemeFlavor;
 use unlucky_presenter::backend::{build_backend, config_path};
 use unlucky_presenter::dto::Backend;
+use unlucky_presenter::prefs::ThemeMode;
 use unlucky_presenter::settings_bridge::SettingsBridge;
 use unlucky_presenter::state::AppState;

@@ -57,7 +58,17 @@ impl App {
    ) -> Self {
        let width = WINDOW_SIZE.width;
        let height = WINDOW_SIZE.height;
-        let theme_mode = bridge.load().1;
+        // 主题档：截图通道**不读机器配置**（D30：同一份代码在两台机器上要出同一张图）——
+        // 由 `--screenshot-theme` 钉死（浅 → Silver / `light`，深 → Ink / `dark`）。
+        // 产品路径才读 `appearance.theme_mode`。复审 P2：此前这里两种通道都读文件，
+        // 设置页「主题」那一行的选中态会随出图机器的配置漂移。
+        let theme_mode = match options.screenshot.is_some() {
+            true => match options.shot_flavor().unwrap_or(SchemeFlavor::Light) {
+                SchemeFlavor::Light => ThemeMode::Light,
+                SchemeFlavor::Dark => ThemeMode::Dark,
+            },
+            false => bridge.load().1,
+        };
        // 外观两半分开读：`load()` 给 8 个 UI 写入字段，`load_base()` 给 4 个只读下层键
        // （整窗 α / 标题栏三态 / 配色来源 / 窗口圆角）。M93 之前这些键在 app 侧**根本读不到**。
        //
@@ -154,7 +165,10 @@ impl App {
            avatars: pages::account::avatar::Cache::default(),
            corner_applied: None,
        };
-        // 配色来源档可能已经指向一张背景图：那时 `Ui` 必须由解析出的方案构造，而不是 baseline。
+        // M229：设置页「主题」行的选中态来自设置组自有状态（`language_appearance::State::theme`），
+        // 唯一写者是 `App::set_theme_mode`；这里把启动时读到的档位灌进去，首帧才不会画错档。
+        app.settings.language_appearance.theme = theme_mode;
+        // 配色来源档可能已经指向一张背景图：那时 `Ui` 必须由解析出的方案构造，而不是色板。
        app.rebuild_ui();
        // M174：助手配置的首屏值（真值来自 `config/launcher.json`；截图通道走 `ULL_AI_STATE`）。
        app.hydrate_ai_settings();
@@ -6,6 +6,8 @@
 //! 截图通道的判据 [`App::has_screenshot`] 也放在这儿：上面三条里两条都要「截图不读用户配置」。

 use crate::app::diag::diag;
+use crate::app::message::Message;
+use iced::Task;
 use unlucky_design::color::SchemeFlavor;
 use unlucky_presenter::prefs::ThemeMode;

@@ -73,6 +75,8 @@ impl App {
        }
        let mode = self.bridge.load().1;
        self.theme_mode = mode;
+        // M229：设置页那一行画的是这个字段（唯一写者见 [`App::set_theme_mode`]）。
+        self.settings.language_appearance.theme = mode;
        match mode {
            ThemeMode::Light => self.set_flavor(SchemeFlavor::Light),
            ThemeMode::Dark => self.set_flavor(SchemeFlavor::Dark),
@@ -80,6 +84,68 @@ impl App {
        }
    }

+    /// 换主题档（M229：设置页「通用 → 主题」→ `pages::Message::Theme`）。
+    ///
+    /// 四件事：①改 `theme_mode`（唯一真相）②同步设置页那一行的档位 ③重建 `Ui`（色板换了，
+    /// `Theme::name` 与 49 个角色一起变，iced 才会重算缓存）④落盘 `appearance.theme_mode`。
+    /// `Auto` 自己没有颜色，要等系统回答——所以返回 `iced::system::theme()` 那个 Task，
+    /// 由既有的 `Message::SystemTheme` 分支落地（它只在 `theme_mode == Auto` 时吃这条消息）。
+    pub(in crate::app) fn set_theme_mode(&mut self, mode: ThemeMode) -> Task<Message> {
+        self.settings.language_appearance.theme = mode;
+        if mode == self.theme_mode {
+            return Task::none();
+        }
+        self.theme_mode = mode;
+
+        let prefs = self.appearance_prefs.clone();
+        self.bridge.persist(&prefs, mode);
+        match self.bridge.path() {
+            Some(path) => diag!("[theme] mode={} 已写回 {}", mode.as_str(), path.display()),
+            None => diag!(
+                "[theme] mode={} 未落盘（数据根解析不出来，内存态运行）：重启会回到旧值",
+                mode.as_str()
+            ),
+        }
+
+        match mode {
+            ThemeMode::Light => {
+                self.set_flavor(SchemeFlavor::Light);
+                self.after_theme_switch();
+                Task::none()
+            }
+            ThemeMode::Dark => {
+                self.set_flavor(SchemeFlavor::Dark);
+                self.after_theme_switch();
+                Task::none()
+            }
+            // 跟随系统：当前先按已有深浅画，紧接着由系统主题回答覆盖
+            // （`set_flavor` 有「同档不重建」的保护，所以这里不必先猜一次）。
+            ThemeMode::Auto => iced::system::theme().map(Message::SystemTheme),
+        }
+    }
+
+    /// 换档之后重建视图模型 + 记一行取证日志（色板名就是证据：`ink` / `silver`）。
+    fn after_theme_switch(&mut self) {
+        self.view_dirty = true;
+        self.refresh_view();
+        diag!(
+            "[theme] mode={} board={} Theme::name={}",
+            self.theme_mode().as_str(),
+            self.board_name(),
+            self.ui.name()
+        );
+    }
+
+    /// 当前主题档（设置页那一行的选中态来自 `settings.groups`，这里是取证与测试的读数口）。
+    pub(in crate::app) fn theme_mode(&self) -> ThemeMode {
+        self.theme_mode
+    }
+
+    /// 当前色板名（日志与测试用：`ink` / `silver`；取色方案接管时仍报它所属深浅的那块）。
+    pub(in crate::app) fn board_name(&self) -> &'static str {
+        self.ui.board().name()
+    }
+
    /// 当前令牌求值器（测试与截图日志用）。
    pub(in crate::app) fn ui(&self) -> &Ui {
        &self.ui
@@ -54,11 +54,11 @@ fn switching_flavor_rebuilds_styles_but_keeps_ui_state() {
    let mut app = headless(Options::default(), SchemeFlavor::Light);
    app.state.navigate(Route::Logs);
    app.refresh_view();
-    assert_eq!(app.ui().name(), "ull-m3-light");
+    assert_eq!(app.ui().name(), "ull-silver");

    app.set_flavor(SchemeFlavor::Dark);

-    assert_eq!(app.ui().name(), "ull-m3-dark", "切主题要换主题名");
+    assert_eq!(app.ui().name(), "ull-ink", "切主题要换主题名");
    assert_eq!(app.state.route(), &Route::Logs, "切主题不许重置 UI 状态");
    assert_eq!(app.view.screen, pages::Screen::Logs, "视图模型跟着路由");
    assert!(app.options.screenshot.is_none(), "切主题不许改启动参数");
@@ -78,7 +78,7 @@ fn screenshot_mode_never_waits_for_the_system_theme() {
    assert_eq!(options.capture_flavor(), Some(SchemeFlavor::Light));

    let app = headless(options, SchemeFlavor::Light);
-    assert!(app.has_screenshot() && app.ui().name() == "ull-m3-light");
+    assert!(app.has_screenshot() && app.ui().name() == "ull-silver");
 }

 #[test]
@@ -336,7 +336,7 @@ fn the_page_navigation_entry_also_detaches() {
 fn screenshot_mode_ignores_the_settings_file_theme() {
    let mut app = headless(screenshot_options(), SchemeFlavor::Light);
    app.apply_config_theme();
-    assert_eq!(app.ui().name(), "ull-m3-light", "截图模式的主题只认命令行");
+    assert_eq!(app.ui().name(), "ull-silver", "截图模式的主题只认命令行");
 }

 /// 主题优先级：`--theme` > 配置文件 `appearance.theme_mode` > 系统主题。
@@ -355,7 +355,7 @@ fn the_system_theme_never_overrides_an_explicit_one() {
    let mut auto = headless(Options::default(), SchemeFlavor::Light);
    assert_eq!(auto.theme_mode, ThemeMode::Auto);
    let _ = auto.update(Message::SystemTheme(iced::theme::Mode::Dark));
-    assert_eq!(auto.ui().name(), "ull-m3-dark", "auto 模式要跟随系统");
+    assert_eq!(auto.ui().name(), "ull-ink", "auto 模式要跟随系统");

    // ② 配置文件显式 dark：系统给浅色也不许改
    let mut pinned = headless(Options::default(), SchemeFlavor::Dark);
@@ -363,7 +363,7 @@ fn the_system_theme_never_overrides_an_explicit_one() {
    let _ = pinned.update(Message::SystemTheme(iced::theme::Mode::Light));
    assert_eq!(
        pinned.ui().name(),
-        "ull-m3-dark",
+        "ull-ink",
        "配置文件说 dark，系统说 light：不许改"
    );

@@ -378,7 +378,9 @@ fn the_system_theme_never_overrides_an_explicit_one() {
    let _ = explicit.update(Message::SystemTheme(iced::theme::Mode::Light));
    assert_eq!(
        explicit.ui().name(),
-        "ull-m3-dark",
+        "ull-ink",
        "--theme 优先级最高，系统主题不许盖"
    );
 }
+
+mod theme;
@@ -181,7 +181,7 @@ fn a_decodable_png_makes_the_background_and_the_palette_active() {
        "取色成功后 Ui 要换成解析出的方案"
    );
    // 换 scheme 之后主题名仍是同一个（深浅没变），但 primary 必须与 baseline 不同。
-    assert_eq!(app.ui().name(), "ull-m3-light");
+    assert_eq!(app.ui().name(), "ull-silver");
    let baseline = crate::theme::Ui::new(SchemeFlavor::Light, FAMILIES);
    assert_ne!(
        app.ui().color(unlucky_design::color::Role::Primary),
@@ -0,0 +1,187 @@
+//! 主题三档（Ink / Silver / 跟随系统）的落点测试（M229；从 `app/tests.rs` 拆出守 400 行）。
+//!
+//! 这一份只管**用户点设置页那三枚 chip 之后**发生的事：换色板、同步设置组状态、落盘。
+//! `Auto`（跟随系统）那条路在 `app::tests::the_system_theme_never_overrides_an_explicit_one`。
+
+use crate::app::message::Message;
+use crate::app::state::App;
+use crate::cli::Options;
+use crate::pages;
+use crate::theme::Families;
+use unlucky_design::color::SchemeFlavor;
+use unlucky_presenter::mock::MockBackend;
+use unlucky_presenter::prefs::ThemeMode;
+use unlucky_presenter::settings_bridge::SettingsBridge;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI",
+    display: "Segoe UI",
+    mono: "Consolas",
+};
+
+/// 一个把配置写在临时文件里的 App：测「落盘」必须真的过文件（内存桥读回来永远是出厂值）。
+fn with_config() -> (App, std::path::PathBuf) {
+    let dir = std::env::temp_dir().join(format!("ull-theme-m229-{}", std::process::id()));
+    std::fs::create_dir_all(dir.join("config")).expect("临时目录");
+    let path = dir.join("config/launcher.json");
+    std::fs::write(&path, "{}").expect("写配置文件");
+
+    let app = App::with_presenter(
+        Options::default(),
+        FAMILIES,
+        SchemeFlavor::Light,
+        Box::new(MockBackend::new()),
+        SettingsBridge::with_path(&path),
+    );
+    (app, dir)
+}
+
+/// M229：设置页「通用 → 主题」三档（Ink / Silver / 跟随系统）真的换色板、真的落盘。
+///
+/// 抓得住：①`pages::Message::Theme` 没接进 `on_page`（点了没反应）②接了但不换 `Ui`
+/// （只有选中态变了，界面颜色还是旧的）③同步设置组状态漏了（设置页首帧/刷新后画错档）
+/// ④落盘漏了（重启回旧值——这里**真的过文件**：`with_config` 用 `SettingsBridge::with_path` 写临时
+/// 配置，再用同一路径重新 `load()` 读回；内存桥读回来永远是出厂值，验不了落盘）。
+/// 抓不住：色板好不好看、像素级差异（那要截图，见 `DevDocs/artifacts/m229/`）。
+#[test]
+fn the_theme_message_switches_the_board_and_persists_it() {
+    let (mut app, dir) = with_config();
+    assert_eq!(app.board_name(), "silver", "首帧是浅色主方案（Silver）");
+
+    // 选 Ink（= 深色主方案）
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Dark)));
+    assert_eq!(app.theme_mode(), ThemeMode::Dark);
+    assert_eq!(app.board_name(), "ink", "Ink 深板要真切过去");
+    assert_eq!(app.ui().flavor(), SchemeFlavor::Dark);
+    assert_eq!(
+        app.settings.language_appearance.theme,
+        ThemeMode::Dark,
+        "设置页那一行的档位要跟着改"
+    );
+    // 落盘：真的过了文件（重新打开同一个配置读回来就是 dark）
+    assert_eq!(
+        SettingsBridge::with_path(dir.join("config/launcher.json"))
+            .load()
+            .1,
+        ThemeMode::Dark,
+        "主题档要落盘"
+    );
+
+    // 选 Silver（= 浅色主方案）
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Light)));
+    assert_eq!(app.board_name(), "silver");
+    assert_eq!(app.ui().flavor(), SchemeFlavor::Light);
+    assert_eq!(
+        SettingsBridge::with_path(dir.join("config/launcher.json"))
+            .load()
+            .1,
+        ThemeMode::Light
+    );
+
+    // 同一档再点一次：不许白重建
+    let refreshes = app.refreshes;
+    let _ = app.update(Message::Page(pages::Message::Theme(ThemeMode::Light)));
+    assert_eq!(app.refreshes, refreshes, "同一档不该再重建视图模型");
+    std::fs::remove_dir_all(&dir).ok();
+}
+
+/// **截图通道把主题档钉死在 `--screenshot-theme`**，不读机器上的 `launcher.json`（D30 可复现）。
+///
+/// 复审 r2 P2-a 指出：`construct.rs` 里新加的这条分支没有回归测试——于是「哪天有人把它改回
+/// `bridge.load().1`」不会有人发现，两次不同配置的机器又会出不同颜色的图。
+///
+/// 判据：**同一份截图参数 + 两份不同的机器配置 ⇒ 同一个档位**，且等于参数（浅→`Light`、深→`Dark`）；
+/// 反证：非截图通道下同样两份配置**确实**分出两个档（否则这条测试等于没测到分支）。
+#[test]
+fn the_screenshot_channel_pins_the_theme_mode_instead_of_reading_the_file() {
+    use std::path::{Path, PathBuf};
+
+    /// 写一份只含 `appearance.theme_mode` 的临时配置，并用它构造 App。
+    fn with_mode(
+        dir_name: &str,
+        json: &str,
+        options: Options,
+        flavor: SchemeFlavor,
+    ) -> (App, PathBuf) {
+        let dir =
+            std::env::temp_dir().join(format!("ull-shot-theme-{dir_name}-{}", std::process::id()));
+        std::fs::create_dir_all(dir.join("config")).expect("临时目录");
+        let path = dir.join("config/launcher.json");
+        std::fs::write(&path, json).expect("写配置文件");
+        let app = App::with_presenter(
+            options,
+            FAMILIES,
+            flavor,
+            Box::new(MockBackend::new()),
+            SettingsBridge::with_path(&path),
+        );
+        (app, dir)
+    }
+
+    fn cleanup(dir: &Path) {
+        std::fs::remove_dir_all(dir).ok();
+    }
+
+    let dark_file = r#"{"appearance":{"theme_mode":"dark"}}"#;
+    let light_file = r#"{"appearance":{"theme_mode":"light"}}"#;
+
+    // ① 截图参数给浅色：机器配置是 dark 也一样出 Light（钉死值赢）
+    let shot_light = Options {
+        screenshot: Some(PathBuf::from("unused.png")),
+        screenshot_theme: Some(SchemeFlavor::Light),
+        ..Options::default()
+    };
+    let (from_dark_file, d1) = with_mode(
+        "light-a",
+        dark_file,
+        shot_light.clone(),
+        SchemeFlavor::Light,
+    );
+    let (from_light_file, d2) = with_mode("light-b", light_file, shot_light, SchemeFlavor::Light);
+    assert_eq!(
+        from_dark_file.theme_mode(),
+        ThemeMode::Light,
+        "截图模式下档位必须由 --screenshot-theme 决定，不许读文件里的 dark"
+    );
+    assert_eq!(
+        from_dark_file.theme_mode(),
+        from_light_file.theme_mode(),
+        "两份机器配置必须出同一个档位"
+    );
+    assert_eq!(from_dark_file.board_name(), "silver");
+    assert_eq!(from_light_file.board_name(), "silver");
+
+    // ② 反方向：截图参数给深色 ⇒ 即使文件写 light 也是 Dark/Ink
+    let shot_dark = Options {
+        screenshot: Some(PathBuf::from("unused.png")),
+        screenshot_theme: Some(SchemeFlavor::Dark),
+        ..Options::default()
+    };
+    let (from_light_file_dark, d3) = with_mode("dark-a", light_file, shot_dark, SchemeFlavor::Dark);
+    assert_eq!(from_light_file_dark.theme_mode(), ThemeMode::Dark);
+    assert_eq!(from_light_file_dark.board_name(), "ink");
+
+    // ③ 反证：非截图通道下，同样的两份配置**确实**分出两个档（证明这条分支真的存在）
+    let (interactive_dark, d4) =
+        with_mode("plain-a", dark_file, Options::default(), SchemeFlavor::Dark);
+    let (interactive_light, d5) = with_mode(
+        "plain-b",
+        light_file,
+        Options::default(),
+        SchemeFlavor::Light,
+    );
+    assert_eq!(
+        interactive_dark.theme_mode(),
+        ThemeMode::Dark,
+        "产品路径要读文件"
+    );
+    assert_eq!(
+        interactive_light.theme_mode(),
+        ThemeMode::Light,
+        "产品路径要读文件"
+    );
+
+    for dir in [d1, d2, d3, d4, d5] {
+        cleanup(&dir);
+    }
+}
@@ -66,6 +66,9 @@ impl App {
            // 这是**唯一**一处绕开 M101 投递口的页面消息：语言档位不是「某一组的状态」，
            // 它要落盘到 `ui.language` 并重建整棵视图模型（设置页的语言行只是它的第一个出口）。
            pages::Message::Language(choice) => self.set_language(choice),
+            // M229：换主题档（Ink / Silver / 跟随系统）——换 `Ui` 的色板 + 落盘
+            // `appearance.theme_mode`。与语言行同一条「页面消息直接改本地 + 落盘」的路。
+            pages::Message::Theme(mode) => return self.set_theme_mode(mode),
            // M109：内容库那一套意图在自己的文件里穷尽分发（`update/content.rs`）
            pages::Message::Content(message) => return self.on_content(message),
            // M95：摘要落剪贴板（文本由页面造，这里只搬）
@@ -33,7 +33,7 @@ use update::update_of;
 /// 上一次记过的「设置页看到的组 + 主题」（`None` = 还没记过）。
 ///
 /// 只给 [`note_screenshot_group`] 用：`view` 每帧都会跑，日志必须只在身份**变化**时落一行。
-/// 用 `Mutex` 而不是 `AtomicUsize` 位打包：主题是字符串（`ull-m3-light` / `ull-m3-dark`），
+/// 用 `Mutex` 而不是 `AtomicUsize` 位打包：主题是字符串（`ull-ink` / `ull-silver`），
 /// 把两件事挤进一个整数要引入「高半位 = 深色」这种与主题命名耦合的约定，不如老实用一对值。
 static SHOT_GROUP_LOGGED: std::sync::Mutex<Option<(usize, String)>> = std::sync::Mutex::new(None);

@@ -43,7 +43,7 @@ static SHOT_GROUP_LOGGED: std::sync::Mutex<Option<(usize, String)>> = std::sync:
 ///
 /// 举证图自带不了身份。M201 的事故就是 worker 交了一张「外观」页当下载组的证据，报告里的结论
 /// 建立在一个错的「这是哪个组」上，直到视觉 reviewer 自己重拍才发现。所以每张交付图都要能对上
-/// 一行日志：`[shot] settings route=Settings group=2 theme=ull-m3-light`。
+/// 一行日志：`[shot] settings route=Settings group=2 theme=ull-silver`。
 ///
 /// ## 为什么只在变化时打
 ///
@@ -10,7 +10,6 @@ use iced::{Alignment, Background, Border, Element, Length, Pixels, Shadow};
 use unlucky_design::color::Role;
 use unlucky_design::elevation::Elevation;
 use unlucky_design::shape::ShapeScale;
-use unlucky_design::typography::TypeRole;

 use crate::icons;
 use crate::theme::Ui;
@@ -21,7 +20,7 @@ use super::{Geometry, Variant};

 /// 一个按钮样式要的全部输入（避免 `style_closure` 长出七个位置参数）。
 #[derive(Debug, Clone, Copy)]
-pub(super) struct StyleSpec {
+pub(crate) struct StyleSpec {
    /// 容器填充角色；`None` = 透明（Outlined / Text / StandardIcon）。
    pub fill: Option<Role>,
    /// 内容（文字 + 图标）角色。
@@ -48,7 +47,7 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
    variant: Variant,
    spec: super::Button<'a, M>,
 ) -> Element<'a, M> {
-    let geometry = Geometry::of(ui, variant, spec.leading.is_some());
+    let geometry = Geometry::sized(ui, variant, spec.leading.is_some(), spec.size);
    let (fill, content, border) = variant.roles();
    let forced = spec.state.or(if spec.on_press.is_none() {
        Some(Interaction::Disabled)
@@ -70,12 +69,13 @@ pub(super) fn assemble<'a, M: Clone + 'a>(
    // 逐像素相同」（视觉 reviewer 实测 changed_px = 0；filled 禁用标签 1.23:1）。
    let ink = content_color(ui, forced, content, fill, variant.disabled_content());

+    // 标签排版跟尺寸档走：`ControlSize::label()` 已把「字号跟字级、字重固定 500」定死
+    // （XS/S = LabelLarge 14、M = BodyLarge 16、L = HeadlineSmall 24、XL = HeadlineLarge 32）。
+    let label_style = geometry.size.label();
    let label = text(spec.label)
-        .size(ui.style(TypeRole::LabelLarge).size_px)
-        .line_height(LineHeight::Absolute(Pixels(
-            ui.style(TypeRole::LabelLarge).line_height_px,
-        )))
-        .font(ui.font_of(ui.emphasized(TypeRole::LabelLarge)))
+        .size(label_style.size_px)
+        .line_height(LineHeight::Absolute(Pixels(label_style.line_height_px)))
+        .font(ui.font_of(label_style))
        .color(ink);

    let mut row = Row::new().align_y(Alignment::Center);
@@ -0,0 +1,208 @@
+//! FAB 四态（规格卡 `FAB / SMALL - DEFAULT - MEDIUM - EXTENDED`）。
+//!
+//! ## 规格卡原值（`[spec]` = 图上的坐标/字号，几何全部来自 [`FabSize`] 的令牌访问器）
+//!
+//! | 档 | 尺寸 | 圆角 | 图标 | 标签 | 规格卡依据 |
+//! |---|---|---|---|---|---|
+//! | Small | 40×40 | 12（`Medium`） | 20 | — | `+` 徽章式小 FAB |
+//! | Default | 56×56 | 16（`Large`） | 26 | — | M3 默认 FAB |
+//! | Medium | 80×80 | 20（`LargeIncreased`） | 34 | — | 中大档 |
+//! | Extended | 160×56（最小宽） | 16（`Large`） | 24 | 15 | `+ New`：起始内距 28、图标↔标签 8 |
+//!
+//! ## 配色：`PrimaryContainer` / `OnPrimaryContainer`
+//!
+//! 规格卡上四颗 FAB 都是**淡绿底 + 深绿字形**，M3 的对应角色正是 `primary-container` /
+//! `on-primary-container`（`boards/ink.rs` 的 `[spec]` 行注释也这么标：`FAB 底` / `FAB 图标`）。
+//! 所以这里不引入新角色，也不画阴影——规格卡上是纯色块，M3 的 FAB 高程由容器色表达。
+//!
+//! 色值不写在这份文档里：`tests/no_hardcoded_tokens.rs` 会扫 `src/**` 的十六进制色值，
+//! 要核对数字请看 `boards/ink.rs` 的 `ANCHORS` 表（那是唯一真源）。
+//!
+//! ## 为什么单独一个文件
+//!
+//! 按钮家族（五式 × 五态 × 五档）已经在 `buttons/mod.rs` + `assemble.rs` 里贴着 400 行；FAB 的
+//! 几何与按钮**不共享**（圆角不是半高、图标随档放大、扩展态有自己的内距），硬塞进去只会让两边
+//! 的读取路径都变长。共享的只有 `interaction` 的状态层与图标烘焙工具。
+
+use iced::widget::{button, container, row, text};
+use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow};
+
+use unlucky_design::color::Role;
+use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::FabSize;
+use unlucky_design::typography::{TypeRole, TypeStyle, Weight};
+
+use crate::icons;
+use crate::theme::Ui;
+
+use super::super::interaction::{self, Interaction};
+use super::super::layout;
+
+/// 扩展态右侧内距（px）。规格卡只量到起始 28（`FabSize::pad_start_px`），右侧没有量；
+/// 取同值 **28** 让「图标 + 标签」在 160 宽里左右对称（`[估]`，与起始同源的唯一对称解）。
+pub const EXTENDED_PAD_END: f32 = 28.0;
+
+/// 一颗 FAB：图标必有，标签只有扩展态有；`on_press = None` 即禁用。
+#[derive(Debug, Clone)]
+pub struct Fab<'a, M> {
+    icon: IconKind,
+    label: Option<&'a str>,
+    size: FabSize,
+    on_press: Option<M>,
+    state: Option<Interaction>,
+}
+
+impl<'a, M> Fab<'a, M> {
+    /// 标准 FAB（默认档 = 56）。
+    pub fn new(icon: IconKind, on_press: M) -> Self {
+        Self {
+            icon,
+            label: None,
+            size: FabSize::Default,
+            on_press: Some(on_press),
+            state: None,
+        }
+    }
+
+    /// 扩展态（药丸 + 图标 + 标签）。`label` 文案由调用方给（组件不碰 i18n）。
+    pub fn extended(icon: IconKind, label: &'a str, on_press: M) -> Self {
+        Self {
+            label: Some(label),
+            size: FabSize::Extended,
+            ..Self::new(icon, on_press)
+        }
+    }
+
+    /// 换档（Small / Default / Medium / Extended）。
+    pub fn size(mut self, size: FabSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// 强制视觉态（gallery 取证用；运行期不要调）。
+    pub fn state(mut self, state: Interaction) -> Self {
+        self.state = Some(state);
+        self
+    }
+}
+
+/// 画一颗 FAB。
+pub fn fab<'a, M: Clone + 'a>(ui: &'a Ui, spec: Fab<'a, M>) -> Element<'a, M> {
+    let size = spec.size;
+    let forced = spec.state.or(if spec.on_press.is_none() {
+        Some(Interaction::Disabled)
+    } else {
+        None
+    });
+    let ink = match forced {
+        // 禁用：38% 的内容色叠在容器上（与按钮族的容器档同一口径）
+        Some(Interaction::Disabled) => {
+            interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
+        }
+        _ => ui.color(Role::OnPrimaryContainer),
+    };
+
+    let glyph = layout::fixed(
+        size.icon_px(),
+        size.icon_px(),
+        icons::view_at::<M>(spec.icon, ink, size.icon_px()),
+    );
+
+    let content: Element<'a, M> = match spec.label {
+        // 扩展态：图标 + 标签（起始内距 28、间距 8，规格卡实测值）
+        Some(label) => {
+            let label_style = TypeStyle {
+                weight: Weight::Medium,
+                ..TypeRole::BodyMedium.style()
+            };
+            let label_px = size.label_px();
+            row![
+                glyph,
+                text(label)
+                    .size(label_px)
+                    .font(ui.font_of(TypeStyle {
+                        size_px: label_px,
+                        ..label_style
+                    }))
+                    .color(ink),
+            ]
+            .spacing(size.gap_px())
+            .align_y(Alignment::Center)
+            .padding(Padding {
+                top: 0.0,
+                right: EXTENDED_PAD_END,
+                bottom: 0.0,
+                left: size.pad_start_px(),
+            })
+            .into()
+        }
+        None => container(glyph)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .align_x(Alignment::Center)
+            .align_y(Alignment::Center)
+            .into(),
+    };
+
+    let shape = size.shape();
+    let radius = size.radius_px();
+    let style = move |_theme: &iced::Theme, status: button::Status| {
+        let state = forced.unwrap_or_else(|| Interaction::from_status(status));
+        let background = match state.layer() {
+            // 状态层叠在容器色上（与按钮族同一条 `overlay_color` 口径）
+            Some(_) => interaction::overlay_color(
+                ui,
+                state,
+                Role::OnPrimaryContainer,
+                Role::PrimaryContainer,
+            )
+            .or(Some(ui.color(Role::PrimaryContainer))),
+            None => Some(ui.color(Role::PrimaryContainer)),
+        };
+        let text_color = if state.is_disabled() {
+            interaction::disabled_button_content(ui, Role::OnPrimaryContainer, true)
+        } else {
+            ui.color(Role::OnPrimaryContainer)
+        };
+
+        button::Style {
+            background: background.map(Background::Color),
+            text_color,
+            border: Border {
+                radius: iced::border::Radius::new(radius),
+                ..Border::default()
+            },
+            // 规格卡不画阴影；M3 的 FAB 高程靠容器色（rubric §7 的「L0/L1 不用阴影」同源）
+            shadow: Shadow::default(),
+            snap: true,
+        }
+    };
+
+    // 四档的宽都由令牌给（方态是边长、扩展态是**最小**宽 160）。
+    //
+    // ⚠️ iced 0.14 的 `Length` 只有 `Fill/FillPortion/Shrink/Fixed`，**没有 Min**（本仓 G15 / G17-d
+    // 已登记同一堵墙），所以「最小宽随标签撑开」在这里退化成**固定宽**：标签比 160 内距容得下的
+    // 更长时会被裁，短时也不会缩。登记为偏离（见 `FabSize::width_px` 的文档）；真要 Min 语义得等
+    // iced 给 `Length::Min`，或在组件里先量文本再算宽——那要引字体度量，不在本轮。
+    let width = Length::Fixed(size.width_px());
+
+    let element = button(content)
+        .width(width)
+        .height(Length::Fixed(size.height_px()))
+        .padding(Padding::default())
+        .style(style);
+
+    debug_assert!(radius > 0.0, "FAB 圆角必须来自 ShapeScale（{shape:?}）");
+    debug_assert!(
+        matches!(size, FabSize::Extended) || size.pad_start_px() == 0.0,
+        "只有扩展态有起始内距"
+    );
+
+    match spec.on_press {
+        Some(message) => element.on_press(message).into(),
+        None => element.into(),
+    }
+}
+
+#[cfg(test)]
+mod tests;
@@ -0,0 +1,54 @@
+//! FAB 的几何断言（四档尺寸/圆角/图标/内距，全部对着规格卡原值）。
+//!
+//! 抓得住：档位与规格卡错位（例如把 Default 写成 48）、圆角被写成半高、扩展态内距悄悄改成 M3 的 16。
+//! 抓不住：配色与状态层（那走 `interaction` 的既有测试）、以及图上好不好看（D30）。
+
+use unlucky_design::inkcat::size::FabSize;
+
+#[test]
+fn the_four_states_are_the_spec_sizes() {
+    for (size, width, height, radius) in [
+        (FabSize::Small, 40.0, 40.0, 12.0),
+        (FabSize::Default, 56.0, 56.0, 16.0),
+        (FabSize::Medium, 80.0, 80.0, 20.0),
+        (FabSize::Extended, 160.0, 56.0, 16.0),
+    ] {
+        assert_eq!(size.width_px(), width, "{size:?} 宽");
+        assert_eq!(size.height_px(), height, "{size:?} 高");
+        assert_eq!(size.radius_px(), radius, "{size:?} 圆角");
+    }
+    assert_eq!(FabSize::ALL.len(), 4);
+}
+
+#[test]
+fn only_the_extended_state_carries_a_label_and_its_inset() {
+    for size in [FabSize::Small, FabSize::Default, FabSize::Medium] {
+        assert_eq!(size.label_px(), 0.0, "{size:?} 不该有标签");
+        assert_eq!(size.pad_start_px(), 0.0);
+    }
+    assert_eq!(FabSize::Extended.label_px(), 15.0);
+    assert_eq!(FabSize::Extended.pad_start_px(), 28.0);
+    assert_eq!(FabSize::Extended.gap_px(), 8.0);
+}
+
+/// 图标随档放大（20 / 26 / 34），扩展态回到 24（它与标签同行，跟着文字尺度走）。
+#[test]
+fn the_glyph_grows_with_the_smaller_states() {
+    assert!(FabSize::Small.icon_px() < FabSize::Default.icon_px());
+    assert!(FabSize::Default.icon_px() < FabSize::Medium.icon_px());
+    assert_eq!(FabSize::Extended.icon_px(), 24.0);
+}
+
+/// 扩展态右内距是常量（不是散在 `Padding` 里的字面量 28），且与起始内距对称。
+#[test]
+fn the_extended_pad_end_is_a_named_constant() {
+    use super::super::fab::EXTENDED_PAD_END;
+    use unlucky_design::inkcat::size::FabSize;
+
+    assert_eq!(EXTENDED_PAD_END, 28.0);
+    assert_eq!(
+        EXTENDED_PAD_END,
+        FabSize::Extended.pad_start_px(),
+        "左右对称：规格卡只量到起始 28，右侧取同值"
+    );
+}
@@ -25,6 +25,7 @@
 use iced::Padding;

 use unlucky_design::icons::IconSize;
+use unlucky_design::inkcat::size::ControlSize;
 use unlucky_design::spacing::Space;

 use crate::theme::{Ui, STROKE_PX};
@@ -44,29 +45,50 @@ pub struct Geometry {
    pub gap: f32,
    /// 描边宽度；`0` = 该式无描边。
    pub stroke: f32,
+    /// 尺寸档（决定高、圆角折算边、内距与标签字级）。
+    pub size: ControlSize,
 }

 impl Geometry {
-    /// 按变体 + 有没有前置图标求值（带图标时左内边距收到 16，右仍 24）。
+    /// 按变体 + 有没有前置图标求值（默认 **S 档 = 40 高**，产品页用的就是这一档）。
+    ///
+    /// `#[cfg(test)]`：产品路径一律走 [`Geometry::sized`]（`assemble` 里带上了尺寸档），
+    /// 这里只给单测一个「S 档」的便捷入口，留成产品 API 只会让 `dead_code` 响。
+    #[cfg(test)]
    pub fn of(ui: &Ui, variant: Variant, leading_icon: bool) -> Self {
+        Self::sized(ui, variant, leading_icon, ControlSize::S)
+    }
+
+    /// 按尺寸档求值（规格卡 `BUTTONS / XS - XL`）。
+    ///
+    /// 内距取 [`ControlSize::pad_x`]（规格卡没写内距，那是 `[估]` 的「半高向下取 4 栅格、封顶 48」
+    /// 推导值）；带前置图标时左侧再收 **4**（`Space::X1`）——药丸左半圆里图标要离弧远一点，
+    /// 与 M3 的「带图标左内距更小」是同一条观感规则。S 档因此是 **20 / 16 / 20**，
+    /// 而 M3 官方是 24 / 16 / 24：差 4，登记在 M229 报告里（规格卡没给内距，我们按它自己的
+    /// 半高规则推，而不是回到官方值——否则五档里只有 S 一种内距口径）。
+    pub fn sized(ui: &Ui, variant: Variant, leading_icon: bool, size: ControlSize) -> Self {
        let (_, _, border) = variant.roles();
+        let pad = size.pad_x();
        let start = if leading_icon {
-            ui.space(Space::X4)
+            pad - ui.space(Space::X1)
        } else {
-            ui.space(Space::X6)
+            pad
        };

        Self {
-            height: ui.metrics().control_height,
+            height: size.height_px(),
            padding: Padding {
                top: 0.0,
-                right: ui.space(Space::X6),
+                right: pad,
                bottom: 0.0,
                left: start,
            },
+            // 图标盒固定 18（`IconSize::Button`）：规格卡五档按钮的图标都没单独写字号，
+            // 档位只放大容器与标签，不放大图标——那是按钮，不是 FAB。
            icon: IconSize::Button.px(),
            gap: ui.space(Space::X2),
            stroke: if border.is_some() { STROKE_PX } else { 0.0 },
+            size,
        }
    }
 }
@@ -47,6 +47,7 @@ use unlucky_design::color::Role;
 use unlucky_design::component_map::Component;
 use unlucky_design::elevation::Elevation;
 use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::ControlSize;
 use unlucky_design::shape::ShapeScale;

 use crate::icons;
@@ -56,8 +57,10 @@ use super::interaction::Interaction;
 use super::layout;

 mod assemble;
+mod fab;
 mod geometry;

+pub use fab::{fab, Fab};
 pub use geometry::{Geometry, IconGeometry};

 use assemble::{assemble, style_closure, StyleSpec};
@@ -160,35 +163,47 @@ impl Variant {
    }
 }

-/// IconButton 的三种容器变体（12b §2.5）。
+/// IconButton 的**四式**（规格卡 `ICON BUTTONS / FILLED - TONAL - OUTLINED - PLAIN`）。
+///
+/// 规格卡画了四颗：实心 / 色调 / 描边 / 纯图标。12b §2.5 只有前三式（Standard / Filled / Tonal），
+/// M229 按规格卡把 Standard 拆成 **Plain**（纯图标）与 **Outlined**（1px 描边圆圈），
+/// `Standard` 这个名字保留为 `Plain` 的别名语义，避免既有调用点全改。
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum IconVariant {
-    /// 标准：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
-    Standard,
+    /// 纯图标（规格卡 `PLAIN`）：容器透明、图标 `OnSurfaceVariant`（各态图标色不变，12b 2.4）。
+    Plain,
    /// 实心：`Primary` + `OnPrimary`。
    Filled,
    /// Tonal：`SecondaryContainer` + `OnSecondaryContainer`。
    Tonal,
+    /// 描边：透明容器 + 1px `Outline`（规格卡第三颗，M229 新增）。
+    Outlined,
 }

 impl IconVariant {
-    /// 三式全序（gallery 顺序）。
-    pub const ALL: [IconVariant; 3] = [
-        IconVariant::Standard,
+    /// 旧名字的别名：`Standard` = [`IconVariant::Plain`]（既有调用点不必改语义）。
+    #[allow(non_upper_case_globals)]
+    pub const Standard: IconVariant = IconVariant::Plain;
+
+    /// 四式全序（gallery 顺序 = 规格卡从左到右）。
+    pub const ALL: [IconVariant; 4] = [
        IconVariant::Filled,
        IconVariant::Tonal,
+        IconVariant::Outlined,
+        IconVariant::Plain,
    ];

    /// 稳定名字。
    pub const fn name(self) -> &'static str {
        match self {
-            IconVariant::Standard => "standard",
+            IconVariant::Plain => "plain",
            IconVariant::Filled => "filled",
            IconVariant::Tonal => "tonal",
+            IconVariant::Outlined => "outlined",
        }
    }

-    /// **禁用态图标色**：三式都是 `OnSurface` @0.38 —— A1
+    /// **禁用态图标色**：四式都是 `OnSurface` @0.38 —— A1
    /// （`StandardIconButtonTokens.DisabledColor` / `FilledIconButtonTokens.DisabledColor`）。
    pub(crate) const fn disabled_content(self) -> Role {
        Role::OnSurface
@@ -197,13 +212,14 @@ impl IconVariant {
    /// 色彩角色三元组（同 [`Variant::roles`] 的口径）。
    pub(crate) const fn roles(self) -> (Option<Role>, Role, Option<Role>) {
        match self {
-            IconVariant::Standard => (None, Role::OnSurfaceVariant, None),
+            IconVariant::Plain => (None, Role::OnSurfaceVariant, None),
            IconVariant::Filled => (Some(Role::Primary), Role::OnPrimary, None),
            IconVariant::Tonal => (
                Some(Role::SecondaryContainer),
                Role::OnSecondaryContainer,
                None,
            ),
+            IconVariant::Outlined => (None, Role::OnSurfaceVariant, Some(Role::Outline)),
        }
    }
 }
@@ -220,6 +236,8 @@ pub struct Button<'a, M> {
    leading: Option<IconKind>,
    trailing: Option<IconKind>,
    state: Option<Interaction>,
+    /// 尺寸档（规格卡 `BUTTONS / XS - XL`）。产品默认 **S（40 高）**，与 M3 `control_height` 同值。
+    size: ControlSize,
 }

 impl<'a, M> Button<'a, M> {
@@ -231,6 +249,7 @@ impl<'a, M> Button<'a, M> {
            leading: None,
            trailing: None,
            state: None,
+            size: ControlSize::S,
        }
    }

@@ -242,9 +261,19 @@ impl<'a, M> Button<'a, M> {
            leading: None,
            trailing: None,
            state: None,
+            size: ControlSize::S,
        }
    }

+    /// 换尺寸档（`XS 32 / S 40 / M 56 / L 96 / XL 136`，圆角一律药丸）。
+    ///
+    /// 产品页只用 **S**（= M3 `control_height` 40）；M / L / XL 是规格卡的梯子档，给
+    /// 空态主行动与展示型入口留着，`--screen=gallery` 的矩阵会把五档一起拍出来。
+    pub fn size(mut self, size: ControlSize) -> Self {
+        self.size = size;
+        self
+    }
+
    /// 前置图标（12b 1.4：带图标时左内边距收到 16）。
    pub fn leading(mut self, kind: IconKind) -> Self {
        self.leading = Some(kind);
@@ -289,6 +318,40 @@ pub fn text<'a, M: Clone + 'a>(ui: &'a Ui, button: Button<'a, M>) -> Element<'a,
    assemble(ui, Variant::Text, button)
 }

+/// 图标按钮的描边宽度：**有描边角色就有那一圈，没有就是 0**。
+pub(crate) fn icon_stroke(variant: IconVariant) -> f32 {
+    if variant.roles().2.is_some() {
+        crate::theme::STROKE_PX
+    } else {
+        0.0
+    }
+}
+
+/// 图标按钮的**样式描述**（从 `icon()` 抽出来，好让它能被单测直接钉住）。
+///
+/// 为什么抽：`Style` 闭包不可内省，`icon()` 返回 `Element` 也看不进去——复审把
+/// `StyleSpec.stroke` 写死成 `0.0` 时，`icon_stroke()` 的纯函数测试照样绿（它测的是函数，
+/// 不是**接线**）。现在「角色 → 填充/内容/描边」这件事在 `icon_style_spec` 里一次成型，
+/// 单测断言的就是 `icon()` 真正塞进 `style_closure` 的那个结构体。
+pub(crate) fn icon_style_spec(
+    variant: IconVariant,
+    side: f32,
+    forced: Option<Interaction>,
+) -> StyleSpec {
+    let (fill, content, border) = variant.roles();
+    StyleSpec {
+        fill,
+        content,
+        border,
+        // 方形图标按钮同样是 full 圆角（40 → 20），档位取自组件表
+        shape: Component::IconButton.spec().shape,
+        // M229 复审 P1-1：这里曾硬编码 `0.0`，于是 `Outlined` 与 `Plain` 逐像素相同。
+        stroke: icon_stroke(variant),
+        radius_side: side,
+        forced,
+    }
+}
+
 /// IconButton（standard / filled / tonal）：40×40、图标 24、命中区 48。
 ///
 /// **图标语汇纪律（视觉 reviewer P2-3）**：同一个控件里**不混用**填充字形（`IconPaint::Fill`，
@@ -305,7 +368,7 @@ pub fn icon<'a, M: Clone + 'a>(
    state: Option<Interaction>,
 ) -> Element<'a, M> {
    let geometry = IconGeometry::of(ui);
-    let (fill, content, border) = variant.roles();
+    let (fill, content, _) = variant.roles();
    let forced = state.or(if on_press.is_some() {
        None
    } else {
@@ -321,19 +384,7 @@ pub fn icon<'a, M: Clone + 'a>(
    let icon_box =
        layout::centered_fixed(geometry.side, geometry.side, icons::view::<M>(kind, glyph));

-    let style = style_closure(
-        ui,
-        StyleSpec {
-            fill,
-            content,
-            border,
-            // 方形图标按钮同样是 full 圆角（40 → 20），档位取自组件表
-            shape: Component::IconButton.spec().shape,
-            stroke: 0.0,
-            radius_side: geometry.side,
-            forced,
-        },
-    );
+    let style = style_closure(ui, icon_style_spec(variant, geometry.side, forced));

    let element = button(icon_box)
        .width(Length::Fixed(geometry.side))
@@ -69,16 +69,20 @@ fn geometry_matches_the_reference_values() {
        20.0,
        "12b 1.2 full 圆角 = 高/2"
    );
-    assert_eq!(geometry.padding.left, 24.0, "12b 1.3 左 24");
-    assert_eq!(geometry.padding.right, 24.0, "12b 1.3 右 24");
+    // M229：内距取规格卡的 `ControlSize::pad_x`（S 档 = 20），不再是 12b 的 24。
+    assert_eq!(geometry.padding.left, 20.0, "S 档 pad_x 20");
+    assert_eq!(geometry.padding.right, 20.0, "S 档 pad_x 20");
    assert_eq!(geometry.padding.top, 0.0);
    assert_eq!(geometry.gap, 8.0, "12b 1.6 图标↔文字 8");
    assert_eq!(geometry.gap, ui.space(Space::X2));
    assert_eq!(geometry.stroke, 0.0, "实心按钮无描边");

    let with_icon = Geometry::of(&ui, Variant::Filled, true);
-    assert_eq!(with_icon.padding.left, 16.0, "12b 1.4 带图标左内边距 16");
-    assert_eq!(with_icon.padding.right, 24.0, "带图标右内边距不动");
+    assert_eq!(
+        with_icon.padding.left, 16.0,
+        "带图标左侧再收 4（20 − 4）：与 12b 1.4 的 16 恰好同值"
+    );
+    assert_eq!(with_icon.padding.right, 20.0, "带图标右内边距不动");

    let outlined = Geometry::of(&ui, Variant::Outlined, false);
    assert_eq!(outlined.stroke, STROKE_PX, "rubric G7 全站 1px");
@@ -118,6 +122,8 @@ fn icon_button_geometry_matches_the_reference() {
    );
 }

+mod icon;
+
 /// 视觉 reviewer P2-3：同一控件里不许混用填充字形与描边字形（线宽语汇会打架）。
 ///
 /// gallery 的样例图标（前置/后置）必须同为 `IconPaint::Stroke`；允许实心字形，但只能作为
@@ -0,0 +1,53 @@
+//! 图标按钮的单测（M229 复审 P1-1 从 `buttons/tests.rs` 拆出，守 400 行硬线）。
+//!
+//! 拆出来的只有「四式图标按钮的描边」这一组：`icon()` 曾经把 `StyleSpec.stroke` 写死 `0.0`，
+//! 于是 `Outlined` 与 `Plain` 逐像素相同——判据在这里，渲染级的那一半在 `gallery/probe/rows.rs`。
+
+use super::*;
+
+/// **M229 复审 P1-1 的回归门**：四种图标按钮里**只有 `Outlined` 有描边**。
+///
+/// 抓得住：`icon()` 里把 `stroke` 写死成 0（那样 Outlined 与 Plain 逐像素相同——正是复审量到的现场）。
+/// 抓不住：描边颜色对不对（那是 `IconVariant::roles` 的事，上面已有变体表测试）。
+///
+/// 渲染级的第二道在 `components/gallery/probe.rs`（`buttons` 段的 sheet 上数 Outlined 行的环像素、
+/// 并断言 Plain 行没有环），这一条是纯函数的、不依赖出图。
+#[test]
+fn only_the_outlined_icon_variant_draws_a_ring() {
+    use super::super::{icon_stroke, icon_style_spec};
+
+    assert_eq!(
+        icon_stroke(IconVariant::Outlined),
+        crate::theme::STROKE_PX,
+        "Outlined 必须画 1px 环（否则与 Plain 逐像素相同）"
+    );
+    assert_eq!(
+        icon_stroke(IconVariant::Outlined),
+        1.0,
+        "全站描边 1px（rubric G7）"
+    );
+    for plain in [IconVariant::Plain, IconVariant::Filled, IconVariant::Tonal] {
+        assert_eq!(icon_stroke(plain), 0.0, "{plain:?} 不该有描边");
+    }
+    // 与角色表同源：有描边角色 ⇔ 有环。
+    for variant in IconVariant::ALL {
+        assert_eq!(
+            icon_stroke(variant) > 0.0,
+            variant.roles().2.is_some(),
+            "{variant:?} 的描边与角色表不一致"
+        );
+        // **接线断言**：`icon()` 真正塞进 `style_closure` 的那个结构体（`icon_style_spec`）。
+        // 只测 `icon_stroke()` 抓不住「调用点写死 0」——第一版就是这样漏的（变异测试证明过）。
+        let spec = icon_style_spec(variant, 40.0, None);
+        assert_eq!(
+            spec.stroke,
+            icon_stroke(variant),
+            "{variant:?}：icon() 用的描边宽度与角色表不一致（调用点被写死了？）"
+        );
+        assert_eq!(
+            spec.border.is_some(),
+            icon_stroke(variant) > 0.0,
+            "{variant:?}：描边角色与线宽必须同生同灭"
+        );
+    }
+}
@@ -21,7 +21,7 @@ use iced::widget::{button, text};
 use iced::{Background, Border, Element, Length, Padding, Shadow};

 use unlucky_design::color::state::DISABLED_CONTENT_ALPHA;
-use unlucky_design::color::{Role, Scheme};
+use unlucky_design::color::Role;
 use unlucky_design::component_map::Component;
 use unlucky_design::icons::IconKind;
 use unlucky_design::spacing::Space;
@@ -43,7 +43,8 @@ fn content_color(ui: &Ui, role: Role, container_role: Role, disabled: bool) -> i
    if !disabled {
        return ui.color(role);
    }
-    let scheme = Scheme::baseline(ui.flavor());
+    // 取 `Ui` 的当前方案（品牌板 / 取色方案），不重算 baseline（复审 F1）。
+    let scheme = ui.scheme();
    to_iced(
        scheme
            .get(Role::OnSurface)
@@ -38,7 +38,7 @@
 use iced::widget::{column, container, row, text, Space};
 use iced::{Alignment, Background, Border, Element, Length, Padding};

-use unlucky_design::color::{Role, Scheme};
+use unlucky_design::color::Role;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::typography::TypeRole;

@@ -128,9 +128,13 @@ impl<'a, M> Dialog<'a, M> {
    }
 }

-/// 遮罩色：`黑 @ SCRIM_ALPHA` 叠在 `MaterialLayer::Canvas` 上之后的**实色**（D27）。
+/// 遮罩色：`scrim @ SCRIM_ALPHA` 叠在 `MaterialLayer::Canvas` 上之后的**实色**（D27）。
+///
+/// 叠的底是 [`Ui::scheme`]（品牌色板 / 取色方案）：M229 之前这里按 `Scheme::baseline(flavor)`
+/// 重算，Ink 板上量到的是旧蓝中性底压出来的**偏蓝**遮罩；按品牌板合成才是中性绿黑
+/// （`scrim` 是 M3 定值纯黑，两板同值，差的是它下面的画布色）。
 pub fn scrim(ui: &Ui) -> iced::Color {
-    let scheme = Scheme::baseline(ui.flavor());
+    let scheme = ui.scheme();
    let canvas = scheme.get(MaterialLayer::Canvas.surface_role());
    to_iced(scheme.scrim().over(canvas))
 }
@@ -8,8 +8,8 @@
 //! | 12.2 | 线性颜色 | 激活 `Primary`、轨道 `SecondaryContainer` | 组件层取角色 |
 //! | 12.3 | 环形直径 / 厚度 / 环↔轨间隙 | **40 / 4 / 4** | [`CircularGeometry`] |
 //! | 12.4 | 不定态节奏 | 线性 **1750ms** 双段；环形 **6000ms**（弧长 0.1→0.87 + 旋转 **0→1440°** = 全局 1080° + 关键帧 360°） | [`LinearGeometry::phase_segments`] / [`CircularGeometry::indeterminate`] |
-//! | 14.1 | Snackbar 圆角 | **4**（`CornerExtraSmall`） | `Component::Snackbar.spec().shape` |
-//! | 14.3 | 单行 / 双行高 | **48 / 68** | `panel::SnackbarGeometry::height` |
+//! | 14.1 | Snackbar 圆角 | 规格卡 **16**（`inkcat::metrics::SNACKBAR`；官方 `CornerExtraSmall` 是 4，M229 换肤按规格卡） | `panel::SnackbarGeometry::radius` |
+//! | 14.3 | 单行 / 双行高 | 规格卡 **52** / **72**（+20；官方 48/68） | `panel::SnackbarGeometry::height_for` |
 //! | 14.4 | 文本水平内距 / 垂直内距 | **16** / **6** | `Space::X4` / `panel::SnackbarGeometry::pad_v` |
 //! | 14.4b | 外边距（距窗口边） | **12**（`[规格]`：AAR 里**没有**这个常数，见 G17-c） | `panel::SnackbarGeometry::margin` |
 //! | 14.x | 宽度上限 | **600**（`SnackbarKt.ContainerMaxWidth`） | `panel::SnackbarGeometry::max_width` |
@@ -4,6 +4,7 @@
 //! （宽高/内距/圆角）。合在一个文件里会顶到 400 行红线（AGENTS.md §3-1）。

 use unlucky_design::component_map::Component;
+use unlucky_design::inkcat::metrics as inkcat;
 use unlucky_design::spacing::Space;

 use crate::theme::Ui;
@@ -33,18 +34,24 @@ pub struct SnackbarGeometry {

 impl SnackbarGeometry {
    /// 从令牌求值。
+    ///
+    /// M229 换肤把**高与圆角**改成规格卡口径（`inkcat::metrics::SNACKBAR`：340×**52**、rx=**16**）：
+    /// 官方 `SnackbarTokens` 是 48 高 + `CornerExtraSmall(4)`，规格卡画成 52/16 —— M228 已把这条
+    /// 差异登记为「换肤时取 `SNACKBAR`」。双行高仍按官方「每多一行 +20」推成 **72**（52 + 20），
+    /// 与单行同 delta；宽上限 600 与边距 12 不动（它们不在规格卡上）。
    pub fn of(ui: &Ui) -> Self {
-        let single_height = 48.0;
+        let spec = inkcat::SNACKBAR;
+        let single_height = spec.height;
        Self {
            min_width: 344.0,
            max_width: 600.0,
            single_height,
-            two_height: 68.0,
+            two_height: single_height + 20.0,
            margin: ui.space(Space::X3),
            pad_h: ui.space(Space::X4),
            pad_v: 6.0,
            gap: ui.space(Space::X2),
-            radius: Component::Snackbar.spec().shape.radius_px(single_height),
+            radius: spec.radius_px(),
        }
    }

@@ -200,7 +200,7 @@ fn indeterminate_row(shot: &Shot, active: iced::Color, surface: iced::Color) ->

 /// §14：宽度上下限 + 单/双行高。
 fn check_snackbar(shot: &Shot, ui: &Ui) {
-    // 参考值写字面量（A1）：600 = SnackbarKt.ContainerMaxWidth，48/68 = SnackbarTokens。
+    // 参考值写字面量：600 = SnackbarKt.ContainerMaxWidth，52/72 = 规格卡（单行 52 + 每多一行 20）。
    let surface = ui.color(Role::Surface);
    let bar = ui.color(Role::InverseSurface);

@@ -242,12 +242,12 @@ fn check_snackbar(shot: &Shot, ui: &Ui) {
        "宿区 324 那格必须量到 300（组件没有 min-width，G17-d），实测 {widths:?}"
    );
    assert!(
-        heights.iter().any(|h| near(*h, 48)),
-        "14.3：单行高 48，实测高度集 {heights:?}"
+        heights.iter().any(|h| near(*h, 52)),
+        "规格卡：单行高 52，实测高度集 {heights:?}"
    );
    assert!(
-        heights.iter().any(|h| near(*h, 68)),
-        "14.3：双行高 68，实测高度集 {heights:?}"
+        heights.iter().any(|h| near(*h, 72)),
+        "双行高 72（52 + 20），实测高度集 {heights:?}"
    );

    // 14.6 动作色：`InversePrimary` 必须出现在提示条内（不是按钮家族的 OnSurfaceVariant）
@@ -4,9 +4,9 @@
 //!
 //! | # | 项 | 值 | 落点 |
 //! |---|---|---|---|
-//! | 14.1 | 圆角 | **4**（`CornerExtraSmall`） | `Component::Snackbar.spec().shape` |
+//! | 14.1 | 圆角 | **16**（规格卡 `rx=16`；官方 `CornerExtraSmall` 是 4，M229 换肤按规格卡） | `inkcat::metrics::SNACKBAR` |
 //! | 14.2 | 容器色 | **`InverseSurface`**（高程 L3 是设计口头径，见下「不画阴影」） | [`Role::InverseSurface`] |
-//! | 14.3 | 高 | 单行 **48** / 双行 **68** | [`SnackbarGeometry::height`] |
+//! | 14.3 | 高 | 单行 **52**（规格卡 340×52；官方 48）/ 双行 **72**（+20） | [`SnackbarGeometry::height_for`] |
 //! | 14.4 | 内距 | 水平 **16** / 垂直 **6** / 文本↔动作 **8** | `Space::X4` / 6 / `Space::X2` |
 //! | 14.6 | 颜色 | 文本 `InverseOnSurface`、动作 **`InversePrimary`**、图标 24 `InverseOnSurface` | 组件层取角色 |
 //! | — | 宽度上限 | **600**（`SnackbarKt.ContainerMaxWidth`） | `max_width` |
@@ -75,7 +75,7 @@ pub struct Snackbar<'a, M> {
 }

 impl<'a, M> Snackbar<'a, M> {
-    /// 单行提示条（高 48）。
+    /// 单行提示条（高 52，规格卡口径）。
    pub fn new(text: &'a str) -> Self {
        Self {
            text,
@@ -32,13 +32,18 @@ pub(super) fn ui(flavor: SchemeFlavor) -> Ui {

 // ---- §14 Snackbar -----------------------------------------------------------

-/// 14.3 / 14.1 / 宽度上限：48 / 68 / 4 / 600。
+/// 14.3 / 14.1 / 宽度上限：规格卡 52 / 72 / 16，上限 600。
 #[test]
 fn snackbar_heights_widths_and_radius_are_the_tokens() {
    let geometry = SnackbarGeometry::of(&ui(SchemeFlavor::Light));
-    assert_eq!(geometry.height_for(1), 48.0, "14.3 单行 48");
-    assert_eq!(geometry.height_for(2), 68.0, "14.3 双行 68");
-    assert_eq!(geometry.radius, 4.0, "14.1 圆角 4（CornerExtraSmall）");
+    // M229 换肤：高与圆角取规格卡（52 / 16），官方是 48 / `CornerExtraSmall(4)`。
+    assert_eq!(geometry.height_for(1), 52.0, "规格卡 340×52");
+    assert_eq!(
+        geometry.height_for(2),
+        72.0,
+        "双行 = 单行 + 20（同官方 delta）"
+    );
+    assert_eq!(geometry.radius, 16.0, "规格卡 rx=16（官方 4，登记差异）");
    assert_eq!(geometry.max_width, 600.0, "SnackbarKt.ContainerMaxWidth");
    assert_eq!(geometry.min_width, 344.0, "G17-d [估] 最小宽");
    assert!(geometry.min_width < geometry.max_width, "上下限必须有区间");
@@ -99,13 +104,26 @@ fn dialog_padding_and_action_gaps_are_the_tokens() {
 fn scrim_is_scrimalpha_precomposited_onto_the_canvas() {
    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
        let ui = ui(flavor);
-        let scheme = Scheme::baseline(flavor);
+        // 期望值按**品牌色板**（= `Ui` 注入的那一份）：M229 复审 F1 之前这里用的是
+        // `Scheme::baseline`，Ink 板上会得到偏蓝的遮罩（数值见 `DevDocs/artifacts/m229/README.md` §6）。
+        let scheme = unlucky_design::color::BrandBoard::for_flavor(flavor).scheme();
        let canvas = scheme.get(MaterialLayer::Canvas.surface_role());
        let expected = to_iced(scheme.scrim().over(canvas));
        assert_eq!(
            scrim(&ui),
            expected,
-            "{flavor:?}：scrim 必须逐位等于「黑@0.32 叠 canvas」"
+            "{flavor:?}：scrim 必须逐位等于「黑@0.32 叠 canvas（品牌板）」"
+        );
+        // F1 的回归门：不许回到 tone 派生的 baseline 上算。
+        let baseline = Scheme::baseline(flavor);
+        assert_ne!(
+            expected,
+            to_iced(
+                baseline
+                    .scrim()
+                    .over(baseline.get(MaterialLayer::Canvas.surface_role()))
+            ),
+            "{flavor:?}：遮罩退回了 baseline（Ink 下会偏蓝）"
        );
        assert_eq!(
            scrim(&ui).a,
@@ -9,13 +9,16 @@
 //!   elevated             |
 //!   outlined             |
 //!   text                 |
-//!   icon·standard        |  [ico]  |   ...
-//!   icon·filled          |
+//!   icon·filled          |  [ico]  |   ...
 //!   icon·tonal           |
+//!   icon·outlined        |      ← M229 第四式（1px 环；此前与 plain 逐像素相同）
+//!   icon·plain           |
 //! ```
 //!
-//! 40 个单元格共 5 列 × 8 行，一屏（1180×760）装不下，靠 `gallery/mod.rs` 的 scrollable 滚动；
-//! 截图取的是**整窗**，所以首屏能看到按钮家族的全部 5 行（图标行可能需要滚动，报告里会说明）。
+//! 45 个单元格共 5 列 × **9 行**（5 个文字变体 + **4 个图标变体**），一屏（1180×760）装不下，
+//! 靠 `gallery/mod.rs` 的 scrollable 滚动；截图取的是**整窗**，所以首屏能看到前 8 行左右
+//! （最下面一行可能要滚动）。行序 = `Variant::ALL` 之后 `IconVariant::ALL`，`probe/rows.rs`
+//! 的逐行表按同一顺序排。
 //!
 //! ## 为什么每格都强制状态
 //!
@@ -77,7 +80,7 @@ pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
        heading(
            ui,
            "buttons · filled / tonal / elevated / outlined / text + icon",
-            "12b §1/§2：高 40 · 圆角 full(20) · 内边距 24（带图标 16/24）· 图标 18 间距 8 · \
+            "规格卡 + 12b §1/§2：S 档高 40 · 圆角 full(20) · 内边距 20（带图标 16/20；M229 起按 ControlSize::pad_x）· 图标 18 间距 8 · \
             hover 8% / focus 10% / pressed 10% / disabled 容器 10% 内容 38%"
        ),
        rows,
@@ -73,7 +73,7 @@ pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
    let mut body = column![heading(
        ui,
        "feedback · progress / snackbar / dialog / empty state",
-        "12b §7/§12/§14/§15：Linear 厚 4 圆角 full · Circular 40/4 · Snackbar 48/68 上限宽 600 · \
+        "规格卡 + 12b §7/§12/§15：Linear 厚 4 圆角 full · Circular 40/4 · Snackbar 52/72 圆角 16 上限宽 600 · \
         Dialog R28 pad24 宽 480 · EmptyState 项目自定[估]（官方无此组件）"
    )]
    .spacing(ui.space(Space::X3));
@@ -270,7 +270,7 @@ fn snackbar_block<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
        wide,
        caption(
            ui,
-            "Snackbar · 双行 68 + action InversePrimary + 关闭键（动作强制 hover 态）"
+            "Snackbar · 双行 72（52+20）+ action InversePrimary + 关闭键（动作强制 hover 态）"
        ),
        two_lines,
        caption(
@@ -222,7 +222,7 @@ fn search_part<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
    column![
        note(
            ui,
-            "bar：高 56 · 圆角 full(28) · SurfaceContainerHigh · 图标可视边 16 = pad 12 + offset 4（M69 不变量）· \
+            "bar：高 56 · 圆角 full(28) · SurfaceContainerHighest（M229 r2 抬档：与 filled 字段同底）· 图标可视边 16 = pad 12 + offset 4（M69 不变量）· \
             聚焦 1px Secondary；view：docked，头部 56 + 1px Outline 分隔 + 结果区最小高 240"
        ),
        row![bars, view].spacing(ui.space(Space::X6)),
@@ -9,7 +9,7 @@
 //!
 //! ## 并行地基（后续四条线怎么加东西）
 //!
-//! 五个家族文件在下面 `mod` 里**全部预先声明**了，每个都有自己的 `section()`：
+//! 各家族文件在下面 `mod` 里**全部预先声明**了，每个都有自己的 `section()`：
 //!
 //! ```text
 //! gallery/buttons.rs     ← COMPBASE（本 mission）
@@ -38,17 +38,18 @@
 //!
 //! ## 段落过滤：环境变量 `ULL_GALLERY_SECTION`（M76 起）
 //!
-//! 五段拼成一列、外面套 `scrollable`，而截图只截**首屏** `1180×760`。段数一多，后面的家族
+//! **七段**（buttons / sizes / divider / selection / inputs / feedback / navigation）拼成一列、
+//! 外面套 `scrollable`，而截图只截**首屏** `1180×760`。段数一多，后面的家族
 //! 就落到折叠线以下（实测：selection 段从 y≈735 起，只剩标题一行）——那条线的
 //! 「渲染层像素断言」就没有一个像素可量。所以这里加一个**段落选择器**：
 //!
 //! ```text
-//! ULL_GALLERY_SECTION=all        # 默认：五段全渲染（行为与加开关之前逐像素一致）
+//! ULL_GALLERY_SECTION=all        # 默认：七段全渲染（行为与加开关之前逐像素一致）
 //! ULL_GALLERY_SECTION=buttons    # 只渲染 buttons 段
 //! ULL_GALLERY_SECTION=selection  # 只渲染 selection 段（本 mission 的取证与 probe 用它）
 //! ```
 //!
-//! 取值：`all` / `buttons` / `divider` / `selection` / `inputs` / `feedback` / `navigation`。
+//! 取值：`all` / `buttons` / `sizes` / `divider` / `selection` / `inputs` / `feedback` / `navigation`。
 //! 语义是「**不构建**没被选中的段」（不是构建后隐藏）：`column` 里根本不 push 它，
 //! 于是该家族的 `view` 一行都不跑。未识别的值**回落 `all`** 并在 stderr 打一行提示
 //! （静默回落会让人拿错图还以为拍的是那一段）。
@@ -87,6 +88,7 @@ mod probe;
 #[cfg(test)]
 mod scan;
 mod selection;
+mod sizes;

 /// 段落过滤的环境变量名（语义见模块文档「段落过滤」）。
 pub const SECTION_ENV: &str = "ULL_GALLERY_SECTION";
@@ -95,6 +97,7 @@ pub const SECTION_ENV: &str = "ULL_GALLERY_SECTION";
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 struct Sections {
    buttons: bool,
+    sizes: bool,
    divider: bool,
    selection: bool,
    inputs: bool,
@@ -103,9 +106,10 @@ struct Sections {
 }

 impl Sections {
-    /// 五段全渲染（默认）。
+    /// 七段全渲染（默认）。
    const ALL: Self = Self {
        buttons: true,
+        sizes: true,
        divider: true,
        selection: true,
        inputs: true,
@@ -117,6 +121,7 @@ impl Sections {
    fn only(name: &str) -> Option<Self> {
        let mut sections = Self {
            buttons: false,
+            sizes: false,
            divider: false,
            selection: false,
            inputs: false,
@@ -125,6 +130,7 @@ impl Sections {
        };
        match name {
            "buttons" => sections.buttons = true,
+            "sizes" => sections.sizes = true,
            "divider" => sections.divider = true,
            "selection" => sections.selection = true,
            "inputs" => sections.inputs = true,
@@ -150,7 +156,7 @@ impl Sections {
            return sections;
        }
        eprintln!(
-            "[gallery] {SECTION_ENV}={raw:?} 不是已知段（all|buttons|divider|selection|inputs|feedback|navigation），已回落 all"
+            "[gallery] {SECTION_ENV}={raw:?} 不是已知段（all|buttons|sizes|divider|selection|inputs|feedback|navigation），已回落 all"
        );
        Self::ALL
    }
@@ -160,6 +166,7 @@ impl Sections {
        let mut names = Vec::new();
        for (on, name) in [
            (self.buttons, "buttons"),
+            (self.sizes, "sizes"),
            (self.divider, "divider"),
            (self.selection, "selection"),
            (self.inputs, "inputs"),
@@ -215,8 +222,9 @@ pub fn view<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
            .font(ui.emphasized_font(TypeRole::TitleLarge))
            .color(ui.color(Role::OnSurface)),
        text(format!(
-            "M3 Expressive component base · flavor={} · 1180×760 @100% DPI · \
+            "M3 Expressive component base · board={} · flavor={} · 1180×760 @100% DPI · \
             focus 与 pressed 同为 10%（令牌口径，图上一样是对的）",
+            ui.board().name(),
            flavor_slug(ui)
        ))
        .size(page.size_px)
@@ -236,6 +244,9 @@ pub fn view<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
    if picked.buttons {
        sections = sections.push(buttons::section(ui));
    }
+    if picked.sizes {
+        sections = sections.push(sizes::section(ui));
+    }
    if picked.divider {
        sections = sections.push(divider_proof(ui));
    }
@@ -323,7 +334,7 @@ fn divider_proof<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {

 /// 一个家族小节的标题（`index.title`）+ 一行判据说明。
 ///
-/// 五个家族文件共用（`pub(super)`），保证五段的节奏一致——这也是 rubric D4
+/// 各段共用（`pub(super)`），保证七段的节奏一致——这也是 rubric D4
 /// 「一屏字号档 ≤4」的落点：小节只有 `TitleMedium` + `BodySmall` 两档。
 pub(crate) fn heading<'a>(ui: &'a Ui, title: &'a str, note: &'a str) -> Element<'a, DemoMessage> {
    let note_style = ui.style(TypeRole::BodySmall);
@@ -5,15 +5,28 @@
 //! CI 没有桌面，所以这里不自己开窗：先用 `--screen=gallery --screenshot` 出真窗截图，本测试读
 //! 那张 PNG 量几何、与令牌逐项比对。**没给图就跳过并大声说出来**（不静默通过）。
 //!
-//! 复现命令（在 worktree 根目录）：
+//! 复现命令（在 worktree 根目录；**必须同时给 `ULL_GALLERY_SECTION`**，只支持 `buttons` / `divider`）：
 //!
 //! ```text
-//! cargo build -p unlucky-app-iced --bin unlucky-launcher-iced
-//! ./target/debug/unlucky-launcher-iced --software-renderer --screen=gallery \
-//!   --screenshot target/m75/gallery-light.png --screenshot-theme=light
-//! ULL_GALLERY_SHOT=target/m75/gallery-light.png cargo test -p unlucky-app-iced gallery::probe
+//! EXE=${CARGO_TARGET_DIR:-target}/debug/unlucky-launcher-iced   # 本仓纪律：一树一 target
+//! OUT=${CARGO_TARGET_DIR:-target}/m229-probe && mkdir -p "$OUT"
+//!
+//! # ① 按钮矩阵（实心块 / 药丸 / 字形 / 逐行禁用色 / Outlined 环）
+//! ULL_GALLERY_SECTION=buttons $EXE --software-renderer --screen=gallery \
+//!   --screenshot "$OUT/buttons-light.png" --screenshot-theme=light
+//! ULL_GALLERY_SECTION=buttons ULL_GALLERY_SHOT="$OUT/buttons-light.png" \
+//!   cargo test -p unlucky-app-iced gallery::probe
+//!
+//! # ② 分隔线（`buttons` 段里没画线，必须单独出一张）
+//! ULL_GALLERY_SECTION=divider $EXE --software-renderer --screen=gallery \
+//!   --screenshot "$OUT/divider-light.png" --screenshot-theme=light
+//! ULL_GALLERY_SECTION=divider ULL_GALLERY_SHOT="$OUT/divider-light.png" \
+//!   cargo test -p unlucky-app-iced gallery::probe
 //! ```
 //!
+//! `all` **不支持**：gallery 整页比 1180×760 的视口高，分隔线段与按钮矩阵不可能同屏，而 sizes 段的
+//! 实心块又会被「按钮 40 高」的判据量到 —— 所以按段出图、按段断言，`all` 会被明确拒绝（见测试体）。
+//!
 //! 量什么（每条对一个已发生过的错误）：实心块高 **40**（12b 1.1）· 药丸顶行**左内缩 ≈14** ⇒ 圆角 full=20
 //! （12b 1.2，8 圆角会接近通栏）· IconButton **40×40**（12b 2.1）· 字形墨迹 **16~26**
 //! （Q9：24 盒被填满会到 40）· 分隔线 **1px**（22.1）· 禁用容器 **on-surface@10%**（按钮族）存在（12b 1.8）。
@@ -27,6 +40,8 @@ use crate::app::components::interaction;

 use super::scan::{matches, nearer, rgb, Shot};

+mod rows;
+
 const FAMILIES: Families = Families {
    text: "Segoe UI",
    display: "Segoe UI",
@@ -83,6 +98,10 @@ fn delta_ratio(pixel: [u8; 3], surface: [u8; 3], line: [u8; 3]) -> f32 {
 }

 /// `ULL_GALLERY_SHOT` → 截图路径（相对路径按**工作区根**解释：`cargo test` 的 cwd 是 crate 目录）。
+///
+/// 只把 `ULL_GALLERY_SHOT` 读成路径；**「这张图属于哪一段」由测试体开头那条 assert 管**
+/// （`buttons` / `divider` 之外一律失败），这里不做校验——图与判据的配对是测试的前提条件，
+/// 放在测试里读起来才连贯（复审 r3 P2-1：这段文档曾写「此处不满足就失败」，而 assert 早已搬走）。
 fn shot_path() -> Option<std::path::PathBuf> {
    let raw = std::env::var_os("ULL_GALLERY_SHOT")?;
    let path = std::path::PathBuf::from(raw);
@@ -120,6 +139,22 @@ fn gallery_geometry_matches_the_tokens() {
    };
    let ui = ui(flavor);

+    // 只认两种 sheet（`all` 与整页图都拒绝，理由见 [`shot_path`] 与模块文档）：
+    // `buttons` = 按钮矩阵的主判据；`divider` = 分隔线的两条判据（1px / 墨量覆盖率）。
+    let section = std::env::var("ULL_GALLERY_SECTION")
+        .unwrap_or_default()
+        .trim()
+        .to_ascii_lowercase();
+    assert!(
+        section == "buttons" || section == "divider",
+        "这份 probe 只支持 `ULL_GALLERY_SECTION=buttons`（按钮矩阵）或 `divider`（分隔线）；当前 {section:?}。`all` 不行：整页比视口高，分隔线段与按钮矩阵不可能同屏。"
+    );
+    // 分隔线那段是**独立出口**：`divider` 段的 sheet 里没有按钮矩阵，判据也不同。
+    if section == "divider" {
+        check_divider(&shot, &ui);
+        return;
+    }
+
    // ---- 12b 1.1 / 1.2：实心按钮 40 高、药丸圆角 20 ------------------------------
    let primary = shot.bbox_of(rgb(ui.color(Role::Primary)));
    assert!(
@@ -128,12 +163,27 @@ fn gallery_geometry_matches_the_tokens() {
        primary.len()
    );

+    // **只判「按钮矩阵那一段」**：矩阵区由「第一块文字按钮（宽 > 60、高 40）」的顶边起、往下 9 行
+    // + 8px。`buttons` 段的 sheet 里没有后续段，所以这条过滤是防御性的（`all` 现在被拒；将来若允许
+    // 拼接多段，它保证判据只落在矩阵上，不会被别段的 chip/卡片撞到）。
+    let matrix_top = primary
+        .iter()
+        .filter(|b| b.area() >= 800 && b.width() > 60 && (39..=41).contains(&b.height()))
+        .map(|b| b.top)
+        .min()
+        .expect("没找到文字按钮的实心块（矩阵不在画面里？）");
+    let matrix_bottom = matrix_top + rows::ROW_COUNT * rows::ROW_STEP + 8;
+
    let mut label_button = None;
    for bbox in &primary {
        // 字形（OnPrimary）会把实心块割出小碎片，只判「成块的」（40×40 = 1600）
        if bbox.area() < 800 {
            continue;
        }
+        // 矩阵之外（后续段）的实心块不在这条判据的量程里。
+        if bbox.top >= matrix_bottom {
+            continue;
+        }
        assert!(
            (39..=41).contains(&bbox.height()),
            "实心块高 {}（参考 40，12b 1.1）@ {:?}",
@@ -251,9 +301,66 @@ fn gallery_geometry_matches_the_tokens() {
    }
    assert!(measured_glyph, "没量到 IconButton 的字形");

-    // ---- 22.1：分隔线 1px（按「非底色的长横线」判，不按精确色：线被抗锯齿摊到两行）----
+    // ---- 12b 1.8 禁用态：容器 + **每一行**的内容色（A1 逐变体不同）----------------
+    //
+    // 上一版把两个 reviewer 都指出的重复块留在这里（`disabled_colors` 被调两次、
+    // `disabled_container` 被绑定两次），且只有一条「全图数墨迹」的护栏 —— 深色下阈值失效、
+    // 单行回退也抓不住。现在按矩阵的行逐条断言。
+    //
+    // **按钮族**：容器 10%（官方 `*ButtonTokens.DisabledContainerOpacity = 0.1f`）、内容 38%。
+    // M86 之前这里和 chip 共用同一个 12% 常量，所以断言与实现「一起错」、永远同源——拆族后才对得上。
+    let (disabled_container, _) = interaction::disabled_button_colors(&ui, Role::Surface);
+    assert!(
+        shot.bbox_of(rgb(disabled_container))
+            .iter()
+            .any(|b| b.width() > 60),
+        "没找到禁用态实心按钮（12b 1.8：容器 = on-surface@10%）"
+    );
+
+    // 禁用态与描边环是**按矩阵行**判的，逐行表与判据搬去了 `probe/rows.rs`（守 400 行硬线）。
+    rows::assert_matrix_rows(&shot, &ui, label_button.top, label_button.left);
+
+    // filled 禁用容器里不许出现满档 OnPrimary（旧实现是白字压在容器上 = 1.23:1）
+    let full_content = rgb(ui.color(Role::OnPrimary));
+    for bbox in shot.bbox_of(rgb(disabled_container)) {
+        if bbox.width() < 60 {
+            continue;
+        }
+        // 只扫**内带**：圆角外的页面底色与 OnPrimary 在容差内，贴边扫描会误报。
+        for y in (bbox.top + 12)..=(bbox.bottom - 12) {
+            for x in (bbox.left + 12)..=(bbox.right - 12) {
+                assert!(
+                    !matches(shot.at(x, y), full_content),
+                    "禁用容器内出现满档 OnPrimary @({x},{y})：禁用标签没降到 38%"
+                );
+            }
+        }
+    }
+
+    eprintln!(
+        "[probe] OK flavor={:?}：
+  Filled 药丸 {}×{}（参考 高 40 / 宽 ≥58）
+  顶行左内缩 {}（r=20 应 ≈14；8 圆角 ≈4；直角 0）
+  实心块 {} 个（含 40×40 IconButton）
+  禁用容器 (on-surface@10%，按钮族) 命中 · 逐行禁用内容断言 {} 行通过
+  字形墨迹 {}px（24 盒应 16~26）",
+        flavor,
+        label_button.width(),
+        true_height,
+        top_inset,
+        primary.len(),
+        rows::ROW_COUNT,
+        glyph_width
+    );
+}
+
+/// `ULL_GALLERY_SECTION=divider` 的两条判据：分隔线 2 条（各摊 1~2 行）与单条墨量覆盖率 ≈1.0。
+///
+/// 单独成函数：`divider` 段的 sheet 没有按钮矩阵，走不到主流程的按钮判据；而主流程也不需要
+/// 分隔线（`buttons` 段的 sheet 里根本没画线，断言只会误报）。
+fn check_divider(shot: &Shot, ui: &Ui) {
    let surface = rgb(ui.color(Role::Surface));
-    let mut runs = 0;
+    let mut runs = 0usize;
    for y in 0..shot.height {
        let mut longest = 0;
        let mut current = 0;
@@ -278,91 +385,10 @@ fn gallery_geometry_matches_the_tokens() {
    // 1.5dp 的线会到 ≈1.5，2dp 会到 ≈2.0 —— 这是「容忍 1.5 倍粗」的补丁。
    let full = rgb(ui.color(Role::OutlineVariant));
    // 屏上正好 2 条线（通栏 + 列表内缩），所以把总墨量除以 2 得到「单条线的覆盖率」
-    let coverage = line_coverage(&shot, surface, full) / 2.0;
+    let coverage = line_coverage(shot, surface, full) / 2.0;
    assert!(
        (0.8..=1.3).contains(&coverage),
        "单条分隔线墨量覆盖率应 ≈1.0（= 1dp），实测 {coverage:.2}（1.5dp 会到 ~1.5）"
    );
-
-    // ---- 12b 1.8 禁用态：容器 + **每一行**的内容色（A1 逐变体不同）----------------
-    //
-    // 上一版把两个 reviewer 都指出的重复块留在这里（`disabled_colors` 被调两次、
-    // `disabled_container` 被绑定两次），且只有一条「全图数墨迹」的护栏 —— 深色下阈值失效、
-    // 单行回退也抓不住。现在按矩阵的行逐条断言。
-    //
-    // **按钮族**：容器 10%（官方 `*ButtonTokens.DisabledContainerOpacity = 0.1f`）、内容 38%。
-    // M86 之前这里和 chip 共用同一个 12% 常量，所以断言与实现「一起错」、永远同源——拆族后才对得上。
-    let (disabled_container, _) = interaction::disabled_button_colors(&ui, Role::Surface);
-    assert!(
-        shot.bbox_of(rgb(disabled_container))
-            .iter()
-            .any(|b| b.width() > 60),
-        "没找到禁用态实心按钮（12b 1.8：容器 = on-surface@10%）"
-    );
-
-    // 矩阵行序（gallery/buttons.rs 的 Variant::ALL + IconVariant::ALL），行距 48 = 40 + 8
-    let row_step = 48usize;
-    let rows: [(usize, Role, bool, &str); 8] = [
-        (0, Role::OnSurfaceVariant, true, "filled"),
-        (1, Role::OnSurface, true, "tonal"), // A1：FilledTonal 是例外
-        (2, Role::OnSurfaceVariant, true, "elevated"),
-        (3, Role::OnSurfaceVariant, false, "outlined"),
-        (4, Role::OnSurfaceVariant, false, "text"),
-        (5, Role::OnSurface, false, "icon·standard"), // A1：IconButton 全是 OnSurface
-        (6, Role::OnSurface, false, "icon·filled"),
-        // 第 7 行（矩阵最后一行的 tonal IconButton）上一版漏了 —— reviewer 把它的禁用墨迹涂回
-        // 满档色时 probe 全绿。A1 同样是 OnSurface（`FilledTonalIconButtonTokens`）。
-        (7, Role::OnSurface, true, "icon·tonal"),
-    ];
-    let column_from = shot.width * 2 / 3; // 矩阵最右列 = disabled 列
-    for (index, role, on_container, name) in rows {
-        let y0 = label_button.top + index * row_step;
-        let y1 = y0 + 44;
-        // **与实现同源**：按钮族的内容色一律走 `disabled_button_content`（38% 叠在 10% 底上）。
-        // 这里若用面状控件族的 `disabled_content_over_role`（12% 底），断言的底就比实现宽一档，
-        // 差的 1/255 会让「容器对了内容错了」这类错逃过门控——M86 明确要防这个。
-        let ink = interaction::disabled_button_content(&ui, role, on_container);
-        let count = shot.count_in(rgb(ink), column_from, shot.width, y0, y1);
-        assert!(
-            count > 40,
-            "{name} 行的禁用内容（{role:?}@38%）在 disabled 列里只有 {count} px ——              说明这一行没走 A1 的禁用角色"
-        );
-    }
-
-    // filled 禁用容器里不许出现满档 OnPrimary（旧实现是白字压在容器上 = 1.23:1）
-    let full_content = rgb(ui.color(Role::OnPrimary));
-    for bbox in shot.bbox_of(rgb(disabled_container)) {
-        if bbox.width() < 60 {
-            continue;
-        }
-        // 只扫**内带**：圆角外的页面底色与 OnPrimary 在容差内，贴边扫描会误报。
-        for y in (bbox.top + 12)..=(bbox.bottom - 12) {
-            for x in (bbox.left + 12)..=(bbox.right - 12) {
-                assert!(
-                    !matches(shot.at(x, y), full_content),
-                    "禁用容器内出现满档 OnPrimary @({x},{y})：禁用标签没降到 38%"
-                );
-            }
-        }
-    }
-
-    eprintln!(
-        "[probe] OK flavor={:?}：
-  Filled 药丸 {}×{}（参考 高 40 / 宽 ≥58）
-  顶行左内缩 {}（r=20 应 ≈14；8 圆角 ≈4；直角 0）
-  实心块 {} 个（含 40×40 IconButton）
-  分隔线长行 {} 行（每条 1px）
-  禁用容器 (on-surface@10%，按钮族) 命中 · 逐行禁用内容断言 {} 行通过
-  分隔线墨量覆盖率 {:.2}（1dp 应 ≈1.0）
-  字形墨迹 {}px（24 盒应 16~26）",
-        flavor,
-        label_button.width(),
-        true_height,
-        top_inset,
-        primary.len(),
-        runs,
-        rows.len(),
-        coverage,
-        glyph_width
-    );
+    eprintln!("[probe] OK section=divider：分隔线 {runs} 行、单条覆盖率 {coverage:.2}");
 }
@@ -0,0 +1,91 @@
+//! 矩阵**逐行**判据：禁用态内容色（12b 1.8）× 9 行 + 图标按钮第四式（Outlined）的 1px 环。
+//!
+//! 从 `probe.rs` 纯搬移（M229 复审 P2：加第 9 行与环断言后 `probe.rs` 409 行，超 400 硬线）。
+//! 判据一行未改，只有入口从「行内代码」变成 [`assert_matrix_rows`]。
+
+use unlucky_design::color::Role;
+
+use super::super::scan::{rgb, Shot};
+use crate::app::components::interaction;
+use crate::theme::Ui;
+
+/// 矩阵行距（40 高按钮 + 8 间距）。
+pub(super) const ROW_STEP: usize = 48;
+/// 行内扫描高度（可见 40 + 上下各 2 的余量）。
+const ROW_HEIGHT: usize = 44;
+/// 矩阵行数（5 个文字变体 + 4 个图标变体）：probe 的汇总日志用它。
+pub(super) const ROW_COUNT: usize = 9;
+
+/// 逐行断言：①每一行的禁用内容色（A1 逐变体不同）②Outlined 图标行有环、Plain 行没有。
+pub(super) fn assert_matrix_rows(shot: &Shot, ui: &Ui, label_top: usize, label_left: usize) {
+    // 行序 = `gallery/buttons.rs` 先 `Variant::ALL`（5 行）再 `IconVariant::ALL`（**4 行**，M229 起
+    // outlined 是第四式）：共 **9 行**。`on_container` 必须与 `assemble::content_color` 一致
+    // ——图标按钮的 filled/tonal 有容器（`fill.is_some()`），outlined/plain 没有。
+    let rows: [(usize, Role, bool, &str); 9] = [
+        (0, Role::OnSurfaceVariant, true, "filled"),
+        (1, Role::OnSurface, true, "tonal"), // A1：FilledTonal 是例外
+        (2, Role::OnSurfaceVariant, true, "elevated"),
+        (3, Role::OnSurfaceVariant, false, "outlined"),
+        (4, Role::OnSurfaceVariant, false, "text"),
+        (5, Role::OnSurface, true, "icon·filled"), // A1：IconButton 全是 OnSurface
+        (6, Role::OnSurface, true, "icon·tonal"),
+        (7, Role::OnSurface, false, "icon·outlined"),
+        (8, Role::OnSurface, false, "icon·plain"),
+    ];
+    let column_from = shot.width * 2 / 3; // 矩阵最右列 = disabled 列
+    for (index, role, on_container, name) in rows {
+        let y0 = label_top + index * ROW_STEP;
+        let y1 = y0 + ROW_HEIGHT;
+        // **与实现同源**：按钮族的内容色一律走 `disabled_button_content`（38% 叠在 10% 底上）。
+        // 用面状控件族的 12% 底会让断言比实现宽一档，差的 1/255 会放跑「容器对内容错」。
+        let ink = interaction::disabled_button_content(ui, role, on_container);
+        let count = shot.count_in(rgb(ink), column_from, shot.width, y0, y1);
+        // 阈值 **30**：最窄的一行是只有 4 个字符的 `text` 变体（实测 38 px 墨迹，M229 复审后
+        // 按钮内距 24→20 让标签左移，余量只剩 2 px）。角色接错时会掉到个位数甚至 0。
+        assert!(
+            count > 30,
+            "{name} 行的禁用内容（{role:?}@38%）在 disabled 列里只有 {count} px —— 这一行没走 A1 的禁用角色"
+        );
+        // 反向判据（不靠阈值）：**满档**内容色不许比 38% 的还多——那样说明这一行没降透明度。
+        let full = shot.count_in(rgb(ui.color(role)), column_from, shot.width, y0, y1);
+        assert!(
+            full < count,
+            "{name} 行里满档 {role:?} 有 {full} px、38% 只有 {count} px：这一行的禁用透明度没生效"
+        );
+    }
+
+    // ---- M229 复审 P1-1：Outlined 图标按钮必须有 1px 环，Plain 必须没有 ----
+    //
+    // 只有渲染层能证：`icon()` 曾把 `StyleSpec.stroke` 写死 0，Outlined 与 Plain 逐像素相同。
+    // 纯函数那条在 `buttons::tests::only_the_outlined_icon_variant_draws_a_ring`（证明「传了 1.0」），
+    // 这条证明「画出来了」。
+    // **只能扫「环带」，且只能按「有没有墨」判**：1px 环在软渲染里是 Outline 叠画布的抗锯齿
+    // 混色（实测左缘 `(110,124,110)`，而 Outline 本体是 `(123,138,123)`）——按颜色匹配会漏，
+    // 而且 `Outline` 与「字形压在画布上的边缘」在容差内几乎同色（扫整格会把 Plain 行数成 16 px 假环）。
+    //
+    // 环带的判据是**几何 + 墨量**：40×40 圆按钮的左缘在 x = left…left+4（半径 20 的弧垂直中线处
+    // 贴左），而 24×24 字形从 left+8 才开始 —— Plain 行这一段实测是纯画布色 0 px。
+    let surface = rgb(ui.color(Role::Surface));
+    let is_ink = |pixel: [u8; 3]| pixel.iter().zip(surface).any(|(a, b)| a.abs_diff(b) > 8);
+    let band_ink = |y0: usize| {
+        let mut n = 0;
+        for y in (y0 + 14)..(y0 + 26) {
+            for x in label_left..(label_left + 4) {
+                if is_ink(shot.at(x, y)) {
+                    n += 1;
+                }
+            }
+        }
+        n
+    };
+    let outlined = band_ink(label_top + 7 * ROW_STEP);
+    let plain = band_ink(label_top + 8 * ROW_STEP);
+    assert!(
+        outlined >= 4,
+        "Outlined 图标按钮这一行左缘没有环墨（{outlined} px）：`icon()` 的 stroke 又被写死了？"
+    );
+    assert_eq!(
+        plain, 0,
+        "Plain 图标按钮这一行左缘出现了 {plain} px 环墨（Plain 不该有描边）"
+    );
+}
@@ -0,0 +1,123 @@
+//! 尺寸档矩阵：**按钮 XS~XL 五档** + **FAB 四态**（规格卡 `BUTTONS / XS - XL` 与
+//! `FAB / SMALL - DEFAULT - MEDIUM - EXTENDED`）。
+//!
+//! ## 为什么单开一段（而不是塞进 `buttons`）
+//!
+//! `buttons` 段是「五式 × 五态 + 图标四式」的 40 格矩阵，一屏（1180×760）本来就贴着折叠线；
+//! 五档梯子（最高 136）与四态 FAB（最宽 160）塞进去会被压到屏幕外——那样出的图**看不见**，
+//! 等于没拍。所以按「一段 = 一个能一屏判完的问题」拆开：
+//!
+//! ```text
+//! ULL_GALLERY_SECTION=sizes   # 本段：尺寸梯子 + FAB 四态
+//! ```
+//!
+//! ## 图上要能判什么
+//!
+//! 1. 五档高度递增、圆角全部是**半高**（药丸），标签字号跟着档位升（14/14/16/24/32）；
+//! 2. FAB 四态：40/56/80 三个方态 + 160×56 扩展态（图标 + 标签）；
+//! 3. 配色：FAB 一律 `PrimaryContainer` / `OnPrimaryContainer`（规格卡上四颗都是淡绿底深绿字）。
+//!
+//! 判不了：状态层（FAB 在这一段是静息态，五态矩阵在 `buttons` 段的按钮上验）、以及动效。
+
+use iced::widget::{column, row};
+use iced::{Element, Length};
+
+use unlucky_design::color::Role;
+use unlucky_design::icons::IconKind;
+use unlucky_design::inkcat::size::{ControlSize, FabSize};
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::TypeRole;
+
+use crate::theme::Ui;
+
+use super::super::buttons::{self, fab, Button, Fab};
+use super::super::interaction::Interaction;
+use super::{heading, DemoMessage};
+
+/// 整段（标题 + 五档梯子 + 四态 FAB + 图例）。
+pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let legend = ui.style(TypeRole::BodySmall);
+
+    let ladder = row(ControlSize::ALL
+        .iter()
+        .map(|size| sized(ui, *size))
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X4))
+    .align_y(iced::Alignment::Center);
+
+    let fabs = row(FabSize::ALL
+        .iter()
+        .map(|size| fab_cell(ui, *size))
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X4))
+    .align_y(iced::Alignment::Center);
+
+    column![
+        heading(
+            ui,
+            "sizes · buttons xs~xl + fab small~extended",
+            "规格卡：按钮 32/40/56/96/136（圆角 = 半高，标签 14/14/16/24/32 字重 500）；\
+             FAB 40/r12 · 56/r16 · 80/r20 · 160×56/r16（图标 20/26/34/24，扩展态内距 28、间距 8）"
+        ),
+        labelled(ui, "buttons xs - xl", ladder.into()),
+        labelled(ui, "fab small - extended", fabs.into()),
+        iced::widget::text(
+            "图例：产品页的按钮只用 S 档（40，= M3 control_height）；M/L/XL 留给空态主行动与展示型入口。\
+             FAB 四颗都是静息态，配色 PrimaryContainer / OnPrimaryContainer。",
+        )
+        .size(legend.size_px)
+        .font(ui.font_of(legend))
+        .color(ui.color(Role::OnSurfaceVariant)),
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// 一档 Filled 按钮（标签是档位名的大写：XS / S / M / L / XL。
+///
+/// **必须大写**：小写的 `l` 在 Inter/Segoe 里就是一根竖线，XL 会读成「x|」——第一版出图就是这么错的。
+fn sized<'a>(ui: &'a Ui, size: ControlSize) -> Element<'a, DemoMessage> {
+    let label: &'static str = match size {
+        ControlSize::Xs => "XS",
+        ControlSize::S => "S",
+        ControlSize::M => "M",
+        ControlSize::L => "L",
+        ControlSize::Xl => "XL",
+    };
+    buttons::filled(
+        ui,
+        Button::new(label, DemoMessage::Pressed("size")).size(size),
+    )
+}
+
+/// 一颗 FAB（扩展态带标签；静息态强制，避免光标位置影响出图）。
+fn fab_cell<'a>(ui: &'a Ui, size: FabSize) -> Element<'a, DemoMessage> {
+    let spec = if matches!(size, FabSize::Extended) {
+        Fab::extended(IconKind::Plus, "New", DemoMessage::Pressed("fab"))
+    } else {
+        Fab::new(IconKind::Plus, DemoMessage::Pressed("fab"))
+    }
+    .size(size)
+    .state(Interaction::Enabled);
+    fab(ui, spec)
+}
+
+/// 一行「小标题 + 内容」。
+fn labelled<'a>(
+    ui: &'a Ui,
+    label: &'a str,
+    content: Element<'a, DemoMessage>,
+) -> Element<'a, DemoMessage> {
+    let style = ui.style(TypeRole::LabelSmall);
+    column![
+        iced::widget::text(label)
+            .size(style.size_px)
+            .font(ui.font_of(style))
+            .color(ui.color(Role::OnSurfaceVariant)),
+        iced::widget::container(content)
+            .width(Length::Fill)
+            .padding(iced::Padding::from([ui.space(Space::X2), 0.0])),
+    ]
+    .spacing(ui.space(Space::X1))
+    .into()
+}
@@ -10,7 +10,7 @@ fn search_bar_and_docked_panel_geometry() {
    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
        let shot = shot(&dir, "search", flavor);
        let ui = ui(flavor);
-        let bar_color = rgb(ui.color(Role::SurfaceContainerHigh));
+        let bar_color = rgb(ui.color(Role::SurfaceContainerHighest));
        let ink = rgb(ui.color(Role::OnSurface));

        let bars = shot.bbox_of(bar_color, 2000);
@@ -6,7 +6,7 @@
 //! |---|---|---|---|
 //! | 20.1 | 高 + 圆角 | 高 **56**、圆角 **full = 28**（药丸，不是圆角矩形） | `LM.search_bar_height` + `Component::Search.spec().shape` |
 //! | 20.2 | 宽 | min **360** / max **720**（G20：iced 无 min-width，只施加 max） | [`SEARCH_MAX_WIDTH`](super::geometry::SEARCH_MAX_WIDTH) |
-//! | 20.3 | 容器色 / 高程 | `SurfaceContainerHigh` + **L0**（token 写 L3，默认值是 L0，按观感取 L0） | `Role::SurfaceContainerHigh` |
+//! | 20.3 | 容器色 / 高程 | **`SurfaceContainerHighest`** + **L0**（token 写 L3，默认值是 L0，按观感取 L0） | `Role::SurfaceContainerHighest` |
 //! | 20.4 | 图标位 | leading 24/`OnSurface`、trailing 24/`OnSurfaceVariant`；**可视边 16 = pad 12 + offset 4** | `ComponentMetrics::SEARCH_BAR` |
 //! | 20.5 | 文本 / 占位 / 聚焦 | 输入 `BodyLarge`+`OnSurface`；占位 `OnSurfaceVariant`；聚焦 `Secondary` 1px 指示 | `TypeRole` / `Role::Secondary` |
 //! | 20.6 | docked 面板 | 头部 **56**、形状 `CornerExtraLarge` = **28** | `ShapeScale::ExtraLarge` |
@@ -179,7 +179,7 @@ fn bar_content<'a, M: Clone + 'a>(
        .into()
 }

-/// 收起态搜索条（56 高、药丸、`SurfaceContainerHigh`、无可见阴影）。
+/// 收起态搜索条（56 高、药丸、`SurfaceContainerHighest`、无可见阴影）。
 pub fn search_bar<'a, M: Clone + 'a>(
    ui: &'a Ui,
    bar: SearchBar<'a>,
@@ -192,7 +192,9 @@ pub fn search_bar<'a, M: Clone + 'a>(
    let background = if state.is_disabled() {
        interaction::disabled_colors(ui, Role::Surface).0
    } else {
-        let role = Role::SurfaceContainerHigh;
+        // 规格卡里搜索药丸与 filled 字段是**同一个底**（`SurfaceContainerHighest`）：
+        // M229 r1 用的是 `High`，比 filled 字段低一档，两块并排时能看出色差（复审 F2 裁决抬档）。
+        let role = Role::SurfaceContainerHighest;
        interaction::overlay_color(ui, state, Role::OnSurface, role).unwrap_or(ui.color(role))
    };

@@ -265,6 +267,8 @@ pub fn search_view<'a, M: Clone + 'a>(
    view: SearchView<'a>,
    on_input: impl Fn(String) -> M + 'a,
 ) -> Element<'a, M> {
+    // 展开面板**不跟着药丸抬档**：它是浮层（菜单语言，`SurfaceContainerHigh`），
+    // 规格卡只画了收起的药丸。两块不同档是层级差，不是漏改（复审 F2 只裁药丸）。
    let panel = ui.color(Role::SurfaceContainerHigh);
    let header_height = ui.metrics().search_bar_height;
    let body_style = ui.style(TypeRole::BodyMedium);
@@ -12,6 +12,9 @@
 //! | 11.6 | 禁用 | 激活轨 `OnSurface`@**38%**、未激活 @**12%**、handle @**38%** | `interaction::*` |
 //! | — | 离散停靠点 | **4** 圆点 `SecondaryContainer`（`StopIndicatorSize`）；尾随间距 6 | [`Slider::steps`] |
 //!
+//! **Pixel 级偏离 #9（M229 r3，塔裁决不改实现）**：禁用**激活轨**沿用 M3 的 `DisabledActiveTrack` **38%**
+//! （规格卡只定义了面状控件族的 12%；两者是两个族，不是同一档的两个名字，取证见 artifacts README §6）。
+//!
 //! ## 为什么必须自绘
 //!
 //! iced 内置 `slider` 只能画「轨道 + 圆形/矩形 handle（高度 = 控件高）」，
@@ -47,8 +47,9 @@ use crate::theme::{to_iced, Ui};
 /// 之前这里写死 `OnSurfaceVariant` 且只有一个「底」，导致 FilledTonal 与 IconButton 两族偏浅
 /// 15/255（视觉 r3 用像素量的）。
 pub fn disabled_content_over_role(ui: &Ui, role: Role, on_container: bool) -> Color {
-    let scheme = Scheme::baseline(ui.flavor());
-    disabled_content_with_alpha(&scheme, role, on_container, DISABLED_SURFACE_ALPHA)
+    // **取 `Ui` 里已注入的方案**，不重算 baseline：M229 之后产品方案是品牌色板
+    // （Ink / Silver），照 baseline 重算会画出旧的天蓝中性色（复审 F1）。
+    disabled_content_with_alpha(ui.scheme(), role, on_container, DISABLED_SURFACE_ALPHA)
 }

 /// 禁用态内容色——**按钮家族**（`on_container`：是否叠在本族 10% 容器上）。
@@ -56,8 +57,7 @@ pub fn disabled_content_over_role(ui: &Ui, role: Role, on_container: bool) -> Co
 /// 与 [`disabled_content_over_role`] 的差别只有「底」的 α：按钮 10%、面状控件 12%。
 /// 两个入口分开是 M86 的结论：合成一个数会让一族永远差 1/255，肉眼看不见、只有 probe 会红。
 pub fn disabled_button_content(ui: &Ui, role: Role, on_container: bool) -> Color {
-    let scheme = Scheme::baseline(ui.flavor());
-    disabled_content_with_alpha(&scheme, role, on_container, DISABLED_CONTAINER_ALPHA)
+    disabled_content_with_alpha(ui.scheme(), role, on_container, DISABLED_CONTAINER_ALPHA)
 }

 /// 两个族共用的内容色求值（「底」的 α 由调用方给）。
@@ -94,8 +94,8 @@ fn disabled_content_with_alpha(
 ///
 /// **按钮家族用 [`disabled_button_colors`]**（0.10，`*ButtonTokens.DisabledContainerOpacity = 0.1f`）。
 ///
-/// `ui` 不暴露 [`Scheme`]，这里按同一个 flavor 求一次基线方案——调的是
-/// `unlucky_design` 的**同一个**函数与同一套角色，不是第二份令牌。
+/// 合成的输入是 [`Ui::scheme`]（品牌色板 / 取色方案），**不是** `Scheme::baseline(flavor)`：
+/// 后者是 tone 派生的旧口径，在 Ink 板上会让禁用容器偏蓝（复审 F1 的根因）。
 ///
 /// 顺序必须「先容器后内容」：Compose 也是这么画的，先叠容器再叠 label，
 /// 所以内容叠的角色是容器实色而不是底下的 surface。
@@ -116,7 +116,7 @@ pub fn disabled_button_colors(ui: &Ui, surface: Role) -> (Color, Color) {

 /// 两个族共用的求值：容器 = `OnSurface` @ `container_alpha` 叠在 `surface` 上，内容 = 38% 叠在容器上。
 fn disabled_colors_with_alpha(ui: &Ui, surface: Role, container_alpha: f32) -> (Color, Color) {
-    let scheme = Scheme::baseline(ui.flavor());
+    let scheme = ui.scheme();
    let base = scheme.get(surface);
    let container = scheme
        .get(Role::OnSurface)
@@ -133,173 +133,4 @@ fn disabled_colors_with_alpha(ui: &Ui, surface: Role, container_alpha: f32) -> (
 }

 #[cfg(test)]
-mod tests {
-    use super::*;
-    use unlucky_design::color::SchemeFlavor;
-    use unlucky_design::typography::Platform;
-
-    use crate::theme::Families;
-
-    const FAMILIES: Families = Families {
-        text: "Segoe UI",
-        display: "Segoe UI",
-        mono: "Consolas",
-    };
-
-    fn ui(flavor: SchemeFlavor) -> Ui {
-        Ui::with_platform(flavor, Platform::Windows, FAMILIES)
-    }
-
-    /// 两族的 α 必须都钉住（只钉一条，另一族被合并时会静默错 1/255）。
-    #[test]
-    fn both_disabled_alpha_classes_are_pinned_to_the_tokens() {
-        // 绑定成局部变量再过断言：直接比两个常量会被 clippy 判成「常量断言」。
-        let button_alpha = DISABLED_CONTAINER_ALPHA;
-        let surface_alpha = DISABLED_SURFACE_ALPHA;
-        let content_alpha = DISABLED_CONTENT_ALPHA;
-        // 按钮容器：官方 *ButtonTokens.DisabledContainerOpacity = 0.1f
-        assert!(
-            (button_alpha - 0.10).abs() < f32::EPSILON,
-            "按钮禁用容器 α 必须是 0.10（官方 DisabledContainerOpacity）；\
-             0.12 是面状控件那一类，别混用"
-        );
-        // 面状控件：chip 描边 / slider 未激活轨 / switch 轨道 = 0.12f
-        assert!(
-            (surface_alpha - 0.12).abs() < f32::EPSILON,
-            "面状控件禁用 α 必须是 0.12（官方 FlatDisabledOutlineOpacity / \
-             DisabledInactiveTrackOpacity / DisabledTrackOpacity）"
-        );
-        assert!((content_alpha - 0.38).abs() < f32::EPSILON);
-        assert!(
-            surface_alpha > button_alpha,
-            "两族必须可区分：面状控件比按钮容器更实（{surface_alpha} > {button_alpha}）"
-        );
-    }
-
-    /// **面状控件族**的那一对颜色 = 0.12 预混合（chip / switch / slider / TextField 描边）。
-    ///
-    /// ⚠️ 期望值**写死 0.12 / 0.38**，不从 `DISABLED_SURFACE_ALPHA` 取：
-    /// 从被测常量求期望是**自指断言**——常量一改，expected 跟着改，永远相等（复审 r1 P2-1 实测：
-    /// 把 `DISABLED_SURFACE_ALPHA` 改成 0.10，旧版这条照样绿）。现在常量改坏必红。
-    #[test]
-    fn surface_family_disabled_colors_are_the_12_percent_class() {
-        const EXPECTED_SURFACE_ALPHA: f32 = 0.12;
-        const EXPECTED_CONTENT_ALPHA: f32 = 0.38;
-        let actual_alpha = DISABLED_SURFACE_ALPHA;
-        assert_eq!(
-            actual_alpha, EXPECTED_SURFACE_ALPHA,
-            "面状控件族 α 必须是官方 0.12f；改常量会让下面每一条合成色断言同时红"
-        );
-
-        for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
-            let ui = ui(flavor);
-            let scheme = Scheme::baseline(flavor);
-            let base = scheme.get(Role::Surface);
-            let expected_container = scheme
-                .get(Role::OnSurface)
-                .with_alpha(EXPECTED_SURFACE_ALPHA)
-                .over(base);
-
-            let (surface, surface_content) = disabled_colors(&ui, Role::Surface);
-            assert_eq!(
-                surface,
-                to_iced(expected_container),
-                "{flavor:?}：面状控件容器 = on-surface@12% 叠表面（期望值硬编码，不取自常量）"
-            );
-            assert_eq!(
-                surface_content,
-                to_iced(
-                    scheme
-                        .get(Role::OnSurfaceVariant)
-                        .with_alpha(EXPECTED_CONTENT_ALPHA)
-                        .over(expected_container)
-                ),
-                "{flavor:?}：面状控件内容仍是 38%，只是叠的底不同"
-            );
-            assert_ne!(surface, ui.color(Role::Surface), "12% 叠上去必须能看出来");
-            assert_eq!(surface.a, 1.0, "禁用容器也是实色（CPU/GPU 一致）");
-            assert_eq!(surface_content.a, 1.0, "禁用内容也是实色");
-            // 内容叠在容器上 vs 叠在表面上，是两回事（probe 量的是前者）
-            assert_ne!(
-                surface_content,
-                to_iced(
-                    scheme
-                        .get(Role::OnSurfaceVariant)
-                        .with_alpha(EXPECTED_CONTENT_ALPHA)
-                        .over(base)
-                ),
-                "{flavor:?}：内容必须叠在容器上"
-            );
-            // 跨族对照：面状族的合成色必须与按钮族不同（两族一旦合流，这条红）
-            let (button, _) = disabled_button_colors(&ui, Role::Surface);
-            assert_ne!(
-                surface, button,
-                "{flavor:?}：面状族 12% 与按钮族 10% 必须落在不同像素值上"
-            );
-        }
-    }
-
-    /// **按钮家族**的那一对颜色 = 0.10 预混合，且与面状控件族**必须落在不同像素值上**。
-    ///
-    /// 期望值同样写死（0.10 / 0.38），理由见上一条：自指断言抓不住常量被改坏。
-    #[test]
-    fn button_family_disabled_colors_are_the_10_percent_class() {
-        const EXPECTED_BUTTON_ALPHA: f32 = 0.10;
-        const EXPECTED_CONTENT_ALPHA: f32 = 0.38;
-        let actual_alpha = DISABLED_CONTAINER_ALPHA;
-        assert_eq!(
-            actual_alpha, EXPECTED_BUTTON_ALPHA,
-            "按钮族 α 必须是官方 0.1f（*ButtonTokens.DisabledContainerOpacity）"
-        );
-
-        for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
-            let ui = ui(flavor);
-            let scheme = Scheme::baseline(flavor);
-            let base = scheme.get(Role::Surface);
-            let expected_container = scheme
-                .get(Role::OnSurface)
-                .with_alpha(EXPECTED_BUTTON_ALPHA)
-                .over(base);
-
-            let (button, button_content) = disabled_button_colors(&ui, Role::Surface);
-            assert_eq!(
-                button,
-                to_iced(expected_container),
-                "{flavor:?}：按钮容器 = on-surface@10% 叠表面（官方 DisabledContainerOpacity = 0.1f）"
-            );
-            assert_eq!(
-                button_content,
-                to_iced(
-                    scheme
-                        .get(Role::OnSurfaceVariant)
-                        .with_alpha(EXPECTED_CONTENT_ALPHA)
-                        .over(expected_container)
-                ),
-            );
-
-            let (surface, _) = disabled_colors(&ui, Role::Surface);
-            assert_ne!(
-                button, surface,
-                "{flavor:?}：10% 与 12% 必须落在不同像素值上（合成一个数就是这次要防的回归）"
-            );
-
-            // 内容色同理：按钮 38% 叠 10% 底 ≠ 面状 38% 叠 12% 底
-            assert_ne!(
-                button_content,
-                disabled_content_over_role(&ui, Role::OnSurfaceVariant, true),
-                "{flavor:?}：两族的「有容器」内容色不能同源"
-            );
-            assert_eq!(
-                disabled_button_content(&ui, Role::OnSurfaceVariant, true),
-                button_content,
-                "{flavor:?}：按钮内容入口必须与按钮颜色入口同源"
-            );
-            // 无容器时两族完全一致（都叠 surface）——差异只在「有容器」那一支
-            assert_eq!(
-                disabled_button_content(&ui, Role::OnSurfaceVariant, false),
-                disabled_content_over_role(&ui, Role::OnSurfaceVariant, false),
-                "{flavor:?}：没有容器时不该有族差异"
-            );
-        }
-    }
-}
+mod tests;
@@ -0,0 +1,277 @@
+//! 禁用态两族 α 与合成色的单测（M229 复审 F1 后从 `disabled.rs` 纯搬移，守 400 行硬线）。
+//!
+//! 搬移之后**内容有改动**（不是一行未改）：既有两条「α 族」测试的期望值从 `Scheme::baseline`
+//! 改成**品牌板**（F1 的修法就是换色源），并新增 `disabled_colors_follow_the_brand_board_not_the_tone_baseline`
+//! 作为 F1 的回归门——它与两条族测试放在一起，读的人一眼能看到「族」与「色源」两件事。
+
+use super::*;
+use unlucky_design::color::SchemeFlavor;
+use unlucky_design::typography::Platform;
+
+use crate::theme::Families;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI",
+    display: "Segoe UI",
+    mono: "Consolas",
+};
+
+fn ui(flavor: SchemeFlavor) -> Ui {
+    Ui::with_platform(flavor, Platform::Windows, FAMILIES)
+}
+
+/// 两族的 α 必须都钉住（只钉一条，另一族被合并时会静默错 1/255）。
+#[test]
+fn both_disabled_alpha_classes_are_pinned_to_the_tokens() {
+    // 绑定成局部变量再过断言：直接比两个常量会被 clippy 判成「常量断言」。
+    let button_alpha = DISABLED_CONTAINER_ALPHA;
+    let surface_alpha = DISABLED_SURFACE_ALPHA;
+    let content_alpha = DISABLED_CONTENT_ALPHA;
+    // 按钮容器：官方 *ButtonTokens.DisabledContainerOpacity = 0.1f
+    assert!(
+        (button_alpha - 0.10).abs() < f32::EPSILON,
+        "按钮禁用容器 α 必须是 0.10（官方 DisabledContainerOpacity）；\
+         0.12 是面状控件那一类，别混用"
+    );
+    // 面状控件：chip 描边 / slider 未激活轨 / switch 轨道 = 0.12f
+    assert!(
+        (surface_alpha - 0.12).abs() < f32::EPSILON,
+        "面状控件禁用 α 必须是 0.12（官方 FlatDisabledOutlineOpacity / \
+         DisabledInactiveTrackOpacity / DisabledTrackOpacity）"
+    );
+    assert!((content_alpha - 0.38).abs() < f32::EPSILON);
+    assert!(
+        surface_alpha > button_alpha,
+        "两族必须可区分：面状控件比按钮容器更实（{surface_alpha} > {button_alpha}）"
+    );
+}
+
+/// **面状控件族**的那一对颜色 = 0.12 预混合（chip / switch / slider / TextField 描边）。
+///
+/// ⚠️ 期望值**写死 0.12 / 0.38**，不从 `DISABLED_SURFACE_ALPHA` 取：
+/// 从被测常量求期望是**自指断言**——常量一改，expected 跟着改，永远相等（复审 r1 P2-1 实测：
+/// 把 `DISABLED_SURFACE_ALPHA` 改成 0.10，旧版这条照样绿）。现在常量改坏必红。
+#[test]
+fn surface_family_disabled_colors_are_the_12_percent_class() {
+    const EXPECTED_SURFACE_ALPHA: f32 = 0.12;
+    const EXPECTED_CONTENT_ALPHA: f32 = 0.38;
+    let actual_alpha = DISABLED_SURFACE_ALPHA;
+    assert_eq!(
+        actual_alpha, EXPECTED_SURFACE_ALPHA,
+        "面状控件族 α 必须是官方 0.12f；改常量会让下面每一条合成色断言同时红"
+    );
+
+    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
+        let ui = ui(flavor);
+        // 期望值按**品牌色板**（= `Ui` 注入的那一份），不是 tone 派生的 baseline。
+        let scheme = unlucky_design::color::BrandBoard::for_flavor(flavor).scheme();
+        let base = scheme.get(Role::Surface);
+        let expected_container = scheme
+            .get(Role::OnSurface)
+            .with_alpha(EXPECTED_SURFACE_ALPHA)
+            .over(base);
+
+        let (surface, surface_content) = disabled_colors(&ui, Role::Surface);
+        assert_eq!(
+            surface,
+            to_iced(expected_container),
+            "{flavor:?}：面状控件容器 = on-surface@12% 叠表面（期望值硬编码，不取自常量）"
+        );
+        assert_eq!(
+            surface_content,
+            to_iced(
+                scheme
+                    .get(Role::OnSurfaceVariant)
+                    .with_alpha(EXPECTED_CONTENT_ALPHA)
+                    .over(expected_container)
+            ),
+            "{flavor:?}：面状控件内容仍是 38%，只是叠的底不同"
+        );
+        assert_ne!(surface, ui.color(Role::Surface), "12% 叠上去必须能看出来");
+        assert_eq!(surface.a, 1.0, "禁用容器也是实色（CPU/GPU 一致）");
+        assert_eq!(surface_content.a, 1.0, "禁用内容也是实色");
+        // 内容叠在容器上 vs 叠在表面上，是两回事（probe 量的是前者）
+        assert_ne!(
+            surface_content,
+            to_iced(
+                scheme
+                    .get(Role::OnSurfaceVariant)
+                    .with_alpha(EXPECTED_CONTENT_ALPHA)
+                    .over(base)
+            ),
+            "{flavor:?}：内容必须叠在容器上"
+        );
+        // 跨族对照：面状族的合成色必须与按钮族不同（两族一旦合流，这条红）
+        let (button, _) = disabled_button_colors(&ui, Role::Surface);
+        assert_ne!(
+            surface, button,
+            "{flavor:?}：面状族 12% 与按钮族 10% 必须落在不同像素值上"
+        );
+    }
+}
+
+/// **按钮家族**的那一对颜色 = 0.10 预混合，且与面状控件族**必须落在不同像素值上**。
+///
+/// 期望值同样写死（0.10 / 0.38），理由见上一条：自指断言抓不住常量被改坏。
+#[test]
+fn button_family_disabled_colors_are_the_10_percent_class() {
+    const EXPECTED_BUTTON_ALPHA: f32 = 0.10;
+    const EXPECTED_CONTENT_ALPHA: f32 = 0.38;
+    let actual_alpha = DISABLED_CONTAINER_ALPHA;
+    assert_eq!(
+        actual_alpha, EXPECTED_BUTTON_ALPHA,
+        "按钮族 α 必须是官方 0.1f（*ButtonTokens.DisabledContainerOpacity）"
+    );
+
+    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
+        let ui = ui(flavor);
+        // 期望值按**品牌色板**（= `Ui` 注入的那一份），不是 tone 派生的 baseline。
+        let scheme = unlucky_design::color::BrandBoard::for_flavor(flavor).scheme();
+        let base = scheme.get(Role::Surface);
+        let expected_container = scheme
+            .get(Role::OnSurface)
+            .with_alpha(EXPECTED_BUTTON_ALPHA)
+            .over(base);
+
+        let (button, button_content) = disabled_button_colors(&ui, Role::Surface);
+        assert_eq!(
+            button,
+            to_iced(expected_container),
+            "{flavor:?}：按钮容器 = on-surface@10% 叠表面（官方 DisabledContainerOpacity = 0.1f）"
+        );
+        assert_eq!(
+            button_content,
+            to_iced(
+                scheme
+                    .get(Role::OnSurfaceVariant)
+                    .with_alpha(EXPECTED_CONTENT_ALPHA)
+                    .over(expected_container)
+            ),
+        );
+
+        let (surface, _) = disabled_colors(&ui, Role::Surface);
+        assert_ne!(
+            button, surface,
+            "{flavor:?}：10% 与 12% 必须落在不同像素值上（合成一个数就是这次要防的回归）"
+        );
+
+        // 内容色同理：按钮 38% 叠 10% 底 ≠ 面状 38% 叠 12% 底
+        assert_ne!(
+            button_content,
+            disabled_content_over_role(&ui, Role::OnSurfaceVariant, true),
+            "{flavor:?}：两族的「有容器」内容色不能同源"
+        );
+        assert_eq!(
+            disabled_button_content(&ui, Role::OnSurfaceVariant, true),
+            button_content,
+            "{flavor:?}：按钮内容入口必须与按钮颜色入口同源"
+        );
+        // 无容器时两族完全一致（都叠 surface）——差异只在「有容器」那一支
+        assert_eq!(
+            disabled_button_content(&ui, Role::OnSurfaceVariant, false),
+            disabled_content_over_role(&ui, Role::OnSurfaceVariant, false),
+            "{flavor:?}：没有容器时不该有族差异"
+        );
+    }
+}
+
+/// **M229 复审 F1 的回归门**：禁用态的合成必须跟着**品牌色板**走，不许偷偷回到 tone 派生的 baseline。
+///
+/// Ink 板的中性色是绿系（`on-surface` 与 `surface` 的 G 通道最高），baseline 是蓝系；所以只要
+/// 「禁用容器」在 Ink 下是绿系（`g >= b`）且与 baseline 算出来的值**不相等**，就说明它走的是板。
+///
+/// 抓得住：有人把三处 `Scheme::baseline(ui.flavor())` 写回去（那时本测试立刻红，且报出偏蓝的像素）。
+/// 抓不住：色板本身改了色相（那是 `design` 的 `anchors_pin_the_spec` 的事）。
+#[test]
+fn disabled_colors_follow_the_brand_board_not_the_tone_baseline() {
+    use unlucky_design::color::BrandBoard;
+
+    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
+        let ui = ui(flavor);
+        let board = BrandBoard::for_flavor(flavor).scheme();
+        let baseline = Scheme::baseline(flavor);
+
+        // ① 面状控件族的容器（chip 描边 / slider 未激活轨 / switch 轨道）
+        let (surface, _surface_content) = disabled_colors(&ui, Role::Surface);
+        let expect_surface = to_iced(
+            board
+                .get(Role::OnSurface)
+                .with_alpha(DISABLED_SURFACE_ALPHA)
+                .over(board.get(Role::Surface)),
+        );
+        assert_eq!(
+            surface, expect_surface,
+            "{flavor:?}：禁用容器必须按色板合成"
+        );
+
+        let baseline_surface = to_iced(
+            baseline
+                .get(Role::OnSurface)
+                .with_alpha(DISABLED_SURFACE_ALPHA)
+                .over(baseline.get(Role::Surface)),
+        );
+        assert_ne!(
+            surface, baseline_surface,
+            "{flavor:?}：禁用容器退回了 baseline（这就是复审 F1 的蓝系像素）"
+        );
+
+        // ② 按钮族的容器
+        let (button, _) = disabled_button_colors(&ui, Role::Surface);
+        assert_ne!(button, surface, "{flavor:?}：两族 α 仍要可区分");
+
+        // ③ 内容色（两个入口）
+        assert_eq!(
+            disabled_content_over_role(&ui, Role::OnSurfaceVariant, true),
+            to_iced(
+                board
+                    .get(Role::OnSurfaceVariant)
+                    .with_alpha(DISABLED_CONTENT_ALPHA)
+                    .over(
+                        board
+                            .get(Role::OnSurface)
+                            .with_alpha(DISABLED_SURFACE_ALPHA)
+                            .over(board.get(Role::Surface))
+                    )
+            ),
+            "{flavor:?}：面状控件族内容色要按色板合成"
+        );
+        assert_eq!(
+            disabled_button_content(&ui, Role::OnSurfaceVariant, true),
+            to_iced(
+                board
+                    .get(Role::OnSurfaceVariant)
+                    .with_alpha(DISABLED_CONTENT_ALPHA)
+                    .over(
+                        board
+                            .get(Role::OnSurface)
+                            .with_alpha(DISABLED_CONTAINER_ALPHA)
+                            .over(board.get(Role::Surface))
+                    )
+            ),
+            "{flavor:?}：按钮族内容色要按色板合成"
+        );
+
+        // ④ **色相判据**（像素级的自证）：Ink 板的禁用容器是绿系（G 最高），baseline 是蓝系（B 最高）。
+        //    Ink 板：`on-surface` 与 `surface` 的 G 通道都高于 B 通道（两个中性角色都是绿黑），
+        //    合成后仍是 G ≥ B；baseline 深色则是 B > G（天蓝中性）。浅色板上两者都是近中性，
+        //    所以只在深色档下判色相。
+        if matches!(flavor, SchemeFlavor::Dark) {
+            let (r, g, b) = channels(surface);
+            assert!(
+                g >= b,
+                "{flavor:?}：禁用容器 {r}/{g}/{b} 仍是蓝系（G < B），说明没走 Ink 板"
+            );
+            let (_, bg, bb) = channels(baseline_surface);
+            assert!(bb > bg, "对照组不合格：baseline 深色的禁用容器应当是蓝系");
+        }
+    }
+}
+
+/// iced 颜色 → 8bit 通道（像素值，报告里的证据就用它）。
+fn channels(color: Color) -> (u8, u8, u8) {
+    (
+        (color.r * 255.0).round() as u8,
+        (color.g * 255.0).round() as u8,
+        (color.b * 255.0).round() as u8,
+    )
+}
@@ -16,6 +16,7 @@
 //!   inputs/         ← 同上（§9/§20/§11/§8）
 //!   feedback/       ← 同上（§12/§14/§7/§15）
 //!   navigation/     ← 同上（§4/§6/§21/§16）
+//!   surfaces/       ← M229：ELEVATED CARD（规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一格）
 //!   gallery/        ← 视觉验收 harness（`--screen=gallery`）
 //! ```
 //!
@@ -58,6 +59,7 @@ pub mod motion;
 pub mod navigation;
 pub mod scroll;
 pub mod selection;
+pub mod surfaces;

 #[cfg(test)]
 mod gate;
@@ -1,14 +1,19 @@
-//! Checkbox（`research/15` §18）：20×20 / 圆角 2 / 描边向内收的 2px 框 / 勾形 12dp 方头 /
-//! indeterminate 形变为居中短横 / Ø40 状态层 / 48 命中区。
+//! Checkbox（`research/15` §18 + 规格卡）：**18×18 / 圆角 4** / 描边向内收的 2px 框 /
+//! 勾形 10.8dp 方头（路径比例 0.6 × 边长）/ indeterminate 形变为居中短横 / Ø40 状态层 / 48 命中区。
+//!
+//! 尺寸口径（M229）：官方 `Checkbox.kt` 画 20×20 / rx2，规格卡画 `rect 18×18 rx4`，本实现取规格卡
+//! （`inkcat::metrics::CHECKBOX`）。勾形**比例不变**（0.2→0.8 的横向跨度），所以墨水跨度随边长从
+//! 12dp 变成 10.8dp。
 //!
 //! ## 三条容易画错的（每条都有对应的像素断言或单测）
 //!
-//! 1. **描边向内**：外缘恒 20（§18.3）。iced 的 quad 渲染器把描边路径**向内缩半个线宽**
-//!    （`iced_tiny_skia::engine::draw_quad`：`border_bounds + border_width / 2`），与 Compose
-//!    `drawBox` 的 `topLeft = stroke/2, size = 20 − stroke` 同一口径，所以选中/未选中外缘同尺寸。
+//! 1. **描边向内**：外缘恒 **18**（§18.3 的尺寸换成本项目的 18）。iced 的 quad 渲染器把描边路径
+//!    **向内缩半个线宽**（`iced_tiny_skia::engine::draw_quad`：`border_bounds + border_width / 2`），
+//!    与 Compose `drawBox` 的 `topLeft = stroke/2, size = side − stroke` 同一口径，所以
+//!    选中/未选中外缘同尺寸。
 //! 2. **勾不是图标**：勾形按路径比例画（`shell::glyph`），代码里**没有第二个 `IconKind`**（§18.6）。
 //! 3. **状态层是 Ø40 的圆**、命中区是 48：两者不同尺寸，所以外壳是透明的 48 按钮，
-//!    里面套一个 40 的圆容器，再套 20 的方框（见 `shell` 的模块文档）。
+//!    里面套一个 40 的圆容器，再套 18 的方框（见 `shell` 的模块文档）。

 use iced::widget::{container, row, text};
 use iced::{Alignment, Element, Length, Padding};
@@ -4,12 +4,12 @@
 //!
 //! | # | 量 | 参考值 | 来源 | 落点 |
 //! |---|---|---|---|---|
-//! | 18.1 | Checkbox 外框 / 圆角 | **20×20** / **2** | `[源]` `Checkbox.kt:737-738`（`COMPONENT_WIDTH/HEIGHT=18` 是死值，见 §26.2） | `Component::Checkbox.metrics()` + `ComponentRadius::Micro` |
-//! | 18.2 | Checkbox 描边 | **2**（选中时 0） | `[源]` `UnselectedOutlineWidth` | `ComponentMetrics::CHECKBOX.stroke` |
+//! | 18.1 | Checkbox 外框 / 圆角 | 官方 **20×20** / **2**；**本项目取规格卡 18×18 / rx4** | `[源]` `Checkbox.kt:737-738` + 规格卡 `rect 18×18 rx4` | `inkcat::metrics::CHECKBOX` |
+//! | 18.2 | Checkbox 描边 | **2**（选中时 0） | `[源]` `UnselectedOutlineWidth` / 规格卡 `stroke-width=2` | `inkcat::metrics::CHECKBOX_STROKE` |
 //! | 18.5 | Checkbox 状态层 | **Ø40** | `[源]` `StateLayerSize` | `ComponentMetrics::CHECKBOX.state_layer` |
 //! | 18.9 | 命中区 / 标签间距 | **48** / **8** | `[源]` `minimumInteractiveComponentSize` / 间距 `[估]` | `LayoutMetrics::touch_target` / `metrics.gap` |
-//! | 19.1 | Radio 外圈 / 环线 | **20** / **2** | `[源]` `IconSize` / `RadioStrokeWidth` | `Component::Radio.metrics()` |
-//! | 19.2 | Radio 内点 | **10**（不是 12） | `[源]` `DotSize=12`，绘制半径 12/2−2/2=5 | `ComponentMetrics::RADIO.inner_dot` |
+//! | 19.1 | Radio 外圈 / 环线 | 官方 **20** / **2**；**本项目取规格卡 18 Ø** / 2 | `[源]` `IconSize` / `RadioStrokeWidth` + 规格卡 `r=9` | `inkcat::metrics::RADIO` |
+//! | 19.2 | Radio 内点 | **10**（不是 12） | `[源]` `DotSize=12`，绘制半径 12/2−2/2=5；规格卡 `r=5` 同为 10 Ø | `inkcat::metrics::RADIO_DOT` |
 //! | 10.1 | Switch 轨道 | **52×32**，圆角 full(16) | `[源]` `TrackWidth/TrackHeight/TrackShape` | [`SwitchGeometry`]（**G16**） |
 //! | 10.2 | Switch 滑块 | 选中 **24** / 未选 **16** / 按下 **28** | `[源]` `Selected/Unselected/PressedHandleWidth` | [`SwitchGeometry`]（**G16**） |
 //! | 13.1 | Chip 高 / 圆角 | **32** / **8** | `[源]` `ContainerHeight` / `ContainerShape=CornerSmall` | `Space::X8` + `Component::Chip.spec().shape` |
@@ -26,6 +26,7 @@

 use unlucky_design::component_map::{Component, ComponentMetrics};
 use unlucky_design::icons::IconSize;
+use unlucky_design::inkcat::metrics as inkcat;
 use unlucky_design::spacing::Space;

 use crate::theme::Ui;
@@ -63,40 +64,39 @@ pub struct ControlGeometry {
 }

 impl ControlGeometry {
-    /// Checkbox：20×20 / 圆角 2 / 描边 2 / 状态层 Ø40（全部 `[源]`，见模块表）。
+    /// Checkbox：**18×18** / 圆角 **4** / 描边 2 / 状态层 Ø40（M229 取规格卡口径，见模块表）。
+    ///
+    /// 与官方 20×20 / 2dp 差 2px 与 2dp：规格卡画的是 `rect 18×18 rx4`，M228 的 `inkcat` 把这条
+    /// 差异登记为「换肤时取 `CHECKBOX`」。4 是 `ShapeScale` 的刻度值，所以走容器层不违反 D32。
    pub fn checkbox(ui: &Ui) -> Self {
        let metrics = metrics(Component::Checkbox);
+        let spec = inkcat::CHECKBOX;
        Self {
-            side: metrics.width,
-            stroke: metrics.stroke,
+            side: spec.width,
+            stroke: inkcat::CHECKBOX_STROKE,
            state_layer: metrics.state_layer,
            hit: ui.metrics().touch_target,
            gap: metrics.gap,
-            // 微控件层（D32）：2dp 不在 `ShapeScale` 刻度里，只能走 `ComponentRadius`。
-            // 传 20 拿不到值说明有人把它挪到容器层了——那是 D32 违规，`unwrap_or` 会悄悄
-            // 变成直角，所以这里用 `expect` 直接炸（比图画错好查）。
-            radius: metrics
-                .radius
-                .expect("Checkbox 的圆角必须在微控件层（ComponentSpec::micro_radius）")
-                .radius_px(metrics.width)
-                .expect("Checkbox 20dp ≤ 微控件上限 24dp"),
+            radius: spec.radius_px(),
            // Checkbox 没有内点（内点是 radio 的语言，§19.6 明令两者不许混用）
-            inner_dot: metrics.inner_dot,
+            inner_dot: 0.0,
        }
    }

-    /// Radio：20 / 环线 2 / 内点 10 / 状态层 Ø40；圆角是**真圆**（`ShapeScale::Full`）。
+    /// Radio：**18 Ø** / 环线 2 / 内点 **10** / 状态层 Ø40；圆角是**真圆**（`ShapeScale::Full`）。
    pub fn radio(ui: &Ui) -> Self {
        let metrics = metrics(Component::Radio);
+        let spec = inkcat::RADIO;
        Self {
-            side: metrics.width,
-            stroke: metrics.stroke,
+            side: spec.width,
+            stroke: inkcat::RADIO_RING,
            state_layer: metrics.state_layer,
            hit: ui.metrics().touch_target,
            gap: metrics.gap,
-            radius: Component::Radio.spec().shape.radius_px(metrics.width),
-            // 内点 **10 不是 12**（§19.2：12 是含描边前的名义值，绘制半径 = 12/2 − 2/2 = 5）
-            inner_dot: metrics.inner_dot,
+            radius: spec.radius_px(),
+            // 内点 **10**（§19.2：12 是含描边前的名义值，绘制半径 = 12/2 − 2/2 = 5）。
+            // 规格卡实测同样是 10，所以这里取 `inkcat::RADIO_DOT`。
+            inner_dot: inkcat::RADIO_DOT,
        }
    }

@@ -53,8 +53,8 @@ pub fn heading_and_note<'a>(ui: &'a Ui) -> Element<'a, ()> {
    heading(
        ui,
        "selection · checkbox / radio / switch / chip",
-        "15 §18/§19 + 12b §10/§13：checkbox 20×20 圆角 2 描边 2（向内收）勾 12 方头 · \
-         radio 外圈 20 环线 2 内点 10 · switch 轨道 52×32 滑块 24/16 · chip 高 32 圆角 8 · \
+        "规格卡 + 15 §18/§19 + 12b §10/§13：checkbox **18×18 圆角 4** 描边 2（向内收）勾 10.8 方头 · \
+         radio 外圈 **18** 环线 2 内点 10 · switch 轨道 52×32 滑块 24/16 · chip 高 32 圆角 8 · \
         Ø40 状态层 · 命中 48",
    )
    .map(|_| ())
@@ -2,8 +2,8 @@
 //!
 //! | 组件 | 参考章节 | 尺寸一句话 |
 //! |---|---|---|
-//! | [`Checkbox`] | `research/15` §18 | 20×20 / 圆角 2 / 描边 2（向内收）/ 勾 12dp 方头 / Ø40 状态层 / 命中 48 |
-//! | [`Radio`] | `research/15` §19 | 外圈 20 / 环线 2 / 内点 **10**（不是 12）/ Ø40 状态层 |
+//! | [`Checkbox`] | `research/15` §18 + 规格卡 | **18×18** / 圆角 **4** / 描边 2（向内收）/ 勾 10.8dp 方头 / Ø40 状态层 / 命中 48 |
+//! | [`Radio`] | `research/15` §19 + 规格卡 | 外圈 **18** / 环线 2 / 内点 **10**（不是 12）/ Ø40 状态层 |
 //! | [`Switch`] | `research/12b` §10 | 轨道 52×32 / 滑块 24·16 / Ø40 状态层 |
 //! | [`Chip`] | `research/12b` §13 | 高 32 / 圆角 8 / 内边距 8 / Assist·Filter·Input |
 //!
@@ -134,7 +134,7 @@ fn on_ramp(pixel: [u8; 3], fill: [u8; 3], under: [u8; 3]) -> bool {
 ///
 /// 踩过的两个坑：① 按「精确色」连通会把圆形的环切成碎片（每片面积很小，量不到内点）；
 /// ② 按「更接近 fill 还是底色」判会让**另一种深色墨**混进来（`OnSurfaceVariant` 比 `Primary`
-/// 更接近深色，于是未选中的框被当成 20×20 的 Primary 块）。所以判据是「落在混色线上」。
+/// 更接近深色，于是未选中的框被当成 18×18 的 Primary 块）。所以判据是「落在混色线上」。
 pub(super) fn ink_boxes(
    shot: &Shot,
    color: Color,
@@ -72,7 +72,7 @@ fn selection_geometry_matches_the_reference() {

    // ---- §18.1 / §18.3 / §19.1：20 的外缘，选中与未选中**同尺寸** -----------------
    // 逐块断言（复审 P2-4）：**每一块** Primary 都必须是 20(±1)——任何一块到 22 就说明描边
-    // 画到了框外。只数「20×20 有几块」的时候，「把其中一格放大成 22」照样绿。
+    // 画到了框外。只数「18×18 有几块」的时候，「把其中一格放大成 22」照样绿。
    let filled = ink_boxes(&shot, primary, surface, 15, 24);
    for bbox in &filled {
        assert!(
@@ -310,7 +310,7 @@ fn selection_geometry_matches_the_reference() {
        .collect();
    assert!(
        container_20.is_empty(),
-        "P2-3：20×20 的禁用块不许是 12% 容器色（那是普通禁用容器，选中禁用是 38%），实测 {}",
+        "P2-3：18×18 的禁用块不许是 12% 容器色（那是普通禁用容器，选中禁用是 38%），实测 {}",
        dims(&container_20)
    );

@@ -1,17 +1,18 @@
-//! Radio button（`research/15` §19）：外圈 **20** / 环线 **2** / 内点 **10**（不是 12）/
+//! Radio button（`research/15` §19 + 规格卡）：外圈 **18** / 环线 **2** / 内点 **10**（不是 12）/
 //! 选中环+点 `Primary` / 未选中环 `OnSurfaceVariant`（hover 提到 `OnSurface`）/ Ø40 状态层。
 //!
 //! ## 为什么它不是「基于 Checkbox 画的」
 //!
 //! §19.6 明令：Radio **只能**是「2px 环 + 实心内点」，Checkbox **只能**是「2px 方框 + 勾/横」；
-//! 两者尺寸相同（20）但形状语言不同，禁止混用。所以本文件是独立实现，**没有** import
+//! 两者尺寸相同（**18**）但形状语言不同，禁止混用。所以本文件是独立实现，**没有** import
 //! `super::checkbox`（gallery 的 probe 另有一条断言：radio 的墨迹里不得出现方角像素）。
 //!
 //! ## 几何怎么落到像素
 //!
-//! 环：20×20 容器 + `Border { width: 2, radius: 10 }`。iced 的 quad 渲染器把描边路径向内缩
-//! 半个线宽（半径 10−1=9、路径外接 18），再以 2 描边 → 外缘正好 20、内缘 16。这与 Compose
-//! `RadioButton.kt` 的「环半径 = 10 − 1 = 9 且描边居中 → 外缘正好 20」逐像素同源。
+//! 环：**18×18** 容器 + `Border { width: 2, radius: 9 }`。iced 的 quad 渲染器把描边路径向内缩
+//! 半个线宽（半径 9−1=8、路径外接 16），再以 2 描边 → 外缘正好 18、内缘 14。这与 Compose
+//! `RadioButton.kt` 的「环半径 = side/2 − 1 且描边居中 → 外缘正好 side」逐像素同源，
+//! 只看 side 取 18（规格卡 `r=9`）而不是官方的 20。
 //! 内点：独立 10×10 圆容器居中在环里（绘制半径 12/2 − 2/2 = 5，即**直径 10**，§19.2）。

 use iced::widget::{container, row, text};
@@ -45,15 +45,16 @@ fn hit_area_is_48_square_even_without_a_label() {
 fn checkbox_geometry_comes_from_the_token_layer() {
    let ui = ui();
    let g = ControlGeometry::checkbox(&ui);
-    assert_eq!(g.side, 20.0, "18.1：容器 20×20（ContainerWidth=18 是死值）");
-    assert_eq!(g.radius, 2.0, "18.1：圆角 2（ComponentRadius::Micro）");
+    // M229：取规格卡的 18×18 / rx4（官方 20×20 / 2dp，登记在 `inkcat` 模块）。
+    assert_eq!(g.side, 18.0, "规格卡 rect 18×18");
+    assert_eq!(g.radius, 4.0, "规格卡 rx=4（ShapeScale::ExtraSmall）");
    assert_eq!(g.stroke, 2.0, "18.2：未选中描边 2px");
    assert_eq!(g.state_layer, 40.0, "18.5：状态层 Ø40");
    assert_eq!(g.hit, 48.0, "18.9：命中区 48");
    assert_eq!(g.gap, 8.0, "18.9：框↔标签 8（[估] 团队口径）");
    assert_eq!(g.inner_dot, 0.0, "Checkbox 没有内点");
-    // 18.4：勾形横向端点跨度 = 0.8−0.2 = 0.6 × 20 = 12
-    assert!((g.check_span() - 12.0).abs() < 0.001, "18.4：勾横向 12dp");
+    // 18.4：勾形横向端点跨度 = 0.8−0.2 = 0.6 × 18 = 10.8（比例不变，边长换成规格卡的 18）
+    assert!((g.check_span() - 10.8).abs() < 0.001, "18.4：勾横向 10.8dp");
    // 方头外扩：每端 2/√2 ≈ 1.41 → 墨迹跨度 ≈ 14.8（参考值 12 是端点跨度，不是墨迹）
    let bleed = g.square_cap_bleed();
    assert!(
@@ -61,19 +62,20 @@ fn checkbox_geometry_comes_from_the_token_layer() {
        "方头外扩 1/√2×线宽"
    );
    assert!(
-        (g.check_span() + bleed * 2.0 - 14.83).abs() < 0.05,
-        "墨迹跨度 ≈14.83"
+        (g.check_span() + bleed * 2.0 - 13.63).abs() < 0.05,
+        "墨迹跨度 ≈13.63（10.8 + 2×1.41）"
    );
 }

-/// §19.1 / §19.2：Radio 外圈 20、环线 2、**内点 10 不是 12**、真圆。
+/// §19.1 / §19.2：Radio 外圈 **18**（规格卡）、环线 2、**内点 10 不是 12**、真圆。
 #[test]
 fn radio_inner_dot_is_ten_not_twelve() {
    let ui = ui();
    let g = ControlGeometry::radio(&ui);
-    assert_eq!(g.side, 20.0, "19.1：外圈直径 20");
+    // M229：外圈取规格卡的 18 Ø（官方 20 Ø，登记在 `inkcat` 模块）。
+    assert_eq!(g.side, 18.0, "规格卡 r=9 ⇒ 直径 18");
    assert_eq!(g.stroke, 2.0, "19.1：环线 2px");
-    assert_eq!(g.radius, 10.0, "19.1：真圆（半径 = 边长/2）");
+    assert_eq!(g.radius, 9.0, "19.1：真圆（半径 = 边长/2）");
    assert_eq!(g.inner_dot, 10.0, "19.2：内点可视直径 10");
    assert_ne!(
        g.inner_dot, 12.0,
@@ -0,0 +1,141 @@
+//! **ELEVATED CARD**（规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一个方框）。
+//!
+//! ## 规格卡原值（`DevDocs/artifacts/components-ink.svg`，`[spec]`）
+//!
+//! | 项 | 值 | 出处 |
+//! |---|---|---|
+//! | 方框 | 300×150、**rx=16**（`inkcat::metrics::CARD`） | `rect x=64 y=1312 rx=16` |
+//! | 底色 | **`SurfaceContainer`**（Ink 板上比画布 `Surface` 亮一档） | 规格卡卡底那一格的 `fill` |
+//! | 内边距 | **24**（文字 `x=88` − 框 `x=64`） | 同上 |
+//! | 描边 | **无**（`stroke="none"`） | 同上 |
+//! | 上标注 | **11 / 600**（`LabelSmall` + 半粗，字距 1） | `ELEVATED CARD` 那行 |
+//! | 标题 | **16 / 400**（`BodyLarge`） | `Night bridge, bright rails.` 那行 |
+//! | 副文案 | 13 / 400 → **14**（`BodyMedium`；13 落在 12/14 之间，按 `inkcat::type_scale` 取较大档） | `night / bridge / cat` 那行 |
+//!
+//! ## 与 `pages::frame::card`（描边卡）的分工
+//!
+//! - [`card`]：**靠层级差站立**的卡（无描边、`SurfaceContainer` 底、16 圆角）。规格卡的
+//!   `ELEVATED CARD` 就是这一档，实例页的元信息卡用它；
+//! - `pages::frame::card`：描边卡（`OutlineVariant` 1px + 卡片层底），大面积表单容器用它。
+//!
+//! 两种卡并存是**有意的**：规格卡只画了 elevated 一种，而桌面端的长表单需要「弱一点的容器」
+//! （满屏都是 16 圆角 + 容器底，分隔线会看起来像浮块）。哪种卡用在哪儿由本节决定，不是随手挑。
+
+use iced::widget::text::LineHeight;
+use iced::widget::{column, container, text};
+use iced::{Background, Border, Element, Length, Padding, Pixels};
+
+use unlucky_design::color::Role;
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::{TypeRole, TypeStyle, Weight};
+
+use crate::theme::Ui;
+
+/// ELEVATED CARD 的内边距：**20**（= `LayoutMetrics::card_padding`）。
+///
+/// 为什么不是规格卡量到的 **24**（卡片文字 `x=88` − 框 `x=64`）：本组件唯一的消费者是实例页的
+/// 元信息卡，外框是 `META_CARD_MIN_WIDTH`（160），卡内必须放下最长的值串（**12px 下实测 118px**；
+/// 同一个串在 14px 下是 138px，见 [`TITLE_ROLE`]）。
+/// 24 ⇒ 内宽 112 ⇒ 值串折行 ⇒ 同排卡底不齐（M229 复审 P1-2 的现场）；20 ⇒ 内宽 120 ≥ 118，
+/// 且**不动卡片宽度契约**（`pages/layout.rs` 的 160 一个字没改）。
+///
+/// 登记为 **Structural** 偏离：规格卡的 24 是 300×150 展示卡的数，密集网格用 20；
+/// 将来真做展示卡就再开一档（现在的 `PAD` 名字对应的是密集卡，不是规格卡原值）。
+pub const PAD: f32 = 20.0;
+
+/// 值的字级：`BodySmall`（12/16）。
+///
+/// 展示卡的内距与字号（24 + `BodyLarge` 16）在 160 外框里放不下值串；14 档也不够：实测最长的
+/// 元信息值（时戳 `2026-10-29 19:22 UTC`）在 14px 下墨水宽 **138px**，而 160 − 2×20 = 120。
+/// 12px 下它就是 118px 级 ⇒ 放得下（余量见 `pages/instances/tests.rs` 的断言）。
+/// 「内距」与「字级」是一对：只改一个就会重新折行。
+pub const TITLE_ROLE: TypeRole = TypeRole::BodySmall;
+
+/// 一个 ELEVATED CARD 方框（只管壳：底、圆角、内边距；**无描边**）。
+///
+/// 消息类型与被包的内容同型，所以它能被任何页面复用（实例页 / 外观页 / 账户页各用自己的
+/// `Message`）——这是「组件不 import 业务消息」那条契约的落地方式。
+pub fn card<'a, M: 'a>(ui: &'a Ui, content: impl Into<Element<'a, M>>) -> Element<'a, M> {
+    let shape = ui.card_shape();
+    container(content)
+        .width(Length::Fill)
+        .padding(Padding::from([PAD, PAD]))
+        .style(move |_theme| container::Style {
+            // 规格卡的卡底是 **surface-container**（不是 `surface-container-low`）：
+            // 层级靠与画布（`surface`）的 tone 差表达，不靠描边。
+            background: Some(Background::Color(ui.color(Role::SurfaceContainer))),
+            border: Border {
+                radius: ui.radius_dp(shape),
+                ..Border::default()
+            },
+            ..container::Style::default()
+        })
+        .into()
+}
+
+/// 一张规格卡的三段文字：上标注（可选）/ 标题 / 副文案（可选）。
+#[derive(Debug, Clone, Copy)]
+pub struct Texts<'a> {
+    /// 上标注（`ELEVATED CARD` 那种小字标签）。
+    pub overline: Option<&'a str>,
+    /// 值 / 标题（字级是 [`TITLE_ROLE`] = **12/400**）。
+    pub title: &'a str,
+    /// 副文案（`BodyMedium` 14/400）。
+    pub support: Option<&'a str>,
+}
+
+/// 三段式内容（上标注 11/600 + 值 [`TITLE_ROLE`] **12/400** + 副文案 14/400，行间 4）。
+pub fn texts<'a, M: 'a>(ui: &'a Ui, parts: Texts<'a>) -> Element<'a, M> {
+    let mut stack = column![].spacing(ui.space(Space::X1));
+
+    if let Some(overline) = parts.overline {
+        stack = stack.push(role_text(
+            ui,
+            overline_style(),
+            overline,
+            Role::OnSurfaceVariant,
+        ));
+    }
+    stack = stack.push(role_text(
+        ui,
+        ui.style(TITLE_ROLE),
+        parts.title,
+        Role::OnSurface,
+    ));
+    if let Some(support) = parts.support {
+        stack = stack.push(role_text(
+            ui,
+            ui.style(TypeRole::BodyMedium),
+            support,
+            Role::OnSurfaceVariant,
+        ));
+    }
+
+    stack.width(Length::Fill).into()
+}
+
+/// 上标注的排版（`LabelSmall` 11/16，字重 **600**：规格卡 `font-weight=600`；
+/// M3 的 `LabelSmall` 是 500，`emphasized` 是 700 —— 两个都不是 600，所以在这里显式给 600）。
+pub fn overline_style() -> TypeStyle {
+    TypeStyle {
+        weight: Weight::SemiBold,
+        ..TypeRole::LabelSmall.style()
+    }
+}
+
+fn role_text<'a, M: 'a>(
+    ui: &'a Ui,
+    style: TypeStyle,
+    content: &'a str,
+    role: Role,
+) -> Element<'a, M> {
+    text(content)
+        .size(style.size_px)
+        .line_height(LineHeight::Absolute(Pixels(style.line_height_px)))
+        .font(ui.font_of(style))
+        .color(ui.color(role))
+        .into()
+}
+
+#[cfg(test)]
+mod tests;
@@ -0,0 +1,77 @@
+//! ELEVATED CARD 的几何/排版断言（对着规格卡原值，不看渲染结果）。
+//!
+//! 抓得住：圆角退回组件表的 12、内距/字级被改回规格卡的 24/16（元信息卡会折行）、
+//! 上标注变成 500/700 这些「悄悄改数」。
+//! 抓不住：底色对不对（要看 `Ui::color(SurfaceContainer)` 的来源，那条由 `theme` 的色板测试守）、
+//! 以及卡在页面里好不好看（D30 视觉判定）。
+
+use super::*;
+use unlucky_design::shape::ShapeScale;
+
+const FAMILIES: crate::theme::Families = crate::theme::Families {
+    text: "Segoe UI Variable Text",
+    display: "Segoe UI Variable Display",
+    mono: "Cascadia Mono",
+};
+
+fn ui(flavor: unlucky_design::color::SchemeFlavor) -> Ui {
+    Ui::with_platform(
+        flavor,
+        unlucky_design::typography::Platform::Windows,
+        FAMILIES,
+    )
+}
+
+#[test]
+fn the_card_takes_the_spec_corner_and_the_tile_padding() {
+    let ui = ui(unlucky_design::color::SchemeFlavor::Dark);
+    assert_eq!(ui.card_shape(), ShapeScale::Large, "规格卡 rx=16");
+    assert_eq!(ui.card_box().radius_px(), 16.0);
+    // 内距 **20**（不是规格卡的 24）：24 会让元信息卡的值串折行（复审 P1-2），
+    // 20 与描边卡同源（`LayoutMetrics::card_padding`），卡片宽度契约不变。
+    assert_eq!(PAD, 20.0);
+    assert_eq!(
+        PAD,
+        unlucky_design::spacing::LayoutMetrics::DESKTOP.card_padding
+    );
+    assert_eq!(PAD % unlucky_design::spacing::GRID, 0.0, "仍在 4px 栅格上");
+}
+
+#[test]
+fn the_typography_matches_the_spec_rows() {
+    let style = overline_style();
+    assert_eq!(style.size_px, 11.0, "上标注 11px");
+    assert_eq!(style.weight, Weight::SemiBold, "上标注 600（不是 500/700）");
+
+    // 值的字级：**12**（BodySmall），不是规格卡展示卡的 16 —— 16px 下时戳墨水宽 138px，
+    // 而 160 外框减两倍内距只有 120（复审 P1-2）。这条与 `pages/instances/tests.rs` 的不等式同源。
+    let title = TITLE_ROLE.style();
+    assert_eq!(TITLE_ROLE, TypeRole::BodySmall);
+    assert_eq!(title.size_px, 12.0, "值 12px");
+    assert_eq!(title.weight, Weight::Regular, "值 400");
+
+    let support = TypeRole::BodyMedium.style();
+    assert_eq!(support.size_px, 14.0, "副文案 13 → 取较大档 14");
+    assert_eq!(support.weight, Weight::Regular);
+}
+
+/// 卡片是**靠层级差站立**的：底色必须是 `SurfaceContainer`（画布上一档），不是画布色本身。
+#[test]
+fn the_card_surface_sits_one_step_above_the_canvas() {
+    for board in unlucky_design::color::BrandBoard::ALL {
+        let scheme = board.scheme();
+        assert_ne!(
+            board.get(Role::SurfaceContainer),
+            board.get(Role::Surface),
+            "{}：卡底与画布同色，卡会「消失」",
+            board.name()
+        );
+        // 无描边：卡的存在感只能来自这一档色差，所以必须 > 1.0（差多少属观感，D30 判）。
+        let card_vs_canvas = scheme.contrast(Role::SurfaceContainer, Role::Surface);
+        assert!(
+            card_vs_canvas > 1.0,
+            "{}：卡底对画布 {card_vs_canvas:.3}:1，看不出层级",
+            board.name()
+        );
+    }
+}
@@ -0,0 +1,7 @@
+//! 面类家族（目前只有 **ELEVATED CARD**，规格卡 `CARD / DIALOG / SNACKBAR / LIST` 的第一格）。
+//!
+//! 为什么单开一个家族而不是塞进 `feedback`：`feedback` 是「系统对用户动作的回应」（进度 / 对话框 /
+//! snackbar / 空态），卡是**静态容器**，语义上属于版式而不是反馈。家族边界写在这里，后来加
+//! 「带描边卡 / 列表行药丸」时按语义归位，不要因为「都在同一个规格卡小节里」就合进 `feedback`。
+
+pub mod elevated;
@@ -11,7 +11,6 @@ use iced::widget::{container, image, row, text};
 use iced::{Alignment, Background, Border, ContentFit, Element, Length, Pixels};

 use unlucky_design::color::Role;
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::icons::IconKind;
 use unlucky_design::shape::ShapeScale;
@@ -171,7 +170,7 @@ pub fn alert<'a>(
    .padding(ui.metrics().card_padding)
    .style(move |_theme| container::Style {
        background: Some(Background::Color(ui.layer(MaterialLayer::Card))),
-        border: ui.outlined(Component::OutlinedCard.spec().shape),
+        border: ui.outlined(ui.card_shape()),
        ..container::Style::default()
    })
    .into()
@@ -59,7 +59,6 @@ use iced::{
 };

 use unlucky_design::color::Role;
-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;
 use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::Space;
@@ -100,7 +99,7 @@ pub fn section<'a>(ui: &'a Ui, state: &'a State, lang: Lang) -> Element<'a, Mess

 /// 外观卡片：底色走 `ui.layer`（面板 α 的唯一来源），与其它页的卡片同源。
 fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
-    let spec = Component::OutlinedCard.spec();
+    let shape = ui.card_shape();
    let background = ui.layer(MaterialLayer::Card);

    container(content)
@@ -108,7 +107,7 @@ fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a,
        .padding(ui.metrics().card_padding)
        .style(move |_theme| container::Style {
            background: Some(Background::Color(background)),
-            border: ui.outlined(spec.shape),
+            border: ui.outlined(shape),
            ..container::Style::default()
        })
        .into()
@@ -105,9 +105,13 @@ pub fn demo(kind: ContentKind, lang: Lang) -> Content {
 }

 /// 页头那条一级切换（版本管理页也要用同一个函数：两页共用一个入口才不会各画一套）。
+///
+/// `on_content` 是**调用方自己**的位置：内容库页传 `true`、版本管理页传 `false`。
+/// M229 复审 F3 之前这里写死 `true`，于是下载页页头的「内容库」也画成选中态（选中态反了）。
 pub(crate) fn section_switcher<'a>(
    ui: &'a Ui,
    catalog: unlucky_i18n::Catalog,
+    on_content: bool,
 ) -> Element<'a, PageMessage> {
-    parts::section_switcher(ui, catalog, true)
+    parts::section_switcher(ui, catalog, on_content)
 }
@@ -98,3 +98,22 @@ fn the_default_demo_screen_has_no_retry_surface() {
        );
    }
 }
+
+/// M229 复审 F3 的回归门：页头一级切换的选中态由**调用方所在页**决定，不是写死「内容库」。
+///
+/// 抓得住：`download.rs` 又传回 `true`（下载页页头的「内容库」被画成选中，正是 F3 的现场）。
+/// 抓不住：像素长什么样（那要截图）；iced 的 `Element` 不可内省，所以这条从源码层面钉住调用点——
+/// 判据只有一行，读的人也不会误解。
+#[test]
+fn the_download_header_marks_versions_selected_not_content() {
+    let download = include_str!("../download.rs");
+    assert!(
+        download.contains("section_switcher(ui, catalog, false)"),
+        "下载页是「版本管理」那一侧，必须传 false（传 true = F3 复发）"
+    );
+    let content_view = include_str!("view.rs");
+    assert!(
+        content_view.contains("section_switcher(ui, catalog, true)"),
+        "内容库页自己那一份必须传 true"
+    );
+}
@@ -187,7 +187,9 @@ pub fn view_sized<'a>(
        .subtitle(catalog.text(Key::DownloadSubtitle))
        // M109：一级切换「版本管理 | 内容库」。两页共用同一条导航轨项（`NavSection::Download`），
        // 所以这个切换是进内容库的唯一产品入口——少了它，内容库只能靠 `ULL_START_ROUTE` 到达。
-        .action(content::section_switcher(ui, catalog))
+        // 本页是「版本管理」那一侧：`on_content = false`（传 true 会让「内容库」画成选中，
+        // 这正是 M229 复审 F3 的现场）。
+        .action(content::section_switcher(ui, catalog, false))
        .action(buttons::text(
            ui,
            Button::new(
@@ -32,15 +32,19 @@ pub const SCROLLBAR_WIDTH: f32 = 6.0;
 /// 滑块离卡片内边的留白（2px，避免贴边）。
 pub const SCROLLBAR_MARGIN: f32 = 2.0;

-/// 描边卡片（占位：M75 的 `components` 会提供真正的 `OutlinedCard`）。
+/// 描边卡片（长表单容器）。圆角取**规格卡**的 16（`Ui::card_shape`），不是组件表的 12。
+///
+/// M229 换肤：规格卡 `CARD` 小节把卡片画成 `rx=16`，而 `component_map` 的 `OutlinedCard` 是
+/// `Medium(12)`（官方值）。M228 把这条差异登记为「换肤时取 `inkcat::metrics::CARD`」，这里就是那次取值；
+/// 组件表的值不动（它还服务别的面）。描边仍走 `OutlineVariant` 1px。
 pub fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
-    let spec = Component::OutlinedCard.spec();
+    let shape = ui.card_shape();
    container(content)
        .width(Length::Fill)
        .padding(ui.metrics().card_padding)
        .style(move |_theme| container::Style {
            background: Some(Background::Color(ui.layer(MaterialLayer::Card))),
-            border: ui.outlined(spec.shape),
+            border: ui.outlined(shape),
            ..container::Style::default()
        })
        .into()
@@ -36,13 +36,15 @@ fn empty_state_follows_the_12b_reference() {
    const { assert!(EMPTY_ICON_GLYPH < EMPTY_ICON_BLOCK) };
 }

+/// 卡片圆角取**规格卡**的 16（M229 换肤），组件表 `OutlinedCard` 的 12 只作为对照保留。
 #[test]
-fn card_uses_the_outlined_card_spec() {
-    let spec = Component::OutlinedCard.spec();
-    assert_eq!(spec.shape, ShapeScale::Medium);
-    assert_eq!(ui().radius_dp(spec.shape).top_left, 12.0);
-    assert_eq!(spec.text, TypeRole::TitleMedium);
-    assert_eq!(spec.support, Some(TypeRole::BodySmall));
+fn card_uses_the_spec_corner_not_the_component_table() {
+    let ui = ui();
+    assert_eq!(ui.card_shape(), ShapeScale::Large);
+    assert_eq!(ui.radius_dp(ui.card_shape()).top_left, 16.0);
+    // 组件表的官方值仍是 12（表不动，差异登记在 `inkcat` 模块与 M229 报告里）。
+    assert_eq!(Component::OutlinedCard.spec().shape, ShapeScale::Medium);
+    assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
 }

 #[test]
@@ -15,6 +15,7 @@ use unlucky_presenter::router::Route;
 use crate::app::components::buttons::{self, Button};
 use crate::app::components::divider;
 use crate::app::components::interaction::Interaction;
+use crate::app::components::surfaces::elevated;
 use crate::theme::Ui;
 use unlucky_design::icons::IconKind;

@@ -229,26 +230,20 @@ fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, detail: &'a Detail) -> Eleme
    for chunk in detail.meta.chunks(columns) {
        let mut cells_row = row![].spacing(layout::META_GAP).width(Length::Fill);
        for cell in chunk {
-            let card = frame::card(
+            // M229：元信息卡 = 规格卡的 **ELEVATED CARD**（无描边、`SurfaceContainer` 底、16 圆角）。
+            // 内距 20 + 值 **12/400**（见 `elevated::PAD` / `elevated::TITLE_ROLE` 的登记）：
+            // 外框 160 − 2×20 = 120 必须放下
+            // 最长值串，24 + 16 会让时戳折行、同排卡底不齐（复审 P1-2）。
+            let card = elevated::card(
                ui,
-                column![
-                    frame::text_role(
-                        ui,
-                        TypeRole::LabelMedium,
-                        false,
-                        cell.label.as_str(),
-                        ui.color(Role::OnSurfaceVariant),
-                    ),
-                    frame::text_role(
-                        ui,
-                        TypeRole::BodyMedium,
-                        false,
-                        cell.value.as_str(),
-                        ui.color(Role::OnSurface)
-                    ),
-                ]
-                .spacing(ui.space(Space::X1))
-                .width(Length::Fill),
+                elevated::texts(
+                    ui,
+                    elevated::Texts {
+                        overline: Some(cell.label.as_str()),
+                        title: cell.value.as_str(),
+                        support: None,
+                    },
+                ),
            );
            cells_row = cells_row.push(container(card).width(Length::Fill));
        }
@@ -94,7 +94,8 @@ pub(super) fn section<'a>(
    body = body.push(backend_row(ui, facts, form, texts));
    body = body.push(actions_row(ui, texts));

-    // 与相邻信息卡**同一套**卡壳（`frame::card`：`card_padding` 21dp + OutlinedCard 的圆角/描边）。
+    // 与相邻**表单卡**同一套卡壳（`frame::card`：内距 `card_padding` 20 + 卡片圆角 16 + 1px 描边）。
+    // 注意元信息卡不在这条线上：它们现在是 ELEVATED CARD（无描边、内距 20、值 12px，见 `surfaces::elevated`）。
    super::super::frame::card(ui, body)
 }

@@ -158,39 +158,85 @@ fn the_detail_note_goes_through_the_prose_box() {
    );
 }

-/// 元信息卡必须装得下**卡内最长的那条值**（视觉 r2：136 漏算 padding，版本串折行让卡底不齐）。
+/// 元信息卡必须装得下**卡内最长的那条值**（视觉 r2：136 漏算 padding；M229 复审 P1-2 换成
+/// ELEVATED CARD 之后内距 24 + 值 16px 又让它折行，同排卡底不齐）。
+///
+/// ## 判据是「墨水宽 ≤ 内宽」，数值是**量出来的**（不是算出来的）
+///
+/// 最长的那条值是 LAST PLAYED 的时戳 `2026-10-29 19:22 UTC`（20 字符，比加载器版本串长）。
+/// 量法：`page-instances-detail-dark.png`（1180×760，2 列布局）右卡的值行 y 440–448，
+/// 墨水横向 706…823 = **118px**，而卡内宽 = 外框 − 2×内距。两个档位都量过：
+///
+/// | 值字级 | 时戳墨水宽 | 160 外框（内宽 120）下 |
+/// |---|---|---|
+/// | `BodyMedium` 14 | **138px** | 放不下（折行 ⇒ 卡底不齐） |
+/// | `BodySmall` **12** | **118px** | 放得下（余 2px；实际 2 列宽 206 余 62px） |
+///
+/// 所以 `elevated::TITLE_ROLE` 是 `BodySmall`、`elevated::PAD` 是 20 —— 这两件事**必须一起改**，
+/// 本测试把它们与卡片外框绑在同一条不等式上；任何一项回退（值改回 14、内距改回 24）都会红。
 #[test]
-fn meta_card_is_wide_enough_for_the_longest_value() {
+fn meta_card_value_fits_on_one_line_at_the_narrowest_card() {
    use super::super::layout::{measure_cap_px, META_CARD_MIN_WIDTH, META_GAP};
-    use unlucky_design::spacing::LayoutMetrics;
+    use crate::app::components::surfaces::elevated;

-    // 实测（Segoe UI 14px）：demo 数据里最宽的元信息值是加载器版本串
-    const LONGEST_VALUE: &str = "NeoForge 20.4.237";
-    const LONGEST_VALUE_PX: f32 = 118.0;
+    /// 时戳在 `BodySmall`(12px) 下的墨水宽（量法见函数文档）。
+    const TIMESTAMP_PX_AT_12: f32 = 118.0;
+    /// 同一个串在 `BodyMedium`(14px) 下的墨水宽——留在这里是为了让「改回 14」的人一眼看到代价。
+    const TIMESTAMP_PX_AT_14: f32 = 138.0;

-    let padding = LayoutMetrics::DESKTOP.card_padding;
-    assert_eq!(padding, 20.0, "卡内边距来自令牌");
-
-    // 夹具与 demo 数据不许脱节：这个值必须真在 DEMO 里
-    assert!(
-        DEMO.iter().any(|entry| entry.loader == LONGEST_VALUE),
-        "夹具 {LONGEST_VALUE:?} 已经不在 DEMO 里了，请重新量最长值"
+    // 量测对象是**产品那条格式化函数的输出**（`app::view::instances::last_played`：
+    // `{date} {time} UTC`），它的格式与两个边界样例由 `app/view/tests.rs::…last_played…` 钉着，
+    // 所以这里只钉「这条串有多少字」——20 字符，是全站最长的元信息值。
+    const LONGEST_VALUE: &str = "2026-10-29 19:22 UTC";
+    assert_eq!(
+        LONGEST_VALUE.chars().count(),
+        20,
+        "最长元信息值的字符数变了就要重新量墨水宽"
    );

-    // ① 单卡外框减掉两侧内边距，必须放得下这条值（否则 text 会按词折行 → 卡底不齐）
-    let inner = META_CARD_MIN_WIDTH - 2.0 * padding;
+    // ① 字级与内距是**一对**：先钉住两个常量，再钉不等式（否则改字级不会红）。
+    let role = elevated::TITLE_ROLE;
+    assert_eq!(role, unlucky_design::typography::TypeRole::BodySmall);
+    assert_eq!(
+        role.style().size_px,
+        12.0,
+        "值字级必须是 12px（14px 下时戳 138px 放不下）"
+    );
+    assert_eq!(
+        elevated::PAD,
+        20.0,
+        "卡内距是 20（规格卡的 24 会挤到 166 > 160）"
+    );
+    assert_eq!(
+        elevated::PAD,
+        unlucky_design::spacing::LayoutMetrics::DESKTOP.card_padding,
+        "内距与描边卡同源（20）"
+    );
+    // 绑定成局部变量再过断言：全是常量的话 clippy 会判「常量断言」（评审集里的既有写法）。
+    let measured_14 = TIMESTAMP_PX_AT_14;
+    let inner_min_width = META_CARD_MIN_WIDTH - 2.0 * elevated::PAD;
    assert!(
-        inner >= LONGEST_VALUE_PX,
-        "卡内可用 {inner}px 装不下 {LONGEST_VALUE_PX}px 的 {LONGEST_VALUE:?}（外框 {META_CARD_MIN_WIDTH} − 2×{padding}）"
+        measured_14 > inner_min_width,
+        "如果 14px 也能放下（{measured_14} ≤ {inner_min_width}），这条登记就该删掉"
    );

-    // ② 实际版面里每张卡的内宽（2 列时）也要够
+    // ② 最窄的外框（160）减掉两侧内距，必须放得下 12px 的时戳。
+    let inner_min = META_CARD_MIN_WIDTH - 2.0 * elevated::PAD;
+    assert!(
+        inner_min >= TIMESTAMP_PX_AT_12,
+        "最窄卡内宽 {inner_min}px 装不下 {TIMESTAMP_PX_AT_12}px 的时戳（外框 {META_CARD_MIN_WIDTH} − 2×{}）",
+        elevated::PAD
+    );
+
+    // ③ 实际版面（2 列，行宽上限 424）也要放得下——这是出图那一档。
    let two_columns = (measure_cap_px() - META_GAP) / 2.0;
    assert!(
-        two_columns - 2.0 * padding >= LONGEST_VALUE_PX,
-        "两列布局下卡内可用 {}px 装不下 {LONGEST_VALUE_PX}px",
-        two_columns - 2.0 * padding
+        two_columns - 2.0 * elevated::PAD >= TIMESTAMP_PX_AT_12,
+        "两列布局下卡内可用 {}px 装不下 {TIMESTAMP_PX_AT_12}px",
+        two_columns - 2.0 * elevated::PAD
    );
+    // 卡片宽度契约没动（复审要求「不破卡片宽度契约」）。
+    assert_eq!(META_CARD_MIN_WIDTH, 160.0);
 }

 #[test]
@@ -18,7 +18,6 @@
 use iced::widget::{container, scrollable};
 use iced::{Background, Element, Length};

-use unlucky_design::component_map::Component;
 use unlucky_design::elevation::MaterialLayer;

 use crate::theme::Ui;
@@ -33,7 +32,7 @@ pub fn card<'a>(
    height: Length,
    content: impl Into<Element<'a, Message>>,
 ) -> Element<'a, Message> {
-    let shape = Component::OutlinedCard.spec().shape;
+    let shape = ui.card_shape();

    container(content)
        .width(Length::Fill)
@@ -8,6 +8,7 @@
 //! 同一条纪律）；app 层只做一次 `.map`。

 use unlucky_i18n::LangChoice;
+use unlucky_presenter::prefs::ThemeMode;
 use unlucky_presenter::router::Route;

 use super::appearance;
@@ -29,6 +30,11 @@ pub enum Message {
    Launch(String),
    /// 停止某实例（app 层翻成 `AppCommand::StopInstance`）。
    Stop(String),
+    /// 切主题档（M229：设置页「通用 → 主题」的 Ink / Silver / 跟随系统三档）。
+    ///
+    /// 载荷是 `ThemeMode` 而不是色板枚举：Ink / Silver 就是 `dark` / `light` 两侧的**产品名**，
+    /// 第三档 `auto` 由系统深浅落到对应色板。落盘键仍是 `appearance.theme_mode`。
+    Theme(ThemeMode),
    /// 外观项改动（设置页「外观」分组 → `App` 的状态与落盘）。
    ///
    /// 载荷是**用户请求值**（未钳位）：钳位与 CPU 档降级在 `appearance::alpha` 里做，
@@ -29,9 +29,11 @@
 //! 3. **文案全部走 catalog**（[`Key`]），三档选项名跟着界面语言走（见 `catalog/general.rs`
 //!    的头注释：为什么不写语言自称）。
 //!
-//! ## 其余三行仍只读
+//! ## 主题行已接真控件（M229），另两行仍只读
 //!
-//! 主题 / 启动页 / 关闭按钮还没有后端（`pages::Action` 里是占位动作），所以它们是**只读行**；
+//! 主题三档（Ink / Silver / 跟随系统）在 M229 接成真控件：点一下换色板 + 落盘
+//! `appearance.theme_mode`（实现在 `general/theme.rs`，消息是 `pages::Message::Theme`）。
+//! 启动页 / 关闭按钮还没有后端（`pages::Action` 里是占位动作），仍是**只读行**；
 //! 但标签与取值已经进 catalog，中文界面下不会再冒出英文。
 //!
 //! 分组元数据只有一份（这里的 [`GROUP`]）：`settings/mod.rs` 的 `GROUPS` 直接引用它。
@@ -41,7 +43,6 @@ use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow, Them

 use unlucky_design::color::{Role, StateLayer};
 use unlucky_design::icons::IconKind;
-use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::Space;
 use unlucky_design::typography::TypeRole;
 use unlucky_i18n::catalog::Key;
@@ -52,16 +53,18 @@ use crate::pages::{frame, Language, Message};
 use crate::theme::Ui;

 use super::frame::{card, divider};
-use super::Group;
+use super::{Group, States};
+
+mod theme;

 /// General 分组（左列名固定英文：左列是**导航**，与导航轨同源，不进 catalog）。
 pub(super) const GROUP: Group = Group {
    name: "General",
    icon: IconKind::Settings,
    // 只给 harness（`pages_demo` 走 `appearance: None` 时）用的演示行：产品路径走 [`body`]。
-    // 语言那一行**不在**这里——它的值是要跟着语言变的，写死在静态表里就是用户看到的那条假值。
+    // 语言与主题那两行**不在**这里——它们的值跟着语言/档位变，写死在静态表里就是用户看到的假值
+    // （语言 M106 移出、主题 M229 移出）。
    rows: &[
-        ("Theme", "Follow system"),
        ("Startup page", "Instances"),
        ("Close button", "Exit to tray"),
    ],
@@ -69,7 +72,7 @@ pub(super) const GROUP: Group = Group {
 };

 /// 这一组的正文（**产品路径**）。
-pub(super) fn body<'a>(ui: &'a Ui, language: Language) -> Element<'a, Message> {
+pub(super) fn body<'a>(ui: &'a Ui, states: States<'a>, language: Language) -> Element<'a, Message> {
    let catalog = language.effective.catalog();
    let mut stacked = column![].spacing(0.0).width(Length::Fill);
    stacked = stacked.push(language_row(ui, language));
@@ -78,14 +81,22 @@ pub(super) fn body<'a>(ui: &'a Ui, language: Language) -> Element<'a, Message> {
    stacked = stacked.push(divider(ui));
    stacked = stacked.push(font_row(ui, language));

-    // M188：日志文件夹（路径 + 打开 + 复制路径）。放在「主题/启动页」之前——用户投诉
+    // M229：主题行接真控件（Ink / Silver / 跟随系统）。档位住在设置组的自有状态里
+    // （`language_appearance::State::theme`），与语言行同一个排版：标题 + 三枚互斥 chip + 一句说明。
+    stacked = stacked.push(divider(ui));
+    stacked = stacked.push(theme::view(
+        ui,
+        &catalog,
+        states.groups.language_appearance.theme,
+    ));
+
+    // M188：日志文件夹（路径 + 打开 + 复制路径）。放在「启动页/关闭按钮」之前——用户投诉
    // 「找不到崩溃日志」要的答案，不该埋在只读行后面。
    stacked = stacked.push(divider(ui));
    stacked = stacked.push(super::logs_row::folder_row(ui, &catalog));

-    // 主题 / 启动页 / 关闭按钮：还没有后端，只读；文案已经进 catalog。
+    // 启动页 / 关闭按钮：还没有后端，只读；文案已经进 catalog。
    for (label, value) in [
-        (Key::SettingsTheme, Key::SettingsThemeFollowSystem),
        (Key::SettingsStartupPage, Key::SettingsStartupInstances),
        (Key::SettingsCloseButton, Key::SettingsCloseToTray),
    ] {
@@ -290,14 +301,20 @@ fn setting_row<'a>(ui: &'a Ui, label: &'a str, value: &'a str) -> Element<'a, Me

 /// 一个互斥按钮（选中态 `SecondaryContainer`，未选中透明 + `OnSurfaceVariant`）。
 ///
-/// 与 `pages/appearance/section/mod.rs` 的 `choice` 同款，但文案来自 catalog（那份是英文基线）。
+/// 与 `pages/appearance/section/mod.rs` 的 `choice` 同款几何，但文案来自 catalog（那份是英文基线）。
+///
+/// **几何（M229）**：取规格卡的 chip（高 32、圆角 8、内距 16、未选中 1px `OutlineVariant`），
+/// 与同屏的主题三档 chips 完全同源——两行都是「并排的互斥筛选」，长得不一样会让读者以为是
+/// 两种控件（M229 第一版就是这样：语言 40 高药丸、主题 32 高方角，出图一眼就不齐）。
 fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> Element<'a, Message> {
-    let height = ui.metrics().control_height;
+    let box_ = unlucky_design::inkcat::metrics::CHIP;
+    let height = box_.height;
    let content_color = if selected {
        ui.color(Role::OnSecondaryContainer)
    } else {
        ui.color(Role::OnSurfaceVariant)
    };
+    let border_color = ui.color(Role::OutlineVariant);

    button(
        container(frame::text_role(
@@ -310,7 +327,10 @@ fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> El
        .align_y(Alignment::Center),
    )
    .height(height)
-    .padding(Padding::from([0.0, ui.space(Space::X3)]))
+    .padding(Padding::from([
+        0.0,
+        unlucky_design::inkcat::metrics::CHIP_PAD_X,
+    ]))
    .style(move |_theme: &IcedTheme, status| {
        let background = if selected {
            Some(Background::Color(ui.color(Role::SecondaryContainer)))
@@ -328,8 +348,13 @@ fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, choice: LangChoice) -> El
            background,
            text_color: content_color,
            border: Border {
-                radius: ui.radius(ShapeScale::Full, height),
-                ..Border::default()
+                color: border_color,
+                width: if selected {
+                    0.0
+                } else {
+                    crate::theme::STROKE_PX
+                },
+                radius: ui.radius(box_.shape, height),
            },
            shadow: Shadow::default(),
            snap: true,
@@ -0,0 +1,163 @@
+//! 设置页「General → 主题」行：Ink / Silver / 跟随系统三档（M229）。
+//!
+//! 从 `general.rs` 拆出来的理由只有一条：加这三档之后那个文件 474 行（400 行硬线）。
+//! 拆法是「整段搬走 + 一个 `pub(super) fn view` 入口」（起初叫 `row`，与 `iced::widget::row`
+//! 撞名后改名）；搬出的函数体只改了「未选中态补 1px `OutlineVariant` 描边」这一处，
+//! 目的是与同页语言行的 chip 同几何（复审 F2 之后两行才对齐）。
+//!
+//! 三档的语义：**Ink = 深色主方案、Silver = 浅色主方案**，落盘取值仍是 `appearance.theme_mode`
+//! 的 `dark` / `light`；第三档「跟随系统」= `auto`，由系统深浅落到对应色板
+//! （`BrandBoard::for_flavor`）。所以这里**不新增配置键**，旧配置读进来语义也一致。
+
+use iced::widget::{button, column, container, row};
+use iced::{Alignment, Background, Border, Element, Length, Padding, Shadow, Theme as IcedTheme};
+
+use unlucky_design::color::{Role, StateLayer};
+use unlucky_design::inkcat::metrics as chipbox;
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::TypeRole;
+use unlucky_i18n::catalog::{Catalog, Key};
+use unlucky_presenter::prefs::ThemeMode;
+
+use crate::pages::{frame, Message};
+use crate::theme::Ui;
+
+/// 三档全序（Ink / Silver / 跟随系统）：`ThemeMode` 在 presenter，声明序是 `Auto/Light/Dark`，
+/// 画出来的顺序按「深 → 浅 → 跟随」，所以这里另给一张表，不靠枚举声明序。
+pub(super) const THEME_MODES: [ThemeMode; 3] = [ThemeMode::Dark, ThemeMode::Light, ThemeMode::Auto];
+
+/// 主题行：标题 + 三档互斥 chip + 一句说明（排版与语言行同族）。
+pub(super) fn view<'a>(ui: &'a Ui, catalog: &Catalog, mode: ThemeMode) -> Element<'a, Message> {
+    let head = row![
+        container(frame::text_role(
+            ui,
+            TypeRole::BodyMedium,
+            false,
+            catalog.text(Key::SettingsTheme),
+            ui.color(Role::OnSurface),
+        ))
+        .width(Length::Fill)
+        .align_y(Alignment::Center),
+        frame::text_role(
+            ui,
+            TypeRole::LabelLarge,
+            true,
+            catalog.text(mode_label(mode)),
+            ui.color(Role::OnPrimaryFixedVariant),
+        ),
+    ]
+    .width(Length::Fill)
+    .align_y(Alignment::Center);
+
+    let chips = row(THEME_MODES
+        .iter()
+        .map(|choice| {
+            chip(
+                ui,
+                catalog.text(mode_label(*choice)),
+                *choice == mode,
+                *choice,
+            )
+        })
+        .collect::<Vec<_>>())
+    .spacing(ui.space(Space::X1))
+    .align_y(Alignment::Center);
+
+    column![
+        head,
+        chips,
+        frame::text_role(
+            ui,
+            TypeRole::BodySmall,
+            false,
+            catalog.text(Key::SettingsThemeHint),
+            ui.color(Role::OnSurfaceVariant),
+        ),
+    ]
+    .spacing(ui.space(Space::X1))
+    .width(Length::Fill)
+    .padding(Padding::from([ui.space(Space::X2), 0.0]))
+    .into()
+}
+
+/// 一档主题的选项名（Ink / Silver / 跟随系统）。
+fn mode_label(mode: ThemeMode) -> Key {
+    match mode {
+        ThemeMode::Dark => Key::SettingsThemeInk,
+        ThemeMode::Light => Key::SettingsThemeSilver,
+        ThemeMode::Auto => Key::SettingsThemeFollowSystem,
+    }
+}
+
+/// 一枚主题档位按钮（选中态 `SecondaryContainer`，未选中透明 + 1px `OutlineVariant`）。
+///
+/// 几何取规格卡的 chip（高 32、圆角 8，`inkcat::metrics::CHIP`）：主题三档是**可并排的筛选**，
+/// 不是主行动按钮，用 chip 档比语言行那枚 40 高药丸更贴规格卡。
+fn chip<'a>(ui: &'a Ui, text: &'a str, selected: bool, mode: ThemeMode) -> Element<'a, Message> {
+    let box_ = chipbox::CHIP;
+    let height = box_.height;
+    let content_color = if selected {
+        ui.color(Role::OnSecondaryContainer)
+    } else {
+        ui.color(Role::OnSurfaceVariant)
+    };
+    let border_color = ui.color(Role::OutlineVariant);
+    let stroke = crate::theme::STROKE_PX;
+
+    button(
+        container(frame::text_role(
+            ui,
+            TypeRole::LabelLarge,
+            selected,
+            text,
+            content_color,
+        ))
+        .align_y(Alignment::Center),
+    )
+    .height(height)
+    .padding(Padding::from([0.0, chipbox::CHIP_PAD_X]))
+    .style(move |_theme: &IcedTheme, status| {
+        let background = if selected {
+            Some(Background::Color(ui.color(Role::SecondaryContainer)))
+        } else if matches!(status, button::Status::Hovered | button::Status::Pressed) {
+            Some(Background::Color(ui.state_over(
+                StateLayer::Hover,
+                Role::OnSurface,
+                Role::Surface,
+            )))
+        } else {
+            None
+        };
+
+        button::Style {
+            background,
+            text_color: content_color,
+            border: Border {
+                color: border_color,
+                width: if selected { 0.0 } else { stroke },
+                radius: ui.radius(box_.shape, height),
+            },
+            shadow: Shadow::default(),
+            snap: true,
+        }
+    })
+    .on_press(Message::Theme(mode))
+    .into()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    /// 三档 = 两块板 + 一种跟随，顺序是深 → 浅 → 跟随（换序会让「Ink 在最左」这条观感失守）。
+    #[test]
+    fn the_three_modes_are_ink_silver_and_follow_system() {
+        assert_eq!(
+            THEME_MODES,
+            [ThemeMode::Dark, ThemeMode::Light, ThemeMode::Auto]
+        );
+        assert_eq!(mode_label(ThemeMode::Dark), Key::SettingsThemeInk);
+        assert_eq!(mode_label(ThemeMode::Light), Key::SettingsThemeSilver);
+        assert_eq!(mode_label(ThemeMode::Auto), Key::SettingsThemeFollowSystem);
+    }
+}
@@ -21,10 +21,16 @@

 /// 语言 + 外观线的状态（**只归本线**）。
 ///
-/// 首版是空结构：这一条线还没有自己的运行期状态（外观那份状态是 `pages::appearance::State`，
-/// 归 M93，走 `States::appearance` 那条既有通道，不在这里）。加字段只改本文件。
+/// 外观那份运行期状态是 `pages::appearance::State`（M93），走 `States::appearance` 那条既有通道，
+/// 不在这里。本结构只装**分组自己的**档位：M229 起主题三档（Ink / Silver / 跟随系统）住这儿，
+/// 由 `app` 在启动与切换时同步（唯一写者见 `app/state/theme.rs::set_theme_mode`）。
+///
+/// 初值 `Auto`：harness / 演示路径没有配置可读，跟随系统正是出厂值。
 #[derive(Debug, Default)]
-pub struct State {}
+pub struct State {
+    /// 当前主题档（Ink = `Dark` / Silver = `Light` / 跟随系统 = `Auto`）。
+    pub theme: unlucky_presenter::prefs::ThemeMode,
+}

 /// 语言 + 外观线的消息（**只归本线**）。
 ///
@@ -358,7 +358,7 @@ fn section_columns<'a>(
        // 档位与生效语言不在 [`States`] 里，只能从 `pages::Language` 进来；它与 `appearance` 在不在场
        // 无关（harness 那条路径也画得出真控件）。
        let card = if index == GENERAL_GROUP {
-            general::body(ui, language)
+            general::body(ui, states, language)
        } else if index == UPDATE_GROUP {
            // M159：更新组读 presenter 快照（`view` 的 `update` 形参），与 General 同一条按下标分发。
            update::body(ui, update, language.effective)
@@ -17,20 +17,19 @@ use unlucky_design::icons::IconKind;
 use unlucky_i18n::LangChoice;
 use unlucky_i18n::{Key, Lang};

-/// 这一组的**静态演示行**：语言那一行已经换真控件，所以只剩三行。
+/// 这一组的**静态演示行**：语言（M106）与主题（M229）都已经换成真控件，所以只剩两行。
 ///
-/// 抓得住：①四条线并行合并时把别人的行粘到本文件；②语言行被「顺手」加回静态表——
-/// 那等于把用户看到的假值又写回去（它的值必须跟着语言变，静态表做不到）。
-/// 抓不住：真控件画出来长什么样（那是截图验收的事，见 `DevDocs/artifacts/m106/`）。
+/// 抓得住：①四条线并行合并时把别人的行粘到本文件；②语言/主题被「顺手」加回静态表——
+/// 那等于把用户看到的假值又写回去（它们的值必须跟着语言/档位变，静态表做不到）。
+/// 抓不住：真控件画出来长什么样（那是截图验收的事，见 `DevDocs/artifacts/m229/`）。
 #[test]
-fn the_general_group_keeps_theme_startup_and_close_as_static_rows() {
+fn the_general_group_keeps_only_the_two_rows_without_a_backend() {
    let rows: Vec<(&str, &str)> = general::GROUP.rows.to_vec();
    assert_eq!(
        rows,
        vec![
-            ("Theme", "Follow system"),
            ("Startup page", "Instances"),
-            ("Close button", "Exit to tray"),
+            ("Close button", "Exit to tray")
        ]
    );
 }
@@ -7,7 +7,7 @@
 //! | 标题栏高度 | 16.2 桌面标题栏 **40**（登记偏离） | `LM.titlebar_height = 48`（M63 §1.4/R13 桌面档，令牌优先） |
 //! | 标题栏按钮 | 16.5 官方图标 **24** → 本项目 **20**（M86 项目偏离，用户点名「图标稍大」） | `icons::CAPTION_PX`（令牌 `TITLEBAR_CAPTION_ICON_PX`）+ `LM.titlebar_button_width = 46` |
 //! | 页头 | 16.1 官方 AppBar **64**；本项目 **56** | `LM.page_header_height = 56`（已有偏离登记） |
-//! | 卡片 | 3.x Outlined：**Medium(12)**、L0、`OutlineVariant` 1px、`SurfaceContainerLow` | `Component::OutlinedCard.spec()` + `STROKE_PX` |
+//! | 卡片 | 3.x Outlined，圆角取**规格卡 16**（`Large`；组件表 `OutlinedCard` 的官方值是 12）、`OutlineVariant` 1px、卡片层底 | `Ui::card_shape()` + `STROKE_PX` |
 //! | 字级 | 16.4 标题 `TitleLarge`；卡片 `TitleMedium` / `BodySmall` | `Ui::style` / `Ui::emphasized` |
 //!
 //! 导航轨在 [`nav`] 子模块里（12b §5 的判据表也在那边）。
@@ -1,8 +1,20 @@
-//! 令牌 → iced 类型（`Color` / `Font` / `Border` / `Radius` / `Theme`）。
+//! # 令牌 → iced 类型（`Color` / `Font` / `Border` / `Radius` / `Theme`）。
 //!
 //! 本模块是**唯一**允许把 `unlucky-design` 的值翻成 iced 类型的地方（M61 §0）：组件层只调
 //! [`Ui`]，绝不出现色值/字号/半径/间距字面量（`tests/no_hardcoded_tokens.rs` 扫 `src/**`）。
 //!
+//! ## 两套来源：品牌色板（出厂）与取色方案（D38）
+//!
+//! M229 起 [`Ui::new`] 走 **品牌色板**（[`BrandBoard`]：Ink = 深色主方案 / Silver = 浅色主方案），
+//! `Scheme::baseline`（tone 派生）退回它本来的角色——D38 取色链的中性锚点。两条路径并列：
+//!
+//! - [`Ui::brand`]：出厂外观，色板自己决定深浅（[`BrandBoard::flavor`]）；
+//! - [`Ui::from_scheme`]：背景图 / 壁纸取色成功时接管 49 个角色（取色失败回落色板）；
+//! - [`Ui::baseline`]：老的 tone 派生口径，只给对照与测试用（产品路径不再默认走它）。
+//!
+//! 「跟随系统」是**设置层的第三种态**，不是第三套板：系统浅色 → Silver、系统深色 → Ink
+//! （[`BrandBoard::for_flavor`]）。色板始终只有两套。
+//!
 //! ## 为什么不用 `iced::theme::Base` 承载 49 个角色
 //!
 //! iced 的 `Palette` 只有 6 色，M3 有 49 个角色（M60 Q5）：真源是本模块的 [`Scheme`]，`Theme`
@@ -13,8 +25,9 @@ use iced::border::Radius;
 use iced::theme::Palette;
 use iced::{Border, Color, Font, Theme};

-use unlucky_design::color::{Role, Scheme, SchemeFlavor, StateLayer};
+use unlucky_design::color::{BrandBoard, Role, Scheme, SchemeFlavor, StateLayer};
 use unlucky_design::elevation::MaterialLayer;
+use unlucky_design::inkcat::metrics::{self as inkcat, SpecBox};
 use unlucky_design::shape::ShapeScale;
 use unlucky_design::spacing::{LayoutMetrics, Space};
 use unlucky_design::typography::{FontFamily, Platform, TypeRole, TypeStyle, Weight};
@@ -40,6 +53,8 @@ pub struct Families {
 #[derive(Debug, Clone)]
 pub struct Ui {
    scheme: Scheme,
+    /// 当前色板（Ink / Silver）。`from_scheme` 时取方案深浅对应的那块，`name()` 与图例用它。
+    board: BrandBoard,
    platform: Platform,
    metrics: LayoutMetrics,
    families: Families,
@@ -48,15 +63,28 @@ pub struct Ui {
 }

 impl Ui {
-    /// 按平台（由 `cfg!` 决定）与令牌基线方案求值。
+    /// 按平台（由 `cfg!` 决定）与**品牌色板**求值：深浅决定色板（浅 → Silver / 深 → Ink）。
+    ///
+    /// 这是产品出厂外观的唯一入口（M229）：`DesignTokens::brand(BrandBoard::for_flavor(flavor))`。
    pub fn new(flavor: SchemeFlavor, families: Families) -> Self {
        Self::with_platform(flavor, Platform::current(), families)
    }

    /// 显式指定平台（跨平台核对与测试用）。
    pub fn with_platform(flavor: SchemeFlavor, platform: Platform, families: Families) -> Self {
+        Self::with_board(BrandBoard::for_flavor(flavor), platform, families)
+    }
+
+    /// 按**指定色板**求值（色板自己决定深浅，见 [`BrandBoard::flavor`]）。
+    pub fn brand(board: BrandBoard, families: Families) -> Self {
+        Self::with_board(board, Platform::current(), families)
+    }
+
+    /// 指定色板 + 平台（截图与测试用）。
+    pub fn with_board(board: BrandBoard, platform: Platform, families: Families) -> Self {
        Self {
-            scheme: Scheme::baseline(flavor),
+            scheme: board.scheme(),
+            board,
            platform,
            metrics: LayoutMetrics::DESKTOP,
            families,
@@ -64,17 +92,30 @@ impl Ui {
        }
    }

+    /// tone 派生的 `Scheme::baseline` 口径（D38 取色链的中性锚点；产品路径不再默认走它）。
+    ///
+    /// 留成公开入口是为了对照与测试：`Ui::new(flavor)` 与它在**颜色上不同**，那是 M229 的换肤。
+    pub fn baseline(flavor: SchemeFlavor, families: Families) -> Self {
+        Self::from_scheme(Scheme::baseline(flavor), families)
+    }
+
    /// 当前深浅。
    pub fn flavor(&self) -> SchemeFlavor {
        self.scheme.flavor()
    }

-    /// 用**已解析的方案**构造求值器（D38：背景图 / 壁纸取色 → 49 个角色换掉 baseline）。
+    /// 当前色板（Ink / Silver）。
+    pub fn board(&self) -> BrandBoard {
+        self.board
+    }
+
+    /// 用**已解析的方案**构造求值器（D38：背景图 / 壁纸取色 → 49 个角色换掉色板）。
    ///
-    /// 追加式入口：`new` / `with_platform` 的行为一字未动（默认仍是 [`Scheme::baseline`]）；
-    /// 平台与骨架尺寸仍按当前环境求值——方案只带颜色。
+    /// 色板字段取方案深浅对应的那块（`Light → Silver` / `Dark → Ink`）：取色方案只换颜色，
+    /// 不改变「这一屏是深色还是浅色」，所以 `name()` 仍然说实话。
    pub fn from_scheme(scheme: Scheme, families: Families) -> Self {
        Self {
+            board: BrandBoard::for_flavor(scheme.flavor()),
            scheme,
            platform: Platform::current(),
            metrics: LayoutMetrics::DESKTOP,
@@ -108,6 +149,19 @@ impl Ui {
        to_iced(self.scheme.get(role))
    }

+    /// 当前生效的 **49 角色方案**（品牌色板 / D38 取色方案，二选一的那一份）。
+    ///
+    /// 凡是要**在令牌侧合成颜色**的地方（禁用态 38% 叠底、对话框遮罩 scrim、状态层叠色）都必须
+    /// 从这里取，**不许**再 `Scheme::baseline(self.flavor())` 重算：
+    ///
+    /// - 重算出来的永远是 tone 派生的旧色（天蓝中性），品牌板上的禁用滑块轨道、填充框、遮罩会
+    ///   各画各的（M229 复审 F1 实测：Ink 下三个蓝系像素值，应为绿系去饱和、遮罩为中性
+    ///   绿黑；具体数值与出处见 `DevDocs/artifacts/m229/README.md` §6）。
+    /// - 取色方案（D38）成功时也必须同源，否则「取色接管 49 个角色」这件事在禁用态上破一个洞。
+    pub fn scheme(&self) -> &Scheme {
+        &self.scheme
+    }
+
    /// 材质层（Canvas/Card/Overlay）→ 容器色；**只有令牌允许半透明的层才乘面板 α**（M93 唯一来源）。
    ///
    /// α 乘在这里而不是调用点：所有表面色都从这里出去（根容器/标题栏/导航轨/页头带/卡片），
@@ -150,6 +204,20 @@ impl Ui {
        Radius::new(shape.radius_px(side))
    }

+    /// **规格卡口径的卡片方框**（`ELEVATED CARD` / `CARD`，`inkcat::metrics::CARD`）。
+    ///
+    /// 与 `component_map` 的 `OutlinedCard = Medium(12)` 差 4：规格卡画的是 `rx=16`（Large），
+    /// M228 的 `inkcat` 模块把这条差异登记为「换肤时取 `CARD`」，M229 就是那次换肤。表值不动
+    /// （它还服务别的面），页面卡片统一从这里取。
+    pub fn card_box(&self) -> SpecBox {
+        inkcat::CARD
+    }
+
+    /// 卡片圆角档（= [`Self::card_box`] 的 `shape`，即 `ShapeScale::Large` = 16）。
+    pub fn card_shape(&self) -> ShapeScale {
+        self.card_box().shape
+    }
+
    /// 固定档圆角。`ShapeScale::Full` 必须走 [`Ui::radius`]（它没有绝对值）。
    pub fn radius_dp(&self, shape: ShapeScale) -> Radius {
        debug_assert!(
@@ -225,10 +293,14 @@ impl Ui {
    }

    /// `Theme::name()` 的取值（稳定字符串，改名要先在协作文档登记）。
+    ///
+    /// M229 起按**色板**取名（`ull-ink` / `ull-silver`）：换肤之后「深色」这个词不再等于
+    /// 「M3 深色 tone 派生」，名字必须能区分「是哪块板」。D38 取色方案仍叫它所属深浅的那块
+    /// （取色只换颜色，不换深浅）。
    pub fn name(&self) -> &'static str {
-        match self.flavor() {
-            SchemeFlavor::Light => "ull-m3-light",
-            SchemeFlavor::Dark => "ull-m3-dark",
+        match self.board {
+            BrandBoard::Ink => "ull-ink",
+            BrandBoard::Silver => "ull-silver",
        }
    }
 }
@@ -254,147 +326,4 @@ pub fn weight_of(weight: Weight) -> iced::font::Weight {
 }

 #[cfg(test)]
-mod tests {
-    use super::*;
-
-    const FAMILIES: Families = Families {
-        text: "Segoe UI Variable Text",
-        display: "Segoe UI Variable Display",
-        mono: "Cascadia Mono",
-    };
-
-    fn ui(flavor: SchemeFlavor) -> Ui {
-        Ui::with_platform(flavor, Platform::Windows, FAMILIES)
-    }
-
-    #[test]
-    fn theme_name_tracks_the_flavor() {
-        assert_eq!(ui(SchemeFlavor::Light).name(), "ull-m3-light");
-        assert_eq!(ui(SchemeFlavor::Dark).name(), "ull-m3-dark");
-        assert_ne!(
-            ui(SchemeFlavor::Light).theme().to_string(),
-            ui(SchemeFlavor::Dark).theme().to_string()
-        );
-    }
-
-    #[test]
-    fn canvas_card_overlay_follow_surface_containers() {
-        let ui = ui(SchemeFlavor::Light);
-        assert_eq!(ui.layer(MaterialLayer::Canvas), ui.color(Role::Surface));
-        assert_eq!(
-            ui.layer(MaterialLayer::Card),
-            ui.color(Role::SurfaceContainerLow)
-        );
-        assert_eq!(
-            ui.layer(MaterialLayer::Overlay),
-            ui.color(Role::SurfaceContainerHigh)
-        );
-    }
-
-    #[test]
-    fn radii_only_come_from_the_scale() {
-        let ui = ui(SchemeFlavor::Light);
-        // 卡片 Medium(12)：边长够大时就是 12
-        assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
-        assert_eq!(ui.radius_dp(ShapeScale::ExtraSmall).top_left, 4.0);
-        // 药丸 Full：按边长一半折算
-        assert_eq!(ui.radius(ShapeScale::Full, 32.0).top_left, 16.0);
-        // 不许超过边长一半
-        assert_eq!(ui.radius(ShapeScale::ExtraLarge, 20.0).top_left, 10.0);
-    }
-
-    #[test]
-    fn outlines_are_one_pixel_and_use_outline_variant() {
-        let ui = ui(SchemeFlavor::Light);
-        let border = ui.outlined(ShapeScale::Medium);
-        assert_eq!(border.width, STROKE_PX);
-        assert_eq!(border.width, 1.0, "rubric G7：全站 1px");
-        assert_eq!(border.color, ui.color(Role::OutlineVariant));
-        assert_eq!(border.radius.top_left, 12.0);
-    }
-
-    #[test]
-    fn emphasized_weights_are_the_official_ones() {
-        let ui = ui(SchemeFlavor::Light);
-        // title-small 的强调档是 700（官方 Emphasized）
-        assert_eq!(
-            ui.emphasized_font(TypeRole::TitleSmall).weight,
-            iced::font::Weight::Bold
-        );
-        // baseline 正文是 400
-        assert_eq!(
-            ui.font(TypeRole::BodyMedium).weight,
-            iced::font::Weight::Normal
-        );
-    }
-
-    #[test]
-    fn body_text_keeps_wcag_contrast_in_both_flavors() {
-        for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
-            let scheme = Scheme::baseline(flavor);
-            assert!(
-                scheme.contrast(Role::OnSurface, Role::Surface) >= 4.5,
-                "{flavor:?} 的正文对比度不够"
-            );
-            assert!(
-                scheme.contrast(Role::OnSecondaryContainer, Role::SecondaryContainer) >= 4.5,
-                "{flavor:?} 的选中态药丸对比度不够"
-            );
-        }
-    }
-
-    #[test]
-    fn every_role_maps_to_an_iced_color() {
-        for role in Role::ALL {
-            let color = ui(SchemeFlavor::Dark).color(role);
-            assert!((0.0..=1.0).contains(&color.a), "{role:?} 的 alpha 越界");
-        }
-    }
-
-    #[test]
-    fn state_layers_are_opaque_so_cpu_and_gpu_match() {
-        let ui = ui(SchemeFlavor::Light);
-        let hovered = ui.state_over(StateLayer::Hover, Role::OnSurface, Role::Surface);
-        assert_eq!(hovered.a, 1.0, "状态层必须给出不透明结果");
-        assert_ne!(hovered, ui.color(Role::Surface));
-    }
-
-    /// D38：配色方案必须真的换色；默认构造逐字段等于 baseline（防回流的那一半）。
-    /// 抓不住：取色好不好看、设置页是否真切过去（后者由 app 侧日志举证）。
-    #[test]
-    fn a_resolved_scheme_replaces_the_baseline_colours() {
-        use unlucky_design::palette::{resolve_source, CardKey, ImageInput};
-
-        // 4×4 的纯红图：种子彩度远高于门槛，必然走到「背景图取色」这一级。
-        let pixels = [0xC0_u8, 0x20, 0x20, 0xFF].repeat(16);
-        let input = ImageInput::pixels(&pixels, 4, 4);
-        let (scheme, provenance) =
-            resolve_source(Some(input), None, Some(CardKey::Sky), SchemeFlavor::Light);
-        assert_eq!(
-            provenance.level,
-            unlucky_design::palette::Level::BackgroundImage,
-            "纯红图必须取色成功（否则本测试的输入不合格）"
-        );
-
-        let tinted = Ui::from_scheme(scheme, FAMILIES);
-        let baseline = ui(SchemeFlavor::Light);
-        assert_ne!(
-            tinted.color(Role::Primary),
-            baseline.color(Role::Primary),
-            "取色方案必须换掉 primary"
-        );
-        // 深浅仍跟着方案走（方案自带 flavor），不会把 Light 变成 Dark。
-        assert_eq!(tinted.flavor(), SchemeFlavor::Light);
-        assert_eq!(tinted.name(), baseline.name());
-
-        // 默认构造不变：`with_platform` 与 baseline 逐块相等。
-        let explicit = Ui::from_scheme(Scheme::baseline(SchemeFlavor::Light), FAMILIES);
-        for role in Role::ALL {
-            assert_eq!(
-                explicit.color(role),
-                baseline.color(role),
-                "{role:?}：不传 scheme 时默认行为必须与改动前一致"
-            );
-        }
-    }
-}
+mod tests;
@@ -0,0 +1,209 @@
+//! `theme` 的单元测试（M229 从 `theme.rs` 纯搬移，守 400 行硬线：加双色板字段前该文件正好 400 行）。
+//!
+//! 搬移只把 `mod tests { … }` 的包裹层换成了独立文件；**搬移之后内容有改动**（不是一行未改）：
+//! 主题名从 `ull-m3-*` 改成 `ull-ink/ull-silver`、「默认构造逐字段等于 baseline」改成
+//! 「逐字段等于**品牌板**」，并新增了色板/卡片圆角/取色不改深浅等几条测试。
+
+use super::*;
+
+const FAMILIES: Families = Families {
+    text: "Segoe UI Variable Text",
+    display: "Segoe UI Variable Display",
+    mono: "Cascadia Mono",
+};
+
+fn ui(flavor: SchemeFlavor) -> Ui {
+    Ui::with_platform(flavor, Platform::Windows, FAMILIES)
+}
+
+#[test]
+fn theme_name_tracks_the_flavor() {
+    assert_eq!(ui(SchemeFlavor::Light).name(), "ull-silver");
+    assert_eq!(ui(SchemeFlavor::Dark).name(), "ull-ink");
+    assert_ne!(
+        ui(SchemeFlavor::Light).theme().to_string(),
+        ui(SchemeFlavor::Dark).theme().to_string()
+    );
+}
+
+#[test]
+fn canvas_card_overlay_follow_surface_containers() {
+    let ui = ui(SchemeFlavor::Light);
+    assert_eq!(ui.layer(MaterialLayer::Canvas), ui.color(Role::Surface));
+    assert_eq!(
+        ui.layer(MaterialLayer::Card),
+        ui.color(Role::SurfaceContainerLow)
+    );
+    assert_eq!(
+        ui.layer(MaterialLayer::Overlay),
+        ui.color(Role::SurfaceContainerHigh)
+    );
+}
+
+#[test]
+fn radii_only_come_from_the_scale() {
+    let ui = ui(SchemeFlavor::Light);
+    // 卡片 Medium(12)：边长够大时就是 12
+    assert_eq!(ui.radius_dp(ShapeScale::Medium).top_left, 12.0);
+    assert_eq!(ui.radius_dp(ShapeScale::ExtraSmall).top_left, 4.0);
+    // 药丸 Full：按边长一半折算
+    assert_eq!(ui.radius(ShapeScale::Full, 32.0).top_left, 16.0);
+    // 不许超过边长一半
+    assert_eq!(ui.radius(ShapeScale::ExtraLarge, 20.0).top_left, 10.0);
+}
+
+#[test]
+fn outlines_are_one_pixel_and_use_outline_variant() {
+    let ui = ui(SchemeFlavor::Light);
+    let border = ui.outlined(ShapeScale::Medium);
+    assert_eq!(border.width, STROKE_PX);
+    assert_eq!(border.width, 1.0, "rubric G7：全站 1px");
+    assert_eq!(border.color, ui.color(Role::OutlineVariant));
+    assert_eq!(border.radius.top_left, 12.0);
+}
+
+#[test]
+fn emphasized_weights_are_the_official_ones() {
+    let ui = ui(SchemeFlavor::Light);
+    // title-small 的强调档是 700（官方 Emphasized）
+    assert_eq!(
+        ui.emphasized_font(TypeRole::TitleSmall).weight,
+        iced::font::Weight::Bold
+    );
+    // baseline 正文是 400
+    assert_eq!(
+        ui.font(TypeRole::BodyMedium).weight,
+        iced::font::Weight::Normal
+    );
+}
+
+#[test]
+fn body_text_keeps_wcag_contrast_in_both_flavors() {
+    for flavor in [SchemeFlavor::Light, SchemeFlavor::Dark] {
+        let scheme = Scheme::baseline(flavor);
+        assert!(
+            scheme.contrast(Role::OnSurface, Role::Surface) >= 4.5,
+            "{flavor:?} 的正文对比度不够"
+        );
+        assert!(
+            scheme.contrast(Role::OnSecondaryContainer, Role::SecondaryContainer) >= 4.5,
+            "{flavor:?} 的选中态药丸对比度不够"
+        );
+    }
+}
+
+#[test]
+fn every_role_maps_to_an_iced_color() {
+    for role in Role::ALL {
+        let color = ui(SchemeFlavor::Dark).color(role);
+        assert!((0.0..=1.0).contains(&color.a), "{role:?} 的 alpha 越界");
+    }
+}
+
+#[test]
+fn state_layers_are_opaque_so_cpu_and_gpu_match() {
+    let ui = ui(SchemeFlavor::Light);
+    let hovered = ui.state_over(StateLayer::Hover, Role::OnSurface, Role::Surface);
+    assert_eq!(hovered.a, 1.0, "状态层必须给出不透明结果");
+    assert_ne!(hovered, ui.color(Role::Surface));
+}
+
+/// D38：配色方案必须真的换色；显式传 baseline 时逐字段等于 baseline。
+/// 抓不住：取色好不好看、设置页是否真切过去（后者由 app 侧日志举证）。
+#[test]
+fn a_resolved_scheme_replaces_the_baseline_colours() {
+    use unlucky_design::palette::{resolve_source, CardKey, ImageInput};
+
+    // 4×4 的纯红图：种子彩度远高于门槛，必然走到「背景图取色」这一级。
+    let pixels = [0xC0_u8, 0x20, 0x20, 0xFF].repeat(16);
+    let input = ImageInput::pixels(&pixels, 4, 4);
+    let (scheme, provenance) =
+        resolve_source(Some(input), None, Some(CardKey::Sky), SchemeFlavor::Light);
+    assert_eq!(
+        provenance.level,
+        unlucky_design::palette::Level::BackgroundImage,
+        "纯红图必须取色成功（否则本测试的输入不合格）"
+    );
+
+    let tinted = Ui::from_scheme(scheme, FAMILIES);
+    let board = ui(SchemeFlavor::Light);
+    assert_ne!(
+        tinted.color(Role::Primary),
+        board.color(Role::Primary),
+        "取色方案必须换掉 primary"
+    );
+    // 深浅仍跟着方案走（方案自带 flavor），不会把 Light 变成 Dark；色板名也仍说实话。
+    assert_eq!(tinted.flavor(), SchemeFlavor::Light);
+    assert_eq!(tinted.name(), board.name());
+
+    // 显式传 baseline 时逐块等于 baseline 口径（M229 之后产品默认不再是它，但这条通路必须诚实）。
+    let explicit = Ui::from_scheme(Scheme::baseline(SchemeFlavor::Light), FAMILIES);
+    let baseline = Ui::baseline(SchemeFlavor::Light, FAMILIES);
+    for role in Role::ALL {
+        assert_eq!(
+            explicit.color(role),
+            baseline.color(role),
+            "{role:?}：显式传 baseline 时颜色必须与 baseline 口径一致"
+        );
+    }
+}
+
+/// M229：`Ui::new` 走**品牌色板**（Ink 深 / Silver 浅），不再走 tone 派生的 `baseline`。
+///
+/// 抓得住：换肤没接上（色值仍是 baseline）、深浅映射反了（Light 拿到 Ink）。
+/// 抓不住：色板好不好看、页面有没有绕过 `Ui::color` 自己写色值（后者由 `no_hardcoded_tokens` 扫）。
+#[test]
+fn every_ui_is_built_from_a_brand_board() {
+    for (flavor, board) in [
+        (SchemeFlavor::Light, BrandBoard::Silver),
+        (SchemeFlavor::Dark, BrandBoard::Ink),
+    ] {
+        let evaluator = ui(flavor);
+        assert_eq!(evaluator.board(), board, "{flavor:?} 该用 {:?}", board);
+        assert_eq!(evaluator.name(), board_name(board));
+        for role in Role::ALL {
+            assert_eq!(
+                evaluator.color(role),
+                to_iced(board.get(role)),
+                "{flavor:?} 的 {role:?} 不是色板值"
+            );
+        }
+        // 与 tone 派生的 baseline 确实不同（否则「换肤」这件事没发生）。
+        let baseline = Ui::baseline(flavor, FAMILIES);
+        assert_ne!(
+            evaluator.color(Role::Primary),
+            baseline.color(Role::Primary),
+            "{flavor:?}：色板与 baseline 的 primary 撞了，换肤等于没接"
+        );
+        assert_eq!(evaluator.flavor(), flavor);
+    }
+}
+
+/// 显式选板时深浅跟着板走（`Ink = Dark` / `Silver = Light`），「跟随系统」不必另造一种板。
+#[test]
+fn picking_a_board_sets_the_flavor_from_the_board() {
+    let ink = Ui::with_board(BrandBoard::Ink, Platform::Windows, FAMILIES);
+    let silver = Ui::with_board(BrandBoard::Silver, Platform::Windows, FAMILIES);
+    assert_eq!(ink.flavor(), SchemeFlavor::Dark);
+    assert_eq!(silver.flavor(), SchemeFlavor::Light);
+    assert_ne!(ink.theme().to_string(), silver.theme().to_string());
+}
+
+/// 卡片方框走规格卡（`rx=16`），不是组件表的 `Medium(12)`。
+#[test]
+fn cards_take_the_spec_corner() {
+    let evaluator = ui(SchemeFlavor::Light);
+    assert_eq!(evaluator.card_shape(), ShapeScale::Large);
+    assert_eq!(evaluator.card_box().radius_px(), 16.0);
+    assert_eq!(
+        evaluator.outlined(evaluator.card_shape()).radius.top_left,
+        16.0
+    );
+}
+
+fn board_name(board: BrandBoard) -> &'static str {
+    match board {
+        BrandBoard::Ink => "ull-ink",
+        BrandBoard::Silver => "ull-silver",
+    }
+}
@@ -31,6 +31,15 @@ macro_rules! general_entries {
            SettingsLanguageEffective => ("Interface right now: {language}", "界面当前使用：{language}"),
            SettingsTheme => ("Theme", "主题"),
            SettingsThemeFollowSystem => ("Follow system", "跟随系统"),
+            // M229：主题三态改成「Ink / Silver / 跟随系统」——前两档就是两块品牌色板
+            // （Ink = 深色主方案 / Silver = 浅色主方案），落盘仍是 `appearance.theme_mode` 的
+            // `dark` / `light` / `auto` 三个值，不新增配置键。
+            SettingsThemeInk => ("Ink", "Ink（深色）"),
+            SettingsThemeSilver => ("Silver", "Silver（浅色）"),
+            SettingsThemeHint => (
+                "Ink is the dark scheme, Silver the light one. Follow system picks between them as Windows switches.",
+                "Ink 是深色主方案，Silver 是浅色主方案；跟随系统会随 Windows 的深浅在这两块之间切换。"
+            ),
            SettingsStartupPage => ("Startup page", "启动页"),
            SettingsStartupInstances => ("Instances", "实例"),
            SettingsCloseButton => ("Close button", "关闭按钮"),
@@ -186,6 +186,13 @@ pub(super) const ROWS: &[(&str, &str, &str)] = &[
    ("SettingsLanguageEffective", "Interface right now: {language}", "界面当前使用：{language}"),
    ("SettingsTheme", "Theme", "主题"),
    ("SettingsThemeFollowSystem", "Follow system", "跟随系统"),
+    ("SettingsThemeInk", "Ink", "Ink（深色）"),
+    ("SettingsThemeSilver", "Silver", "Silver（浅色）"),
+    (
+        "SettingsThemeHint",
+        "Ink is the dark scheme, Silver the light one. Follow system picks between them as Windows switches.",
+        "Ink 是深色主方案，Silver 是浅色主方案；跟随系统会随 Windows 的深浅在这两块之间切换。",
+    ),
    ("SettingsStartupPage", "Startup page", "启动页"),
    ("SettingsStartupInstances", "Instances", "实例"),
    ("SettingsCloseButton", "Close button", "关闭按钮"),