@plitzi/sdk-elements 0.38.9 → 0.38.10

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @plitzi/sdk-elements
 
+## 0.38.10
+
+### Patch Changes
+
+- 200da2f: - **`focus-on-field-box`** (`@plitzi/sdk-authoring`): a warning for a `focus` or `focus-visible` state on a text
+  field's or a select's `input` slot. That slot is the box the field is drawn in, a `<div>` that never takes focus, so
+  the rule was never seen and a keyboard user tabbing to the field found no ring. The fix it names: `'focus-within'` on
+  the same class, or the state on the `field` slot.
+  - **`modalContainer` says how it is laid out** (`@plitzi/sdk-elements`): its description now names its slots and how
+    they sit — the dim layer and the dialog side by side, not one inside the other; the dialog centred by `top`/`left`
+    50% and a `translate`. A space styled the dim layer as a flex container to place the dialog, which moved nothing.
+  - **A field shows where the keyboard is** (`@plitzi/plitzi-sdk`, `@plitzi/sdk-elements`): a text field's or a select's
+    box is ringed (`2px solid currentColor`) while the field inside has keyboard focus, and a textarea while it has. No
+    text field or select showed any focus at all: the box had `outline: none`, and the field inherited it. One class of
+    specificity, so whatever a space writes about the outline wins; never in the builder's canvas, where the selection is
+    the ring. The field no longer inherits the box's outline — the box draws it.
+  - **The dim layer of a modal and a dialog is `rgb(0 0 0 / 50%)`** (`@plitzi/plitzi-sdk`, `@plitzi/sdk-elements`), not
+    black at `opacity: 0.5`: the default looks the same, and a colour a space gives the layer is drawn as it is — it was
+    halved. A space that set its own colour sees it darker: the one it wrote.
+  - **`required-message-unused`** (`@plitzi/sdk-authoring`): a warning for a `requiredMessage` on a field nothing requires —
+    since 0.38.9 a field is optional unless `required: true`, so the message is never shown and an empty answer is sent.
+    The formControl's description, the cheat sheet and the forms recipe say the default.
+  - **A page's title can say its record** (`@plitzi/sdk-shared`, `@plitzi/sdk-server`, `@plitzi/sdk-elements`,
+    `@plitzi/sdk-authoring`): `seoTitle` and `seoDescription` may be templates over the page's `runtime: 'server'`
+    providers (its layouts' too) and `navigation` — `'{{ apiContainer_post.title }} — Blog'`. The server evaluates them
+    as it writes the head, from the answers it already has; the browser evaluates the same over `rsc.data`, so the tab
+    follows a navigation from record to record. One that reads anything else — a browser provider, `state` — is refused
+    (`page-template`): it was written into the head as it was, braces included. A declaration's `serverTemplates` names
+    the attributes the page server evaluates against a context of its own (a page's title and description, a provider's
+    `notFound`): the element runtime leaves them as written — interpolated where the page renders, a `|default(…)`
+    resolved to its fallback before the head could read the providers — and the authoring lint reads the same list.
+  - **A page says when its address shows nothing** (`@plitzi/sdk-server`, `@plitzi/sdk-authoring`): `notFound` on the
+    page, one expression over the same answers its title reads — `"{{ not (apiContainer_feed.topics|find('slug',
+navigation.routeParams.slug)) }}"` — sends it with status 404, rendered as written. A provider's own `notFound` reads
+    only its answer, and one in a layout is every page's: a record read from the layout had no way to say it was not
+    there, and the page answered 200.
+  - **The Export keeps the flows of a plugin hosted by `custom`** (`@plitzi/sdk-authoring`): `specFromSpace` judged such
+    an element by `custom`'s own triggers and callbacks, and dropped a flow on the component's event (`onChange` on an
+    editor) as one "a custom never fires" — the space read back was not the space written.
+  - **`page check` reads every word on the page, in the colour the browser paints it** (`@plitzi/sdk-authoring`): what a
+    plugin draws inside an element of the space is measured too, named by the element and a selector; the measure is
+    WCAG's contrast (under 2:1 is unreadable), not "nearly the same colour"; and a colour the browser answers as
+    `oklch()`, `oklab()` or `color(srgb …)` — every token and every `color-mix()` — is read as that, where it was read as
+    `rgb()` numbers and came out near black. A plugin's dark-on-dark status line passed as "nothing wrong".
+  - **`verify` checks every theme the space can be painted in** (`@plitzi/cli`): light and dark, unless the space says
+    light only — "48 checks at 1440 and 390 px, light and dark". A page unreadable in the dark theme passed in the light
+    one; a failure names the theme it was found in.
+  - **`plitzi upgrade` says where fields became optional** (`@plitzi/cli`): for a project last upgraded before 0.38.9,
+    each `formControl(…)` with no `required`, at its file and line — said, never written. And a `.gitkeep` is asked for
+    only in a folder with nothing else in it: `upgrade` wrote one beside code, and `doctor` called it missing once deleted
+    as AGENTS.md asks ("nothing unused") — the three now say the same.
+  - **`devMode` and `devReload` are the project's** (`@plitzi/sdk-server`): `src/config/serverOptions.ts` may set them,
+    over `NODE_ENV`, which they still follow when left out. A deployment started without `NODE_ENV` (a container's `CMD`)
+    says `devMode: false`, and a public action answers with its output alone.
+  - **`page shot --from load`** (`@plitzi/cli`): `--frames` start as soon as the page's HTML is in, not once it settles —
+    an entrance that plays while the page loads had ended before the first picture.
+  - **`heavy-animation` says where each animation is** (`@plitzi/sdk-authoring`): the class and its variant, state or
+    slot — or the `customCss` rule — and writes the fix against that selector. It said "in `customCss`" for an animation
+    declared on a class's variant, and offered `.glow`, a class no space has.
+  - **`page shot --steps`** (`@plitzi/cli`): an interaction played step by step — `click`, `type`, `press`, `wait`,
+    `wait-for`, `shot [label]`, `frames <n> [ms]`, separated by `;` or written in a file (`@file`) — each picture labelled
+    with its step and the time since the first, and said when nothing changed since the one before. A queue filling, a
+    restart, an opening frame by frame took a Playwright script of the project's own. Targets take Playwright's selectors
+    too (`text=Saved`).
+  - **A space's task may take a `number` param** (`@plitzi/sdk-server`): saved functions refused it ("a type the builder
+    cannot draw") while a project's server ran it, so code that worked self-hosted failed on the platform — and the
+    builder draws one, a callback's. A step's params now arrive as the types the task declares, on every server: a
+    `number` written as text is the number, a `boolean` written `'true'` is `true`, as the browser reads a callback's.
+  - **`page shot --as <username>`** (`@plitzi/cli`): signs in first, as `page check --as` does, the password from
+    `PLITZI_CHECK_PASSWORD` in `.env`. A page for signed-in visitors was pictured as the sign-in page it sent the browser
+    to, without a word; `page shot` now says when the page sent it elsewhere, and that the picture is of that page.
+  - **A capture is of the page at rest** (`@plitzi/sdk-mcp`): the local screenshot client takes every picture with
+    `prefers-reduced-motion: reduce`, as the browser pod now does — the declared motion and a space's own keyframes that
+    honour the query are shown finished. A splash still covering its page, or an arrival caught halfway, was what a
+    thumbnail or a `plitzi_look` showed of a page that animates as it loads.
+  - **The server renders in the visitor's theme, not only the class** (`@plitzi/sdk-shared`): `ThemeProvider` set the
+    starting theme from a layout effect, which never runs on a server, so a page was drawn from the theme store's own
+    start — `{{ theme.resolved }}` was `light` under a `<html class="dark">`, and whatever named the scheme (a picture's
+    address, a `when` rule) was swapped for the other one as the page hydrated. The theme a host supplies (the cookie) is
+    now the server's snapshot of the store, and the hydration's; the shared store is never written on the server.
+- Updated dependencies [200da2f]
+  - @plitzi/sdk-shared@0.38.10
+  - @plitzi/sdk-auth@0.38.10
+  - @plitzi/sdk-event-bridge@0.38.10
+  - @plitzi/sdk-interactions@0.38.10
+  - @plitzi/sdk-navigation@0.38.10
+  - @plitzi/sdk-schema@0.38.10
+
 ## 0.38.9
 
 ### Patch Changes

package/dist/Element/hooks/useElementInternal.mjs

@@ -3,15 +3,16 @@ import { omitKeys as t } from "../helpers/omitKeys.mjs";
 import n from "./useElementDataSource.mjs";
 import r from "./useElementState.mjs";
 import i from "./useInternalItems.mjs";
-import a from "../helpers/parseStyleSelectors.mjs";
-import { useMemo as o } from "react";
-import { useCommonStore as s } from "@plitzi/sdk-shared/store";
-import { get as c } from "@plitzi/plitzi-ui/helpers";
-import l from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
-import { hasValidToken as u, processTwig as d, templatePaths as f } from "@plitzi/sdk-shared/helpers/twigWrapper";
-import { COMPONENT_PROPS_SOURCE as p } from "@plitzi/sdk-shared/schema/schemaConstants";
+import { serverTemplatesByType as a } from "../../elements/declarations/index.mjs";
+import o from "../helpers/parseStyleSelectors.mjs";
+import { useMemo as s } from "react";
+import { useCommonStore as c } from "@plitzi/sdk-shared/store";
+import { get as l } from "@plitzi/plitzi-ui/helpers";
+import u from "@plitzi/sdk-shared/dataSource/getBindingsDetails";
+import { hasValidToken as d, processTwig as f, templatePaths as p } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { COMPONENT_PROPS_SOURCE as m } from "@plitzi/sdk-shared/schema/schemaConstants";
 //#region src/Element/hooks/useElementInternal.ts
-var m = { settled: /* @__PURE__ */ new Set([p]) }, h = (e, t, n) => {
+var h = { settled: /* @__PURE__ */ new Set([m]) }, g = (e, t, n) => {
 	let { queryParams: r = {}, routeParams: i = {}, variables: a = {}, origin: o = "", navigation: s, ...c } = n, l = {
 		...a,
 		...i,
@@ -24,43 +25,43 @@ var m = { settled: /* @__PURE__ */ new Set([p]) }, h = (e, t, n) => {
 			origin: o
 		}
 	}, u = { ...e };
-	for (let n of t) u[n] = d(e[n], l, m);
+	for (let n of t) u[n] = f(e[n], l, h);
 	return u;
-}, g = (e) => !!e && Object.values(e).some((e) => Array.isArray(e) && e.length > 0), _ = (e, n, r = {}, i = {}) => {
-	let o, { attributes: s, definition: d } = e, { rootId: f, plitziElementLayout: p } = n;
-	n.attributes && (s = {
-		...s,
+}, _ = (e) => !!e && Object.values(e).some((e) => Array.isArray(e) && e.length > 0), v = (e, n, r = {}, i = {}) => {
+	let s, { attributes: c, definition: f } = e, { rootId: p, plitziElementLayout: m } = n;
+	n.attributes && (c = {
+		...c,
 		...n.attributes
 	});
-	let m = s;
+	let h = c;
 	if (Object.keys(r).length > 0) {
-		if (g(d.bindings)) {
-			let t = l(r, {
+		if (_(f.bindings)) {
+			let t = u(r, {
 				...e,
-				attributes: s
-			}, o);
-			({attributes: s, definition: d, style: o} = t);
-		} else o = {};
+				attributes: c
+			}, s);
+			({attributes: c, definition: f, style: s} = t);
+		} else s = {};
 	}
-	let _ = Object.keys(s).filter((e) => {
-		let t = s[e];
-		return typeof t == "string" && t === m[e] && u(t);
+	let v = a[f.type] ?? [], y = Object.keys(c).filter((e) => {
+		let t = c[e];
+		return typeof t == "string" && t === h[e] && d(t) && !v.includes(e);
 	});
-	return _.length > 0 && (s = h(s, _, r)), s = {
-		...s,
+	return y.length > 0 && (c = g(c, y, r)), c = {
+		...c,
 		...t(i, ["visibility", "styleSelectors"])
-	}, d = {
-		...d,
+	}, f = {
+		...f,
 		styleSelectors: {
-			...d.styleSelectors,
-			...d.initialState?.styleSelectors,
+			...f.styleSelectors,
+			...f.initialState?.styleSelectors,
 			...i.styleSelectors ?? {}
 		}
-	}, d.styleSelectors = a(d), {
+	}, f.styleSelectors = o(f), {
 		...n,
-		rootId: c(p, "rootId", f),
+		rootId: l(m, "rootId", p),
 		attributes: {
-			...s,
+			...c,
 			...t(n, [
 				"id",
 				"rootId",
@@ -69,49 +70,56 @@ var m = { settled: /* @__PURE__ */ new Set([p]) }, h = (e, t, n) => {
 				"plitziElementLayout"
 			])
 		},
-		definition: d,
+		definition: f,
 		elementState: {
-			...d.initialState,
+			...f.initialState,
 			...i
 		},
-		style: o
+		style: s
 	};
-}, v = (e) => Object.values(e ?? {}).filter((e) => typeof e == "string" && u(e)), y = (e) => ["variables", ...new Set(e.flatMap((e) => f(e)))], b = ({ element: a, children: c, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
+}, y = (e, t) => {
+	let n = a[t] ?? [];
+	return Object.entries(e ?? {}).flatMap(([e, t]) => typeof t == "string" && d(t) && !n.includes(e) ? [t] : []);
+}, b = (e) => ["variables", ...new Set(e.flatMap((e) => p(e)))], x = ({ element: a, children: o, internalProps: l, previewMode: u = !1, parentVisible: d = !0 }) => {
 	let { id: f } = l, { state: p, setElementState: m } = r({
 		id: f,
 		bindings: a.definition.bindings,
 		previewMode: u
-	}), h = o(() => {
-		let e = [...v(a.attributes), ...v(l.attributes)];
-		return e.length > 0 ? y(e) : void 0;
-	}, [a.attributes, l.attributes]), [[g, b, x]] = s([
+	}), { type: h } = a.definition, g = s(() => {
+		let e = [...y(a.attributes, h), ...y(l.attributes, h)];
+		return e.length > 0 ? b(e) : void 0;
+	}, [
+		a.attributes,
+		h,
+		l.attributes
+	]), [[_, x, S]] = c([
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.origin"
-	], { enabled: h !== void 0 }), S = n({
+	], { enabled: g !== void 0 }), C = n({
 		bindings: a.definition.bindings,
-		sources: h
-	}), C = o(() => ({
-		..._(a, l, {
-			...S,
-			routeParams: g,
-			queryParams: b,
-			origin: x
+		sources: g
+	}), w = s(() => ({
+		...v(a, l, {
+			...C,
+			routeParams: _,
+			queryParams: x,
+			origin: S
 		}, p),
 		setElementState: m
 	}), [
 		a,
 		l,
-		S,
-		g,
-		b,
+		C,
+		_,
 		x,
+		S,
 		p,
 		m
 	]);
 	return {
-		internalProps: C,
-		customProps: o(() => t(C, [
+		internalProps: w,
+		customProps: s(() => t(w, [
 			"id",
 			"rootId",
 			"plitziElementLayout",
@@ -120,16 +128,16 @@ var m = { settled: /* @__PURE__ */ new Set([p]) }, h = (e, t, n) => {
 			"style",
 			"elementState",
 			"setElementState"
-		]), [C]),
+		]), [w]),
 		children: i({
 			id: f,
-			definition: C.definition,
-			plitziElementLayout: C.plitziElementLayout,
-			children: c,
+			definition: w.definition,
+			plitziElementLayout: w.plitziElementLayout,
+			children: o,
 			previewMode: u,
-			visible: d && e(C.elementState.visibility)
+			visible: d && e(w.elementState.visibility)
 		})
 	};
 };
 //#endregion
-export { b as default, _ as getProps };
+export { x as default, v as getProps };

package/dist/elements/advanced/BlockHtml/index.mjs

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

package/dist/elements/advanced/BlockJsx/index.mjs

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

package/dist/elements/advanced/Custom/index.mjs

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

package/dist/elements/basic/Button/index.mjs

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

package/dist/elements/basic/ThemeToggle/ThemeToggle.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, useSyncExternalStore as l } from "react";
 import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -36,8 +36,8 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		strokeLinejoin: "round",
 		d: "M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"
 	})
-}), b = ({ ref: e, className: b = "", subType: x = "switch", lightLabel: S = "Light", darkLabel: C = "Dark", systemLabel: w = "System", showSystem: T = !1 }) => {
-	let { theme: E, resolvedTheme: D, setTheme: O, toggleTheme: k } = m(), { id: A, definition: { styleSelectors: j } } = t(), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = u(), { interactionsManager: P } = i(N), F = l(h, g, _), I = a((e) => (t) => {
+}), b = ({ ref: t, className: b = "", subType: x = "switch", lightLabel: S = "Light", darkLabel: C = "Dark", systemLabel: w = "System", showSystem: T = !1 }) => {
+	let { theme: E, resolvedTheme: D, setTheme: O, toggleTheme: k } = m(), { id: A, definition: { styleSelectors: j } } = n(), { settings: { previewMode: M }, contexts: { InteractionsContext: N } } = u(), { interactionsManager: P } = i(N), F = l(h, g, _), I = a((e) => (t) => {
 		t.preventDefault(), M && O(e);
 	}, [M, O]), L = a((e) => {
 		e.preventDefault(), M && k();
@@ -70,13 +70,13 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 		E,
 		P,
 		A
-	]), x === "segmented" ? /* @__PURE__ */ d(n, {
-		ref: e,
+	]), x === "segmented" ? /* @__PURE__ */ d(r, {
+		ref: t,
 		tag: "div",
 		role: "group",
 		"aria-label": `${S} / ${C}`,
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--segmented", b),
-		interactionTriggers: r.triggers,
+		interactionTriggers: e.triggers,
 		children: R.map((e) => /* @__PURE__ */ f("button", {
 			type: "button",
 			className: p("plitzi-component__theme-toggle-option", j.option),
@@ -86,11 +86,11 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 			onClick: I(e.value),
 			children: [e.icon, /* @__PURE__ */ d("span", { children: e.label })]
 		}, e.value))
-	}) : /* @__PURE__ */ f(n, {
-		ref: e,
+	}) : /* @__PURE__ */ f(r, {
+		ref: t,
 		tag: "button",
 		className: p("plitzi-component__theme-toggle plitzi-component__theme-toggle--switch", b),
-		interactionTriggers: r.triggers,
+		interactionTriggers: e.triggers,
 		type: "button",
 		onClick: L,
 		"aria-label": `${S} / ${C}`,
@@ -107,6 +107,6 @@ var h = () => () => {}, g = () => !0, _ = () => !1, v = () => /* @__PURE__ */ f(
 			children: /* @__PURE__ */ d(y, {})
 		})]
 	});
-}, x = e(b);
+}, x = t(b);
 //#endregion
 export { b as ThemeToggle, x as default };

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;
     }>>;
@@ -786,9 +787,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 +1062,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 +3036,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 +3093,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 +3578,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 +3659,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 +4444,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 };