@plitzi/sdk-elements 0.38.9 → 0.38.10

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;