@carouseldeck/react-18 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -35,15 +35,17 @@ interface RootBaseProps extends ComponentProps<'div'> {
      * Defaults to horizontal. */
     orientation?: Orientation;
     /** Whether scrolling past the last snap point arrives at the first, and
-     * back, with no visible jump: Prev and Next are then never disabled.
-     * `Deck.Viewport` renders a copy of every slide on each side of the
-     * slides, inert and `aria-hidden`, and the deck jumps from a copy to its
-     * slide once it rests (clone and jump, ADR-0006, as built in ADR-0009).
-     * Indexes, Dots and Counter count the slides' snap points only, never the
-     * copies'. A copy renders the slide's children again, so their state is
-     * their own and an `id` in a slide repeats; `useSlide` tells them whether
-     * they are in a copy. A deck whose slides all fit does not loop and renders
-     * no copies. Defaults to false. */
+     * back, with no visible jump: Prev and Next are then never disabled. Each
+     * slide's children mount once: `Deck.Viewport` moves the slide nearest the
+     * viewport onto empty, inert, `aria-hidden` shells that carry the snap
+     * points on each side of it, by `translate` (ADR-0013). A deck whose set
+     * of slides is too narrow for a shell to have room beside its own slide
+     * falls back to rendering full copies instead (clone and jump, ADR-0006,
+     * as built in ADR-0009): a copy renders the slide's children again, so
+     * their state is their own and an `id` in a slide repeats; `useSlide`
+     * tells them whether they are in one. Indexes, Dots and Counter count the
+     * slides' snap points only, never a shell's or a copy's. A deck whose
+     * slides all fit does not loop and renders neither. Defaults to false. */
     loop?: boolean;
     /** Moves the deck one snap point on every this many milliseconds, counted
      * from when it comes to rest, and stops at the last, unless the deck
@@ -88,12 +90,14 @@ export interface UseSlideResult {
 }
 /** The slide a component is rendered in: its index, and whether it is a
  * loop's copy, so stateful content, such as a video player, can render
- * differently in a copy, which is inert and never focal. Throws outside a
- * `Deck.Slide`. */
+ * differently in a copy, which is inert and never focal. Each slide mounts
+ * once: `copy` is undefined unless the deck's set of slides is too narrow
+ * for shells and falls back to rendering copies (ADR-0013). Throws outside
+ * a `Deck.Slide`. */
 export declare function useSlide(): UseSlideResult;
 /**
  * A transition built on progress while the viewport keeps scrolling natively
- * (CONTEXT.md), passed to `Deck.Viewport`'s `effect`. Each effect is its own
+ * (GLOSSARY.md), passed to `Deck.Viewport`'s `effect`. Each effect is its own
  * entry point, such as `@carouseldeck/react/fade`, so a deck that imports none
  * ships none of their code.
  */
@@ -105,11 +109,13 @@ export interface Effect {
      * CSS overrides any of them (ADR-0003). */
     css: string;
     /** The structural styles the effect needs, set inline as the deck's own
-     * are, for a deck of `count` slides, a loop's copies included. With
-     * `target`, the viewport holds an empty snap target per slide, and per
-     * copy, in the order they run, after the slides, styled by it: the slides
-     * stack in one place, the engine measures each by its target, and every
-     * slide but the focal one is inert, as it cannot be seen. */
+     * are, for a deck of `count` slides: with loop, a small deck's three sets
+     * of copies, or, with shells (ADR-0013), all five sets of them instead,
+     * each a shell rather than a copy. With `target`, the viewport holds an
+     * empty snap target per slide, per copy or per shell, in the order they
+     * run, after the slides, styled by it: the slides stack in one place, the
+     * engine measures each by its target, and every slide but the focal one
+     * is inert, as it cannot be seen. */
     layout?: (orientation: Orientation, count: number) => {
         viewport?: CSSProperties;
         slide?: CSSProperties;
@@ -122,10 +128,16 @@ export interface ViewportProps extends ComponentProps<'div'> {
     effect?: Effect;
 }
 /** The native scroll container. Its children are the deck's slides; with
- * `loop`, a copy of every slide on each side of them; an `effect` may add a
- * snap target after them for each. */
+ * `loop`, two in-flow spacers and empty shells carrying their snap points on
+ * each side of them (ADR-0013), or, where the set of slides is too narrow
+ * for a shell to have room beside its own slide, a copy of every slide on
+ * each side instead; an `effect` may add a snap target after them for each
+ * slide, copy or shell. */
 export declare function Viewport({ style, children, effect, ...props }: ViewportProps): import("react").JSX.Element;
 /** One slide, labelled "n of m". Its size and alignment are consumer CSS.
+ * With loop, it mounts once: shells carry its snap points on each side, and
+ * `translate` moves it onto whichever is nearest the viewport (ADR-0013); a
+ * deck too narrow for shells copies it instead.
  * For CSS to read, it carries `--deck-slide-index`, its index, and
  * `--deck-slide-count`, the number of slides, copies not counted, from the
  * first render; `--deck-slide-progress`, its signed distance from the focal

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { Children as e, Fragment as t, createContext as n, forwardRef as r, isValidElement as i, useContext as a, useEffect as o, useEffect as s, useImperativeHandle as c, useLayoutEffect as l, useRef as u, useState as d, version as f } from "react";
-import { COPY as p, SNAP_TARGET as m, createDeck as h } from "@carouseldeck/core";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { COPY as p, SHELL as m, SNAP_TARGET as h, SPACER as g, createDeck as _ } from "@carouseldeck/core";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/with-ref.ts
-function y(e, t) {
+function x(e, t) {
 	let n = r((t, n) => e(n === null ? t : {
 		...t,
 		ref: n
@@ -13,8 +13,8 @@ function y(e, t) {
 //#endregion
 //#region src/react.ts
 process.env.NODE_ENV !== "production" && !f.startsWith("18.") && console.error(`@carouseldeck/react-18 is for React 18, and this is React ${f}. Use @carouseldeck/react with React 19.`);
-var b = (e) => n(e).Provider, x = (e) => a(e._context), S = typeof window > "u" ? o : l, C = (e) => typeof e == "object" && !!e && e.type === "style";
-function w(e) {
+var S = (e) => n(e).Provider, C = (e) => a(e._context), w = typeof window > "u" ? o : l, T = (e) => typeof e == "object" && !!e && e.type === "style";
+function E(e) {
 	return (t, n, r) => {
 		if (typeof t != "string") return e(t, n, r);
 		let i = n;
@@ -35,8 +35,8 @@ function w(e) {
 			};
 		}
 		if ("data-carouseldeck-viewport" in i && Array.isArray(i.children)) {
-			let e = i.children, n = e.map((e) => C(e) ? e : null), a = e.map((e) => C(e) ? null : e);
-			return v(g, { children: [...n, v(t, {
+			let e = i.children, n = e.map((e) => T(e) ? e : null), a = e.map((e) => T(e) ? null : e);
+			return b(v, { children: [...n, b(t, {
 				...i,
 				children: a
 			})] }, r);
@@ -44,184 +44,192 @@ function w(e) {
 		return e(t, i, r);
 	};
 }
-var T = w(_), ee = w(v), E = b(null);
+var D = E(y), ee = E(b), O = S(null);
 //#endregion
 //#region ../react/src/slides-in.ts
-function te(n, r) {
+function k(n, r) {
 	for (let a of e.toArray(n)) {
 		if (!i(a)) continue;
 		if (a.type === r) return e.toArray(a.props.children).length;
 		if (typeof a.type != "string" && a.type !== t) continue;
-		let n = te(a.props.children, r);
+		let n = k(a.props.children, r);
 		if (n !== null) return n;
 	}
 	return null;
 }
 //#endregion
 //#region ../react/src/index.tsx
-var D = (e, t) => Math.min(Math.max(e, 0), t - 1), ne = b(null);
-function O(e) {
-	let t = x(ne);
+var A = (e, t) => Math.min(Math.max(e, 0), t - 1), j = -.9985;
+function M(e, t) {
+	let n = e;
+	for (; n <= j;) n += t;
+	for (; n > j + t;) n -= t;
+	return n;
+}
+var te = S(null);
+function N(e) {
+	let t = C(te);
 	if (!t) throw Error(`Deck.${e} must be inside Deck.Root`);
 	return t;
 }
-function k({ index: e, defaultIndex: t, onIndexChange: n, handleRef: r, drag: i = !0, onFocalChange: a, clickToFocus: o = !1, orientation: l = "horizontal", loop: f = !1, autoplay: p, children: m, onFocus: g, onPointerEnter: _, onPointerLeave: v, onPointerDown: y, onKeyDown: b, onWheel: C, ...w }) {
-	let [O] = d(() => {
+function P({ index: e, defaultIndex: t, onIndexChange: n, handleRef: r, drag: i = !0, onFocalChange: a, clickToFocus: o = !1, orientation: l = "horizontal", loop: f = !1, autoplay: p, children: m, onFocus: h, onPointerEnter: g, onPointerLeave: v, onPointerDown: y, onKeyDown: b, onWheel: x, ...S }) {
+	let [T] = d(() => {
 		let n = e ?? t ?? 0;
 		return Number.isFinite(n) ? n : 0;
 	});
-	process.env.NODE_ENV !== "production" && ae(e, t, n);
-	let [k, A] = d({
-		index: O,
+	process.env.NODE_ENV !== "production" && ie(e, t, n);
+	let [E, j] = d({
+		index: T,
 		count: null,
 		slide: null,
-		focal: null
-	}), j = u(null), M = u(null), N = u(n), P = u(a), F = u(e), I = u(null), R = u(l), [oe, z] = d(""), [B, V] = d(!0), [H, U] = d(!1), [se, ce] = d(!1), W = u(!1), K = u(!1), q = u(!1), J = u(null);
-	S(() => {
-		N.current = n, P.current = a, F.current = e;
-	}), S(() => {
-		let e = j.current;
+		focal: null,
+		copies: !1
+	}), M = u(null), N = u(null), P = u(n), F = u(a), I = u(e), L = u(null), R = u(l), [ae, oe] = d(""), [z, B] = d(!0), [se, V] = d(!1), [U, ce] = d(!1), W = u(!1), G = u(!1), K = u(!1), q = u(null);
+	w(() => {
+		P.current = n, F.current = a, I.current = e;
+	}), w(() => {
+		let e = M.current;
 		if (!e) throw Error("Deck.Root must contain a Deck.Viewport");
-		let t, n, r = h(e, {
-			index: O,
+		let t, n, r = _(e, {
+			index: T,
 			orientation: R.current,
 			onChange(r) {
-				A(r);
-				let i = F.current;
-				t !== void 0 && r.index !== t && (i === void 0 || r.index !== D(i, r.count)) && (I.current = r.index, N.current?.(r.index)), t !== void 0 && r.index !== t && (K.current = !1, z(r.slide === -1 || q.current ? "" : `Slide ${r.slide + 1} of ${ie(e)}`)), t = r.index, n !== void 0 && r.focal !== n && P.current?.(r.focal), n = r.focal;
+				j(r);
+				let i = I.current;
+				t !== void 0 && r.index !== t && (i === void 0 || r.index !== A(i, r.count)) && (L.current = r.index, P.current?.(r.index)), t !== void 0 && r.index !== t && (G.current = !1, oe(r.slide === -1 || K.current ? "" : `Slide ${r.slide + 1} of ${re(e)}`)), t = r.index, n !== void 0 && r.focal !== n && F.current?.(r.focal), n = r.focal;
 			}
 		});
-		return M.current = r, () => {
-			r.destroy(), M.current = null;
+		return N.current = r, () => {
+			r.destroy(), N.current = null;
 		};
-	}, [O]), S(() => {
-		M.current?.setDrag(i);
-	}, [i]), S(() => {
-		M.current?.setClickToFocus(o);
-	}, [o]), S(() => {
-		R.current = l, M.current?.setOrientation(l);
+	}, [T]), w(() => {
+		N.current?.setDrag(i);
+	}, [i]), w(() => {
+		N.current?.setClickToFocus(o);
+	}, [o]), w(() => {
+		R.current = l, N.current?.setOrientation(l);
 	}, [l]);
-	let Y = u(e);
-	S(() => {
-		let t = M.current, n = e !== Y.current;
-		n && (q.current = !1, J.current = null), Y.current = e;
-		let r = I.current;
-		if (I.current = null, e !== void 0 && k.count !== null && t) {
-			let i = D(e, k.count), a = t.target();
-			i !== (a ?? k.index) && (i !== r || a === null) && t.scrollTo(e, n ? "direct" : "short");
+	let J = u(e);
+	w(() => {
+		let t = N.current, n = e !== J.current;
+		n && (K.current = !1, q.current = null), J.current = e;
+		let r = L.current;
+		if (L.current = null, e !== void 0 && E.count !== null && t) {
+			let i = A(e, E.count), a = t.target();
+			i !== (a ?? E.index) && (i !== r || a === null) && t.scrollTo(e, n ? "direct" : "short");
 		}
 	}, [
 		e,
-		k.index,
-		k.count
+		E.index,
+		E.count
 	]);
-	let X = p !== void 0;
-	S(() => {
-		if (!X) return;
+	let Y = p !== void 0;
+	w(() => {
+		if (!Y) return;
 		let e = matchMedia("(prefers-reduced-motion: reduce)"), t = () => {
-			e.matches && V(!1);
+			e.matches && B(!1);
 		};
 		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, [X]), s(() => {
-		if (!X) return;
+	}, [Y]), s(() => {
+		if (!Y) return;
 		let e = () => ce(document.visibilityState === "hidden");
 		return e(), document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
-	}, [X]);
-	let Z = X && B && !H && !se && k.count !== null && !L(k.count);
+	}, [Y]);
+	let X = Y && z && !se && !U && E.count !== null && !H(E.count);
 	s(() => {
-		if (!Z) return;
+		if (!X) return;
 		let e, t = () => {
-			K.current = !0, J.current = null, V(!1);
+			G.current = !0, q.current = null, B(!1);
 		}, n = () => {
-			let r = M.current;
+			let r = N.current;
 			if (r) {
 				if (r.target() !== null || W.current || document.visibilityState === "hidden") {
 					e = setTimeout(n, p);
 					return;
 				}
-				if (J.current === k.index) {
+				if (q.current === E.index) {
 					t();
 					return;
 				}
-				J.current = k.index, q.current = !0, r.next(), r.target() === null && t();
+				q.current = E.index, K.current = !0, r.next(), r.target() === null && t();
 			}
 		};
 		return e = setTimeout(n, p), () => clearTimeout(e);
 	}, [
-		Z,
+		X,
 		p,
-		k.index
+		E.index
 	]);
 	let le = () => {
-		if (B) {
-			V(!1);
+		if (z) {
+			B(!1);
 			return;
 		}
-		J.current = null, K.current && (K.current = !1, q.current = !0, M.current?.scrollTo(0)), V(!0);
-	}, Q = ({ target: e }) => {
+		q.current = null, G.current && (G.current = !1, K.current = !0, N.current?.scrollTo(0)), B(!0);
+	}, Z = ({ target: e }) => {
 		let t = e;
-		t.closest("[data-carouseldeck-autoplay-toggle]") || (j.current?.contains(t) ? ue() : $());
-	}, $ = () => (q.current = !1, J.current = null, M.current), ue = () => (X && V(!1), $());
+		t.closest("[data-carouseldeck-autoplay-toggle]") || (M.current?.contains(t) ? $() : Q());
+	}, Q = () => (K.current = !1, q.current = null, N.current), $ = () => (Y && B(!1), Q());
 	c(r, () => ({
-		scrollTo: (e) => $()?.scrollTo(e),
-		next: () => $()?.next(),
-		prev: () => $()?.prev()
+		scrollTo: (e) => Q()?.scrollTo(e),
+		next: () => Q()?.next(),
+		prev: () => Q()?.prev()
 	}), []);
-	let de = x(E), fe = k.count === null ? te(m, G) ?? de : null;
-	return /* @__PURE__ */ T(E, {
+	let de = C(O), fe = E.count === null ? k(m, ue) ?? de : null;
+	return /* @__PURE__ */ D(O, {
 		value: null,
-		children: /* @__PURE__ */ T(ne, {
+		children: /* @__PURE__ */ D(te, {
 			value: {
-				...k,
+				...E,
 				slides: fe,
-				initialIndex: O,
+				initialIndex: T,
 				orientation: l,
 				loop: f,
-				viewportRef: j,
-				engineRef: M,
-				hasAutoplay: X,
-				playing: B,
+				viewportRef: M,
+				engineRef: N,
+				hasAutoplay: Y,
+				playing: z,
 				togglePlaying: le,
-				userMove: ue
+				userMove: $
 			},
 			children: /* @__PURE__ */ ee("div", {
 				role: "region",
 				"aria-roledescription": "carousel",
-				"data-index": k.index,
-				...w,
+				"data-index": E.index,
+				...S,
 				onFocus: (e) => {
-					g?.(e);
+					h?.(e);
 					let t = e.target;
-					for (; t && t.parentElement !== j.current;) t = t.parentElement;
-					t && !t.contains(e.relatedTarget) && M.current?.target() != null && $(), X && !e.target.closest("[data-carouseldeck-autoplay-toggle]") && V(!1);
+					for (; t && t.parentElement !== M.current;) t = t.parentElement;
+					t && !t.contains(e.relatedTarget) && N.current?.target() != null && Q(), Y && !e.target.closest("[data-carouseldeck-autoplay-toggle]") && B(!1);
 				},
 				onPointerEnter: (e) => {
-					_?.(e), W.current = !0, X && U(!0);
+					g?.(e), W.current = !0, Y && V(!0);
 				},
 				onPointerLeave: (e) => {
-					v?.(e), W.current = !1, X && U(!1);
+					v?.(e), W.current = !1, Y && V(!1);
 				},
 				onPointerDown: (e) => {
-					y?.(e), Q(e);
+					y?.(e), Z(e);
 				},
 				onKeyDown: (e) => {
-					b?.(e), Q(e);
+					b?.(e), Z(e);
 				},
 				onWheel: (e) => {
-					C?.(e), Q(e);
+					x?.(e), Z(e);
 				},
-				children: [m, /* @__PURE__ */ T("div", {
-					"aria-live": Z ? "off" : "polite",
+				children: [m, /* @__PURE__ */ D("div", {
+					"aria-live": X ? "off" : "polite",
 					"aria-atomic": "true",
 					"data-carouseldeck-live": "",
-					style: re,
-					children: oe
+					style: ne,
+					children: ae
 				})]
 			})
 		})
 	});
 }
-var re = {
+var ne = {
 	position: "absolute",
 	width: 1,
 	height: 1,
@@ -231,8 +239,8 @@ var re = {
 	clip: "rect(0 0 0 0)",
 	whiteSpace: "nowrap",
 	border: 0
-}, ie = (e) => [...e.children].filter((e) => !e.hasAttribute(m) && !e.hasAttribute(p)).length;
-function ae(e, t, n) {
+}, re = (e) => [...e.children].filter((e) => !e.hasAttribute(h) && !e.hasAttribute(p) && !e.hasAttribute(m) && !e.hasAttribute(g)).length;
+function ie(e, t, n) {
 	let r = e !== void 0, [i] = d(r), a = r && t !== void 0, o = r !== i, c = r && n === void 0, l = u(/* @__PURE__ */ new Set());
 	s(() => {
 		let e = (e, t) => {
@@ -246,16 +254,16 @@ function ae(e, t, n) {
 		i
 	]);
 }
-var A = b(null);
-function j() {
-	let e = x(A);
+var F = S(null);
+function I() {
+	let e = C(F);
 	if (!e) throw Error("Deck.useSlide must be inside Deck.Slide");
 	return {
 		index: e.index,
 		copy: e.copy
 	};
 }
-var M = {
+var L = {
 	horizontal: {
 		display: "flex",
 		overflowX: "auto",
@@ -268,80 +276,138 @@ var M = {
 		scrollSnapType: "y mandatory"
 	}
 };
-function N({ style: n, children: r, effect: a, ...o }) {
-	let { viewportRef: s, engineRef: c, orientation: l, loop: u, count: d, initialIndex: f } = O("Viewport"), p = e.toArray(r), m = u && !L(d), h = p.length * (m ? 3 : 1), g = a?.layout?.(l, h), _ = g?.target, v = _ !== void 0, y = D(f, p.length), b = p.map((e) => i(e) ? e.key : "").join();
-	S(() => {
+function R({ style: n, children: r, effect: a, ...o }) {
+	let { viewportRef: s, engineRef: c, orientation: l, loop: u, count: d, initialIndex: f, copies: p } = N("Viewport"), m = l === "vertical", h = e.toArray(r), g = u && !H(d), _ = g && !p, v = g && p, y = a?.layout?.(l, h.length)?.target !== void 0, b = h.length * (v ? 3 : _ && y ? 5 : 1), x = a?.layout?.(l, b), S = x?.target, C = A(f, h.length), T = _ && !y, E = (e) => T ? Math.max(-2, Math.min(2, Math.floor((C - e) / h.length + .5))) : 0, O = _ && y, k = h.map((e) => i(e) ? e.key : "").join();
+	w(() => {
 		c.current?.refresh();
 	}, [
 		c,
-		p.length,
-		m,
+		h.length,
 		v,
-		b
+		_,
+		y,
+		k
 	]);
-	let x = (e) => p.map((t, n) => /* @__PURE__ */ T(A, {
-		value: {
-			index: n,
-			count: p.length,
-			stacked: v,
-			style: e === "before" ? {
-				...g?.slide,
-				order: -1
-			} : g?.slide,
-			progress: n - y + (e === "after" ? p.length : e ? -p.length : 0),
-			copy: e
-		},
-		children: t
-	}, i(t) ? t.key : n));
+	let j = (e) => h.map((t, n) => {
+		let r = E(n);
+		return /* @__PURE__ */ D(F, {
+			value: {
+				index: n,
+				count: h.length,
+				stacked: y,
+				style: e === "before" ? {
+					...x?.slide,
+					order: -1
+				} : x?.slide,
+				progress: O ? M(n - C, h.length) : n - C + (e === "after" ? h.length : e ? -h.length : r * h.length),
+				placed: !O && r !== 0 ? r * h.length : void 0,
+				copy: e
+			},
+			children: t
+		}, i(t) ? t.key : n);
+	});
 	return /* @__PURE__ */ ee("div", {
 		ref: s,
 		tabIndex: 0,
 		"data-carouseldeck-viewport": "",
 		"data-orientation": l,
 		"data-carouseldeck-effect": a?.name,
+		"data-carouseldeck-loop": g ? _ ? "shells" : "copies" : void 0,
 		style: {
-			...M[l],
-			...g?.viewport,
+			...L[l],
+			...x?.viewport,
 			...n
 		},
 		...o,
 		children: [
-			/* @__PURE__ */ T("style", {
+			/* @__PURE__ */ D("style", {
 				href: "carouseldeck-slide",
 				precedence: "carouseldeck",
-				children: P
+				children: B
 			}),
-			a && /* @__PURE__ */ T("style", {
+			a && /* @__PURE__ */ D("style", {
 				href: `carouseldeck-${a.name}`,
 				precedence: "carouseldeck",
 				children: a.css
 			}),
-			x(),
-			m && /* @__PURE__ */ T(t, { children: x("after") }, "after"),
-			m && /* @__PURE__ */ T(t, { children: x("before") }, "before"),
-			_ && Array.from({ length: h }, (e, t) => /* @__PURE__ */ T("div", {
+			j(),
+			v && /* @__PURE__ */ D(t, { children: j("after") }, "after"),
+			v && /* @__PURE__ */ D(t, { children: j("before") }, "before"),
+			_ && !y && /* @__PURE__ */ D("div", {
+				"data-carouseldeck-spacer": "before",
+				"aria-hidden": "true",
+				style: z(!0, h.length)
+			}),
+			_ && !y && /* @__PURE__ */ D("div", {
+				"data-carouseldeck-spacer": "after",
+				"aria-hidden": "true",
+				style: z(!1, h.length)
+			}),
+			_ && ae.flatMap((e) => Array.from({ length: h.length }, (t, n) => /* @__PURE__ */ D("div", {
+				"data-carouseldeck-shell": e,
+				"data-carouseldeck-snap-target": y ? "" : void 0,
+				"aria-hidden": "true",
+				inert: !0,
+				style: y ? S?.((e + 2) * h.length + n) : {
+					...oe,
+					[m ? "insetBlockStart" : "insetInlineStart"]: `${((e + 2) * h.length + n) * 100}%`
+				}
+			}, `shell:${e}:${n}`))),
+			S && !O && Array.from({ length: b }, (e, t) => /* @__PURE__ */ D("div", {
 				"aria-hidden": "true",
 				"data-carouseldeck-snap-target": "",
-				style: _(t)
+				style: S(t)
 			}, `target-${t}`))
 		]
 	});
 }
-var P = ":where([data-carouseldeck-slide]){width:100%;scroll-snap-align:start}:where([data-orientation=vertical]>[data-carouseldeck-slide]){height:100%}:where([data-carouseldeck-viewport]){scrollbar-width:none}@supports not (scrollbar-width:none){:where([data-carouseldeck-viewport])::-webkit-scrollbar{display:none}}", F = { scrollInitialTarget: "nearest" };
-function I({ style: e, ...t }) {
-	let n = O("Slide"), r = x(A);
+var ae = [
+	-2,
+	-1,
+	0,
+	1,
+	2
+], oe = {
+	position: "absolute",
+	margin: 0,
+	padding: 0,
+	border: 0,
+	scale: "none",
+	rotate: "none",
+	translate: "none",
+	opacity: 0,
+	pointerEvents: "none",
+	scrollSnapAlign: "none"
+}, z = (e, t) => ({
+	...e && { order: -1 },
+	flexGrow: 0,
+	flexShrink: 0,
+	margin: 0,
+	padding: 0,
+	border: 0,
+	scale: "none",
+	rotate: "none",
+	translate: "none",
+	opacity: 0,
+	pointerEvents: "none",
+	scrollSnapAlign: "none",
+	...e ? { "--carouseldeck-spacer-estimate": `${2 * t * 100}%` } : { flexBasis: `${2 * t * 100}%` }
+}), B = ":where([data-carouseldeck-slide]){width:100%;scroll-snap-align:start}:where([data-orientation=vertical]>[data-carouseldeck-slide]){height:100%}:where([data-carouseldeck-viewport]){scrollbar-width:none}:where([data-carouseldeck-loop=shells]){position:relative}:where([data-carouseldeck-loop=shells]){overflow-anchor:none}:where([data-carouseldeck-placed]){translate:calc(var(--carouseldeck-placed) * 100%) 0}:where([data-carouseldeck-placed]:dir(rtl)){translate:calc(var(--carouseldeck-placed) * -100%) 0}:where([data-orientation=vertical]>[data-carouseldeck-placed]){translate:0 calc(var(--carouseldeck-placed) * 100%)}@supports (scroll-initial-target: nearest) {:where([data-carouseldeck-spacer=\"before\"]){flex-basis:var(--carouseldeck-spacer-estimate)}}@supports not (scrollbar-width:none){:where([data-carouseldeck-viewport])::-webkit-scrollbar{display:none}}", se = { scrollInitialTarget: "nearest" };
+function V({ style: e, ...t }) {
+	let n = N("Slide"), r = C(F);
 	if (!r) throw Error("Deck.Slide must be inside Deck.Viewport");
-	let { index: i, count: a, stacked: o, copy: s } = r, c = !s && i === D(n.initialIndex, a), l = !s && (n.slide === null ? c : i === n.slide), u = !s && (n.focal === null ? c : i === n.focal), d = s !== void 0 || o && !u, { viewportRef: f } = n;
-	return S(() => {
+	let { index: i, count: a, stacked: o, copy: s } = r, c = !s && i === A(n.initialIndex, a), l = !s && (n.slide === null ? c : i === n.slide), u = !s && (n.focal === null ? c : i === n.focal), d = s !== void 0 || o && !u, { viewportRef: f } = n;
+	return w(() => {
 		if (!d) return;
 		let e = f.current, t = document.activeElement?.closest("[data-carouseldeck-slide][inert]");
 		e && t?.parentElement === e && e.focus({ preventScroll: !0 });
-	}, [d, f]), /* @__PURE__ */ T("div", {
+	}, [d, f]), /* @__PURE__ */ D("div", {
 		role: "group",
 		"aria-roledescription": "slide",
 		"aria-label": `${i + 1} of ${a}`,
 		"data-carouseldeck-slide": "",
 		"data-carouseldeck-copy": s,
+		"data-carouseldeck-placed": r.placed === void 0 ? void 0 : "",
 		"aria-hidden": s ? !0 : void 0,
 		"data-current": l ? "" : void 0,
 		"data-focal": u ? "" : void 0,
@@ -351,16 +417,17 @@ function I({ style: e, ...t }) {
 			"--deck-slide-index": i,
 			"--deck-slide-count": a,
 			"--deck-slide-progress": r.progress,
-			...c && F,
+			...r.placed !== void 0 && { "--carouseldeck-placed": r.placed },
+			...c && se,
 			...r.style,
 			...e
 		},
 		...t
 	});
 }
-var L = (e) => e !== null && e <= 1;
-function R(e) {
-	let t = O(e), { count: n, slides: r, loop: i, userMove: a } = t, o = n === null && r ? D(t.initialIndex, r) : t.index, s = L(n);
+var H = (e) => e !== null && e <= 1;
+function U(e) {
+	let t = N(e), { count: n, slides: r, loop: i, userMove: a } = t, o = n === null && r ? A(t.initialIndex, r) : t.index, s = H(n);
 	return {
 		index: o,
 		count: n,
@@ -373,11 +440,11 @@ function R(e) {
 		prev: () => a()?.prev()
 	};
 }
-function oe() {
-	return R("useDeck");
+function ce() {
+	return U("useDeck");
 }
-function z({ atEnd: e, step: t, label: n, onClick: r, disabled: i, children: a, ...o }) {
-	return /* @__PURE__ */ T("button", {
+function W({ atEnd: e, step: t, label: n, onClick: r, disabled: i, children: a, ...o }) {
+	return /* @__PURE__ */ D("button", {
 		type: "button",
 		...o,
 		disabled: e || i,
@@ -388,9 +455,9 @@ function z({ atEnd: e, step: t, label: n, onClick: r, disabled: i, children: a,
 		children: a ?? n
 	});
 }
-function B(e) {
-	let { fits: t, canPrev: n, prev: r } = R("Prev");
-	return t ? null : /* @__PURE__ */ T(q, {
+function G(e) {
+	let { fits: t, canPrev: n, prev: r } = U("Prev");
+	return t ? null : /* @__PURE__ */ D(Q, {
 		...e,
 		"data-carouseldeck-prev": "",
 		atEnd: !n,
@@ -398,9 +465,9 @@ function B(e) {
 		label: "Previous"
 	});
 }
-function V(e) {
-	let { fits: t, canNext: n, next: r } = R("Next");
-	return t ? null : /* @__PURE__ */ T(q, {
+function K(e) {
+	let { fits: t, canNext: n, next: r } = U("Next");
+	return t ? null : /* @__PURE__ */ D(Q, {
 		...e,
 		"data-carouseldeck-next": "",
 		atEnd: !n,
@@ -408,28 +475,28 @@ function V(e) {
 		label: "Next"
 	});
 }
-function H(e) {
-	let { index: t, count: n, slides: r, initialIndex: i, userMove: a } = O(e);
+function q(e) {
+	let { index: t, count: n, slides: r, initialIndex: i, userMove: a } = N(e);
 	return n !== null || r === null ? {
 		index: t,
 		count: n,
 		userMove: a
 	} : {
-		index: D(i, r),
+		index: A(i, r),
 		count: r,
 		userMove: a
 	};
 }
-function U(e) {
-	let { index: t, count: n, userMove: r } = H("Dots");
-	return L(n) ? null : /* @__PURE__ */ T("div", {
+function J(e) {
+	let { index: t, count: n, userMove: r } = q("Dots");
+	return H(n) ? null : /* @__PURE__ */ D("div", {
 		role: "group",
 		"aria-label": "Choose page",
 		...e,
 		"data-carouseldeck-dots": "",
 		"data-index": n === null ? void 0 : t,
 		"data-count": n ?? void 0,
-		children: Array.from({ length: n ?? 0 }, (e, n) => /* @__PURE__ */ T("button", {
+		children: Array.from({ length: n ?? 0 }, (e, n) => /* @__PURE__ */ D("button", {
 			type: "button",
 			"aria-label": `Go to page ${n + 1}`,
 			"aria-current": n === t ? "true" : void 0,
@@ -438,11 +505,11 @@ function U(e) {
 		}, n))
 	});
 }
-function se(e) {
-	let { index: t, count: n } = H("Counter");
-	if (L(n)) return null;
+function Y(e) {
+	let { index: t, count: n } = q("Counter");
+	if (H(n)) return null;
 	let r = n !== null;
-	return /* @__PURE__ */ T("span", {
+	return /* @__PURE__ */ D("span", {
 		...e,
 		"data-carouseldeck-counter": "",
 		"data-index": r ? t : void 0,
@@ -450,9 +517,9 @@ function se(e) {
 		children: r && `${t + 1} / ${n}`
 	});
 }
-function ce({ onClick: e, children: t, ...n }) {
-	let { hasAutoplay: r, playing: i, togglePlaying: a, count: o } = O("AutoplayToggle");
-	return !r || L(o) ? null : /* @__PURE__ */ T("button", {
+function X({ onClick: e, children: t, ...n }) {
+	let { hasAutoplay: r, playing: i, togglePlaying: a, count: o } = N("AutoplayToggle");
+	return !r || H(o) ? null : /* @__PURE__ */ D("button", {
 		type: "button",
 		...n,
 		"data-carouseldeck-autoplay-toggle": "",
@@ -463,6 +530,6 @@ function ce({ onClick: e, children: t, ...n }) {
 		children: t ?? (i ? "Stop slide rotation" : "Start slide rotation")
 	});
 }
-var W = y(k, "Root"), G = y(N, "Viewport"), K = y(I, "Slide"), q = y(z, "StepButton"), J = y(B, "Prev"), Y = y(V, "Next"), X = y(U, "Dots"), Z = y(se, "Counter"), le = y(ce, "AutoplayToggle");
+var le = x(P, "Root"), ue = x(R, "Viewport"), Z = x(V, "Slide"), Q = x(W, "StepButton"), $ = x(G, "Prev"), de = x(K, "Next"), fe = x(J, "Dots"), pe = x(Y, "Counter"), me = x(X, "AutoplayToggle");
 //#endregion
-export { le as AutoplayToggle, Z as Counter, X as Dots, Y as Next, J as Prev, W as Root, K as Slide, G as Viewport, oe as useDeck, j as useSlide };
+export { me as AutoplayToggle, pe as Counter, fe as Dots, de as Next, $ as Prev, le as Root, Z as Slide, ue as Viewport, ce as useDeck, I as useSlide };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@carouseldeck/react-18",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "@carouseldeck/react built for React 18: headless, composable carousel primitives on native scroll snap.",
   "license": "MIT",
-  "homepage": "https://slide.deck.cool",
+  "homepage": "https://carousel.deck.cool",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pedrosousa13/deck-cool.git",
@@ -38,7 +38,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@carouseldeck/core": "1.2.0"
+    "@carouseldeck/core": "1.3.0"
   },
   "peerDependencies": {
     "react": ">=18 <19",
@@ -50,7 +50,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "vite": "8.3.1",
-    "@carouseldeck/react": "1.2.0"
+    "@carouseldeck/react": "1.3.0"
   },
   "scripts": {
     "build": "vite build"