@jorgemadrid/open-carousel 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2529 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Carousel: () => Carousel,
+  CarouselArrow: () => CarouselArrow,
+  CarouselLoggerInstance: () => CarouselLoggerInstance,
+  DEBUG_CONFIG: () => DEBUG_CONFIG,
+  FEATURE_FLAGS: () => FEATURE_FLAGS,
+  LAYOUT_CONFIG: () => LAYOUT_CONFIG,
+  TIMING_CONFIG: () => TIMING_CONFIG,
+  VISUAL_CONFIG: () => VISUAL_CONFIG,
+  carouselLogger: () => carouselLogger,
+  clearLoadingStateCache: () => clearLoadingStateCache,
+  createLogger: () => createLogger,
+  measureLayoutFromElement: () => measureLayoutFromElement,
+  reduce: () => reduce,
+  useCarouselCoordinator: () => useCarouselCoordinator,
+  useCarouselLayout: () => useCarouselLayout,
+  useCarouselNavigation: () => useCarouselNavigation,
+  useCarouselPersistence: () => useCarouselPersistence,
+  useCarouselTeleport: () => useCarouselTeleport,
+  useCarouselVisuals: () => useCarouselVisuals,
+  useDraggableScroll: () => useDraggableScroll,
+  useLoadingState: () => useLoadingState,
+  useScrollCompletion: () => useScrollCompletion
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Carousel.tsx
+var import_react10 = require("react");
+
+// src/hooks/useDraggableScroll.ts
+var import_react = require("react");
+var MAX_VELOCITY = 500;
+var MIN_VELOCITY_THRESHOLD = 10;
+var FRICTION = 0.96;
+var VELOCITY_SMOOTHING = 0.15;
+var BOUNCE_DISTANCE = 35;
+var BOUNCE_DURATION = 400;
+var PULL_RESISTANCE = 0.35;
+var MAX_PULL_DISTANCE = 80;
+var SNAP_BACK_DURATION = 250;
+var SNAP_DURATION = 200;
+var SNAP_THRESHOLD = 30;
+function useDraggableScroll({
+  infinite = false,
+  hasNextPage = false,
+  onEndReached,
+  cardWidth = 320,
+  gap = 24,
+  cloneCount = 3,
+  friction,
+  maxVelocity
+} = {}) {
+  const ref = (0, import_react.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const isDown = (0, import_react.useRef)(false);
+  const startX = (0, import_react.useRef)(0);
+  const scrollLeftStart = (0, import_react.useRef)(0);
+  const currentPointerId = (0, import_react.useRef)(null);
+  const velocity = (0, import_react.useRef)(0);
+  const lastTimestamp = (0, import_react.useRef)(0);
+  const lastPageX = (0, import_react.useRef)(0);
+  const animationFrameId = (0, import_react.useRef)(null);
+  const currentPullOffset = (0, import_react.useRef)(0);
+  const isPullingEdge = (0, import_react.useRef)(false);
+  const startedAtLeftEdge = (0, import_react.useRef)(false);
+  const startedAtRightEdge = (0, import_react.useRef)(false);
+  const isBouncing = (0, import_react.useRef)(false);
+  const lastEndReachedTime = (0, import_react.useRef)(0);
+  const stride = cardWidth + gap;
+  const cancelAnimation = (0, import_react.useCallback)((force = false) => {
+    if (isBouncing.current && !force) return;
+    if (animationFrameId.current) {
+      cancelAnimationFrame(animationFrameId.current);
+      animationFrameId.current = null;
+    }
+    if (ref.current) {
+      ref.current.style.transform = "";
+    }
+    currentPullOffset.current = 0;
+    isPullingEdge.current = false;
+    isBouncing.current = false;
+  }, []);
+  const findNearestSnapPoint = (0, import_react.useCallback)((currentScroll, direction) => {
+    if (!ref.current) return currentScroll;
+    const container = ref.current;
+    const children = Array.from(container.children);
+    if (children.length === 0) return currentScroll;
+    let nearestPoint = currentScroll;
+    let minDistance = Infinity;
+    const containerCenter = currentScroll + container.clientWidth / 2;
+    children.forEach((child) => {
+      const childCenter = child.offsetLeft + child.offsetWidth / 2;
+      const distance = Math.abs(childCenter - containerCenter);
+      const targetScroll = childCenter - container.clientWidth / 2;
+      if (direction !== 0) {
+        const isInDirection = direction > 0 ? childCenter < containerCenter : childCenter > containerCenter;
+        if (isInDirection && distance < minDistance) {
+          minDistance = distance;
+          nearestPoint = targetScroll;
+        }
+      } else if (distance < minDistance) {
+        minDistance = distance;
+        nearestPoint = targetScroll;
+      }
+    });
+    const maxScroll = container.scrollWidth - container.clientWidth;
+    return Math.max(0, Math.min(maxScroll, nearestPoint));
+  }, []);
+  const snapToPosition = (0, import_react.useCallback)((targetScroll) => {
+    if (!ref.current) return;
+    const el = ref.current;
+    const startScroll = el.scrollLeft;
+    const distance = targetScroll - startScroll;
+    if (Math.abs(distance) < 1) {
+      el.style.scrollSnapType = "";
+      return;
+    }
+    const startTime = performance.now();
+    const snapLoop = () => {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / SNAP_DURATION, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      el.scrollLeft = startScroll + distance * easeProgress;
+      if (progress < 1) {
+        animationFrameId.current = requestAnimationFrame(snapLoop);
+      } else {
+        el.scrollLeft = targetScroll;
+        animationFrameId.current = null;
+        el.style.scrollSnapType = "";
+      }
+    };
+    animationFrameId.current = requestAnimationFrame(snapLoop);
+  }, []);
+  const snapBack = (0, import_react.useCallback)(() => {
+    if (!ref.current) return;
+    if (isBouncing.current) return;
+    const el = ref.current;
+    const startOffset = currentPullOffset.current;
+    const startTime = performance.now();
+    currentPullOffset.current = 0;
+    isPullingEdge.current = false;
+    if (Math.abs(startOffset) < 1) {
+      el.style.transform = "";
+      return;
+    }
+    const snapLoop = () => {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / SNAP_BACK_DURATION, 1);
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      const offset = startOffset * (1 - easeProgress);
+      el.style.transform = Math.abs(offset) > 0.5 ? `translateX(${offset}px)` : "";
+      if (progress < 1) {
+        animationFrameId.current = requestAnimationFrame(snapLoop);
+      } else {
+        el.style.transform = "";
+        animationFrameId.current = null;
+      }
+    };
+    animationFrameId.current = requestAnimationFrame(snapLoop);
+  }, []);
+  const triggerBounce = (0, import_react.useCallback)((direction) => {
+    if (!ref.current) return;
+    if (infinite) return;
+    if (direction === "right" && hasNextPage) return;
+    cancelAnimation(true);
+    isBouncing.current = true;
+    const el = ref.current;
+    const startTime = performance.now();
+    const bounceDirection = direction === "left" ? 1 : -1;
+    const bounceLoop = () => {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / BOUNCE_DURATION, 1);
+      const easeProgress = Math.sin(progress * Math.PI);
+      const offset = BOUNCE_DISTANCE * bounceDirection * easeProgress;
+      el.style.transform = `translateX(${offset}px)`;
+      if (progress < 1) {
+        animationFrameId.current = requestAnimationFrame(bounceLoop);
+      } else {
+        el.style.transform = "";
+        animationFrameId.current = null;
+        isBouncing.current = false;
+      }
+    };
+    animationFrameId.current = requestAnimationFrame(bounceLoop);
+  }, [cancelAnimation, infinite, hasNextPage]);
+  const startMomentumScroll = (0, import_react.useCallback)(() => {
+    if (!ref.current) return;
+    const el = ref.current;
+    const activeFriction = friction ?? FRICTION;
+    const activeMaxVelocity = maxVelocity ?? MAX_VELOCITY;
+    let currentVel = Math.max(-activeMaxVelocity, Math.min(activeMaxVelocity, velocity.current * 16));
+    let lastLoopTime = performance.now();
+    const initialDirection = currentVel > 0 ? 1 : currentVel < 0 ? -1 : 0;
+    if (Math.abs(currentVel) <= MIN_VELOCITY_THRESHOLD) {
+      const snapTarget = findNearestSnapPoint(el.scrollLeft, 0);
+      snapToPosition(snapTarget);
+      return;
+    }
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    if (el.scrollLeft <= 0 && currentVel > 0) {
+      triggerBounce("left");
+      return;
+    }
+    if (el.scrollLeft >= maxScroll && currentVel < 0) {
+      triggerBounce("right");
+      return;
+    }
+    const momentumLoop = () => {
+      if (!ref.current) return;
+      const now = performance.now();
+      const dt = now - lastLoopTime;
+      lastLoopTime = now;
+      const frameRatio = Math.min(dt / 16, 3);
+      currentVel *= Math.pow(activeFriction, frameRatio);
+      const prevScroll = el.scrollLeft;
+      const max = el.scrollWidth - el.clientWidth;
+      el.scrollLeft = prevScroll - currentVel * frameRatio;
+      const newScroll = el.scrollLeft;
+      const hitLeft = currentVel > 0 && newScroll <= 0 && prevScroll > 0;
+      const hitRight = currentVel < 0 && newScroll >= max && prevScroll < max;
+      if (hitLeft) {
+        if (!infinite) triggerBounce("left");
+        return;
+      }
+      if (hitRight) {
+        if (!infinite && !hasNextPage) triggerBounce("right");
+        return;
+      }
+      if (Math.abs(currentVel) < SNAP_THRESHOLD) {
+        const snapTarget = findNearestSnapPoint(el.scrollLeft, initialDirection);
+        snapToPosition(snapTarget);
+        return;
+      }
+      if (Math.abs(currentVel) > 0.5) {
+        animationFrameId.current = requestAnimationFrame(momentumLoop);
+      } else {
+        const snapTarget = findNearestSnapPoint(el.scrollLeft, 0);
+        snapToPosition(snapTarget);
+      }
+    };
+    animationFrameId.current = requestAnimationFrame(momentumLoop);
+  }, [triggerBounce, findNearestSnapPoint, snapToPosition, infinite, hasNextPage]);
+  const endDrag = (0, import_react.useCallback)(() => {
+    if (!isDown.current) return;
+    isDown.current = false;
+    if (ref.current && currentPointerId.current !== null) {
+      try {
+        ref.current.releasePointerCapture(currentPointerId.current);
+      } catch {
+      }
+    }
+    currentPointerId.current = null;
+    if (isPullingEdge.current) {
+      snapBack();
+      setTimeout(() => setIsDragging(false), 0);
+      return;
+    }
+    if (isDragging) {
+      startMomentumScroll();
+    }
+    setTimeout(() => setIsDragging(false), 0);
+  }, [isDragging, startMomentumScroll, snapBack]);
+  const onPointerDown = (0, import_react.useCallback)((e) => {
+    if (e.pointerType === "touch") {
+      return;
+    }
+    if (ref.current) {
+      ref.current.style.scrollSnapType = "none";
+    }
+    isDown.current = true;
+    cancelAnimation();
+    window.getSelection()?.removeAllRanges();
+    if (ref.current) {
+      const el = ref.current;
+      const maxScroll = el.scrollWidth - el.clientWidth;
+      startX.current = e.pageX;
+      scrollLeftStart.current = el.scrollLeft;
+      lastPageX.current = e.pageX;
+      lastTimestamp.current = performance.now();
+      velocity.current = 0;
+      startedAtLeftEdge.current = el.scrollLeft <= 20;
+      startedAtRightEdge.current = el.scrollLeft >= maxScroll - 5;
+    }
+  }, [cancelAnimation]);
+  const onPointerUp = (0, import_react.useCallback)((e) => {
+    if (!isDown.current) return;
+    if (performance.now() - lastTimestamp.current > 80) {
+      velocity.current = 0;
+    }
+    endDrag();
+  }, [endDrag]);
+  const onPointerMove = (0, import_react.useCallback)((e) => {
+    if (!isDown.current || !ref.current) return;
+    e.preventDefault();
+    const now = performance.now();
+    const pageX = e.pageX;
+    const el = ref.current;
+    const timeDelta = now - lastTimestamp.current;
+    if (timeDelta > 0) {
+      const instantVel = (pageX - lastPageX.current) / timeDelta;
+      velocity.current = velocity.current * (1 - VELOCITY_SMOOTHING) + instantVel * VELOCITY_SMOOTHING;
+      lastTimestamp.current = now;
+      lastPageX.current = pageX;
+    }
+    const x = pageX;
+    const walk = x - startX.current;
+    const intendedScroll = scrollLeftStart.current - walk;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    const isAtLeftEdge = el.scrollLeft <= 20;
+    const isAtRightEdge = el.scrollLeft >= maxScroll - 5;
+    const canPullLeft = !infinite && !isBouncing.current && startedAtLeftEdge.current && isAtLeftEdge && intendedScroll < 0;
+    const canPullRight = !infinite && !hasNextPage && !isBouncing.current && startedAtRightEdge.current && isAtRightEdge && intendedScroll > maxScroll;
+    if (canPullLeft || canPullRight) {
+      isPullingEdge.current = true;
+      let pullAmount;
+      if (canPullLeft) {
+        pullAmount = -intendedScroll * PULL_RESISTANCE;
+      } else {
+        pullAmount = -(intendedScroll - maxScroll) * PULL_RESISTANCE;
+      }
+      const sign = pullAmount > 0 ? 1 : -1;
+      const absPull = Math.min(Math.abs(pullAmount), MAX_PULL_DISTANCE);
+      const dampedPull = sign * Math.sqrt(absPull / MAX_PULL_DISTANCE) * MAX_PULL_DISTANCE;
+      currentPullOffset.current = dampedPull;
+      el.style.transform = `translateX(${dampedPull}px)`;
+      if (!isDragging) setIsDragging(true);
+    } else {
+      if (isPullingEdge.current) {
+        el.style.transform = "";
+        currentPullOffset.current = 0;
+        isPullingEdge.current = false;
+      }
+      if (Math.abs(walk) > 10) {
+        if (!isDragging) {
+          setIsDragging(true);
+          try {
+            el.setPointerCapture(e.pointerId);
+            currentPointerId.current = e.pointerId;
+          } catch (err) {
+          }
+        }
+        el.scrollLeft = intendedScroll;
+      }
+    }
+  }, [isDragging, endDrag, infinite, hasNextPage]);
+  const onClickCapture = (0, import_react.useCallback)((e) => {
+    if (isDragging) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [isDragging]);
+  (0, import_react.useEffect)(() => {
+    const handleWindowPointerUp = (e) => {
+      if (isDown.current) {
+        if (e.target !== ref.current && !ref.current?.contains(e.target)) {
+          endDrag();
+        }
+      }
+    };
+    window.addEventListener("pointerup", handleWindowPointerUp);
+    window.addEventListener("blur", endDrag);
+    return () => {
+      window.removeEventListener("pointerup", handleWindowPointerUp);
+      window.removeEventListener("blur", endDrag);
+    };
+  }, [endDrag]);
+  (0, import_react.useEffect)(() => cancelAnimation, [cancelAnimation]);
+  const adjustScroll = (0, import_react.useCallback)((delta) => {
+    scrollLeftStart.current += delta;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handleScroll = () => {
+      if (onEndReached) {
+        const scrollLeft = el.scrollLeft;
+        const scrollWidth = el.scrollWidth;
+        const clientWidth = el.clientWidth;
+        const distToEnd = scrollWidth - (scrollLeft + clientWidth);
+        const threshold = 2 * clientWidth;
+        if (distToEnd < threshold) {
+          const now = performance.now();
+          if (now - lastEndReachedTime.current > 1e3) {
+            onEndReached();
+            lastEndReachedTime.current = now;
+          }
+        }
+      }
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [onEndReached]);
+  (0, import_react.useEffect)(() => {
+    const el = ref.current;
+    if (!el || infinite) return;
+  }, [infinite]);
+  return {
+    ref,
+    isDragging,
+    cancelMomentum: () => cancelAnimation(true),
+    adjustScroll,
+    events: {
+      onPointerDown,
+      onPointerUp,
+      onPointerMove,
+      onLostPointerCapture: onPointerUp,
+      onClickCapture,
+      onDragStart: (e) => e.preventDefault()
+    }
+  };
+}
+
+// src/hooks/useLoadingState.ts
+var import_react2 = require("react");
+var seenResources = /* @__PURE__ */ new Set();
+function useLoadingState({
+  cacheKey,
+  skeletonDelay = 500,
+  fallbackTimeout = 3e3,
+  startReady = false
+} = {}) {
+  const wasCached = cacheKey ? seenResources.has(cacheKey) : false;
+  const [isReady, setIsReady] = (0, import_react2.useState)(startReady || wasCached);
+  const [showSkeleton, setShowSkeleton] = (0, import_react2.useState)(false);
+  const [isInstant] = (0, import_react2.useState)(wasCached);
+  const mountedRef = (0, import_react2.useRef)(true);
+  const readyFiredRef = (0, import_react2.useRef)(startReady || wasCached);
+  const skeletonTimerRef = (0, import_react2.useRef)(null);
+  const fallbackTimerRef = (0, import_react2.useRef)(null);
+  const markReady = (0, import_react2.useCallback)(() => {
+    if (readyFiredRef.current) return;
+    readyFiredRef.current = true;
+    if (skeletonTimerRef.current) clearTimeout(skeletonTimerRef.current);
+    if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
+    if (cacheKey) seenResources.add(cacheKey);
+    if (mountedRef.current) {
+      setIsReady(true);
+      setShowSkeleton(false);
+    }
+  }, [cacheKey]);
+  (0, import_react2.useEffect)(() => {
+    mountedRef.current = true;
+    if (readyFiredRef.current) return;
+    skeletonTimerRef.current = setTimeout(() => {
+      if (mountedRef.current && !readyFiredRef.current) {
+        setShowSkeleton(true);
+      }
+    }, skeletonDelay);
+    fallbackTimerRef.current = setTimeout(() => {
+      if (mountedRef.current && !readyFiredRef.current) {
+        readyFiredRef.current = true;
+        if (cacheKey) seenResources.add(cacheKey);
+        setIsReady(true);
+        setShowSkeleton(false);
+      }
+    }, fallbackTimeout);
+    return () => {
+      mountedRef.current = false;
+      if (skeletonTimerRef.current) clearTimeout(skeletonTimerRef.current);
+      if (fallbackTimerRef.current) clearTimeout(fallbackTimerRef.current);
+    };
+  }, [cacheKey, skeletonDelay, fallbackTimeout]);
+  return { isReady, showSkeleton, isInstant, markReady };
+}
+function clearLoadingStateCache() {
+  seenResources.clear();
+}
+
+// src/hooks/useCarouselTeleport.ts
+var import_react3 = require("react");
+function useCarouselTeleport({
+  containerRef,
+  infinite,
+  itemsCount,
+  cardWidth,
+  gap,
+  bufferBeforeCount,
+  applyVisuals,
+  adjustScroll,
+  preTeleportClearDelayMs,
+  coordinator,
+  logger
+}) {
+  const isTouchInteraction = (0, import_react3.useRef)(false);
+  const scrollEndListenerRef = (0, import_react3.useRef)(null);
+  const coordinatorRef = (0, import_react3.useRef)(coordinator);
+  const applyVisualsRef = (0, import_react3.useRef)(applyVisuals);
+  const adjustScrollRef = (0, import_react3.useRef)(adjustScroll);
+  const loggerRef = (0, import_react3.useRef)(logger);
+  coordinatorRef.current = coordinator;
+  applyVisualsRef.current = applyVisuals;
+  adjustScrollRef.current = adjustScroll;
+  loggerRef.current = logger;
+  (0, import_react3.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el || !infinite || itemsCount === 0) return;
+    let stride = cardWidth + gap;
+    if (infinite && el.children.length > 1) {
+      const firstChild = el.children[0];
+      const secondChild = el.children[1];
+      const domStride = secondChild.offsetLeft - firstChild.offsetLeft;
+      if (domStride > 0 && Math.abs(domStride - stride) > 1) {
+        loggerRef.current?.log("TELEPORT", `Using DOM stride for teleport accuracy`, { calculated: stride, measured: domStride });
+        stride = domStride;
+      }
+    }
+    const originalSetWidth = itemsCount * stride;
+    const bufferBeforeWidth = bufferBeforeCount * stride;
+    let rafId = null;
+    const performTeleport = (source) => {
+      const ctx = coordinatorRef.current.getContext();
+      if (ctx.isTeleporting) {
+        loggerRef.current?.log("TELEPORT", `Teleport in progress (${source})`);
+        return false;
+      }
+      if (ctx.pendingTarget !== null && source === "scroll") {
+        loggerRef.current?.log("TELEPORT", `Pending target exists (${source})`, { target: ctx.pendingTarget });
+        return false;
+      }
+      const currentScroll = el.scrollLeft;
+      if (currentScroll >= bufferBeforeWidth + originalSetWidth) {
+        const overshoot = currentScroll - bufferBeforeWidth;
+        const setsPassed = Math.floor(overshoot / originalSetWidth);
+        if (setsPassed > 0) {
+          const adjust = setsPassed * originalSetWidth;
+          loggerRef.current?.log("TELEPORT", `\u26A1 BACKWARD (${source})`, {
+            from: currentScroll.toFixed(0),
+            to: (currentScroll - adjust).toFixed(0)
+          });
+          coordinatorRef.current.transition({ type: "SET_TELEPORTING", value: true });
+          if (!isTouchInteraction.current) {
+            el.scrollTo({ left: el.scrollLeft, behavior: "auto" });
+          }
+          const newPos = currentScroll - adjust;
+          el.scrollLeft = newPos;
+          if (!isTouchInteraction.current) {
+            applyVisualsRef.current(el, newPos);
+          } else {
+            requestAnimationFrame(() => applyVisualsRef.current(el, newPos));
+          }
+          adjustScrollRef.current(-adjust);
+          coordinatorRef.current.transition({ type: "SET_TELEPORTING", value: false });
+          coordinatorRef.current.transition({ type: "END_TELEPORT" });
+          return true;
+        }
+      } else if (currentScroll < bufferBeforeWidth) {
+        loggerRef.current?.log("TELEPORT", `\u26A1 FORWARD (${source})`, {
+          from: currentScroll.toFixed(0),
+          to: (currentScroll + originalSetWidth).toFixed(0)
+        });
+        coordinatorRef.current.transition({ type: "SET_TELEPORTING", value: true });
+        if (!isTouchInteraction.current) {
+          el.scrollTo({ left: el.scrollLeft, behavior: "auto" });
+        }
+        const newPos = currentScroll + originalSetWidth;
+        el.scrollLeft = newPos;
+        if (!isTouchInteraction.current) {
+          applyVisualsRef.current(el, newPos);
+        } else {
+          requestAnimationFrame(() => applyVisualsRef.current(el, newPos));
+        }
+        adjustScrollRef.current(originalSetWidth);
+        coordinatorRef.current.transition({ type: "SET_TELEPORTING", value: false });
+        coordinatorRef.current.transition({ type: "END_TELEPORT" });
+        return true;
+      }
+      return false;
+    };
+    const handleScroll = () => {
+      if (rafId) {
+        return;
+      }
+      rafId = requestAnimationFrame(() => {
+        const rafStartTime = performance.now();
+        applyVisualsRef.current(el);
+        const ctx = coordinatorRef.current.getContext();
+        if (ctx.isTeleporting || ctx.isPreTeleporting) {
+          rafId = null;
+          return;
+        }
+        if (!isTouchInteraction.current) {
+          performTeleport("scroll");
+        } else {
+          loggerRef.current?.log("TELEPORT", "Touch drag active: skipping scroll-teleport");
+        }
+        rafId = null;
+        const rafDuration = performance.now() - rafStartTime;
+        if (rafDuration > 5) {
+          loggerRef.current?.log("TELEPORT", `RAF took ${rafDuration.toFixed(1)}ms`);
+        }
+      });
+    };
+    const handleScrollEnd = () => {
+      if (!isTouchInteraction.current) return;
+      if (coordinatorRef.current.getContext().pendingTarget !== null) return;
+      const currentScroll = el.scrollLeft;
+      let paddingOffset = 0;
+      if (el.children.length > 0) {
+        paddingOffset = el.children[0].offsetLeft;
+      }
+      const rawIndex = (currentScroll - paddingOffset) / stride;
+      const snapSkew = Math.abs(rawIndex - Math.round(rawIndex));
+      if (snapSkew > 0.05) {
+        loggerRef.current?.log("TELEPORT", "Skipping teleport - mid-snap detected", {
+          rawIndex: rawIndex.toFixed(3),
+          snapSkew: snapSkew.toFixed(3)
+        });
+        return;
+      }
+      loggerRef.current?.log("TELEPORT", "Mobile scroll settled, checking teleport");
+      performTeleport("scrollend");
+    };
+    const handlePointerDown = (e) => {
+      if (e.pointerType === "touch") {
+        if (!isTouchInteraction.current) loggerRef.current?.log("TELEPORT", "Switched to TOUCH");
+        isTouchInteraction.current = true;
+        const SAFETY_THRESHOLD = 500;
+        const maxScroll = el.scrollWidth - el.clientWidth;
+        const isDangerouslyCloseToStart = el.scrollLeft < SAFETY_THRESHOLD;
+        const isDangerouslyCloseToEnd = el.scrollLeft > maxScroll - SAFETY_THRESHOLD;
+        if (isDangerouslyCloseToStart || isDangerouslyCloseToEnd) {
+          loggerRef.current?.log("TELEPORT", "\u26A0\uFE0F SAFETY VALVE TRIGGERED: Teleporting during touch to prevent hitting wall");
+          const didTeleport = performTeleport("pointerdown");
+          if (didTeleport) {
+            loggerRef.current?.log("TELEPORT", "Catch & reset teleport performed (Safety Valve)");
+          }
+        } else {
+        }
+      } else {
+        if (isTouchInteraction.current) loggerRef.current?.log("TELEPORT", "Switched to MOUSE/PEN");
+        isTouchInteraction.current = false;
+      }
+    };
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    el.addEventListener("scrollend", handleScrollEnd);
+    el.addEventListener("pointerdown", handlePointerDown, { passive: true });
+    loggerRef.current?.log("TELEPORT", "Hybrid teleport handlers attached", {
+      stride,
+      originalSetWidth,
+      bufferBeforeWidth,
+      itemsCount
+    });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+      el.removeEventListener("scrollend", handleScrollEnd);
+      el.removeEventListener("pointerdown", handlePointerDown);
+      if (rafId) cancelAnimationFrame(rafId);
+      loggerRef.current?.log("TELEPORT", "Scroll handlers removed");
+    };
+  }, [containerRef, infinite, itemsCount, cardWidth, gap, bufferBeforeCount]);
+  const preTeleport = (targetScroll) => {
+    const el = containerRef.current;
+    if (!el || !infinite || itemsCount === 0) return targetScroll;
+    let stride = cardWidth + gap;
+    if (el.children.length > 1) {
+      const firstChild = el.children[0];
+      const secondChild = el.children[1];
+      const domStride = secondChild.offsetLeft - firstChild.offsetLeft;
+      if (domStride > 0 && Math.abs(domStride - stride) > 1) {
+        logger?.log("TELEPORT", "preTeleport using DOM stride", { calculated: stride, measured: domStride });
+        stride = domStride;
+      }
+    }
+    const originalSetWidth = itemsCount * stride;
+    const bufferBeforeWidth = bufferBeforeCount * stride;
+    const needsLeftPreTeleport = targetScroll < bufferBeforeWidth;
+    const needsRightPreTeleport = targetScroll >= bufferBeforeWidth + originalSetWidth;
+    if (!needsLeftPreTeleport && !needsRightPreTeleport) {
+      logger?.log("TELEPORT", "No pre-teleport needed", { targetScroll });
+      return targetScroll;
+    }
+    const direction = needsLeftPreTeleport ? "LEFT" : "RIGHT";
+    const offset = needsLeftPreTeleport ? originalSetWidth : -originalSetWidth;
+    const preTeleportStart = performance.now();
+    logger?.log("TELEPORT", `\u26A1 ${direction} PRE-TELEPORT START`, {
+      oldTarget: targetScroll.toFixed(1),
+      newTarget: (targetScroll + offset).toFixed(1)
+    });
+    const adjustedTarget = targetScroll + offset;
+    coordinator.transition({ type: "SET_PRE_TELEPORTING", value: true });
+    coordinator.transition({ type: "START_PRE_TELEPORT" });
+    logger?.log("TELEPORT", "isPreTeleporting = true (via coordinator)");
+    if (scrollEndListenerRef.current) {
+      logger?.log("TELEPORT", "Removing old scrollend listener before stop");
+      el.removeEventListener("scrollend", scrollEndListenerRef.current);
+      scrollEndListenerRef.current = null;
+    }
+    logger?.log("TELEPORT", "Stopping ongoing smooth scroll...");
+    el.scrollTo({ left: el.scrollLeft, behavior: "auto" });
+    coordinator.transition({ type: "SET_TELEPORTING", value: true });
+    const oldScrollLeft = el.scrollLeft;
+    const newScrollLeft = oldScrollLeft + offset;
+    el.scrollLeft = newScrollLeft;
+    logger?.log("TELEPORT", `Instant teleport: ${oldScrollLeft.toFixed(1)} \u2192 ${el.scrollLeft.toFixed(1)}`);
+    logger?.log("TELEPORT", "Applying visuals after teleport...");
+    requestAnimationFrame(() => applyVisuals(el, newScrollLeft));
+    coordinator.transition({ type: "SET_TELEPORTING", value: false });
+    coordinator.transition({ type: "SET_PENDING_TARGET", target: adjustedTarget });
+    setTimeout(() => {
+      coordinator.transition({ type: "SET_PRE_TELEPORTING", value: false });
+      logger?.log("TELEPORT", `isPreTeleporting = false (after ${preTeleportClearDelayMs}ms)`);
+    }, preTeleportClearDelayMs);
+    logger?.log("TELEPORT", `\u26A1 ${direction} PRE-TELEPORT END`, {
+      duration: `${(performance.now() - preTeleportStart).toFixed(1)}ms`
+    });
+    return adjustedTarget;
+  };
+  return {
+    /** Ref to track if current interaction is touch-based */
+    isTouchInteraction,
+    /** Proactive pre-teleport for arrow navigation */
+    preTeleport
+  };
+}
+
+// src/hooks/useCarouselVisuals.ts
+var import_react4 = require("react");
+
+// src/config.ts
+var VISUAL_CONFIG = {
+  MAX_DIST_MOBILE: 320,
+  MAX_DIST_TABLET: 400,
+  MAX_DIST_DESKTOP: 500,
+  BASE_SCALE_MOBILE: 0.8,
+  BASE_SCALE_TABLET: 0.82,
+  BASE_SCALE_DESKTOP: 0.85,
+  VIEW_BUFFER: 200,
+  CENTER_THRESHOLD: 10,
+  DISABLE_DYNAMIC_SHADOW: true
+};
+var TIMING_CONFIG = {
+  BOUNCE_DISTANCE_PX: 30,
+  BOUNCE_PHASE1_MS: 150,
+  BOUNCE_PHASE2_MS: 450,
+  // How long to wait before clearing the pre-teleport flag
+  PRE_TELEPORT_CLEAR_DELAY_MS: 100,
+  SCROLL_IDLE_FALLBACK_MS: 300,
+  SCROLL_DEBOUNCE_FALLBACK_MS: 50,
+  SNAP_RESTORE_DELAY_MS: 100,
+  RESIZE_DEBOUNCE_MS: 100,
+  SCROLL_PERSIST_DEBOUNCE_MS: 150,
+  // Milliseconds to wait for scroll to stop before considering it complete (fallback)
+  SCROLL_COMPLETION_DEBOUNCE_MS: 150,
+  // Tolerance for target arrival check (ratio of stride)
+  SCROLL_TARGET_TOLERANCE_RATIO: 0.5
+};
+var LAYOUT_CONFIG = {
+  GAP_MOBILE: 12,
+  GAP_DESKTOP: 16,
+  GAP_BREAKPOINT: 768,
+  MIN_BUFFER_COUNT: 50,
+  EDGE_TOLERANCE_START: 20,
+  EDGE_TOLERANCE_END: 5,
+  // Initial fallback values (should match --carousel-item-width-default in tailwind.css)
+  INITIAL_CARD_WIDTH: 180,
+  INITIAL_GAP: 16
+};
+var DEBUG_CONFIG = {
+  // 🛡️ SAFETY: This defaults to false in production. 
+  // Even if set to true manually, the logger has a hard guard against console output in production.
+  ENABLED: false,
+  HISTORY_SIZE: 100,
+  // Enable specific channels to debug features
+  // Options: 'ALL', 'TELEPORT', 'VISUALS', 'LAYOUT', 'INIT', 'CACHE', 'COORDINATOR', 'NAV', 'INTERACT'
+  CHANNELS: {
+    ALL: false,
+    TELEPORT: false,
+    VISUALS: false,
+    LAYOUT: false,
+    INIT: false,
+    CACHE: false,
+    COORDINATOR: false,
+    NAV: false,
+    INTERACT: false,
+    PERF: false
+  }
+};
+var FEATURE_FLAGS = {
+  USE_RAF_FRAME_SEPARATION: true
+};
+
+// src/hooks/useCarouselVisuals.ts
+function useCarouselVisuals({
+  layout,
+  itemsCount,
+  bufferBeforeCount,
+  disableOpacityEffect,
+  disableScaleEffect,
+  logger
+}) {
+  const childrenPositions = (0, import_react4.useRef)([]);
+  const isCacheDirty = (0, import_react4.useRef)(true);
+  const containerWidthRef = (0, import_react4.useRef)(0);
+  const isContainerWidthDirty = (0, import_react4.useRef)(true);
+  (0, import_react4.useEffect)(() => {
+    isCacheDirty.current = true;
+    isContainerWidthDirty.current = true;
+    logger?.log("VISUALS", "Marked cache dirty", { itemsCount, bufferBeforeCount });
+  }, [itemsCount, bufferBeforeCount, logger]);
+  const updateCache = (0, import_react4.useCallback)((el) => {
+    childrenPositions.current = Array.from(el.children).map((child) => {
+      const node = child;
+      return {
+        left: node.offsetLeft,
+        width: node.offsetWidth
+      };
+    });
+    logger?.log("VISUALS", "Updated positions cache", { count: childrenPositions.current.length });
+  }, [logger]);
+  const applyVisuals = (0, import_react4.useCallback)((el, overrideScrollLeft) => {
+    const currentScrollLeft = overrideScrollLeft ?? el.scrollLeft;
+    if (isContainerWidthDirty.current || containerWidthRef.current === 0) {
+      containerWidthRef.current = el.clientWidth;
+      isContainerWidthDirty.current = false;
+    }
+    const containerCenter = currentScrollLeft + containerWidthRef.current / 2;
+    if (childrenPositions.current.length === 0) {
+      logger?.log("VISUALS", "Skipping: positions cache empty");
+      return;
+    }
+    const positions = childrenPositions.current;
+    if (disableOpacityEffect && disableScaleEffect) return;
+    const width = window.innerWidth;
+    const isMobile = width < 640;
+    const isTablet = width < 1024;
+    const maxDist = isMobile ? VISUAL_CONFIG.MAX_DIST_MOBILE : isTablet ? VISUAL_CONFIG.MAX_DIST_TABLET : VISUAL_CONFIG.MAX_DIST_DESKTOP;
+    const baseScale = isMobile ? VISUAL_CONFIG.BASE_SCALE_MOBILE : isTablet ? VISUAL_CONFIG.BASE_SCALE_TABLET : VISUAL_CONFIG.BASE_SCALE_DESKTOP;
+    const scaleRange = 1 - baseScale;
+    const viewStart = currentScrollLeft - VISUAL_CONFIG.VIEW_BUFFER;
+    const viewEnd = currentScrollLeft + containerWidthRef.current + VISUAL_CONFIG.VIEW_BUFFER;
+    const count = el.children.length;
+    const stride = layout.cardWidth + layout.gap;
+    const firstItemLeft = positions[0]?.left ?? 0;
+    let startIndex = 0;
+    let endIndex = count;
+    if (stride > 0) {
+      startIndex = Math.floor((viewStart - layout.cardWidth - firstItemLeft) / stride) - 4;
+      startIndex = Math.max(0, startIndex);
+      endIndex = Math.ceil((viewEnd - firstItemLeft) / stride) + 4;
+      endIndex = Math.min(count, endIndex);
+    }
+    const loopStart = performance.now();
+    let processedCount = 0;
+    for (let i = startIndex; i < endIndex; i++) {
+      const child = el.children[i];
+      const pos = positions[i];
+      if (!pos) continue;
+      if (pos.left + pos.width < viewStart || pos.left > viewEnd) {
+        continue;
+      }
+      processedCount++;
+      const childCenter = pos.left + pos.width / 2;
+      const dist = Math.abs(containerCenter - childCenter);
+      const normDist = Math.min(dist / maxDist, 1);
+      const factor = 1 - normDist;
+      const easeFactor = 1 - Math.pow(1 - factor, 3);
+      const opacity = 0.5 + 0.5 * easeFactor;
+      if (!disableOpacityEffect) {
+        child.style.opacity = `${opacity}`;
+        if (dist < VISUAL_CONFIG.CENTER_THRESHOLD) child.style.opacity = "1";
+      }
+      const zIndex = Math.round(easeFactor * 100);
+      child.style.zIndex = `${zIndex}`;
+      if (!disableScaleEffect && !VISUAL_CONFIG.DISABLE_DYNAMIC_SHADOW) {
+        const shadowOpacity = 0.12 * easeFactor;
+        child.style.boxShadow = `0 10px 20px -5px rgba(0, 0, 0, ${shadowOpacity})`;
+      }
+      if (!disableScaleEffect) {
+        const scale = baseScale + scaleRange * easeFactor;
+        child.style.transform = `scale(${scale})`;
+      }
+    }
+    const loopDuration = performance.now() - loopStart;
+    if (loopDuration > 1) {
+      logger?.log("PERF", `Visuals Loop: ${loopDuration.toFixed(2)}ms`, {
+        processed: processedCount,
+        total: count,
+        range: `${startIndex}-${endIndex}`
+      });
+    }
+  }, [disableOpacityEffect, disableScaleEffect, logger, layout]);
+  return {
+    /** Position cache for all children */
+    childrenPositions,
+    /** Whether the cache needs to be rebuilt */
+    isCacheDirty,
+    /** Container width cache ref */
+    containerWidthRef,
+    /** Whether container width needs to be remeasured */
+    isContainerWidthDirty,
+    /** Update the position cache */
+    updateCache,
+    /** Apply visual effects to visible items */
+    applyVisuals
+  };
+}
+
+// src/hooks/useCarouselPersistence.ts
+var import_react5 = require("react");
+function useCarouselPersistence({
+  persistKey,
+  debounceMs = 150
+} = {}) {
+  const debounceTimerRef = (0, import_react5.useRef)(null);
+  const lastSavedRef = (0, import_react5.useRef)(null);
+  const storageKey = persistKey ? `carousel-scroll-${persistKey}` : null;
+  const getSavedPosition = (0, import_react5.useCallback)(() => {
+    if (!storageKey) return null;
+    try {
+      const stored = sessionStorage.getItem(storageKey);
+      if (stored === null) return null;
+      const parsed = parseInt(stored, 10);
+      return Number.isFinite(parsed) ? parsed : null;
+    } catch {
+      return null;
+    }
+  }, [storageKey]);
+  const savePositionImmediate = (0, import_react5.useCallback)((scrollLeft) => {
+    if (!storageKey) return;
+    if (!Number.isFinite(scrollLeft)) return;
+    if (lastSavedRef.current === scrollLeft) return;
+    lastSavedRef.current = scrollLeft;
+    try {
+      sessionStorage.setItem(storageKey, String(Math.round(scrollLeft)));
+    } catch {
+    }
+  }, [storageKey]);
+  const savePosition = (0, import_react5.useCallback)((scrollLeft) => {
+    if (!storageKey) return;
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      savePositionImmediate(scrollLeft);
+    }, debounceMs);
+  }, [storageKey, debounceMs, savePositionImmediate]);
+  const clearPosition = (0, import_react5.useCallback)(() => {
+    if (!storageKey) return;
+    try {
+      sessionStorage.removeItem(storageKey);
+      lastSavedRef.current = null;
+    } catch {
+    }
+  }, [storageKey]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    getSavedPosition,
+    savePosition,
+    savePositionImmediate,
+    clearPosition
+  };
+}
+
+// src/hooks/useCarouselLayout.ts
+var import_react6 = require("react");
+function measureLayoutFromElement(container) {
+  const firstCard = container.firstElementChild;
+  if (!firstCard) {
+    return null;
+  }
+  const cardWidth = firstCard.getBoundingClientRect().width;
+  const gap = window.innerWidth < LAYOUT_CONFIG.GAP_BREAKPOINT ? LAYOUT_CONFIG.GAP_MOBILE : LAYOUT_CONFIG.GAP_DESKTOP;
+  let domStride = cardWidth + gap;
+  const secondCard = container.children[1];
+  if (secondCard) {
+    domStride = secondCard.offsetLeft - firstCard.offsetLeft;
+  }
+  return { cardWidth, gap, domStride };
+}
+function useCarouselLayout({
+  containerRef,
+  onLayoutChange,
+  resizeDebounceMs = TIMING_CONFIG.RESIZE_DEBOUNCE_MS,
+  logger
+}) {
+  const [layout, setLayout] = (0, import_react6.useState)({
+    cardWidth: LAYOUT_CONFIG.INITIAL_CARD_WIDTH,
+    gap: LAYOUT_CONFIG.INITIAL_GAP,
+    domStride: LAYOUT_CONFIG.INITIAL_CARD_WIDTH + LAYOUT_CONFIG.INITIAL_GAP
+  });
+  const [resizeCount, setResizeCount] = (0, import_react6.useState)(0);
+  const isLayoutDirty = (0, import_react6.useRef)(true);
+  const onLayoutChangeRef = (0, import_react6.useRef)(onLayoutChange);
+  onLayoutChangeRef.current = onLayoutChange;
+  const loggerRef = (0, import_react6.useRef)(logger);
+  loggerRef.current = logger;
+  const stride = layout.cardWidth + layout.gap;
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 640;
+  const isTablet = typeof window !== "undefined" && window.innerWidth >= 640 && window.innerWidth < 1024;
+  const measureLayout = (0, import_react6.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) {
+      logger?.log("LAYOUT", "No container element");
+      return layout;
+    }
+    const measured = measureLayoutFromElement(el);
+    if (measured === null) {
+      logger?.log("LAYOUT", "Children not rendered, keeping current layout");
+      return layout;
+    }
+    logger?.log("LAYOUT", "Layout measured", measured);
+    setLayout((prev) => {
+      if (prev.cardWidth === measured.cardWidth && prev.gap === measured.gap && prev.domStride === measured.domStride) {
+        logger?.log("LAYOUT", "Layout unchanged, skipping update");
+        return prev;
+      }
+      logger?.log("LAYOUT", "Layout changed, updating state", {
+        old: prev,
+        new: measured
+      });
+      if (onLayoutChangeRef.current) {
+        onLayoutChangeRef.current(measured);
+      }
+      return measured;
+    });
+    isLayoutDirty.current = false;
+    return measured;
+  }, [containerRef, layout, logger]);
+  const invalidateLayout = (0, import_react6.useCallback)(() => {
+    isLayoutDirty.current = true;
+    logger?.log("LAYOUT", "Layout marked as dirty");
+  }, [logger]);
+  const measureLayoutRef = (0, import_react6.useRef)(measureLayout);
+  measureLayoutRef.current = measureLayout;
+  (0, import_react6.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let timeoutId;
+    let isFirstObservation = true;
+    const ro = new ResizeObserver(() => {
+      if (isFirstObservation) {
+        isFirstObservation = false;
+        loggerRef.current?.log("LAYOUT", "First observation - measuring immediately");
+        measureLayoutRef.current();
+        setResizeCount((c) => c + 1);
+        return;
+      }
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        loggerRef.current?.log("LAYOUT", "Container resized, remeasuring layout");
+        measureLayoutRef.current();
+        setResizeCount((c) => c + 1);
+      }, resizeDebounceMs);
+    });
+    ro.observe(el);
+    loggerRef.current?.log("LAYOUT", "ResizeObserver attached");
+    return () => {
+      ro.disconnect();
+      clearTimeout(timeoutId);
+      loggerRef.current?.log("LAYOUT", "ResizeObserver disconnected");
+    };
+  }, [containerRef, resizeDebounceMs]);
+  return {
+    layout,
+    stride,
+    isMobile,
+    isTablet,
+    measureLayout,
+    invalidateLayout,
+    resizeCount
+  };
+}
+
+// src/hooks/useCarouselNavigation.ts
+var import_react8 = require("react");
+
+// src/hooks/useScrollCompletion.ts
+var import_react7 = require("react");
+function useScrollCompletion({
+  ref,
+  onComplete,
+  listenerRef,
+  timeoutRef
+}) {
+  const internalListenerRef = (0, import_react7.useRef)(null);
+  const activeListenerRef = listenerRef || internalListenerRef;
+  const internalTimeoutRef = (0, import_react7.useRef)(null);
+  const activeTimeoutRef = timeoutRef || internalTimeoutRef;
+  const supportsScrollEnd = typeof window !== "undefined" && "onscrollend" in window;
+  const waitForScrollCompletion = (0, import_react7.useCallback)((timeoutDuration = TIMING_CONFIG.SCROLL_IDLE_FALLBACK_MS) => {
+    const el = ref.current;
+    if (!el) return;
+    if (activeListenerRef.current) {
+      el.removeEventListener("scrollend", activeListenerRef.current);
+      el.removeEventListener("scroll", activeListenerRef.current);
+      activeListenerRef.current = null;
+    }
+    if (activeTimeoutRef.current) {
+      clearTimeout(activeTimeoutRef.current);
+      activeTimeoutRef.current = null;
+    }
+    if (supportsScrollEnd) {
+      const listener = () => {
+        activeListenerRef.current = null;
+        onComplete("scrollend");
+      };
+      activeListenerRef.current = listener;
+      el.addEventListener("scrollend", listener, { once: true });
+    } else {
+      let debounceTimer;
+      const debounceListener = () => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          if (activeListenerRef.current) {
+            el.removeEventListener("scroll", activeListenerRef.current);
+            activeListenerRef.current = null;
+          }
+          if (activeTimeoutRef.current) {
+            clearTimeout(activeTimeoutRef.current);
+            activeTimeoutRef.current = null;
+          }
+          onComplete("debounce");
+        }, TIMING_CONFIG.SCROLL_DEBOUNCE_FALLBACK_MS);
+      };
+      activeListenerRef.current = debounceListener;
+      el.addEventListener("scroll", debounceListener, { passive: true });
+      activeTimeoutRef.current = setTimeout(() => {
+        if (activeListenerRef.current) {
+          el.removeEventListener("scroll", activeListenerRef.current);
+          activeListenerRef.current = null;
+        }
+        onComplete("safety-timeout");
+      }, timeoutDuration);
+    }
+  }, [ref, onComplete, supportsScrollEnd]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      const el = ref.current;
+      if (el && activeListenerRef.current) {
+        el.removeEventListener("scrollend", activeListenerRef.current);
+        el.removeEventListener("scroll", activeListenerRef.current);
+      }
+      if (activeTimeoutRef.current) {
+        clearTimeout(activeTimeoutRef.current);
+      }
+    };
+  }, [ref]);
+  return {
+    waitForScrollCompletion
+  };
+}
+
+// src/hooks/useCarouselNavigation.ts
+function useCarouselNavigation({
+  containerRef,
+  infinite,
+  layout,
+  cancelMomentum,
+  preTeleport,
+  onNavigate,
+  coordinator,
+  logger
+}) {
+  const scrollEndListenerRef = (0, import_react8.useRef)(null);
+  const scrollIdleTimeoutRef = (0, import_react8.useRef)(null);
+  const snapTimeoutRef = (0, import_react8.useRef)(null);
+  const debugClickCountRef = (0, import_react8.useRef)(0);
+  const onAnimationComplete = (0, import_react8.useCallback)((source) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ctx = coordinator.getContext();
+    if (ctx.pendingTarget === null && source !== "safety-timeout") {
+      logger?.log("NAV", `#${debugClickCountRef.current} Arrow nav ${source} - Skipping cleanup (Interrupted)`);
+      return;
+    }
+    if (ctx.isPreTeleporting) return;
+    const currentPos = el.scrollLeft;
+    const targetPos = ctx.pendingTarget;
+    const stride = layout.cardWidth + layout.gap;
+    if (targetPos !== null) {
+      const distanceToTarget = Math.abs(currentPos - targetPos);
+      if (distanceToTarget > stride * TIMING_CONFIG.SCROLL_TARGET_TOLERANCE_RATIO) {
+        logger?.log("NAV", `#${debugClickCountRef.current} Ignoring premature ${source} - not at target yet`, {
+          currentPos: currentPos.toFixed(1),
+          targetPos: targetPos.toFixed(1),
+          distanceToTarget: distanceToTarget.toFixed(1)
+        });
+        return;
+      }
+    }
+    logger?.log("NAV", `#${debugClickCountRef.current} Arrow nav complete via ${source}`);
+    scrollEndListenerRef.current = null;
+    coordinator.transition({ type: "SCROLL_COMPLETE" });
+    if (infinite && el) el.style.scrollSnapType = "";
+  }, [containerRef, coordinator, infinite, layout.cardWidth, layout.gap, logger]);
+  const { waitForScrollCompletion } = useScrollCompletion({
+    ref: containerRef,
+    listenerRef: scrollEndListenerRef,
+    timeoutRef: scrollIdleTimeoutRef,
+    onComplete: onAnimationComplete
+  });
+  const handleScrollNav = (0, import_react8.useCallback)((direction) => {
+    const clickStartTime = performance.now();
+    debugClickCountRef.current++;
+    const thisClickId = debugClickCountRef.current;
+    logger?.log("NAV", `\u2501\u2501\u2501 Arrow Click #${thisClickId} START \u2501\u2501\u2501`, {
+      direction: direction === 1 ? "RIGHT \u2192" : "\u2190 LEFT",
+      timestamp: clickStartTime.toFixed(1)
+    });
+    const el = containerRef.current;
+    if (!el) {
+      logger?.log("NAV", `#${thisClickId} ABORT: No element ref`);
+      return;
+    }
+    const ctx = coordinator.getContext();
+    if (coordinator.getPhase() === "BOUNCING") {
+      logger?.log("NAV", `#${thisClickId} ABORT: Currently bouncing`);
+      return;
+    }
+    const perfStart = performance.now();
+    const stride = layout.cardWidth + layout.gap;
+    const currentScroll = el.scrollLeft;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    const readTime = performance.now() - perfStart;
+    logger?.log("PERF", `Layout Read: ${readTime.toFixed(2)}ms`, {
+      safe: readTime < 1,
+      threshold: "1.0ms"
+    });
+    logger?.log("NAV", `#${thisClickId} Cancelling momentum...`);
+    cancelMomentum();
+    logger?.log("NAV", `#${thisClickId} Current state`, {
+      currentScroll: currentScroll.toFixed(1),
+      stride,
+      maxScroll: maxScroll.toFixed(1),
+      infinite
+    });
+    logger?.log("NAV", `#${thisClickId} Current state`, {
+      currentScroll: currentScroll.toFixed(1),
+      stride,
+      maxScroll: maxScroll.toFixed(1),
+      infinite
+    });
+    if (!infinite) {
+      const isAtStart = currentScroll <= LAYOUT_CONFIG.EDGE_TOLERANCE_START;
+      const isAtEnd = currentScroll >= maxScroll - LAYOUT_CONFIG.EDGE_TOLERANCE_END;
+      if (direction === -1 && isAtStart || direction === 1 && isAtEnd) {
+        logger?.log("NAV", `#${thisClickId} Edge reached, bouncing`, { isAtStart, isAtEnd });
+        const bounceAmount = direction * TIMING_CONFIG.BOUNCE_DISTANCE_PX;
+        const bounceTimeoutId = setTimeout(() => {
+          el.style.transition = "";
+          el.style.transform = "";
+          coordinator.transition({ type: "END_BOUNCE" });
+          logger?.log("NAV", `#${thisClickId} Bounce complete`);
+        }, TIMING_CONFIG.BOUNCE_PHASE2_MS);
+        coordinator.transition({ type: "START_BOUNCE", timeoutId: bounceTimeoutId });
+        el.style.transition = "transform 0.15s ease-out";
+        el.style.transform = `translateX(${-bounceAmount}px)`;
+        setTimeout(() => {
+          el.style.transition = "transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)";
+          el.style.transform = "translateX(0)";
+        }, TIMING_CONFIG.BOUNCE_PHASE1_MS);
+        return;
+      }
+    }
+    if (infinite) {
+      el.style.scrollSnapType = "none";
+      if (snapTimeoutRef.current) {
+        logger?.log("NAV", `#${thisClickId} Clearing previous snap timeout`);
+        clearTimeout(snapTimeoutRef.current);
+      }
+    }
+    let targetScroll;
+    let activeStride = stride;
+    let paddingOffset = 0;
+    if (infinite && el.children.length > 0) {
+      const firstChild = el.children[0];
+      paddingOffset = firstChild.offsetLeft;
+      if (el.children.length > 1) {
+        const secondChild = el.children[1];
+        const domStride = secondChild.offsetLeft - firstChild.offsetLeft;
+        if (domStride > 0 && Math.abs(domStride - stride) > 1) {
+          activeStride = domStride;
+        }
+      }
+    }
+    const pendingTarget = ctx.pendingTarget;
+    if (pendingTarget !== null) {
+      const previousTarget = pendingTarget;
+      if (scrollEndListenerRef.current) {
+        el.removeEventListener("scrollend", scrollEndListenerRef.current);
+        el.removeEventListener("scroll", scrollEndListenerRef.current);
+        scrollEndListenerRef.current = null;
+        logger?.log("NAV", `#${thisClickId} Removed old scrollend listener before catch-up`);
+      }
+      el.scrollTo({ left: previousTarget, behavior: "auto" });
+      targetScroll = previousTarget + direction * activeStride;
+      logger?.log("NAV", `#${thisClickId} Mid-animation: Caught up to ${previousTarget}, now targeting`, {
+        caughtUpTo: previousTarget,
+        direction,
+        activeStride,
+        targetScroll: targetScroll.toFixed(1)
+      });
+    } else {
+      const currentIndex = Math.round(currentScroll / activeStride);
+      const nextIndex = currentIndex + direction;
+      let domTargetFound = false;
+      if (infinite && el.children[nextIndex]) {
+        const targetNode = el.children[nextIndex];
+        targetScroll = targetNode.offsetLeft - paddingOffset;
+        domTargetFound = true;
+      } else {
+        targetScroll = paddingOffset + nextIndex * activeStride;
+      }
+      logger?.log("NAV", `#${thisClickId} Idle target calculation`, {
+        currentIndex,
+        nextIndex,
+        direction,
+        paddingOffset,
+        activeStride,
+        method: domTargetFound ? "DOM_EXACT" : "MATH_APPROX",
+        targetScroll: targetScroll.toFixed(1)
+      });
+    }
+    if (infinite && preTeleport) {
+      targetScroll = preTeleport(targetScroll);
+    }
+    coordinator.transition({ type: "ARROW_CLICK", direction, targetScroll });
+    logger?.log("NAV", `#${thisClickId} pendingScrollTarget = ${targetScroll.toFixed(1)}`);
+    if (onNavigate) {
+      onNavigate(targetScroll);
+    }
+    logger?.log("NAV", `#${thisClickId} \u{1F680} Starting smooth scroll to ${targetScroll.toFixed(1)}`);
+    if (FEATURE_FLAGS.USE_RAF_FRAME_SEPARATION) {
+      requestAnimationFrame(() => {
+        el.scrollTo({
+          left: targetScroll,
+          behavior: "smooth"
+        });
+      });
+    } else {
+      el.scrollTo({
+        left: targetScroll,
+        behavior: "smooth"
+      });
+    }
+    waitForScrollCompletion();
+    const clickDuration = performance.now() - clickStartTime;
+    logger?.log("NAV", `\u2501\u2501\u2501 Arrow Click #${thisClickId} END \u2501\u2501\u2501`, {
+      totalDuration: `${clickDuration.toFixed(1)}ms`,
+      finalTarget: targetScroll.toFixed(1)
+    });
+  }, [containerRef, infinite, layout, cancelMomentum, preTeleport, onNavigate, coordinator, waitForScrollCompletion, logger]);
+  const scrollLeft = (0, import_react8.useCallback)(() => handleScrollNav(-1), [handleScrollNav]);
+  const scrollRight = (0, import_react8.useCallback)(() => handleScrollNav(1), [handleScrollNav]);
+  return {
+    scrollLeft,
+    scrollRight,
+    handleScrollNav
+  };
+}
+
+// src/hooks/useCarouselCoordinator.ts
+var import_react9 = require("react");
+var createInitialContext = () => ({
+  phase: "UNINITIALIZED",
+  pendingTarget: null,
+  scrollDirection: null,
+  teleportOffset: null,
+  isTeleporting: false,
+  isPreTeleporting: false,
+  lastActiveItemKey: null,
+  snapTimeoutId: null,
+  scrollIdleTimeoutId: null,
+  bounceTimeoutId: null,
+  hasScrollEndListener: false
+});
+function reduce(context, action) {
+  switch (action.type) {
+    case "INITIALIZE": {
+      return {
+        ...context,
+        phase: "IDLE"
+      };
+    }
+    case "ARROW_CLICK": {
+      if (context.phase !== "IDLE" && context.phase !== "SCROLLING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "SCROLLING",
+        pendingTarget: action.targetScroll,
+        scrollDirection: action.direction
+      };
+    }
+    case "ITEM_CLICK": {
+      if (context.phase !== "IDLE" && context.phase !== "SCROLLING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "SCROLLING",
+        pendingTarget: action.targetScroll,
+        scrollDirection: null
+        // Direction not applicable for direct clicks
+      };
+    }
+    case "SCROLL_COMPLETE": {
+      if (context.phase !== "SCROLLING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "IDLE",
+        pendingTarget: null,
+        scrollDirection: null,
+        hasScrollEndListener: false
+      };
+    }
+    case "USER_INTERRUPT": {
+      if (context.phase === "SCROLLING") {
+        return {
+          ...context,
+          phase: "IDLE",
+          pendingTarget: null,
+          scrollDirection: null
+        };
+      }
+      return context;
+    }
+    case "START_BOUNCE": {
+      if (context.phase !== "IDLE") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "BOUNCING",
+        bounceTimeoutId: action.timeoutId
+      };
+    }
+    case "END_BOUNCE": {
+      if (context.phase !== "BOUNCING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "IDLE",
+        bounceTimeoutId: null
+      };
+    }
+    case "START_PRE_TELEPORT": {
+      return {
+        ...context,
+        phase: "PRE_TELEPORTING"
+      };
+    }
+    case "EXECUTE_TELEPORT": {
+      if (context.phase !== "PRE_TELEPORTING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "TELEPORTING",
+        teleportOffset: action.offset
+      };
+    }
+    case "END_TELEPORT": {
+      if (context.phase !== "TELEPORTING") {
+        return context;
+      }
+      const nextPhase = context.pendingTarget !== null ? "SCROLLING" : "IDLE";
+      return {
+        ...context,
+        phase: nextPhase,
+        teleportOffset: null
+      };
+    }
+    case "START_DRAG": {
+      return {
+        ...context,
+        phase: "DRAGGING",
+        pendingTarget: null,
+        // Cancel any pending scroll
+        scrollDirection: null
+      };
+    }
+    case "END_DRAG": {
+      if (context.phase !== "DRAGGING") {
+        return context;
+      }
+      return {
+        ...context,
+        phase: "IDLE"
+      };
+    }
+    // Timer management actions (don't change phase)
+    case "SET_SNAP_TIMEOUT": {
+      return { ...context, snapTimeoutId: action.timeoutId };
+    }
+    case "CLEAR_SNAP_TIMEOUT": {
+      return { ...context, snapTimeoutId: null };
+    }
+    case "SET_SCROLL_IDLE_TIMEOUT": {
+      return { ...context, scrollIdleTimeoutId: action.timeoutId };
+    }
+    case "CLEAR_SCROLL_IDLE_TIMEOUT": {
+      return { ...context, scrollIdleTimeoutId: null };
+    }
+    case "SET_SCROLL_END_LISTENER": {
+      return { ...context, hasScrollEndListener: action.hasListener };
+    }
+    case "SET_ACTIVE_ITEM_KEY": {
+      return { ...context, lastActiveItemKey: action.key };
+    }
+    case "SET_TELEPORTING": {
+      return { ...context, isTeleporting: action.value };
+    }
+    case "SET_PRE_TELEPORTING": {
+      if (action.value) {
+        return { ...context, isPreTeleporting: true };
+      } else {
+        const nextPhase = context.pendingTarget !== null ? "SCROLLING" : "IDLE";
+        return {
+          ...context,
+          isPreTeleporting: false,
+          phase: nextPhase
+        };
+      }
+    }
+    case "SET_PENDING_TARGET": {
+      return { ...context, pendingTarget: action.target };
+    }
+    default: {
+      const _exhaustive = action;
+      return context;
+    }
+  }
+}
+function useCarouselCoordinator(options) {
+  const contextRef = (0, import_react9.useRef)(createInitialContext());
+  const loggerRef = (0, import_react9.useRef)(options?.logger);
+  loggerRef.current = options?.logger;
+  const transition = (0, import_react9.useCallback)((action) => {
+    const prevContext = contextRef.current;
+    const prevPhase = prevContext.phase;
+    const nextContext = reduce(prevContext, action);
+    contextRef.current = nextContext;
+    if (loggerRef.current) {
+      const arrow = prevPhase === nextContext.phase ? "\u2022" : "\u2192";
+      loggerRef.current.log("COORDINATOR", `${prevPhase} ${arrow} ${action.type} ${arrow} ${nextContext.phase}`, {
+        action: action.type,
+        prevPhase,
+        nextPhase: nextContext.phase,
+        ..."targetScroll" in action ? { target: action.targetScroll } : {},
+        ..."direction" in action ? { direction: action.direction } : {}
+      });
+    }
+    return nextContext;
+  }, []);
+  const getPhase = (0, import_react9.useCallback)(() => {
+    return contextRef.current.phase;
+  }, []);
+  const getContext = (0, import_react9.useCallback)(() => {
+    return contextRef.current;
+  }, []);
+  const isBusy = (0, import_react9.useCallback)(() => {
+    const phase = contextRef.current.phase;
+    return phase !== "IDLE" && phase !== "UNINITIALIZED";
+  }, []);
+  const isBlocking = (0, import_react9.useCallback)(() => {
+    const phase = contextRef.current.phase;
+    return phase === "BOUNCING" || phase === "TELEPORTING";
+  }, []);
+  return {
+    transition,
+    getPhase,
+    getContext,
+    contextRef,
+    isBusy,
+    isBlocking
+  };
+}
+
+// src/CarouselArrow.tsx
+var import_clsx = __toESM(require("clsx"), 1);
+var import_react_i18next = require("react-i18next");
+var import_jsx_runtime = require("react/jsx-runtime");
+function CarouselArrow({
+  direction,
+  onClick,
+  disabled = false,
+  className
+}) {
+  const { t } = (0, import_react_i18next.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: (0, import_clsx.default)(
+        "carousel-button",
+        // Base class from global CSS
+        direction === "left" ? "prev" : "next",
+        // Positioning classes
+        "disabled:opacity-0 disabled:cursor-not-allowed disabled:pointer-events-none",
+        // State modifiers
+        className
+      ),
+      "aria-label": direction === "left" ? t("carousel.previous") : t("carousel.next"),
+      onPointerDown: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      children: direction === "left" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6" })
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18l6-6-6-6" })
+        }
+      )
+    }
+  );
+}
+
+// src/logger.ts
+var CHANNEL_COLORS = {
+  ALL: "#ffffff",
+  // White (not typically logged directly)
+  COORDINATOR: "#ff9800",
+  // Orange
+  LAYOUT: "#2196f3",
+  // Blue
+  TELEPORT: "#e91e63",
+  // Pink
+  VISUALS: "#9c27b0",
+  // Purple
+  NAV: "#4caf50",
+  // Green
+  INIT: "#f44336",
+  // Red
+  CACHE: "#795548",
+  // Brown
+  INTERACT: "#607d8b",
+  // Blue Grey
+  PERF: "#ff5722"
+  // Deep Orange
+};
+var LoggerRegistry = class _LoggerRegistry {
+  constructor() {
+    this.globalHistory = [];
+    this.counter = 0;
+    this.maxGlobalHistory = 500;
+    if (typeof window !== "undefined") {
+      ;
+      window.__DUMP_CAROUSEL_LOGS = this.dump.bind(this);
+    }
+  }
+  static getInstance() {
+    if (!_LoggerRegistry.instance) {
+      _LoggerRegistry.instance = new _LoggerRegistry();
+    }
+    return _LoggerRegistry.instance;
+  }
+  /** Get next unique ID for log entries */
+  getNextId() {
+    return ++this.counter;
+  }
+  /** Add entry to global history */
+  addToGlobal(entry) {
+    this.globalHistory.push(entry);
+    if (this.globalHistory.length > this.maxGlobalHistory) {
+      this.globalHistory.shift();
+    }
+  }
+  /**
+   * Dump history to console as a table.
+   * @param filterId - Optional: filter to only show logs from a specific carousel ID
+   */
+  dump(filterId) {
+    let entries = this.globalHistory;
+    if (filterId) {
+      entries = entries.filter((e) => e.carouselId === filterId);
+    }
+    if (entries.length === 0) {
+      console.warn(`[CarouselLogger] No logs found${filterId ? ` for "${filterId}"` : ""}`);
+      return "No logs found";
+    }
+    console.group(`\u{1F4F8} Carousel Debug Snapshot${filterId ? ` [${filterId}]` : " (all)"}`);
+    console.table(
+      entries.map((entry) => ({
+        Time: new Date(entry.timestamp).toISOString().split("T")[1],
+        ID: entry.carouselId,
+        Channel: entry.channel,
+        Message: entry.message,
+        Data: entry.data ? JSON.stringify(entry.data) : ""
+      }))
+    );
+    console.groupEnd();
+    return `Dumped ${entries.length} logs.`;
+  }
+  /** Clear all global history */
+  clear() {
+    this.globalHistory = [];
+  }
+};
+var CarouselLoggerInstance = class {
+  constructor(id, config) {
+    this.localHistory = [];
+    this.id = id;
+    this.maxLocalHistory = config?.bufferSize ?? 100;
+    this.channelOverrides = config?.channels;
+    this.registry = LoggerRegistry.getInstance();
+  }
+  /**
+   * Check if a channel should log to console.
+   * Resolution order: instance override → global config
+   */
+  shouldLog(channel) {
+    const forceEnable = this.channelOverrides !== void 0;
+    if (!DEBUG_CONFIG.ENABLED && !forceEnable) return false;
+    if (this.channelOverrides !== void 0) {
+      if (this.channelOverrides === "ALL") return true;
+      if (this.channelOverrides[channel] !== void 0) {
+        return this.channelOverrides[channel];
+      }
+    }
+    if (DEBUG_CONFIG.CHANNELS.ALL) return true;
+    return DEBUG_CONFIG.CHANNELS[channel] ?? false;
+  }
+  /**
+   * Log a message to history buffers and optionally to console.
+   */
+  log(channel, message, data) {
+    const forceEnable = this.channelOverrides !== void 0;
+    if (!DEBUG_CONFIG.ENABLED && !forceEnable) return;
+    const entry = {
+      id: this.registry.getNextId(),
+      timestamp: Date.now(),
+      carouselId: this.id,
+      channel,
+      message,
+      data
+    };
+    this.localHistory.push(entry);
+    if (this.localHistory.length > this.maxLocalHistory) {
+      this.localHistory.shift();
+    }
+    this.registry.addToGlobal(entry);
+    if (this.shouldLog(channel) && (process.env.NODE_ENV !== "production" || forceEnable)) {
+      const color = CHANNEL_COLORS[channel] || "#888";
+      console.log(
+        `%c[${this.id}]%c[${channel}]%c ${message}`,
+        "color: #888; font-weight: bold",
+        `color: ${color}; font-weight: bold`,
+        "color: inherit",
+        data ?? ""
+      );
+    }
+  }
+  /**
+   * Dump this instance's local history to console.
+   */
+  dump() {
+    if (this.localHistory.length === 0) {
+      console.warn(`[CarouselLogger:${this.id}] Local buffer is empty`);
+      return "No logs found";
+    }
+    console.group(`\u{1F4F8} Carousel Debug Snapshot [${this.id}]`);
+    console.table(
+      this.localHistory.map((entry) => ({
+        Time: new Date(entry.timestamp).toISOString().split("T")[1],
+        Channel: entry.channel,
+        Message: entry.message,
+        Data: entry.data ? JSON.stringify(entry.data) : ""
+      }))
+    );
+    console.groupEnd();
+    return `Dumped ${this.localHistory.length} logs.`;
+  }
+  /** Clear local history */
+  clear() {
+    this.localHistory = [];
+  }
+  /**
+   * Create a performance timer for tracking elapsed time.
+   * Usage: 
+   *   const timer = logger.createTimer()
+   *   // ... do work ...
+   *   logger.log('INIT', 'Completed', { elapsedMs: timer.elapsed() })
+   */
+  createTimer() {
+    let startTime = performance.now();
+    return {
+      elapsed: () => Math.round(performance.now() - startTime),
+      reset: () => {
+        startTime = performance.now();
+      }
+    };
+  }
+};
+function createLogger(id, config) {
+  return new CarouselLoggerInstance(id, config);
+}
+var carouselLogger = createLogger("default");
+
+// src/Carousel.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SSR_FALLBACK_WIDTH = 170;
+var CSS_VAR_WITH_FALLBACK = {
+  default: "var(--carousel-item-width-default, 200px)",
+  review: "var(--carousel-item-width-review, 280px)",
+  compact: "var(--carousel-item-width-compact, 150px)",
+  collection: "var(--carousel-item-width-collection, 100px)",
+  wide: "var(--carousel-item-width-wide, 350px)"
+};
+var CSS_VAR_MAP = {
+  default: "--carousel-item-width-default",
+  review: "--carousel-item-width-review",
+  compact: "--carousel-item-width-compact",
+  collection: "--carousel-item-width-collection",
+  wide: "--carousel-item-width-wide"
+};
+var getComputedItemWidth = (cssVarOrName = "default", fallback = SSR_FALLBACK_WIDTH) => {
+  if (typeof window === "undefined") return fallback;
+  const cssVar = cssVarOrName.startsWith("--") ? cssVarOrName : CSS_VAR_MAP[cssVarOrName];
+  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar);
+  return parseInt(value, 10) || fallback;
+};
+function BaseCarouselInner({
+  items,
+  getItemKey,
+  renderItem,
+  infinite = false,
+  onEndReached,
+  hasNextPage = false,
+  itemWidthVar = "default",
+  itemWidthCssVar,
+  fallbackWidth = 200,
+  itemClassName = "",
+  snapType = "mandatory",
+  disableOpacityEffect = false,
+  disableScaleEffect = false,
+  verticalPadding = "20px",
+  snap = true,
+  renderSkeleton,
+  persistKey,
+  onActiveItemChange,
+  gap: gapProp,
+  debugId = "carousel",
+  debug,
+  eagerSelectionOnMobile = false,
+  initialIndex
+}) {
+  const resolvedGap = gapProp ?? (typeof window !== "undefined" && window.innerWidth < LAYOUT_CONFIG.GAP_BREAKPOINT ? LAYOUT_CONFIG.GAP_MOBILE : LAYOUT_CONFIG.GAP_DESKTOP);
+  const logger = (0, import_react10.useMemo)(() => createLogger(debugId, debug), [debugId, debug]);
+  const widthCssValue = itemWidthCssVar ? `var(${itemWidthCssVar}, ${fallbackWidth}px)` : CSS_VAR_WITH_FALLBACK[itemWidthVar];
+  const widthCssVar = itemWidthCssVar || CSS_VAR_MAP[itemWidthVar];
+  const initTimerRef = (0, import_react10.useRef)(logger.createTimer());
+  const getElapsedMs = () => initTimerRef.current.elapsed();
+  const { isReady, showSkeleton, markReady, isInstant } = useLoadingState({
+    cacheKey: persistKey ? `carousel-${persistKey}` : void 0,
+    skeletonDelay: 50,
+    fallbackTimeout: 3e3
+  });
+  const { getSavedPosition, savePosition } = useCarouselPersistence({
+    persistKey,
+    debounceMs: 150
+  });
+  const handleEndReached = () => {
+    if (hasNextPage && onEndReached) {
+      onEndReached();
+    }
+  };
+  const { ref: draggableRef, isDragging, events, cancelMomentum, adjustScroll } = useDraggableScroll({
+    infinite,
+    onEndReached: handleEndReached,
+    hasNextPage,
+    cardWidth: LAYOUT_CONFIG.INITIAL_CARD_WIDTH,
+    gap: resolvedGap
+  });
+  const { layout, measureLayout: triggerLayoutMeasure, resizeCount, isMobile } = useCarouselLayout({
+    containerRef: draggableRef,
+    logger
+  });
+  const { clonesBefore, clonesAfter } = (0, import_react10.useMemo)(() => {
+    let before = [];
+    let after = [];
+    if (infinite && items.length > 0) {
+      const itemsNeeded = Math.ceil(LAYOUT_CONFIG.MIN_BUFFER_COUNT / items.length);
+      const count = Math.max(1, itemsNeeded);
+      before = Array(count).fill(items).flat();
+      after = Array(count).fill(items).flat();
+    }
+    return { clonesBefore: before, clonesAfter: after };
+  }, [infinite, items]);
+  const allItems = (0, import_react10.useMemo)(() => [...clonesBefore, ...items, ...clonesAfter], [clonesBefore, items, clonesAfter]);
+  const bufferBeforeCount = clonesBefore.length;
+  const { transition, getPhase, getContext, contextRef } = useCarouselCoordinator({ logger });
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react10.useLayoutEffect : import_react10.useEffect;
+  const hasInitialized = (0, import_react10.useRef)(false);
+  const scrollEndListenerRef = (0, import_react10.useRef)(null);
+  const snapTimeoutRef = (0, import_react10.useRef)(null);
+  const scrollIdleTimeoutRef = (0, import_react10.useRef)(null);
+  const lastActiveItemRef = (0, import_react10.useRef)(null);
+  const lastInitRef = (0, import_react10.useRef)(null);
+  const {
+    childrenPositions,
+    isCacheDirty,
+    containerWidthRef,
+    isContainerWidthDirty,
+    updateCache,
+    applyVisuals
+  } = useCarouselVisuals({
+    layout,
+    itemsCount: items.length,
+    bufferBeforeCount,
+    disableOpacityEffect,
+    disableScaleEffect,
+    logger
+  });
+  const { preTeleport } = useCarouselTeleport({
+    containerRef: draggableRef,
+    infinite,
+    itemsCount: items.length,
+    cardWidth: layout.cardWidth,
+    gap: layout.gap,
+    bufferBeforeCount,
+    applyVisuals,
+    adjustScroll,
+    preTeleportClearDelayMs: TIMING_CONFIG.PRE_TELEPORT_CLEAR_DELAY_MS,
+    coordinator: {
+      transition,
+      getContext,
+      getPhase,
+      contextRef,
+      isBusy: () => getPhase() !== "IDLE",
+      isBlocking: () => getPhase() === "BOUNCING" || getPhase() === "TELEPORTING"
+    },
+    logger
+  });
+  const initializeCarousel = (0, import_react10.useCallback)((node) => {
+    if (items.length === 0) {
+      if (!isReady) markReady();
+      return;
+    }
+    let cardWidth;
+    let gap;
+    if (hasInitialized.current) {
+      cardWidth = layout.cardWidth;
+      gap = layout.gap;
+    } else {
+      const measured = triggerLayoutMeasure();
+      cardWidth = measured.cardWidth;
+      gap = measured.gap;
+    }
+    const expectedWidth = getComputedItemWidth(widthCssVar, fallbackWidth);
+    const widthDiff = Math.abs(cardWidth - expectedWidth);
+    const TOLERANCE = 10;
+    const hasNoChildren = node.children.length === 0;
+    const isNotExpectedWidth = widthDiff > TOLERANCE;
+    const hasScrollableContent = node.scrollWidth > node.clientWidth;
+    const isUnmeasured = hasNoChildren || isNotExpectedWidth || !hasScrollableContent;
+    if (isUnmeasured && !hasInitialized.current) {
+      logger.log("INIT", "Skipping - not ready for initialization", {
+        elapsedMs: getElapsedMs(),
+        childrenCount: node.children.length,
+        cardWidth,
+        expectedWidth,
+        widthDiff,
+        itemWidthVar,
+        hasScrollableContent,
+        scrollWidth: node.scrollWidth,
+        clientWidth: node.clientWidth,
+        gap
+      });
+      return;
+    }
+    if (hasInitialized.current && lastInitRef.current && lastInitRef.current.cardWidth === cardWidth && lastInitRef.current.gap === gap) {
+      logger.log("INIT", "Skipping - layout unchanged", { cardWidth, gap });
+      return;
+    }
+    lastInitRef.current = { cardWidth, gap };
+    const stride = cardWidth + gap;
+    let targetPos;
+    if (hasInitialized.current) {
+      const currentIndex = Math.round(node.scrollLeft / stride);
+      targetPos = currentIndex * stride;
+      logger.log("INIT", `Re-initializing (Resize/Update)`, {
+        currentIndex,
+        targetPos,
+        prevScroll: node.scrollLeft,
+        stride
+      });
+    } else {
+      const savedPosition = getSavedPosition();
+      if (savedPosition !== null) {
+        const maxScroll = Math.max(0, node.scrollWidth - node.clientWidth);
+        targetPos = Math.min(savedPosition, maxScroll);
+        logger.log("CACHE", `Restoring scroll position`, { saved: savedPosition, clamped: targetPos, maxScroll });
+      } else {
+        const startIdx = typeof initialIndex === "number" ? initialIndex : 0;
+        const targetIndex = infinite ? bufferBeforeCount + startIdx : startIdx;
+        const targetNode = node.children[targetIndex];
+        if (targetNode) {
+          const itemCenter = targetNode.offsetLeft + targetNode.offsetWidth / 2;
+          const containerCenter = node.clientWidth / 2;
+          targetPos = Math.max(0, itemCenter - containerCenter);
+          logger.log("INIT", "DOM-based positioning used", {
+            targetIndex,
+            itemCenter,
+            containerCenter,
+            targetPos,
+            offsetLeft: targetNode.offsetLeft,
+            initialIndex
+          });
+        } else {
+          const startIdx2 = typeof initialIndex === "number" ? initialIndex : 0;
+          const targetIdx = infinite ? bufferBeforeCount + startIdx2 : startIdx2;
+          targetPos = targetIdx * stride;
+          logger.log("INIT", "Fallback to theoretical positioning", { targetPos, initialIndex });
+        }
+      }
+      const initialTargetIndex = targetPos / stride;
+      logger.log("INIT", "Target Calc Trace", {
+        targetPos,
+        stride,
+        initialTargetIndex,
+        bufferBeforeCount,
+        infinite
+      });
+    }
+    const positionDrift = Math.abs(node.scrollLeft - targetPos);
+    const needsCorrection = !hasInitialized.current || positionDrift > stride / 2;
+    logger.log("INIT", "Target Calc Result", {
+      targetPos,
+      currentScroll: node.scrollLeft,
+      needsCorrection,
+      hasInitialized: hasInitialized.current,
+      infinite,
+      bufferBeforeCount
+    });
+    if (needsCorrection) {
+      logger.log("INIT", `Applying position correction`, {
+        elapsedMs: getElapsedMs(),
+        current: node.scrollLeft,
+        target: targetPos,
+        drift: positionDrift,
+        firstInit: !hasInitialized.current
+      });
+      node.style.scrollSnapType = "none";
+      if (infinite) {
+        const centerPadding = `calc(50% - ${cardWidth / 2}px)`;
+        node.style.paddingLeft = centerPadding;
+        node.style.paddingRight = centerPadding;
+        node.style.scrollPaddingLeft = centerPadding;
+        node.style.scrollPaddingRight = centerPadding;
+      }
+      logger.log("INIT", "DRIFT DEBUG: Before scrollLeft set", {
+        currentScroll: node.scrollLeft,
+        targetPos,
+        paddingLeft: node.style.paddingLeft,
+        clientWidth: node.clientWidth
+      });
+      node.scrollLeft = targetPos;
+      logger.log("INIT", "DRIFT DEBUG: After scrollLeft set (before flush)", {
+        scrollLeftNow: node.scrollLeft
+      });
+      void node.offsetHeight;
+      logger.log("INIT", "DRIFT DEBUG: After layout flush (before snap re-enable)", {
+        scrollLeftNow: node.scrollLeft
+      });
+      node.style.scrollSnapType = "";
+      logger.log("INIT", "DRIFT DEBUG: After snap re-enabled", {
+        scrollLeftNow: node.scrollLeft
+      });
+    }
+    applyVisuals(node);
+    node.style.opacity = "1";
+    if (!hasInitialized.current) {
+      hasInitialized.current = true;
+      transition({ type: "INITIALIZE" });
+    }
+    if (!isReady) markReady();
+  }, [items.length, bufferBeforeCount, applyVisuals, isReady, infinite, markReady, layout.cardWidth, layout.gap, triggerLayoutMeasure, transition, getSavedPosition, resizeCount, itemWidthVar, initialIndex]);
+  const setCarouselRef = (0, import_react10.useCallback)((node) => {
+    if (node) {
+      draggableRef.current = node;
+      initializeCarousel(node);
+    }
+  }, [draggableRef, initializeCarousel]);
+  useIsomorphicLayoutEffect(() => {
+    const node = draggableRef.current;
+    if (node && items.length > 0) {
+      initializeCarousel(node);
+    }
+  }, [items.length, initializeCarousel, draggableRef, resizeCount]);
+  (0, import_react10.useEffect)(() => {
+    if (draggableRef.current) {
+      isCacheDirty.current = true;
+      isContainerWidthDirty.current = true;
+      updateCache(draggableRef.current);
+      requestAnimationFrame(() => applyVisuals(draggableRef.current));
+    }
+  }, [layout.cardWidth, layout.gap, updateCache, applyVisuals, draggableRef, isCacheDirty, isContainerWidthDirty]);
+  (0, import_react10.useEffect)(() => {
+    const el = draggableRef.current;
+    if (!el || !persistKey) return;
+    const handleScrollEnd = () => {
+      savePosition(el.scrollLeft);
+    };
+    el.addEventListener("scrollend", handleScrollEnd);
+    return () => el.removeEventListener("scrollend", handleScrollEnd);
+  }, [draggableRef, persistKey, savePosition]);
+  const getActiveItemAtScroll = (0, import_react10.useCallback)((scrollLeft2, direction = 0, overrides) => {
+    const activeCardWidth = overrides?.cardWidth ?? layout.cardWidth;
+    const activeGap = overrides?.gap ?? layout.gap;
+    const stride = activeCardWidth + activeGap;
+    if (stride <= 0 || items.length === 0) return null;
+    const activeStride = layout.domStride > 0 ? layout.domStride : stride;
+    const effectiveScroll = scrollLeft2;
+    const rawIndex = effectiveScroll / activeStride;
+    let totalIndex;
+    logger.log("NAV", "getActiveItemAtScroll START", {
+      scrollLeft: scrollLeft2,
+      effectiveScroll,
+      calculatedStride: stride,
+      domStride: activeStride,
+      rawIndex,
+      direction,
+      overrides
+    });
+    const EAGER_THRESHOLD = isMobile && eagerSelectionOnMobile ? 0.3 : 0.5;
+    if (direction > 0) {
+      totalIndex = Math.floor(rawIndex + (1 - EAGER_THRESHOLD));
+    } else if (direction < 0) {
+      totalIndex = Math.ceil(rawIndex - (1 - EAGER_THRESHOLD));
+    } else {
+      totalIndex = Math.round(rawIndex);
+    }
+    let activeIndex;
+    if (infinite) {
+      activeIndex = ((totalIndex - bufferBeforeCount) % items.length + items.length) % items.length;
+    } else {
+      activeIndex = Math.max(0, Math.min(totalIndex, items.length - 1));
+    }
+    logger.log("NAV", "getActiveItemAtScroll RESULT", {
+      scrollLeft: scrollLeft2,
+      stride,
+      rawIndex,
+      totalIndex,
+      activeIndex,
+      bufferBeforeCount,
+      itemId: items[activeIndex]?.id,
+      title: items[activeIndex]?.title
+    });
+    return items[activeIndex] || null;
+  }, [layout.cardWidth, layout.gap, layout.domStride, items, infinite, bufferBeforeCount, isMobile, eagerSelectionOnMobile]);
+  const onScrollToItemComplete = (0, import_react10.useCallback)((source) => {
+    const el = draggableRef.current;
+    if (!el) return;
+    const ctx = getContext();
+    if (ctx.pendingTarget === null && source !== "safety-timeout") {
+      logger.log("NAV", `ScrollToItem found pending=null (interrupted) via ${source}`);
+      return;
+    }
+    if (ctx.isPreTeleporting) {
+      logger.log("NAV", `ScrollToItem finished but isPreTeleporting=true, skipping cleanup`);
+      return;
+    }
+    logger.log("NAV", `ScrollToItem complete via ${source}!`);
+    transition({ type: "SCROLL_COMPLETE" });
+    if (infinite && el) {
+      el.style.scrollSnapType = "";
+      logger.log("NAV", `Snap restored after ScrollToItem`);
+    }
+  }, [infinite, draggableRef, getContext, transition]);
+  const { waitForScrollCompletion: waitForScrollCompletionForClick } = useScrollCompletion({
+    ref: draggableRef,
+    onComplete: onScrollToItemComplete,
+    // We can reuse the snapTimeoutRef for safety, or let the hook manage its own.
+    // Since scrollToThisItem used snapTimeoutRef as "safety net" before, we can pass it.
+    // BUT wait, snapTimeoutRef is usually for restoring snap.
+    // Check legacy code: "snapTimeoutRef.current = setTimeout(...)". Yes, it was reusing that ref.
+    timeoutRef: snapTimeoutRef
+  });
+  const scrollToThisItem = (0, import_react10.useCallback)((index) => {
+    const el = draggableRef.current;
+    if (!el) return;
+    const stride = layout.cardWidth + layout.gap;
+    if (stride <= 0) return;
+    let targetScroll = index * stride;
+    if (infinite && el.children[index]) {
+      const targetNode = el.children[index];
+      const itemCenter = targetNode.offsetLeft + targetNode.offsetWidth / 2;
+      const containerCenter = el.clientWidth / 2;
+      targetScroll = Math.max(0, itemCenter - containerCenter);
+      logger.log("INTERACT", `Calculated DOM target for click`, { index, itemCenter, containerCenter, targetScroll });
+    }
+    if (infinite) {
+      el.style.scrollSnapType = "none";
+    }
+    const thisClickId = Math.floor(Math.random() * 1e3);
+    logger.log("INTERACT", `\u2501\u2501\u2501 Item Click #${thisClickId} START \u2501\u2501\u2501`, { index, targetScroll });
+    transition({ type: "ITEM_CLICK", targetScroll });
+    el.scrollTo({
+      left: targetScroll,
+      behavior: "smooth"
+    });
+    const targetItem = getActiveItemAtScroll(targetScroll);
+    if (targetItem && onActiveItemChange) {
+      lastActiveItemRef.current = targetItem;
+      onActiveItemChange(targetItem);
+    }
+    waitForScrollCompletionForClick();
+  }, [layout, draggableRef, infinite, getActiveItemAtScroll, onActiveItemChange, waitForScrollCompletionForClick, transition]);
+  const { handleScrollNav, scrollLeft, scrollRight } = useCarouselNavigation({
+    containerRef: draggableRef,
+    infinite: !!infinite,
+    layout: { cardWidth: layout.cardWidth, gap: layout.gap },
+    cancelMomentum,
+    preTeleport,
+    coordinator: { transition, getPhase, getContext, contextRef, isBusy: () => getPhase() !== "IDLE", isBlocking: () => getPhase() === "BOUNCING" || getPhase() === "TELEPORTING" },
+    onNavigate: (targetScroll) => {
+      const targetItem = getActiveItemAtScroll(targetScroll);
+      if (targetItem && onActiveItemChange) {
+        lastActiveItemRef.current = targetItem;
+        onActiveItemChange(targetItem);
+      }
+    },
+    logger
+  });
+  const activeItemCallbackRef = (0, import_react10.useRef)(onActiveItemChange);
+  activeItemCallbackRef.current = onActiveItemChange;
+  const getterRef = (0, import_react10.useRef)(getActiveItemAtScroll);
+  getterRef.current = getActiveItemAtScroll;
+  const lastScrollLeftRef = (0, import_react10.useRef)(0);
+  const lastMeaningfulDirectionRef = (0, import_react10.useRef)(0);
+  (0, import_react10.useEffect)(() => {
+    const currentCallback = activeItemCallbackRef.current;
+    if (!currentCallback || items.length === 0) return;
+    const el = draggableRef.current;
+    if (!el) return;
+    let timeoutId;
+    const emitActiveItem = (scrollLeft2) => {
+      const ctx = contextRef.current;
+      if (ctx.isTeleporting) {
+        lastScrollLeftRef.current = scrollLeft2;
+        return;
+      }
+      if (ctx.pendingTarget !== null) {
+        lastScrollLeftRef.current = scrollLeft2;
+        return;
+      }
+      const delta = scrollLeft2 - lastScrollLeftRef.current;
+      let direction = lastMeaningfulDirectionRef.current;
+      if (Math.abs(delta) > 5) {
+        direction = delta > 0 ? 1 : -1;
+        lastMeaningfulDirectionRef.current = direction;
+      }
+      const activeItem = getterRef.current(scrollLeft2, direction);
+      if (activeItem && activeItem !== lastActiveItemRef.current) {
+        lastActiveItemRef.current = activeItem;
+        if (activeItemCallbackRef.current) {
+          activeItemCallbackRef.current(activeItem);
+        }
+      }
+      lastScrollLeftRef.current = scrollLeft2;
+    };
+    const handleScrollEnd = () => {
+      emitActiveItem(el.scrollLeft);
+    };
+    const handleScrollImmediate = () => {
+      emitActiveItem(el.scrollLeft);
+    };
+    const supportsScrollEnd = typeof window !== "undefined" && "onscrollend" in window;
+    const scrollFallbackListener = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleScrollEnd, 150);
+    };
+    if (supportsScrollEnd) {
+      el.addEventListener("scrollend", handleScrollEnd);
+    } else {
+      el.addEventListener("scroll", scrollFallbackListener, { passive: true });
+    }
+    el.addEventListener("scroll", handleScrollImmediate, { passive: true });
+    return () => {
+      el.removeEventListener("scrollend", handleScrollEnd);
+      el.removeEventListener("scroll", scrollFallbackListener);
+      el.removeEventListener("scroll", handleScrollImmediate);
+      clearTimeout(timeoutId);
+    };
+  }, [items.length]);
+  useIsomorphicLayoutEffect(() => {
+    const el = draggableRef.current;
+    if (!el) return;
+    if (isCacheDirty.current) {
+      updateCache(el);
+      isCacheDirty.current = false;
+    }
+    applyVisuals(el);
+  });
+  const lastInteractionRef = (0, import_react10.useRef)(0);
+  const handleArrowClick = (direction) => {
+    lastInteractionRef.current = Date.now();
+    if (direction === "left") scrollLeft();
+    else scrollRight();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: "base-carousel-container relative carousel-hover-group overflow-hidden",
+      style: {
+        paddingTop: verticalPadding,
+        paddingBottom: verticalPadding
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselArrow, { direction: "left", onClick: () => handleArrowClick("left"), className: "prev" }),
+        infinite && !isReady && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 z-10 flex gap-6 overflow-hidden pointer-events-none px-4",
+            "aria-hidden": "true",
+            style: {
+              paddingTop: 0,
+              paddingBottom: 0
+            },
+            children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: `flex-shrink-0 ${itemClassName}`,
+                style: { width: widthCssValue },
+                children: renderSkeleton ? renderSkeleton(i) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 via-gray-200 to-gray-100 animate-pulse rounded-md", style: { minHeight: "200px" } })
+              },
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            onPointerDown: (e) => {
+              const timeSinceInteraction = Date.now() - lastInteractionRef.current;
+              if (timeSinceInteraction < 400) {
+                logger.log("INTERACT", `Ignoring PointerDown during grace period (${timeSinceInteraction}ms)`);
+                e.preventDefault();
+                return;
+              }
+              const hadPendingScroll = contextRef.current.pendingTarget !== null;
+              if (hadPendingScroll) {
+                logger.log("INTERACT", "PointerDown: Interrupting programmatic scroll");
+                transition({ type: "USER_INTERRUPT" });
+                if (draggableRef.current) applyVisuals(draggableRef.current);
+              }
+              if (snapTimeoutRef.current) {
+                logger.log("INTERACT", "PointerDown: Clearing snap timeout");
+                clearTimeout(snapTimeoutRef.current);
+                snapTimeoutRef.current = null;
+              }
+              if (draggableRef.current && e.pointerType === "touch") {
+                draggableRef.current.style.scrollSnapType = "";
+              }
+              if (e.pointerType !== "touch" && draggableRef.current) {
+                draggableRef.current.style.scrollSnapType = "none";
+              }
+              lastMeaningfulDirectionRef.current = 0;
+              events.onPointerDown(e);
+            },
+            onWheel: () => {
+              if (contextRef.current.pendingTarget !== null) {
+                logger.log("INTERACT", "Wheel: Interrupting programmatic scroll");
+                transition({ type: "USER_INTERRUPT" });
+                if (draggableRef.current) draggableRef.current.style.scrollSnapType = "";
+              }
+              if (snapTimeoutRef.current) {
+                logger.log("INTERACT", "Wheel: Clearing snap timeout");
+                clearTimeout(snapTimeoutRef.current);
+                snapTimeoutRef.current = null;
+              }
+            },
+            onTouchStart: () => {
+              if (snapTimeoutRef.current) {
+                clearTimeout(snapTimeoutRef.current);
+                snapTimeoutRef.current = null;
+              }
+            },
+            className: `base-carousel flex items-stretch overflow-x-auto overscroll-x-none scrollbar-hide select-none ${snap ? `snap-x snap-${snapType}` : ""}`,
+            onPointerUp: events.onPointerUp,
+            onPointerMove: events.onPointerMove,
+            onLostPointerCapture: events.onLostPointerCapture,
+            onClickCapture: events.onClickCapture,
+            onDragStart: events.onDragStart,
+            ref: setCarouselRef,
+            style: {
+              gap: `${resolvedGap}px`,
+              cursor: isDragging ? "grabbing" : "grab",
+              scrollBehavior: "auto",
+              // Optimization: tell browser this element is independent for rendering
+              contain: "paint layout",
+              // Only apply center-padding for infinite carousels
+              // Finite carousels should start/end at the edges
+              ...infinite ? {
+                paddingLeft: `calc(50% - ${layout.cardWidth / 2}px)`,
+                paddingRight: `calc(50% - ${layout.cardWidth / 2}px)`,
+                scrollPaddingLeft: `calc(50% - ${layout.cardWidth / 2}px)`,
+                scrollPaddingRight: `calc(50% - ${layout.cardWidth / 2}px)`
+              } : {
+                paddingLeft: "16px",
+                paddingRight: "16px",
+                scrollPaddingLeft: "16px",
+                scrollPaddingRight: "16px"
+              },
+              minHeight: 0,
+              opacity: isReady || isInstant ? 1 : 0
+            },
+            children: (0, import_react10.useMemo)(() => allItems.map((item, index) => {
+              let type = "item";
+              let realIndex = 0;
+              if (infinite) {
+                if (index < bufferBeforeCount) {
+                  type = "clone-before";
+                  realIndex = index % items.length;
+                } else if (index >= bufferBeforeCount + items.length) {
+                  type = "clone-after";
+                  realIndex = (index - bufferBeforeCount - items.length) % items.length;
+                } else {
+                  type = "original";
+                  realIndex = index - bufferBeforeCount;
+                }
+              } else {
+                realIndex = index;
+              }
+              const key = `${type}-${getItemKey(item, realIndex)}-${index}`;
+              const snapAlignment = infinite ? "snap-center" : "snap-start";
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: `carousel-item flex-shrink-0 ${itemClassName} cursor-pointer ${snapAlignment} snap-stop-always`,
+                  style: {
+                    width: widthCssValue,
+                    WebkitFontSmoothing: "subpixel-antialiased",
+                    WebkitTapHighlightColor: "transparent",
+                    scrollSnapStop: "always",
+                    contain: "layout paint"
+                  },
+                  children: renderItem(item, realIndex, { scrollToItem: () => scrollToThisItem(index) })
+                },
+                key
+              );
+            }), [allItems, infinite, bufferBeforeCount, items.length, getItemKey, renderItem, widthCssValue, itemClassName, scrollToThisItem])
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CarouselArrow, { direction: "right", onClick: () => handleArrowClick("right"), className: "next" })
+      ]
+    }
+  );
+}
+var Carousel = (0, import_react10.memo)(BaseCarouselInner);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Carousel,
+  CarouselArrow,
+  CarouselLoggerInstance,
+  DEBUG_CONFIG,
+  FEATURE_FLAGS,
+  LAYOUT_CONFIG,
+  TIMING_CONFIG,
+  VISUAL_CONFIG,
+  carouselLogger,
+  clearLoadingStateCache,
+  createLogger,
+  measureLayoutFromElement,
+  reduce,
+  useCarouselCoordinator,
+  useCarouselLayout,
+  useCarouselNavigation,
+  useCarouselPersistence,
+  useCarouselTeleport,
+  useCarouselVisuals,
+  useDraggableScroll,
+  useLoadingState,
+  useScrollCompletion
+});
+//# sourceMappingURL=index.cjs.map