07-工程配置与资产代码库总览

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './code-examples/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        clay: {
          DEFAULT: '#d97757',
          hover: '#cc5a36',
          light: '#fbf3ef',
          dark: '#e08264',
        },
        surface: {
          0: 'var(--cds-surface-0)',
          1: 'var(--cds-surface-1)',
          2: 'var(--cds-surface-2)',
          3: 'var(--cds-surface-3)',
          popover: 'var(--cds-surface-popover)',
        },
      },
      fontFamily: {
        sans: [
          'AnthropicSans',
          'Inter',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'PingFang SC',
          'sans-serif',
        ],
        serif: [
          'AnthropicSerif',
          'Newsreader',
          'ui-serif',
          'Georgia',
          'Times New Roman',
          'serif',
        ],
        mono: [
          'JetBrains Mono',
          'ui-monospace',
          'SF Mono',
          'Menlo',
          'monospace',
        ],
      },
      borderRadius: {
        'xs': 'var(--radius-xs, 2px)',
        'sm': 'var(--radius-sm, 4px)',
        'md': 'var(--radius-md, 6px)',
        'lg': 'var(--radius-lg, 8px)',
        'panel': 'var(--cds-panel-radius, 10px)',
        'xl': 'var(--radius-xl, 12px)',
        '2xl': 'var(--radius-2xl, 16px)',
        'bubble': 'var(--cds-message-bubble-radius, 18px)',
        'composer': 'var(--cds-radius-composer, 20px)',
        'pill': 'var(--df-radius-pill, 999px)',
        'card': 'var(--radius-card, calc(var(--radius-lg, 8px) + calc(4px * var(--cds-rem-scale, 1))))',
      },
      boxShadow: {
        'sm': 'var(--cds-shadow-sm)',
        'md': 'var(--cds-shadow-md)',
        'lg': 'var(--cds-shadow-lg)',
        'popover': 'var(--cds-shadow-popover)',
        'composer': 'var(--cds-shadow-composer)',
        'composer-hover': 'var(--cds-shadow-composer-hover)',
        'composer-focus': 'var(--cds-shadow-composer-focus)',
        'focus-glow': 'var(--cds-focus-shadow)',
        'drop-glow': 'var(--cds-shadow-drop-glow)',
        'panel': 'var(--cds-panel-shadow)',
        'panel-hover': 'var(--cds-panel-shadow-hover)',
      },
      animation: {
        'quiet-dot': 'timeline-quiet-dot 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite',
        'message-fade-up': 'message-fade-up 0.45s cubic-bezier(0.34, 1.3, 0.64, 1)',
        'saved-decay': 'saved-check-decay 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s forwards',
        'clay-breathe': 'dframe-clay-breathe 2.4s infinite ease-in-out',
        'dot-pulse': 'dframe-dot-pulse 1.2s infinite ease-in-out',
        'shimmer-sweep': 'cds-skeleton-sweep 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1)',
        'thumbnail-grow': 'file-thumbnail-grow-in 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',
      },
    },
  },
  plugins: [],
};

/* ==========================================================================
   Claude Design System (CDS) Production Core Styles (REA v6.5.0 取证规范)
   ========================================================================== */

:root {
  --cds-rem-scale: calc(16 / 17);
  --cds-surface-0: var(--cds-gray-20, #f9f9f7); /* 侧边栏/底色画布 */
  --cds-surface-1: var(--cds-gray-10, #fcfcfb); /* 聊天主工作台 */
  --cds-surface-2: var(--cds-gray-0, #ffffff);  /* 消息卡片表面 */
  --cds-surface-3: var(--cds-gray-0, #ffffff);  /* 悬浮 Popover 与输入框底盘 */
  --cds-clay: #d97757;
  --cds-clay-emphasized: #cc5a36;
  --cds-border: hsla(0, 0%, 8%, 0.10);
  --cds-border-strong: hsla(0, 0%, 8%, 0.20);
  --cds-segmented-control-track: rgba(0, 0, 0, 0.06);
  --cds-segmented-control-thumb: #ffffff;
}

[data-mode="dark"], .dark {
  --cds-surface-0: var(--cds-gray-900, #0b0b0b); /* 暗色侧边栏 */
  --cds-surface-1: var(--cds-gray-850, #151515); /* 暗色主聊天背景 */
  --cds-surface-2: var(--cds-gray-830, #1a1a19); /* 暗色卡片表面 */
  --cds-surface-3: var(--cds-gray-800, #20201f); /* 暗色高层浮盘 */
  --cds-surface-popover: var(--cds-gray-750, #2c2c2a);
  --cds-border: hsla(0, 0%, 100%, 0.09);
  --cds-border-strong: hsla(0, 0%, 100%, 0.18);
  --cds-segmented-control-track: rgba(255, 255, 255, 0.08);
  --cds-segmented-control-thumb: #2c2c2a;
}

/* 1. 暗色模式光学字重减薄补偿（抵消视网膜光渗发散） */
[data-mode="dark"] .font-medium,
.dark .font-medium {
  font-variation-settings: "wght" 465;
}
[data-mode="dark"] .font-semibold,
.dark .font-semibold {
  font-variation-settings: "wght" 560;
}
[data-mode="dark"] .font-bold,
.dark .font-bold {
  font-variation-settings: "wght" 660;
}

/* 2. 行内图标光学基线校准实用类 */
.align-[-0.125em] { vertical-align: -0.125em; }
.align-[-0.075em] { vertical-align: -0.075em; }
.align-[-1px]     { vertical-align: -1px; }

/* 3. 文本换行与防爆容器约束 */
.text-balance-native { text-wrap: balance; }
.text-pretty-native  { text-wrap: pretty; }
.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 4. 等宽数字约束 */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 5. 矢量图标系统（Phosphor & Anthropicons） */
[data-cds="Icon"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  font-feature-settings: "liga" 0;
  vertical-align: -0.125em;
}
[data-cds="Icon"] > [data-cds-icon-layer="secondary"] {
  color: color-mix(in srgb, currentColor 45%, transparent);
}

/**
 * REA 逆向还原：Clarkdown WASM 核心编译器接口定义 (来自 c2abd4ebb-suZcxVhm.js)
 */
export interface ClarkdownWasmCompiler {
  /** 初始化 Clarkdown 独立富文本编辑器实例 */
  ClarkdownEditor: new (options?: ClarkdownEditorOptions) => ClarkdownEditorInstance;
  /** 通用双向编译器单例 */
  Compiler: ClarkdownCompilerStatic;
  /** 将外部 HTML 内容清洗并无损转换为 Clarkdown AST */
  import_html(htmlContent: string): ClarkdownAST;
  /** 将 Clarkdown 标记源码解析为结构化 JSON AST */
  parse_to_json(source: string): string; // JSON 字符串
  /** 将 AST 或源码即时渲染为安全的 HTML 结构 */
  to_html(source: string): string;
  /** 提取无标记纯文本（用于 Token 估算与剪贴板复制） */
  to_plain_text(source: string): string;
}

/* 宿主主样式表 (Host Application Stylesheet) */
:root {
  /* 品牌色与强调色桥接 */
  --app-brand-primary: var(--brand);                   /* 官方品牌色 #c6613f */
  --app-brand-accent: var(--cds-clay);                 /* 陶土呼吸色 #d97757 */
  
  /* 表面深度阶梯桥接 (0 ~ 3 表面) */
  --app-canvas-base: var(--cds-surface-0);             /* 底层画布 #f9f9f7 / #0b0b0b */
  --app-panel-surface: var(--cds-surface-1);           /* 侧边栏/分栏 #fcfcfb / #151515 */
  --app-card-surface: var(--cds-surface-2);            /* 气泡/卡片 #ffffff / #1a1a19 */
  --app-composer-surface: var(--cds-surface-3);        /* 输入框浮层 #ffffff / #20201f */
  --app-popover-surface: var(--cds-surface-popover);   /* 悬浮菜单 #ffffff / #262624 */

  /* 发丝线边框与弥散阴影 */
  --app-border-subtle: var(--cds-border);              /* 发丝细线 */
  --app-border-focus: var(--cds-border-accent);        /* 聚焦陶土边框 */
  --app-shadow-composer: var(--cds-shadow-composer);   /* 复合弥散阴影 */

  /* 几何同心圆角 */
  --app-radius-base: var(--cds-radius);                /* 8px 基础圆角 */
  --app-radius-card: var(--radius-card);               /* 12px 同心卡片圆角 */
  --app-radius-composer: var(--cds-radius-composer);   /* 20px 终端圆角 */
  --app-radius-pill: var(--cds-radius-pill);           /* 9999px 胶囊圆角 */
}

<!-- 非 React 宿主直接使用纯 CSS 属性驱动 -->
<div data-cds-scroll-fade="vertical" style="height: 400px; overflow-y: auto;">
  <!-- 长列表内容 -->
</div>

@property --cds-scroll-fade-top { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cds-scroll-fade-bottom { syntax: '<length>'; inherits: false; initial-value: 0px; }

@keyframes cds-scroll-fade-top-in {
  from { --cds-scroll-fade-top: 0px; }
  to { --cds-scroll-fade-top: 28px; }
}
@keyframes cds-scroll-fade-bottom-out {
  from { --cds-scroll-fade-bottom: 28px; }
  to { --cds-scroll-fade-bottom: 0px; }
}

[data-cds-scroll-fade="vertical"] {
  animation: cds-scroll-fade-top-in linear both, cds-scroll-fade-bottom-out linear both;
  animation-timeline: scroll(self block), scroll(self block);
  animation-range: 0 48px, calc(100% - 48px) 100%;
  mask-image: linear-gradient(to bottom, ...); /* 官方 7 档非线性 Alpha 采样 */
}