@rxdrag/website-lib 0.0.123 → 0.0.124

package/components/CookieConsent.astro

@@ -0,0 +1,41 @@
+---
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import "./CookieConsent.css";
+---
+
+<script>
+  import { run } from "vanilla-cookieconsent";
+  import { config } from "./CookieConsentConfig";
+
+  // 异步初始化Cookie同意逻辑
+  async function initializeCookieConsent() {
+    try {
+      // 始终显示Cookie同意UI
+      document.body.classList.add("cc--elegant-black");
+      run(config);
+
+      // 显示偏好设置按钮
+      const preferencesBtn = document.getElementById("show-preferences-btn");
+      if (preferencesBtn) {
+        preferencesBtn.style.display = "block";
+      }
+    } catch (error) {
+      console.error("Cookie同意初始化失败:", error);
+      // 出错时默认显示同意UI（安全策略）
+      document.body.classList.add("cc--elegant-black");
+      run(config);
+
+      const preferencesBtn = document.getElementById("show-preferences-btn");
+      if (preferencesBtn) {
+        preferencesBtn.style.display = "block";
+      }
+    }
+  }
+
+  // 页面加载完成后初始化
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeCookieConsent);
+  } else {
+    initializeCookieConsent();
+  }
+</script>

package/components/CookieConsent.css

@@ -0,0 +1,52 @@
+.cc--elegant-black {
+  --cc-bg: #000;
+  --cc-primary-color: rgb(239, 244, 246);
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #ffffff;
+  --cc-btn-primary-color: #000;
+  --cc-btn-primary-hover-bg: #ccd4d8;
+  --cc-btn-primary-hover-color: #000;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
+
+  --cc-btn-secondary-bg: rgba(255, 255, 255, 0.039);
+  --cc-btn-secondary-color: var(--cc-primary-color);
+  --cc-btn-secondary-border-color: #252729;
+  --cc-btn-secondary-hover-bg: #252729;
+  --cc-btn-secondary-hover-color: #fff;
+  --cc-btn-secondary-hover-border-color: #252729;
+
+  --cc-cookie-category-block-bg: #101111;
+  --cc-cookie-category-block-border: #1d1e1f;
+  --cc-cookie-category-block-hover-bg: #151516;
+  --cc-cookie-category-block-hover-border: #1d1e1f;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
+  --cc-cookie-category-expanded-block-bg: #101111;
+  --cc-toggle-readonly-bg: #2f3132;
+  --cc-overlay-bg: rgba(0, 0, 0, 0.9) !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
+  --cc-toggle-off-bg: #525f6b;
+  --cc-toggle-on-knob-bg: var(--cc-bg);
+  --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);
+  --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
+  --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
+  --cc-section-category-border: #1e2428;
+
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
+
+  --cc-separator-border-color: #252729;
+
+  --cc-footer-bg: #000;
+  --cc-footer-color: var(--cc-secondary-color);
+  --cc-footer-border-color: #212529;
+}
+
+.cc--elegant-black #cc-main .cm,
+.cc--elegant-black #cc-main .pm {
+  color-scheme: dark;
+  border: 1px solid var(--cc-separator-border-color);
+}

package/components/CookieConsentConfig.ts

@@ -0,0 +1,208 @@
+import type { CookieConsentConfig } from "vanilla-cookieconsent";
+
+const GA_MEASUREMENT_ID = (import.meta.env.PUBLIC_GA_MEASUREMENT_ID as string) || "";
+const ANONYMIZE_IP = (import.meta.env.PUBLIC_GA_ANONYMIZE_IP as string) === "false" ? false : true;
+const COOKIE_FLAGS = (import.meta.env.PUBLIC_GA_COOKIE_FLAGS as string) || "SameSite=None;Secure";
+
+// 声明全局 gtag 函数类型
+declare global {
+  function gtag(...args: any[]): void;
+}
+
+function updateConsent(consent: {
+  analytics_storage: "granted" | "denied";
+  ad_storage: "granted" | "denied";
+}) {
+  console.log("[CookieConsent] updateConsent", consent);
+  if (typeof gtag !== "undefined") {
+    gtag("consent", "update", consent);
+  } else {
+    console.log("gtag 未定义，无法更新 consent", consent);
+  }
+}
+
+// 加载 Google Analytics 脚本
+function loadGA4() {
+  if (!GA_MEASUREMENT_ID) {
+    console.log("GA_MEASUREMENT_ID 为空，跳过 GA4 config");
+    return;
+  }
+
+  console.log("[CookieConsent] loadGA4 GA_MEASUREMENT_ID:", GA_MEASUREMENT_ID);
+
+  console.log("Loading Google Analytics with ID:", GA_MEASUREMENT_ID);
+
+  // 复用 HeadCode.astro 中的全局 gtag（不要再创建第二套 dataLayer/gtag）
+  if (typeof gtag !== "undefined") {
+    gtag("config", GA_MEASUREMENT_ID, {
+      anonymize_ip: ANONYMIZE_IP,
+      cookie_flags: COOKIE_FLAGS,
+    });
+  } else {
+    console.log("gtag 未定义，跳过 GA4 config");
+  }
+}
+
+// 直接加载 Google Analytics（非欧洲地区使用）
+export function loadGA4Directly() {
+  if (!GA_MEASUREMENT_ID) {
+    console.log("GA_MEASUREMENT_ID 为空，跳过直接 GA4 config");
+    return;
+  }
+
+  console.log(
+    "[CookieConsent] loadGA4Directly GA_MEASUREMENT_ID:",
+    GA_MEASUREMENT_ID
+  );
+
+  console.log("直接加载 Google Analytics (无需用户同意):", GA_MEASUREMENT_ID);
+
+  // 复用 HeadCode.astro 中的全局 gtag（不要再创建第二套 dataLayer/gtag）
+  if (typeof gtag !== "undefined") {
+    gtag("config", GA_MEASUREMENT_ID, {
+      anonymize_ip: ANONYMIZE_IP,
+      cookie_flags: COOKIE_FLAGS,
+    });
+  } else {
+    console.log("gtag 未定义，跳过 GA4 direct config");
+  }
+}
+
+// 清除 Google Analytics cookies
+function clearGA4Cookies() {
+  const gaCookies = document.cookie
+    .split(";")
+    .filter((cookie) => cookie.trim().startsWith("_ga"));
+
+  gaCookies.forEach((cookie) => {
+    const cookieName = cookie.split("=")[0].trim();
+    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.${window.location.hostname}`;
+    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
+  });
+}
+
+export const config: CookieConsentConfig = {
+  guiOptions: {
+    consentModal: {
+      layout: "box inline",
+      position: "bottom left",
+    },
+    preferencesModal: {
+      layout: "box",
+      position: "right",
+      equalWeightButtons: true,
+      flipButtons: false,
+    },
+  },
+  categories: {
+    necessary: {
+      readOnly: true,
+    },
+    functionality: {},
+    analytics: {
+      services: {
+        ga4: {
+          label:
+            '<a href="https://marketingplatform.google.com/about/analytics/terms/us/" target="_blank">Google Analytics 4</a>',
+          onAccept: () => {
+            console.log("Google Analytics 4 accepted");
+            console.log(
+              "[CookieConsent] onAccept, GA_MEASUREMENT_ID:",
+              GA_MEASUREMENT_ID
+            );
+            updateConsent({
+              analytics_storage: "granted",
+              ad_storage: "granted",
+            });
+            loadGA4();
+          },
+          onReject: () => {
+            console.log("Google Analytics 4 rejected");
+            console.log(
+              "[CookieConsent] onReject, GA_MEASUREMENT_ID:",
+              GA_MEASUREMENT_ID
+            );
+            clearGA4Cookies();
+
+            // 禁用 Google Analytics
+            updateConsent({
+              analytics_storage: "denied",
+              ad_storage: "denied",
+            });
+          },
+          cookies: [
+            {
+              name: /^_ga/,
+            },
+            {
+              name: /^_gid/,
+            },
+            {
+              name: /^_gat/,
+            },
+          ],
+        },
+        another: {
+          label: "Another one (dummy)",
+        },
+      },
+    },
+  },
+  language: {
+    default: "en",
+    autoDetect: "browser",
+    translations: {
+      en: {
+        consentModal: {
+          title: "Your Privacy Matters",
+          description:
+            "We use cookies to enhance your browsing experience, provide personalized content, and analyze our traffic. You can manage your preferences or accept all cookies. For more information, please see our Privacy Policy.",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          showPreferencesBtn: "Manage preferences",
+          footer:
+            '<a href="/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>\n<a href="/terms" target="_blank" rel="noopener">Terms and Conditions</a>',
+        },
+        preferencesModal: {
+          title: "Consent Preferences Center",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          savePreferencesBtn: "Save preferences",
+          closeIconLabel: "Close modal",
+          serviceCounterLabel: "Service|Services",
+          sections: [
+            {
+              title: "How We Use Cookies",
+              description:
+                "Cookies help us provide, protect and improve our services. You can choose which categories you want to allow. Some cookies are necessary for the website to function and cannot be switched off.",
+            },
+            {
+              title:
+                'Strictly Necessary Cookies <span class="pm__badge">Always Enabled</span>',
+              description:
+                "These cookies are essential for the website to operate properly. They enable basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.",
+              linkedCategory: "necessary",
+            },
+            {
+              title: "Functionality Cookies",
+              description:
+                "Functionality cookies allow the website to remember choices you make (such as your language or the region you are in) and provide enhanced, more personal features.",
+              linkedCategory: "functionality",
+            },
+            {
+              title: "Analytics Cookies",
+              description:
+                "Analytics cookies help us understand how visitors interact with our website by collecting and reporting information anonymously. This helps us improve our services and your experience.",
+              linkedCategory: "analytics",
+            },
+            {
+              title: "More Information",
+              description:
+                'For any query in relation to my policy on cookies and your choices, please <a class="cc__link" href="#yourdomain.com">contact me</a>.',
+            },
+          ],
+        },
+      },
+    },
+  },
+};

package/components/Heading.astro

@@ -1,12 +1,14 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { headingLevelToTypographyClassName } from "@rxdrag/website-lib-core";
 
 interface Props extends HTMLAttributes<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
   level: 1 | 2 | 3 | 4 | 5 | 6;
+  customSize?: boolean;
   className?: string;
 }
 
-const { level, className, class: classAttr, ...rest } = Astro.props;
+const { level, customSize = false, className, class: classAttr, ...rest } = Astro.props;
 
 if (typeof level !== "number" || level < 1 || level > 6) {
   console.log("[Heading] invalid level", level);
@@ -14,8 +16,9 @@ if (typeof level !== "number" || level < 1 || level > 6) {
 }
 
 const Tag = `h${level}`;
+const baseClassName = customSize ? undefined : headingLevelToTypographyClassName[level];
 ---
 
-<Tag class:list={[className, classAttr]} {...rest}>
+<Tag class:list={[baseClassName, className, classAttr]} {...rest}>
   <slot />
 </Tag>

package/components/Image.astro

@@ -1,18 +1,74 @@
 ---
-import { Entify, type ImageProps, type Locals } from "@rxdrag/website-lib-core";
-const { env, imageSizes } = Astro.locals as Locals;
+import { Image as AstroImage, Picture as AstroPicture } from "astro:assets";
+import { type ImageProps, SIZES_MAP } from "./Image.type";
 
 interface Props extends ImageProps {}
 
-const { mediaRef, fileField, resize, className, ...props } = Astro.props;
+const {
+  src,
+  alt = "",
+  layout,
+  formats,
+  loading,
+  priority,
+  quality,
+  sizes = "auto",
+  class: className,
+  ...restProps
+} = Astro.props;
 
-const rx = Entify.getInstance(env, imageSizes);
+// 转换 sizes 预设为实际值
+const actualSizes = SIZES_MAP[sizes];
 
-const media = rx ? await rx.getMedia(mediaRef, fileField, resize) : undefined;
+// 判断是否使用 Picture（有 formats 时使用）
+const usePicture = formats && formats.length > 0;
+
+// 判断是否为字符串路径（远程/CMS/public）
+const isStringSrc = typeof src === "string";
+
+// 检测本地资产路径错误用法
+if (isStringSrc && (src.startsWith("/src/") || src.startsWith("src/"))) {
+  throw new Error(
+    `Image src="${src}" 是本地资产路径，必须使用 import 导入。\n` +
+      `正确用法：\n` +
+      `  import myImage from "${src}";\n` +
+      `  <Image src={myImage} />`
+  );
+}
 ---
 
-<img
-  src={fileField ? media?.file?.[fileField] : media?.file?.original || ""}
-  class={className}
-  {...props}
-/>
+{
+  isStringSrc ? (
+    <img
+      src={src}
+      alt={alt}
+      loading={loading}
+      class={className}
+      {...restProps}
+    />
+  ) : usePicture ? (
+    <AstroPicture
+      src={src}
+      alt={alt}
+      formats={formats}
+      quality={quality}
+      loading={priority ? "eager" : loading}
+      sizes={actualSizes}
+      class={className}
+      {...(layout ? { layout } : {})}
+      {...restProps}
+    />
+  ) : (
+    <AstroImage
+      src={src}
+      alt={alt}
+      quality={quality}
+      loading={loading}
+      sizes={actualSizes}
+      class={className}
+      {...(priority ? { priority } : {})}
+      {...(layout ? { layout } : {})}
+      {...restProps}
+    />
+  )
+}

package/components/Image.md

@@ -0,0 +1,15 @@
+| 中文名  | key        | 说明        |
+| ---- | ---------- | --------- |
+| 图片   | src        | 必填        |
+| 替代文本 | alt        | SEO / 无障碍 |
+| 使用场景 | scene      | 下拉        |
+| 响应式  | responsive | 下拉        |
+| 优先加载 | priority   | LCP       |
+| 懒加载  | loading    | 默认 lazy   |
+| 装饰图片 | decorative | 自动 aria   |
+
+## 最后一句总结（你可以记下来）
+
+Tailwind 决定“看起来多大”
+sizes 决定“下载多大”
+这两件事发生在不同时间、不同层级

package/components/Image.type.ts

@@ -0,0 +1,226 @@
+import type { HTMLAttributes } from "astro/types";
+import type { ImageMetadata } from "astro";
+
+/**
+ * 响应式布局模式（Astro 原生值）
+ * @see https://docs.astro.build/zh-cn/guides/images/
+ */
+export type ImageLayout =
+  | "responsive"   // 跟随父容器，最大不超过原图（推荐）
+  | "full-width"   // 填满父容器（100% 宽度）
+  | "fixed"        // 固定尺寸，不响应
+  | "none";        // 不使用响应式
+
+/**
+ * 图片输出格式
+ */
+export type ImageFormat = "webp" | "avif" | "png" | "jpg" | "gif" | "svg";
+
+/**
+ * 图片在页面中的布局位置（用于优化下载尺寸）
+ */
+export type ImageSizePreset =
+  | "auto"      // 自动处理（让 layout 决定）
+  | "full"      // 全宽内容
+  | "half"      // 两栏布局（约 50%）
+  | "third"     // 三栏布局（约 33%）
+  | "quarter"   // 四栏布局（约 25%）
+  | "sidebar";  // 侧边栏内图片
+
+/**
+ * 布局预设 → sizes 属性映射
+ */
+export const SIZES_MAP: Record<ImageSizePreset, string | undefined> = {
+  auto: undefined,
+  full: "100vw",
+  half: "(max-width: 768px) 100vw, 50vw",
+  third: "(max-width: 768px) 100vw, 33vw",
+  quarter: "(max-width: 768px) 100vw, 25vw",
+  sidebar: "(max-width: 768px) 100vw, 300px",
+};
+
+/**
+ * ============================================================
+ * 图片组件属性
+ * ============================================================
+ *
+ * 设计原则：
+ * 1. Props 只处理图片核心功能（来源、加载、优化）
+ * 2. 样式相关属性通过 Tailwind class 设置
+ *
+ * ============================================================
+ * 样式设置指南（通过 class 属性使用 Tailwind）
+ * ============================================================
+ *
+ * 【尺寸】
+ *   - 宽度：w-full, w-1/2, w-64, w-[300px]
+ *   - 高度：h-auto, h-64, h-screen, h-[200px]
+ *   - 最大宽度：max-w-md, max-w-lg, max-w-full
+ *
+ * 【宽高比】
+ *   - 正方形：aspect-square
+ *   - 视频：aspect-video (16:9)
+ *   - 自定义：aspect-[4/3], aspect-[3/2]
+ *
+ * 【填充模式】
+ *   - 裁剪填满：object-cover（推荐用于背景图、卡片图）
+ *   - 完整显示：object-contain（推荐用于 logo）
+ *   - 拉伸填满：object-fill
+ *   - 原始尺寸：object-none
+ *
+ * 【位置（配合 object-cover/contain 使用）】
+ *   - 居中：object-center（默认）
+ *   - 顶部：object-top
+ *   - 底部：object-bottom
+ *   - 左右：object-left, object-right
+ *
+ * 【圆角】
+ *   - 小：rounded-sm
+ *   - 中：rounded-md, rounded-lg
+ *   - 大：rounded-xl, rounded-2xl
+ *   - 圆形：rounded-full
+ *
+ * 【阴影】
+ *   - 小：shadow-sm
+ *   - 中：shadow, shadow-md
+ *   - 大：shadow-lg, shadow-xl
+ *
+ * 【边框】
+ *   - 细边框：border
+ *   - 边框颜色：border-gray-200, border-white
+ *
+ * 【滤镜效果】
+ *   - 灰度：grayscale
+ *   - 模糊：blur-sm, blur-md
+ *   - 亮度：brightness-50, brightness-150
+ *   - 悬停效果：hover:scale-105, hover:brightness-110
+ *
+ * 使用示例：
+ * ```astro
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="英雄图"
+ *   class="w-full aspect-video object-cover rounded-lg shadow-lg"
+ * />
+ * ```
+ */
+export interface ImageProps extends Omit<HTMLAttributes<"img">, "src" | "width" | "height"> {
+  /**
+   * 图片来源
+   * - 本地图片：使用 import 导入
+   * - 远程图片：使用完整 URL
+   * - CMS 图片：使用媒体库路径
+   */
+  src: string | ImageMetadata;
+
+  /**
+   * 图片描述（用于无障碍访问和 SEO）
+   * - 内容图片：填写描述文字
+   * - 装饰性图片：设为空字符串 alt=""，屏幕阅读器会忽略
+   */
+  alt?: string;
+
+  /**
+   * 响应式布局模式（Astro 原生值）
+   * - responsive: 跟随容器宽度，最大不超过原图尺寸（推荐）
+   * - full-width: 填满父容器（100% 宽度）
+   * - fixed: 固定尺寸，不响应屏幕变化
+   * - none: 不使用 Astro 响应式处理
+   */
+  layout?: ImageLayout;
+
+  /**
+   * 输出格式（用于 Picture 组件）
+   * - 浏览器会自动选择最优格式
+   * - 推荐：['avif', 'webp'] 获得最佳压缩
+   * @example ['avif', 'webp']
+   */
+  formats?: ImageFormat[];
+
+  /**
+   * 加载策略
+   * - lazy: 延迟加载，首屏外的图片使用
+   * - eager: 立即加载，首屏图片使用
+   * @default "lazy"
+   */
+  loading?: "lazy" | "eager";
+
+  /**
+   * 是否为重要图片（LCP 优化，Astro 原生支持）
+   * - 设为 true 会自动设置 loading="eager" 和 fetchpriority="high"
+   * - 仅对首屏最大的图片使用
+   */
+  priority?: boolean;
+
+  /**
+   * 图片质量（1-100）
+   * - 数值越高质量越好，文件越大
+   * - 推荐 80-90 平衡质量和大小
+   * 备注：这个可以先不提供可视化支持，小白理解不了
+   * @default 80
+   */
+  quality?: number;
+
+  /**
+   * 图片在页面中的布局位置（用于优化下载尺寸）
+   * - auto: 自动处理（推荐，让 layout 决定）
+   * - full: 全宽内容
+   * - half: 两栏布局
+   * - third: 三栏布局
+   * - quarter: 四栏布局
+   * - sidebar: 侧边栏内图片
+   * @default "auto"
+   */
+  sizes?: ImageSizePreset;
+
+  /**
+   * 样式类（使用 Tailwind）
+   *
+   * 【避免布局偏移】
+   *   设置宽高比可预留空间，防止图片加载时页面跳动：
+   *   - aspect-square（1:1）
+   *   - aspect-video（16:9）
+   *   - aspect-[4/3]、aspect-[3/2] 等自定义比例
+   *
+   * 【常用宽高比】
+   *   - 1:1 - 正方形，电商产品、头像、社交卡片
+   *   - 4:3 - 传统屏幕，博客卡片、新闻缩略图
+   *   - 3:2 - 单反照片，摄影作品、画廊
+   *   - 16:9 - 宽屏视频，英雄图、视频封面
+   *   - 21:9 - 超宽屏，电影海报、横幅广告
+   *   - 4:5 - 竖版，Instagram、社交媒体
+   *   - 9:16 - 竖屏视频，Stories、短视频封面
+   *
+   * 【快捷模板】
+   *   - 英雄图：w-full aspect-video object-cover
+   *   - 博客卡片：w-full aspect-[16/9] object-cover rounded-lg
+   *   - 新闻卡片：w-full aspect-[4/3] object-cover rounded-lg
+   *   - 电商卡片：w-full aspect-square object-cover rounded-lg
+   *   - 社交卡片：w-full aspect-[4/5] object-cover rounded-lg
+   *   - 缩略图：w-32 aspect-square object-cover rounded
+   *   - 头像（小）：w-8 h-8 object-cover rounded-full
+   *   - 头像（中）：w-12 h-12 object-cover rounded-full
+   *   - 头像（大）：w-16 h-16 object-cover rounded-full
+   *   - Logo：h-8 w-auto object-contain
+   *   - 产品图：w-full aspect-square object-contain bg-white
+   *   - 背景图：w-full h-full object-cover absolute inset-0
+   *   - 画廊图：w-full aspect-[3/2] object-cover hover:scale-105 transition
+   *   - 横幅广告：w-full aspect-[21/9] object-cover
+   *
+   * 【常用样式】
+   *   - 尺寸：w-full, w-1/2, w-32, h-64, max-w-lg, max-w-screen-xl
+   *   - 填充：object-cover（裁剪填满）, object-contain（完整显示）, object-fill（拉伸）
+   *   - 位置：object-center, object-top, object-bottom, object-left, object-right
+   *   - 圆角：rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-full
+   *   - 阴影：shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl
+   *   - 边框：border, border-2, border-white, border-gray-200
+   *   - 滤镜：grayscale, blur-sm, brightness-75, contrast-125
+   *   - 过渡：transition, hover:scale-105, hover:brightness-110, hover:shadow-xl
+   *
+   * @example "w-full aspect-video object-cover rounded-lg"
+   */
+  class?: string;
+  //兼容react组件
+  className?: string;
+}
+

package/components/TabButton.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2, ...props } = Astro.props;
+---
+
+<button
+  class:list={["tab-btn", className, className2]}
+  data-tabs-btn="true"
+  {...props}
+>
+  <slot />
+</button>

package/components/TabPanel.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  class?: string;
+  active?: boolean | string;
+}
+
+const { class: className, active, ...props } = Astro.props;
+const isActive =
+  active === true ||
+  (typeof active === "string" && (active === "" || active === "true"));
+---
+
+<div
+  data-tabs-panel=""
+  class:list={["tab-content", className, isActive ? "block" : "hidden"]}
+  {...props}
+>
+  <slot />
+</div>

package/components/Tabs.astro

@@ -0,0 +1,147 @@
+---
+const rootId = crypto.randomUUID();
+
+interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2, ...props } = Astro.props;
+---
+
+<div data-tabs-root id={rootId} class:list={[className, className2]} {...props}>
+  <slot />
+</div>
+
+<script is:inline define:vars={{ rootId }}>
+  const defaultIndex = 0;
+  const activeBtnClassName = "active";
+  const inactiveBtnClassName = "";
+  const showPanelClassName = "block";
+  const hidePanelClassName = "hidden";
+
+  const getState = () => {
+    const w = window;
+    const all = (w.__tabs__ ||= {});
+    return (all[rootId] ||= { cleanup: null });
+  };
+
+  const initTabs = () => {
+    const root = document.getElementById(rootId);
+    if (!root) return () => {};
+
+    const toClassList = (className) =>
+      String(className || "")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+
+    const activeBtnClasses = toClassList(activeBtnClassName);
+    const inactiveBtnClasses = toClassList(inactiveBtnClassName);
+    const showPanelClasses = toClassList(showPanelClassName);
+    const hidePanelClasses = toClassList(hidePanelClassName);
+
+    const tabBtns = root.querySelectorAll("[data-tabs-btn]");
+    const tabPanels = root.querySelectorAll("[data-tabs-panel]");
+
+    if (tabBtns.length === 0 || tabPanels.length === 0) {
+      return () => {};
+    }
+
+    const pairCount = Math.min(tabBtns.length, tabPanels.length);
+    for (let i = 0; i < pairCount; i++) {
+      const btn = tabBtns[i];
+      const panel = tabPanels[i];
+      const key = `${rootId}-${i}`;
+
+      const btnKey = btn.getAttribute("data-tabs-btn");
+      if (!btnKey) btn.setAttribute("data-tabs-btn", key);
+
+      const panelKey = panel.getAttribute("data-tabs-panel");
+      if (!panelKey) panel.setAttribute("data-tabs-panel", key);
+    }
+
+    const ac = new AbortController();
+    const { signal } = ac;
+
+    const setActiveBtnA11y = (btn, active) => {
+      btn.setAttribute("role", "tab");
+      btn.setAttribute("aria-selected", active ? "true" : "false");
+      btn.tabIndex = active ? 0 : -1;
+    };
+
+    const setActivePanelA11y = (panel, active) => {
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-hidden", active ? "false" : "true");
+    };
+
+    const activate = (btn) => {
+      const targetId = btn.getAttribute("data-tabs-btn");
+      if (!targetId) return;
+
+      tabBtns.forEach((b) => {
+        if (inactiveBtnClasses.length) b.classList.add(...inactiveBtnClasses);
+        if (activeBtnClasses.length) b.classList.remove(...activeBtnClasses);
+        setActiveBtnA11y(b, false);
+      });
+
+      tabPanels.forEach((p) => {
+        if (showPanelClasses.length) p.classList.remove(...showPanelClasses);
+        if (hidePanelClasses.length) p.classList.add(...hidePanelClasses);
+        setActivePanelA11y(p, false);
+      });
+
+      if (inactiveBtnClasses.length)
+        btn.classList.remove(...inactiveBtnClasses);
+      if (activeBtnClasses.length) btn.classList.add(...activeBtnClasses);
+      setActiveBtnA11y(btn, true);
+
+      let panel = root.querySelector(
+        `[data-tabs-panel="${CSS.escape(targetId)}"]`
+      );
+      if (!panel) {
+        const index = Array.from(tabBtns).indexOf(btn);
+        panel = tabPanels[index] || null;
+      }
+      if (panel) {
+        if (hidePanelClasses.length)
+          panel.classList.remove(...hidePanelClasses);
+        if (showPanelClasses.length) panel.classList.add(...showPanelClasses);
+        setActivePanelA11y(panel, true);
+      }
+    };
+
+    document.addEventListener(
+      "click",
+      (event) => {
+        const el = event.target;
+        const btn = el?.closest?.("[data-tabs-btn]");
+        if (!btn) return;
+        if (!root.contains(btn)) return;
+        activate(btn);
+      },
+      { signal }
+    );
+
+    const initBtn = tabBtns[defaultIndex] || tabBtns[0];
+    if (initBtn) activate(initBtn);
+
+    return () => ac.abort();
+  };
+
+  const boot = () => {
+    const state = getState();
+    state.cleanup?.();
+    state.cleanup = initTabs();
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot, { once: true });
+  } else {
+    boot();
+  }
+
+  document.addEventListener("astro:page-load", boot);
+  document.addEventListener("astro:after-swap", boot);
+  window.addEventListener("astro:before-swap", () => getState().cleanup?.());
+</script>

package/index.ts

@@ -1,12 +1,5 @@
 // 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 { 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.123",
+  "version": "0.0.124",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -26,19 +26,20 @@
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
     "typescript": "^5",
+    "@rxdrag/tiptap-preview": "0.0.3",
     "@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"
+    "@rxdrag/tsconfig": "0.2.1"
   },
   "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.119",
-    "@rxdrag/rxcms-models": "0.3.97"
+    "vanilla-cookieconsent": "3.1.0",
+    "@rxdrag/rxcms-models": "0.3.97",
+    "@rxdrag/website-lib-core": "0.0.119"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/components/Icon.astro

@@ -1,30 +0,0 @@
----
-import {
-  Icon as CoreIcon,
-  Entify,
-  type Locals,
-} from "@rxdrag/website-lib-core";
-
-interface Props {
-  className?: string;
-  icon?: string;
-  svg?: string;
-}
-const { env, imageSizes } = Astro.locals as Locals;
-const { className, icon, svg, ...rest } = Astro.props;
-
-const localIconName = icon?.startsWith("local:") ? icon?.split(":")[1] : null;
-
-const rx = Entify.getInstance(env, imageSizes);
-
-const svgIcon =
-  !!rx && localIconName ? await rx.getIcon(localIconName) : undefined;
----
-
-<CoreIcon
-  className={className}
-  icon={localIconName ? undefined : icon}
-  svg={svgIcon?.code || svg}
-  {...rest}
-  client:only="react"
-/>