@rxdrag/website-lib 0.0.152 → 0.0.153

package/components/Carousel.astro

@@ -1,315 +1,456 @@
----
-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 paginationWrapper = root.querySelector("[data-carousel-pagination]");
-    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");
-    const bulletClass = paginationWrapper?.dataset.bulletClass || "";
-    const bulletActiveClass = paginationWrapper?.dataset.bulletActiveClass || "";
-    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);
-        if (bulletActiveClass) {
-          bulletActiveClass.split(" ").filter(Boolean).forEach(cls => {
-            b.classList.toggle(cls, 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 ${bulletClass}`.trim();
-        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;
-        touchEndX = touchStartX;
-        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>
+---
+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.querySelectorAll("[data-carousel-slide]"));
+    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",
+    };
+
+    const prevIndex = parseInt(root.dataset.carouselCurrent || "", 10);
+    let currentIndex = (prevIndex >= 0 && prevIndex < slideCount)
+      ? prevIndex
+      : Math.max(0, Math.min(config.initialSlide, slideCount - 1));
+    let touchStartX = 0;
+    let touchEndX = 0;
+    let isDragging = false;
+    let autoplayPaused = false;
+    let autoplayRafId = null;
+    let lastAutoplayTime = 0;
+
+    const ac = new AbortController();
+    const { signal } = ac;
+
+    const getSlideWidth = () => (viewport ? viewport.clientWidth : 0);
+
+    const syncSlideWidths = () => {
+      const w = getSlideWidth();
+      slides.forEach((slide) => {
+        slide.style.width = `${w}px`;
+        slide.style.minWidth = `${w}px`;
+      });
+    };
+
+    slides.forEach((slide, i) => {
+      slide.style.flexShrink = "0";
+      slide.setAttribute("role", "group");
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("aria-label", `Slide ${i + 1} of ${slideCount}`);
+    });
+
+    syncSlideWidths();
+
+    const paginationWrapper = root.querySelector("[data-carousel-pagination]");
+    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");
+    const bulletClass = paginationWrapper?.dataset.bulletClass || "";
+    const bulletActiveClass = paginationWrapper?.dataset.bulletActiveClass || "";
+    let bullets = [];
+
+    const updateUI = () => {
+      const w = getSlideWidth();
+      track.style.transform = `translateX(-${currentIndex * w}px)`;
+
+      bullets.forEach((b, i) => {
+        const isActive = i === currentIndex;
+        b.classList.toggle("carousel-bullet-active", isActive);
+        if (bulletActiveClass) {
+          bulletActiveClass.split(" ").filter(Boolean).forEach(cls => {
+            b.classList.toggle(cls, 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 refreshAos = async () => {
+      const w = window;
+      const state = w.__aos_state__;
+      if (!state) return;
+
+      const raf = () =>
+        new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+
+      await raf();
+      await raf();
+
+      const aos = state.aos || (await state.loading);
+      if (aos && typeof aos.refresh === "function") {
+        aos.refresh();
+      }
+    };
+
+    const replayAosInSlides = async () => {
+      const raf = () =>
+        new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+
+      slides.forEach((slide, i) => {
+        const nodes = slide.querySelectorAll("[data-aos]");
+        nodes.forEach((el) => {
+          el.classList.add("aos-init");
+          if (i !== currentIndex) {
+            el.classList.remove("aos-animate");
+          }
+        });
+      });
+
+      await raf();
+      await raf();
+
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      const active = slides[currentIndex];
+      if (!active) return;
+      const nodes = active.querySelectorAll("[data-aos]");
+      nodes.forEach((el) => {
+        el.classList.remove("aos-animate");
+        // force reflow
+        void el.offsetWidth;
+
+        const delay = el.getAttribute("data-aos-delay");
+        if (delay && delay.trim()) {
+          el.style.transitionDelay = `${parseInt(delay, 10) || 0}ms`;
+        } else {
+          el.style.transitionDelay = "";
+        }
+
+        el.classList.add("aos-animate");
+      });
+    };
+
+    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;
+      root.dataset.carouselCurrent = String(currentIndex);
+      updateUI();
+      refreshAos();
+      replayAosInSlides();
+      
+      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;
+
+      const existing = Array.from(
+        paginationEl.querySelectorAll("button.carousel-bullet"),
+      );
+
+      if (existing.length === slideCount) {
+        bullets = existing;
+      } else {
+        paginationEl.innerHTML = "";
+        bullets = [];
+
+        for (let i = 0; i < slideCount; i++) {
+          const bullet = document.createElement("button");
+          bullet.className = `carousel-bullet ${bulletClass}`.trim();
+          paginationEl.appendChild(bullet);
+          bullets.push(bullet);
+        }
+      }
+
+      const bulletClasses = bulletClass.split(" ").filter(Boolean);
+      bullets.forEach((bullet, i) => {
+        bullet.type = "button";
+        bullet.setAttribute("role", "tab");
+        bullet.setAttribute("aria-label", `Go to slide ${i + 1}`);
+
+        if (bulletClasses.length) {
+          bulletClasses.forEach((cls) => bullet.classList.add(cls));
+        }
+
+        bullet.addEventListener("click", () => goto(i), { signal });
+      });
+    };
+
+    const prevBtn = root.querySelector(".carousel-prev");
+    const nextBtn = root.querySelector(".carousel-next");
+
+    prevBtn?.addEventListener("click", prev, { signal });
+    nextBtn?.addEventListener("click", next, { signal });
+
+    const stopAutoplay = () => {
+      autoplayPaused = true;
+      if (autoplayRafId) {
+        cancelAnimationFrame(autoplayRafId);
+        autoplayRafId = null;
+      }
+    };
+
+    const autoplayLoop = (timestamp) => {
+      if (autoplayPaused || config.autoplay <= 0) {
+        autoplayRafId = null;
+        return;
+      }
+
+      if (!lastAutoplayTime) lastAutoplayTime = timestamp;
+
+      const elapsed = timestamp - lastAutoplayTime;
+      if (elapsed >= config.autoplay) {
+        lastAutoplayTime = timestamp;
+        next();
+      }
+
+      autoplayRafId = requestAnimationFrame(autoplayLoop);
+    };
+
+    const startAutoplay = () => {
+      if (config.autoplay <= 0) return;
+      stopAutoplay();
+      autoplayPaused = false;
+      lastAutoplayTime = 0;
+      autoplayRafId = requestAnimationFrame(autoplayLoop);
+    };
+
+    if (config.pauseOnHover) {
+      root.addEventListener("mouseenter", stopAutoplay, { signal });
+      root.addEventListener("mouseleave", startAutoplay, { signal });
+      root.addEventListener("focusin", stopAutoplay, { signal });
+      root.addEventListener("focusout", startAutoplay, { signal });
+    }
+
+    const onResize = () => {
+      syncSlideWidths();
+      track.style.transitionDuration = "0ms";
+      updateUI();
+      requestAnimationFrame(() => {
+        track.style.transitionDuration = `${config.transitionDuration}ms`;
+      });
+    };
+    window.addEventListener("resize", onResize, { signal });
+
+    if (config.touchEnabled) {
+      const handleTouchStart = (e) => {
+        touchStartX = e.touches ? e.touches[0].clientX : e.clientX;
+        touchEndX = touchStartX;
+        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 });
+
+    let intersectionObserver = null;
+    if (typeof IntersectionObserver !== "undefined") {
+      intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (!entry) return;
+          if (entry.isIntersecting) {
+            startAutoplay();
+          } else {
+            stopAutoplay();
+          }
+        },
+        { root: null, threshold: 0 }
+      );
+      intersectionObserver.observe(root);
+    }
+
+    createBullets();
+    goto(currentIndex, false);
+    startAutoplay();
+
+    const instance = { goto, next, prev, currentIndex: () => currentIndex, slideCount };
+    getState().instance = instance;
+
+    return () => {
+      stopAutoplay();
+      intersectionObserver?.disconnect();
+      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>