@plitzi/sdk-elements 0.38.10 → 0.38.12

package/dist/Element/hocs/withElement.mjs

@@ -1,85 +1,86 @@
 import e from "../ElementContext.mjs";
 import t from "../ElementParentContext.mjs";
-import { isVisible as n } from "../helpers/isVisible.mjs";
-import { omitKeys as r } from "../helpers/omitKeys.mjs";
-import i from "../hooks/useElementInternal.mjs";
-import a from "@plitzi/plitzi-ui/ErrorBoundary";
-import { Profiler as o, use as s, useEffect as c, useId as l, useMemo as u, useRef as d } from "react";
-import f from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
-import p from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as m } from "@plitzi/sdk-shared/store";
-import { diffProps as h, tracingCollector as g } from "@plitzi/sdk-shared/store/tracing";
-import { jsx as _ } from "react/jsx-runtime";
+import { declaredAttributes as n } from "../helpers/declaredAttributes.mjs";
+import { isVisible as r } from "../helpers/isVisible.mjs";
+import { omitKeys as i } from "../helpers/omitKeys.mjs";
+import a from "../hooks/useElementInternal.mjs";
+import o from "@plitzi/plitzi-ui/ErrorBoundary";
+import { Profiler as s, use as c, useEffect as l, useId as u, useMemo as d, useRef as f } from "react";
+import p from "@plitzi/sdk-event-bridge/hooks/useEventBridge";
+import m from "@plitzi/sdk-shared/hooks/usePlitzi";
+import { useCommonStore as h } from "@plitzi/sdk-shared/store";
+import { diffProps as g, tracingCollector as _ } from "@plitzi/sdk-shared/store/tracing";
+import { jsx as v } from "react/jsx-runtime";
 //#region src/Element/hocs/withElement.tsx
-var v = (v) => {
-	let y = v.displayName || v.name, b = (y) => {
-		let b = d(void 0), x = d(void 0), { id: S, rootId: C } = y.internalProps, w = s(t), T = w?.visible ?? !0, E = `${S}${l()}`, D = w?.traceId ?? E, O = u(() => ({
-			id: S,
-			rootId: C,
-			visible: T,
-			traceId: D,
+var y = (y) => {
+	let b = y.displayName || y.name, x = (b) => {
+		let x = f(void 0), S = f(void 0), { id: C, rootId: w } = b.internalProps, T = c(t), E = T?.visible ?? !0, D = `${C}${u()}`, O = T?.traceId ?? D, k = d(() => ({
+			id: C,
+			rootId: w,
+			visible: E,
+			traceId: O,
 			plitziJsxSkipHOC: !0
 		}), [
-			S,
 			C,
-			T,
-			D
-		]), k = u(() => ({
-			visible: T,
-			traceId: D
-		}), [T, D]);
-		if (y.plitziJsxSkipHOC) return /* @__PURE__ */ _(t, {
-			value: k,
-			children: /* @__PURE__ */ _(e, {
-				value: O,
-				children: /* @__PURE__ */ _(v, { ...y })
+			w,
+			E,
+			O
+		]), A = d(() => ({
+			visible: E,
+			traceId: O
+		}), [E, O]);
+		if (b.plitziJsxSkipHOC) return /* @__PURE__ */ v(t, {
+			value: A,
+			children: /* @__PURE__ */ v(e, {
+				value: k,
+				children: /* @__PURE__ */ v(y, { ...b })
 			})
 		});
-		let { settings: { previewMode: A, debugMode: j }, root: { baseElementId: M } } = p();
-		c(() => {
-			if (j) return g.markMounted(E), () => g.markUnmounted(E);
-		}, [j, E]);
-		let [N] = m(`schema.flat.${S}`);
-		if (!N) throw Error(`Element ${S} not found, Page ${M}`);
-		let { internalProps: P, customProps: F, children: I } = i({
-			element: N,
-			internalProps: y.internalProps,
-			children: y.children,
-			previewMode: A,
-			parentVisible: T
-		}), { attributes: L, definition: R, style: z, plitziElementLayout: B, elementState: V, setElementState: H } = P, U = u(() => ({ [`${S}_setState`]: H }), [S, H]);
-		f("element", U);
-		let W = T && n(V.visibility), G = u(() => ({
-			id: S,
-			rootId: C,
-			visible: W,
-			traceId: E,
-			attributes: L,
-			definition: R,
-			plitziElementLayout: B,
-			style: z,
-			elementState: V,
-			setElementState: H
+		let { settings: { previewMode: j, debugMode: M }, root: { baseElementId: N } } = m();
+		l(() => {
+			if (M) return _.markMounted(D), () => _.markUnmounted(D);
+		}, [M, D]);
+		let [P] = h(`schema.flat.${C}`);
+		if (!P) throw Error(`Element ${C} not found, Page ${N}`);
+		let { internalProps: F, customProps: I, children: L } = a({
+			element: P,
+			internalProps: b.internalProps,
+			children: b.children,
+			previewMode: j,
+			parentVisible: E
+		}), { attributes: R, definition: z, style: B, plitziElementLayout: V, elementState: H, setElementState: U } = F, W = d(() => ({ [`${C}_setState`]: U }), [C, U]);
+		p("element", W);
+		let G = E && r(H.visibility), K = d(() => ({
+			id: C,
+			rootId: w,
+			visible: G,
+			traceId: D,
+			attributes: R,
+			definition: z,
+			plitziElementLayout: V,
+			style: B,
+			elementState: H,
+			setElementState: U
 		}), [
-			L,
 			R,
-			V,
-			S,
-			B,
-			C,
 			z,
 			H,
-			W,
-			E
-		]), K = u(() => ({
-			visible: W,
-			traceId: E
-		}), [W, E]), q = u(() => {
+			C,
+			V,
+			w,
+			B,
+			U,
+			G,
+			D
+		]), q = d(() => ({
+			visible: G,
+			traceId: D
+		}), [G, D]), J = d(() => {
 			let e = {
-				...P.attributes,
-				...y.extraProps,
-				...F,
-				...r(y, [
+				...n(y, F.attributes),
+				...b.extraProps,
+				...I,
+				...i(b, [
 					"plitziJsxSkipHOC",
 					"internalProps",
 					"className",
@@ -87,37 +88,37 @@ var v = (v) => {
 					"extraProps"
 				])
 			};
-			return I && (e = {
+			return L && (e = {
 				...e,
-				children: I
-			}), /* @__PURE__ */ _(a, { children: /* @__PURE__ */ _(v, {
+				children: L
+			}), /* @__PURE__ */ v(o, { children: /* @__PURE__ */ v(y, {
 				...e,
-				ref: b
+				ref: x
 			}) });
 		}, [
-			P.attributes,
-			y,
-			F,
-			I
-		]), J = /* @__PURE__ */ _(t, {
-			value: K,
-			children: /* @__PURE__ */ _(e, {
-				value: G,
-				children: q
+			F.attributes,
+			b,
+			I,
+			L
+		]), Y = /* @__PURE__ */ v(t, {
+			value: q,
+			children: /* @__PURE__ */ v(e, {
+				value: K,
+				children: J
 			})
 		});
-		if (j) {
-			g.linkParent(E, w?.traceId, S);
+		if (M) {
+			_.linkParent(D, T?.traceId, C);
 			let e = {
-				attributes: L,
-				definition: R,
-				style: z,
-				elementState: V,
-				plitziElementLayout: B,
-				children: I,
-				...F,
-				...y.extraProps,
-				...r(y, [
+				attributes: R,
+				definition: z,
+				style: B,
+				elementState: H,
+				plitziElementLayout: V,
+				children: L,
+				...I,
+				...b.extraProps,
+				...i(b, [
 					"plitziJsxSkipHOC",
 					"internalProps",
 					"className",
@@ -125,15 +126,15 @@ var v = (v) => {
 					"extraProps"
 				])
 			};
-			return g.recordProps(E, h(x.current, e)), x.current = e, /* @__PURE__ */ _(o, {
-				id: E,
-				onRender: g.onRender,
-				children: J
+			return _.recordProps(D, g(S.current, e)), S.current = e, /* @__PURE__ */ v(s, {
+				id: D,
+				onRender: _.onRender,
+				children: Y
 			});
 		}
-		return J;
+		return Y;
 	};
-	return b.displayName = `withElement(${y})`, b;
+	return x.displayName = `withElement(${b})`, x;
 };
 //#endregion
-export { v as default };
+export { y as default };

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

@@ -0,0 +1,12 @@
+/** A `content` as the words drawn: a number written out, nothing as nothing, anything else that is not text as its JSON. */
+export declare const contentText: (content: unknown) => string;
+/**
+ * A text element's words: drawn on a page, and edited in place in the builder — double-click, type — each change
+ * written back to the element's `content`.
+ */
+declare const useEditableContent: (content: unknown) => {
+    previewMode: boolean | undefined;
+    text: string;
+    handleChange: (value: string) => void;
+};
+export default useEditableContent;

package/dist/Element/hooks/useEditableContent.mjs

@@ -0,0 +1,21 @@
+import e from "./useElement.mjs";
+import { use as t, useCallback as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitzi";
+import a from "@plitzi/sdk-shared/builder/contexts/BuilderContext";
+//#region src/Element/hooks/useEditableContent.ts
+var o = (e) => typeof e == "string" ? e : typeof e == "number" ? `${e}` : e == null ? "" : JSON.stringify(e), s = (s) => {
+	let { id: c } = e(), { settings: { previewMode: l } } = i(), u = t(a);
+	return {
+		previewMode: l,
+		text: r(() => o(s), [s]),
+		handleChange: n((e) => {
+			l || u.updateElement(c, "content", e);
+		}, [
+			u,
+			c,
+			l
+		])
+	};
+};
+//#endregion
+export { o as contentText, s as default };

package/dist/Element/hooks/useElementDataSource.mjs

@@ -1,23 +1,23 @@
 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";
+import { isRecord as n } from "@plitzi/sdk-shared/helpers/isRecord";
+import { templatePaths as r } from "@plitzi/sdk-shared/helpers/twigWrapper";
 //#region src/Element/hooks/useElementDataSource.ts
-var i = ({ source: e, transformers: t, when: r }) => {
+var i = ({ source: e, transformers: t, when: n }) => {
 	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;
+	for (let { action: e, params: n } of t ?? []) e === "twigTemplate" && typeof n.template == "string" && n.template && i.push(...r(n.template).filter((e) => e !== "source" && !e.startsWith("source.")));
+	return n && i.push(...a(n)), 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;
-}, s = (e, t, n) => {
+}, s = (e, t, r) => {
 	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;
+		let t = a[e], r = n(t) ? t : {};
+		a[e] = r, a = r;
 	}
-	a[i[i.length - 1]] = n;
+	a[i[i.length - 1]] = r;
 }, c = ({ bindings: n, sources: r }) => {
 	let a = e(() => {
 		let e = new Set(r ?? []);

package/dist/Element/hooks/useElementVisible.mjs

@@ -1,5 +1,5 @@
 import { useEffect as e, useState as t } from "react";
-import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import n from "@plitzi/sdk-shared/hooks/usePlitzi";
 //#region src/Element/hooks/useElementVisible.ts
 var r = (e) => typeof e.checkVisibility == "function" ? e.checkVisibility() : e.getClientRects().length > 0, i = (i) => {
 	let { utils: { rootRef: a } } = n(), [o, s] = t(void 0);

package/dist/Element/hooks/useInternalItems.mjs

@@ -4,29 +4,29 @@ import r from "../ServerStaticShell.mjs";
 import { Fragment as i, isValidElement as a, use as o, useMemo as s, useRef as c, useSyncExternalStore as l } from "react";
 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 { passesFlagGate as m } from "@plitzi/sdk-shared/flags";
+import f from "@plitzi/sdk-shared/elements/ComponentContext";
+import { passesFlagGate as p } from "@plitzi/sdk-shared/flags";
+import m from "@plitzi/sdk-shared/plugins/PluginsContext";
 import { jsx as h } from "react/jsx-runtime";
 //#region src/Element/hooks/useInternalItems.tsx
 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);
+	let [[k, A]] = u(["schema.flat", "rsc.enabled"], { mode: "mount" }), [j = y] = u("runtime.sources.flags"), { components: M, componentDefinitions: N } = o(f), { plugins: P } = o(m), { items: F } = w, I = N.current[w.type], L = w.loadStrategy ?? I?.definition.loadStrategy ?? "eager", R = T || E || F?.length, z = c(!1);
+	O && (z.current = !0);
+	let B = !D || L === "eager" || O || L === "lazy" && z.current, V = T ? `${T.type}:${T.rootId}:${T.slots.join(",")}` : "", H = l(b, x, S), U = T?.slots.includes(C) ?? !1, W = n(U ? C : void 0);
 	return s(() => {
-		if (!z || !V) return;
-		let n = (I ?? []).filter((e) => {
+		if (!R || !B) return;
+		let n = (F ?? []).filter((e) => {
 			let t = k[e];
-			if (!t || !m(t.definition.flag, j)) return !1;
+			if (!t || !p(t.definition.flag, j)) return !1;
 			if (!D || !A) return !0;
 			let n = t.definition.runtime ?? "shared";
-			return !(!U && n === "client");
+			return !(!H && n === "client");
 		}).map((n) => {
 			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: F
+				plugins: P
 			}), l = e({
-				key: !D && T ? `${n}_${H}` : n,
+				key: !D && T ? `${n}_${V}` : n,
 				plitziElementLayout: T,
 				type: a,
 				internalProps: {
@@ -34,32 +34,31 @@ var g = typeof window > "u", _ = "#layout-body", v = "#children", y = {}, b = ()
 					rootId: s
 				},
 				components: M.current,
-				plugins: F
+				plugins: P
 			});
 			return A && o === "server" && !g && D ? /* @__PURE__ */ h(r, {
 				id: n,
-				frozen: !(U && c),
+				frozen: !(H && c),
 				children: l
 			}, n) : l;
 		});
-		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;
+		if (U && n.push(/* @__PURE__ */ h(i, { children: W }, _)), Array.isArray(E) ? n.push(...E.filter(a)) : a(E) && n.push(/* @__PURE__ */ h(i, { children: E }, v)), F) return n.length === 1 ? n[0] : n;
 	}, [
-		z,
-		V,
-		I,
+		R,
+		B,
+		F,
 		j,
 		T,
 		E,
 		k,
 		D,
 		A,
-		U,
 		H,
+		V,
 		M,
-		F,
-		C,
-		W,
-		G
+		P,
+		U,
+		W
 	]);
 };
 //#endregion

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

@@ -1,10 +1,9 @@
-import { InteractionsManager } from '@plitzi/sdk-interactions';
-import { ElementInteraction } from '@plitzi/sdk-shared';
+import { InteractionsManagerApi, ElementInteraction } from '@plitzi/sdk-shared';
 export type UseIntervalTriggersProps = {
     id: string;
     interactions?: Record<string, ElementInteraction>;
     previewMode: boolean;
-    interactionsManager: InteractionsManager;
+    interactionsManager: InteractionsManagerApi;
 };
 /**
  * The element's repeating flows: one clock per interval its `onInterval` flows declare, running while it is mounted.

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

@@ -1,10 +1,9 @@
-import { InteractionsManager } from '@plitzi/sdk-interactions';
-import { ElementInteraction } from '@plitzi/sdk-shared';
+import { InteractionsManagerApi, ElementInteraction } from '@plitzi/sdk-shared';
 export type UseKeyTriggersProps = {
     id: string;
     interactions?: Record<string, ElementInteraction>;
     previewMode: boolean;
-    interactionsManager: InteractionsManager;
+    interactionsManager: InteractionsManagerApi;
 };
 /**
  * The element's keyboard shortcuts: its `onKey` flows, heard on the window for as long as it is mounted.

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

@@ -0,0 +1,21 @@
+/** What a flow started by an event reads, as the plugin hands it: one value for each field its `preview` names. */
+export type PluginTriggerPayload<Preview> = Preview extends object ? {
+    [Field in keyof Preview]: unknown;
+} : Record<string, never>;
+/** What `usePluginTrigger` reads of a declaration: the events it fires, each by its action, with what its flows read. */
+export type PluginTriggerDeclaration = {
+    triggers: Record<string, {
+        action: string;
+        preview?: unknown;
+    }>;
+};
+/**
+ * Fires one of the element's declared events — typed by its declaration, so an event it does not declare, or a payload
+ * missing a field its flows read, is a compile error: `fire('onEdit', { ops })`. A flow on that event runs with what
+ * it was handed.
+ *
+ * On a live page only: on the builder's canvas the page is being edited, flows never run, and a plugin that fired from
+ * an effect would be talking to nobody.
+ */
+declare const usePluginTrigger: <const D extends PluginTriggerDeclaration>(declaration: D) => <Event extends keyof D["triggers"] & string>(event: Event, payload: PluginTriggerPayload<D["triggers"][Event]["preview"]>) => void;
+export default usePluginTrigger;

package/dist/Element/hooks/usePluginTrigger.mjs

@@ -0,0 +1,18 @@
+import e from "./useElement.mjs";
+import { use as t, useCallback as n } from "react";
+import r from "@plitzi/sdk-shared/hooks/usePlitzi";
+import i from "@plitzi/sdk-interactions/InteractionsContext";
+//#region src/Element/hooks/usePluginTrigger.ts
+var a = (a) => {
+	let { id: o } = e(), { settings: { previewMode: s = !0 } } = r(), { interactionsManager: c } = t(i);
+	return n((e, t) => {
+		s && c.interactionTrigger(o, a.triggers[e].action, t);
+	}, [
+		a,
+		o,
+		c,
+		s
+	]);
+};
+//#endregion
+export { a as default };

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

@@ -1,10 +1,8 @@
 import { ElementContextValue } from '../ElementContext';
-import { InteractionsContextValue } from '@plitzi/sdk-interactions';
 import { InteractionCallback } from '@plitzi/sdk-shared';
-import { Context, RefObject } from 'react';
+import { RefObject } from 'react';
 export type UseRootElementInteractionsProps = {
     elementContext: ElementContextValue;
-    InteractionsContext: Context<InteractionsContextValue>;
     previewMode: boolean;
     debugMode: boolean;
     baseElementId?: string;
@@ -21,5 +19,5 @@ export type RootElementInteractions = {
     /** 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, ref }: UseRootElementInteractionsProps) => RootElementInteractions;
+declare const useRootElementInteractions: ({ elementContext, previewMode, debugMode, baseElementId, className, interactionTriggers, interactionCallbacks, otherProps, ref }: UseRootElementInteractionsProps) => RootElementInteractions;
 export default useRootElementInteractions;