@plitzi/sdk-elements 0.38.9 → 0.38.11

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

@@ -48,6 +48,7 @@ export declare const elementDeclarations: {
             readonly pagination: readonly string[];
         };
         readonly sourceType: "apiContainer";
+        readonly serverTemplates: readonly ["notFound"];
         readonly triggers: {
             readonly onApiError: {
                 readonly action: "onApiError";
@@ -211,25 +212,25 @@ export declare const elementDeclarations: {
         headers?: Record<string, string> | undefined;
         notFound?: string | undefined;
         subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
+        credentials?: RequestCredentials | undefined;
+        staleTime?: number | string | undefined;
+        gcTime?: number | string | undefined;
+        pageParam?: string | undefined;
         query?: string | undefined;
         accessToken?: string | undefined;
         mockData?: (Record<string, unknown> | string) | undefined;
-        credentials?: RequestCredentials | undefined;
+        singleRecord?: boolean | undefined;
+        pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
+        renderWhileLoading?: boolean | undefined;
+        loadingSlot?: string | undefined;
+        refreshSeconds?: number | string | undefined;
         connector?: string | undefined;
         limit?: string | undefined;
-        singleRecord?: boolean | undefined;
         filters?: {
             field: string;
             operator: string;
             value: string;
         }[] | undefined;
-        pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
-        pageParam?: string | undefined;
-        renderWhileLoading?: boolean | undefined;
-        loadingSlot?: string | undefined;
-        staleTime?: number | string | undefined;
-        gcTime?: number | string | undefined;
-        refreshSeconds?: number | string | undefined;
     }>>;
     readonly BlockHtml: {
         readonly type: "blockHtml";
@@ -602,8 +603,8 @@ export declare const elementDeclarations: {
         items?: unknown[] | undefined;
         speed?: number | undefined;
         loop?: boolean | undefined;
-        autoplay?: number | undefined;
         pauseOnHover?: boolean | undefined;
+        autoplay?: number | undefined;
         transition?: import('../structure/Carousel/CarouselContext').CarouselTransition | undefined;
         itemKey?: string | undefined;
     }>>;
@@ -676,6 +677,7 @@ export declare const elementDeclarations: {
                     readonly from: "";
                     readonly user: "";
                     readonly at: "";
+                    readonly echo: false;
                 };
             };
             readonly onJoin: {
@@ -718,6 +720,11 @@ export declare const elementDeclarations: {
                         readonly defaultValue: "";
                         readonly type: "text";
                     };
+                    readonly echo: {
+                        readonly label: "Heard on this page too";
+                        readonly defaultValue: false;
+                        readonly type: "boolean";
+                    };
                 };
             };
             readonly setPresence: {
@@ -786,9 +793,9 @@ export declare const elementDeclarations: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         subType?: "" | "div" | "section" | "aside" | "main" | undefined;
-        topic?: string | undefined;
         grant?: string | undefined;
         presence?: unknown;
+        topic?: string | undefined;
         keep?: number | string | undefined;
     }>>;
     readonly Container: {
@@ -1061,8 +1068,7 @@ export declare const elementDeclarations: {
                             readonly top: "0";
                             readonly position: "absolute";
                             readonly 'z-index': "210";
-                            readonly 'background-color': "black";
-                            readonly opacity: "0.5";
+                            readonly 'background-color': "rgb(0 0 0 / 50%)";
                         };
                     };
                     readonly rootContainer: {
@@ -3036,7 +3042,7 @@ export declare const elementDeclarations: {
             readonly definition: {
                 readonly label: "Modal Container";
                 readonly type: "modalContainer";
-                readonly description: "A modal overlay container opened and closed through interactions; use for dialogs over the page.";
+                readonly description: string;
                 readonly items: readonly [];
                 readonly bindings: {};
                 readonly loadStrategy: "lazy";
@@ -3093,8 +3099,7 @@ export declare const elementDeclarations: {
                             readonly top: "0";
                             readonly position: "absolute";
                             readonly 'z-index': "210";
-                            readonly 'background-color': "black";
-                            readonly opacity: "0.5";
+                            readonly 'background-color': "rgb(0 0 0 / 50%)";
                         };
                     };
                     readonly rootContainer: {
@@ -3579,6 +3584,7 @@ export declare const elementDeclarations: {
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
     readonly Page: {
         readonly type: "page";
+        readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
         readonly triggers: {
             readonly onPageLoad: {
                 readonly action: "onPageLoad";
@@ -3659,6 +3665,7 @@ export declare const elementDeclarations: {
         };
     } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
         layout?: string | undefined;
+        notFound?: string | undefined;
         layoutContainer?: string | undefined;
         seoEnabled?: boolean | undefined;
         seoPageTitle?: string | undefined;
@@ -4443,3 +4450,8 @@ export declare const elementDeclarations: {
 };
 export type ElementDeclarationName = keyof typeof elementDeclarations;
 export { ApiContainerDeclaration, BlockHtmlDeclaration, BlockJsxDeclaration, ButtonDeclaration, CarouselDeclaration, CarouselTrackDeclaration, ChannelDeclaration, ContainerDeclaration, CustomDeclaration, DialogContainerDeclaration, DropdownDeclaration, DropdownPopupDeclaration, EmbedDeclaration, FontAwesomeDeclaration, FormControlDeclaration, FormDeclaration, HeadingDeclaration, ImageDeclaration, LayoutContainerDeclaration, LinkDeclaration, ListDeclaration, ListItemDeclaration, LoadingDeclaration, MarkdownDeclaration, ModalContainerDeclaration, NodeHtmlDeclaration, NotFoundDeclaration, PageDeclaration, PaginationDeclaration, ParagraphDeclaration, ReferenceDeclaration, RichTextDeclaration, SvgDeclaration, TabContainerBodyDeclaration, TabContainerDeclaration, TabContainerHeaderDeclaration, TabContainerItemDeclaration, TextDeclaration, ThemeToggleDeclaration, VideoDeclaration };
+/**
+ * Each type's `serverTemplates`, by the type a document names: the attributes the page server evaluates against a
+ * context of its own, which the element runtime leaves as written and the authoring lint holds to that context.
+ */
+export declare const serverTemplatesByType: Readonly<Record<string, readonly string[]>>;

package/dist/elements/declarations/index.mjs

@@ -26,8 +26,8 @@ import w from "../media/Svg/declaration.mjs";
 import T from "../media/Video/declaration.mjs";
 import E from "../provider/ApiContainer/declaration.mjs";
 import D from "../provider/Channel/declaration.mjs";
-import O from "../structure/Carousel/declaration.mjs";
-import k from "../structure/Carousel/CarouselTrack/declaration.mjs";
+import O from "../structure/Carousel/CarouselTrack/declaration.mjs";
+import k from "../structure/Carousel/declaration.mjs";
 import A from "../structure/Container/declaration.mjs";
 import j from "../structure/DialogContainer/declaration.mjs";
 import M from "../structure/List/declaration.mjs";
@@ -44,8 +44,8 @@ var B = {
 	BlockHtml: e,
 	BlockJsx: t,
 	Button: a,
-	Carousel: O,
-	CarouselTrack: k,
+	Carousel: k,
+	CarouselTrack: O,
 	Channel: D,
 	Container: A,
 	Custom: n,
@@ -80,6 +80,6 @@ var B = {
 	Text: p,
 	ThemeToggle: m,
 	Video: T
-};
+}, V = Object.fromEntries(Object.values(B).flatMap((e) => "serverTemplates" in e ? [[e.type, e.serverTemplates]] : []));
 //#endregion
-export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, O as CarouselDeclaration, k as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations };
+export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, k as CarouselDeclaration, O as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations, V as serverTemplatesByType };

package/dist/elements/form/Form/Form.mjs

@@ -1,7 +1,7 @@
-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 "./declaration.mjs";
+import e from "./declaration.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "../../../Element/hooks/useElement.mjs";
+import { RootElement as r } from "../../../Element/RootElement.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 { get as d, omit as f } from "@plitzi/plitzi-ui/helpers";
@@ -13,8 +13,8 @@ import { produce as _ } from "immer";
 import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
 import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/form/Form/Form.tsx
-var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
-	let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = t(), F = v(r.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
+var b = ({ ref: t, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
+	let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = n(), F = v(e.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
 		...t,
 		[e.name]: e
 	})), [k]);
@@ -106,9 +106,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		fields: G
 	});
 	let q = s(() => ({ onSubmit: {
-		...r.triggers.onSubmit,
+		...e.triggers.onSubmit,
 		preview: {
-			...r.triggers.onSubmit.preview,
+			...e.triggers.onSubmit.preview,
 			values: Object.values(O).reduce((e, t) => ({
 				...e,
 				[t.name]: ""
@@ -162,36 +162,36 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		let { name: t, error: n } = e;
 		W(t, n);
 	}, [W]), Q = s(() => {
-		let { performReset: e, setFieldValue: t, setFieldError: n } = r.callbacks, i = Object.values(O).map((e) => ({
+		let { performReset: t, setFieldValue: n, setFieldError: r } = e.callbacks, i = Object.values(O).map((e) => ({
 			value: e.name,
 			label: e.name
 		}));
 		return {
 			performReset: {
-				...e,
+				...t,
 				title: `Reset ${N}`,
 				callback: Y
 			},
 			setFieldValue: {
-				...t,
+				...n,
 				title: `Set Field Value ${N}`,
 				callback: X,
 				params: {
-					...t.params,
+					...n.params,
 					name: {
-						...t.params.name,
+						...n.params.name,
 						options: i
 					}
 				}
 			},
 			setFieldError: {
-				...n,
+				...r,
 				title: `Set Field Error ${N}`,
 				callback: Z,
 				params: {
-					...n.params,
+					...r.params,
 					name: {
-						...n.params.name,
+						...r.params.name,
 						options: i
 					}
 				}
@@ -204,9 +204,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 		O,
 		Z
 	]);
-	return /* @__PURE__ */ h(n, {
+	return /* @__PURE__ */ h(r, {
 		tag: "form",
-		ref: e,
+		ref: t,
 		noValidate: T,
 		method: S,
 		className: g("plitzi-component__form", b),
@@ -222,6 +222,6 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
 			children: x
 		})
 	});
-}, x = e(b);
+}, x = t(b);
 //#endregion
 export { b as Form, x as default };

package/dist/elements/form/FormControl/FormControl.mjs

@@ -1,7 +1,7 @@
-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 "./declaration.mjs";
+import e from "./declaration.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "../../../Element/hooks/useElement.mjs";
+import { RootElement as r } from "../../../Element/RootElement.mjs";
 import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
 import a from "./components/Label.mjs";
 import { isChecked as o } from "./helpers/isChecked.mjs";
@@ -17,8 +17,8 @@ import { createStoreHook as ee } from "@plitzi/nexus/react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import y from "clsx";
 //#region src/elements/form/FormControl/FormControl.tsx
-var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !1, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
-	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
+var b = ({ ref: t, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !1, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
+	let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = n(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
 		if (P?.(e), !B) return;
 		let { target: t } = e, n = t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked : t.value;
 		H.interactionTrigger(I, "onChange", {
@@ -52,9 +52,9 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
 		x,
 		K,
 		q
-	]), /* @__PURE__ */ v(n, {
-		ref: e,
-		interactionTriggers: r.triggers,
+	]), /* @__PURE__ */ v(r, {
+		ref: t,
+		interactionTriggers: e.triggers,
 		className: y("plitzi-component__form-control", {
 			"form-control--invalid": N && B,
 			[`plitzi-component__form-control-${b}`]: b
@@ -161,6 +161,6 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
 			})
 		]
 	});
-}, x = e(s(b));
+}, x = t(s(b));
 //#endregion
 export { b as FormControl, x as default };

package/dist/elements/form/FormControl/declaration.mjs

@@ -202,7 +202,7 @@ var n = {
 		definition: {
 			label: "Form Control",
 			type: "formControl",
-			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
+			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. Optional unless `required: true`, as an HTML field is: a `requiredMessage` alone requires nothing. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The box is ringed (`2px solid currentColor`) while the field inside has keyboard focus: restyle it with a `focus-within` state on the `input` slot — the box never takes `focus` itself. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
 			bindings: {},
 			styleSelectors: {
 				base: "",

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

@@ -1,6 +1,6 @@
-import e from "./NotFound.mjs";
-import t from "./declaration.mjs";
+import e from "./declaration.mjs";
+import t from "./NotFound.mjs";
 //#region src/elements/internal/NotFound/index.ts
-var n = Object.assign(e, t);
+var n = Object.assign(t, e);
 //#endregion
 export { n as NotFound, n as default };

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

@@ -4,6 +4,11 @@ export type PageProps = {
     seoEnabled?: boolean;
     seoPageTitle?: string;
     seoPageDescription?: string;
+    /**
+     * A template over the page's server providers and `navigation` that says this address shows nothing — a record that
+     * is not there: the page server sends it with status 404, rendered as written. Read there only (`serverTemplates`).
+     */
+    notFound?: string;
     className?: string;
     layout?: string;
     layoutContainer?: string;

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

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

package/dist/elements/internal/Page/PageHead.d.ts

@@ -0,0 +1,12 @@
+export type PageHeadProps = {
+    pageId: string;
+    title?: string;
+    description?: string;
+};
+/**
+ * The page's title and description in the head: its words, or its templates read against the answers of its server
+ * providers — `rsc.data`, what the server wrote the HTML's head from, and what a navigation fetches before it lands —
+ * so the tab says the record a detail page shows, on arrival and after every move.
+ */
+declare const PageHead: ({ pageId, title, description }: PageHeadProps) => import('react').JSX.Element;
+export default PageHead;

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

@@ -0,0 +1,29 @@
+import { useMemo as e } from "react";
+import { useCommonStore as t } from "@plitzi/sdk-shared/store";
+import { isRecord as n } from "@plitzi/sdk-shared/helpers/isRecord";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Helmet as a } from "@dr.pogodin/react-helmet";
+import { collectServerElements as o, pageSeoText as s, pageServerContext as c } from "@plitzi/sdk-shared/schema/serverElements";
+//#region src/elements/internal/Page/PageHead.tsx
+var l = ({ pageId: l, title: u, description: d }) => {
+	let [[f, p, m, h]] = t([
+		"schema.flat",
+		"rsc.data",
+		"navigation.routeParams",
+		"navigation.queryParams"
+	]), g = e(() => n(f) ? o({ flat: f }, l) : [], [f, l]), _ = e(() => c(g, p ?? {}, {
+		routeParams: m,
+		queryParams: h
+	}), [
+		g,
+		p,
+		m,
+		h
+	]), v = s(u, _), y = s(d, _);
+	return /* @__PURE__ */ i(a, { children: [!!v && /* @__PURE__ */ r("title", { children: v }), !!y && /* @__PURE__ */ r("meta", {
+		name: "description",
+		content: y
+	})] });
+};
+//#endregion
+export { l as default };

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

@@ -4,6 +4,7 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type PageAttributes = AuthorableAttributes<PageProps>;
 declare const declaration: {
     readonly type: "page";
+    readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
     readonly triggers: {
         readonly onPageLoad: {
             readonly action: "onPageLoad";
@@ -84,6 +85,7 @@ declare const declaration: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     layout?: string | undefined;
+    notFound?: string | undefined;
     layoutContainer?: string | undefined;
     seoEnabled?: boolean | undefined;
     seoPageTitle?: string | undefined;

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

@@ -2,6 +2,11 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/internal/Page/declaration.ts
 var t = e()({
 	type: "page",
+	serverTemplates: [
+		"seoPageTitle",
+		"seoPageDescription",
+		"notFound"
+	],
 	triggers: { onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",

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

@@ -3,6 +3,7 @@ declare const Page: {
     displayName: string;
 } & {
     readonly type: "page";
+    readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
     readonly triggers: {
         readonly onPageLoad: {
             readonly action: "onPageLoad";
@@ -83,6 +84,7 @@ declare const Page: {
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
     layout?: string | undefined;
+    notFound?: string | undefined;
     layoutContainer?: string | undefined;
     seoEnabled?: boolean | undefined;
     seoPageTitle?: string | undefined;