@plitzi/sdk-elements 0.37.8 → 0.37.9

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

@@ -1,147 +1,137 @@
-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";
+import { isVisible as e } from "../../../Element/helpers/isVisible.mjs";
+import t from "../../../Element/LayoutBody.mjs";
+import n from "../../../Element/hooks/useInternalItems.mjs";
+import r from "../../../Element/hocs/withElement.mjs";
+import i from "../../../Element/hooks/useElement.mjs";
+import { RootElement as a } from "../../../Element/RootElement.mjs";
+import o from "../../../Element/PluginManager.mjs";
+import s from "../../../Element/ReplicaProvider.mjs";
+import { useId as c, useMemo as l } from "react";
+import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useCommonStore as d } from "@plitzi/sdk-shared/store";
+import { COMPONENT_PROPS_SOURCE as f } from "@plitzi/sdk-shared/schema/schemaConstants";
+import { StoreProvider as p } from "@plitzi/nexus/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "clsx";
+import { HIDDEN_CLASS as _ } from "@plitzi/sdk-shared/style/styleStates";
 //#region src/elements/advanced/Reference/Reference.tsx
-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 = l(A);
-	N.current = A;
-	let P = o((e, t) => {
-		let n, r;
-		switch (t) {
-			case "segment": {
-				let t = p(N.current, e);
-				if (!t) return;
-				let i = p(t, "definition.baseElementId");
-				r = p(t, "schema"), n = p(t, `schema.flat.${i}`);
-				break;
-			}
-			default: n = p(M.current, `flat.${e}`), r = M.current;
-		}
-		if (n) return {
-			element: n,
-			elementType: p(n, "definition.type"),
-			referenceContextData: {
-				schema: r,
-				prevSchema: M.current
-			}
-		};
-	}, []), [F, I] = u(P(x, b)), L = o(async (e, t) => {
-		let n = P(e, t);
-		if (n) {
-			I(n);
-			return;
-		}
-		let r, i;
-		switch (t) {
-			case "segment": {
-				let t;
-				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 = p(M.current, `flat.${e}`), i = M.current;
-		}
-		if (!r) {
-			I(void 0);
-			return;
+var v = (e, t) => Object.fromEntries(Object.entries(e.props ?? {}).map(([e, n]) => [e, t[e] ?? n.default ?? null])), y = (t, n) => g(t, { [_]: !e(n.visibility) }), b = ({ instance: e, instanceId: t, items: r, plitziElementLayout: i, previewMode: a }) => {
+	let o = l(() => ({
+		...e,
+		items: r
+	}), [e, r]);
+	return n({
+		id: t,
+		definition: o,
+		plitziElementLayout: i,
+		children: void 0,
+		previewMode: a
+	});
+}, x = ({ ref: e, className: n, componentId: r, previewMode: u }) => {
+	let { id: _, attributes: x, definition: S, plitziElementLayout: C, elementState: w, definition: { styleSelectors: T } } = i(), [E] = d("schema.components"), D = l(() => S.items ?? [], [S.items]), O = l(() => D.map((e) => `schema.flat.${e}.attributes.slot`), [D]), [k] = d(O), A = c(), j = Object.hasOwn(E, r) ? E[r] : void 0, M = l(() => j ? {
+		schema: { flat: j.flat },
+		runtime: { sources: { [f]: v(j, x) } }
+	} : {}, [j, x]), N = l(() => ({
+		slots: j?.slots ?? [],
+		rootId: _,
+		type: "component"
+	}), [j?.slots, _]), P = l(() => {
+		let e = j?.slots ?? [], t = {};
+		for (let n of e) {
+			let r = D.filter((t, r) => {
+				let i = k[r];
+				return (typeof i == "string" ? i : e[0]) === n;
+			});
+			t[n] = /* @__PURE__ */ m(b, {
+				instance: S,
+				instanceId: _,
+				items: r,
+				plitziElementLayout: C,
+				previewMode: u
+			});
 		}
-		I({
-			element: r,
-			elementType: p(r, "definition.type"),
-			referenceContextData: {
-				schema: i,
-				prevSchema: M.current
-			}
-		});
-	}, [P, j]);
-	s(() => {
-		L(x, b);
+		return t;
 	}, [
-		L,
-		x,
-		b
-	]);
-	let R = c(() => ({
-		containerId: S,
-		type: b,
-		rootId: C
-	}), [
+		j?.slots,
+		D,
+		k,
 		S,
-		b,
-		C
-	]), z = c(() => ({
-		id: F?.element?.id ?? "",
-		rootId: w,
-		className: T.base
+		_,
+		C,
+		u
+	]), F = y(T.base, w), I = l(() => ({
+		id: j?.rootId ?? "",
+		rootId: _,
+		className: F
 	}), [
-		F?.element?.id,
-		w,
-		T.base
-	]);
-	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__ */ h("b", {
-				className: "capitalize",
-				children: b
-			})]
+		j?.rootId,
+		_,
+		F
+	]), L = j ? j.flat[j.rootId] : void 0, R = L && /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m(p, {
+		inherit: "live",
+		name: `Component:${r}:${_}`,
+		segment: A,
+		value: M,
+		children: /* @__PURE__ */ m(t, {
+			bodies: P,
+			children: /* @__PURE__ */ m(o, {
+				type: L.definition.type,
+				internalProps: I,
+				plitziElementLayout: N
+			}, `${_}_${r}`)
 		})
+	}) });
+	return u && R ? R : /* @__PURE__ */ h(a, {
+		ref: e,
+		className: g("plitzi-component__reference", n, { "reference--build-mode": !u }),
+		children: [R, !u && !L && /* @__PURE__ */ h("div", {
+			className: "reference__label",
+			children: [
+				"Component ",
+				r,
+				" not found"
+			]
+		})]
 	});
-	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__ */ 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}`)
-				})
-			}),
-			!E && !B && /* @__PURE__ */ g("div", {
-				className: "reference__label",
-				children: ["Element Reference ", b]
-			}),
-			E && !B && b === "segment" && /* @__PURE__ */ g("div", { children: [
-				"Segment ",
-				/* @__PURE__ */ h("b", { children: x }),
-				" not found, publish to ",
-				/* @__PURE__ */ h("b", { children: D }),
-				" environment"
-			] })
-		]
+}, S = ({ ref: e, className: t, referenceId: n, previewMode: r }) => {
+	let { id: u, elementState: f, definition: { rootId: _, styleSelectors: v } } = i(), [b] = d(`schema.flat.${n}`), x = b, S = c(), C = y(v.base, f), w = l(() => ({
+		id: x?.id ?? "",
+		rootId: _,
+		className: C
+	}), [
+		x?.id,
+		_,
+		C
+	]), T = x && /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m(p, {
+		inherit: "live",
+		name: `Reference:${u}`,
+		segment: S,
+		children: /* @__PURE__ */ m(o, {
+			type: x.definition.type,
+			internalProps: w
+		}, `${u}_${n}`)
+	}) });
+	return r && T ? T : /* @__PURE__ */ h(a, {
+		ref: e,
+		className: g("plitzi-component__reference", t, { "reference--build-mode": !r }),
+		children: [T, !r && !x && /* @__PURE__ */ m("div", {
+			className: "reference__label",
+			children: "Element Reference"
+		})]
+	});
+}, C = ({ ref: e, className: t = "", referenceType: n = "element", referenceId: r = "" }) => {
+	let { settings: { previewMode: i = !0 } } = u();
+	return n === "component" ? /* @__PURE__ */ m(x, {
+		ref: e,
+		className: t,
+		componentId: r,
+		previewMode: i
+	}) : /* @__PURE__ */ m(S, {
+		ref: e,
+		className: t,
+		referenceId: r,
+		previewMode: i
 	});
-}, y = t(v);
+}, w = r(C);
 //#endregion
-export { v as Reference, y as default };
+export { C as Reference, w as default };

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

@@ -1,8 +1,9 @@
 type SettingsProps = {
-    referenceType?: 'element' | 'segment' | '';
+    referenceType?: 'element' | 'component';
     referenceId?: string;
-    referenceContainer?: string;
-    onUpdate?: (key: string, value: string | number | boolean) => void;
+    onUpdate?: (key: string, value: string | number | boolean | object) => void;
+    /** An instance's props arrive here as the attributes they are. */
+    [prop: string]: unknown;
 };
-declare const Settings: ({ referenceType, referenceId, referenceContainer, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ referenceType, referenceId, onUpdate, ...values }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,96 +1,57 @@
-import { use as e, useCallback as t, useMemo as n } from "react";
-import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as i } from "@plitzi/sdk-shared/store";
-import { get as a } from "@plitzi/plitzi-ui/helpers";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "@plitzi/plitzi-ui/Select2";
+import e from "./PropField.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/Select2";
 //#region src/elements/advanced/Reference/Settings.tsx
-var l = ({ referenceType: l = "element", referenceId: u = "", referenceContainer: d = "", onUpdate: f }) => {
-	let { contexts: { SegmentsContext: p } } = r(), [[m, h]] = i(["schema", "segments"]), { segmentGet: g, segmentsFetch: _ } = e(p), v = t((e) => {
-		f?.("referenceType", e?.value ?? ""), f?.("referenceId", ""), f?.("referenceContainer", "");
-	}, [f]), y = t((e) => {
-		f?.("referenceId", e?.value ?? ""), f?.("referenceContainer", ""), e?.value && l === "segment" && g(e.value);
-	}, [
-		f,
-		l,
-		g
-	]), b = t((e) => f?.("referenceContainer", e?.value ?? ""), [f]), x = n(() => [{
-		value: "element",
-		label: "Element"
-	}, {
-		value: "segment",
-		label: "Segment"
-	}], []), S = n(() => {
-		switch (l) {
-			case "segment": return a(h, `${u}.schema`, void 0);
-			default: return m;
-		}
-	}, [
-		l,
-		h,
-		u,
-		m
-	]), C = n(() => {
-		switch (l) {
-			case "element": return Object.values(S.flat).reduce((e, t) => [...e, {
-				value: t.id,
-				label: a(t, "definition.label")
-			}], []);
-			case "segment": return new Promise((e) => {
-				_().then((t) => {
-					e(a(t, "edges", []).map((e) => ({
-						value: e.identifier,
-						label: a(e, "definition.name", e.id)
-					})));
-				});
-			});
-			default: return [];
-		}
-	}, [
-		S,
-		l,
-		_
-	]), w = n(() => {
-		if (!u) return [];
-		switch (l) {
-			case "segment": {
-				let e = a(h, u), t = a(e, "definition.baseElementId");
-				return S?.flat ? Object.values(S.flat).filter((e) => a(e, "definition.type", "") === "container" && a(e, "definition.rootId", "") === t && Array.isArray(a(e, "definition.items")) && a(e, "definition.items", []).length === 0).map((e) => ({
-					value: e.id,
-					label: a(e, "definition.label")
-				})) : [];
-			}
-			default: return [];
-		}
-	}, [
-		u,
-		l,
-		h,
-		S?.flat
-	]);
-	return /* @__PURE__ */ s("div", {
-		className: "flex h-full flex-col py-2",
+var s = [{
+	value: "element",
+	label: "Element"
+}, {
+	value: "component",
+	label: "Component"
+}], c = ({ component: t, values: n, onUpdate: r }) => /* @__PURE__ */ i("div", {
+	className: "flex flex-col gap-2",
+	children: Object.entries(t.props ?? {}).map(([t, a]) => /* @__PURE__ */ i(e, {
+		name: t,
+		prop: a,
+		value: n[t],
+		onUpdate: r
+	}, t))
+}), l = ({ referenceType: e = "element", referenceId: l = "", onUpdate: u, ...d }) => {
+	let [[f, p]] = r(["schema.flat", "schema.components"]), m = t((e) => {
+		u?.("referenceType", e?.value ?? "element"), u?.("referenceId", "");
+	}, [u]), h = t((e) => u?.("referenceId", e?.value ?? ""), [u]), g = n(() => e === "component" ? Object.values(p).map((e) => ({
+		value: e.id,
+		label: e.label ?? e.id
+	})) : Object.values(f).map((e) => ({
+		value: e.id,
+		label: e.definition.label
+	})), [
+		e,
+		p,
+		f
+	]), _ = e === "component" && Object.hasOwn(p, l) ? p[l] : void 0;
+	return /* @__PURE__ */ a("div", {
+		className: "flex h-full flex-col gap-2 py-2",
 		children: [
-			/* @__PURE__ */ o(c, {
-				value: l,
-				onChange: v,
-				placeholder: "Search...",
+			/* @__PURE__ */ i(o, {
+				value: e,
 				label: "Reference Type",
-				options: x
+				onChange: m,
+				options: s
 			}),
-			/* @__PURE__ */ o(c, {
-				value: u,
-				label: "Reference ID",
-				onChange: y,
+			/* @__PURE__ */ i(o, {
+				value: l,
+				label: e === "component" ? "Component" : "Element",
+				onChange: h,
 				placeholder: "Search...",
-				options: C
+				options: g
 			}),
-			l === "segment" && /* @__PURE__ */ o(c, {
-				value: d,
-				label: "Reference Container",
-				placeholder: "None",
-				onChange: b,
-				options: w
+			_ && /* @__PURE__ */ i(c, {
+				component: _,
+				values: d,
+				onUpdate: u
 			})
 		]
 	});

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

@@ -8,12 +8,11 @@ declare const declaration: {
         readonly attributes: {
             readonly referenceType: "element";
             readonly referenceId: "";
-            readonly referenceContainer: "";
         };
         readonly definition: {
             readonly label: "Reference";
             readonly type: "reference";
-            readonly description: "Reuses another element or template by id, rendering it in place.";
+            readonly description: "Places one of the components of the space, or renders another of its elements by id, in place.";
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
@@ -53,8 +52,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
     referenceId: string;
-    referenceContainer: string;
+    referenceType: "element" | "component";
 }>>;
 export default declaration;

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

@@ -5,13 +5,12 @@ var t = e()({
 	content: {
 		attributes: {
 			referenceType: "element",
-			referenceId: "",
-			referenceContainer: ""
+			referenceId: ""
 		},
 		definition: {
 			label: "Reference",
 			type: "reference",
-			description: "Reuses another element or template by id, rendering it in place.",
+			description: "Places one of the components of the space, or renders another of its elements by id, in place.",
 			items: [],
 			bindings: {},
 			styleSelectors: { base: "" },

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

@@ -7,12 +7,11 @@ declare const Reference: {
         readonly attributes: {
             readonly referenceType: "element";
             readonly referenceId: "";
-            readonly referenceContainer: "";
         };
         readonly definition: {
             readonly label: "Reference";
             readonly type: "reference";
-            readonly description: "Reuses another element or template by id, rendering it in place.";
+            readonly description: "Places one of the components of the space, or renders another of its elements by id, in place.";
             readonly items: readonly [];
             readonly bindings: {};
             readonly styleSelectors: {
@@ -52,8 +51,7 @@ declare const Reference: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
     referenceId: string;
-    referenceContainer: string;
+    referenceType: "element" | "component";
 }>>;
 export default Reference;

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

@@ -3109,12 +3109,11 @@ export declare const elementDeclarations: {
             readonly attributes: {
                 readonly referenceType: "element";
                 readonly referenceId: "";
-                readonly referenceContainer: "";
             };
             readonly definition: {
                 readonly label: "Reference";
                 readonly type: "reference";
-                readonly description: "Reuses another element or template by id, rendering it in place.";
+                readonly description: "Places one of the components of the space, or renders another of its elements by id, in place.";
                 readonly items: readonly [];
                 readonly bindings: {};
                 readonly styleSelectors: {
@@ -3154,9 +3153,8 @@ export declare const elementDeclarations: {
             readonly settings: {};
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-        referenceType: import('@plitzi/sdk-shared').ElementLayoutType;
         referenceId: string;
-        referenceContainer: string;
+        referenceType: "element" | "component";
     }>>;
     readonly RichText: {
         readonly type: "richText";

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

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