@plitzi/sdk-elements 0.36.1 → 0.36.2

package/dist/dataSource/GlobalSources.mjs

@@ -6,64 +6,65 @@ import c, { SPACE_THEME_AREA as l } from "@plitzi/sdk-shared/theme/useTheme";
 import u from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 import d from "@plitzi/sdk-auth/AuthContext";
 import { resolveVariables as f } from "@plitzi/sdk-shared/dataSource";
+import p from "@plitzi/sdk-shared/hooks/useStableValue";
 //#region src/dataSource/GlobalSources.tsx
-var p = ({ children: p }) => {
-	let { environment: m } = a(), [[h, g, _, v, y, b]] = r([
+var m = ({ children: m }) => {
+	let { environment: h } = a(), [[g, _, v, y, b, x]] = r([
 		"schema.variables",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.hostname",
 		"navigation.origin",
 		"navigation.currentPageId"
-	]), x = n(() => f(h, {
-		routeParams: g,
-		queryParams: _,
-		hostname: v,
-		environment: m
+	]), S = p(n(() => f(g, {
+		routeParams: _,
+		queryParams: v,
+		hostname: y,
+		environment: h
 	}), [
-		m,
+		h,
+		y,
 		v,
 		_,
-		g,
-		h
-	]), S = t(() => s(x).map((e) => ({
+		g
+	])), C = t(() => s(S).map((e) => ({
 		path: e,
 		name: `variables.${e}`
-	})), [x]);
+	})), [S]);
 	u({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: S
-	}), i("runtime.sources.variables", x);
-	let [C = {}] = r("pageDefinitions"), w = n(() => Object.values(C).map((e) => ({
+		fields: C
+	}), i("runtime.sources.variables", S);
+	let [w = {}] = r("pageDefinitions"), T = n(() => Object.values(w).map((e) => ({
 		value: e.id,
 		label: o(e, "attributes.name", e.id)
-	})), [C]), T = n(() => ({
-		routeParams: g,
-		queryParams: _,
-		origin: y,
-		currentPageId: b
+	})), [w]), E = n(() => ({
+		routeParams: _,
+		queryParams: v,
+		origin: b,
+		currentPageId: x
 	}), [
-		g,
 		_,
-		y,
-		b
-	]), E = t(() => {
+		v,
+		b,
+		x
+	]), D = t(() => {
 		let e = s({
-			routeParams: g,
-			queryParams: _
+			routeParams: _,
+			queryParams: v
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
 		})), t = {
 			path: "origin",
 			name: "Origin"
-		}, n = w.length > 0 ? {
+		}, n = T.length > 0 ? {
 			path: "currentPageId",
 			name: "Current Page",
 			inputType: "select",
-			values: w
+			values: T
 		} : {
 			path: "currentPageId",
 			name: "Current Page"
@@ -74,74 +75,74 @@ var p = ({ children: p }) => {
 			n
 		];
 	}, [
-		g,
 		_,
-		w
+		v,
+		T
 	]);
 	u({
 		id: "global",
 		source: "navigation",
 		name: "Navigation",
-		fields: E
-	}), i("runtime.sources.navigation", T);
-	let { user: D, authenticated: O } = e(d), [k = "basic"] = r("schema.settings.userProvider"), A = n(() => k === "" ? {} : {
-		isAuthenticated: O,
-		accessToken: D?.accessToken ?? "",
+		fields: D
+	}), i("runtime.sources.navigation", E);
+	let { user: O, authenticated: k } = e(d), [A = "basic"] = r("schema.settings.userProvider"), j = n(() => A === "" ? {} : {
+		isAuthenticated: k,
+		accessToken: O?.accessToken ?? "",
 		details: {
 			username: "",
 			email: "",
 			roles: "",
 			permissions: "",
 			verified: "",
-			...D?.details ?? {}
+			...O?.details ?? {}
 		}
 	}, [
-		k,
-		D,
-		O
-	]), j = t(() => s(A).map((e) => ({
+		A,
+		O,
+		k
+	]), M = t(() => s(j).map((e) => ({
 		path: e,
 		name: `user.${e}`
-	})), [A]);
+	})), [j]);
 	u({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
-		fields: j
-	}), i("runtime.sources.auth", A);
-	let [M] = r("runtime.state"), N = t(() => s(M).map((e) => ({
+		fields: M
+	}), i("runtime.sources.auth", j);
+	let [N] = r("runtime.state"), P = t(() => s(N).map((e) => ({
 		path: e,
 		name: `state.${e}`
-	})), [M]);
+	})), [N]);
 	u({
 		id: "global",
 		source: "state",
 		name: "State",
-		fields: N
-	}), i("runtime.sources.state", M);
-	let [P] = r("runtime.host"), F = t(() => s(P).map((e) => ({
+		fields: P
+	}), i("runtime.sources.state", N);
+	let [F] = r("runtime.host"), I = t(() => s(F).map((e) => ({
 		path: e,
 		name: `host.${e}`
-	})), [P]);
+	})), [F]);
 	u({
 		id: "global",
 		source: "host",
 		name: "Host",
-		fields: F
-	}), i("runtime.sources.host", P);
-	let { theme: I, resolvedTheme: L } = c(l), R = n(() => ({
-		mode: I,
-		resolved: L
-	}), [I, L]), z = t(() => s(R).map((e) => ({
+		fields: I
+	}), i("runtime.sources.host", F);
+	let { theme: L, resolvedTheme: R } = c(l), z = n(() => ({
+		mode: L,
+		resolved: R
+	}), [L, R]), B = t(() => s(z).map((e) => ({
 		path: e,
 		name: `theme.${e}`
-	})), [R]);
+	})), [z]);
 	return u({
 		id: "global",
 		source: "theme",
 		name: "Theme",
-		fields: z
-	}), i("runtime.sources.theme", R), p;
+		fields: B
+	}), i("runtime.sources.theme", z), m;
 };
 //#endregion
-export { p as default };
+export { m as default };

package/dist/dataSource/pathFields.d.ts

@@ -0,0 +1,7 @@
+import { SourceField } from '@plitzi/sdk-shared';
+/**
+ * Every path of a source's data, named by its last two segments — what the binding picker lists for a provider, a
+ * modal or a dialog. Only ever run when the picker asks: see `useRegisterSource`.
+ */
+declare const pathFields: (data: Record<string, unknown>) => SourceField[];
+export default pathFields;

package/dist/dataSource/pathFields.mjs

@@ -0,0 +1,8 @@
+import { getPathsFromObeject as e } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/dataSource/pathFields.ts
+var t = (t) => e(t).map((e) => ({
+	path: e,
+	name: e.split(".").slice(-2).join(" ")
+}));
+//#endregion
+export { t as default };

package/dist/elements/advanced/Reference/Reference.mjs

@@ -1,143 +1,147 @@
-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 "../../../Element/PluginManager.mjs";
-import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as d } from "@plitzi/sdk-shared/store";
-import { get as f } from "@plitzi/plitzi-ui/helpers";
-import { StoreProvider as p } from "@plitzi/nexus/react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import g from "clsx";
+import e from "../../../Element/LayoutBody.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "../../../Element/hooks/useElement.mjs";
+import { RootElement as r } from "../../../Element/RootElement.mjs";
+import i from "../../../Element/PluginManager.mjs";
+import { use as a, useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useCommonStore as f } from "@plitzi/sdk-shared/store";
+import { get as p } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as m } from "@plitzi/nexus/react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "clsx";
 //#region src/elements/advanced/Reference/Reference.tsx
-var _ = ({ ref: e, children: _, className: v = "", referenceType: y = "element", referenceId: b = "", referenceContainer: x = "" }) => {
-	let { id: S, definition: { rootId: C, styleSelectors: w } } = t(), { settings: { previewMode: T, environment: E }, contexts: { SegmentsContext: D } } = u(), [[O, k]] = d(["schema", "segments"]), { segmentGet: A } = i(D), j = c(O);
-	j.current = O;
-	let M = c(k);
+var v = ({ ref: t, children: v, className: y = "", referenceType: b = "element", referenceId: x = "", referenceContainer: S = "" }) => {
+	let { id: C, definition: { rootId: w, styleSelectors: T } } = n(), { settings: { previewMode: E, environment: D }, contexts: { SegmentsContext: O } } = d(), [[k, A]] = f(["schema", "segments"]), { segmentGet: j } = a(O), M = l(k);
 	M.current = k;
-	let N = a((e, t) => {
+	let N = l(A);
+	N.current = A;
+	let P = o((e, t) => {
 		let n, r;
 		switch (t) {
 			case "segment": {
-				let t = f(M.current, e);
+				let t = p(N.current, e);
 				if (!t) return;
-				let i = f(t, "definition.baseElementId");
-				r = f(t, "schema"), n = f(t, `schema.flat.${i}`);
+				let i = p(t, "definition.baseElementId");
+				r = p(t, "schema"), n = p(t, `schema.flat.${i}`);
 				break;
 			}
-			default: n = f(j.current, `flat.${e}`), r = j.current;
+			default: n = p(M.current, `flat.${e}`), r = M.current;
 		}
 		if (n) return {
 			element: n,
-			elementType: f(n, "definition.type"),
+			elementType: p(n, "definition.type"),
 			referenceContextData: {
 				schema: r,
-				prevSchema: j.current
+				prevSchema: M.current
 			}
 		};
-	}, []), [P, F] = l(N(b, y)), I = a(async (e, t) => {
-		let n = N(e, t);
+	}, []), [F, I] = u(P(x, b)), L = o(async (e, t) => {
+		let n = P(e, t);
 		if (n) {
-			F(n);
+			I(n);
 			return;
 		}
 		let r, i;
 		switch (t) {
 			case "segment": {
 				let t;
-				if (e && (t = await A(e)), !t) return;
-				let n = f(t, "definition.baseElementId");
-				i = f(t, "schema"), r = f(t, `schema.flat.${n}`);
+				if (e && (t = await j(e)), !t) return;
+				let n = p(t, "definition.baseElementId");
+				i = p(t, "schema"), r = p(t, `schema.flat.${n}`);
 				break;
 			}
-			default: r = f(j.current, `flat.${e}`), i = j.current;
+			default: r = p(M.current, `flat.${e}`), i = M.current;
 		}
 		if (!r) {
-			F(void 0);
+			I(void 0);
 			return;
 		}
-		F({
+		I({
 			element: r,
-			elementType: f(r, "definition.type"),
+			elementType: p(r, "definition.type"),
 			referenceContextData: {
 				schema: i,
-				prevSchema: j.current
+				prevSchema: M.current
 			}
 		});
-	}, [N, A]);
-	o(() => {
-		I(b, y);
+	}, [P, j]);
+	s(() => {
+		L(x, b);
 	}, [
-		I,
-		b,
-		y
+		L,
+		x,
+		b
 	]);
-	let L = s(() => ({
-		bodyChildren: _,
-		containerId: x,
-		type: y,
-		referenceId: S,
-		rootId: S
+	let R = c(() => ({
+		containerId: S,
+		type: b,
+		rootId: C
 	}), [
-		x,
-		_,
-		y,
-		S
-	]), R = s(() => ({
-		id: P?.element?.id ?? "",
-		rootId: C,
-		className: w.base
+		S,
+		b,
+		C
+	]), z = c(() => ({
+		id: F?.element?.id ?? "",
+		rootId: w,
+		className: T.base
 	}), [
-		P?.element?.id,
-		C,
-		w.base
+		F?.element?.id,
+		w,
+		T.base
 	]);
-	if (!P) return /* @__PURE__ */ m(n, {
-		ref: e,
-		className: g("plitzi-component__reference", v, { "reference--build-mode": !T }),
-		children: !T && /* @__PURE__ */ h("div", {
+	if (!F) return /* @__PURE__ */ h(r, {
+		ref: t,
+		className: _("plitzi-component__reference", y, { "reference--build-mode": !E }),
+		children: !E && /* @__PURE__ */ g("div", {
 			className: "reference__label",
-			children: ["Element Reference ", /* @__PURE__ */ m("b", {
+			children: ["Element Reference ", /* @__PURE__ */ h("b", {
 				className: "capitalize",
-				children: y
+				children: b
 			})]
 		})
 	});
-	let { element: z, elementType: B, referenceContextData: V } = P;
-	return T && z && y === "element" ? /* @__PURE__ */ m(p, {
-		name: `Reference:${S}`,
-		value: V,
-		children: /* @__PURE__ */ m(r, {
-			type: B,
-			internalProps: R,
-			plitziElementLayout: L
-		}, `${S}_${b}`)
-	}) : /* @__PURE__ */ h(n, {
-		ref: e,
-		className: g("plitzi-component__reference", v, { "reference--build-mode": !T }),
+	let { element: B, elementType: V, referenceContextData: H } = F;
+	return E && B && b === "element" ? /* @__PURE__ */ h(m, {
+		name: `Reference:${C}`,
+		value: H,
+		children: /* @__PURE__ */ h(e, {
+			body: v,
+			children: /* @__PURE__ */ h(i, {
+				type: V,
+				internalProps: z,
+				plitziElementLayout: R
+			}, `${C}_${x}`)
+		})
+	}) : /* @__PURE__ */ g(r, {
+		ref: t,
+		className: _("plitzi-component__reference", y, { "reference--build-mode": !E }),
 		children: [
-			/* @__PURE__ */ m(p, {
-				name: `Reference:${S}`,
-				value: V,
-				children: z && /* @__PURE__ */ m(r, {
-					type: B,
-					internalProps: R,
-					plitziElementLayout: L
-				}, `${S}_${b}`)
+			/* @__PURE__ */ h(m, {
+				name: `Reference:${C}`,
+				value: H,
+				children: B && /* @__PURE__ */ h(e, {
+					body: v,
+					children: /* @__PURE__ */ h(i, {
+						type: V,
+						internalProps: z,
+						plitziElementLayout: R
+					}, `${C}_${x}`)
+				})
 			}),
-			!T && !z && /* @__PURE__ */ h("div", {
+			!E && !B && /* @__PURE__ */ g("div", {
 				className: "reference__label",
-				children: ["Element Reference ", y]
+				children: ["Element Reference ", b]
 			}),
-			T && !z && y === "segment" && /* @__PURE__ */ h("div", { children: [
+			E && !B && b === "segment" && /* @__PURE__ */ g("div", { children: [
 				"Segment ",
-				/* @__PURE__ */ m("b", { children: b }),
+				/* @__PURE__ */ h("b", { children: x }),
 				" not found, publish to ",
-				/* @__PURE__ */ m("b", { children: E }),
+				/* @__PURE__ */ h("b", { children: D }),
 				" environment"
 			] })
 		]
 	});
-}, v = e(_);
+}, y = t(v);
 //#endregion
-export { _ as Reference, v as default };
+export { v as Reference, y as default };

package/dist/elements/advanced/Reference/declaration.d.ts

@@ -53,8 +53,8 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    referenceId: string;
     referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
+    referenceId: string;
     referenceContainer: string;
 }>>;
 export default declaration;

package/dist/elements/advanced/Reference/index.d.ts

@@ -52,8 +52,8 @@ declare const Reference: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    referenceId: string;
     referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
+    referenceId: string;
     referenceContainer: string;
 }>>;
 export default Reference;

package/dist/elements/declarations/index.d.ts

@@ -1595,7 +1595,9 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+        layout?: string | undefined;
         subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | undefined;
+        layoutContainer?: string | undefined;
     }>>;
     readonly Link: {
         readonly type: "link";
@@ -2667,8 +2669,8 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        referenceId: string;
         referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
+        referenceId: string;
         referenceContainer: string;
     }>>;
     readonly RichText: {

package/dist/elements/internal/LayoutContainer/LayoutContainer.d.ts

@@ -1,6 +1,12 @@
 import { ReactNode, RefObject } from 'react';
 export type LayoutContainerProps = {
     ref?: RefObject<HTMLElement>;
+    /**
+     * The layout this one is shown inside, and the container in it that takes this one — the same pair a page names.
+     * Read by the page that renders the chain (`useLayoutChain`), not here.
+     */
+    layout?: string;
+    layoutContainer?: string;
     className?: string;
     children?: ReactNode;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';

package/dist/elements/internal/LayoutContainer/LayoutContainer.mjs

@@ -7,41 +7,49 @@ import { throttle as o } from "@plitzi/plitzi-ui/helpers";
 import { jsx as s } from "react/jsx-runtime";
 import c from "clsx";
 //#region src/elements/internal/LayoutContainer/LayoutContainer.tsx
-var l = ({ ref: e, className: l = "", children: u, subType: d = "div" }) => {
-	let { plitziElementLayout: f } = t(), { settings: { previewMode: p } } = a(), m = r((e, t) => {
-		if (!e || !t) return;
-		let n = t.getBoundingClientRect(), r = n.top - 0, i = n.left - 0, a = i + n.width + 0, o = r + n.height + 0, s = `
+var l = ".plitzi-component__layout-container", u = ".plitzi-component--layout-body", d = (e) => [...e.querySelectorAll(u)].find((e) => !e.querySelector(u)) ?? null, f = ({ ref: e, className: u = "", children: f, subType: p = "div" }) => {
+	let { plitziElementLayout: m } = t(), { settings: { previewMode: h } } = a(), g = r((e, t) => {
+		if (!e) return;
+		if (!t) {
+			e.style.removeProperty("--child-clip");
+			return;
+		}
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = e.offsetWidth > 0 ? n.width / e.offsetWidth : 1, a = (r.top - n.top) / i, o = (r.left - n.left) / i, s = o + r.width / i, c = a + r.height / i, l = `
       polygon(
         evenodd,
         /* outer rect */
         0 0, 100% 0, 100% 100%, 0% 100%, 0 0,
         /* inner rect */ 
-        ${i}px ${r}px, ${a}px ${r}px, ${a}px ${o}px, ${i}px ${o}px, ${i}px ${r}px
+        ${o}px ${a}px, ${s}px ${a}px, ${s}px ${c}px, ${o}px ${c}px, ${o}px ${a}px
       )`;
-		e.style.setProperty("--child-clip", s);
+		e.style.setProperty("--child-clip", l);
 	}, []);
 	return i(() => {
-		if (!f || !e?.current || p) return;
-		let t = o(() => {
-			let t = e.current, n = t.querySelector(".plitzi-component--layout-body");
-			m(t, n);
-		}, 150), n = new ResizeObserver(t);
-		n.observe(e.current);
-		let r = e.current.querySelector(".plitzi-component--layout-body");
-		return r && n.observe(r), () => {
-			t.cancel(), n.disconnect();
+		let t = e?.current;
+		if (!m || !t || h || t.parentElement?.closest(l)) return;
+		let n = null, r = o(() => {
+			let e = d(t);
+			e !== n && (n && i.unobserve(n), e && i.observe(e), n = e), g(t, e);
+		}, 50), i = new ResizeObserver(r);
+		i.observe(t);
+		let a = new MutationObserver(r);
+		return a.observe(t, {
+			childList: !0,
+			subtree: !0
+		}), t.addEventListener("scroll", r, !0), r(), () => {
+			r.cancel(), i.disconnect(), a.disconnect(), t.removeEventListener("scroll", r, !0);
 		};
 	}, [
-		f,
-		p,
+		m,
+		h,
 		e,
-		m
+		g
 	]), /* @__PURE__ */ s(n, {
 		ref: e,
-		tag: d,
-		className: c("plitzi-component__layout-container", l),
-		children: u
+		tag: p,
+		className: c("plitzi-component__layout-container", u),
+		children: f
 	});
-}, u = e(l);
+}, p = e(f);
 //#endregion
-export { l as LayoutContainer, u as default };
+export { f as LayoutContainer, p as default };

package/dist/elements/internal/LayoutContainer/Settings.d.ts

@@ -1,7 +1,10 @@
 type SettingsProps = {
+    id?: string;
+    layout?: string;
+    layoutContainer?: string;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
     folder?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ id, layout, layoutContainer, subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
 export default Settings;