┌─────────────────────────────────────┐
│  业务应用层 (Meeting / Webinar / SDK)  │
├─────────────────────────────────────┤
│  场景化组合组件 (MeetingLayout, Toolbar) │
├─────────────────────────────────────┤
│  基础 UI 组件库 (Button, Modal, VirtualList) │
├─────────────────────────────────────┤
│  Design Token & Theme Engine (核心层)     │
├─────────────────────────────────────┤
│  跨平台适配层 (Style Adapter / Platform API) │
└─────────────────────────────────────┘

// 1. Primitive Tokens (原始值) - 不直接使用
{
  "color": {
    "blue": { "50": "#eff6ff", "500": "#3b82f6", "900": "#1e3a5f" },
    "neutral": { "0": "#ffffff", "950": "#030712" }
  },
  "spacing": { "1": "4px", "2": "8px", "3": "12px" },
  "radius": { "sm": "4px", "md": "8px", "lg": "12px" }
}

// 2. Semantic Tokens (语义化) - 组件消费层
{
  "color": {
    "brand": { "primary": "{color.blue.500}", "onPrimary": "{color.neutral.0}" },
    "surface": { "primary": "{color.neutral.0}", "secondary": "{color.neutral.50}" },
    "state": { "hover": "{color.blue.100}", "pressed": "{color.blue.700}" }
  }
}

// 3. Component Tokens (组件级) - 微调空间
{
  "button": {
    "paddingInline": "{spacing.3}",
    "borderRadius": "{radius.md}",
    "fontWeight": "500"
  }
}

// 统一 Props 规范：variant/size/density/loading/disabled/asChild
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  density?: 'comfortable' | 'compact';
  loading?: boolean;
  asChild?: boolean; // Radix/Slot 模式，透传 ref
}

// 受控/非受控双模式
interface SelectProps<T> {
  value?: T;           // 受控
  defaultValue?: T;    // 非受控
  onChange?: (v: T) => void;
  options: Option<T>[];
  renderOption?: (opt: Option<T>) => ReactNode;
  renderValue?: (opt: Option<T>) => ReactNode;
}

┌──────────────────────────────────────┐
│  Layer 3: Brand Theme (客户定制层)      │  ← 仅覆盖 brand.* / component.* 少量 Token
├──────────────────────────────────────┤
│  Layer 2: Product Theme (产品基线层)    │  ← 完整 Semantic/Component Token 集
├──────────────────────────────────────┤
│  Layer 1: Primitive Tokens (原始值层)   │  ← 共享色板/间距/圆角，极少变动
└──────────────────────────────────────┘

# Monorepo 结构
packages/
  ├── tokens/              # 核心 Token 源码
  ├── themes/
  │   ├── theme-default/   # 官方基线主题
  │   ├── theme-high-contrast/
  │   └── theme-brand-template/  # 客户定制脚手架
  ├── ui-core/             # 组件库源码
  └── adapters/
      ├── web/
      ├── electron/
      └── react-native/

graph LR
    A[PR 提交] --> B[Storybook Build]
    B --> C[Chromatic 快照]
    C --> D{像素差异 < 阈值?}
    D -- 是 --> E[自动通过]
    D -- 否 --> F[生成 Diff 报告]
    F --> G[人工 Review / 更新基线]

graph TD
    A[Figma Variables/Styles] -->|Figma REST API / Webhook| B(Token Sync Service)
    B --> C[tokens.json 标准格式]
    C --> D[Style Dictionary / Token Studio Engine]
    D --> E1[CSS Variables :root / [data-theme]]
    D --> E2[TypeScript 常量 + 类型定义]
    D --> E3[React Native StyleSheet.create 入参]
    D --> E4[Android colors.xml / dimens.xml]
    D --> E5[iOS UIColor+Token.swift / ColorSet]
    D --> E6[Tailwind/UnoCSS preset 配置]
    E1 & E2 & E3 & E4 & E5 & E6 --> F[Monorepo packages/tokens]
    F --> G[Changesets 版本发布]
    G --> H[NPM Registry / 私有源]

// machine/toolbar.ts
export const toolbarMachine = createMachine({
  id: 'meeting-toolbar',
  initial: 'collapsed',
  context: {
    devices: { camera: true, mic: true, speaker: true },
    recording: false,
    sharing: false,
  },
  states: {
    collapsed: {
      on: { POINTER_ENTER: 'expanded', FOCUS_FIRST: 'expanded' },
    },
    expanded: {
      on: {
        POINTER_LEAVE: 'collapsed',
        FOCUS_LAST: 'collapsed',
        'TOGGLE_MIC': { actions: 'toggleMic' },
        'TOGGLE_CAM': { actions: 'toggleCam' },
        'START_SHARE': { target: 'sharing', actions: 'startShare' },
        'START_RECORD': { actions: 'startRecord' },
      },
    },
    sharing: {
      on: { 'STOP_SHARE': { target: 'expanded', actions: 'stopShare' } },
    },
  },
});

// tokens.json 新增 direction 元数据
{
  "direction": { "ltr": "ltr", "rtl": "rtl" },
  "spacing": {
    "inlineStart": "{spacing.3}",  // 逻辑属性
    "inlineEnd": "{spacing.3}"
  },
  "borderRadius": {
    "startStart": "{radius.md}",   // 对应 ltr: top-left, rtl: top-right
    "startEnd": "{radius.md}",
    "endEnd": "{radius.md}",
    "endStart": "{radius.md}"
  }
}

/* 全局 Token 生成的字体栈 */
:root {
  --font-family-sans: var(--font-family-brand), 
                      system-ui, 
                      "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", 
                      "Noto Sans Arabic", "Noto Sans Hebrew", 
                      sans-serif;
  /* 变量字体单文件覆盖多语言，减少请求 */
  --font-family-brand: "MeetingVar", "MeetingVar-Fallback";
}

# .github/workflows/breaking-change-detection.yml
jobs:
  api-diff:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - name: Generate API Report (current)
        run: pnpm api-extractor --local
      - name: Download last release report
        uses: actions/download-artifact...
      - name: Compare & Comment
        run: |
          npx @microsoft/api-extractor compare 
            --old last-release/api-report.json 
            --new temp/api-report.json 
            --markdown > breaking-changes.md
          # 发送飞书/Slack 机器人通知，@相关 Owner

delivery-package-v1.2.0/
├── README.md                    # 版本说明、兼容性矩阵、升级指引
├── CHANGELOG.md                 # 语义化变更日志
├── sbom.spdx.json               # 软件物料清单 (SBOM)，合规审计必备
├── licenses/                    # 所有依赖证书全文
├── ui-core/
│   ├── @meeting-ui-core-1.2.0.tgz      # 组件库包 (ESM+CJS+Types)
│   ├── @meeting-tokens-1.2.0.tgz       # Token 包
│   └── @meeting-theme-default-1.2.0.tgz
├── themes/
│   └── @meeting-theme-brand-template-1.2.0.tgz  # 客户定制脚手架
├── adapters/
│   ├── web-vite-plugin-1.2.0.tgz       # Vite/Rspack 插件 (自动注入 Token、图标内联)
│   ├── electron-preload-1.2.0.tgz      # Electron 预加载脚本 (原生菜单/托盘集成)
│   └── rn-metro-config-1.2.0.tgz       # Metro 配置 (Hermes 兼容、资源内联)
├── tools/
│   ├── theme-cli-1.2.0.tgz             # 主题生成/校验/预览 CLI
│   ├── codemod-migrate-1.2.0.tgz       # 版本迁移 Codemod (jscodeshift)
│   └── a11y-audit-1.2.0.tgz            # 无障碍审计 CLI
└── docs/
    ├── integration-guide.md            # 接入指南 (Web/React Native/Electron)
    ├── theming-guide.md                # 主题定制深度教程
    ├── accessibility.md                # 无障碍合规自查清单
    ├── performance-tuning.md           # 性能调优参数表
    └── api-reference/                  # TypeDoc 生成的完整 API 文档

// 远程配置下发示例 (WebSocket / Long Polling)
{
  "theme": "brand-customer-a",
  "layout": {
    "toolbar": { "position": "bottom", "modules": ["mic", "cam", "share", "reaction", "apps"] },
    "grid": { "maxVisible": 25, "speakerPriority": "pinned" }
  },
  "features": { "virtualBackground": true, "aiSummary": false }
}