@plitzi/sdk-elements 0.37.9 → 0.37.10

package/dist/Element/ElementWords.mjs

@@ -0,0 +1,19 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/Element/ElementWords.tsx
+var i = ({ icon: e, className: n }) => e ? /* @__PURE__ */ t("i", {
+	className: r("plitzi-element-icon", e, n),
+	"aria-hidden": "true"
+}) : null, a = ({ content: r = "", icon: a = "", iconPlacement: o = "before", iconClassName: s }) => /* @__PURE__ */ n(e, { children: [
+	o === "before" && /* @__PURE__ */ t(i, {
+		icon: a,
+		className: s
+	}),
+	r,
+	o === "after" && /* @__PURE__ */ t(i, {
+		icon: a,
+		className: s
+	})
+] });
+//#endregion
+export { a as default };

package/dist/Element/RootElement.mjs

@@ -15,7 +15,7 @@ var o = ({ ref: o, children: s, tag: c = "div", className: l = "", interactionTr
 		otherProps: p,
 		children: s
 	});
-	let { root: { baseElementId: y }, contexts: b } = g, x = b.InteractionsContext, { id: S, rootId: C, style: w, definition: { type: T, label: E, runtime: D } } = h, O = D === "server" ? { "data-rsc-id": S } : void 0, k = g.settings.testAttributes === !1 ? void 0 : { "data-plitzi-el": S }, A = !v && (_ || !T || C !== y) ? {} : {
+	let { root: { baseElementId: y }, contexts: b } = g, x = b.InteractionsContext, { id: S, rootId: C, style: w, definition: { type: T, label: E, runtime: D, anchor: O } } = h, k = D === "server" ? { "data-rsc-id": S } : void 0, A = g.settings.testAttributes === !1 ? void 0 : { "data-plitzi-el": S }, j = !v && (_ || !T || C !== y) ? {} : {
 		"data-id": S,
 		"data-name": E || T || "unknown",
 		"data-root-id": C,
@@ -31,12 +31,13 @@ var o = ({ ref: o, children: s, tag: c = "div", className: l = "", interactionTr
 		},
 		className: l,
 		otherProps: p,
-		params: A,
-		serverMarker: O,
-		testMarker: k,
+		anchor: O,
+		params: j,
+		serverMarker: k,
+		testMarker: A,
 		children: s
 	});
-	let { className: j, events: M } = r({
+	let M = r({
 		elementContext: h,
 		InteractionsContext: x,
 		previewMode: _,
@@ -45,21 +46,23 @@ var o = ({ ref: o, children: s, tag: c = "div", className: l = "", interactionTr
 		className: l,
 		interactionTriggers: u,
 		interactionCallbacks: d,
-		otherProps: p
+		otherProps: p,
+		ref: o
 	});
 	return n({
 		tag: c,
-		refProp: o,
+		refProp: M.nodeRef,
 		style: {
 			...w,
 			...m
 		},
-		className: j,
+		className: M.className,
 		otherProps: p,
-		params: A,
-		serverMarker: O,
-		testMarker: k,
-		events: M,
+		anchor: O,
+		params: j,
+		serverMarker: k,
+		testMarker: A,
+		events: M.events,
 		children: s
 	});
 };

package/dist/Element/helpers/elementConstants.mjs

@@ -91,6 +91,21 @@ var e = {
 			label: "Propagate Event"
 		} }
 	},
+	onInterval: {
+		action: "onInterval",
+		title: "On Interval",
+		type: "trigger",
+		preview: {
+			interval: "",
+			count: ""
+		},
+		params: { interval: {
+			canBind: !1,
+			defaultValue: "5000",
+			type: "text",
+			label: "Every (milliseconds, at least 250)"
+		} }
+	},
 	onKey: {
 		action: "onKey",
 		title: "On Key",
@@ -106,6 +121,18 @@ var e = {
 			label: "Keys (e.g. f, shift+f, mod+k, escape)"
 		} }
 	},
+	onScroll: {
+		action: "onScroll",
+		title: "On Scroll",
+		type: "trigger",
+		preview: {
+			x: "",
+			y: "",
+			atStart: "",
+			atEnd: ""
+		},
+		params: {}
+	},
 	onFlowEnd: {
 		action: "onFlowEnd",
 		title: "On Server Action End",

package/dist/Element/helpers/renderStaticTag.d.ts

@@ -6,6 +6,8 @@ export type StaticTagProps = {
     style?: CSSProperties;
     className: string;
     otherProps: Record<string, unknown>;
+    /** The element's `anchor`: its `id` in the DOM, what `/page#anchor` scrolls to. */
+    anchor?: string;
     params?: DebugParams;
     serverMarker?: {
         'data-rsc-id': string;
@@ -17,5 +19,5 @@ export type StaticTagProps = {
     events?: Record<string, unknown>;
     children?: ReactNode;
 };
-declare const renderStaticTag: ({ tag, refProp, style, className, otherProps, params, serverMarker, testMarker, events, children }: StaticTagProps) => ReactElement;
+declare const renderStaticTag: ({ tag, refProp, style, className, otherProps, anchor, params, serverMarker, testMarker, events, children }: StaticTagProps) => ReactElement;
 export default renderStaticTag;

package/dist/Element/helpers/renderStaticTag.mjs

@@ -1,14 +1,15 @@
 import { createElement as e } from "react";
 //#region src/Element/helpers/renderStaticTag.ts
-var t = ({ tag: t = "div", refProp: n, style: r, className: i, otherProps: a, params: o, serverMarker: s, testMarker: c, events: l, children: u }) => t === "" ? u : e(t, {
+var t = ({ tag: t = "div", refProp: n, style: r, className: i, otherProps: a, anchor: o, params: s, serverMarker: c, testMarker: l, events: u, children: d }) => t === "" ? d : e(t, {
 	ref: n,
 	style: r,
 	className: i,
 	...a,
-	...o,
-	...l,
+	...o ? { id: o } : {},
 	...s,
-	...c
-}, u);
+	...u,
+	...c,
+	...l
+}, d);
 //#endregion
 export { t as default };

package/dist/Element/hooks/useElementDataSource.mjs

@@ -1,34 +1,35 @@
 import { useMemo as e } from "react";
 import { useCommonStore as t } from "@plitzi/sdk-shared/store";
 import { templatePaths as n } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { isRecord as r } from "@plitzi/sdk-shared/helpers/isRecord";
 //#region src/Element/hooks/useElementDataSource.ts
-var r = ({ source: e, transformers: t, when: r }) => {
-	let a = e ? [e] : [];
-	for (let { action: e, params: r } of t ?? []) e === "twigTemplate" && typeof r.template == "string" && r.template && a.push(...n(r.template).filter((e) => e !== "source" && !e.startsWith("source.")));
-	return r && a.push(...i(r)), a;
-}, i = (e) => e.rules.flatMap((e) => "rules" in e ? i(e) : [e.field, ...e.isBinding && typeof e.value == "string" ? [e.value] : []]), a = (e) => {
+var i = ({ source: e, transformers: t, when: r }) => {
+	let i = e ? [e] : [];
+	for (let { action: e, params: r } of t ?? []) e === "twigTemplate" && typeof r.template == "string" && r.template && i.push(...n(r.template).filter((e) => e !== "source" && !e.startsWith("source.")));
+	return r && i.push(...a(r)), i;
+}, a = (e) => e.rules.flatMap((e) => "rules" in e ? a(e) : [e.field, ...e.isBinding && typeof e.value == "string" ? [e.value] : []]), o = (e) => {
 	let t = [];
 	for (let n of [...new Set(e)].filter(Boolean).sort((e, t) => e.length - t.length)) t.some((e) => n.startsWith(`${e}.`)) || t.push(n);
 	return t;
-}, o = (e) => typeof e == "object" && !!e && !Array.isArray(e), s = (e, t, n) => {
-	let r = t.split("."), i = e;
-	for (let e of r.slice(0, -1)) {
-		let t = i[e], n = o(t) ? t : {};
-		i[e] = n, i = n;
+}, s = (e, t, n) => {
+	let i = t.split("."), a = e;
+	for (let e of i.slice(0, -1)) {
+		let t = a[e], n = r(t) ? t : {};
+		a[e] = n, a = n;
 	}
-	i[r[r.length - 1]] = n;
-}, c = ({ bindings: n, sources: i }) => {
-	let o = e(() => {
-		let e = new Set(i ?? []);
-		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) for (let n of t) for (let t of r(n)) e.add(t);
-		return e.size > 0 && e.add("variables"), a(e);
-	}, [n, i]), c = e(() => o.map((e) => `runtime.sources.${e}`), [o]), [l] = t(c);
+	a[i[i.length - 1]] = n;
+}, c = ({ bindings: n, sources: r }) => {
+	let a = e(() => {
+		let e = new Set(r ?? []);
+		for (let t of Object.values(n ?? {})) if (Array.isArray(t)) for (let n of t) for (let t of i(n)) e.add(t);
+		return e.size > 0 && e.add("variables"), o(e);
+	}, [n, r]), c = e(() => a.map((e) => `runtime.sources.${e}`), [a]), [l] = t(c);
 	return e(() => {
 		let e = {};
-		return o.forEach((t, n) => {
+		return a.forEach((t, n) => {
 			l[n] !== void 0 && s(e, t, l[n]);
 		}), e;
-	}, [o, l]);
+	}, [a, l]);
 };
 //#endregion
 export { c as default };

package/dist/Element/hooks/useInternalItems.mjs

@@ -6,58 +6,60 @@ import { useCommonStore as u } from "@plitzi/sdk-shared/store";
 import { get as d } from "@plitzi/plitzi-ui/helpers";
 import { usePlitziServiceContext as f } from "@plitzi/sdk-shared";
 import p from "@plitzi/sdk-shared/elements/ComponentContext";
-import { jsx as m } from "react/jsx-runtime";
+import { passesFlagGate as m } from "@plitzi/sdk-shared/flags";
+import { jsx as h } from "react/jsx-runtime";
 //#region src/Element/hooks/useInternalItems.tsx
-var h = typeof window > "u", g = "#layout-body", _ = "#children", v = () => () => {}, y = () => !0, b = () => !1, x = ({ id: x, definition: S, plitziElementLayout: C, children: w, previewMode: T, visible: E = !0 }) => {
-	let [[D, O]] = u(["schema.flat", "rsc.enabled"], { mode: "mount" }), { components: k, componentDefinitions: A } = o(p), { contexts: { PluginsContext: j } } = f(), { plugins: M } = o(j), { items: N } = S, P = A.current[S.type], F = S.loadStrategy ?? P?.definition.loadStrategy ?? "eager", I = C || w || N?.length, L = c(!1);
-	E && (L.current = !0);
-	let R = !T || F === "eager" || E || F === "lazy" && L.current, z = C ? `${C.type}:${C.rootId}:${C.slots.join(",")}` : "", B = l(v, y, b), V = C?.slots.includes(x) ?? !1, H = n(V ? x : void 0);
+var g = typeof window > "u", _ = "#layout-body", v = "#children", y = {}, b = () => () => {}, x = () => !0, S = () => !1, C = ({ id: C, definition: w, plitziElementLayout: T, children: E, previewMode: D, visible: O = !0 }) => {
+	let [[k, A]] = u(["schema.flat", "rsc.enabled"], { mode: "mount" }), [j = y] = u("runtime.sources.flags"), { components: M, componentDefinitions: N } = o(p), { contexts: { PluginsContext: P } } = f(), { plugins: F } = o(P), { items: I } = w, L = N.current[w.type], R = w.loadStrategy ?? L?.definition.loadStrategy ?? "eager", z = T || E || I?.length, B = c(!1);
+	O && (B.current = !0);
+	let V = !D || R === "eager" || O || R === "lazy" && B.current, H = T ? `${T.type}:${T.rootId}:${T.slots.join(",")}` : "", U = l(b, x, S), W = T?.slots.includes(C) ?? !1, G = n(W ? C : void 0);
 	return s(() => {
-		if (!I || !R) return;
-		let n = (N ?? []).filter((e) => {
-			let t = D[e];
-			if (!t) return !1;
-			if (!T || !O) return !0;
+		if (!z || !V) return;
+		let n = (I ?? []).filter((e) => {
+			let t = k[e];
+			if (!t || !m(t.definition.flag, j)) return !1;
+			if (!D || !A) return !0;
 			let n = t.definition.runtime ?? "shared";
-			return !(!B && n === "client");
+			return !(!U && n === "client");
 		}).map((n) => {
-			let { rootId: i, type: a, runtime: o } = d(D, `${n}.definition`, {}), s = d(C, "rootId", i), c = a in k.current || !!t({
+			let { rootId: i, type: a, runtime: o } = d(k, `${n}.definition`, {}), s = d(T, "rootId", i), c = a in M.current || !!t({
 				type: a,
-				plugins: M
+				plugins: F
 			}), l = e({
-				key: !T && C ? `${n}_${z}` : n,
-				plitziElementLayout: C,
+				key: !D && T ? `${n}_${H}` : n,
+				plitziElementLayout: T,
 				type: a,
 				internalProps: {
 					id: n,
 					rootId: s
 				},
-				components: k.current,
-				plugins: M
+				components: M.current,
+				plugins: F
 			});
-			return O && o === "server" && !h && T && !(B && c) ? /* @__PURE__ */ m(r, {
+			return A && o === "server" && !g && D && !(U && c) ? /* @__PURE__ */ h(r, {
 				id: n,
 				children: l
 			}, n) : l;
 		});
-		if (V && n.push(/* @__PURE__ */ m(i, { children: H }, g)), Array.isArray(w) ? n.push(...w.filter(a)) : a(w) && n.push(/* @__PURE__ */ m(i, { children: w }, _)), N) return n.length === 1 ? n[0] : n;
+		if (W && n.push(/* @__PURE__ */ h(i, { children: G }, _)), Array.isArray(E) ? n.push(...E.filter(a)) : a(E) && n.push(/* @__PURE__ */ h(i, { children: E }, v)), I) return n.length === 1 ? n[0] : n;
 	}, [
+		z,
+		V,
 		I,
-		R,
-		N,
-		C,
-		w,
-		D,
+		j,
 		T,
-		O,
-		B,
-		z,
+		E,
 		k,
+		D,
+		A,
+		U,
+		H,
 		M,
-		x,
-		V,
-		H
+		F,
+		C,
+		W,
+		G
 	]);
 };
 //#endregion
-export { x as default };
+export { C as default };

package/dist/Element/hooks/useIntervalTriggers.d.ts

@@ -0,0 +1,17 @@
+import { InteractionsManager } from '@plitzi/sdk-interactions';
+import { ElementInteraction } from '@plitzi/sdk-shared';
+export type UseIntervalTriggersProps = {
+    id: string;
+    interactions?: Record<string, ElementInteraction>;
+    previewMode: boolean;
+    interactionsManager: InteractionsManager;
+};
+/**
+ * The element's repeating flows: one clock per interval its `onInterval` flows declare, running while it is mounted.
+ *
+ * A clock ticks only while the tab is in view — a hidden tab is nobody watching, and an autoplay that kept turning
+ * would greet them three slides further on. It does not tick in the builder outside preview, like every other
+ * interaction. Each interval counts its own ticks, and a tick is for the flows declared with that interval alone.
+ */
+declare const useIntervalTriggers: ({ id, interactions, previewMode, interactionsManager }: UseIntervalTriggersProps) => void;
+export default useIntervalTriggers;

package/dist/Element/hooks/useIntervalTriggers.mjs

@@ -0,0 +1,37 @@
+import { useEffect as e, useMemo as t } from "react";
+import { INTERVAL_TRIGGER as n, intervalOf as r } from "@plitzi/sdk-shared/helpers/interval";
+//#region src/Element/hooks/useIntervalTriggers.ts
+var i = ({ id: i, interactions: a, previewMode: o, interactionsManager: s }) => {
+	let c = t(() => [...new Set(Object.values(a ?? {}).flatMap((e) => {
+		let t = r(e.params.interval);
+		return e.type === "trigger" && e.action === n && e.enabled && t ? [t] : [];
+	}))], [a]);
+	e(() => {
+		if (!o || !c.length || typeof document > "u") return;
+		let e = new Map(c.map((e) => [e, 0])), t = [], r = () => {
+			t = c.map((t) => setInterval(() => {
+				let r = (e.get(t) ?? 0) + 1;
+				e.set(t, r);
+				let a = {
+					interval: t,
+					count: r
+				};
+				s.interactionTrigger(i, n, a);
+			}, t));
+		}, a = () => {
+			t.forEach((e) => clearInterval(e)), t = [];
+		}, l = () => {
+			a(), document.visibilityState === "visible" && r();
+		};
+		return l(), document.addEventListener("visibilitychange", l), () => {
+			document.removeEventListener("visibilitychange", l), a();
+		};
+	}, [
+		i,
+		s,
+		o,
+		c
+	]);
+};
+//#endregion
+export { i as default };

package/dist/Element/hooks/useRootElementInteractions.d.ts

@@ -1,7 +1,7 @@
 import { ElementContextValue } from '../ElementContext';
 import { InteractionsContextValue } from '@plitzi/sdk-interactions';
 import { InteractionCallback } from '@plitzi/sdk-shared';
-import { Context } from 'react';
+import { Context, RefObject } from 'react';
 export type UseRootElementInteractionsProps = {
     elementContext: ElementContextValue;
     InteractionsContext: Context<InteractionsContextValue>;
@@ -12,10 +12,14 @@ export type UseRootElementInteractionsProps = {
     interactionTriggers?: Record<string, InteractionCallback>;
     interactionCallbacks?: Record<string, InteractionCallback>;
     otherProps: Record<string, unknown>;
+    /** The component's own ref to its root node, when it keeps one; the scroll steps read the same node. */
+    ref?: RefObject<HTMLElement | null>;
 };
 export type RootElementInteractions = {
     className: string;
     events: Record<string, unknown>;
+    /** The ref the root node is rendered with: the component's, or one of the element's own. */
+    nodeRef: RefObject<HTMLElement | null>;
 };
-declare const useRootElementInteractions: ({ elementContext, InteractionsContext, previewMode, debugMode, baseElementId, className, interactionTriggers, interactionCallbacks, otherProps }: UseRootElementInteractionsProps) => RootElementInteractions;
+declare const useRootElementInteractions: ({ elementContext, InteractionsContext, previewMode, debugMode, baseElementId, className, interactionTriggers, interactionCallbacks, otherProps, ref }: UseRootElementInteractionsProps) => RootElementInteractions;
 export default useRootElementInteractions;

package/dist/Element/hooks/useRootElementInteractions.mjs

@@ -1,87 +1,108 @@
 import e from "./useElementInteractions.mjs";
 import t from "./useInternalClassName.mjs";
-import n from "./useKeyTriggers.mjs";
-import { interactionBasicTriggers as r, nativeEventsList as i } from "../helpers/elementConstants.mjs";
-import { use as a, useCallback as o, useContext as s, useEffect as c, useMemo as l } from "react";
-import { get as u } from "@plitzi/plitzi-ui/helpers";
-import { StoreContext as d } from "@plitzi/nexus/react";
-import { emptyObject as f } from "@plitzi/sdk-shared/helpers/utils";
-import p from "clsx";
-import { liveSources as m } from "@plitzi/sdk-shared/dataSource";
-import { pConsole as h } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
+import n from "./useIntervalTriggers.mjs";
+import r from "./useKeyTriggers.mjs";
+import i from "./useScrollInteractions.mjs";
+import { interactionBasicTriggers as a, nativeEventsList as o } from "../helpers/elementConstants.mjs";
+import { use as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f } from "react";
+import { get as p } from "@plitzi/plitzi-ui/helpers";
+import { isRecord as m } from "@plitzi/sdk-shared/helpers/isRecord";
+import { StoreContext as h } from "@plitzi/nexus/react";
+import { emptyObject as g } from "@plitzi/sdk-shared/helpers/utils";
+import _ from "clsx";
+import { liveSources as v } from "@plitzi/sdk-shared/dataSource";
+import { pConsole as y } from "@plitzi/sdk-shared/devTools/utils/PlitziConsole";
 //#region src/Element/hooks/useRootElementInteractions.ts
-var g = (e) => typeof e == "object" && !!e, _ = /* @__PURE__ */ new WeakSet(), v = (e) => "nativeEvent" in e && g(e.nativeEvent) ? e.nativeEvent : e, y = ({ elementContext: y, InteractionsContext: b, previewMode: x, debugMode: S, baseElementId: C, className: w, interactionTriggers: T, interactionCallbacks: E, otherProps: D }) => {
-	let { id: O, className: k, attributes: A, definition: j, definition: { interactions: M }, plitziElementLayout: N, elementState: P, setElementState: F } = y, { interactionsManager: I, useInteractions: L } = a(b), R = o((e, t, n, r, i = !1) => {
+var b = /* @__PURE__ */ new WeakSet(), x = (e) => "nativeEvent" in e && m(e.nativeEvent) ? e.nativeEvent : e, S = ({ elementContext: S, InteractionsContext: C, previewMode: w, debugMode: T, baseElementId: E, className: D, interactionTriggers: O, interactionCallbacks: k, otherProps: A, ref: j }) => {
+	let { id: M, className: N, attributes: P, definition: F, definition: { interactions: I }, plitziElementLayout: L, elementState: R, setElementState: z } = S, { interactionsManager: B, useInteractions: V } = s(C), H = c((e, t, n, r, i = !1) => {
 		i || e.preventDefault(), r && r(e);
-		let a = v(e);
-		_.has(a) || (i || _.add(a), I.interactionTrigger(t, n, { event: e }));
-	}, [I]), z = l(() => !x || !M ? {} : Object.values(M).filter((e) => e.type === "trigger" && e.action && i.includes(e.action) && e.enabled).reduce((e, t) => {
-		let n = u(t, "params.propagateEvent", !1);
+		let a = x(e);
+		b.has(a) || (i || b.add(a), B.interactionTrigger(t, n, { event: e }));
+	}, [B]), U = d(() => !w || !I ? {} : Object.values(I).filter((e) => e.type === "trigger" && e.action && o.includes(e.action) && e.enabled).reduce((e, t) => {
+		let n = p(t, "params.propagateEvent", !1);
 		return {
 			...e,
-			[t.action]: (e) => R(e, O, t.action, D[t.action], n)
+			[t.action]: (e) => H(e, M, t.action, A[t.action], n)
 		};
 	}, {}), [
-		O,
 		M,
-		D,
-		x,
-		R
-	]), B = s(d), V = o(() => {
-		let e = B?.getPath("runtime.sources");
-		return m(g(e) ? e : f, B?.getPath("runtime.state"), B?.getPath("schema.settings.computed"));
-	}, [B]), H = o(() => ({ dataSource: V() }), [V]), U = l(() => ({
-		...r,
-		...T
-	}), [T]), W = e({
-		attributes: A,
-		definition: j,
-		setElementState: F
+		I,
+		A,
+		w,
+		H
+	]), W = l(h), G = c(() => {
+		let e = W?.getPath("runtime.sources");
+		return v(m(e) ? e : g, W?.getPath("runtime.state"), W?.getPath("schema.settings.computed"));
+	}, [W]), K = c(() => ({ dataSource: G() }), [G]), q = d(() => ({
+		...a,
+		...O
+	}), [O]), J = f(null), Y = j ?? J, X = e({
+		attributes: P,
+		definition: F,
+		setElementState: z
+	}), Z = i({
+		id: M,
+		label: F.label,
+		nodeRef: Y,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
 	});
-	L({
-		id: O,
-		interactions: M,
-		triggers: U,
-		callbacks: l(() => ({
-			...E,
-			...W
-		}), [E, W]),
-		getAdditionalParams: H
+	V({
+		id: M,
+		interactions: I,
+		triggers: q,
+		callbacks: d(() => ({
+			...k,
+			...Z,
+			...X
+		}), [
+			k,
+			Z,
+			X
+		]),
+		getAdditionalParams: K
+	}), r({
+		id: M,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
 	}), n({
-		id: O,
-		interactions: M,
-		previewMode: x,
-		interactionsManager: I
-	}), c(() => {
-		if (!x || !M || !Object.keys(M).length) return;
+		id: M,
+		interactions: I,
+		previewMode: w,
+		interactionsManager: B
+	}), u(() => {
+		if (!w || !I || !Object.keys(I).length) return;
 		let e = !1;
 		return queueMicrotask(() => {
-			e || I.interactionTrigger(O, "onLoad", {});
+			e || B.interactionTrigger(M, "onLoad", {});
 		}), () => {
 			e = !0;
 		};
-	}, []), c(() => {
-		if (S) return h.addProviderMethod(`getElementDataSource-${O}`, V), () => {
-			h.removeProviderMethod(`getElementDataSource-${O}`);
+	}, []), u(() => {
+		if (T) return y.addProviderMethod(`getElementDataSource-${M}`, G), () => {
+			y.removeProviderMethod(`getElementDataSource-${M}`);
 		};
 	}, [
-		S,
-		V,
-		O
+		T,
+		G,
+		M
 	]);
-	let G = t({
-		id: O,
-		className: w,
-		previewMode: x,
-		baseElementId: C,
-		definition: j,
-		elementState: P,
-		plitziElementLayout: N
+	let Q = t({
+		id: M,
+		className: D,
+		previewMode: w,
+		baseElementId: E,
+		definition: F,
+		elementState: R,
+		plitziElementLayout: L
 	});
 	return {
-		className: p(k, G),
-		events: z
+		className: _(N, Q),
+		events: U,
+		nodeRef: Y
 	};
 };
 //#endregion
-export { y as default };
+export { S as default };

package/dist/Element/hooks/useScrollInteractions.d.ts

@@ -0,0 +1,20 @@
+import { InteractionsManager } from '@plitzi/sdk-interactions';
+import { ElementInteraction, InteractionCallback } from '@plitzi/sdk-shared';
+import { RefObject } from 'react';
+export type UseScrollInteractionsProps = {
+    id: string;
+    label: string;
+    nodeRef: RefObject<HTMLElement | null>;
+    interactions?: Record<string, ElementInteraction>;
+    previewMode: boolean;
+    interactionsManager: InteractionsManager;
+};
+/**
+ * The element's scroll steps, and its `onScroll` trigger.
+ *
+ * The steps move the element's own box — a row of cards with `overflow: auto` — or, `scrollIntoView`, the page to it;
+ * the node is read when a step runs, so one rendered after the flow was wired is still the one moved. `onScroll` fires
+ * at most once a frame, and once on mount so a flow can hide an arrow before anybody has scrolled.
+ */
+declare const useScrollInteractions: ({ id, label, nodeRef, interactions, previewMode, interactionsManager }: UseScrollInteractionsProps) => Record<string, InteractionCallback>;
+export default useScrollInteractions;

package/dist/Element/hooks/useScrollInteractions.mjs

@@ -0,0 +1,58 @@
+import { useEffect as e, useMemo as t } from "react";
+import { toInteractionCallbacks as n } from "@plitzi/sdk-shared/authoring/builder";
+import { SCROLL_CALLBACKS as r } from "@plitzi/sdk-shared/authoring/elementCallbacks";
+import { SCROLL_BEHAVIORS as i, SCROLL_POSITIONS as a, SCROLL_TRIGGER as o, scrollDistance as s, scrollPosition as c, scrollState as l } from "@plitzi/sdk-shared/helpers/scroll";
+//#region src/Element/hooks/useScrollInteractions.ts
+var u = (e) => i.find((t) => t === e) ?? "smooth", d = (e, t) => a.find((t) => t === e) ?? t, f = ({ id: i, label: a, nodeRef: f, interactions: p, previewMode: m, interactionsManager: h }) => {
+	let g = t(() => n(r, {
+		scrollBy: (e) => {
+			let t = f.current;
+			t?.scrollBy({
+				left: s(e.x, t.clientWidth) ?? 0,
+				top: s(e.y, t.clientHeight) ?? 0,
+				behavior: u(e.behavior)
+			});
+		},
+		scrollTo: (e) => {
+			let t = f.current;
+			t && t.scrollTo({
+				left: c(e.x, t.scrollWidth, t.clientWidth) ?? t.scrollLeft,
+				top: c(e.y, t.scrollHeight, t.clientHeight) ?? t.scrollTop,
+				behavior: u(e.behavior)
+			});
+		},
+		scrollIntoView: (e) => {
+			f.current?.scrollIntoView({
+				block: d(e.block, "start"),
+				inline: d(e.inline, "nearest"),
+				behavior: u(e.behavior)
+			});
+		}
+	}, {
+		scrollBy: { title: `Scroll ${a} by` },
+		scrollTo: { title: `Scroll ${a} to` },
+		scrollIntoView: { title: `Scroll to ${a}` }
+	}), [a, f]), _ = t(() => Object.values(p ?? {}).some((e) => e.type === "trigger" && e.action === o && e.enabled), [p]);
+	return e(() => {
+		let e = f.current;
+		if (!m || !_ || !e || typeof window > "u") return;
+		let t = 0, n = () => {
+			t = 0;
+			let n = l(e);
+			h.interactionTrigger(i, o, n);
+		}, r = () => {
+			t === 0 && (t = window.requestAnimationFrame(n));
+		};
+		return e.addEventListener("scroll", r, { passive: !0 }), t = window.requestAnimationFrame(n), () => {
+			e.removeEventListener("scroll", r), window.cancelAnimationFrame(t);
+		};
+	}, [
+		i,
+		h,
+		_,
+		f,
+		m
+	]), g;
+};
+//#endregion
+export { f as default };