@plitzi/sdk-elements 0.37.9 → 0.38.1

package/dist/elements/provider/ApiContainer/Settings.mjs

@@ -12,18 +12,18 @@ import p from "@plitzi/plitzi-ui/Select";
 import re from "@plitzi/plitzi-ui/KVInput";
 import m from "@plitzi/plitzi-ui/Switch";
 //#region src/elements/provider/ApiContainer/Settings.tsx
-var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", headers: v = ne, when: y, subType: b = "", mockData: x = "{}", credentials: S = "same-origin", runtime: C = "client", connector: w = "", action: T = "", endpoint: ae = "", resource: oe = "", limit: se = "10", singleRecord: E = !1, filters: D = h, pagination: O = "none", pageParam: k = "page", renderWhileLoading: A = !1, cache: j = !1, staleTime: M = 30, gcTime: N = 300, refreshSeconds: P = 0, onUpdate: F }) => {
-	let { resolvedTheme: I } = l(), [L] = r("pageDefinitions"), [R] = r("connectors"), [z] = i("actions.catalog"), [B] = r("hasServerRendering"), [V, H] = ee(!1), U = C === "server", W = U ? T && !w ? "action" : "connector" : "client", [[G, K, q]] = a([
+var h = [], g = ({ query: g = "", method: ie = "get", accessToken: ae = "", headers: _ = ne, when: v, subType: y = "", mockData: b = "{}", credentials: x = "same-origin", runtime: S = "client", connector: C = "", action: w = "", endpoint: oe = "", resource: se = "", limit: ce = "10", singleRecord: T = !1, filters: E = h, pagination: D = "none", pageParam: O = "page", renderWhileLoading: k = !1, loadingSlot: A = "", cache: j = !1, staleTime: M = 30, gcTime: N = 300, refreshSeconds: P = 0, onUpdate: F }) => {
+	let { resolvedTheme: I } = l(), [L] = r("pageDefinitions"), [R] = r("connectors"), [z] = i("actions.catalog"), [B] = r("hasServerRendering"), [V, H] = ee(!1), U = S === "server", W = U ? w && !C ? "action" : "connector" : "client", [[G, K, q]] = a([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.currentPageId"
-	]), J = t((e) => (t) => F?.(e, t), [F]), ce = t((e) => F?.("query", e), [F]), le = t((e) => F?.("when", e), [F]), ue = t((e) => F?.("subType", e), [F]), de = t((e) => F?.("mockData", e), [F]), fe = t((e) => H(e.target.checked), []), pe = t((e, t) => F?.("headers", t), [F]), me = t((e) => {
+	]), J = t((e) => (t) => F?.(e, t), [F]), le = t((e) => F?.("query", e), [F]), ue = t((e) => F?.("when", e), [F]), de = t((e) => F?.("subType", e), [F]), fe = t((e) => F?.("mockData", e), [F]), pe = t((e) => H(e.target.checked), []), me = t((e, t) => F?.("headers", t), [F]), he = t((e) => {
 		if (e === "client") {
 			F?.("runtime", "client", !0);
 			return;
 		}
 		F?.("runtime", "server", !0), F?.(e === "action" ? "connector" : "action", "");
-	}, [F]), he = t((e) => F?.("singleRecord", e.target.checked), [F]), ge = t((e) => F?.("renderWhileLoading", e.target.checked), [F]), _e = t((e) => F?.("cache", e.target.checked), [F]), Y = t((e) => F?.("filters", e), [F]), X = n(() => Object.values(R), [R]), Z = n(() => X.find((e) => e.identifier === w)?.manifest, [X, w]), ve = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...te(L, `${q}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [L, q]), ye = n(() => [
+	}, [F]), ge = t((e) => F?.("singleRecord", e.target.checked), [F]), _e = t((e) => F?.("loadingSlot", e), [F]), Y = t((e) => F?.("renderWhileLoading", e.target.checked), [F]), ve = t((e) => F?.("cache", e.target.checked), [F]), ye = t((e) => F?.("filters", e), [F]), X = n(() => Object.values(R), [R]), Z = n(() => X.find((e) => e.identifier === C)?.manifest, [X, C]), be = n(() => Object.keys(Z?.operators ?? {}), [Z]), Q = n(() => Object.keys(Z?.endpoints.read ?? {}), [Z]), $ = n(() => [...te(L, `${q}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [L, q]), xe = n(() => [
 		...Object.keys(G),
 		...Object.keys(K),
 		...$
@@ -41,7 +41,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 			/* @__PURE__ */ c(p, {
 				value: W,
 				label: "Data Source",
-				onChange: me,
+				onChange: he,
 				size: "xs",
 				children: [
 					/* @__PURE__ */ s("option", {
@@ -70,7 +70,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				className: "rounded-sm border border-gray-300 p-2 text-xs text-gray-500 dark:border-zinc-600 dark:text-zinc-400",
 				children: "No actions yet. Add one in the Actions panel and give it a “While a page renders” trigger — that is the way in this element uses."
 			}), /* @__PURE__ */ c(p, {
-				value: T,
+				value: w,
 				label: "Action",
 				onChange: J("action"),
 				size: "xs",
@@ -92,7 +92,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					children: "No connectors yet. Add one in the Connectors panel — it holds the API endpoints, and the credential stays on the server."
 				}),
 				/* @__PURE__ */ c(p, {
-					value: w,
+					value: C,
 					label: "Connector",
 					onChange: J("connector"),
 					size: "xs",
@@ -105,7 +105,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					}, e.identifier))]
 				}),
 				Q.length > 1 && /* @__PURE__ */ s(p, {
-					value: ae,
+					value: oe,
 					label: "Endpoint",
 					onChange: J("endpoint"),
 					size: "xs",
@@ -115,7 +115,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					}, e))
 				}),
 				/* @__PURE__ */ s(f, {
-					value: oe,
+					value: se,
 					label: "Resource",
 					placeholder: "posts",
 					title: "The collection read through the connector — what {{resource}} becomes in the endpoint path.",
@@ -123,25 +123,25 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					size: "xs"
 				}),
 				/* @__PURE__ */ s(e, {
-					value: D,
-					operators: ve,
-					onChange: Y
+					value: E,
+					operators: be,
+					onChange: ye
 				}),
 				/* @__PURE__ */ s(m, {
-					checked: E,
+					checked: T,
 					size: "sm",
 					label: "Single record (detail page)",
-					onChange: he
+					onChange: ge
 				}),
-				!E && /* @__PURE__ */ c(o, { children: [
+				!T && /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s(f, {
-						value: se,
+						value: ce,
 						label: "Records per page",
 						onChange: J("limit"),
 						size: "xs"
 					}),
 					/* @__PURE__ */ c(p, {
-						value: O,
+						value: D,
 						label: "Pagination",
 						onChange: J("pagination"),
 						size: "xs",
@@ -160,8 +160,8 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 							})
 						]
 					}),
-					O !== "none" && /* @__PURE__ */ s(f, {
-						value: k,
+					D !== "none" && /* @__PURE__ */ s(f, {
+						value: O,
 						label: "Page parameter",
 						title: "Query-string key this list pages on. Give each list its own so they page independently.",
 						onChange: J("pageParam"),
@@ -173,18 +173,18 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				/* @__PURE__ */ c("div", {
 					className: "flex flex-col",
 					children: [/* @__PURE__ */ s("label", { children: "Query" }), /* @__PURE__ */ s(d, {
-						className: "font-rubik min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
+						className: "min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
 						value: g,
 						theme: I,
 						mode: "text",
-						autoComplete: ye,
+						autoComplete: xe,
 						lineWrapping: !0,
 						multiline: !1,
-						onChange: ce
+						onChange: le
 					})]
 				}),
 				/* @__PURE__ */ c(p, {
-					value: _,
+					value: ie,
 					label: "Method",
 					onChange: J("method"),
 					size: "xs",
@@ -197,14 +197,14 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					})]
 				}),
 				/* @__PURE__ */ s(f, {
-					value: ie,
+					value: ae,
 					label: "Access Token",
 					title: "Bind this to the signed-in visitor's token. A value typed here is saved in the page and served to\n              every visitor — put anything secret behind a connector instead.",
 					onChange: J("accessToken"),
 					size: "xs"
 				}),
 				/* @__PURE__ */ c(p, {
-					value: S,
+					value: x,
 					label: "Include Credentials",
 					onChange: J("credentials"),
 					size: "xs",
@@ -227,7 +227,7 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					checked: j,
 					size: "sm",
 					label: "Cache responses",
-					onChange: _e
+					onChange: ve
 				}),
 				j && /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s(f, {
@@ -250,10 +250,18 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 					})
 				] }),
 				/* @__PURE__ */ s(m, {
-					checked: A,
+					checked: k,
 					size: "sm",
 					label: "Render children while loading",
-					onChange: ge
+					onChange: Y
+				}),
+				/* @__PURE__ */ s(f, {
+					value: A,
+					label: "Loading slot",
+					placeholder: "catalog-skeleton",
+					title: "The id of a child shown instead of the others until the first answer arrives — a skeleton — and gone after it.",
+					size: "xs",
+					onChange: _e
 				})
 			] }),
 			/* @__PURE__ */ s(f, {
@@ -267,13 +275,13 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				checked: V,
 				size: "sm",
 				label: "Advanced Settings",
-				onChange: fe
+				onChange: pe
 			}),
 			V && /* @__PURE__ */ c(o, { children: [
 				/* @__PURE__ */ s(re, {
-					value: Object.entries(v),
+					value: Object.entries(_),
 					label: "Headers",
-					onChange: pe,
+					onChange: me,
 					size: "xs"
 				}),
 				/* @__PURE__ */ c("div", {
@@ -282,15 +290,15 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 						direction: "vertical",
 						className: "w-full",
 						size: "xs",
-						query: y,
-						onChange: le,
+						query: v,
+						onChange: ue,
 						showBranches: !0
 					})]
 				}),
 				/* @__PURE__ */ c(p, {
-					value: b,
+					value: y,
 					label: "Container Tag",
-					onChange: ue,
+					onChange: de,
 					size: "xs",
 					children: [
 						/* @__PURE__ */ s("option", {
@@ -343,11 +351,11 @@ var h = [], g = ({ query: g = "", method: _ = "get", accessToken: ie = "", heade
 				/* @__PURE__ */ c("div", {
 					className: "flex min-h-50 grow flex-col",
 					children: [/* @__PURE__ */ s("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ s(d, {
-						value: x,
+						value: b,
 						theme: I,
 						mode: "json",
 						lineWrapping: !0,
-						onChange: de
+						onChange: fe
 					})]
 				})
 			] })

package/dist/elements/provider/ApiContainer/declaration.d.ts

@@ -139,7 +139,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/provider/ApiContainer/declaration.mjs

@@ -145,7 +145,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/provider/ApiContainer/helpers/loadingSlot.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/**
+ * The children a provider with a loading slot shows: the slot alone until its first answer, everything but the slot
+ * after. A child is the element of that id by its key — the one every element of the tree is rendered under.
+ */
+export declare const childrenWhile: (children: ReactNode, slot: string, loading: boolean) => ReactNode[];

package/dist/elements/provider/ApiContainer/helpers/loadingSlot.mjs

@@ -0,0 +1,8 @@
+import { Children as e, isValidElement as t } from "react";
+//#region src/elements/provider/ApiContainer/helpers/loadingSlot.ts
+var n = (n, r, i) => e.toArray(n).filter((e) => {
+	let n = t(e) && typeof e.key == "string" && e.key.endsWith(`$${r}`);
+	return i ? n : !n;
+});
+//#endregion
+export { n as childrenWhile };

package/dist/elements/provider/ApiContainer/index.d.ts

@@ -130,7 +130,7 @@ declare const ApiContainer: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/provider/Channel/declaration.d.ts

@@ -103,7 +103,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/provider/Channel/declaration.mjs

@@ -99,7 +99,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

package/dist/elements/provider/Channel/index.d.ts

@@ -102,7 +102,7 @@ declare const Channel: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/settings.mjs

@@ -17,23 +17,27 @@ import h from "./form/Form/Settings.mjs";
 import g from "./form/FormControl/Settings.mjs";
 import _ from "./internal/LayoutContainer/Settings.mjs";
 import v from "./internal/Page/Settings.mjs";
-import y from "./media/FontAwesome/Settings.mjs";
-import b from "./media/Image/Settings.mjs";
-import x from "./media/Video/Settings.mjs";
-import S from "./provider/ApiContainer/Settings.mjs";
-import C from "./provider/Channel/Settings.mjs";
-import w from "./structure/Container/Settings.mjs";
-import T from "./structure/DialogContainer/Settings.mjs";
-import E from "./structure/List/ListItem/Settings.mjs";
-import D from "./structure/List/Settings.mjs";
-import O from "./structure/ModalContainer/Settings.mjs";
-import k from "./structure/Pagination/Settings.mjs";
-import A from "./structure/TabContainer/Settings.mjs";
-import j from "./structure/TabContainer/TabContainerBody/Settings.mjs";
-import M from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
-import N from "./structure/TabContainer/TabContainerItem/Settings.mjs";
+import y from "./media/Embed/Settings.mjs";
+import b from "./media/FontAwesome/Settings.mjs";
+import x from "./media/Image/Settings.mjs";
+import S from "./media/Svg/Settings.mjs";
+import C from "./media/Video/Settings.mjs";
+import w from "./provider/ApiContainer/Settings.mjs";
+import T from "./provider/Channel/Settings.mjs";
+import E from "./structure/Carousel/CarouselTrack/Settings.mjs";
+import D from "./structure/Carousel/Settings.mjs";
+import O from "./structure/Container/Settings.mjs";
+import k from "./structure/DialogContainer/Settings.mjs";
+import A from "./structure/List/ListItem/Settings.mjs";
+import j from "./structure/List/Settings.mjs";
+import M from "./structure/ModalContainer/Settings.mjs";
+import N from "./structure/Pagination/Settings.mjs";
+import P from "./structure/TabContainer/Settings.mjs";
+import F from "./structure/TabContainer/TabContainerBody/Settings.mjs";
+import I from "./structure/TabContainer/TabContainerHeader/Settings.mjs";
+import L from "./structure/TabContainer/TabContainerItem/Settings.mjs";
 //#region src/elements/settings.ts
-var P = /* @__PURE__ */ e({ defaultElementsSettings: () => F }), F = {
+var R = /* @__PURE__ */ e({ defaultElementsSettings: () => z }), z = {
 	dropdown: c,
 	plitziSdk: a,
 	custom: r,
@@ -41,32 +45,36 @@ var P = /* @__PURE__ */ e({ defaultElementsSettings: () => F }), F = {
 	blockHtml: t,
 	blockJsx: n,
 	page: v,
-	container: w,
+	container: O,
 	layoutContainer: _,
-	dialogContainer: T,
-	modalContainer: O,
-	tabContainer: A,
-	tabContainerBody: j,
-	tabContainerheader: M,
-	tabContainerItem: N,
+	dialogContainer: k,
+	modalContainer: M,
+	carousel: D,
+	carouselTrack: E,
+	tabContainer: P,
+	tabContainerBody: F,
+	tabContainerheader: I,
+	tabContainerItem: L,
 	heading: l,
-	image: b,
-	video: x,
-	fontAwesome: y,
+	image: x,
+	video: C,
+	embed: y,
+	svg: S,
+	fontAwesome: b,
 	button: s,
 	paragraph: f,
 	text: m,
 	markdown: d,
 	richText: p,
-	pagination: k,
+	pagination: N,
 	nodeHtml: i,
-	list: D,
-	listItem: E,
+	list: j,
+	listItem: A,
 	link: u,
 	form: h,
 	formControl: g,
-	apiContainer: S,
-	channel: C
+	apiContainer: w,
+	channel: T
 };
 //#endregion
-export { F as defaultElementsSettings, P as settings_exports };
+export { z as defaultElementsSettings, R as settings_exports };

package/dist/elements/structure/Carousel/Carousel.d.ts

@@ -0,0 +1,32 @@
+import { CarouselMode, CarouselTransition } from './CarouselContext';
+import { ReactNode, RefObject } from 'react';
+export type CarouselProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    /** What it shows, one slide each — its own, or bound from a source as a list's are. */
+    items?: unknown[];
+    /** `slide` shows one at a time; `marquee` scrolls them past for ever; `scroll` is a row a visitor swipes. */
+    mode?: CarouselMode;
+    /** Milliseconds between slides on its own; 0 is none. `slide` only. */
+    autoplay?: number;
+    /** Holds still under the pointer, for autoplay and a marquee alike. */
+    pauseOnHover?: boolean;
+    /** After the last slide the first, and before the first the last. */
+    loop?: boolean;
+    /** How a `slide` carousel changes slide; back enters from the left. */
+    transition?: CarouselTransition;
+    /** Pixels per second, for a marquee. */
+    speed?: number;
+    /** The field of each item that names it, as a list's `itemKey`. */
+    itemKey?: string;
+    /** What the carousel is, for a screen reader: "Featured products". */
+    label?: string;
+};
+declare const Carousel: ({ ref, className, children, items, mode, autoplay, pauseOnHover, loop, transition, speed, itemKey, label }: CarouselProps) => import('react').JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<CarouselProps>): import('react').JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Carousel };

package/dist/elements/structure/Carousel/Carousel.mjs

@@ -0,0 +1,183 @@
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../dataSource/pathFields.mjs";
+import i from "./CarouselContext.mjs";
+import { clampIndex as a, directionOf as o, slideStep as s, stepIndex as c } from "./carouselIndex.mjs";
+import l from "./declaration.mjs";
+import u from "./useAutoplay.mjs";
+import { rowKeys as ee } from "../List/modes/ListControlled/rowKeys.mjs";
+import { use as te, useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import ne from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as re } from "@plitzi/nexus/react";
+import { emptyObject as g } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as _ } from "react/jsx-runtime";
+import ie from "clsx";
+import ae from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import oe from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+//#region src/elements/structure/Carousel/Carousel.tsx
+var v = ({ ref: e, className: v = "", children: y, items: b = [], mode: x = "slide", autoplay: S = 0, pauseOnHover: C = !0, loop: w = !0, transition: T = "slide", speed: E = 30, itemKey: D, label: se = "" }) => {
+	let { id: O, definition: { label: k = "Carousel" } } = t(), A = ae(l.sourceType, O), { settings: { previewMode: ce }, contexts: { InteractionsContext: le } } = ne(), { interactionsManager: j } = te(le), M = p(() => Array.isArray(b) ? b : [], [b]), N = p(() => ee(M, D), [M, D]), P = M.length, F = !!ce, [I, L] = h(0), [R, z] = h("next"), [B, V] = h(!1), [H, U] = h(S > 0), ue = m(null), W = e ?? ue, G = m(null), K = a(I, P);
+	f(() => {
+		I !== K && L(K);
+	}, [I, K]);
+	let q = d((e, t) => {
+		P !== 0 && e !== K && (z(t), V(!0), L(e), j.interactionTrigger(O, "onChange", {
+			index: e,
+			item: M[e]
+		}));
+	}, [
+		P,
+		K,
+		O,
+		j,
+		M
+	]), J = d((e) => {
+		let t = G.current, n = t ? s(t) : 0;
+		t && n > 0 && t.scrollBy({
+			left: e * n,
+			behavior: "smooth"
+		});
+	}, []), Y = d(() => {
+		if (x === "scroll") {
+			J(1);
+			return;
+		}
+		q(c(K, P, 1, w), "next");
+	}, [
+		P,
+		K,
+		w,
+		x,
+		q,
+		J
+	]), X = d(() => {
+		if (x === "scroll") {
+			J(-1);
+			return;
+		}
+		q(c(K, P, -1, w), "previous");
+	}, [
+		P,
+		K,
+		w,
+		x,
+		q,
+		J
+	]), Z = d((e) => {
+		let t = a(e.index, P);
+		if (x === "scroll") {
+			J(t - K);
+			return;
+		}
+		q(t, o(K, t));
+	}, [
+		P,
+		K,
+		x,
+		q,
+		J
+	]), Q = d((e) => {
+		e !== K && q(e, o(K, e));
+	}, [K, q]);
+	u({
+		delay: x === "slide" ? S : 0,
+		active: F && H && P > 1,
+		rootRef: W,
+		pauseOnHover: C,
+		position: K,
+		onTick: Y
+	});
+	let de = p(() => ({
+		next: {
+			...l.callbacks.next,
+			callback: Y
+		},
+		previous: {
+			...l.callbacks.previous,
+			callback: X
+		},
+		goTo: {
+			...l.callbacks.goTo,
+			callback: Z
+		},
+		play: {
+			...l.callbacks.play,
+			callback: () => U(!0)
+		},
+		pause: {
+			...l.callbacks.pause,
+			callback: () => U(!1)
+		}
+	}), [
+		Z,
+		Y,
+		X
+	]), $ = p(() => ({
+		items: M,
+		count: P,
+		index: K,
+		item: M[K],
+		playing: H && S > 0
+	}), [
+		S,
+		P,
+		K,
+		M,
+		H
+	]), fe = d(() => r($), [$]);
+	oe({
+		id: O,
+		source: A,
+		name: k || `Carousel - ${O}`,
+		fields: fe
+	});
+	let pe = p(() => A ? { runtime: { sources: { [A]: $ } } } : g, [A, $]), me = p(() => ({
+		source: A,
+		items: M,
+		keys: N,
+		index: K,
+		direction: R,
+		moved: B,
+		mode: x,
+		transition: T,
+		speed: E,
+		pauseOnHover: C,
+		live: F,
+		scrollerRef: G,
+		onScrolledTo: Q
+	}), [
+		K,
+		R,
+		N,
+		M,
+		F,
+		x,
+		B,
+		Q,
+		C,
+		A,
+		E,
+		T
+	]);
+	return /* @__PURE__ */ _(n, {
+		ref: W,
+		className: ie("plitzi-component__carousel", `carousel--${x}`, v),
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": se || void 0,
+		interactionTriggers: l.triggers,
+		interactionCallbacks: de,
+		children: /* @__PURE__ */ _(re, {
+			inherit: "live",
+			name: `Carousel:${O}`,
+			value: pe,
+			children: /* @__PURE__ */ _(i, {
+				value: me,
+				children: y
+			})
+		})
+	});
+}, y = e(v);
+//#endregion
+export { v as Carousel, y as default };

package/dist/elements/structure/Carousel/CarouselContext.d.ts

@@ -0,0 +1,29 @@
+import { CarouselDirection } from './carouselIndex';
+import { RefObject } from 'react';
+export type CarouselMode = 'slide' | 'marquee' | 'scroll';
+export type CarouselTransition = 'slide' | 'fade' | 'none';
+/** What a carousel hands the track inside it: the items, where it is, and how it moves. */
+export type CarouselContextValue = {
+    /** The source the carousel publishes — `carousel_<id>` — which each slide publishes its own item under too. */
+    source: string;
+    items: unknown[];
+    keys: readonly (string | number)[];
+    index: number;
+    direction: CarouselDirection;
+    /** Whether it has moved yet: the slide a page opens on does not animate in. */
+    moved: boolean;
+    mode: CarouselMode;
+    transition: CarouselTransition;
+    /** Pixels per second, for a marquee. */
+    speed: number;
+    pauseOnHover: boolean;
+    /** Whether it moves at all: never in the builder, which shows the first slide. */
+    live: boolean;
+    /** The box a `scroll` carousel scrolls, which `next` and `previous` move. */
+    scrollerRef: RefObject<HTMLDivElement | null>;
+    /** A `scroll` carousel reports the slide it scrolled to. */
+    onScrolledTo: (index: number) => void;
+};
+/** Absent outside a carousel: a track on its own renders its children as they are. */
+declare const CarouselContext: import('react').Context<CarouselContextValue | undefined>;
+export default CarouselContext;

package/dist/elements/structure/Carousel/CarouselContext.mjs

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+//#region src/elements/structure/Carousel/CarouselContext.ts
+var t = e(void 0);
+t.displayName = "CarouselContext";
+//#endregion
+export { t as default };