@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/teamMembers.js

@@ -0,0 +1,56 @@
+import liuDelinAvatar from './components/team-avatar-assets/liu-delin.png';
+import liSiruAvatar from './components/team-avatar-assets/li-siru.png';
+import duanRanAvatar from './components/team-avatar-assets/duan-ran.png';
+import chengchengMurphyAvatar from './components/team-avatar-assets/chengcheng-murphy.png';
+import guoZhezhiAvatar from './components/team-avatar-assets/guo-zhezhi.png';
+
+export const TEAM_MEMBERS = [
+  { id: 'li-siru', name: '李思儒', avatarSrc: liSiruAvatar },
+  { id: 'chengcheng-murphy', name: '程程murphy', avatarSrc: chengchengMurphyAvatar },
+  { id: 'liu-delin', name: '刘德琳', avatarSrc: liuDelinAvatar },
+  { id: 'duan-ran', name: '段然', avatarSrc: duanRanAvatar },
+  { id: 'guo-zhezhi', name: '郭泽智', avatarSrc: guoZhezhiAvatar },
+];
+
+export const DEFAULT_TEAM_MEMBER = TEAM_MEMBERS[4];
+export const TEAM_MEMBER_AVATAR_SRCS = TEAM_MEMBERS.map((member) => member.avatarSrc);
+
+export const TEAM_MEMBER_BY_NAME = Object.fromEntries(
+  TEAM_MEMBERS.map((member) => [member.name, member]),
+);
+
+export function getTeamMemberByIndex(index = 0) {
+  if (TEAM_MEMBERS.length === 0) return null;
+  const normalizedIndex = Math.abs(Number(index) || 0) % TEAM_MEMBERS.length;
+  return TEAM_MEMBERS[normalizedIndex];
+}
+
+export function getTeamMemberBySeed(seed = 0) {
+  if (typeof seed === 'number') {
+    return getTeamMemberByIndex(seed);
+  }
+
+  const input = String(seed || '');
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
+  }
+  return getTeamMemberByIndex(hash);
+}
+
+export function getTeamAvatarBySeed(seed = 0) {
+  return getTeamMemberBySeed(seed)?.avatarSrc || DEFAULT_TEAM_MEMBER.avatarSrc;
+}
+
+export function getRandomTeamMember() {
+  return getTeamMemberByIndex(Math.floor(Math.random() * TEAM_MEMBERS.length));
+}
+
+export function getRandomTeamAvatarSrc() {
+  return getRandomTeamMember()?.avatarSrc || DEFAULT_TEAM_MEMBER.avatarSrc;
+}
+
+export function getTeamMemberByName(name) {
+  if (!name) return null;
+  return TEAM_MEMBER_BY_NAME[name] || null;
+}

package/src/_b_end_runtime/tokens.js

@@ -0,0 +1,500 @@
+// ============================================================
+// B端设计系统 — Token 规范
+// 结构参考 Tailwind：Primitives 为原始刻度，Semantic Mapping 为语义桥接
+// ============================================================
+
+// ── Primitives ──────────────────────────────────────────────
+// 原始刻度层，AI 直接消费。命名、刻度与 Tailwind 对齐。
+
+export const TOKEN_COLORS = {
+  brand:      { label: 'Brand',       shades: { 50:'#EAFAF6',100:'#CFF3EA',200:'#A8E8D7',300:'#87DEC9',400:'#6BD8BF',500:'#56D3BC',600:'#32C4AC',700:'#18B49D',800:'#129683',900:'#0D786A',950:'#053E3A' }},
+  blueGrey:   { label: 'Blue Grey',   shades: { 50:'#FCFCFD',100:'#F9FAFB',200:'#F2F4F7',300:'#E4E7EC',400:'#D0D5DD',500:'#98A2B3',600:'#667085',700:'#475467',800:'#344054',900:'#182230',950:'#0D1321' }},
+  grey:       { label: 'Grey',        shades: { 50:'#F9F9F9',100:'#E6E7EA',200:'#C6C7CD',300:'#A7A8B0',400:'#878892',500:'#6B6C75',600:'#555661',700:'#41424C',800:'#2E2F38',900:'#1C1C23',950:'#111116' }},
+  blue:       { label: 'Blue',        shades: { 50:'#ECF6FE',100:'#CFE9FE',200:'#9FD1FC',300:'#70B8FB',400:'#429EF9',500:'#1482F8',600:'#0B69D4',700:'#0451B1',800:'#003D8D',900:'#002C69',950:'#001A36' }},
+  indigo:     { label: 'Indigo',      shades: { 50:'#ECEFF7',100:'#D1D6F0',200:'#A6B1E1',300:'#7F8ED1',400:'#5D6DC2',500:'#3E4FB3',600:'#32409F',700:'#28338A',800:'#1E2776',900:'#161C61',950:'#0D1240' }},
+  lightBlue:  { label: 'Light Blue',  shades: { 50:'#F0F7FB',100:'#DCEEFA',200:'#9CD8F7',300:'#6FC8F4',400:'#3FB6F0',500:'#139FEC',600:'#0A81C5',700:'#0365A9',800:'#034A83',900:'#0A3550',950:'#061F30' }},
+  green:      { label: 'Green',       shades: { 50:'#F0FDF4',100:'#D0F8D1',200:'#A6F1A7',300:'#7FE182',400:'#5ECE62',500:'#3EB346',600:'#329538',700:'#27772F',800:'#1D5A24',900:'#123C18',950:'#09220D' }},
+  lightGreen: { label: 'Light Green', shades: { 50:'#F6FAF0',100:'#E4EECF',200:'#C8E09E',300:'#AFD16E',400:'#97BF41',500:'#7FAE18',600:'#6A9215',700:'#577713',800:'#455E12',900:'#354810',950:'#1F2A09' }},
+  lime:       { label: 'Lime',        shades: { 50:'#F3FAE8',100:'#E5F5C8',200:'#CFEC95',300:'#BDE266',400:'#AED93A',500:'#A3CF11',600:'#85AD0C',700:'#688A09',800:'#4C6705',900:'#314503',950:'#1F2A02' }},
+  cyan:       { label: 'Cyan',        shades: { 50:'#EAF9FA',100:'#C2F0F3',200:'#8AE3E8',300:'#58D4DC',400:'#30C4CF',500:'#14B1BE',600:'#0E94A0',700:'#0A7782',800:'#075A64',900:'#043F47',950:'#022429' }},
+  red:        { label: 'Red',         shades: { 50:'#FEF2F1',100:'#FCD9D7',200:'#F9ACA7',300:'#F6837B',400:'#F35F55',500:'#F74331',600:'#D32E24',700:'#AD201A',800:'#861613',900:'#600E0D',950:'#3B0706' }},
+  orange:     { label: 'Orange',      shades: { 50:'#FFF5EE',100:'#FEE1CA',200:'#FDC592',300:'#FBAA5E',400:'#FA9332',500:'#FA8B14',600:'#D17310',700:'#A85B0D',800:'#80440A',900:'#5A3008',950:'#351B04' }},
+  yellow:     { label: 'Yellow',      shades: { 50:'#FEFDEC',100:'#FEFACF',200:'#FCF29F',300:'#FBE870',400:'#F9DA42',500:'#F8C914',600:'#CF9D0F',700:'#A5760A',800:'#7C5206',900:'#533203',950:'#331F02' }},
+  amber:      { label: 'Amber',       shades: { 50:'#FFFAEB',100:'#FEF0C7',200:'#FEDF89',300:'#FEC84B',400:'#FDB022',500:'#F79009',600:'#DC6803',700:'#B54708',800:'#93370D',900:'#7A2E0E',950:'#4A1A06' }},
+  pink:       { label: 'Pink',        shades: { 50:'#FDEDF1',100:'#FAD2DC',200:'#F5A7BD',300:'#F17DA2',400:'#EC558A',500:'#E72E75',600:'#C32165',700:'#A01654',800:'#7C0E43',900:'#580731',950:'#360420' }},
+  violet:     { label: 'Violet',      shades: { 50:'#F1EEF9',100:'#DCD4F3',200:'#BBACE8',300:'#9E86DC',400:'#8464D1',500:'#6D45C5',600:'#6039B1',700:'#542D9C',800:'#482388',900:'#3C1B73',950:'#28124D' }},
+  purple:     { label: 'Purple',      shades: { 50:'#F7EAF7',100:'#F0CCF0',200:'#DF9DE1',300:'#CC73D1',400:'#B74EC2',500:'#A22DB3',600:'#8B239F',700:'#751A8A',800:'#5F1376',900:'#4B0D61',950:'#31083F' }},
+};
+
+// 图表 / 数据可视化专用色序列，不参与普通 UI 组件配色
+export const TOKEN_DATA_COLORS = [
+  '#24CDA5', '#FF8F52', '#D93B95', '#835FD8', '#3F81EB', '#63D1E0',
+  '#F2496F', '#6EA1DA', '#B399FE', '#FC7E90', '#C6E360', '#FEC849',
+];
+
+// 组件特化色：仅供特定组件使用的"非通用"色阶。
+// 命名空间共用 --color-*，让 Tailwind 短写法（bg-robot-500、fill-robot-50）照常可用，
+// 但不进 TOKEN_COLORS 通用调色板，避免被误用为基础色相 / 污染色板视觉。
+// 新增条目时：每条必须有 usedBy，写明它服务于哪些组件（AI / 设计师可一眼追溯归属）。
+export const TOKEN_COMPONENT_COLORS = {
+  robot: {
+    label: 'Robot',
+    usedBy: ['Avatar'],
+    desc: '机器人头像插画专用配色（底色 / 耳朵底色 / 主色 / 五官色）',
+    shades: { 50: '#FCFCFC', 100: '#EDEDED', 500: '#24B9D9', 900: '#000000' },
+  },
+};
+
+export const TOKEN_SPACING = {
+  '0': '0px',
+  '0_5': '2px',
+  '1': '4px',
+  '2': '8px',
+  'avatar-group-overlap': '10px',
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '7': '28px',
+  '8': '32px',
+  '10': '40px',
+  '12': '48px',
+  '16': '64px',
+};
+
+export const TOKEN_RADIUS = {
+  none: '0px', avatar: '3px', sm: '4px', md: '8px', lg: '12px', xl: '16px', card: '20px', '2xl': '24px', full: '9999px',
+};
+
+export const TOKEN_FONT_SIZE = {
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+};
+
+export const TOKEN_FONT_SIZE_PX = {
+  xs: 12, sm: 14, base: 16, lg: 18, xl: 20, '2xl': 24, '3xl': 30, '4xl': 36, '5xl': 48,
+};
+
+export const TOKEN_FONT_STACK = 'Inter, "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+
+export const TOKEN_FONT_BY_SCRIPT = {
+  latin: { label: '英文 Inter', css: 'Inter, system-ui, sans-serif' },
+  cjk: { label: '中文 苹方', css: '"PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' },
+};
+
+export const TOKEN_FONT_WEIGHT = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+export const TOKEN_LINE_HEIGHT = {
+  '4': '16px',
+  '5': '20px',
+  'card-copy': '21px',
+  'card-title': '22px',
+};
+
+export const TOKEN_SIZE = {
+  'card-width': '400px',
+  'card-min-height': '201px',
+  'chat-bubble-max': '500px',
+  'icon-14': '14px',
+  'control-sm': '24px',
+  'control-md': '36px',
+  'input-width': '300px',
+};
+
+export const TOKEN_LETTER_SPACING = {
+  tighter: '-0.05em', tight: '-0.025em', normal: '0em', wide: '0.025em', wider: '0.05em', widest: '0.1em',
+};
+
+// 基础阴影刻度沿用 Tailwind；业务语义阴影（如 card / list）也统一从这里输出。
+export const TOKEN_SHADOWS = {
+  none: '0 0 #0000',
+  sm: '0 1px 2px 0 rgba(0,0,0,0.05)',
+  DEFAULT: '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)',
+  md: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+  lg: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+  xl: '0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)',
+  '2xl': '0 25px 50px -12px rgba(0,0,0,0.25)',
+  card: '0 30px 50px 0 rgba(0,9,36,0.05)',
+  list: '0 0 16px 0 rgba(101,115,137,0.06)',
+};
+
+export const TOKEN_GRADIENTS = {
+  dark: {
+    label: 'Dark',
+    desc: '深色 AI 背景渐变，适合暗色 Hero、封面视觉、深色强调型容器',
+    css: 'linear-gradient(74deg, rgba(134,255,197,0.4) 1.5%, transparent 50%), linear-gradient(250deg, rgba(255,158,44,0.28) 11%, transparent 52%), linear-gradient(101deg, #34423B 14%, #16141F 104%)',
+  },
+  'ai-fill-1': {
+    label: 'AI Fill-1',
+    desc: '轻量 AI 底色，适合输入框底色、聊天气泡背景、大面积铺底等弱感知场景',
+    css: 'linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%)',
+  },
+  'ai-fill-2': {
+    label: 'AI Fill-2',
+    desc: '中等 AI 底色，适合卡片悬浮态、推荐条 hover、弹层背景等次强调场景',
+    css: 'linear-gradient(-45deg, rgba(254, 224, 253, 1) 0%, rgba(233, 218, 255, 1) 25%, rgba(213, 225, 255, 1) 48%, rgba(213, 243, 248, 1) 83%, rgba(213, 247, 242, 1) 100%)',
+  },
+  'ai-fill-3': {
+    label: 'AI Fill-3',
+    desc: '高饱和 AI 底色，适合激活态、强调态、封面视觉等强感知场景',
+    css: 'linear-gradient(-45deg, rgba(255, 153, 248, 1) 0%, rgba(181, 131, 255, 1) 25%, rgba(114, 156, 255, 1) 48%, rgba(117, 218, 231, 1) 83%, rgba(115, 230, 204, 1) 100%)',
+  },
+  'ai-fill-text': {
+    label: 'AI Fill-text',
+    desc: 'AI 文字渐变，适合标题字、强调文案、AI 品牌标识文本',
+    css: 'linear-gradient(135deg, rgba(22, 218, 203, 1) 0%, rgba(49, 134, 212, 1) 20%, rgba(111, 88, 227, 1) 70%, rgba(231, 116, 221, 1) 100%)',
+  },
+};
+
+export const TOKEN_CUSTOM_BACKGROUNDS = {
+  'chat-outgoing-ai': TOKEN_GRADIENTS['ai-fill-1'].css,
+};
+
+export const TOKEN_Z_INDEX = {
+  '0': 0, '10': 10, '20': 20, '30': 30, '40': 40, '50': 50,
+};
+
+export const TOKEN_BREAKPOINTS = {
+  sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px',
+};
+
+export const TOKEN_MAX_WIDTH = {
+  xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
+  '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem',
+  '6xl': '72rem', '7xl': '80rem',
+};
+
+// ── Semantic Mapping ────────────────────────────────────────
+// 语义桥接层。MAP key 用于平台展示分组，CSS 变量名通过 SEMANTIC_CSS_MAP 映射到 --color-* 命名空间。
+// Tailwind v4 @theme 只识别 --color-* 前缀，所以所有语义色统一输出为 --color-{name}。
+
+export const SEMANTIC_CSS_MAP = {
+  'status-primary': 'primary', 'status-success': 'success', 'status-warning': 'warning',
+  'status-danger': 'danger', 'status-info': 'info', 'status-tertiary': 'tertiary',
+  'text-link': 'link',
+  'text-primary': 'foreground', 'text-secondary': 'foreground-secondary',
+  'text-tertiary': 'foreground-muted', 'text-disabled': 'foreground-disabled', 'text-inverse': 'foreground-inverse',
+  'bg-page': 'page', 'bg-surface': 'surface', 'bg-elevated': 'elevated', 'bg-disabled': 'disabled', 'bg-card-secondary': 'card-secondary', 'bg-chat-incoming': 'chat-incoming', 'bg-chat-outgoing': 'chat-outgoing', 'bg-chat-outgoing-ai': 'chat-outgoing-ai',
+  'fill-default': 'fill', 'fill-hover': 'fill-hover', 'fill-active': 'fill-active',
+  'border-default': 'border-default', 'border-strong': 'border-strong', 'border-brand': 'border-brand', 'border-brand-strong': 'border-brand-strong',
+  'overlay-bg': 'overlay', 'focus-ring': 'ring',
+};
+
+export const TOKEN_SEMANTIC_MAP = {
+  // ── status: 状态 / 主题色 ──
+  'status-primary':       { label: 'Primary',       color: '#56D3BC', primitiveRef: 'brand-500',   states: { default: '{brand.500}', hover: '{brand.600}', active: '{brand.700}', bg: '{brand.50}' }},
+  'status-success':       { label: 'Success',       color: '#3EB346', primitiveRef: 'green-500',   states: { default: '{green.500}', hover: '{green.600}', active: '{green.700}', bg: '{green.50}' }},
+  'status-warning':       { label: 'Warning',       color: '#FA8B14', primitiveRef: 'orange-500',  states: { default: '{orange.500}', hover: '{orange.600}', active: '{orange.700}', bg: '{orange.50}' }},
+  'status-danger':        { label: 'Danger',        color: '#F74331', primitiveRef: 'red-500',     states: { default: '{red.500}', hover: '{red.600}', active: '{red.700}', bg: '{red.50}' }},
+  'status-info':          { label: 'Info',          color: '#56D3BC', primitiveRef: 'brand-500',   states: { default: '{brand.500}', hover: '{brand.600}', active: '{brand.700}', bg: '{brand.50}' }},
+  'status-tertiary':      { label: 'Tertiary',      color: '#6B6C75', primitiveRef: 'grey-500',    states: { default: '{grey.500}', hover: '{grey.600}', active: '{grey.700}', bg: '{grey.50}' }},
+  // ── text: 文字颜色 ──
+  'text-primary':         { label: '主文字',         color: '#182230', primitiveRef: 'blueGrey-900' },
+  'text-secondary':       { label: '副文字',         color: '#475467', primitiveRef: 'blueGrey-700' },
+  'text-tertiary':        { label: '辅助文字',       color: '#667085', primitiveRef: 'blueGrey-600' },
+  'text-disabled':        { label: '禁用文字',       color: '#98A2B3', primitiveRef: 'blueGrey-500' },
+  'text-inverse':         { label: '反色文字',       color: '#FFFFFF', primitiveRef: 'white' },
+  'text-link':            { label: '链接文字',       color: '#18B49D', primitiveRef: 'brand-700',   states: { default: '{brand.700}', hover: '{brand.800}', active: '{brand.900}', bg: '{brand.50}' }},
+
+  // ── bg: 背景色 ──
+  'bg-page':              { label: '页面底层背景',   color: '#FFFFFF', primitiveRef: 'white' },
+  'bg-surface':           { label: '容器 / 卡片背景', color: '#FFFFFF', primitiveRef: 'white' },
+  'bg-elevated':          { label: '浮层背景',       color: '#FFFFFF', primitiveRef: 'white' },
+  'bg-disabled':          { label: '禁用背景',       color: '#F9FAFB', primitiveRef: 'blueGrey-100' },
+  'bg-card-secondary':    { label: '卡片次级背景',   color: 'rgba(255,255,255,0.65)', primitiveRef: 'white/65%' },
+  'bg-chat-incoming':     { label: '聊天气泡-左侧',  color: 'rgba(52,59,57,0.05)', primitiveRef: 'grey-800/5%' },
+  'bg-chat-outgoing':     { label: '聊天气泡-右侧',  color: '#E5F7F7', primitiveRef: 'cyan-soft/custom' },
+  'bg-chat-outgoing-ai':  { label: '聊天气泡-右侧AI渐变', color: TOKEN_CUSTOM_BACKGROUNDS['chat-outgoing-ai'], primitiveRef: 'gradient/ai-fill-1' },
+
+  // ── fill: 填充色 ──
+  'fill-default':         { label: '填充-默认态',    color: 'rgba(83, 96, 143, 0.07)', primitiveRef: 'blueGrey/7%' },
+  'fill-hover':           { label: '填充-悬浮态',    color: 'rgba(83, 96, 143, 0.12)', primitiveRef: 'blueGrey/12%' },
+  'fill-active':          { label: '填充-激活态',    color: 'rgba(83, 96, 143, 0.15)', primitiveRef: 'blueGrey/15%' },
+
+  // ── border: 描边色 ──
+  'border-default':       { label: '默认描边',       color: '#E4E7EC', primitiveRef: 'blueGrey-300' },
+  'border-strong':        { label: '强调/悬浮描边', color: '#D0D5DD', primitiveRef: 'blueGrey-400' },
+  'border-brand':         { label: '品牌描边',       color: '#56D3BC', primitiveRef: 'brand-500' },
+  'border-brand-strong':  { label: '品牌强调描边', color: '#32C4AC', primitiveRef: 'brand-600' },
+  /** rgba 细线：ChatMessage 追问/执行流卡片描边；必须进 theme.css，否则 var() 失效时浏览器退化为深黑描边 */
+  'border-line-light':    { label: '细线描边 rgba',  color: 'rgba(22,24,35,0.08)' },
+
+  // ── overlay: 蒙层 ──
+  'overlay-bg':           { label: '蒙层背景',       color: 'rgba(22, 22, 26, 0.60)', primitiveRef: 'grey-950/60%' },
+
+  // ── focus: 焦点 ──
+  'focus-ring':           { label: '焦点环',         color: '#56D3BC', primitiveRef: 'brand-500' },
+};
+
+// 兼容旧引用：从扁平 map 中按前缀提取分组视图
+export const TOKEN_SEMANTIC = Object.fromEntries(
+  Object.entries(TOKEN_SEMANTIC_MAP)
+    .filter(([k]) => k.startsWith('status-'))
+    .map(([k, v]) => [k.replace('status-', ''), { ...v, default: v.states?.default, hover: v.states?.hover, active: v.states?.active, bg: v.states?.bg }])
+);
+
+export const TOKEN_TEXT_COLORS = Object.fromEntries(
+  Object.entries(TOKEN_SEMANTIC_MAP)
+    .filter(([k]) => k.startsWith('text-'))
+    .map(([k, v]) => [k.replace('text-', ''), { ...v, mapping: v.primitiveRef }])
+);
+
+export const TOKEN_FUNCTIONAL = Object.fromEntries(
+  Object.entries(TOKEN_SEMANTIC_MAP)
+    .filter(([k]) => !k.startsWith('status-') && !k.startsWith('text-'))
+    .map(([k, v]) => [k, { ...v, opacity: '—', varRef: v.primitiveRef }])
+);
+
+// ── Utility functions ───────────────────────────────────────
+
+function primitiveRefToCssVar(ref) {
+  if (!ref) return undefined;
+  if (ref === 'black') return 'var(--color-black)';
+  if (ref === 'white') return 'var(--color-white)';
+  if (ref.includes('/')) return undefined;
+  return `var(--color-${ref})`;
+}
+
+export function generateThemeCssVars() {
+  const lines = ['@theme {'];
+
+  lines.push('  /* ── Colors ── */');
+  lines.push('  --color-black: #000000;');
+  lines.push('  --color-transparent: transparent;');
+  lines.push('  --color-white: #FFFFFF;');
+  Object.entries(TOKEN_COLORS).forEach(([name, { shades }]) => {
+    Object.entries(shades).forEach(([shade, hex]) => {
+      lines.push(`  --color-${name}-${shade}: ${hex};`);
+    });
+  });
+
+  lines.push('');
+  lines.push('  /* ── Component-only colors（组件特化色，命名空间共用 --color-*，不进通用调色板）── */');
+  Object.entries(TOKEN_COMPONENT_COLORS).forEach(([name, { shades, usedBy }]) => {
+    const usedByStr = Array.isArray(usedBy) ? usedBy.join(', ') : usedBy;
+    Object.entries(shades).forEach(([shade, hex]) => {
+      lines.push(`  --color-${name}-${shade}: ${hex};  /* used by: ${usedByStr} */`);
+    });
+  });
+
+  lines.push('');
+  lines.push('  /* ── Semantic tokens → --color-* 命名空间 ── */');
+  Object.entries(TOKEN_SEMANTIC_MAP).forEach(([key, tok]) => {
+    const cssName = SEMANTIC_CSS_MAP[key] || key;
+    const cssVal = primitiveRefToCssVar(tok.primitiveRef) || tok.color;
+    const refNote = tok.primitiveRef != null ? tok.primitiveRef : 'literal';
+    lines.push(`  --color-${cssName}: ${cssVal};  /* ${tok.label} ← ${refNote} */`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── 兼容别名：Tailwind v4 默认 border 工具读取 --color-border ── */');
+  lines.push('  --color-border: var(--color-border-default);');
+
+  lines.push('');
+  lines.push('  /* ── Custom backgrounds ── */');
+  Object.entries(TOKEN_CUSTOM_BACKGROUNDS).forEach(([key, value]) => {
+    lines.push(`  --bg-${key}: ${value};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Data colors（图表色，硬编码 hex）── */');
+  TOKEN_DATA_COLORS.forEach((hex, i) => {
+    lines.push(`  --color-data-${i}: ${hex};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Spacing ── */');
+  Object.entries(TOKEN_SPACING).forEach(([k, v]) => {
+    lines.push(`  --spacing-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Font Family（英文 Inter + 中文苹方）── */');
+  lines.push(`  --font-sans: ${TOKEN_FONT_STACK};`);
+
+  lines.push('');
+  lines.push('  /* ── Font Size ── */');
+  Object.entries(TOKEN_FONT_SIZE).forEach(([k, v]) => {
+    lines.push(`  --text-${k}: ${v};  /* ${TOKEN_FONT_SIZE_PX[k]}px */`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Font Weight ── */');
+  Object.entries(TOKEN_FONT_WEIGHT).forEach(([k, v]) => {
+    lines.push(`  --font-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Line Height ── */');
+  Object.entries(TOKEN_LINE_HEIGHT).forEach(([k, v]) => {
+    lines.push(`  --leading-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Letter Spacing ── */');
+  Object.entries(TOKEN_LETTER_SPACING).forEach(([k, v]) => {
+    lines.push(`  --tracking-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Border Radius ── */');
+  Object.entries(TOKEN_RADIUS).forEach(([k, v]) => {
+    lines.push(`  --radius-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Size ── */');
+  Object.entries(TOKEN_SIZE).forEach(([k, v]) => {
+    lines.push(`  --size-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Shadows ── */');
+  Object.entries(TOKEN_SHADOWS).forEach(([k, v]) => {
+    lines.push(`  --shadow-${k}: ${v};`);
+  });
+
+  lines.push('');
+  lines.push('  /* ── Gradients ── */');
+  Object.entries(TOKEN_GRADIENTS).forEach(([k, g]) => {
+    lines.push(`  --gradient-${k}: ${g.css};`);
+  });
+
+  lines.push('}');
+
+  /* ChatMessage / 执行流：组件内 var(--tfds-ai-execution-*) 与 Tailwind 任意动画名依赖 */
+  lines.push('');
+  lines.push('/* ── ChatMessage 执行流：全局变量与动画（与平台 src/index.css 对齐，随 theme.css 一并下发）── */');
+  lines.push(':root {');
+  lines.push('  --tfds-ai-execution-icon-gradient: linear-gradient(180deg, rgba(200, 214, 210, 0.09) 0%, rgba(52, 59, 57, 0.09) 100%);');
+  lines.push('  --tfds-ai-execution-processing-fill: rgba(52, 59, 57, 0.04);');
+  lines.push('  --tfds-ai-execution-processing-shimmer: linear-gradient(90deg, rgba(52, 59, 57, 0.045) 0%, rgba(52, 59, 57, 0.05) 28%, rgba(255, 255, 255, 0.18) 50%, rgba(52, 59, 57, 0.05) 72%, rgba(52, 59, 57, 0.045) 100%);');
+  lines.push('}');
+  lines.push('@keyframes tfds-ai-execution-shimmer {');
+  lines.push('  0% { background-position: 140% 0; }');
+  lines.push('  100% { background-position: -40% 0; }');
+  lines.push('}');
+
+  return lines.join('\n');
+}
+
+export function generateCSSVarsForCategory(category) {
+  const lines = [];
+  switch (category) {
+    case 'colors':
+      lines.push('--color-black: #000000;');
+      lines.push('--color-white: #FFFFFF;');
+      Object.entries(TOKEN_COLORS).forEach(([name, { shades }]) => {
+        Object.entries(shades).forEach(([shade, hex]) => {
+          lines.push(`--color-${name}-${shade}: ${hex};`);
+        });
+      });
+      break;
+    case 'componentColors':
+      Object.entries(TOKEN_COMPONENT_COLORS).forEach(([name, { shades, usedBy }]) => {
+        const usedByStr = Array.isArray(usedBy) ? usedBy.join(', ') : usedBy;
+        Object.entries(shades).forEach(([shade, hex]) => {
+          lines.push(`--color-${name}-${shade}: ${hex};  /* used by: ${usedByStr} */`);
+        });
+      });
+      break;
+    case 'semantic':
+      Object.entries(TOKEN_SEMANTIC_MAP).forEach(([key, tok]) => {
+        const cssName = SEMANTIC_CSS_MAP[key] || key;
+        const cssVal = primitiveRefToCssVar(tok.primitiveRef) || tok.color;
+        const refNote = tok.primitiveRef != null ? tok.primitiveRef : 'literal';
+        lines.push(`--color-${cssName}: ${cssVal};  /* ${tok.label} ← ${refNote} */`);
+      });
+      Object.entries(TOKEN_CUSTOM_BACKGROUNDS).forEach(([key, value]) => {
+        lines.push(`--bg-${key}: ${value};`);
+      });
+      break;
+    case 'dataColors':
+      TOKEN_DATA_COLORS.forEach((hex, i) => {
+        lines.push(`--color-data-${i}: ${hex};`);
+      });
+      break;
+    case 'spacing':
+      Object.entries(TOKEN_SPACING).forEach(([k, v]) => {
+        lines.push(`--spacing-${k}: ${v};`);
+      });
+      break;
+    case 'typography':
+      lines.push('/* 字体栈 */');
+      lines.push(`--font-sans: ${TOKEN_FONT_STACK};`);
+      lines.push('');
+      lines.push('/* 字重 */');
+      Object.entries(TOKEN_FONT_WEIGHT).forEach(([k, v]) => {
+        lines.push(`--font-${k}: ${v};`);
+      });
+      lines.push('');
+      lines.push('/* 字号 */');
+      Object.entries(TOKEN_FONT_SIZE).forEach(([k, v]) => {
+        lines.push(`--text-${k}: ${v};  /* ${TOKEN_FONT_SIZE_PX[k]}px */`);
+      });
+      lines.push('');
+      lines.push('/* 行高 */');
+      Object.entries(TOKEN_LINE_HEIGHT).forEach(([k, v]) => {
+        lines.push(`--leading-${k}: ${v};`);
+      });
+      break;
+    case 'radius':
+      Object.entries(TOKEN_RADIUS).forEach(([k, v]) => {
+        lines.push(`--radius-${k}: ${v};`);
+      });
+      break;
+    case 'shadows':
+      Object.entries(TOKEN_SHADOWS).forEach(([k, v]) => {
+        lines.push(`--shadow-${k}: ${v};`);
+      });
+      break;
+    case 'size':
+      Object.entries(TOKEN_SIZE).forEach(([k, v]) => {
+        lines.push(`--size-${k}: ${v};`);
+      });
+      break;
+    case 'gradients':
+      Object.entries(TOKEN_GRADIENTS).forEach(([k, g]) => {
+        lines.push(`--gradient-${k}: ${g.css};`);
+      });
+      break;
+    default:
+      break;
+  }
+  return lines.join('\n');
+}
+
+export function countTokens() {
+  let count = 0;
+  Object.values(TOKEN_COLORS).forEach(c => { count += Object.keys(c.shades).length; });
+  Object.values(TOKEN_COMPONENT_COLORS).forEach(c => { count += Object.keys(c.shades).length; });
+  count += Object.keys(TOKEN_SPACING).length;
+  count += Object.keys(TOKEN_RADIUS).length;
+  count += Object.keys(TOKEN_FONT_SIZE).length;
+  count += Object.keys(TOKEN_FONT_WEIGHT).length;
+  count += Object.keys(TOKEN_LINE_HEIGHT).length;
+  count += Object.keys(TOKEN_SIZE).length;
+  count += 1; // font-family
+  count += Object.keys(TOKEN_LETTER_SPACING).length;
+  count += Object.keys(TOKEN_SHADOWS).length;
+  count += Object.keys(TOKEN_GRADIENTS).length;
+  count += Object.keys(TOKEN_Z_INDEX).length;
+  count += Object.keys(TOKEN_BREAKPOINTS).length;
+  count += Object.keys(TOKEN_MAX_WIDTH).length;
+  count += TOKEN_DATA_COLORS.length;
+  count += Object.keys(TOKEN_SEMANTIC_MAP).length;
+  count += Object.keys(TOKEN_CUSTOM_BACKGROUNDS).length;
+  return count;
+}