@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/navigation/carousel/index.js

@@ -0,0 +1,494 @@
+"use client";
+import { useCarouselContext } from "./controller.js";
+import "./carousel.css";
+import { cn, resolveResponsiveValue } from "@puzzle-ui/core";
+import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/navigation/carousel/index.tsx
+const defaultLayout = {
+	itemsPerPage: 1,
+	numberOfPages: 0,
+	maxStartIndex: 0,
+	maxOffset: 0,
+	itemOffsets: []
+};
+const rubberBandDistance = (distance, dimension) => {
+	const size = Math.max(1, dimension);
+	const resistance = .55;
+	return distance * resistance * size / (size + resistance * distance);
+};
+const rubberBandOffset = (offset, maxOffset, viewportWidth) => {
+	if (offset < 0) return -rubberBandDistance(-offset, viewportWidth);
+	if (offset > maxOffset) return maxOffset + rubberBandDistance(offset - maxOffset, viewportWidth);
+	return offset;
+};
+const readRenderedOffset = (element, fallback) => {
+	const transform = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).transform;
+	if (!transform || transform === "none") return fallback;
+	const isMatrix3d = transform.startsWith("matrix3d(");
+	const translateX = transform.slice(isMatrix3d ? 9 : 7, -1).split(",").map(Number)[isMatrix3d ? 12 : 4];
+	return Number.isFinite(translateX) ? -translateX : fallback;
+};
+const estimatePointerVelocity = (samples) => {
+	if (samples.length < 2) return 0;
+	const end = samples[samples.length - 1];
+	const cutoff = end.time - 100;
+	let start = samples[0];
+	for (const sample of samples) if (sample.time <= cutoff) start = sample;
+	else break;
+	const elapsedSeconds = (end.time - start.time) / 1e3;
+	if (elapsedSeconds <= 0) return 0;
+	return -(end.x - start.x) / elapsedSeconds;
+};
+const toCssLength = (value) => {
+	if (typeof value === "number") return `${value}px`;
+	return value ?? "0px";
+};
+const getItemBasis = (itemsPerPage, gap) => {
+	const count = Math.max(1, Math.floor(itemsPerPage || 1));
+	if (count === 1) return "100%";
+	if (gap === "" || gap === "0px" || gap === "0") return `calc((100% / ${count}) - (1px / ${count}))`;
+	return `calc((100% - (${Array.from({ length: count - 1 }, () => `(${gap})`).join(" + ")})) / ${count})`;
+};
+const getPagerDataAttribute = (alignment) => alignment === "under" ? "under" : "over";
+const cloneNavigationButton = (button, disabled, onNavigate) => {
+	if (!button) return null;
+	const originalProps = button.props;
+	const isDisabled = disabled || originalProps.disabled === true;
+	return cloneElement(button, {
+		disabled: isDisabled,
+		"aria-disabled": isDisabled,
+		onClick: (event) => {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			originalProps.onClick?.(event);
+			onNavigate();
+		}
+	});
+};
+const Carousel = ({ renderItem, getItemKey, panelsPerView, itemWidth, gap = 0, className, viewportClassName, viewportStyle, ariaLabel = "Carousel", singlePageAlignment = "left", backButton, nextButton, buttonAlignment, pagerAlignment, renderPager }) => {
+	const { items, currentPanel, setPanel } = useCarouselContext();
+	const viewportRef = useRef(null);
+	const trackRef = useRef(null);
+	const itemRefs = useRef([]);
+	const dragRef = useRef(null);
+	const pointerCleanupRef = useRef(null);
+	const animationFrameRef = useRef(null);
+	const visualOffsetRef = useRef(0);
+	const suppressClickRef = useRef(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const [isAnimating, setIsAnimating] = useState(false);
+	const [layout, setLayout] = useState(defaultLayout);
+	const sizingMode = itemWidth !== void 0 ? "item-width" : "panels";
+	const panelCounts = resolveResponsiveValue(panelsPerView, 1);
+	const itemWidths = resolveResponsiveValue(itemWidth, "100%");
+	const gaps = resolveResponsiveValue(gap, 0);
+	const buttonAlignments = resolveResponsiveValue(buttonAlignment, "over");
+	const pagerAlignments = resolveResponsiveValue(pagerAlignment, "under");
+	const cssVariables = {
+		"--puzzle-carousel-gap-mobile": toCssLength(gaps.mobile),
+		"--puzzle-carousel-gap-tablet": toCssLength(gaps.tablet),
+		"--puzzle-carousel-gap-desktop": toCssLength(gaps.desktop),
+		"--puzzle-carousel-basis-mobile": getItemBasis(panelCounts.mobile, toCssLength(gaps.mobile)),
+		"--puzzle-carousel-basis-tablet": getItemBasis(panelCounts.tablet ?? panelCounts.mobile, toCssLength(gaps.tablet)),
+		"--puzzle-carousel-basis-desktop": getItemBasis(panelCounts.desktop ?? panelCounts.tablet ?? panelCounts.mobile, toCssLength(gaps.desktop)),
+		"--puzzle-carousel-item-width-mobile": toCssLength(itemWidths.mobile),
+		"--puzzle-carousel-item-width-tablet": toCssLength(itemWidths.tablet),
+		"--puzzle-carousel-item-width-desktop": toCssLength(itemWidths.desktop)
+	};
+	/**
+	* Read the actual rendered widths and positions of the items.
+	* This supports both panelsPerView and itemWidth sizing.
+	*/
+	const measureLayout = useCallback(() => {
+		const viewport = viewportRef.current;
+		const track = trackRef.current;
+		if (!viewport || !track || items.length === 0) {
+			setLayout(defaultLayout);
+			return;
+		}
+		const viewportWidth = viewport.getBoundingClientRect().width;
+		const itemNodes = itemRefs.current.slice(0, items.length).filter((item) => item !== null);
+		if (viewportWidth <= 0 || itemNodes.length === 0) return;
+		const trackRect = track.getBoundingClientRect();
+		const itemRects = itemNodes.map((item) => item.getBoundingClientRect());
+		const itemOffsets = itemRects.map((rect) => rect.left - trackRect.left);
+		let itemsPerPage = 0;
+		for (const rect of itemRects) if (rect.right - trackRect.left <= viewportWidth + .01) itemsPerPage += 1;
+		else break;
+		itemsPerPage = Math.max(1, itemsPerPage);
+		const numberOfPages = Math.ceil(items.length / itemsPerPage);
+		const maxStartIndex = Math.max(0, items.length - itemsPerPage);
+		const lastItemEnd = itemRects[itemRects.length - 1].right - trackRect.left;
+		const maxOffset = Math.max(0, lastItemEnd - viewportWidth);
+		setLayout((previous) => {
+			if (previous.itemsPerPage === itemsPerPage && previous.numberOfPages === numberOfPages && previous.maxStartIndex === maxStartIndex && previous.maxOffset === maxOffset && previous.itemOffsets.length === itemOffsets.length && previous.itemOffsets.every((offset, index) => offset === itemOffsets[index])) return previous;
+			return {
+				itemsPerPage,
+				numberOfPages,
+				maxStartIndex,
+				maxOffset,
+				itemOffsets
+			};
+		});
+	}, [items.length]);
+	const itemOrderSignature = items.map((item, index) => String(getItemKey ? getItemKey(item, index) : index)).join("\0");
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		const track = trackRef.current;
+		if (!viewport || !track) return;
+		const ownerWindow = viewport.ownerDocument.defaultView ?? window;
+		measureLayout();
+		if (typeof ResizeObserver === "undefined") {
+			ownerWindow.addEventListener("resize", measureLayout);
+			return () => {
+				ownerWindow.removeEventListener("resize", measureLayout);
+			};
+		}
+		const observer = new ResizeObserver(measureLayout);
+		observer.observe(viewport);
+		observer.observe(track);
+		itemRefs.current.slice(0, items.length).forEach((item) => {
+			if (item) observer.observe(item);
+		});
+		return () => observer.disconnect();
+	}, [
+		items.length,
+		itemOrderSignature,
+		measureLayout
+	]);
+	/**
+	* currentPanel is always an item index.
+	*
+	* Restrict it to the last position from which the viewport can be
+	* completely filled without scrolling beyond the end of the track.
+	*/
+	const activePanel = Math.min(Math.max(0, Math.floor(currentPanel)), layout.maxStartIndex);
+	/**
+	* Logical page starts can overlap at the end.
+	*
+	* Example: 5 items with 3 visible per page:
+	* [0, 2], not [0, 3].
+	*
+	* Example: 8 items with 3 visible per page:
+	* [0, 3, 5].
+	*/
+	const pageStartIndices = useMemo(() => Array.from({ length: layout.numberOfPages }, (_, pageIndex) => {
+		if (pageIndex === layout.numberOfPages - 1) return layout.maxStartIndex;
+		return Math.min(pageIndex * layout.itemsPerPage, layout.maxStartIndex);
+	}), [
+		layout.itemsPerPage,
+		layout.maxStartIndex,
+		layout.numberOfPages
+	]);
+	/**
+	* Map the active item to the nearest logical page.
+	* This lets swipe-to-panel and page-based navigation coexist.
+	*/
+	const activePageIndex = useMemo(() => {
+		if (pageStartIndices.length === 0) return 0;
+		return pageStartIndices.reduce((closestIndex, pageStart, index) => {
+			const closestStart = pageStartIndices[closestIndex];
+			return Math.abs(pageStart - activePanel) < Math.abs(closestStart - activePanel) ? index : closestIndex;
+		}, 0);
+	}, [activePanel, pageStartIndices]);
+	const clampOffset = useCallback((offset) => Math.min(layout.maxOffset, Math.max(0, offset)), [layout.maxOffset]);
+	const activeOffset = clampOffset(layout.itemOffsets[activePanel] ?? 0);
+	useEffect(() => {
+		if (dragRef.current || animationFrameRef.current !== null) return;
+		visualOffsetRef.current = activeOffset;
+	}, [activeOffset]);
+	useEffect(() => () => {
+		pointerCleanupRef.current?.();
+		if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+	}, []);
+	/**
+	* Only correct the controller after layout measurement has completed.
+	* This avoids forcing currentPanel to 0 during the initial render.
+	*/
+	useEffect(() => {
+		if (layout.numberOfPages > 0 && currentPanel !== activePanel) setPanel(activePanel);
+	}, [
+		activePanel,
+		currentPanel,
+		layout.numberOfPages,
+		setPanel
+	]);
+	const goToPage = useCallback((pageIndex) => {
+		const targetPage = Math.max(0, Math.min(pageIndex, pageStartIndices.length - 1));
+		const targetPanel = pageStartIndices[targetPage];
+		if (targetPanel !== void 0) setPanel(targetPanel);
+	}, [pageStartIndices, setPanel]);
+	const goToPreviousPage = useCallback(() => {
+		goToPage(activePageIndex - 1);
+	}, [activePageIndex, goToPage]);
+	const goToNextPage = useCallback(() => {
+		goToPage(activePageIndex + 1);
+	}, [activePageIndex, goToPage]);
+	/**
+	* Start tracking a swipe or mouse drag.
+	*
+	* Capture on the original element rather than always on the viewport,
+	* so a normal click on an interactive child can still work.
+	*/
+	const writeTrackOffset = useCallback((offset) => {
+		visualOffsetRef.current = offset;
+		if (trackRef.current) trackRef.current.style.transform = `translate3d(${-offset}px, 0, 0)`;
+	}, []);
+	const getNearestPanelIndex = useCallback((offset) => {
+		let nearestIndex = 0;
+		let nearestDistance = Number.POSITIVE_INFINITY;
+		for (let index = 0; index <= layout.maxStartIndex; index += 1) {
+			const candidateOffset = clampOffset(layout.itemOffsets[index] ?? 0);
+			const distance = Math.abs(candidateOffset - offset);
+			if (distance < nearestDistance) {
+				nearestDistance = distance;
+				nearestIndex = index;
+			}
+		}
+		return nearestIndex;
+	}, [
+		clampOffset,
+		layout.itemOffsets,
+		layout.maxStartIndex
+	]);
+	/**
+	* Animate to a panel using a damped spring.
+	*
+	* A little underdamping gives the motion a natural overshoot.
+	* The target remains a real, reachable item offset.
+	*/
+	const animateToPanel = useCallback((fromOffset, targetPanel, initialVelocity) => {
+		if (animationFrameRef.current !== null) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = null;
+		}
+		const track = trackRef.current;
+		const ownerWindow = viewportRef.current?.ownerDocument.defaultView ?? window;
+		const targetOffset = clampOffset(layout.itemOffsets[targetPanel] ?? 0);
+		if (!track || ownerWindow.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			writeTrackOffset(targetOffset);
+			track?.style.removeProperty("transition");
+			setPanel(targetPanel);
+			setIsDragging(false);
+			setIsAnimating(false);
+			return;
+		}
+		track.style.transition = "none";
+		setIsDragging(false);
+		setIsAnimating(true);
+		let position = fromOffset;
+		let velocity = Math.max(-1800, Math.min(1800, initialVelocity * .4));
+		let previousTime = performance.now();
+		const stiffness = 230;
+		const damping = 24;
+		const animate = (now) => {
+			const deltaSeconds = Math.min((now - previousTime) / 1e3, 1 / 30);
+			previousTime = now;
+			const springAcceleration = (targetOffset - position) * stiffness;
+			const dampingAcceleration = velocity * damping;
+			velocity += (springAcceleration - dampingAcceleration) * deltaSeconds;
+			position += velocity * deltaSeconds;
+			const viewportWidth = viewportRef.current?.clientWidth ?? 1;
+			writeTrackOffset(rubberBandOffset(position, layout.maxOffset, viewportWidth));
+			if (Math.abs(targetOffset - position) < .5 && Math.abs(velocity) < 10) {
+				animationFrameRef.current = null;
+				writeTrackOffset(targetOffset);
+				track.style.removeProperty("transition");
+				setPanel(targetPanel);
+				setIsAnimating(false);
+				return;
+			}
+			animationFrameRef.current = requestAnimationFrame(animate);
+		};
+		animationFrameRef.current = requestAnimationFrame(animate);
+	}, [
+		clampOffset,
+		layout.itemOffsets,
+		layout.maxOffset,
+		setPanel,
+		writeTrackOffset
+	]);
+	const handlePointerDown = useCallback((event) => {
+		if (!event.isPrimary || dragRef.current) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		if (layout.maxOffset <= 0) return;
+		const track = trackRef.current;
+		const viewport = viewportRef.current;
+		const ownerWindow = viewport?.ownerDocument.defaultView ?? window;
+		if (!track || !viewport || !ownerWindow) return;
+		const interruptedAnimation = animationFrameRef.current !== null;
+		if (animationFrameRef.current !== null) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = null;
+		}
+		const startOffset = readRenderedOffset(track, visualOffsetRef.current);
+		track.style.transition = "none";
+		writeTrackOffset(startOffset);
+		setIsAnimating(false);
+		setIsDragging(true);
+		const startTime = performance.now();
+		const drag = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startOffset,
+			currentOffset: startOffset,
+			renderedOffset: startOffset,
+			hasMoved: false,
+			interruptedAnimation,
+			samples: [{
+				x: event.clientX,
+				time: startTime
+			}]
+		};
+		dragRef.current = drag;
+		const updatePointerPosition = (pointerEvent) => {
+			const deltaX = pointerEvent.clientX - drag.startX;
+			if (!drag.hasMoved && Math.abs(deltaX) <= 4) return;
+			drag.hasMoved = true;
+			drag.currentOffset = drag.startOffset - deltaX;
+			drag.renderedOffset = rubberBandOffset(drag.currentOffset, layout.maxOffset, viewport.clientWidth);
+			const now = performance.now();
+			drag.samples.push({
+				x: pointerEvent.clientX,
+				time: now
+			});
+			while (drag.samples.length > 2 && now - drag.samples[1].time > 120) drag.samples.shift();
+			writeTrackOffset(drag.renderedOffset);
+			if (pointerEvent.cancelable) pointerEvent.preventDefault();
+		};
+		const cleanup = () => {
+			ownerWindow.removeEventListener("pointermove", handleWindowPointerMove);
+			ownerWindow.removeEventListener("pointerup", handleWindowPointerUp);
+			ownerWindow.removeEventListener("pointercancel", handleWindowPointerCancel);
+			ownerWindow.removeEventListener("blur", handleWindowBlur);
+			if (pointerCleanupRef.current === cleanup) pointerCleanupRef.current = null;
+		};
+		const settleCancelledDrag = () => {
+			if (dragRef.current !== drag) return;
+			cleanup();
+			dragRef.current = null;
+			setIsDragging(false);
+			const targetPanel = getNearestPanelIndex(clampOffset(drag.currentOffset));
+			animateToPanel(drag.renderedOffset, targetPanel, 0);
+		};
+		const handleWindowPointerMove = (pointerEvent) => {
+			if (pointerEvent.pointerId !== drag.pointerId) return;
+			updatePointerPosition(pointerEvent);
+		};
+		const handleWindowPointerUp = (pointerEvent) => {
+			if (pointerEvent.pointerId !== drag.pointerId) return;
+			updatePointerPosition(pointerEvent);
+			cleanup();
+			dragRef.current = null;
+			setIsDragging(false);
+			if (!drag.hasMoved) {
+				if (drag.interruptedAnimation) {
+					const targetPanel = getNearestPanelIndex(clampOffset(drag.startOffset));
+					animateToPanel(drag.startOffset, targetPanel, 0);
+				} else {
+					track.style.removeProperty("transition");
+					writeTrackOffset(drag.startOffset);
+				}
+				return;
+			}
+			suppressClickRef.current = true;
+			ownerWindow.setTimeout(() => {
+				suppressClickRef.current = false;
+			}, 0);
+			const velocity = estimatePointerVelocity(drag.samples);
+			const projectedOffset = clampOffset(clampOffset(drag.currentOffset) + velocity * .18);
+			const targetPanel = getNearestPanelIndex(projectedOffset);
+			animateToPanel(drag.renderedOffset, targetPanel, velocity);
+		};
+		const handleWindowPointerCancel = (pointerEvent) => {
+			if (pointerEvent.pointerId === drag.pointerId) settleCancelledDrag();
+		};
+		const handleWindowBlur = () => {
+			settleCancelledDrag();
+		};
+		pointerCleanupRef.current = cleanup;
+		ownerWindow.addEventListener("pointermove", handleWindowPointerMove);
+		ownerWindow.addEventListener("pointerup", handleWindowPointerUp);
+		ownerWindow.addEventListener("pointercancel", handleWindowPointerCancel);
+		ownerWindow.addEventListener("blur", handleWindowBlur);
+	}, [
+		animateToPanel,
+		clampOffset,
+		getNearestPanelIndex,
+		layout.maxOffset,
+		setIsAnimating,
+		writeTrackOffset
+	]);
+	const handleClickCapture = useCallback((event) => {
+		if (!suppressClickRef.current) return;
+		event.preventDefault();
+		event.stopPropagation();
+		suppressClickRef.current = false;
+	}, []);
+	const isFirstPage = activePageIndex === 0;
+	const isLastPage = layout.numberOfPages <= 1 || activePageIndex >= layout.numberOfPages - 1;
+	const currentPage = layout.numberOfPages > 0 ? activePageIndex : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-carousel", className),
+		style: cssVariables,
+		"data-sizing": sizingMode,
+		"data-dragging": isDragging ? "true" : "false",
+		"data-animating": isAnimating ? "true" : "false",
+		"data-single-page": layout.numberOfPages <= 1 ? "true" : "false",
+		"data-single-page-alignment": singlePageAlignment,
+		"data-button-mobile": buttonAlignments.mobile,
+		"data-button-tablet": buttonAlignments.tablet,
+		"data-button-desktop": buttonAlignments.desktop,
+		"data-pager-mobile": getPagerDataAttribute(pagerAlignments.mobile),
+		"data-pager-tablet": getPagerDataAttribute(pagerAlignments.tablet ?? pagerAlignments.mobile),
+		"data-pager-desktop": getPagerDataAttribute(pagerAlignments.desktop ?? pagerAlignments.tablet ?? pagerAlignments.mobile),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "puzzle-carousel__stage",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "puzzle-carousel__navigation puzzle-carousel__navigation--previous",
+					children: cloneNavigationButton(backButton, isFirstPage, goToPreviousPage)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: viewportRef,
+					className: cn("puzzle-carousel__viewport", viewportClassName),
+					style: viewportStyle,
+					role: "group",
+					"aria-roledescription": "carousel",
+					"aria-label": ariaLabel,
+					onPointerDown: handlePointerDown,
+					onClickCapture: handleClickCapture,
+					onDragStart: (event) => event.preventDefault(),
+					children: /* @__PURE__ */ jsx("div", {
+						ref: trackRef,
+						className: "puzzle-carousel__track",
+						style: { transform: `translate3d(${-activeOffset}px, 0, 0)` },
+						children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+							ref: (node) => {
+								itemRefs.current[index] = node;
+							},
+							className: "puzzle-carousel__item",
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": `${index + 1} of ${items.length}`,
+							children: renderItem(item, index)
+						}, getItemKey ? getItemKey(item, index) : index))
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "puzzle-carousel__navigation puzzle-carousel__navigation--next",
+					children: cloneNavigationButton(nextButton, isLastPage, goToNextPage)
+				})
+			]
+		}), renderPager && layout.numberOfPages > 0 && /* @__PURE__ */ jsx("div", {
+			className: "puzzle-carousel__pager",
+			children: renderPager(currentPage, layout.numberOfPages)
+		})]
+	});
+};
+export { Carousel };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/navigation/carousel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, resolveResponsiveValue } from \"@puzzle-ui/core\";\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type Key,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useCarouselContext } from \"./controller\";\nimport \"./carousel.css\";\nimport type { ResponsiveValue } from \"@puzzle-ui/core\";\n\ntype CarouselAlignment = \"left\" | \"center\" | \"right\";\n\ntype CarouselButtonAlignment = \"aside\" | \"over\";\n\ntype CarouselPagerAlignment = \"under\" | \"over\";\n\ntype CarouselAlignmentConfig = ResponsiveValue<CarouselButtonAlignment>;\n\ntype PagerAlignmentConfig = ResponsiveValue<CarouselPagerAlignment>;\n\ntype CarouselLayout = {\n  itemsPerPage: number;\n  numberOfPages: number;\n  maxStartIndex: number;\n  maxOffset: number;\n  itemOffsets: number[];\n};\n\ntype DragSample = {\n  x: number;\n  time: number;\n};\n\ntype DragState = {\n  pointerId: number;\n  startX: number;\n  startOffset: number;\n  currentOffset: number;\n  renderedOffset: number;\n  hasMoved: boolean;\n  interruptedAnimation: boolean;\n  samples: DragSample[];\n};\n\ntype CarouselProps<T> = {\n  renderItem: (item: T, index: number) => ReactNode;\n\n  /** Returns a stable React key when items may be inserted, removed, or reordered. */\n  getItemKey?: (item: T, index: number) => Key;\n\n  panelsPerView?: ResponsiveValue<number>;\n  itemWidth?: ResponsiveValue<CSSProperties[\"width\"]>;\n  gap?: ResponsiveValue<CSSProperties[\"gap\"]>;\n\n  className?: string;\n  viewportClassName?: string;\n  viewportStyle?: CSSProperties;\n  ariaLabel?: string;\n\n  singlePageAlignment?: CarouselAlignment;\n\n  backButton?: ReactElement;\n  nextButton?: ReactElement;\n\n  buttonAlignment?: CarouselAlignmentConfig;\n  pagerAlignment?: PagerAlignmentConfig;\n  renderPager?: (currentPage: number, numberOfPages: number) => ReactNode;\n};\n\nconst defaultLayout: CarouselLayout = {\n  itemsPerPage: 1,\n  numberOfPages: 0,\n  maxStartIndex: 0,\n  maxOffset: 0,\n  itemOffsets: [],\n};\n\nconst rubberBandDistance = (distance: number, dimension: number): number => {\n  const size = Math.max(1, dimension);\n  const resistance = 0.55;\n\n  return (distance * resistance * size) / (size + resistance * distance);\n};\n\nconst rubberBandOffset = (\n  offset: number,\n  maxOffset: number,\n  viewportWidth: number,\n): number => {\n  if (offset < 0) {\n    return -rubberBandDistance(-offset, viewportWidth);\n  }\n\n  if (offset > maxOffset) {\n    return maxOffset + rubberBandDistance(offset - maxOffset, viewportWidth);\n  }\n\n  return offset;\n};\n\nconst readRenderedOffset = (element: HTMLElement, fallback: number): number => {\n  const ownerWindow = element.ownerDocument.defaultView ?? window;\n  const transform = ownerWindow.getComputedStyle(element).transform;\n\n  if (!transform || transform === \"none\") {\n    return fallback;\n  }\n\n  const isMatrix3d = transform.startsWith(\"matrix3d(\");\n  const values = transform\n    .slice(isMatrix3d ? 9 : 7, -1)\n    .split(\",\")\n    .map(Number);\n\n  const translateX = values[isMatrix3d ? 12 : 4];\n\n  return Number.isFinite(translateX) ? -translateX : fallback;\n};\n\nconst estimatePointerVelocity = (samples: DragSample[]): number => {\n  if (samples.length < 2) {\n    return 0;\n  }\n\n  const end = samples[samples.length - 1];\n  const cutoff = end.time - 100;\n\n  let start = samples[0];\n\n  for (const sample of samples) {\n    if (sample.time <= cutoff) {\n      start = sample;\n    } else {\n      break;\n    }\n  }\n\n  const elapsedSeconds = (end.time - start.time) / 1000;\n\n  if (elapsedSeconds <= 0) {\n    return 0;\n  }\n\n  // Convert pointer movement to content movement.\n  return -(end.x - start.x) / elapsedSeconds;\n};\n\nconst toCssLength = (\n  value: CSSProperties[\"width\"] | CSSProperties[\"gap\"] | undefined,\n): string => {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value ?? \"0px\";\n};\n\nconst getItemBasis = (itemsPerPage: number, gap: string): string => {\n  const count = Math.max(1, Math.floor(itemsPerPage || 1));\n\n  if (count === 1) {\n    return \"100%\";\n  }\n\n  if (gap === \"\" || gap === \"0px\" || gap === \"0\") {\n    return `calc((100% / ${count}) - (1px / ${count}))`;\n  }\n\n  const gapTerms = Array.from({ length: count - 1 }, () => `(${gap})`).join(\n    \" + \",\n  );\n\n  return `calc((100% - (${gapTerms})) / ${count})`;\n};\n\nconst getPagerDataAttribute = (alignment: CarouselPagerAlignment) =>\n  alignment === \"under\" ? \"under\" : \"over\";\n\nconst cloneNavigationButton = (\n  button: ReactElement | undefined,\n  disabled: boolean,\n  onNavigate: () => void,\n): ReactNode => {\n  if (!button) {\n    return null;\n  }\n\n  const originalProps = button.props as {\n    disabled?: boolean;\n    onClick?: (event: ReactMouseEvent<HTMLElement>) => void;\n  };\n\n  const isDisabled = disabled || originalProps.disabled === true;\n\n  return cloneElement(button as ReactElement<Record<string, unknown>>, {\n    disabled: isDisabled,\n    \"aria-disabled\": isDisabled,\n    onClick: (event: ReactMouseEvent<HTMLElement>) => {\n      if (isDisabled) {\n        event.preventDefault();\n        return;\n      }\n\n      originalProps.onClick?.(event);\n      onNavigate();\n    },\n  });\n};\n\nconst Carousel = <T,>({\n  renderItem,\n  getItemKey,\n  panelsPerView,\n  itemWidth,\n  gap = 0,\n  className,\n  viewportClassName,\n  viewportStyle,\n  ariaLabel = \"Carousel\",\n  singlePageAlignment = \"left\",\n  backButton,\n  nextButton,\n  buttonAlignment,\n  pagerAlignment,\n  renderPager,\n}: CarouselProps<T>) => {\n  const { items, currentPanel, setPanel } = useCarouselContext<T>();\n\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Array<HTMLDivElement | null>>([]);\n\n  const dragRef = useRef<DragState | null>(null);\n  const pointerCleanupRef = useRef<(() => void) | null>(null);\n  const animationFrameRef = useRef<number | null>(null);\n  const visualOffsetRef = useRef(0);\n  const suppressClickRef = useRef(false);\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const [layout, setLayout] = useState<CarouselLayout>(defaultLayout);\n\n  const sizingMode = itemWidth !== undefined ? \"item-width\" : \"panels\";\n\n  const panelCounts = resolveResponsiveValue(panelsPerView, 1);\n  const itemWidths = resolveResponsiveValue(itemWidth, \"100%\");\n  const gaps = resolveResponsiveValue(gap, 0);\n\n  const buttonAlignments = resolveResponsiveValue<CarouselButtonAlignment>(\n    buttonAlignment,\n    \"over\",\n  );\n\n  const pagerAlignments = resolveResponsiveValue<CarouselPagerAlignment>(\n    pagerAlignment,\n    \"under\",\n  );\n\n  const cssVariables = {\n    \"--puzzle-carousel-gap-mobile\": toCssLength(gaps.mobile),\n    \"--puzzle-carousel-gap-tablet\": toCssLength(gaps.tablet),\n    \"--puzzle-carousel-gap-desktop\": toCssLength(gaps.desktop),\n    \"--puzzle-carousel-basis-mobile\": getItemBasis(\n      panelCounts.mobile,\n      toCssLength(gaps.mobile),\n    ),\n    \"--puzzle-carousel-basis-tablet\": getItemBasis(\n      panelCounts.tablet ?? panelCounts.mobile,\n      toCssLength(gaps.tablet),\n    ),\n    \"--puzzle-carousel-basis-desktop\": getItemBasis(\n      panelCounts.desktop ?? panelCounts.tablet ?? panelCounts.mobile,\n      toCssLength(gaps.desktop),\n    ),\n    \"--puzzle-carousel-item-width-mobile\": toCssLength(itemWidths.mobile),\n    \"--puzzle-carousel-item-width-tablet\": toCssLength(itemWidths.tablet),\n    \"--puzzle-carousel-item-width-desktop\": toCssLength(itemWidths.desktop),\n  } as CSSProperties;\n\n  /**\n   * Read the actual rendered widths and positions of the items.\n   * This supports both panelsPerView and itemWidth sizing.\n   */\n  const measureLayout = useCallback(() => {\n    const viewport = viewportRef.current;\n    const track = trackRef.current;\n\n    if (!viewport || !track || items.length === 0) {\n      setLayout(defaultLayout);\n      return;\n    }\n\n    const viewportRect = viewport.getBoundingClientRect();\n    const viewportWidth = viewportRect.width;\n    const itemNodes = itemRefs.current\n      .slice(0, items.length)\n      .filter((item): item is HTMLDivElement => item !== null);\n\n    if (viewportWidth <= 0 || itemNodes.length === 0) {\n      return;\n    }\n\n    // Relative positions preserve fractional CSS pixels and cancel the\n    // track's current translate transform.\n    const trackRect = track.getBoundingClientRect();\n    const itemRects = itemNodes.map((item) => item.getBoundingClientRect());\n\n    const itemOffsets = itemRects.map((rect) => rect.left - trackRect.left);\n\n    let itemsPerPage = 0;\n\n    for (const rect of itemRects) {\n      const itemEnd = rect.right - trackRect.left;\n\n      if (itemEnd <= viewportWidth + 0.01) {\n        itemsPerPage += 1;\n      } else {\n        break;\n      }\n    }\n\n    itemsPerPage = Math.max(1, itemsPerPage);\n\n    const numberOfPages = Math.ceil(items.length / itemsPerPage);\n    const maxStartIndex = Math.max(0, items.length - itemsPerPage);\n    const lastItemEnd = itemRects[itemRects.length - 1].right - trackRect.left;\n    const maxOffset = Math.max(0, lastItemEnd - viewportWidth);\n\n    setLayout((previous) => {\n      const unchanged =\n        previous.itemsPerPage === itemsPerPage &&\n        previous.numberOfPages === numberOfPages &&\n        previous.maxStartIndex === maxStartIndex &&\n        previous.maxOffset === maxOffset &&\n        previous.itemOffsets.length === itemOffsets.length &&\n        previous.itemOffsets.every(\n          (offset, index) => offset === itemOffsets[index],\n        );\n\n      if (unchanged) {\n        return previous;\n      }\n\n      return {\n        itemsPerPage,\n        numberOfPages,\n        maxStartIndex,\n        maxOffset,\n        itemOffsets,\n      };\n    });\n  }, [items.length]);\n\n  const itemOrderSignature = items\n    .map((item, index) => String(getItemKey ? getItemKey(item, index) : index))\n    .join(\"\\u0000\");\n\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    const track = trackRef.current;\n\n    if (!viewport || !track) {\n      return;\n    }\n\n    const ownerWindow = viewport.ownerDocument.defaultView ?? window;\n\n    measureLayout();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      ownerWindow.addEventListener(\"resize\", measureLayout);\n\n      return () => {\n        ownerWindow.removeEventListener(\"resize\", measureLayout);\n      };\n    }\n\n    const observer = new ResizeObserver(measureLayout);\n\n    observer.observe(viewport);\n    observer.observe(track);\n\n    itemRefs.current.slice(0, items.length).forEach((item) => {\n      if (item) {\n        observer.observe(item);\n      }\n    });\n\n    return () => observer.disconnect();\n  }, [items.length, itemOrderSignature, measureLayout]);\n\n  /**\n   * currentPanel is always an item index.\n   *\n   * Restrict it to the last position from which the viewport can be\n   * completely filled without scrolling beyond the end of the track.\n   */\n  const activePanel = Math.min(\n    Math.max(0, Math.floor(currentPanel)),\n    layout.maxStartIndex,\n  );\n\n  /**\n   * Logical page starts can overlap at the end.\n   *\n   * Example: 5 items with 3 visible per page:\n   * [0, 2], not [0, 3].\n   *\n   * Example: 8 items with 3 visible per page:\n   * [0, 3, 5].\n   */\n  const pageStartIndices = useMemo(\n    () =>\n      Array.from({ length: layout.numberOfPages }, (_, pageIndex) => {\n        if (pageIndex === layout.numberOfPages - 1) {\n          return layout.maxStartIndex;\n        }\n\n        return Math.min(pageIndex * layout.itemsPerPage, layout.maxStartIndex);\n      }),\n    [layout.itemsPerPage, layout.maxStartIndex, layout.numberOfPages],\n  );\n\n  /**\n   * Map the active item to the nearest logical page.\n   * This lets swipe-to-panel and page-based navigation coexist.\n   */\n  const activePageIndex = useMemo(() => {\n    if (pageStartIndices.length === 0) {\n      return 0;\n    }\n\n    return pageStartIndices.reduce((closestIndex, pageStart, index) => {\n      const closestStart = pageStartIndices[closestIndex];\n\n      return Math.abs(pageStart - activePanel) <\n        Math.abs(closestStart - activePanel)\n        ? index\n        : closestIndex;\n    }, 0);\n  }, [activePanel, pageStartIndices]);\n\n  const clampOffset = useCallback(\n    (offset: number) => Math.min(layout.maxOffset, Math.max(0, offset)),\n    [layout.maxOffset],\n  );\n\n  const activeOffset = clampOffset(layout.itemOffsets[activePanel] ?? 0);\n\n  useEffect(() => {\n    if (dragRef.current || animationFrameRef.current !== null) {\n      return;\n    }\n\n    visualOffsetRef.current = activeOffset;\n  }, [activeOffset]);\n\n  useEffect(\n    () => () => {\n      pointerCleanupRef.current?.();\n\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    },\n    [],\n  );\n\n  /**\n   * Only correct the controller after layout measurement has completed.\n   * This avoids forcing currentPanel to 0 during the initial render.\n   */\n  useEffect(() => {\n    if (layout.numberOfPages > 0 && currentPanel !== activePanel) {\n      setPanel(activePanel);\n    }\n  }, [activePanel, currentPanel, layout.numberOfPages, setPanel]);\n\n  const goToPage = useCallback(\n    (pageIndex: number) => {\n      const targetPage = Math.max(\n        0,\n        Math.min(pageIndex, pageStartIndices.length - 1),\n      );\n\n      const targetPanel = pageStartIndices[targetPage];\n\n      if (targetPanel !== undefined) {\n        setPanel(targetPanel);\n      }\n    },\n    [pageStartIndices, setPanel],\n  );\n\n  const goToPreviousPage = useCallback(() => {\n    goToPage(activePageIndex - 1);\n  }, [activePageIndex, goToPage]);\n\n  const goToNextPage = useCallback(() => {\n    goToPage(activePageIndex + 1);\n  }, [activePageIndex, goToPage]);\n\n  /**\n   * Start tracking a swipe or mouse drag.\n   *\n   * Capture on the original element rather than always on the viewport,\n   * so a normal click on an interactive child can still work.\n   */\n\n  const writeTrackOffset = useCallback((offset: number) => {\n    visualOffsetRef.current = offset;\n\n    if (trackRef.current) {\n      trackRef.current.style.transform = `translate3d(${-offset}px, 0, 0)`;\n    }\n  }, []);\n\n  const getNearestPanelIndex = useCallback(\n    (offset: number) => {\n      let nearestIndex = 0;\n      let nearestDistance = Number.POSITIVE_INFINITY;\n\n      for (let index = 0; index <= layout.maxStartIndex; index += 1) {\n        const candidateOffset = clampOffset(layout.itemOffsets[index] ?? 0);\n\n        const distance = Math.abs(candidateOffset - offset);\n\n        if (distance < nearestDistance) {\n          nearestDistance = distance;\n          nearestIndex = index;\n        }\n      }\n\n      return nearestIndex;\n    },\n    [clampOffset, layout.itemOffsets, layout.maxStartIndex],\n  );\n\n  /**\n   * Animate to a panel using a damped spring.\n   *\n   * A little underdamping gives the motion a natural overshoot.\n   * The target remains a real, reachable item offset.\n   */\n  const animateToPanel = useCallback(\n    (fromOffset: number, targetPanel: number, initialVelocity: number) => {\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n        animationFrameRef.current = null;\n      }\n\n      const track = trackRef.current;\n      const ownerWindow =\n        viewportRef.current?.ownerDocument.defaultView ?? window;\n      const targetOffset = clampOffset(layout.itemOffsets[targetPanel] ?? 0);\n\n      if (\n        !track ||\n        ownerWindow.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n      ) {\n        writeTrackOffset(targetOffset);\n        track?.style.removeProperty(\"transition\");\n        setPanel(targetPanel);\n        setIsDragging(false);\n        setIsAnimating(false);\n        return;\n      }\n\n      track.style.transition = \"none\";\n\n      setIsDragging(false);\n      setIsAnimating(true);\n\n      let position = fromOffset;\n\n      // Preserve some release momentum without allowing extreme fling speeds.\n      let velocity = Math.max(-1800, Math.min(1800, initialVelocity * 0.4));\n\n      let previousTime = performance.now();\n\n      const stiffness = 230;\n      const damping = 24;\n\n      const animate = (now: number) => {\n        const deltaSeconds = Math.min((now - previousTime) / 1000, 1 / 30);\n\n        previousTime = now;\n\n        const springAcceleration = (targetOffset - position) * stiffness;\n\n        const dampingAcceleration = velocity * damping;\n\n        velocity += (springAcceleration - dampingAcceleration) * deltaSeconds;\n\n        position += velocity * deltaSeconds;\n\n        const viewportWidth = viewportRef.current?.clientWidth ?? 1;\n\n        writeTrackOffset(\n          rubberBandOffset(position, layout.maxOffset, viewportWidth),\n        );\n\n        const positionSettled = Math.abs(targetOffset - position) < 0.5;\n\n        const velocitySettled = Math.abs(velocity) < 10;\n\n        if (positionSettled && velocitySettled) {\n          animationFrameRef.current = null;\n\n          writeTrackOffset(targetOffset);\n          track.style.removeProperty(\"transition\");\n\n          setPanel(targetPanel);\n          setIsAnimating(false);\n\n          return;\n        }\n\n        animationFrameRef.current = requestAnimationFrame(animate);\n      };\n\n      animationFrameRef.current = requestAnimationFrame(animate);\n    },\n    [\n      clampOffset,\n      layout.itemOffsets,\n      layout.maxOffset,\n      setPanel,\n      writeTrackOffset,\n    ],\n  );\n\n  const handlePointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (!event.isPrimary || dragRef.current) {\n        return;\n      }\n\n      if (event.pointerType === \"mouse\" && event.button !== 0) {\n        return;\n      }\n\n      if (layout.maxOffset <= 0) {\n        return;\n      }\n\n      const track = trackRef.current;\n      const viewport = viewportRef.current;\n      const ownerWindow = viewport?.ownerDocument.defaultView ?? window;\n\n      if (!track || !viewport || !ownerWindow) {\n        return;\n      }\n\n      const interruptedAnimation = animationFrameRef.current !== null;\n\n      if (animationFrameRef.current !== null) {\n        cancelAnimationFrame(animationFrameRef.current);\n        animationFrameRef.current = null;\n      }\n\n      /*\n       * Read the currently displayed offset before disabling the CSS\n       * transition. This also handles starting a drag during an animation.\n       */\n      const startOffset = readRenderedOffset(track, visualOffsetRef.current);\n\n      track.style.transition = \"none\";\n      writeTrackOffset(startOffset);\n\n      setIsAnimating(false);\n      setIsDragging(true);\n\n      const startTime = performance.now();\n\n      const drag: DragState = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startOffset,\n        currentOffset: startOffset,\n        renderedOffset: startOffset,\n        hasMoved: false,\n        interruptedAnimation,\n        samples: [\n          {\n            x: event.clientX,\n            time: startTime,\n          },\n        ],\n      };\n\n      dragRef.current = drag;\n\n      const updatePointerPosition = (pointerEvent: PointerEvent) => {\n        const deltaX = pointerEvent.clientX - drag.startX;\n\n        if (!drag.hasMoved && Math.abs(deltaX) <= 4) {\n          return;\n        }\n\n        drag.hasMoved = true;\n\n        // Positive offset means the content moves to the left.\n        drag.currentOffset = drag.startOffset - deltaX;\n\n        drag.renderedOffset = rubberBandOffset(\n          drag.currentOffset,\n          layout.maxOffset,\n          viewport.clientWidth,\n        );\n\n        const now = performance.now();\n\n        drag.samples.push({\n          x: pointerEvent.clientX,\n          time: now,\n        });\n\n        // Retain a short history for release-velocity estimation.\n        while (drag.samples.length > 2 && now - drag.samples[1].time > 120) {\n          drag.samples.shift();\n        }\n\n        writeTrackOffset(drag.renderedOffset);\n\n        if (pointerEvent.cancelable) {\n          pointerEvent.preventDefault();\n        }\n      };\n\n      const cleanup = () => {\n        ownerWindow.removeEventListener(\"pointermove\", handleWindowPointerMove);\n        ownerWindow.removeEventListener(\"pointerup\", handleWindowPointerUp);\n        ownerWindow.removeEventListener(\n          \"pointercancel\",\n          handleWindowPointerCancel,\n        );\n        ownerWindow.removeEventListener(\"blur\", handleWindowBlur);\n\n        if (pointerCleanupRef.current === cleanup) {\n          pointerCleanupRef.current = null;\n        }\n      };\n\n      const settleCancelledDrag = () => {\n        if (dragRef.current !== drag) {\n          return;\n        }\n\n        cleanup();\n        dragRef.current = null;\n        setIsDragging(false);\n\n        const targetPanel = getNearestPanelIndex(\n          clampOffset(drag.currentOffset),\n        );\n\n        animateToPanel(drag.renderedOffset, targetPanel, 0);\n      };\n\n      const handleWindowPointerMove = (pointerEvent: PointerEvent) => {\n        if (pointerEvent.pointerId !== drag.pointerId) {\n          return;\n        }\n\n        updatePointerPosition(pointerEvent);\n      };\n\n      const handleWindowPointerUp = (pointerEvent: PointerEvent) => {\n        if (pointerEvent.pointerId !== drag.pointerId) {\n          return;\n        }\n\n        // Include the final pointer position, even if no final move fired.\n        updatePointerPosition(pointerEvent);\n\n        cleanup();\n        dragRef.current = null;\n        setIsDragging(false);\n\n        if (!drag.hasMoved) {\n          if (drag.interruptedAnimation) {\n            const targetPanel = getNearestPanelIndex(\n              clampOffset(drag.startOffset),\n            );\n\n            animateToPanel(drag.startOffset, targetPanel, 0);\n          } else {\n            track.style.removeProperty(\"transition\");\n            writeTrackOffset(drag.startOffset);\n          }\n\n          return;\n        }\n\n        suppressClickRef.current = true;\n\n        ownerWindow.setTimeout(() => {\n          suppressClickRef.current = false;\n        }, 0);\n\n        const velocity = estimatePointerVelocity(drag.samples);\n\n        /*\n         * Project the release position forward. A fast swipe can skip\n         * multiple items, while a slow drag generally snaps nearby.\n         */\n        const projectedOffset = clampOffset(\n          clampOffset(drag.currentOffset) + velocity * 0.18,\n        );\n\n        const targetPanel = getNearestPanelIndex(projectedOffset);\n\n        animateToPanel(drag.renderedOffset, targetPanel, velocity);\n      };\n\n      const handleWindowPointerCancel = (pointerEvent: PointerEvent) => {\n        if (pointerEvent.pointerId === drag.pointerId) {\n          settleCancelledDrag();\n        }\n      };\n\n      const handleWindowBlur = () => {\n        settleCancelledDrag();\n      };\n\n      pointerCleanupRef.current = cleanup;\n\n      /*\n       * Listen on window instead of relying on events staying inside the\n       * viewport. Releasing outside the carousel still completes the drag.\n       */\n      ownerWindow.addEventListener(\"pointermove\", handleWindowPointerMove);\n      ownerWindow.addEventListener(\"pointerup\", handleWindowPointerUp);\n      ownerWindow.addEventListener(\"pointercancel\", handleWindowPointerCancel);\n      ownerWindow.addEventListener(\"blur\", handleWindowBlur);\n    },\n    [\n      animateToPanel,\n      clampOffset,\n      getNearestPanelIndex,\n      layout.maxOffset,\n      setIsAnimating,\n      writeTrackOffset,\n    ],\n  );\n\n  const handleClickCapture = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>) => {\n      if (!suppressClickRef.current) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      suppressClickRef.current = false;\n    },\n    [],\n  );\n\n  const isFirstPage = activePageIndex === 0;\n  const isLastPage =\n    layout.numberOfPages <= 1 || activePageIndex >= layout.numberOfPages - 1;\n\n  const currentPage = layout.numberOfPages > 0 ? activePageIndex : 0;\n\n  return (\n    <div\n      className={cn(\"puzzle-carousel\", className)}\n      style={cssVariables}\n      data-sizing={sizingMode}\n      data-dragging={isDragging ? \"true\" : \"false\"}\n      data-animating={isAnimating ? \"true\" : \"false\"}\n      data-single-page={layout.numberOfPages <= 1 ? \"true\" : \"false\"}\n      data-single-page-alignment={singlePageAlignment}\n      data-button-mobile={buttonAlignments.mobile}\n      data-button-tablet={buttonAlignments.tablet}\n      data-button-desktop={buttonAlignments.desktop}\n      data-pager-mobile={getPagerDataAttribute(pagerAlignments.mobile)}\n      data-pager-tablet={getPagerDataAttribute(\n        pagerAlignments.tablet ?? pagerAlignments.mobile,\n      )}\n      data-pager-desktop={getPagerDataAttribute(\n        pagerAlignments.desktop ??\n          pagerAlignments.tablet ??\n          pagerAlignments.mobile,\n      )}\n    >\n      <div className=\"puzzle-carousel__stage\">\n        <div className=\"puzzle-carousel__navigation puzzle-carousel__navigation--previous\">\n          {cloneNavigationButton(backButton, isFirstPage, goToPreviousPage)}\n        </div>\n\n        <div\n          ref={viewportRef}\n          className={cn(\"puzzle-carousel__viewport\", viewportClassName)}\n          style={viewportStyle}\n          role=\"group\"\n          aria-roledescription=\"carousel\"\n          aria-label={ariaLabel}\n          onPointerDown={handlePointerDown}\n          onClickCapture={handleClickCapture}\n          onDragStart={(event) => event.preventDefault()}\n        >\n          <div\n            ref={trackRef}\n            className=\"puzzle-carousel__track\"\n            style={{\n              transform: `translate3d(${-activeOffset}px, 0, 0)`,\n            }}\n          >\n            {items.map((item, index) => (\n              <div\n                key={getItemKey ? getItemKey(item, index) : index}\n                ref={(node) => {\n                  itemRefs.current[index] = node;\n                }}\n                className=\"puzzle-carousel__item\"\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-label={`${index + 1} of ${items.length}`}\n              >\n                {renderItem(item, index)}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"puzzle-carousel__navigation puzzle-carousel__navigation--next\">\n          {cloneNavigationButton(nextButton, isLastPage, goToNextPage)}\n        </div>\n      </div>\n\n      {renderPager && layout.numberOfPages > 0 && (\n        <div className=\"puzzle-carousel__pager\">\n          {renderPager(currentPage, layout.numberOfPages)}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport {\n  Carousel,\n  type CarouselProps,\n  type CarouselAlignment,\n  type CarouselButtonAlignment,\n  type CarouselPagerAlignment,\n  type CarouselAlignmentConfig,\n  type PagerAlignmentConfig,\n};\n"],"mappings":"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"}

package/dist/components/navigation/link/index.cjs

@@ -0,0 +1,40 @@
+"use client";
+;/* empty css           */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let _puzzle_ui_theme_components_context = require("@puzzle-ui/theme/components-context");
+// src/components/navigation/link/index.tsx
+const isThemeLinkComponentConfig = (value) => {
+	return typeof value === "object" && value !== null && "component" in value;
+};
+/**
+* Ensures links opening a new browsing context are protected
+* from reverse-tabnabbing.
+*/
+const resolveRel = (target, rel) => {
+	if (target !== "_blank") return rel;
+	const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+	tokens.add("noopener");
+	tokens.add("noreferrer");
+	return [...tokens].join(" ");
+};
+const Link = ({ href, className, componentProps, children, target, rel, ref, ...rest }) => {
+	const linkConfig = (0, _puzzle_ui_theme_components_context.useThemeComponents)()?.link;
+	const isConfigured = isThemeLinkComponentConfig(linkConfig);
+	const Component = isConfigured ? linkConfig.component : linkConfig ?? "a";
+	const hrefProp = isConfigured ? linkConfig.hrefProp ?? "href" : "href";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-link", className);
+	const elementProps = {
+		...componentProps,
+		...rest,
+		[hrefProp]: href,
+		ref,
+		target,
+		rel: resolveRel(target, rel),
+		className: classes
+	};
+	return (0, react.createElement)(Component, elementProps, children);
+};
+exports.Link = Link;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/navigation/link/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useThemeComponents","cn","createElement"],"sources":["../../../../src/components/navigation/link/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { useThemeComponents } from \"@puzzle-ui/theme/components-context\";\nimport type {\n  ThemeLinkComponent,\n  ThemeLinkComponentConfig,\n} from \"@puzzle-ui/theme\";\nimport type { LinkProps } from \"./types\";\nimport \"./link.css\";\n\nconst isThemeLinkComponentConfig = (\n  value: ThemeLinkComponent | undefined,\n): value is ThemeLinkComponentConfig => {\n  return typeof value === \"object\" && value !== null && \"component\" in value;\n};\n\n/**\n * Ensures links opening a new browsing context are protected\n * from reverse-tabnabbing.\n */\nconst resolveRel = (target?: string, rel?: string): string | undefined => {\n  if (target !== \"_blank\") {\n    return rel;\n  }\n\n  const tokens = new Set((rel ?? \"\").split(/\\s+/).filter(Boolean));\n\n  tokens.add(\"noopener\");\n  tokens.add(\"noreferrer\");\n\n  return [...tokens].join(\" \");\n};\n\nconst Link = ({\n  href,\n  className,\n  componentProps,\n  children,\n  target,\n  rel,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const components = useThemeComponents();\n  const linkConfig = components?.link;\n\n  const isConfigured = isThemeLinkComponentConfig(linkConfig);\n\n  const Component = isConfigured ? linkConfig.component : (linkConfig ?? \"a\");\n\n  const hrefProp = isConfigured ? (linkConfig.hrefProp ?? \"href\") : \"href\";\n\n  const classes = cn(\"puzzle-link\", className);\n\n  const elementProps = {\n    ...componentProps,\n    ...rest,\n    [hrefProp]: href,\n    ref,\n    target,\n    rel: resolveRel(target, rel),\n    className: classes,\n  };\n\n  return createElement(Component, elementProps as never, children);\n};\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;AAYA,MAAM,8BACJ,UACsC;CACtC,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,eAAe;AACvE;;;;;AAMA,MAAM,cAAc,QAAiB,QAAqC;CACxE,IAAI,WAAW,UACb,OAAO;CAGT,MAAM,SAAS,IAAI,KAAK,OAAO,GAAA,CAAI,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,CAAC;CAE/D,OAAO,IAAI,UAAU;CACrB,OAAO,IAAI,YAAY;CAEvB,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,KAAK,GAAG;AAC7B;AAEA,MAAM,QAAQ,EACZ,MACA,WACA,gBACA,UACA,QACA,KACA,KACA,GAAG,WACY;CAEf,MAAM,cAAA,GADaA,oCAAAA,mBAAAA,CACS,CAAC,EAAE;CAE/B,MAAM,eAAe,2BAA2B,UAAU;CAE1D,MAAM,YAAY,eAAe,WAAW,YAAa,cAAc;CAEvE,MAAM,WAAW,eAAgB,WAAW,YAAY,SAAU;CAElE,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CAAG,eAAe,SAAS;CAE3C,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;GACF,WAAW;EACZ;EACA;EACA,KAAK,WAAW,QAAQ,GAAG;EAC3B,WAAW;CACb;CAEA,QAAA,GAAOC,MAAAA,cAAAA,CAAc,WAAW,cAAuB,QAAQ;AACjE"}

package/dist/components/navigation/link/index.d.cts

@@ -0,0 +1,3 @@
+import { LinkProps } from "./types.cjs";
+declare const Link: ({ href, className, componentProps, children, target, rel, ref, ...rest }: LinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Link, type LinkProps };

package/dist/components/navigation/link/index.d.ts

@@ -0,0 +1,3 @@
+import { LinkProps } from "./types.js";
+declare const Link: ({ href, className, componentProps, children, target, rel, ref, ...rest }: LinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export { Link, type LinkProps };