@rxdrag/website-lib 0.0.112 → 0.0.114

package/components/Video.astro

@@ -10,6 +10,7 @@ interface Props {
   videoRef?: string;
   posterRef?: string;
   endTitle?: string;
+  eagerLoad?: boolean;
   classNames?: {
     container?: string;
     video?: string;
@@ -27,6 +28,7 @@ interface Props {
 const {
   videoRef,
   posterRef,
+  eagerLoad,
   endTitle = "Contact Us Now",
   classNames = {},
 } = Astro.props;
@@ -45,6 +47,7 @@ const poster = rx ? await rx.getMedia(posterRef) : undefined;
       media={media}
       endTitle={endTitle}
       posterUrl={poster?.file?.original}
+      eagerLoad={eagerLoad}
       classNames={classNames}
     />
   )

package/components//344/270/211/345/261/202/346/250/241/345/236/213.md

@@ -0,0 +1,5 @@
+| 层级                     | 是否冻结  | 负责什么                    | AI 能不能改 |
+| ----------------------- | --------- | -------------------------- | ------- |
+| **结构层（Structure）**  | ✅ 冻结  | Grid / Flex / DOM 层级      | ❌ 不允许   |
+| **语义层（Semantic）**   | ✅ 冻结  | Hero / Feature / CTA 含义   | ❌ 不允许   |
+| **装饰层（Decoration）** | ❌ 不冻结 | 颜色 / 阴影 / 动画 / 圆角   | ✅ 受控允许  |

package/components//344/270/273/351/242/230Token.md

@@ -0,0 +1,418 @@
+# 外贸网站必备 Theme Token 设计系统 (ToB 简化版)
+
+基于 **TailwindCSS + ShadcnUI** 的 Token 体系，专为 **ToB 外贸询盘转化** 设计。
+
+---
+
+## 一、核心原则
+
+1.  **Trust First**（信任优先）：色调稳重，避免过于花哨，强调专业感。
+2.  **Readability**（阅读体验）：针对长文本（产品参数、About Us、Blog）优化排版。
+3.  **Inquiry Driven**（询盘导向）：所有视觉引导最终指向 "Contact Us" 或 "Get a Quote"。
+
+---
+
+## 二、Color Tokens（色彩系统）
+
+> 映射到 CSS Variables，支持 Dark Mode 自动适配
+
+### 1. Brand（品牌色）
+
+| Token                  | Tailwind Class                | 说明                                              | 典型值                     |
+| :--------------------- | :---------------------------- | :------------------------------------------------ | :------------------------- |
+| **Primary**            | `bg-primary` / `text-primary` | **主品牌色**，用于 CTA 按钮 (Inquiry)、导航高亮。 | Deep Blue / Industrial Red |
+| **Primary Foreground** | `text-primary-foreground`     | Primary 背景上的文字颜色。                        | White                      |
+| **Secondary**          | `bg-secondary`                | **辅助色**，用于次级按钮、标签背景。              | Light Blue / Silver        |
+| **Accent**             | `bg-accent`                   | **强调色**，用于 Hover 态、图标点缀。             | Gold / Orange              |
+
+### 2. Neutral / Surface（中性色与层级）
+
+| Token          | Tailwind Class          | 说明                                             |
+| :------------- | :---------------------- | :----------------------------------------------- |
+| **Background** | `bg-background`         | 页面背景色（通常是纯白或极淡的灰）。             |
+| **Card**       | `bg-card`               | 卡片背景色（产品卡片、Form 容器）。              |
+| **Foreground** | `text-foreground`       | 正文颜色（slate-900 / zinc-900）。               |
+| **Muted**      | `text-muted-foreground` | 辅助文字（参数 Label、日期），通常是 slate-500。 |
+| **Border**     | `border-border`         | 通用边框颜色。                                   |
+
+### 3. Semantic / Feedback（语义色）
+
+| Token           | Tailwind Class    | 说明                         |
+| :-------------- | :---------------- | :--------------------------- |
+| **Destructive** | `bg-destructive`  | **错误**，表单提交失败。     |
+| **Success**     | `text-green-600`  | **成功**，询盘发送成功反馈。 |
+| **Warning**     | `text-yellow-600` | **提示**，表单填写注意项。   |
+
+### 4. Data & Highlights（数据与高亮）
+
+ToB 站常见参数表格与卖点强调。
+
+| Token              | Tailwind Class    | 说明                                       |
+| :----------------- | :---------------- | :----------------------------------------- |
+| **Chart 1**        | `bg-chart-1`      | 主数据色（参数对比图）。                   |
+| **Chart 2**        | `bg-chart-2`      | 对比数据色。                               |
+| **Highlight**      | `bg-highlight`    | 文本高亮背景（马克笔效果），强调核心卖点。 |
+| **Highlight Text** | `text-highlight`  | 高亮文字颜色，用于关键词强调。             |
+| **Highlight Soft** | `bg-highlight/20` | 柔和高亮背景，大面积使用。                 |
+
+### 5. CTA Button Tokens（询盘按钮 Token）
+
+外贸站的核心转化入口，需要清晰的视觉层级。
+
+| Token               | 说明                   | 场景                                             |
+| :------------------ | :--------------------- | :----------------------------------------------- | ----------------- |
+| **btn-primary**     | 实心主按钮，品牌色背景 | "Get a Quote"、"Contact Us"、"Inquiry Now"       |
+| **btn-secondary**   | 描边次按钮，透明背景   | "Learn More"、"View Details"、"Download Catalog" | "Get free sample" |
+| **btn-ghost**       | 无边框幽灵按钮         | 导航链接、紧凑操作                               |
+| **btn-destructive** | 危险操作按钮           | "Delete"、"Cancel Order"                         |
+
+#### btn-primary 样式定义
+
+| 属性                 | Token / Value                                   |
+| :------------------- | :---------------------------------------------- |
+| **Background**       | `--btn-primary-bg: var(--primary)`              |
+| **Background Hover** | `--btn-primary-bg-hover: var(--primary) / 0.9`  |
+| **Text**             | `--btn-primary-text: var(--primary-foreground)` |
+| **Border**           | `--btn-primary-border: transparent`             |
+| **Shadow**           | `--btn-primary-shadow: var(--shadow-md)`        |
+| **Shadow Hover**     | `--btn-primary-shadow-hover: var(--shadow-lg)`  |
+| **Ring Focus**       | `--btn-primary-ring: var(--primary) / 0.5`      |
+
+#### btn-secondary 样式定义
+
+| 属性                 | Token / Value                                             |
+| :------------------- | :-------------------------------------------------------- |
+| **Background**       | `--btn-secondary-bg: transparent`                         |
+| **Background Hover** | `--btn-secondary-bg-hover: var(--secondary)`              |
+| **Text**             | `--btn-secondary-text: var(--foreground)`                 |
+| **Text Hover**       | `--btn-secondary-text-hover: var(--secondary-foreground)` |
+| **Border**           | `--btn-secondary-border: var(--border)`                   |
+| **Border Hover**     | `--btn-secondary-border-hover: var(--secondary)`          |
+| **Shadow Hover**     | `--btn-secondary-shadow-hover: var(--shadow-sm)`          |
+| **Ring Focus**       | `--btn-secondary-ring: var(--secondary) / 0.5`            |
+
+#### 按钮尺寸 Token
+
+| Token      | Padding                                      | Font Size   | Min Width | 场景                |
+| :--------- | :------------------------------------------- | :---------- | :-------- | :------------------ |
+| **btn-sm** | `--btn-sm-px: 1rem` `--btn-sm-py: 0.5rem`    | `text-sm`   | 80px      | 表格内、紧凑布局    |
+| **btn-md** | `--btn-md-px: 1.5rem` `--btn-md-py: 0.75rem` | `text-base` | 120px     | **标准按钮**        |
+| **btn-lg** | `--btn-lg-px: 2rem` `--btn-lg-py: 1rem`      | `text-lg`   | 160px     | Hero 区域、大型 CTA |
+
+### 6. Social Media (Trust Signals)
+
+用于 Footer 或 Contact 区域的品牌图标，增强信任感。
+
+| Token        | Value     | 说明              |
+| :----------- | :-------- | :---------------- |
+| **WhatsApp** | `#25D366` | **即时沟通核心**  |
+| **LinkedIn** | `#0A66C2` | **B2B 专业背书**  |
+| **Facebook** | `#1877F2` | 社媒引流          |
+| **YouTube**  | `#FF0000` | 工厂/产品视频展示 |
+
+### 7. Component Tokens（组件级 Token）
+
+定义常用组件的默认样式，保证全站一致性。组件可通过 props 覆盖。
+
+#### card-* (卡片)
+
+| Token              | Value                       | 说明               |
+| :----------------- | :-------------------------- | :----------------- |
+| **--card-bg**      | `var(--card)`               | 卡片背景色         |
+| **--card-border**  | `1px solid var(--border)`   | 卡片边框           |
+| **--card-radius**  | `var(--radius-md)` / 8px    | 卡片圆角           |
+| **--card-shadow**  | `var(--shadow-md)`          | 卡片阴影           |
+| **--card-padding** | `1.5rem`                    | 卡片内边距         |
+| **--card-gap**     | `1rem`                      | 卡片内元素间距     |
+| **--card-hover-shadow** | `var(--shadow-lg)`     | Hover 态阴影       |
+| **--card-hover-translate** | `-2px`              | Hover 态上移       |
+
+#### input-* (输入框)
+
+| Token                    | Value                         | 说明               |
+| :----------------------- | :---------------------------- | :----------------- |
+| **--input-bg**           | `var(--background)`           | 输入框背景         |
+| **--input-border**       | `1px solid var(--border)`     | 默认边框           |
+| **--input-border-focus** | `1px solid var(--primary)`    | Focus 边框         |
+| **--input-radius**       | `var(--radius-sm)` / 4px      | 圆角               |
+| **--input-ring**         | `var(--primary) / 0.2`        | Focus 外发光       |
+| **--input-padding**      | `0.75rem 1rem`                | 内边距             |
+| **--input-height**       | `2.5rem` / 40px               | 标准高度           |
+| **--input-placeholder**  | `var(--muted-foreground)`     | Placeholder 颜色   |
+
+#### modal-* (弹窗)
+
+| Token               | Value                       | 说明               |
+| :------------------ | :-------------------------- | :----------------- |
+| **--modal-bg**      | `var(--background)`         | 弹窗背景           |
+| **--modal-overlay** | `rgba(0, 0, 0, 0.5)`        | 遮罩层             |
+| **--modal-radius**  | `var(--radius-lg)` / 12px   | 弹窗圆角           |
+| **--modal-shadow**  | `var(--shadow-xl)`          | 弹窗阴影           |
+| **--modal-padding** | `1.5rem`                    | 内边距             |
+| **--modal-width-sm**  | `400px`                   | 小弹窗宽度         |
+| **--modal-width-md**  | `560px`                   | 标准弹窗宽度       |
+| **--modal-width-lg**  | `720px`                   | 大弹窗宽度         |
+
+#### badge-* (标签/徽章)
+
+| Token              | Value                       | 说明               |
+| :----------------- | :-------------------------- | :----------------- |
+| **--badge-bg**     | `var(--secondary)`          | 标签背景           |
+| **--badge-text**   | `var(--secondary-foreground)` | 标签文字         |
+| **--badge-radius** | `var(--radius-full)` / 9999px | 圆角（药丸形）   |
+| **--badge-padding**| `0.25rem 0.75rem`           | 内边距             |
+| **--badge-font**   | `text-xs font-medium`       | 字号字重           |
+
+#### table-* (表格)
+
+| Token                  | Value                       | 说明               |
+| :--------------------- | :-------------------------- | :----------------- |
+| **--table-header-bg**  | `var(--muted)`              | 表头背景           |
+| **--table-border**     | `1px solid var(--border)`   | 单元格边框         |
+| **--table-row-hover**  | `var(--muted) / 0.5`        | 行 Hover 背景      |
+| **--table-cell-padding** | `0.75rem 1rem`            | 单元格内边距       |
+| **--table-radius**     | `var(--radius-md)`          | 表格容器圆角       |
+
+---
+
+## 三、Typography Tokens（排版系统）
+
+### 1. Font Family
+
+| Token               | 说明                                                               | 推荐字体                                                   |
+| :------------------ | :----------------------------------------------------------------- | :--------------------------------------------------------- |
+| **font-sans**       | **正文/通用**。清晰易读，现代感。                                  | Inter, Roboto, Helvetica Neue                              |
+| **font-serif**      | **标题/品牌**。用于 Hero 标题，营造传统、高端感（可选）。          | Playfair Display, Merriweather                             |
+| **font-decorative** | **高端花字**。用于品牌 Slogan、奢侈品/高端制造展示、大型装饰文字。 | Cinzel, Cormorant Garamond, Bodoni Moda, Libre Baskerville |
+| **font-mono**       | **参数/代码**。用于产品型号、规格数据。                            | JetBrains Mono, Roboto Mono                                |
+
+### 2. Font Sizes (Type Scale)
+
+| Token         | Size  | Line Height | 场景                                    |
+| :------------ | :---- | :---------- | :-------------------------------------- |
+| **text-xs**   | 12px  | 16px        | 辅助标签、版权信息                      |
+| **text-sm**   | 14px  | 20px        | 导航、次要文本、表格内容                |
+| **text-base** | 16px  | 24px        | **正文默认**（外贸站正文不宜小于 16px） |
+| **text-lg**   | 18px  | 28px        | 摘要、大段落首句                        |
+| **text-xl**   | 20px  | 28px        | H4 / 卡片标题                           |
+| **text-2xl**  | 24px  | 32px        | H3 / 模块标题                           |
+| **text-3xl**  | 30px  | 36px        | H2 / 页面主标题                         |
+| **text-4xl+** | 36px+ | 1.1         | H1 / Hero 标题                          |
+
+### 3. Font Weight
+
+| Token        | Tailwind        | 说明                      |
+| :----------- | :-------------- | :------------------------ |
+| **Regular**  | `font-normal`   | 正文默认。                |
+| **Medium**   | `font-medium`   | 导航、按钮、表格表头。    |
+| **Semibold** | `font-semibold` | 标题、强调数字。          |
+| **Bold**     | `font-bold`     | 仅用于 H1/H2 或极强强调。 |
+
+### 4. Semantic & Functional Typography (语义化排版)
+
+| Token Style      | 推荐组合                                                     | 场景                               |
+| :--------------- | :----------------------------------------------------------- | :--------------------------------- |
+| **Lead**         | `text-xl text-muted-foreground`                              | **导语**，文章或模块的副标题。     |
+| **Caption**      | `text-xs text-muted-foreground`                              | **注脚**，图片说明、免责声明。     |
+| **Spec / Code**  | `font-mono text-sm bg-muted px-1 rounded`                    | **参数值**，强调型号或技术指标。   |
+| **Quote**        | `font-serif italic text-lg text-foreground/80`               | **客户评价**，Testimonial 内容。   |
+| **Eyebrow**      | `text-sm font-medium tracking-widest uppercase text-primary` | **眉题**，位于 H2 上方的分类标签。 |
+| **Form Label**   | `text-sm font-medium leading-none`                           | **表单标签**，清晰易读。           |
+| **Input Hint**   | `text-[0.8rem] text-muted-foreground`                        | **输入提示**，帮助用户填写表单。   |
+| **Alert Text**   | `text-sm font-medium text-destructive`                       | **报错提示**，表单验证反馈。       |
+| **Success Text** | `text-sm font-medium text-green-600`                         | **成功提示**，提交成功反馈。       |
+| **Breadcrumb**   | `text-sm text-muted-foreground hover:text-foreground`        | **面包屑**，路径导航。             |
+| **Empty State**  | `text-center text-muted-foreground`                          | **空状态**，无搜索结果提示。       |
+
+---
+
+## 四、Spacing & Layout Tokens（空间系统）
+
+### 1. Container (Max Width)
+
+| Token                | Width  | 场景                         |
+| :------------------- | :----- | :--------------------------- |
+| **max-w-screen-md**  | 768px  | 窄版落地页 (Squeeze Page)    |
+| **max-w-screen-lg**  | 1024px | 博客文章 / 条款页            |
+| **max-w-screen-xl**  | 1280px | **标准页面容器**             |
+| **max-w-screen-2xl** | 1536px | 宽版展示（图片墙、工厂全景） |
+
+### 2. Spacing Scale
+
+| Token          | Desktop | Mobile | 场景                          |
+| :------------- | :------ | :----- | :---------------------------- |
+| **py-compact** | 48px    | 32px   | 紧凑模块（LogoCloud、Footer） |
+| **py-normal**  | 80px    | 48px   | **标准模块间距**              |
+| **py-relaxed** | 120px   | 64px   | Hero、大留白展示区            |
+
+---
+
+## 五、Shape & Depth（形态与深度）
+
+### 1. Radius (圆角)
+
+根据品牌调性灵活选择，严谨工业风可用小圆角，现代科技感可用大圆角。
+
+| Token            | Value   | 场景                            |
+| :--------------- | :------ | :------------------------------ |
+| **rounded-none** | 0px     | 严谨工业风、传统制造业。        |
+| **rounded-sm**   | 2px-4px | 按钮、输入框、表格。            |
+| **rounded-md**   | 6px-8px | 卡片容器、弹窗。                |
+| **rounded-lg**   | 12px    | 大卡片、Hero 图片、现代科技感。 |
+| **rounded-xl**   | 16px    | 特色模块、品牌展示区。          |
+| **rounded-full** | 9999px  | 头像、标签 Badge、圆形按钮。    |
+
+### 2. Border Width (边框)
+
+| Token          | Value | 场景                          |
+| :------------- | :---- | :---------------------------- |
+| **border**     | 1px   | 默认边框。                    |
+| **border-l-4** | 4px   | 左侧装饰线（引用、Callout）。 |
+
+### 3. Z-Index (层级)
+
+| Token    | Value | 场景              |
+| :------- | :---- | :---------------- |
+| **z-30** | 30    | Sticky Header。   |
+| **z-40** | 40    | Dropdown / Menu。 |
+| **z-50** | 50    | Modal / Drawer。  |
+
+### 4. Shadow (阴影)
+
+| Token         | 场景                        |
+| :------------ | :-------------------------- |
+| **shadow-sm** | 轻微浮起，输入框 focus 态。 |
+| **shadow-md** | 卡片默认阴影。              |
+| **shadow-lg** | Hover 浮起效果、下拉菜单。  |
+| **shadow-xl** | Modal、重要弹窗。           |
+
+---
+
+## 六、Motion (动效系统)
+
+适度动效可提升体验，ToB 站建议**简洁克制**，避免过度花哨。
+
+### 1. Duration (时长)
+
+| Token            | Value | 场景                         |
+| :--------------- | :---- | :--------------------------- |
+| **duration-150** | 150ms | 微交互（Hover、Focus）。     |
+| **duration-300** | 300ms | **标准过渡**（按钮、卡片）。 |
+| **duration-500** | 500ms | 模块入场、页面转场。         |
+| **duration-700** | 700ms | 大型动画、Hero 区域。        |
+
+### 2. Easing (缓动)
+
+| Token           | Value                               | 场景                     |
+| :-------------- | :---------------------------------- | :----------------------- |
+| **ease-out**    | `cubic-bezier(0, 0, 0.2, 1)`        | **推荐默认**，自然减速。 |
+| **ease-in-out** | `cubic-bezier(0.4, 0, 0.2, 1)`      | 双向动画、循环动效。     |
+| **ease-spring** | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 弹性效果、按钮点击反馈。 |
+
+### 3. Animation Presets (常用动效)
+
+| Token              | 效果        | 场景                         |
+| :----------------- | :---------- | :--------------------------- |
+| **fade-in**        | 淡入        | 模块入场、Toast 提示。       |
+| **fade-up**        | 淡入 + 上移 | **标准入场**，卡片、列表。   |
+| **fade-down**      | 淡入 + 下移 | 下拉菜单、Tooltip。          |
+| **scale-in**       | 缩放淡入    | Modal、弹窗、图片预览。      |
+| **slide-in-right** | 右侧滑入    | Drawer、侧边栏。             |
+| **pulse**          | 脉冲闪烁    | 加载状态、等待提示。         |
+| **bounce**         | 弹跳        | CTA 按钮吸引注意力（慎用）。 |
+
+### 4. Scroll Animation (滚动动效 - AOS)
+
+| Attribute                 | 效果       | 场景                           |
+| :------------------------ | :--------- | :----------------------------- |
+| `data-aos="fade-up"`      | 向上淡入   | **通用入场**。                 |
+| `data-aos="fade-in"`      | 原地淡入   | 图片、背景。                   |
+| `data-aos="zoom-in"`      | 缩放淡入   | 重点模块、Hero。               |
+| `data-aos-delay="100"`    | 延迟 100ms | 列表交错动画。                 |
+| `data-aos-duration="600"` | 时长 600ms | 自定义速度。                   |
+| `data-aos-once="true"`    | 只播放一次 | **推荐**，避免滚动时反复触发。 |
+
+---
+
+## 七、Iconography (图标)
+
+使用 Lucide / Iconify。
+
+| Token       | Size  | 场景                       |
+| :---------- | :---- | :------------------------- |
+| **size-4**  | 16px  | 按钮内图标、面包屑分隔符。 |
+| **size-5**  | 20px  | 导航菜单图标。             |
+| **size-6**  | 24px  | 模块标题图标。             |
+| **size-8+** | 32px+ | 特性 (Feature) 装饰图标。  |
+
+---
+
+## 七、Token 映射示例 (Tailwind Config)
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        // 数据可视化 (简化版)
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+        },
+        // 营销高亮
+        highlight: "hsl(var(--highlight))",
+        // 社交品牌色
+        social: {
+          whatsapp: "#25D366",
+          linkedin: "#0A66C2",
+          facebook: "#1877F2",
+          youtube: "#FF0000",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      transitionDuration: {
+        fast: "150ms",
+        normal: "300ms",
+        slow: "500ms",
+      },
+    },
+  },
+};
+```

package/components//345/216/237/345/255/220/345/206/273/347/273/223/346/270/205/345/215/225.md

@@ -0,0 +1,250 @@
+# 原子冻结清单（Frozen Atomic Layer）
+
+Frozen ≠ 不扩展，而是「语义与接口永不破坏」
+
+## 一、冻结的总体规则（先定宪法）
+
+以下 4 条，比具体组件更重要：
+
+### 1️⃣ 冻结的是「语义 + Props 结构」
+允许内部 Tailwind / DOM 变，不允许 Props 含义变化
+
+### 2️⃣ 冻结的是「层级关系」
+Section > Layout > Content > Action（永远不交叉）
+
+### 3️⃣ 冻结的是「参数空间」
+枚举值只加不改，默认值永不删除
+
+### 4️⃣ 冻结的是「AI 可操作边界」
+AI 只能改 frozen props，新能力通过新增原子，不改旧原子
+
+---
+
+## 二、🧊 真正“永远不动”的原子（核心冻结层）
+
+> 语义和接口永不改变，AI 只能操作内容
+
+### 🧱 1. Structure (结构) - 绝对冻结
+
+**Section** ✅
+```ts
+interface SectionProps {
+  id?: string
+  tone?: "light" | "dark" | "brand"
+  density?: "compact" | "normal" | "relaxed"
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full"
+}
+```
+*原因：页面骨架，全站升级依赖它*
+
+**Container** ✅
+```ts
+interface ContainerProps {
+  size?: "sm" | "md" | "lg" | "xl"
+  align?: "left" | "center"
+}
+```
+*原因：限宽核心*
+
+### 🧱 2. Layout (布局) - 高优先冻结
+
+**Grid** ✅
+```ts
+interface GridProps {
+  cols?: Responsive<number>
+  gap?: GapToken
+  align?: "start" | "center" | "end"
+}
+```
+
+**Stack** ✅
+```ts
+interface StackProps {
+  direction?: "vertical" | "horizontal"
+  gap?: GapToken
+  align?: "start" | "center" | "end"
+}
+```
+
+**Split** ✅
+```ts
+interface SplitProps {
+  ratio?: "1:1" | "2:1" | "3:2"
+  reverse?: boolean
+}
+```
+
+### 🧱 3. Content (内容) - 语义冻结
+
+**Heading** ✅
+```ts
+interface HeadingProps {
+  level?: 1 | 2 | 3 | 4
+  emphasis?: "strong" | "normal" | "soft"
+}
+```
+
+**Text** ✅
+```ts
+interface TextProps {
+  size?: "sm" | "md" | "lg"
+  tone?: "normal" | "muted"
+}
+```
+
+**Media** ✅
+```ts
+interface MediaProps {
+  src: string
+  type?: "image" | "video"
+  ratio?: AspectRatio
+}
+```
+
+**Link** ✅
+```ts
+interface LinkProps {
+  href: string
+  external?: boolean
+  variant?: "default" | "muted" | "nav"
+}
+```
+
+### 🧱 4. Action (转化) - 转化冻结
+
+**Button / CTA** ✅
+```ts
+interface ButtonProps {
+  variant?: "primary" | "secondary" | "ghost"
+  size?: "sm" | "md" | "lg"
+}
+```
+
+### 🧱 5. Semantic & Form (业务冻结)
+
+**Feature** (卖点) ✅
+```ts
+interface FeatureProps {
+  title: string
+  description: string
+  icon?: string
+  emphasis?: "normal" | "strong"
+}
+```
+
+**SpecList / Table** (参数) ✅
+```ts
+interface SpecListProps { items: { label: string; value: string }[]; layout?: "list" | "grid" }
+interface TableProps { columns: any[]; rows: any[]; striped?: boolean }
+```
+
+**FAQ / Breadcrumb** (SEO) ✅
+*语义稳定，对应 Schema 结构*
+
+**Input / Select / Textarea** (询盘) ✅
+*HTML 表单标准语义*
+
+---
+
+## 三、❄️ 半冻结原子（规则冻结，形态可扩）
+
+> 不允许破坏规则，但允许新增形态 (Variant)
+
+**Box** (装饰容器)
+*规则稳定 (padding/radius)，但 background 可扩*
+
+**Prose** (富文本)
+*Typography 规则稳定*
+
+**Spacer / Align / Divider**
+*空间规则稳定*
+
+**Badge / Icon**
+*基础元数据稳定，样式可扩*
+
+**LogoCloud / Testimonial / Rating / PriceTag**
+*信任组件，核心字段稳定，UI 风格可变*
+
+---
+
+## 四、🔥 明确 “永远不冻结”的原子
+
+> 设计趋势变化快，形态多变，AI 需在受控范围操作
+
+- **❌ Repeat** (工具组件，render 不稳定)
+- **❌ Pagination** (交互多变)
+- **❌ Countdown** (样式多变)
+- **❌ Carousel / Tabs / Modal** (易滥用)
+- **❌ Animation** (装饰层)
+
+### Animation 治理规则（装饰层，不冻结）
+
+**使用方式**：直接在元素上写 `data-aos-*` 属性，无需 wrapper
+
+```html
+<h2 data-aos="fade-up">标题</h2>
+<p data-aos="fade-up" data-aos-delay="80">文案</p>
+<button data-aos="fade-up" data-aos-delay="160">按钮</button>
+```
+
+**可用字段**：
+- `data-aos`：动画类型（fade-up / fade-down / fade-left / fade-right / zoom-in / slide-up 等）
+- `data-aos-delay`：延迟（ms），用于 stagger 效果
+- `data-aos-duration`：持续时间（ms）
+- `data-aos-offset`：触发偏移（px）
+- `data-aos-easing`：缓动函数
+- `data-aos-once`：是否只播放一次
+
+**治理红线**（校验器守门）：
+- **禁止嵌套**：父子不能同时带 `data-aos`
+- **禁止首屏主 CTA**：hero 区域主按钮不加动画
+- **移动端降级**：≤768px 只允许 fade 系 + duration≤300ms
+- **支持全局关闭**：提供一键禁用开关
+
+**AI 约束**：
+- 只能改 `data-aos-*` 值
+- 不能把 Animation 升级为 frozen 原子
+
+原因
+
+- **设计趋势变化快**
+- **AI 容易滥用**
+- **对外贸转化非核心**
+
+---
+
+## 五、冻结层的工程落地
+
+### 1️⃣ 在代码里显式标记
+
+```ts
+/**
+ * @frozen
+ * DO NOT CHANGE PROPS SEMANTICS
+ */
+export interface SectionProps { ... }
+```
+
+### 2️⃣ 校验器规则（AI 守门）
+
+- **禁止删除 frozen props**
+- **禁止改 enum 含义**
+- **禁止替换 frozen component**
+
+### 3️⃣ 版本策略
+
+```txt
+frozenAtomsVersion: "1.x"
+```
+
+---
+
+## 六、一句话总结
+
+你不是在做组件库，你是在做一套“**长期稳定的设计语言内核**”。
+
+这份冻结清单一旦立住：
+- **AI 永远不乱**
+- **模板永远可升级**
+- **客户永远可定制**
+- **系统越用越值钱**

package/components//347/211/251/346/226/231/345/244/207/345/277/230.md

@@ -0,0 +1,353 @@
+# 原子化物料清单
+
+共 25 个原子，按冻结层级分类
+
+---
+
+## 一、🧊 完全冻结（Frozen）
+
+> 语义和接口永不改变，AI 只能操作内容，不能改结构
+
+### 1. 结构原子
+
+**Section**
+```ts
+interface SectionProps {
+  id: string
+  tone?: "light" | "dark" | "brand"
+  density?: "compact" | "normal" | "relaxed"
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full"
+}
+```
+- tone：控制背景、基础文字色
+- density：上下 padding（mobile 自动降级一档）
+- maxWidth：内容最大宽度（mobile 自动 full）
+
+**Container**
+```ts
+interface ContainerProps {
+  size?: "sm" | "md" | "lg" | "xl"
+  align?: "left" | "center"
+}
+```
+
+### 2. 布局原子
+
+**Grid**
+```ts
+interface GridProps {
+  cols?: number | { base: number; md?: number; lg?: number }
+  gap?: "xs" | "sm" | "md" | "lg" | "xl"
+  align?: "start" | "center" | "end"
+}
+```
+
+**Stack**
+```ts
+interface StackProps {
+  direction?: "vertical" | "horizontal"
+  gap?: "xs" | "sm" | "md" | "lg"
+  align?: "start" | "center" | "end"
+}
+```
+- mobile 强制 vertical
+
+**Split**
+```ts
+interface SplitProps {
+  ratio?: "1:1" | "2:1" | "3:2"
+  reverse?: boolean
+}
+```
+- mobile 自动 stack
+
+### 3. 内容原子
+
+**Heading**
+```ts
+interface HeadingProps {
+  level?: 1 | 2 | 3 | 4
+  emphasis?: "strong" | "normal" | "soft"
+}
+```
+- 自动响应式字号缩放
+- H1 mobile 自动降级
+
+**Text**
+```ts
+interface TextProps {
+  size?: "sm" | "md" | "lg"
+  tone?: "muted" | "normal"
+}
+```
+
+**Media**
+```ts
+interface MediaProps {
+  type?: "image" | "video"
+  src: string
+  ratio?: "1:1" | "4:3" | "16:9"
+}
+```
+- 自动 lazy + responsive image
+
+**Link**
+```ts
+interface LinkProps {
+  href: string
+  external?: boolean  // 自动加 target="_blank" rel="noopener"
+  variant?: "default" | "muted" | "nav"
+}
+```
+
+### 4. 行为原子
+
+**Button / CTA**
+```ts
+interface ButtonProps {
+  variant?: "primary" | "secondary" | "ghost"
+  size?: "sm" | "md" | "lg"
+}
+```
+
+### 5. 语义原子（SEO 核心）
+
+**Feature**（卖点）
+```ts
+interface FeatureProps {
+  icon?: string
+  title: string
+  description: string
+  emphasis?: "normal" | "strong"
+}
+```
+
+**SpecList**（参数列表）
+```ts
+interface SpecListProps {
+  items: { label: string; value: string }[]
+  layout?: "grid" | "list"
+}
+```
+
+**Table**（多列对比表）
+```ts
+interface TableProps {
+  columns: { key: string; label: string }[]
+  rows: Record<string, string>[]
+  striped?: boolean
+  compact?: boolean
+}
+```
+
+**FAQ**
+```ts
+interface FAQProps {
+  items: { question: string; answer: string }[]
+  defaultOpen?: number
+}
+```
+- SEO Schema：FAQPage
+
+**Breadcrumb**
+```ts
+interface BreadcrumbProps {
+  items: { label: string; href?: string }[]
+}
+```
+- SEO Schema：BreadcrumbList
+
+### 6. 表单原子（询盘核心）
+
+**Input**
+```ts
+interface InputProps {
+  type?: "text" | "email" | "tel" | "number"
+  label?: string
+  placeholder?: string
+  required?: boolean
+  error?: string
+}
+```
+
+**Textarea**
+```ts
+interface TextareaProps {
+  label?: string
+  placeholder?: string
+  rows?: number
+  required?: boolean
+}
+```
+
+**Select**
+```ts
+interface SelectProps {
+  options: { value: string; label: string }[]
+  label?: string
+  placeholder?: string
+  required?: boolean
+}
+```
+
+---
+
+## 二、🧊❄️ 半冻结（Semi-Frozen）
+
+> 规则冻结，形态可扩展（可加 variant，但不改核心接口）
+
+**Box**
+```ts
+interface BoxProps {
+  padding?: "none" | "sm" | "md" | "lg"
+  background?: "none" | "muted" | "card"
+  border?: boolean
+  radius?: "none" | "sm" | "md" | "lg"
+}
+```
+- 场景：Feature 卡片、Pricing 卡片、侧边栏模块
+
+**Prose**
+```ts
+interface ProseProps {
+  size?: "sm" | "md" | "lg"
+}
+```
+- 自动处理段落/标题间距、列表/引用样式
+- 对应 Tailwind `prose` 类
+- 场景：产品详情、博客正文、About 页面
+
+**Spacer**
+```ts
+interface SpacerProps {
+  size?: "xs" | "sm" | "md" | "lg"
+}
+```
+
+**Align**
+```ts
+interface AlignProps {
+  x?: "left" | "center" | "right"
+  y?: "top" | "center" | "bottom"
+}
+```
+
+**Badge**
+```ts
+interface BadgeProps {
+  tone?: "info" | "success" | "warning"
+}
+```
+
+**Icon**
+```ts
+interface IconProps {
+  name: string  // iconify 格式，如 "mdi:check"
+  size?: "sm" | "md" | "lg" | "xl"
+  color?: "current" | "muted" | "brand"
+}
+```
+
+**Divider**
+```ts
+interface DividerProps {
+  orientation?: "horizontal" | "vertical"
+  spacing?: "sm" | "md" | "lg"
+}
+```
+
+**LogoCloud**
+```ts
+interface LogoCloudProps {
+  logos: string[]
+  columns?: Responsive<number>
+  tone?: "mono" | "color"
+}
+```
+
+**Testimonial**
+```ts
+interface TestimonialProps {
+  quote: string
+  author: string
+  role?: string
+  avatar?: string
+}
+```
+
+**Rating**
+```ts
+interface RatingProps {
+  value: number  // 0-5
+  max?: number
+  size?: "sm" | "md" | "lg"
+  showValue?: boolean
+}
+```
+
+**PriceTag**
+```ts
+interface PriceTagProps {
+  amount: number
+  currency?: "USD" | "EUR" | "CNY"
+  original?: number  // 原价（用于折扣展示）
+  size?: "sm" | "md" | "lg"
+}
+```
+
+---
+
+## 三、🔥 不冻结（Unfrozen）
+
+> 设计趋势变化快，形态多变，AI 需在受控范围操作
+
+**Repeat**
+```ts
+interface RepeatProps<T> {
+  items: T[]
+  columns?: number | Responsive<number>
+  render: (item: T) => AstroNode
+}
+```
+- 工具组件，render 函数形态不稳定
+- 用于批量生成 Features / Logos / Testimonials
+
+**Pagination**
+```ts
+interface PaginationProps {
+  current: number
+  total: number
+  pageSize?: number
+  onChange?: (page: number) => void
+}
+```
+- 交互模式可能变化（无限滚动 vs 分页）
+
+**Countdown**
+```ts
+interface CountdownProps {
+  endTime: Date | string
+  format?: "d:h:m:s" | "h:m:s"
+  onEnd?: () => void
+}
+```
+- 促销场景，样式/动效多变
+
+**Animation**（装饰层）
+- 直接用 `data-aos-*` 属性
+- 详见《原子冻结清单》
+
+**Carousel / Tabs / Modal**
+- 形态多变，易滥用
+- 不纳入冻结层
+
+---
+
+## 四、判断公式
+
+新原子是否该加？满足 ≥2 条才值得：
+
+- 在 3 个以上站点重复出现？
+- AI 是否能明确理解它的语义？
+- 是否能明显减少模板复杂度？
+- 是否对转化 / SEO 有直接价值？

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -26,11 +26,11 @@
     "eslint": "^7.32.0",
     "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/slate-preview": "1.2.63",
     "@rxdrag/entify-hooks": "0.2.77",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/slate-preview": "1.2.63",
+    "@rxdrag/tsconfig": "0.2.0",
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
@@ -38,7 +38,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/website-lib-core": "0.0.106"
+    "@rxdrag/website-lib-core": "0.0.109"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"