@rxdrag/website-lib 0.0.145 → 0.0.146

package/components/Carousel.astro

@@ -0,0 +1,306 @@
+---
+const rootId = crypto.randomUUID();
+
+export interface Props {
+  class?: string;
+  className?: string;
+  /** 自动播放间隔（毫秒），设为 0 禁用自动播放 */
+  autoplay?: number;
+  /** 是否循环播放 */
+  loop?: boolean;
+  /** 初始显示的 slide 索引 */
+  initialSlide?: number;
+  /** 切换动画时长（毫秒） */
+  transitionDuration?: number;
+  /** 是否启用触摸滑动 */
+  touchEnabled?: boolean;
+  /** 鼠标悬停时是否暂停自动播放 */
+  pauseOnHover?: boolean;
+}
+
+const {
+  class: className,
+  className: className2,
+  autoplay = 3500,
+  loop = true,
+  initialSlide = 0,
+  transitionDuration = 500,
+  touchEnabled = true,
+  pauseOnHover = true,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  data-carousel
+  data-carousel-root
+  id={rootId}
+  data-autoplay={autoplay}
+  data-loop={loop}
+  data-initial-slide={initialSlide}
+  data-transition-duration={transitionDuration}
+  data-touch-enabled={touchEnabled}
+  data-pause-on-hover={pauseOnHover}
+  class:list={["carousel relative", className, className2]}
+  role="region"
+  aria-roledescription="carousel"
+  aria-label="Image carousel"
+  {...rest}
+>
+  <slot />
+</div>
+
+<script is:inline define:vars={{ rootId }} data-astro-rerun>
+  const getState = () => {
+    const w = window;
+    const all = (w.__carousels__ ||= {});
+    return (all[rootId] ||= { cleanup: null, instance: null, globalCleanup: null });
+  };
+
+  const initCarousel = () => {
+    const root = document.getElementById(rootId);
+    if (!root) return () => {};
+
+    const viewport = root.querySelector(".carousel-viewport");
+    const track = root.querySelector(".carousel-track");
+    if (!track) return () => {};
+
+    const slides = Array.from(track.children);
+    const slideCount = slides.length;
+    if (slideCount === 0) return () => {};
+
+    const config = {
+      autoplay: parseInt(root.dataset.autoplay || "3500", 10),
+      loop: root.dataset.loop !== "false",
+      initialSlide: parseInt(root.dataset.initialSlide || "0", 10),
+      transitionDuration: parseInt(root.dataset.transitionDuration || "500", 10),
+      touchEnabled: root.dataset.touchEnabled !== "false",
+      pauseOnHover: root.dataset.pauseOnHover !== "false",
+      paginationType: root.dataset.paginationType || "bullets",
+    };
+
+    let currentIndex = Math.max(0, Math.min(config.initialSlide, slideCount - 1));
+    let autoplayTimer;
+    let touchStartX = 0;
+    let touchEndX = 0;
+    let isDragging = false;
+
+    const ac = new AbortController();
+    const { signal } = ac;
+
+    slides.forEach((slide, i) => {
+      slide.style.minWidth = "100%";
+      slide.style.flexShrink = "0";
+      slide.setAttribute("role", "group");
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("aria-label", `Slide ${i + 1} of ${slideCount}`);
+    });
+
+    const paginationEl = root.querySelector(".carousel-pagination");
+    const progressBar = root.querySelector(".carousel-progress-bar");
+    const fractionCurrent = root.querySelector(".carousel-fraction-current");
+    const fractionTotal = root.querySelector(".carousel-fraction-total");
+    let bullets = [];
+
+    const updateUI = () => {
+      track.style.transform = `translateX(-${currentIndex * 100}%)`;
+
+      bullets.forEach((b, i) => {
+        const isActive = i === currentIndex;
+        b.classList.toggle("carousel-bullet-active", isActive);
+        b.setAttribute("aria-current", isActive ? "true" : "false");
+        b.setAttribute("aria-selected", isActive ? "true" : "false");
+      });
+
+      if (progressBar) {
+        const progress = ((currentIndex + 1) / slideCount) * 100;
+        progressBar.style.width = `${progress}%`;
+      }
+
+      if (fractionCurrent) fractionCurrent.textContent = String(currentIndex + 1);
+      if (fractionTotal) fractionTotal.textContent = String(slideCount);
+
+      slides.forEach((slide, i) => {
+        slide.setAttribute("aria-hidden", i !== currentIndex ? "true" : "false");
+        slide.inert = i !== currentIndex;
+      });
+    };
+
+    const goto = (index, animate = true) => {
+      if (!config.loop) {
+        index = Math.max(0, Math.min(index, slideCount - 1));
+      } else {
+        if (index < 0) index = slideCount - 1;
+        if (index >= slideCount) index = 0;
+      }
+      
+      if (!animate) {
+        track.style.transitionDuration = "0ms";
+      }
+      
+      currentIndex = index;
+      updateUI();
+      
+      if (!animate) {
+        requestAnimationFrame(() => {
+          track.style.transitionDuration = `${config.transitionDuration}ms`;
+        });
+      }
+
+      root.dispatchEvent(new CustomEvent("carousel:change", {
+        detail: { index: currentIndex, slideCount },
+        bubbles: true,
+      }));
+    };
+
+    const next = () => goto(currentIndex + 1);
+    const prev = () => goto(currentIndex - 1);
+
+    const createBullets = () => {
+      if (!paginationEl || config.paginationType !== "bullets") return;
+      paginationEl.innerHTML = "";
+      bullets = [];
+      
+      for (let i = 0; i < slideCount; i++) {
+        const bullet = document.createElement("button");
+        bullet.className = "carousel-bullet";
+        bullet.type = "button";
+        bullet.setAttribute("role", "tab");
+        bullet.setAttribute("aria-label", `Go to slide ${i + 1}`);
+        bullet.addEventListener("click", () => goto(i), { signal });
+        paginationEl.appendChild(bullet);
+        bullets.push(bullet);
+      }
+    };
+
+    const prevBtn = root.querySelector(".carousel-prev");
+    const nextBtn = root.querySelector(".carousel-next");
+
+    prevBtn?.addEventListener("click", prev, { signal });
+    nextBtn?.addEventListener("click", next, { signal });
+
+    const stopAutoplay = () => {
+      if (autoplayTimer) {
+        clearInterval(autoplayTimer);
+        autoplayTimer = undefined;
+      }
+    };
+
+    const startAutoplay = () => {
+      if (config.autoplay <= 0) return;
+      stopAutoplay();
+      autoplayTimer = setInterval(next, config.autoplay);
+    };
+
+    if (config.pauseOnHover) {
+      root.addEventListener("mouseenter", stopAutoplay, { signal });
+      root.addEventListener("mouseleave", startAutoplay, { signal });
+      root.addEventListener("focusin", stopAutoplay, { signal });
+      root.addEventListener("focusout", startAutoplay, { signal });
+    }
+
+    if (config.touchEnabled) {
+      const handleTouchStart = (e) => {
+        touchStartX = e.touches ? e.touches[0].clientX : e.clientX;
+        isDragging = true;
+        stopAutoplay();
+      };
+
+      const handleTouchMove = (e) => {
+        if (!isDragging) return;
+        touchEndX = e.touches ? e.touches[0].clientX : e.clientX;
+      };
+
+      const handleTouchEnd = () => {
+        if (!isDragging) return;
+        isDragging = false;
+        const diff = touchStartX - touchEndX;
+        const threshold = 50;
+        
+        if (Math.abs(diff) > threshold) {
+          if (diff > 0) next();
+          else prev();
+        }
+        
+        startAutoplay();
+      };
+
+      viewport?.addEventListener("touchstart", handleTouchStart, { signal, passive: true });
+      viewport?.addEventListener("touchmove", handleTouchMove, { signal, passive: true });
+      viewport?.addEventListener("touchend", handleTouchEnd, { signal });
+      viewport?.addEventListener("mousedown", handleTouchStart, { signal });
+      viewport?.addEventListener("mousemove", handleTouchMove, { signal });
+      viewport?.addEventListener("mouseup", handleTouchEnd, { signal });
+      viewport?.addEventListener("mouseleave", handleTouchEnd, { signal });
+    }
+
+    root.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft") { prev(); e.preventDefault(); }
+      if (e.key === "ArrowRight") { next(); e.preventDefault(); }
+    }, { signal });
+
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) stopAutoplay();
+      else startAutoplay();
+    }, { signal });
+
+    createBullets();
+    goto(currentIndex, false);
+    startAutoplay();
+
+    const instance = { goto, next, prev, currentIndex: () => currentIndex, slideCount };
+    getState().instance = instance;
+
+    return () => {
+      stopAutoplay();
+      ac.abort();
+      getState().instance = null;
+    };
+  };
+
+  const boot = () => {
+    const state = getState();
+    state.cleanup?.();
+    state.cleanup = initCarousel();
+  };
+
+  const setupGlobalListeners = () => {
+    const onPageLoad = () => boot();
+    const onAfterSwap = () => boot();
+    const onBeforeSwap = () => getState().cleanup?.();
+
+    document.addEventListener("astro:page-load", onPageLoad);
+    document.addEventListener("astro:after-swap", onAfterSwap);
+    window.addEventListener("astro:before-swap", onBeforeSwap);
+
+    return () => {
+      document.removeEventListener("astro:page-load", onPageLoad);
+      document.removeEventListener("astro:after-swap", onAfterSwap);
+      window.removeEventListener("astro:before-swap", onBeforeSwap);
+    };
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot, { once: true });
+  } else {
+    boot();
+  }
+
+  const state = getState();
+  state.globalCleanup?.();
+  state.globalCleanup = setupGlobalListeners();
+</script>
+
+<style>
+  .carousel {
+    --carousel-nav-color: #fff;
+    --carousel-nav-bg: rgba(0, 0, 0, 0.3);
+    --carousel-nav-bg-hover: rgba(0, 0, 0, 0.5);
+    --carousel-nav-size: 44px;
+    --carousel-nav-icon-size: 24px;
+    --carousel-bullet-size: 10px;
+    --carousel-bullet-gap: 8px;
+    --carousel-bullet-bg: rgba(255, 255, 255, 0.4);
+    --carousel-bullet-bg-active: #fff;
+  }
+</style>

package/components/CarouselNavButton.astro

@@ -0,0 +1,77 @@
+---
+export interface Props {
+  class?: string;
+  direction: "prev" | "next";
+  /** 按钮尺寸 */
+  size?: "sm" | "md" | "lg";
+  /** 样式变体 */
+  variant?: "circle" | "square" | "minimal";
+  /** 自定义 aria-label */
+  ariaLabel?: string;
+}
+
+const {
+  class: className,
+  direction,
+  size = "md",
+  variant = "circle",
+  ariaLabel,
+  ...rest
+} = Astro.props;
+
+const sizeClasses = {
+  sm: "w-8 h-8",
+  md: "w-11 h-11",
+  lg: "w-14 h-14",
+};
+
+const iconSizes = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+};
+
+const variantClasses = {
+  circle: "rounded-full",
+  square: "rounded-lg",
+  minimal: "rounded-lg bg-transparent hover:bg-white/10",
+};
+
+const defaultLabels = {
+  prev: "上一张",
+  next: "下一张",
+};
+
+const points = direction === "prev" ? "15 18 9 12 15 6" : "9 18 15 12 9 6";
+const baseClass = direction === "prev" ? "carousel-prev" : "carousel-next";
+---
+
+<button
+  type="button"
+  class:list={[
+    "carousel-nav-btn inline-flex items-center justify-center border-0 pointer-events-auto text-white bg-black/30 transition duration-200 ease-out opacity-80 hover:bg-black/50 hover:opacity-100 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+    baseClass,
+    sizeClasses[size],
+    variantClasses[variant],
+    className,
+  ]}
+  aria-label={ariaLabel ?? defaultLabels[direction]}
+  {...rest}
+>
+  {Astro.slots.has("default") ? (
+    <slot />
+  ) : (
+    <svg
+      class:list={[iconSizes[size]]}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points={points}></polyline>
+    </svg>
+  )}
+</button>

package/components/CarouselPagination.astro

@@ -0,0 +1,148 @@
+---
+export interface Props {
+  class?: string;
+  /** 分页类型 */
+  type?: "bullets" | "fraction" | "progressbar";
+  /** 主体形式 */
+  variant?: "dots" | "numbers" | "lines";
+}
+
+const {
+  class: className,
+  type = "bullets",
+  variant = "dots",
+} = Astro.props;
+---
+
+<div
+  class:list={[
+    "carousel-pagination-wrapper",
+    `carousel-pagination--${variant}`,
+    className,
+  ]}
+  data-carousel-pagination
+>
+  {type === "bullets" && (
+    <div class="carousel-pagination" role="tablist" aria-label="Slide navigation"></div>
+  )}
+
+  {type === "fraction" && (
+    <div class="carousel-fraction">
+      <span class="carousel-fraction-current">1</span>
+      <span class="carousel-fraction-separator">/</span>
+      <span class="carousel-fraction-total">1</span>
+    </div>
+  )}
+
+  {type === "progressbar" && (
+    <div class="carousel-progressbar">
+      <div class="carousel-progress-bar"></div>
+    </div>
+  )}
+</div>
+
+<style>
+  .carousel-pagination-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--pagination-gap, 8px);
+    pointer-events: auto;
+  }
+
+  .carousel-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--pagination-gap, 8px);
+    counter-reset: carouselPage;
+  }
+
+  .carousel-pagination :global(.carousel-bullet) {
+    width: var(--bullet-size, 10px);
+    height: var(--bullet-size, 10px);
+    min-width: var(--bullet-min-width, auto);
+    padding: var(--bullet-padding, 0);
+    border-radius: var(--bullet-radius, 9999px);
+    border: none;
+    cursor: pointer;
+    background: var(--bullet-bg, rgba(255, 255, 255, 0.4));
+    color: var(--bullet-color, rgba(255, 255, 255, 0.6));
+    font-size: var(--bullet-font-size, 0.75rem);
+    font-weight: var(--bullet-font-weight, 500);
+    letter-spacing: var(--bullet-letter-spacing, 0);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--bullet-transition, background 0.2s, color 0.2s, transform 0.2s);
+    counter-increment: carouselPage;
+  }
+
+  .carousel-pagination :global(.carousel-bullet:hover) {
+    color: var(--bullet-color-hover, #ffffff);
+    transform: var(--bullet-hover-transform, scale(1.1));
+  }
+
+  .carousel-pagination :global(.carousel-bullet:focus-visible) {
+    outline: 2px solid var(--bullet-bg-active, #fff);
+    outline-offset: 2px;
+  }
+
+  .carousel-pagination :global(.carousel-bullet-active) {
+    background: var(--bullet-bg-active, #fff);
+    color: var(--bullet-color-active, #fff);
+  }
+
+  /* Variant: dots (default) */
+  .carousel-pagination--dots .carousel-pagination :global(.carousel-bullet) {
+    width: var(--bullet-size, 10px);
+    height: var(--bullet-size, 10px);
+  }
+
+  /* Variant: lines */
+  .carousel-pagination--lines .carousel-pagination :global(.carousel-bullet) {
+    width: 24px;
+    height: 4px;
+    border-radius: 2px;
+  }
+  .carousel-pagination--lines .carousel-pagination :global(.carousel-bullet-active) {
+    width: 32px;
+  }
+
+  /* Variant: numbers */
+  .carousel-pagination--numbers .carousel-pagination :global(.carousel-bullet) {
+    width: auto;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+  }
+  .carousel-pagination--numbers .carousel-pagination :global(.carousel-bullet::before) {
+    content: counter(carouselPage, decimal-leading-zero);
+  }
+
+  /* Fraction */
+  .carousel-fraction {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #fff;
+  }
+  .carousel-fraction-separator {
+    opacity: 0.5;
+  }
+
+  /* Progressbar */
+  .carousel-progressbar {
+    width: 100px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .carousel-progress-bar {
+    height: 100%;
+    background: var(--bullet-bg-active, #fff);
+    transition: width 0.3s ease;
+    width: 0;
+  }
+</style>

package/components/CarouselSlide.astro

@@ -0,0 +1,69 @@
+---
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+import Box from "@rxdrag/website-lib/components/Box.astro";
+import Container from "@rxdrag/website-lib/components/Container.astro";
+
+export interface Props {
+  class?: string;
+  className?: string;
+  /** 背景配置 */
+  backgrounds?: BackgroundConfig[];
+  /** 是否使用 Container 包裹内容 */
+  useContainer?: boolean;
+  /** 内容垂直对齐：start | center | end */
+  align?: "start" | "center" | "end";
+  /** 内容水平对齐：start | center | end */
+  justify?: "start" | "center" | "end";
+}
+
+const {
+  class: className,
+  className: className2,
+  backgrounds,
+  useContainer = true,
+  align = "center",
+  justify = "start",
+} = Astro.props;
+
+const alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+};
+
+const justifyClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+};
+---
+
+<div class="carousel-slide h-full" data-carousel-slide>
+  <Box
+    class:list={[
+      "w-full h-full flex flex-col",
+      justifyClasses[justify],
+      alignClasses[align],
+    ]}
+    backgrounds={backgrounds}
+  >
+    {
+      useContainer ? (
+        <Container class:list={["h-full w-full slider-container relative overflow-hidden", className, className2]}>
+          <slot />
+        </Container>
+      ) : (
+        <div class:list={["w-full h-full slider-div relative overflow-hidden", className, className2]}>
+          <slot />
+        </div>
+      )
+    }
+  </Box>
+</div>
+
+<style>
+  .carousel-slide {
+    flex-shrink: 0;
+    min-width: 100%;
+  }
+</style>

package/components/CarouselSlides.astro

@@ -0,0 +1,26 @@
+---
+export interface Props {
+  class?: string;
+  className?: string;
+}
+
+const { class: className, className: className2 } = Astro.props;
+---
+
+<div class="carousel-viewport h-full relative overflow-hidden">
+  <div
+    class:list={["carousel-track h-full flex", className, className2]}
+    aria-live="polite"
+    data-carousel-track
+  >
+    <slot />
+  </div>
+</div>
+
+<style>
+  .carousel-track {
+    will-change: transform;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+</style>

package/components/CookieConsent.astro

@@ -7,35 +7,41 @@ import "./CookieConsent.css";
   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);
+  // 设计模式下跳过执行（sandbox 环境 document.cookie 不可用）
+  const isDesignMode = typeof window !== 'undefined' && window.top !== window && (window as any).__ASTRO_SANDBOX_MODULES__;
+  if (isDesignMode) {
+    //console.log('[CookieConsent] skip in design mode');
+  } else {
+    // 异步初始化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";
+        }
+      } 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";
+        const preferencesBtn = document.getElementById("show-preferences-btn");
+        if (preferencesBtn) {
+          preferencesBtn.style.display = "block";
+        }
       }
     }
-  }
 
-  // 页面加载完成后初始化
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initializeCookieConsent);
-  } else {
-    initializeCookieConsent();
+    // 页面加载完成后初始化
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initializeCookieConsent);
+    } else {
+      initializeCookieConsent();
+    }
   }
 </script>

package/components/Dialog.astro

@@ -179,8 +179,6 @@ const resolvedExitTransform =
     const w = window;
     if (!w[globalKey]) w[globalKey] = new Set();
 
-    const logPrefix = `[Dialog:${openableKey}]`;
-
     const backdropClass = backdropClassString || "";
 
     const isDialogEl = (el) => {
@@ -191,7 +189,6 @@ const resolvedExitTransform =
     const getDialog = () => {
       const el = document.getElementById(openableKey);
       if (!isDialogEl(el)) {
-        console.log(logPrefix, "getDialog: dialog not found", openableKey);
         return null;
       }
       return el;
@@ -213,12 +210,6 @@ const resolvedExitTransform =
         ? `blur(${backdropBlurPx}px)`
         : "";
       backdrop.style.animation = `genericBackdropIn ${openAnimMs}ms ease-out`;
-      console.log(logPrefix, "ensureBackdrop: create", {
-        backdropClass,
-        backdropOpacity,
-        backdropBlurPx,
-        openAnimMs,
-      });
       backdrop.addEventListener("click", () =>
         requestClose(dialog, "backdrop")
       );
@@ -234,13 +225,11 @@ const resolvedExitTransform =
     const removeBackdrop = (dialog) => {
       const next = dialog.nextElementSibling;
       if (next && next.classList?.contains("backdrop")) {
-        console.log(logPrefix, "removeBackdrop");
         next.remove();
       }
     };
 
     const closeNow = (dialog) => {
-      console.log(logPrefix, "closeNow");
       if (typeof dialog.close === "function") {
         dialog.close();
       } else {
@@ -252,11 +241,6 @@ const resolvedExitTransform =
     };
 
     const requestClose = (dialog, reason = "unknown") => {
-      console.log(logPrefix, "requestClose", {
-        reason,
-        open: isOpen(dialog),
-        state: dialog.getAttribute("data-dialog-state"),
-      });
       if (!isOpen(dialog)) return;
       if (dialog.getAttribute("data-dialog-state") === "closing") return;
       dialog.setAttribute("data-dialog-state", "closing");
@@ -275,10 +259,6 @@ const resolvedExitTransform =
       if (dialog.dataset.genericDialogBound) return;
       dialog.dataset.genericDialogBound = "1";
 
-      console.log(logPrefix, "ensureDialogBound", {
-        closeSelector,
-      });
-
       dialog.addEventListener("click", (e) => {
         if (e.target === dialog) requestClose(dialog, "dialog_blank_area");
       });
@@ -304,11 +284,6 @@ const resolvedExitTransform =
       if (isOpen(dialog)) return;
 
       try {
-        console.log(logPrefix, "open: start", {
-          forceFallback,
-          __force_dialog_fallback__: window.__force_dialog_fallback__,
-          hasShowModal: typeof dialog.showModal === "function",
-        });
         const { scrollX, scrollY } = window;
         dialog.removeAttribute("data-dialog-state");
 
@@ -316,10 +291,8 @@ const resolvedExitTransform =
           forceFallback === true || window.__force_dialog_fallback__ === true;
 
         if (!effectiveForceFallback && typeof dialog.showModal === "function") {
-          console.log(logPrefix, "open: native showModal");
           dialog.showModal();
         } else {
-          console.log(logPrefix, "open: fallback open attr + backdrop + esc");
           ensureBackdrop(dialog);
           dialog.setAttribute("open", "");
           dialog.__genericDialogEscHandler = (e) => {
@@ -338,17 +311,12 @@ const resolvedExitTransform =
           } catch {
             dialog.focus();
           }
-          console.log(logPrefix, "open: focus done");
         });
       } catch (err) {
-        console.log(logPrefix, "open failed", err);
       }
     };
 
     const init = () => {
-      console.log(logPrefix, "init", {
-        alreadyBound: w[globalKey].has(openableKey),
-      });
       if (!w[globalKey].has(openableKey)) {
         w[globalKey].add(openableKey);
         document.addEventListener("click", (e) => {
@@ -358,10 +326,6 @@ const resolvedExitTransform =
           if (!opener) return;
           const cta = opener.getAttribute("data-call-to-action") || "";
           window.lastCta = cta;
-          console.log(logPrefix, "opener click -> open", {
-            cta,
-            openerTag: opener.tagName,
-          });
           open();
         });
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "type": "module",
   "exports": {
     ".": "./index.ts",
@@ -27,13 +27,12 @@
     "astro": "^5.16.6",
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
-    "swiper": "^12.0.3",
     "typescript": "^5",
-    "@rxdrag/rxcms-models": "0.3.106",
-    "@rxdrag/tiptap-preview": "0.0.3",
     "@rxdrag/entify-hooks": "0.2.79",
+    "@rxdrag/eslint-config-custom": "0.2.13",
+    "@rxdrag/tiptap-preview": "0.0.3",
     "@rxdrag/tsconfig": "0.2.1",
-    "@rxdrag/eslint-config-custom": "0.2.13"
+    "@rxdrag/rxcms-models": "0.3.106"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
@@ -41,12 +40,11 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "vanilla-cookieconsent": "3.1.0",
-    "@rxdrag/rxcms-models": "0.3.106",
-    "@rxdrag/website-lib-core": "0.0.125"
+    "@rxdrag/website-lib-core": "0.0.125",
+    "@rxdrag/rxcms-models": "0.3.106"
   },
   "peerDependencies": {
-    "astro": "^5.16.6",
-    "swiper": "^12.0.3"
+    "astro": "^5.16.6"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,tsx",

package/components/HeroCarousel.astro

@@ -1,204 +0,0 @@
----
-import Section from "./Section.astro";
-import clsx from "clsx";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-
-interface Props {
-  class?: string;
-}
-
-const { class: className, ...rest } = Astro.props;
----
-
-<Section
-  className={clsx(
-    "w-full h-[300px] sm:h-[400px] md:h-screen flex flex-col mt-0 bg-black relative overflow-hidden z-10 py-0",
-    className,
-  )}
-  disableContainer
-  {...rest}
->
-  <div class="hero-carousel w-full h-full relative" data-hero-carousel>
-    <div class="swiper h-full relative">
-      <div class="swiper-wrapper h-full">
-        <slot />
-      </div>
-      <slot name="navigation" />
-      <slot name="pagination" />
-    </div>
-  </div>
-</Section>
-
-<script>
-  type SwiperRootEl = HTMLElement & { __swiperInstance?: any };
-  type SwiperType = typeof import("swiper").default;
-  type SwiperModulesType = typeof import("swiper/modules");
-
-  type BootWindow = Window & {
-    __heroCarouselBootstrapped?: boolean;
-  };
-
-  const destroyRoot = (root: SwiperRootEl) => {
-    const existing = root.__swiperInstance;
-    if (existing && typeof existing.destroy === "function") {
-      existing.destroy(true, true);
-      root.__swiperInstance = null;
-    }
-    root.dataset.heroCarouselInited = "";
-  };
-
-  const loadSwiperResources = async () => {
-    const [{ default: Swiper }, { Autoplay, Navigation, Pagination }] =
-      await Promise.all([import("swiper"), import("swiper/modules")]);
-    return { Swiper, Autoplay, Navigation, Pagination };
-  };
-
-  let swiperCache: {
-    Swiper: SwiperType;
-    Autoplay: SwiperModulesType["Autoplay"];
-    Navigation: SwiperModulesType["Navigation"];
-    Pagination: SwiperModulesType["Pagination"];
-  } | null = null;
-
-  const getSwiperModules = async () => {
-    if (!swiperCache) {
-      swiperCache = await loadSwiperResources();
-    }
-    return swiperCache;
-  };
-
-  const initRoot = async (root: SwiperRootEl) => {
-    if (root.dataset.heroCarouselInited === "1") {
-      return;
-    }
-
-    const el = root.querySelector(".swiper") as HTMLElement | null;
-    if (!el) return;
-
-    const paginationEl = root.querySelector(
-      ".swiper-pagination",
-    ) as HTMLElement | null;
-    const prevEl = root.querySelector(
-      ".swiper-button-prev",
-    ) as HTMLElement | null;
-    const nextEl = root.querySelector(
-      ".swiper-button-next",
-    ) as HTMLElement | null;
-
-    const wantPagination = !!paginationEl;
-    const wantNavigation = !!prevEl && !!nextEl;
-
-    destroyRoot(root);
-
-    const { Swiper, Autoplay, Navigation, Pagination } =
-      await getSwiperModules();
-
-    const modules = [Autoplay] as any[];
-    if (wantPagination) {
-      modules.push(Pagination);
-    }
-    if (wantNavigation) {
-      modules.push(Navigation);
-    }
-
-    const instance = new Swiper(el, {
-      modules,
-      slidesPerView: 1,
-      spaceBetween: 0,
-      rewind: true,
-      observer: true,
-      observeParents: true,
-      autoplay: {
-        delay: 3500,
-        disableOnInteraction: false,
-        pauseOnMouseEnter: false,
-      },
-      ...(wantPagination && paginationEl
-        ? {
-            pagination: {
-              el: paginationEl,
-              clickable: true,
-              type: "bullets",
-              bulletActiveClass: "swiper-pagination-bullet-active",
-            },
-          }
-        : {}),
-      ...(wantNavigation && prevEl && nextEl
-        ? {
-            navigation: {
-              prevEl,
-              nextEl,
-            },
-          }
-        : {}),
-    });
-
-    try {
-      instance.autoplay?.start?.();
-    } catch {}
-
-    root.__swiperInstance = instance;
-    root.dataset.heroCarouselInited = "1";
-  };
-
-  const initAll = async () => {
-    const roots = document.querySelectorAll(
-      "[data-hero-carousel]",
-    ) as NodeListOf<SwiperRootEl>;
-    if (roots.length === 0) return;
-    await Promise.all(Array.from(roots).map((root) => initRoot(root)));
-  };
-
-  const destroyAll = () => {
-    const roots = document.querySelectorAll(
-      "[data-hero-carousel]",
-    ) as NodeListOf<SwiperRootEl>;
-    roots.forEach((root) => destroyRoot(root));
-  };
-
-  const ensureAutoplayAll = () => {
-    const roots = document.querySelectorAll(
-      "[data-hero-carousel]",
-    ) as NodeListOf<SwiperRootEl>;
-    roots.forEach((root) => {
-      const inst = root.__swiperInstance;
-      try {
-        inst?.autoplay?.start?.();
-      } catch {}
-    });
-  };
-
-  const boot = async () => {
-    try {
-      await initAll();
-    } catch (e) {
-      console.log("HeroCarousel init error:", e);
-    }
-  };
-
-  const w = window as BootWindow;
-  if (!w.__heroCarouselBootstrapped) {
-    w.__heroCarouselBootstrapped = true;
-
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", boot);
-    } else {
-      boot();
-    }
-
-    document.addEventListener("astro:page-load", boot);
-    document.addEventListener("astro:after-swap", () => {
-      boot();
-      ensureAutoplayAll();
-    });
-    window.addEventListener("astro:before-swap", destroyAll);
-
-    document.addEventListener("visibilitychange", () => {
-      if (!document.hidden) {
-        ensureAutoplayAll();
-      }
-    });
-  }
-</script>

package/components/HeroCarouselPanel.astro

@@ -1,24 +0,0 @@
----
-import Box from "./Box.astro";
-import Container from "./Container.astro";
-import clsx from "clsx";
-import type { BackgroundConfig } from "@rxdrag/website-lib-core";
-
-interface Props {
-  class?: string;
-  backgrounds?: BackgroundConfig[];
-}
-
-const { class: className, backgrounds } = Astro.props;
----
-
-<div class={clsx("swiper-slide h-full")}>
-  <Box
-    class={clsx("w-full h-full flex flex-col justify-center")}
-    backgrounds={backgrounds}
-  >
-    <Container class={className}>
-      <slot />
-    </Container>
-  </Box>
-</div>