@plitzi/sdk-elements 0.37.8 → 0.37.10

package/dist/Element/ElementContext.mjs

@@ -1,6 +1,5 @@
-import { createContext as e } from "react";
+import { sharedContext as e } from "@plitzi/sdk-shared/helpers/sharedContext";
 //#region src/Element/ElementContext.tsx
-var t = e(void 0);
-t.displayName = "ElementContext";
+var t = e("ElementContext", void 0);
 //#endregion
 export { t as default };

package/dist/Element/ElementParentContext.mjs

@@ -1,6 +1,5 @@
-import { createContext as e } from "react";
+import { sharedContext as e } from "@plitzi/sdk-shared/helpers/sharedContext";
 //#region src/Element/ElementParentContext.ts
-var t = e(void 0);
-t.displayName = "ElementParentContext";
+var t = e("ElementParentContext", void 0);
 //#endregion
 export { t as default };

package/dist/Element/ElementWords.d.ts

@@ -0,0 +1,16 @@
+export type IconPlacement = 'before' | 'after';
+export type ElementWordsProps = {
+    /** The element's own words. */
+    content?: string;
+    /** Font Awesome classes for an icon beside them (`'fa-solid fa-arrow-right'`); empty for none. */
+    icon?: string;
+    iconPlacement?: IconPlacement;
+    /** What the element's `icon` slot carries. */
+    iconClassName?: string;
+};
+/**
+ * What a button or a link says itself — its words and an icon beside them, one element instead of a `text` and a
+ * `fontAwesome` inside it. Each element places the whole beside its children with its own `contentPlacement`.
+ */
+declare const ElementWords: ({ content, icon, iconPlacement, iconClassName }: ElementWordsProps) => import('react').JSX.Element;
+export default ElementWords;

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/LayoutBody.d.ts

@@ -1,21 +1,24 @@
 import { ReactNode } from 'react';
 export type LayoutBodyProps = {
-    /** What the slot of the shell below renders: the page's content, or the shell nested inside this one. */
-    body: ReactNode;
+    /**
+     * What each slot of the shell below renders, by the slot's id: a layout's one slot holds the page's content (or the
+     * shell nested inside this one), and a component instance's slots hold the children that name them.
+     */
+    bodies: Record<string, ReactNode>;
     children: ReactNode;
 };
 /**
- * Hands a shell's slot its body without handing it to every element of the shell.
+ * Hands a shell's slots their bodies without handing them to every element of the shell.
  *
  * The body used to travel inside `plitziElementLayout`, which every element of the shell receives as a prop. The body
  * is a new node on every navigation — it IS the page — so the whole shell rendered again each time, sidebar and all,
- * to show the one container that holds the page. Here the value every element reads never changes; only the slot
+ * to show the one container that holds the page. Here the value every element reads never changes; only a slot
  * subscribes to what it holds.
  *
- * `current` is the body as of the first render, which is what the server renders and what hydration reads. Later
- * bodies are announced after the commit, and the slot renders them before the browser paints.
+ * `current` is the bodies as of the first render, which is what the server renders and what hydration reads. Later
+ * ones are announced after the commit, and the slots render them before the browser paints.
  */
-declare const LayoutBody: ({ body, children }: LayoutBodyProps) => import('react').JSX.Element;
-/** The body of the nearest shell, for the element that is its slot; nothing, and no subscription, for any other. */
-export declare const useLayoutBody: (isSlot: boolean) => ReactNode;
+declare const LayoutBody: ({ bodies, children }: LayoutBodyProps) => import('react').JSX.Element;
+/** The body of the nearest shell's slot `slotId`; nothing, and no subscription, for an element that is not a slot. */
+export declare const useLayoutBody: (slotId: string | undefined) => ReactNode;
 export default LayoutBody;

package/dist/Element/LayoutBody.mjs

@@ -1,24 +1,23 @@
-import { createContext as e, use as t, useCallback as n, useLayoutEffect as r, useState as i, useSyncExternalStore as a } from "react";
+import { use as e, useCallback as t, useLayoutEffect as n, useState as r, useSyncExternalStore as i } from "react";
+import { sharedContext as a } from "@plitzi/sdk-shared/helpers/sharedContext";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/Element/LayoutBody.tsx
-var s = e(void 0);
-s.displayName = "LayoutBodyContext";
-var c = () => void 0, l = ({ body: e, children: t }) => {
-	let [n] = i(() => ({
+var s = a("LayoutBodyContext", void 0), c = () => void 0, l = ({ bodies: e, children: t }) => {
+	let [i] = r(() => ({
 		current: e,
 		listeners: /* @__PURE__ */ new Set()
 	}));
-	return r(() => {
-		n.current !== e && (n.current = e, n.listeners.forEach((e) => e()));
-	}, [e, n]), /* @__PURE__ */ o(s, {
-		value: n,
+	return n(() => {
+		i.current !== e && (i.current = e, i.listeners.forEach((e) => e()));
+	}, [e, i]), /* @__PURE__ */ o(s, {
+		value: i,
 		children: t
 	});
-}, u = (e) => {
-	let r = t(s), i = n((t) => !e || !r ? c : (r.listeners.add(t), () => {
-		r.listeners.delete(t);
-	}), [e, r]), o = n(() => e && r ? r.current : void 0, [e, r]);
-	return a(i, o, o);
+}, u = (n) => {
+	let r = e(s), a = t((e) => n === void 0 || !r ? c : (r.listeners.add(e), () => {
+		r.listeners.delete(e);
+	}), [n, r]), o = t(() => n !== void 0 && r ? r.current[n] : void 0, [n, r]);
+	return i(a, o, o);
 };
 //#endregion
 export { l as default, u as useLayoutBody };

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/useElementInternal.mjs

@@ -9,8 +9,9 @@ import { useCommonStore as s } from "@plitzi/sdk-shared/store";
 import { get as c } from "@plitzi/plitzi-ui/helpers";
 import l from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
 import { hasValidToken as u, processTwig as d, templatePaths as f } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { COMPONENT_PROPS_SOURCE as p } from "@plitzi/sdk-shared/schema/schemaConstants";
 //#region src/Element/hooks/useElementInternal.ts
-var p = (e, t, n) => {
+var m = { settled: /* @__PURE__ */ new Set([p]) }, h = (e, t, n) => {
 	let { queryParams: r = {}, routeParams: i = {}, variables: a = {}, origin: o = "", navigation: s, ...c } = n, l = {
 		...a,
 		...i,
@@ -23,17 +24,17 @@ var p = (e, t, n) => {
 			origin: o
 		}
 	}, u = { ...e };
-	for (let n of t) u[n] = d(e[n], l, !0);
+	for (let n of t) u[n] = d(e[n], l, m);
 	return u;
-}, m = (e) => !!e && Object.values(e).some((e) => Array.isArray(e) && e.length > 0), h = (e, n, r = {}, i = {}) => {
-	let o, { attributes: s, definition: d } = e, { rootId: f, plitziElementLayout: h } = n;
+}, g = (e) => !!e && Object.values(e).some((e) => Array.isArray(e) && e.length > 0), _ = (e, n, r = {}, i = {}) => {
+	let o, { attributes: s, definition: d } = e, { rootId: f, plitziElementLayout: p } = n;
 	n.attributes && (s = {
 		...s,
 		...n.attributes
 	});
-	let g = s;
+	let m = s;
 	if (Object.keys(r).length > 0) {
-		if (m(d.bindings)) {
+		if (g(d.bindings)) {
 			let t = l(r, {
 				...e,
 				attributes: s
@@ -43,9 +44,9 @@ var p = (e, t, n) => {
 	}
 	let _ = Object.keys(s).filter((e) => {
 		let t = s[e];
-		return typeof t == "string" && t === g[e] && u(t);
+		return typeof t == "string" && t === m[e] && u(t);
 	});
-	return _.length > 0 && (s = p(s, _, r)), s = {
+	return _.length > 0 && (s = h(s, _, r)), s = {
 		...s,
 		...t(i, ["visibility", "styleSelectors"])
 	}, d = {
@@ -57,7 +58,7 @@ var p = (e, t, n) => {
 		}
 	}, d.styleSelectors = a(d), {
 		...n,
-		rootId: c(h, "rootId", f),
+		rootId: c(p, "rootId", f),
 		attributes: {
 			...s,
 			...t(n, [
@@ -75,25 +76,25 @@ var p = (e, t, n) => {
 		},
 		style: o
 	};
-}, g = (e) => Object.values(e ?? {}).filter((e) => typeof e == "string" && u(e)), _ = (e) => ["variables", ...new Set(e.flatMap((e) => f(e)))], v = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
+}, v = (e) => Object.values(e ?? {}).filter((e) => typeof e == "string" && u(e)), y = (e) => ["variables", ...new Set(e.flatMap((e) => f(e)))], b = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
 	let { id: f } = l, { state: p, setElementState: m } = r({
 		id: f,
 		bindings: a.definition.bindings,
 		previewMode: u
-	}), v = o(() => {
-		let e = [...g(a.attributes), ...g(l.attributes)];
-		return e.length > 0 ? _(e) : void 0;
-	}, [a.attributes, l.attributes]), [[y, b, x]] = s([
+	}), h = o(() => {
+		let e = [...v(a.attributes), ...v(l.attributes)];
+		return e.length > 0 ? y(e) : void 0;
+	}, [a.attributes, l.attributes]), [[g, b, x]] = s([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.origin"
-	], { enabled: v !== void 0 }), S = n({
+	], { enabled: h !== void 0 }), S = n({
 		bindings: a.definition.bindings,
-		sources: v
+		sources: h
 	}), C = o(() => ({
-		...h(a, l, {
+		..._(a, l, {
 			...S,
-			routeParams: y,
+			routeParams: g,
 			queryParams: b,
 			origin: x
 		}, p),
@@ -102,7 +103,7 @@ var p = (e, t, n) => {
 		a,
 		l,
 		S,
-		y,
+		g,
 		b,
 		x,
 		p,
@@ -131,4 +132,4 @@ var p = (e, t, n) => {
 	};
 };
 //#endregion
-export { v as default, h as getProps };
+export { b as default, _ as getProps };

package/dist/Element/hooks/useInternalClassName.mjs

@@ -12,7 +12,7 @@ var i = ({ id: i, className: a, previewMode: o, baseElementId: s, plitziElementL
 		with__container: !o && !!d,
 		"container--empty": !o && !!d && d.length === 0 && !c,
 		"container--base-element": !o && !!d && s === i,
-		"plitzi-component--layout-body": c && i === c.containerId
+		"plitzi-component--layout-body": c?.slots.includes(i)
 	}, l.styleSelectors.base), [
 		a,
 		f,

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.containerId}` : "", B = l(v, y, b), V = C?.containerId === x, H = n(V);
+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;