@plitzi/sdk-elements 0.36.0 → 0.36.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @plitzi/sdk-elements
 
+## 0.36.2
+
+### Patch Changes
+
+- v0.36.2
+- Updated dependencies
+  - @plitzi/sdk-auth@0.36.2
+  - @plitzi/sdk-dev-tools@0.36.2
+  - @plitzi/sdk-event-bridge@0.36.2
+  - @plitzi/sdk-interactions@0.36.2
+  - @plitzi/sdk-navigation@0.36.2
+  - @plitzi/sdk-schema@0.36.2
+  - @plitzi/sdk-shared@0.36.2
+
+## 0.36.1
+
+### Patch Changes
+
+- v0.36.1
+- Updated dependencies
+  - @plitzi/sdk-auth@0.36.1
+  - @plitzi/sdk-dev-tools@0.36.1
+  - @plitzi/sdk-event-bridge@0.36.1
+  - @plitzi/sdk-interactions@0.36.1
+  - @plitzi/sdk-navigation@0.36.1
+  - @plitzi/sdk-schema@0.36.1
+  - @plitzi/sdk-shared@0.36.1
+
 ## 0.36.0
 
 ### Minor Changes

package/dist/Element/ElementParentContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * What an element needs from the element around it: whether that one is on screen, and its tracing identity.
+ *
+ * Kept apart from `ElementContext` on purpose. That context carries the whole element — its attributes, its state,
+ * its style — so a parent whose state changed (a nav item lighting up on a navigation) re-rendered every child
+ * reading it, for two values that had not moved. Children read this; only the element itself reads the full one.
+ */
+export type ElementParentContextValue = {
+    visible: boolean;
+    traceId: string;
+};
+declare const ElementParentContext: import('react').Context<ElementParentContextValue | undefined>;
+export default ElementParentContext;

package/dist/Element/ElementParentContext.mjs

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

package/dist/Element/LayoutBody.d.ts

@@ -0,0 +1,21 @@
+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;
+    children: ReactNode;
+};
+/**
+ * Hands a shell's slot its body without handing it 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
+ * 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.
+ */
+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;
+export default LayoutBody;

package/dist/Element/LayoutBody.mjs

@@ -0,0 +1,24 @@
+import { createContext as e, use as t, useCallback as n, useLayoutEffect as r, useState as i, useSyncExternalStore as a } from "react";
+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(() => ({
+		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,
+		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);
+};
+//#endregion
+export { l as default, u as useLayoutBody };

package/dist/Element/hocs/withElement.mjs

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

package/dist/Element/hooks/useElementInternal.mjs

@@ -70,39 +70,39 @@ var f = (e, n, r = {}, i = {}) => {
 		},
 		style: o
 	};
-}, p = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
-	let { id: p } = l, { state: m, setElementState: h } = r({
-		id: p,
+}, p = ["variables"], m = (e) => Object.values(e ?? {}).some((e) => typeof e == "string" && u(e)), h = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
+	let { id: h } = l, { state: g, setElementState: _ } = r({
+		id: h,
 		bindings: a.definition.bindings,
 		previewMode: u
-	}), [[g, _, v]] = s([
+	}), v = o(() => m(a.attributes) || m(l.attributes), [a.attributes, l.attributes]), [[y, b, x]] = s([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.origin"
-	]), y = n({
+	], { enabled: v }), S = n({
 		bindings: a.definition.bindings,
-		sources: ["variables"]
-	}), b = o(() => ({
+		sources: v ? p : void 0
+	}), C = o(() => ({
 		...f(a, l, {
-			...y,
-			routeParams: g,
-			queryParams: _,
-			origin: v
-		}, m),
-		setElementState: h
+			...S,
+			routeParams: y,
+			queryParams: b,
+			origin: x
+		}, g),
+		setElementState: _
 	}), [
 		a,
 		l,
+		S,
 		y,
+		b,
+		x,
 		g,
-		_,
-		v,
-		m,
-		h
+		_
 	]);
 	return {
-		internalProps: b,
-		customProps: t(b, [
+		internalProps: C,
+		customProps: t(C, [
 			"id",
 			"rootId",
 			"plitziElementLayout",
@@ -113,14 +113,14 @@ var f = (e, n, r = {}, i = {}) => {
 			"setElementState"
 		]),
 		children: i({
-			id: p,
-			definition: b.definition,
-			plitziElementLayout: b.plitziElementLayout,
+			id: h,
+			definition: C.definition,
+			plitziElementLayout: C.plitziElementLayout,
 			children: c,
 			previewMode: u,
-			visible: d && e(b.elementState.visibility)
+			visible: d && e(C.elementState.visibility)
 		})
 	};
 };
 //#endregion
-export { p as default, f as getProps };
+export { h as default, f as getProps };

package/dist/Element/hooks/useInternalItems.mjs

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

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

@@ -0,0 +1,10 @@
+import { LayoutLink } from '@plitzi/sdk-shared/schema/layoutChain';
+/**
+ * The shells around a page, innermost first — see `resolveLayoutChain`.
+ *
+ * Read from the store rather than from a subscription to the whole schema's value: a page re-rendered on every edit
+ * anywhere in the document would be the builder rebuilding the page on each keystroke. The chain is compared with the
+ * previous one, so the page renders again only when a shell in it changes which shell it sits in.
+ */
+declare const useLayoutChain: (layout: string, layoutContainer: string) => LayoutLink[];
+export default useLayoutChain;

package/dist/Element/hooks/useLayoutChain.mjs

@@ -0,0 +1,20 @@
+import { useCallback as e, useContext as t, useRef as n, useSyncExternalStore as r } from "react";
+import { StoreContext as i } from "@plitzi/nexus/react";
+import { resolveLayoutChain as a } from "@plitzi/sdk-shared/schema/layoutChain";
+//#region src/Element/hooks/useLayoutChain.ts
+var o = [], s = (e, t) => e.length === t.length && e.every((e, n) => e.layout === t[n].layout && e.slot === t[n].slot), c = (e) => typeof e == "object" && !!e && "definition" in e && "attributes" in e, l = (e) => (t) => {
+	let n = e(`schema.flat.${t}`);
+	return c(n) ? n : void 0;
+}, u = (c, u) => {
+	let d = t(i), f = n(o), p = e((e) => d ? d.subscribePath("schema.flat", e) : () => void 0, [d]), m = e(() => {
+		let e = c && d ? a(l((e) => d.getPath(e)), c, u) : o;
+		return s(f.current, e) || (f.current = e), f.current;
+	}, [
+		d,
+		c,
+		u
+	]);
+	return r(p, m, m);
+};
+//#endregion
+export { u as default };