@plitzi/sdk-elements 0.36.0 → 0.36.2

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;

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

@@ -1,73 +1,87 @@
-import { useCallback as e, useMemo as t } from "react";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@plitzi/plitzi-ui/Select";
-import o from "@plitzi/plitzi-ui/Select2";
+import e from "../LayoutPicker/index.mjs";
+import { useCallback as t, useMemo as n } from "react";
+import { useCommonStore as r } from "@plitzi/sdk-shared/store";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@plitzi/plitzi-ui/Select";
+import s from "@plitzi/plitzi-ui/Select2";
 //#region src/elements/internal/LayoutContainer/Settings.tsx
-var s = ({ subType: s = "div", folder: c = "", onUpdate: l }) => {
-	let [u] = n("schema.pageFolders"), d = e((e) => l?.("subType", e), [l]), f = e((e) => l?.("folder", e?.value ?? ""), [l]), p = t(() => [{
+var c = ({ id: c, layout: l = "", layoutContainer: u = "", subType: d = "div", folder: f = "", onUpdate: p }) => {
+	let [m] = r("schema.pageFolders"), h = t((e) => p?.("subType", e), [p]), g = t((e) => p?.("folder", e?.value ?? ""), [p]), _ = n(() => [{
 		value: "",
 		label: "None"
-	}, ...u.map(({ id: e, name: t }) => ({
+	}, ...m.map(({ id: e, name: t }) => ({
 		value: e,
 		label: t
-	}))], [u]);
-	return /* @__PURE__ */ i("div", {
+	}))], [m]);
+	return /* @__PURE__ */ a("div", {
 		className: "flex flex-col gap-4 py-2",
-		children: [/* @__PURE__ */ i(a, {
-			value: s,
-			label: "Container Tag",
-			onChange: d,
-			children: [
-				/* @__PURE__ */ r("option", {
-					value: "div",
-					children: "Div"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "header",
-					children: "Header"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "footer",
-					children: "Footer"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "nav",
-					children: "Nav"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "main",
-					children: "Main"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "section",
-					children: "Section"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "article",
-					children: "Article"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "aside",
-					children: "Aside"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "address",
-					children: "Address"
-				}),
-				/* @__PURE__ */ r("option", {
-					value: "figure",
-					children: "Figure"
-				})
-			]
-		}), /* @__PURE__ */ r(o, {
-			label: "Folder",
-			value: c,
-			options: p,
-			placeholder: "None",
-			onChange: f
-		})]
+		children: [
+			/* @__PURE__ */ a(o, {
+				value: d,
+				label: "Container Tag",
+				onChange: h,
+				children: [
+					/* @__PURE__ */ i("option", {
+						value: "div",
+						children: "Div"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "header",
+						children: "Header"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "footer",
+						children: "Footer"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "nav",
+						children: "Nav"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "main",
+						children: "Main"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "section",
+						children: "Section"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "article",
+						children: "Article"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "aside",
+						children: "Aside"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "address",
+						children: "Address"
+					}),
+					/* @__PURE__ */ i("option", {
+						value: "figure",
+						children: "Figure"
+					})
+				]
+			}),
+			/* @__PURE__ */ i(s, {
+				label: "Folder",
+				value: f,
+				options: _,
+				placeholder: "None",
+				onChange: g
+			}),
+			/* @__PURE__ */ i(e, {
+				layout: l,
+				layoutContainer: u,
+				ownLayoutId: c,
+				onUpdate: p
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "text-xs text-gray-500 dark:text-zinc-400",
+				children: "A layout can sit inside another one: pages using this layout are shown inside it, and it inside the one picked here — the outer shell stays mounted while moving between pages that share it."
+			})
+		]
 	});
 };
 //#endregion
-export { s as default };
+export { c as default };

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

@@ -52,6 +52,8 @@ declare const declaration: {
         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;
 }>>;
 export default declaration;

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

@@ -51,6 +51,8 @@ declare const LayoutContainer: {
         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;
 }>>;
 export default LayoutContainer;

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

@@ -0,0 +1,10 @@
+export type LayoutPickerProps = {
+    layout?: string;
+    layoutContainer?: string;
+    /** The layout being edited, when it is one: it cannot sit in itself, nor in a shell that already sits in it. */
+    ownLayoutId?: string;
+    onUpdate?: (key: string, value: string) => void;
+};
+/** Which shell something is rendered inside, and the container in that shell its content goes into. */
+declare const LayoutPicker: ({ layout, layoutContainer, ownLayoutId, onUpdate }: LayoutPickerProps) => import("react").JSX.Element;
+export default LayoutPicker;

package/dist/elements/internal/LayoutPicker/LayoutPicker.mjs

@@ -0,0 +1,35 @@
+import { useCallback as e, useMemo as t } from "react";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
+import { get as r } from "@plitzi/plitzi-ui/helpers";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { resolveLayoutChain as s } from "@plitzi/sdk-shared/schema/layoutChain";
+import c from "@plitzi/plitzi-ui/Select";
+//#region src/elements/internal/LayoutPicker/LayoutPicker.tsx
+var l = ({ layout: l = "", layoutContainer: u = "", ownLayoutId: d, onUpdate: f }) => {
+	let [p] = n("schema.flat"), m = t(() => Object.values(p).filter((e) => r(e, "definition.type", "") === "layoutContainer" && (!d || !s((e) => p[e], e.id, "").some((e) => e.layout === d))), [p, d]), h = t(() => l ? Object.values(p).filter((e) => r(e, "definition.type", "") === "container" && r(e, "definition.rootId", "") === l) : [], [p, l]), g = e((e) => {
+		f?.("layout", e), f?.("layoutContainer", "");
+	}, [f]), _ = e((e) => f?.("layoutContainer", e), [f]);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(c, {
+		value: l,
+		placeholder: "None",
+		label: "Layout",
+		onChange: g,
+		size: "xs",
+		children: m.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ a("option", {
+			value: e,
+			children: t
+		}, e))
+	}), l && /* @__PURE__ */ a(c, {
+		value: u,
+		placeholder: "None",
+		label: "Layout Container Body",
+		onChange: _,
+		size: "xs",
+		children: h.map(({ id: e, definition: { label: t } }) => /* @__PURE__ */ a("option", {
+			value: e,
+			children: t
+		}, e))
+	})] });
+};
+//#endregion
+export { l as default };

package/dist/elements/internal/LayoutPicker/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LayoutPicker } from './LayoutPicker';
+export * from './LayoutPicker';
+export default LayoutPicker;

package/dist/elements/internal/LayoutPicker/index.mjs

@@ -0,0 +1,5 @@
+import e from "./LayoutPicker.mjs";
+//#region src/elements/internal/LayoutPicker/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/elements/internal/Page/Page.mjs

@@ -1,31 +1,36 @@
-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 "../LayoutContainer/index.mjs";
-import { use as i, useEffect as a, useMemo as o } from "react";
-import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as c } from "@plitzi/sdk-shared/store";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import d from "clsx";
-import { Helmet as f } from "@dr.pogodin/react-helmet";
+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 "../LayoutContainer/index.mjs";
+import a from "../../../Element/hooks/useLayoutChain.mjs";
+import { use as o, useEffect as s, useMemo as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as u } from "@plitzi/sdk-shared/store";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
+import { Helmet as m } from "@dr.pogodin/react-helmet";
 //#region src/elements/internal/Page/Page.tsx
-var p = ({ ref: e, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescription: h = "Description", className: g = "", layout: _ = "", layoutContainer: v = "", children: y }) => {
-	let { id: b } = t(), { settings: { previewMode: x }, contexts: { InteractionsContext: S } } = s(), { interactionsManager: C } = i(S), [[w, T]] = c(["navigation.routeParams", "navigation.queryParams"]), E = o(() => ({
-		id: _,
-		rootId: b,
-		plitziElementLayout: {
-			bodyChildren: y,
-			containerId: v || _,
-			referenceId: b,
-			rootId: v || _,
-			type: "layout"
-		}
-	}), [
-		v,
-		_,
-		b,
-		y
-	]), D = o(() => ({ onPageLoad: {
+var h = (e) => e.map((e) => ({
+	...e,
+	plitziElementLayout: {
+		containerId: e.slot,
+		rootId: e.slot,
+		type: "layout"
+	}
+})), g = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ d(e, {
+	body: t,
+	children: /* @__PURE__ */ d(i, { internalProps: {
+		id: r,
+		rootId: n,
+		plitziElementLayout: o
+	} })
+}, a), r), _ = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: _ = "Description", className: v = "", layout: y = "", layoutContainer: b = "", children: x }) => {
+	let { id: S } = n(), { settings: { previewMode: C }, contexts: { InteractionsContext: w } } = l(), { interactionsManager: T } = o(w), [[E, D]] = u(["navigation.routeParams", "navigation.queryParams"]), O = a(y, b), k = c(() => h(O), [O]), A = c(() => g(k, S, x), [
+		k,
+		S,
+		x
+	]), j = c(() => ({ onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",
 		type: "trigger",
@@ -36,35 +41,31 @@ var p = ({ ref: e, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescrip
 			queryParams: ""
 		}
 	} }), []);
-	return a(() => {
+	return s(() => {
 		let e = !1;
 		return queueMicrotask(() => {
-			e || C.interactionTrigger(b, "onPageLoad", {
-				pageId: b,
-				routeParams: w,
-				queryParams: T
+			e || T.interactionTrigger(S, "onPageLoad", {
+				pageId: S,
+				routeParams: E,
+				queryParams: D
 			});
 		}), () => {
 			e = !0;
 		};
 	}, [
-		b,
-		C,
+		S,
 		T,
-		w
-	]), /* @__PURE__ */ u(n, {
+		D,
+		E
+	]), /* @__PURE__ */ f(r, {
 		ref: e,
-		className: d("plitzi-component__page", g),
-		interactionTriggers: D,
-		children: [
-			p && x && /* @__PURE__ */ u(f, { children: [!!m && /* @__PURE__ */ l("title", { children: m }), !!h && /* @__PURE__ */ l("meta", {
-				name: "description",
-				content: h
-			})] }),
-			_ && /* @__PURE__ */ l(r, { internalProps: E }, v || _),
-			!_ && y
-		]
+		className: p("plitzi-component__page", v),
+		interactionTriggers: j,
+		children: [t && C && /* @__PURE__ */ f(m, { children: [!!i && /* @__PURE__ */ d("title", { children: i }), !!_ && /* @__PURE__ */ d("meta", {
+			name: "description",
+			content: _
+		})] }), A]
 	});
-}, m = e(p);
+}, v = t(_);
 //#endregion
-export { p as Page, m as default };
+export { _ as Page, v as default };