@rxdrag/website-lib 0.0.121 → 0.0.123

package/components/DialogTrigger.astro

@@ -1,6 +1,8 @@
 ---
 interface Props {
   dialogId: string;
+  openableKey?: string;
+  as?: string;
   callToAction?: string;
   class?: string;
   className?: string;
@@ -8,16 +10,20 @@ interface Props {
 
 const {
   dialogId,
+  openableKey,
+  as: _as,
   callToAction,
   class: _class,
   className,
   ...rest
 } = Astro.props;
+
+const resolvedDialogId = dialogId || openableKey;
 ---
 
 <button
   type="button"
-  data-modal-open={dialogId}
+  data-modal-open={resolvedDialogId}
   data-call-to-action={callToAction}
   class:list={[className, _class]}
   {...rest}

package/components/Document.astro

@@ -41,6 +41,7 @@ if (!resolvedMeta || !resolvedTitle) {
   try {
     const pathname = Astro.url?.pathname || "";
     const slug = typeof Astro.params?.slug === "string" ? Astro.params.slug : undefined;
+    const id = typeof Astro.params?.id === "string" ? Astro.params.id : undefined;
 
     if (slug && pathname.startsWith("/posts/categories/")) {
       const category = await rx.getPostCategoryBySlug(slug);
@@ -52,6 +53,11 @@ if (!resolvedMeta || !resolvedTitle) {
       const page = await rx.getPageByType(PageType.ProductList);
       resolvedTitle = resolvedTitle ?? category?.name ?? "Products";
       resolvedMeta = resolvedMeta ?? page?.meta;
+    } else if (id && pathname.startsWith("/profiles/")) {
+      const user = await rx.getOneUser(id);
+      const page = await rx.getPageByType(PageType.Profile);
+      resolvedTitle = resolvedTitle ?? user?.name ?? "Profile";
+      resolvedMeta = resolvedMeta ?? page?.meta;
     } else if (slug && pathname.startsWith("/posts/")) {
       const post = await rx.getPostBySlug(slug, { width: 1200, height: 600 });
       resolvedTitle = resolvedTitle ?? post?.title;

package/components/Heading.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+}
+
+const { level, className, class: classAttr, ...rest } = Astro.props;
+
+if (typeof level !== "number" || level < 1 || level > 6) {
+  console.log("[Heading] invalid level", level);
+  throw new Error("Heading.astro: prop 'level' must be a number from 1 to 6");
+}
+
+const Tag = `h${level}`;
+---
+
+<Tag class:list={[className, classAttr]} {...rest}>
+  <slot />
+</Tag>

package/components/Motion.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type WhileInViewPreset =
+  | "fade"
+  | "fade-up"
+  | "fade-down"
+  | "fade-left"
+  | "fade-right"
+  | "zoom-in"
+  | "zoom-out"
+  | "slide-up"
+  | "slide-down"
+  | "slide-left"
+  | "slide-right";
+
+type WhileInViewConfig = {
+  preset?: WhileInViewPreset;
+  once?: boolean;
+  duration?: number;
+  delay?: number;
+  easing?: string;
+  offset?: number;
+  anchorPlacement?: string;
+  anchor?: string;
+};
+
+interface Props extends HTMLAttributes<"div"> {
+  as?: string;
+  class?: string;
+  className?: string;
+  whileInView?: WhileInViewPreset | WhileInViewConfig;
+}
+
+const {
+  as = "div",
+  whileInView,
+  class: cls,
+  className,
+  ...rest
+} = Astro.props;
+
+const Tag = as as any;
+
+const config: WhileInViewConfig | undefined =
+  typeof whileInView === "string" ? { preset: whileInView } : whileInView;
+
+const dataAos = config?.preset;
+const dataAosOnce = config?.once;
+const dataAosDuration = config?.duration;
+const dataAosDelay = config?.delay;
+const dataAosEasing = config?.easing;
+const dataAosOffset = config?.offset;
+const dataAosAnchorPlacement = config?.anchorPlacement;
+const dataAosAnchor = config?.anchor;
+
+const aosAttrs = dataAos
+  ? {
+      "data-aos": dataAos,
+      "data-aos-once":
+        typeof dataAosOnce === "boolean" ? String(dataAosOnce) : undefined,
+      "data-aos-duration":
+        typeof dataAosDuration === "number" ? String(dataAosDuration) : undefined,
+      "data-aos-delay":
+        typeof dataAosDelay === "number" ? String(dataAosDelay) : undefined,
+      "data-aos-easing": dataAosEasing,
+      "data-aos-offset":
+        typeof dataAosOffset === "number" ? String(dataAosOffset) : undefined,
+      "data-aos-anchor-placement": dataAosAnchorPlacement,
+      "data-aos-anchor": dataAosAnchor,
+    }
+  : {};
+---
+
+<Tag class:list={[cls, className]} {...aosAttrs} {...rest}>
+  <slot />
+</Tag>

package/components/RichTextView.astro

@@ -1,12 +1,7 @@
 ---
-import { mdxToSlate } from "@rxdrag/slate-preview";
-import {
-  LeafPreviewView,
-  slatePreviews,
-} from "@rxdrag/slate-preview";
-import type { TSlateLeaf } from "@rxdrag/slate-preview";
-import { ElementPreview } from "@rxdrag/slate-preview";
+import { mdxToTiptap, TiptapPreview } from "@rxdrag/tiptap-preview";
 import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
+import React from "react";
 
 interface Props {
   value?: string;
@@ -15,33 +10,19 @@ interface Props {
 }
 
 const { value = "", class: className, style } = Astro.props;
-const previews = { ...slatePreviews, [PRODUCT_KEY]: ProductCard };
-const nodes = mdxToSlate(value);
+const tiptapValue = mdxToTiptap(value);
+
+const ProductBlock = (props: { attrs?: Record<string, unknown> }) => {
+  return React.createElement(ProductCard as any, {
+    node: (props.attrs || {}) as any,
+  });
+};
+const customBlocks = {
+  [PRODUCT_KEY]: ProductBlock,
+  product: ProductBlock,
+};
 ---
 
 <div class={className} style={style}>
-  {
-    nodes?.map((node, index) => {
-      // 递归处理节点的函数
-      const renderNode = (node: any) => {
-        // 纯文本节点
-        if (typeof node.text !== 'undefined') {
-          return <LeafPreviewView node={node as TSlateLeaf} />;
-        }
-        
-        // 有子节点的元素
-        if (node.children && node.children.length > 0) {
-          return (
-            <ElementPreview node={node} previews={previews}>
-              {node.children.map((child: any) => renderNode(child))}
-            </ElementPreview>
-          );
-        }
-        
-        return null;
-      };
-      
-      return renderNode(node);
-    })
-  }
+  <TiptapPreview value={tiptapValue} customBlocks={customBlocks} />
 </div>

package/components/YearsSince.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  startYear?: number;
+  minYears?: number;
+  offset?: number;
+  suffix?: string;
+}
+
+const {
+  startYear = 2006,
+  minYears = 20,
+  offset = 0,
+  suffix = "+",
+} = Astro.props;
+
+const currentYear = new Date().getFullYear();
+const years = Math.max(minYears, currentYear - startYear + offset);
+---
+
+{years}{suffix}

package/components//347/211/251/346/226/231/346/270/205/345/215/225.md

@@ -2,12 +2,12 @@
 
 > 外贸 toB 独立站物料体系，按冻结层级分类
 
-| 分类 | 数量 | 说明 |
-|------|------|------|
-| 完全冻结原子 | 14 | 语义和接口永不改变 |
-| 半冻结原子 | 4 | 规则冻结，形态可扩展 |
-| 业务组件 | 9 | 包含复杂交互逻辑 |
-| 设计器模板 | 52 | 一键生成常用结构 |
+| 分类         | 数量 | 说明                 |
+| ------------ | ---- | -------------------- |
+| 完全冻结原子 | 14   | 语义和接口永不改变   |
+| 半冻结原子   | 4    | 规则冻结，形态可扩展 |
+| 业务组件     | 10   | 包含复杂交互逻辑     |
+| 设计器模板   | 52   | 一键生成常用结构     |
 
 ---
 
@@ -29,11 +29,12 @@
 ### 1. 结构原子
 
 **Section（区块）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface SectionProps extends HTMLAttributes<'section'> {
+interface SectionProps extends HTMLAttributes<"section"> {
   className?: string;
   containerClassName?: string;
   backgrounds?: BackgroundConfig[];
@@ -42,11 +43,12 @@ interface SectionProps extends HTMLAttributes<'section'> {
 ```
 
 **BaseHeader（基础 Header 容器壳）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface BaseHeaderProps extends HTMLAttributes<'header'> {
+interface BaseHeaderProps extends HTMLAttributes<"header"> {
   className?: string;
   containerClassName?: string;
   backgrounds?: BackgroundConfig[];
@@ -55,11 +57,12 @@ interface BaseHeaderProps extends HTMLAttributes<'header'> {
 ```
 
 **BaseFooter（基础 Footer 容器壳）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface BaseFooterProps extends HTMLAttributes<'footer'> {
+interface BaseFooterProps extends HTMLAttributes<"footer"> {
   className?: string;
   containerClassName?: string;
   backgrounds?: BackgroundConfig[];
@@ -68,34 +71,56 @@ interface BaseFooterProps extends HTMLAttributes<'footer'> {
 ```
 
 **Container（容器）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface ContainerProps extends HTMLAttributes<'div'> {
+interface ContainerProps extends HTMLAttributes<"div"> {
   className?: string;
 }
 ```
 
 **BaseBlock（基础容器壳）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface BaseBlockProps extends HTMLAttributes<'div'> {
+interface BaseBlockProps extends HTMLAttributes<"div"> {
   baseClass?: string | string[];
   className?: string;
   backgrounds?: BackgroundConfig[];
 }
 ```
 
+**Layout（页面壳 / Document Wrapper）**
+
+```ts
+import type { PageMeta } from "@rxdrag/rxcms-models";
+
+interface LayoutProps {
+  lang?: string;
+  title?: string;
+  meta?: PageMeta;
+  class?: string;
+  className?: string;
+}
+```
+
+- 语义：页面级文档壳，负责 `<html>/<head>/<body>` 结构
+- SEO：支持传入 `title` 与 `meta`（`PageMeta`）
+- 插槽：支持 `<slot name="head" />` 向 head 注入自定义内容（预加载/脚本/样式等）
+- 每个模板都要实现一个，但是接口保持不变
+
 ### 2. 布局原子
 
 **Grid（网格）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface GridProps extends HTMLAttributes<'div'> {
+interface GridProps extends HTMLAttributes<"div"> {
   patternName?: string;
   className?: string;
   backgrounds?: BackgroundConfig[];
@@ -103,22 +128,24 @@ interface GridProps extends HTMLAttributes<'div'> {
 ```
 
 **GridCell（网格单元）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface GridCellProps extends HTMLAttributes<'div'> {
+interface GridCellProps extends HTMLAttributes<"div"> {
   className?: string;
   backgrounds?: BackgroundConfig[];
 }
 ```
 
 **Stack（堆叠）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 import type { BackgroundConfig } from "@rxdrag/website-lib-core";
 
-interface StackProps extends HTMLAttributes<'div'> {
+interface StackProps extends HTMLAttributes<"div"> {
   className?: string;
   backgrounds?: BackgroundConfig[];
 }
@@ -131,35 +158,49 @@ interface StackProps extends HTMLAttributes<'div'> {
 
 **Heading（标题）**
 
-- 不单独定义 Heading 原子
-- 直接使用原生 `h1/h2/h3/h4` 标签表达语义
+```ts
+import type { HTMLAttributes } from "astro/types";
+
+interface HeadingProps
+  extends HTMLAttributes<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+}
+```
+
+- 语义：标题
+- 通过 `level` 渲染对应的 `h1~h6`
 - 视觉样式（字号/字重/行高/响应式）统一通过 `class` / `className`（Tailwind，如 `text-2xl md:text-4xl font-semibold`）表达
 
 **P（段落）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface PProps extends HTMLAttributes<'p'> {
-}
+interface PProps extends HTMLAttributes<"p"> {}
 ```
+
 - 语义：段落文本（块级），适合正文描述、说明文案、长文本
 
 **Span（行内文本）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface SpanProps extends HTMLAttributes<'span'> {
-}
+interface SpanProps extends HTMLAttributes<"span"> {}
 ```
+
 - 语义：行内文本（inline），适合按钮旁提示、小标签、句内强调、短文本片段
 - 文本样式（字号/字重/颜色/行高/响应式）统一通过 `class`（Tailwind，如 `text-sm md:text-base text-muted-foreground`）表达
 
 **Image（图片）**
+
 - 不在 `website-lib` 中定义 Image 原子组件
 - 推荐直接使用 Astro 官方 `astro:assets` 的 `Image` 组件（构建期生成优化后的图片与 srcset）
 - `website-lib/components/Image.astro` 仅用于兼容旧代码（`mediaRef/fileField/resize` 取图），后续逐步下线
 
 **Picture（响应式图片）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
@@ -170,46 +211,52 @@ type PictureSource = {
   sizes?: string;
 };
 
-interface PictureProps extends HTMLAttributes<'picture'> {
+interface PictureProps extends HTMLAttributes<"picture"> {
   className?: string;
   sources?: PictureSource[];
-  imgProps: Omit<HTMLAttributes<'img'>, 'src'> & {
+  imgProps: Omit<HTMLAttributes<"img">, "src"> & {
     src: string;
   };
 }
 ```
+
 - 语义：响应式图片容器（picture/source/img），用于 art-direction、不同断点/格式（如 webp/avif）切换
 - 规则：结构固定为 `<picture><source* /><img /></picture>`，AI 只允许改 `sources/imgProps` 内容，不改结构
 - 样式：通过 `className` 或原生 `class`（Tailwind）控制
 
 **Video（视频）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface VideoProps extends HTMLAttributes<'video'> {
+interface VideoProps extends HTMLAttributes<"video"> {
   src: string;
   poster?: string;
 }
 ```
+
 - 语义：视频（对应原生 video 标签或视频播放器）
 - 是否 controls/自动播放/静音/inline 等通过原生属性 + `class` 表达
 
 **Icon（图标）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface IconProps extends HTMLAttributes<'span'> {
+interface IconProps extends HTMLAttributes<"span"> {
   className?: string;
   icon?: string;
   svg?: string;
 }
 ```
+
 - 语义：图标（装饰性或功能性图标）
 - icon：图标名，支持 iconify（如 `mdi:check`）或本地图标 `local:xxx`（由 Entify 在运行时加载 svg）
 - svg：直接传入 svg 字符串（优先级低于 local 图标加载）
 - 大小/颜色/旋转/动画等统一通过 `className`（Tailwind，如 `w-6 h-6 text-blue-500 rotate-90`）表达
 
 **hr（分割线）**
+
 - 不单独定义 hr 原子
 - 直接使用原生 `<hr>` 标签表达语义
 - 视觉样式（边框颜色/粗细/间距/响应式）统一通过 `class`（Tailwind，如 `border-t border-gray-300 my-8`）表达
@@ -220,7 +267,7 @@ interface IconProps extends HTMLAttributes<'span'> {
 import type { HTMLAttributes } from "astro/types";
 import type { LinkType } from "@rxdrag/website-lib-core";
 
-interface LinkProps extends HTMLAttributes<'a'> {
+interface LinkProps extends HTMLAttributes<"a"> {
   type?: LinkType | string;
   to?: string;
   className?: string;
@@ -265,23 +312,26 @@ interface LinkProps extends HTMLAttributes<'a'> {
 - 对齐控制（Align）：使用 Tailwind 的 `text-center`/`justify-center`/`items-center` 等工具类，不需要 Align 组件
 
 **Badge（徽标）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface BadgeProps extends HTMLAttributes<'span'> {
+interface BadgeProps extends HTMLAttributes<"span"> {
   className?: string;
   tone?: "info" | "success" | "warning" | "error" | "neutral";
 }
 ```
+
 - 语义：状态标签、分类标签等
 - tone：语义化的颜色变体（info/success/warning/error/neutral）
 - 样式通过 `className` 和 `tone` 组合控制
 
 **Input（输入框）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface InputProps extends Omit<HTMLAttributes<'input'>, 'type'> {
+interface InputProps extends Omit<HTMLAttributes<"input">, "type"> {
   label?: string;
   name: string;
   type?: "text" | "email" | "tel" | "number" | "password" | "url";
@@ -295,16 +345,18 @@ interface InputProps extends Omit<HTMLAttributes<'input'>, 'type'> {
   fieldStyle?: "default" | "label-inline" | string;
 }
 ```
+
 - 语义：基础文本输入框（支持文本/邮箱/电话/数字/密码/URL 类型）
 - 包含 label/input/error 提示的完整结构
 - fieldStyle：支持不同布局样式（default: label 在上方，label-inline: label 在左侧）
 - 样式通过 className/labelClassName/inputClassName 控制
 
 **Textarea（多行输入）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface TextareaProps extends Omit<HTMLAttributes<'textarea'>, 'rows'> {
+interface TextareaProps extends Omit<HTMLAttributes<"textarea">, "rows"> {
   label?: string;
   name: string;
   required?: boolean;
@@ -318,16 +370,18 @@ interface TextareaProps extends Omit<HTMLAttributes<'textarea'>, 'rows'> {
   fieldStyle?: "default" | "label-inline" | string;
 }
 ```
+
 - 语义：多行文本输入框
 - 包含 label/textarea/error 提示的完整结构
 - fieldStyle：支持不同布局样式（同 Input）
 - 样式通过 className/labelClassName/inputClassName 控制
 
 **Checkbox/Radio（复选/单选）**
+
 ```ts
 import type { HTMLAttributes } from "astro/types";
 
-interface CheckboxProps extends Omit<HTMLAttributes<'input'>, 'type'> {
+interface CheckboxProps extends Omit<HTMLAttributes<"input">, "type"> {
   label?: string;
   name: string;
   value?: string;
@@ -343,6 +397,7 @@ interface RadioProps extends CheckboxProps {
   // 继承 Checkbox 的所有属性
 }
 ```
+
 - 语义：复选框（Checkbox）或单选框（Radio）
 - 包含 label/input/error 提示的完整结构
 - 用于同意条款、选项选择等场景
@@ -355,6 +410,7 @@ interface RadioProps extends CheckboxProps {
 > 设计趋势变化快、形态多变，或包含复杂交互逻辑，不纳入冻结原子清单
 
 **AnimationNumber（数字动画）**
+
 ```ts
 interface AnimationNumberProps {
   start?: number;
@@ -367,62 +423,86 @@ interface AnimationNumberProps {
   fractionDigits?: number;
 }
 ```
+
 - 职责：数字滚动动画（从 start 滚动到 end）
 - 特点：IntersectionObserver 视口检测、缓动动画、支持整数/浮点数、可配置是否只播放一次
 - 使用：`import AnimationNumber from '@rxdrag/website-lib/components/AnimationNumber.astro'`
 - 不作为原子原因：包含复杂的动画逻辑、视口检测、MutationObserver 等业务逻辑（218 行代码）
 
+**YearsSince（年限计算）**
+
+```ts
+interface YearsSinceProps {
+  startYear?: number;
+  minYears?: number;
+  offset?: number;
+  suffix?: string;
+}
+```
+
+- 职责：根据起始年份计算当前年数差，并支持最小年数/偏移量/后缀
+- 使用：`import YearsSince from '@rxdrag/website-lib/components/YearsSince.astro'`
+
 > 以下是包含复杂交互逻辑和状态管理的组件，作为可复用的业务组件由开发者直接导入使用
 
 **Dialog（对话框/弹窗）**
+
 - 职责：模态对话框，支持原生 `<dialog>` 和降级方案
 - 特点：包含打开/关闭动画、backdrop 控制、焦点管理、ESC/点击外部关闭、多种定位方式（center/top）
 - 使用：`import Dialog from '@rxdrag/website-lib/components/Dialog.astro'`
 - 不作为原子原因：交互逻辑复杂（375 行代码），包含状态机、动画协调、原生 API 降级处理等业务逻辑
 
 **Popover（弹出面板）**
+
 - 职责：悬浮展开面板，支持 hover/click 触发
 - 特点：包含高度动画、hover 延迟、点击外部关闭、ESC 关闭、全局 popover 协调
 - 使用：`import Popover from '@rxdrag/website-lib/components/Popover.astro'`
 - 不作为原子原因：交互逻辑复杂（188 行代码），包含事件协调、动画状态管理等业务逻辑
 
 **Collapse（折叠面板）**
+
 - 职责：可折叠内容区域（手风琴）
 - 特点：包含高度动画、初始状态支持、aria 属性管理、支持 Astro SPA 导航
 - 使用：`import Collapse from '@rxdrag/website-lib/components/Collapse.astro'`
 - 不作为原子原因：交互逻辑复杂（126 行代码），包含动画状态管理、transitionend 事件处理等业务逻辑
 
 **ContactForm（询盘表单）**
+
 - 职责：完整询盘表单（字段渲染 + 校验 + 提交 + 防机器人 + 上传）
 - 特点：内置 email/message 校验、honeypot（phone）防机器人、encryptedField 加密字段、提交状态与错误提示、可配置字段列表（fields）
 - 使用：`import { ContactForm } from '@rxdrag/website-lib-core/src/react/components/ContactForm'`
 - 不作为原子原因：包含实际业务逻辑与提交流程，不适合作为冻结原子
 
 **Carousel（轮播）**
+
 - 职责：图片/内容轮播展示
 - 特点：自动播放、手动切换、无限循环、指示器、响应式、触摸滑动支持
 - 使用：`import Carousel from '@rxdrag/website-lib/components/Carousel.astro'`（待实现）
 - 不作为原子原因：交互逻辑复杂，包含自动播放定时器、触摸事件处理、动画状态管理等业务逻辑
 
 **Tabs（标签页）**
+
 - 职责：标签页切换展示
 - 特点：支持水平/垂直布局、键盘导航、URL 同步、懒加载内容
 - 使用：`import Tabs from '@rxdrag/website-lib/components/Tabs.astro'`（待实现）
 - 不作为原子原因：交互逻辑复杂，包含状态管理、键盘事件处理、URL 路由同步等业务逻辑
 
 **Card（卡片）**
+
 - 职责：内容卡片容器（图片 + 标题 + 描述 + 操作按钮等）
 - 特点：支持多种布局变体（横向/纵向）、悬停效果、阴影/边框样式、可点击/可展开
 - 使用：`import Card from '@rxdrag/website-lib/components/Card.astro'`（待实现）
 - 不作为原子原因：组合结构复杂，包含多个子元素（header/body/footer）和交互状态，形态多变
 
 **Medias（图片画廊）**
+
 - 职责：图片/视频画廊展示（主图 + 缩略图导航）
 - 特点：缩略图切换、键盘控制（方向键）、图片缩放、视频播放、左右箭头导航、支持横向/纵向缩略图布局
 - 使用：`import { Medias } from '@rxdrag/website-lib-core/src/react/components/Medias'`
 - 不作为原子原因：交互逻辑复杂（264 行代码），包含状态管理、键盘事件处理、缩略图滚动计算等业务逻辑
 
 **说明**：
+
 - 这些组件形态多变、易滥用，不适合作为冻结原子
 - 它们包含的 JavaScript 业务逻辑无法简化为设计器模板
 - 开发者可以直接导入使用，或根据具体需求自行封装变体
@@ -463,7 +543,7 @@ interface AnimationNumberProps {
 - **Announcement Bar（顶部通知栏）**：用设计器提供一个"Announcement Bar 模板/Designer"：一键生成顶部通知栏（促销信息/公告），支持配置文案、链接、背景色、关闭按钮、多条轮播
 - **Hero Section（首屏大图）**：用设计器提供一个"Hero Section 模板/Designer"：一键生成首屏区块（背景图/视频 + 标题 + 副标题 + CTA 按钮），支持配置背景类型、文字对齐、叠加层、高度等
 - **Stats Section（数据统计）**：用设计器提供一个"Stats Section 模板/Designer"：一键生成数据统计区块（多个数字+标签的展示），支持配置数字、标签、图标、列数、动画效果（配合 AnimationNumber）
-- **CTA Section（大横幅CTA）**：用设计器提供一个"CTA Section 模板/Designer"：一键生成页面中间的行动号召横幅（背景 + 标题 + 描述 + CTA 按钮），支持配置背景、按钮样式
+- **CTA Section（大横幅 CTA）**：用设计器提供一个"CTA Section 模板/Designer"：一键生成页面中间的行动号召横幅（背景 + 标题 + 描述 + CTA 按钮），支持配置背景、按钮样式
 - **Team Section（团队展示）**：用设计器提供一个"Team Section 模板/Designer"：一键生成团队成员展示区块（头像 + 姓名 + 职位 + 社交链接），支持配置列数、卡片样式
 - **Process/Steps（流程/步骤）**：用设计器提供一个"Process/Steps 模板/Designer"：一键生成流程/步骤展示（步骤编号 + 标题 + 描述 + 连接线），支持配置横向/纵向布局、步骤数量、图标
 - **Pricing Table（价格表）**：用设计器提供一个"Pricing Table 模板/Designer"：一键生成定价方案展示（方案名称 + 价格 + 功能列表 + CTA 按钮），支持配置列数、高亮推荐方案、货币符号

package/index.ts

@@ -1,4 +1,12 @@
 // Do not write code directly here, instead use the `src` folder!
 // Then, use this file to export everything you want your user to access.
 
-export {};
+export { default as Link } from "./components/Link.astro";
+export { default as Meta } from "./components/Meta.astro";
+export { default as Dialog } from "./components/Dialog.astro";
+export { default as DialogTrigger } from "./components/DialogTrigger.astro";
+export { default as ModalTrigger } from "./components/DialogTrigger.astro";
+export { default as Document } from "./components/Document.astro";
+export { default as Motion } from "./components/Motion.astro";
+export { default as RichTextView } from "./components/RichTextView.astro";
+export { default as AnimationNumber } from "./components/AnimationNumber.astro";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -23,22 +23,22 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "astro": "^4.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "^9.39.2",
     "gsap": "^3.12.7",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
-    "@rxdrag/slate-preview": "1.2.63",
-    "@rxdrag/rxcms-models": "0.3.96",
-    "@rxdrag/entify-hooks": "0.2.77",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/rxcms-models": "0.3.97",
+    "@rxdrag/entify-hooks": "0.2.78",
+    "@rxdrag/eslint-config-custom": "0.2.13",
+    "@rxdrag/tsconfig": "0.2.1",
+    "@rxdrag/tiptap-preview": "0.0.2"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
     "clsx": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/website-lib-core": "0.0.115",
-    "@rxdrag/rxcms-models": "0.3.96"
+    "@rxdrag/website-lib-core": "0.0.119",
+    "@rxdrag/rxcms-models": "0.3.97"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"