@plitzi/sdk-shared 0.37.9 → 0.38.1

package/dist/style/styleConstants.d.ts

@@ -102,6 +102,11 @@ declare const styleConstants: {
     readonly APPEARANCE: "appearance";
     readonly SCROLL_BEHAVIOR: "scroll-behavior";
     readonly OVERSCROLL_BEHAVIOR: "overscroll-behavior";
+    readonly SCROLL_SNAP_TYPE: "scroll-snap-type";
+    readonly SCROLL_SNAP_ALIGN: "scroll-snap-align";
+    readonly SCROLL_SNAP_STOP: "scroll-snap-stop";
+    readonly SCROLL_PADDING_TOP: "scroll-padding-top";
+    readonly SCROLL_MARGIN_TOP: "scroll-margin-top";
     readonly ACCENT_COLOR: "accent-color";
     readonly CARET_COLOR: "caret-color";
     readonly COLOR_SCHEME: "color-scheme";
@@ -177,8 +182,8 @@ declare const styleConstants: {
 };
 export declare const inheritableAttributesBase: StyleCategory[];
 export declare const StyleBindingsAllowed: {
-    path: "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "filter" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "fill" | "stroke" | "stroke-width";
-    label: "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "filter" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "fill" | "stroke" | "stroke-width";
+    path: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
+    label: "color" | "cursor" | "filter" | "fill" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "transition-behavior" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "scroll-snap-type" | "scroll-snap-align" | "scroll-snap-stop" | "scroll-padding-top" | "scroll-margin-top" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
 }[];
 export declare const baseDefaultValue: Record<StyleCategory, StyleValue>;
 export default styleConstants;

package/dist/style/styleConstants.mjs

@@ -115,6 +115,11 @@ var e = {
 	APPEARANCE: "appearance",
 	SCROLL_BEHAVIOR: "scroll-behavior",
 	OVERSCROLL_BEHAVIOR: "overscroll-behavior",
+	SCROLL_SNAP_TYPE: "scroll-snap-type",
+	SCROLL_SNAP_ALIGN: "scroll-snap-align",
+	SCROLL_SNAP_STOP: "scroll-snap-stop",
+	SCROLL_PADDING_TOP: "scroll-padding-top",
+	SCROLL_MARGIN_TOP: "scroll-margin-top",
 	ACCENT_COLOR: "accent-color",
 	CARET_COLOR: "caret-color",
 	COLOR_SCHEME: "color-scheme",
@@ -315,6 +320,11 @@ var e = {
 	[t.APPEARANCE]: "none",
 	[t.SCROLL_BEHAVIOR]: "auto",
 	[t.OVERSCROLL_BEHAVIOR]: "auto",
+	[t.SCROLL_SNAP_TYPE]: "none",
+	[t.SCROLL_SNAP_ALIGN]: "none",
+	[t.SCROLL_SNAP_STOP]: "normal",
+	[t.SCROLL_PADDING_TOP]: "auto",
+	[t.SCROLL_MARGIN_TOP]: "0px",
 	[t.ACCENT_COLOR]: "auto",
 	[t.CARET_COLOR]: "auto",
 	[t.COLOR_SCHEME]: "normal",

package/dist/style/styleStates.d.ts

@@ -7,11 +7,15 @@
  * `focus-visible` is the focus ring a keyboard user needs and a mouse user does not; `focus-within` dresses a
  * container while anything inside it has focus — a field wrapper around its input.
  *
+ * `current` is the link to the page being shown — the navigation item of where the visitor is. The link says so itself
+ * (`aria-current="page"`, what a screen reader announces too), so a header written once in a layout marks the right item
+ * on every page, which a class chosen per page could not.
+ *
  * `hidden` is not a pseudo-class: it is how an element looks while its `visible` says no — where it goes as it hides,
  * and where it comes from as it shows. With a transition on the class (`display` among what it transitions, and
  * `transition-behavior: allow-discrete`), a panel fades or slides in and out instead of blinking.
  */
-export declare const STYLE_STATES: readonly ["hover", "focus", "focus-visible", "focus-within", "active", "disabled", "checked", "visited", "hidden"];
+export declare const STYLE_STATES: readonly ["hover", "focus", "focus-visible", "focus-within", "active", "disabled", "checked", "visited", "current", "hidden"];
 /** What the SDK puts on an element whose `visible` says no: `display: none`, and what the `hidden` state selects. */
 export declare const HIDDEN_CLASS = "plitzi-component--hidden";
 export declare const STYLE_STATE_LABELS: Record<(typeof STYLE_STATES)[number], string>;
@@ -21,7 +25,12 @@ export declare const isKnownState: (state: string) => state is (typeof STYLE_STA
  * A state outside the list keeps its place after the known ones.
  */
 export declare const inCascadeOrder: <T>(states: Record<string, T>) => [string, T][];
-/** How a state is written after the selector it modifies: its pseudo-class, or for `hidden` the class that hides. */
+/** What a link to the page being shown carries, and what the `current` state selects. */
+export declare const CURRENT_PAGE_SELECTOR = "[aria-current=\"page\"]";
+/**
+ * How a state is written after the selector it modifies: its pseudo-class — or, for `hidden`, the class that hides, and
+ * for `current`, the attribute a link to this page carries.
+ */
 export declare const stateSuffix: (state: string) => string;
 /**
  * Whether a state is also where an element starts from as it appears (`@starting-style`): `hidden` is — a panel that

package/dist/style/styleStates.mjs

@@ -8,6 +8,7 @@ var e = [
 	"disabled",
 	"checked",
 	"visited",
+	"current",
 	"hidden"
 ], t = "plitzi-component--hidden", n = {
 	hover: "Hover",
@@ -18,17 +19,19 @@ var e = [
 	disabled: "Disabled",
 	checked: "Checked",
 	visited: "Visited",
+	current: "Current page",
 	hidden: "Hidden"
 }, r = {
 	visited: 0,
 	checked: 1,
-	"focus-within": 2,
-	hover: 3,
-	focus: 4,
-	"focus-visible": 5,
-	active: 6,
-	disabled: 7,
-	hidden: 8
-}, i = (e) => Object.hasOwn(r, e), a = (t) => i(t) ? r[t] : e.length, o = (e) => Object.entries(e).sort(([e], [t]) => a(e) - a(t)), s = (e) => e === "hidden" ? `.${t}` : `:${e}`, c = (e) => e === "hidden";
+	current: 2,
+	"focus-within": 3,
+	hover: 4,
+	focus: 5,
+	"focus-visible": 6,
+	active: 7,
+	disabled: 8,
+	hidden: 9
+}, i = (e) => Object.hasOwn(r, e), a = (t) => i(t) ? r[t] : e.length, o = (e) => Object.entries(e).sort(([e], [t]) => a(e) - a(t)), s = "[aria-current=\"page\"]", c = (e) => e === "hidden" ? `.${t}` : e === "current" ? s : `:${e}`, l = (e) => e === "hidden";
 //#endregion
-export { t as HIDDEN_CLASS, e as STYLE_STATES, n as STYLE_STATE_LABELS, o as inCascadeOrder, i as isKnownState, c as isStartingState, s as stateSuffix };
+export { s as CURRENT_PAGE_SELECTOR, t as HIDDEN_CLASS, e as STYLE_STATES, n as STYLE_STATE_LABELS, o as inCascadeOrder, i as isKnownState, l as isStartingState, c as stateSuffix };

package/dist/theme/ThemeProvider.mjs

@@ -1,48 +1,48 @@
-import { THEME_COOKIE_NAME as e, applyThemeClass as t, readThemeCookie as n, writeThemeCookie as r } from "./themeCookie.mjs";
-import i, { createThemeStore as a, resolveScheme as o, setMachineScheme as s, setThemeMode as c } from "./themeStore.mjs";
-import l from "./ThemeScope.mjs";
-import { useCommonStoreSync as u } from "../store/index.mjs";
+import { useCommonStoreSync as e } from "../store/index.mjs";
+import { THEME_COOKIE_NAME as t, applyThemeClass as n, readThemeCookie as r, writeThemeCookie as i } from "./themeCookie.mjs";
+import a, { createThemeStore as o, resolveScheme as s, setMachineScheme as c, setThemeMode as l } from "./themeStore.mjs";
+import u from "./ThemeScope.mjs";
 import { use as d, useEffect as f, useId as p, useRef as m, useState as h, useSyncExternalStore as g } from "react";
 import { StoreContext as _, useIsomorphicLayoutEffect as v } from "@plitzi/nexus/react";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/theme/ThemeProvider.tsx
-var S = "(prefers-color-scheme: dark)", C = () => window.matchMedia(S).matches ? "dark" : "light", w = ({ state: e }) => (u([
+var S = "(prefers-color-scheme: dark)", C = () => window.matchMedia(S).matches ? "dark" : "light", w = ({ state: t }) => (e([
 	"theme.mode",
 	"theme.resolved",
 	"theme.areas"
 ], [
-	e.mode,
-	o(e.mode, e.scheme),
-	e.areas
-]), null), T = ({ defaultTheme: o = "system", theme: u, scope: T = "document", cookieName: E = e, children: D }) => {
-	let O = T === "container", k = p(), [A] = h(() => O ? a(`theme${k}`) : void 0), j = A ?? i, M = m({
-		mode: o,
+	t.mode,
+	s(t.mode, t.scheme),
+	t.areas
+]), null), T = ({ defaultTheme: e = "system", theme: s, scope: T = "document", cookieName: E = t, children: D }) => {
+	let O = T === "container", k = p(), [A] = h(() => O ? o(`theme${k}`) : void 0), j = A ?? a, M = m({
+		mode: e,
 		remembered: !1
 	});
 	v(() => {
-		let e = O ? void 0 : n(E), t = u ?? e ?? o;
+		let t = O ? void 0 : r(E), n = s ?? t ?? e;
 		M.current = {
-			mode: t,
-			remembered: e !== void 0
+			mode: n,
+			remembered: t !== void 0
 		}, j.batch(() => {
-			s(C(), j), c(t, j);
+			c(C(), j), l(n, j);
 		});
 	}, [
-		o,
-		u,
+		e,
+		s,
 		E,
 		O,
 		j
 	]);
 	let N = g(j.subscribe, j.getState, j.getState), P = d(_) !== void 0;
 	f(() => {
-		let e = window.matchMedia(S), t = () => s(e.matches ? "dark" : "light", j);
+		let e = window.matchMedia(S), t = () => c(e.matches ? "dark" : "light", j);
 		return e.addEventListener("change", t), t(), () => e.removeEventListener("change", t);
 	}, [j]), f(() => {
 		if (O) return;
 		let e = () => {
 			let { mode: e } = j.getState();
-			(M.current.remembered || e !== M.current.mode) && (r(e, E), M.current.remembered = !0), t(e, document.documentElement);
+			(M.current.remembered || e !== M.current.mode) && (i(e, E), M.current.remembered = !0), n(e, document.documentElement);
 		};
 		return e(), j.subscribe(e);
 	}, [
@@ -51,7 +51,7 @@ var S = "(prefers-color-scheme: dark)", C = () => window.matchMedia(S).matches ?
 		j
 	]);
 	let F = P ? /* @__PURE__ */ b(w, { state: N }) : null;
-	return O ? /* @__PURE__ */ x(l, {
+	return O ? /* @__PURE__ */ x(u, {
 		value: A,
 		children: [F, D]
 	}) : /* @__PURE__ */ x(y, { children: [F, D] });

package/dist/types/CommonTypes.d.ts

@@ -50,6 +50,9 @@ export type ServerSSR = {
     realtimePath?: string;
     /** How pages connect to them — a stream (`sse`, when absent) or a socket (`websocket`). */
     realtimeTransport?: RealtimeTransport;
+    /** Path where this origin resizes remote pictures. Published only by a server that mounts the endpoint: its absence
+     *  is what keeps an image on its own `src` in the builder, an embed or a project with no page server. */
+    imagePath?: string;
     /** Channel the SSR render writes its response into (status, redirect). Server-side only and by reference: it never
      *  crosses to the browser, and nothing subscribes to it. */
     renderResult?: SSRRenderResult;

package/dist/types/DevToolsTypes.d.ts

@@ -1,9 +1,11 @@
 import { InteractionNode, InteractionStatus } from './InteractionTypes';
 import { NavigationStatus } from './NavigationTypes';
+import { RealtimeMessage, RealtimeTransport } from './RealtimeTypes';
 import { ElementInteraction } from './SchemaTypes';
+import { RealtimeStatus } from '../realtime/client';
 import { ReactNode } from 'react';
 export type LogType = 'info' | 'warning' | 'danger' | 'success' | 'custom';
-export type LogCategory = 'navigation' | 'interactions' | 'store' | 'network' | 'actions';
+export type LogCategory = 'navigation' | 'interactions' | 'store' | 'network' | 'actions' | 'realtime';
 export type LogNavigation = {
     category: 'navigation';
     params: {
@@ -93,10 +95,33 @@ export type LogNetwork = {
         payload?: unknown;
     };
 };
-export type LogParams = LogNavigation['params'] | LogInteraction['params'] | LogEventBridge['params'] | LogStore['params'] | LogNetwork['params'] | LogAction['params'];
+/** What the page's realtime connection did: opened or dropped, a message in or out, a topic the server refused. */
+export type LogRealtime = {
+    category: 'realtime';
+    params: {
+        event: 'status';
+        status: RealtimeStatus;
+        topics: string[];
+        transport: RealtimeTransport;
+    } | {
+        event: 'received';
+        message: RealtimeMessage;
+    } | {
+        event: 'published';
+        topic: string;
+        type: string;
+        data: unknown;
+        delivered: boolean;
+    } | {
+        event: 'refused';
+        topic: string;
+        reason: string;
+    };
+};
+export type LogParams = LogNavigation['params'] | LogInteraction['params'] | LogEventBridge['params'] | LogStore['params'] | LogNetwork['params'] | LogAction['params'] | LogRealtime['params'];
 export type Log = {
-    logType: string;
+    logType: LogType;
     message: ReactNode;
     time?: string;
-} & (LogInteraction | LogNavigation | LogEventBridge | LogStore | LogNetwork | LogAction);
+} & (LogInteraction | LogNavigation | LogEventBridge | LogStore | LogNetwork | LogAction | LogRealtime);
 export type ProviderCallback = (...args: unknown[]) => Record<string, unknown>;

package/dist/types/EventBridgeTypes.d.ts

@@ -1,5 +1,5 @@
 export type EventBridgeContextValue<T = any> = {
     eventBridge: T;
 };
-export type EventBridgeModule = 'main' | 'builder' | 'template' | 'interaction' | 'element';
-export type EventBridgeEvent = 'schemaAddPage' | 'schemaHomePage' | 'schemaUpdatePage' | 'schemaRemovePage' | 'schemaAddPageFolder' | 'schemaUpdatePageFolder' | 'schemaRemovePageFolder' | 'schemaUpdateSettings' | 'schemaUpdate' | 'schemaAddElement' | 'schemaUpdateElement' | 'schemaRenameElement' | 'schemaUpdateElements' | 'schemaRemoveElement' | 'schemaMoveElement' | 'schemaCloneElement' | 'schemaAddVariable' | 'schemaUpdateVariable' | 'schemaRemoveVariable' | 'schemaAddTemplate' | 'schemaAddComponent' | 'schemaUpdateComponent' | 'schemaRemoveComponent' | 'schemaDetachInstance' | 'styleUpdate' | 'styleAddSelector' | 'styleUpdateSelector' | 'styleRemoveSelector' | 'styleRemoveSelectors' | 'styleAddSelectorVariable' | 'styleUpdateSelectorVariable' | 'styleRemoveSelectorVariable' | 'styleAddVariable' | 'styleUpdateVariable' | 'styleRemoveVariable' | 'styleAddFont' | 'styleUpdateFont' | 'styleRemoveFont' | 'styleAddTemplate' | 'styleUpdateSettings' | 'builderSetBaseContext' | 'builderSetSelected' | 'builderSetHovered';
+export type EventBridgeModule = 'main' | 'builder' | 'snippet' | 'interaction' | 'element';
+export type EventBridgeEvent = 'schemaAddPage' | 'schemaHomePage' | 'schemaUpdatePage' | 'schemaRemovePage' | 'schemaAddPageFolder' | 'schemaUpdatePageFolder' | 'schemaRemovePageFolder' | 'schemaUpdateSettings' | 'schemaUpdate' | 'schemaAddElement' | 'schemaUpdateElement' | 'schemaRenameElement' | 'schemaUpdateElements' | 'schemaRemoveElement' | 'schemaMoveElement' | 'schemaCloneElement' | 'schemaAddVariable' | 'schemaUpdateVariable' | 'schemaRemoveVariable' | 'schemaSetFlag' | 'schemaRemoveFlag' | 'schemaAddSnippet' | 'schemaAddComponent' | 'schemaUpdateComponent' | 'schemaRemoveComponent' | 'schemaDetachInstance' | 'styleUpdate' | 'styleAddSelector' | 'styleUpdateSelector' | 'styleRemoveSelector' | 'styleRemoveSelectors' | 'styleAddSelectorVariable' | 'styleUpdateSelectorVariable' | 'styleRemoveSelectorVariable' | 'styleAddVariable' | 'styleUpdateVariable' | 'styleRemoveVariable' | 'styleAddFont' | 'styleUpdateFont' | 'styleRemoveFont' | 'styleAddSnippet' | 'styleUpdateSettings' | 'builderSetBaseContext' | 'builderSetSelected' | 'builderSetHovered';

package/dist/types/PluginTypes.d.ts

@@ -61,7 +61,7 @@ export type PluginBuilder = {
     canDragDrop?: boolean;
     canSelect?: boolean;
     canMove?: boolean;
-    canTemplate?: boolean;
+    canSnippet?: boolean;
     itemsAllowed?: string[];
     itemsNotAllowed?: string[];
 };

package/dist/types/ResourceTypes.d.ts

@@ -1,7 +1,7 @@
 import { PluginManifest } from './PluginTypes';
 import { SpaceCredential } from './SpaceTypes';
 /** `server`: a file of the space's server code — its functions or runtime — in a private bucket. */
-export type ResourceType = 'image' | 'video' | 'document' | 'application' | 'plugin' | 'template' | 'server';
+export type ResourceType = 'image' | 'video' | 'document' | 'application' | 'plugin' | 'snippet' | 'server';
 export type Resource = {
     id: string;
     cdnIdentifier: string;
@@ -33,7 +33,7 @@ export type ResourceFile = File & {
     metadata?: PluginManifest;
 };
 /**
- * Who may read a bucket's files. `public`: anybody, at its domain — plugins, images, templates. `private`: only the
+ * Who may read a bucket's files. `public`: anybody, at its domain — plugins, images, snippets. `private`: only the
  * platform, with its CDN's credential — the space's server code. A private bucket has no domain.
  */
 export type CdnVisibility = 'public' | 'private';

package/dist/types/SchemaTypes.d.ts

@@ -1,6 +1,6 @@
 import { InteractionCallbackParamValues, InteractionCallbackType } from './InteractionTypes';
 import { ChannelDeclarations } from './RealtimeTypes';
-import { Style } from './StyleTypes';
+import { SnippetStyle } from './SnippetTypes';
 import { BuiltinParam } from '../authoring/paramSpec';
 import { RuleGroup } from '@plitzi/plitzi-ui/QueryBuilder';
 export type ElementRuntime = 'server' | 'client' | 'shared';
@@ -71,6 +71,20 @@ export type ElementInteraction<T extends Record<string, unknown> = Record<string
     /** On a trigger only: what a firing does while this flow is still running. `skip` when absent. */
     whileRunning?: WhileRunning;
 };
+/**
+ * What a feature flag gates an element on: it exists only while the flag `name` resolves to `is`.
+ *
+ * Not a visibility. A hidden element is still rendered, its markup still in the page; a gated one whose flag says no
+ * is not rendered at all — not on the server, not in the browser, not its subtree — and the data of its server
+ * elements is not resolved. Its declaration still travels with the space's document, as every element's does, so a
+ * flag switches a feature off; it does not keep it secret. `is: false` is the other half of a rollout: the old
+ * version, shown until the flag turns on.
+ * On a page, a flag that says no makes the page not found.
+ */
+export type ElementFlagGate = {
+    name: string;
+    is: boolean;
+};
 export type ElementDefinition = {
     rootId: Element['id'];
     label: string;
@@ -93,6 +107,13 @@ export type ElementDefinition = {
     runtime?: ElementRuntime;
     /** When this element's items are mounted, relative to its `visibility`. See {@link ElementLoadStrategy}. */
     loadStrategy?: ElementLoadStrategy;
+    /** The feature flag this element exists under. See {@link ElementFlagGate}. */
+    flag?: ElementFlagGate;
+    /**
+     * The `id` this element carries in the DOM, so a link to `/page#anchor` lands on it — `data-id` names the element
+     * for the platform, this names it for the URL. One per rendered page, layouts included (`isAnchor`).
+     */
+    anchor?: string;
 };
 /**
  * An element, keyed by the one name it answers to.
@@ -120,6 +141,28 @@ type SchemaVariableBase<TType extends string, TValue> = {
     }[];
 };
 export type SchemaVariable = SchemaVariableBase<'number', number> | SchemaVariableBase<'checkbox' | 'switch', boolean> | SchemaVariableBase<'text' | 'email' | 'password' | 'select' | 'select2' | 'textarea' | 'color', string>;
+/** A value a flag takes where its `when` matches. The first rule that matches decides. */
+export type SchemaFlagRule = {
+    when: RuleGroup;
+    value: boolean;
+};
+/**
+ * A feature flag the space declares, under the name it is read by: `{{ flags.newCheckout }}`.
+ *
+ * Read with the document, stored apart from it: each environment has one set, shared by every revision it serves, so a
+ * flag is turned without a new revision and a rollback keeps the flags as they are. A revision keeps a copy of the flags
+ * it was published with, read only when the environment's own cannot be. The draft (`main`) applies whatever it says
+ * now; a published environment, what was last published to it. Its rules see the environment, the host, the URL and
+ * who is visiting (`user.authenticated`, `user.email`, `user.username`, `user.roles`). Whoever runs the space may
+ * override the answer — the server it is rendered by, then the SDK embedding it, then a tester with the dev tools —
+ * but only for flags declared here.
+ */
+export type SchemaFlag = {
+    description?: string;
+    /** The answer when no rule matches. */
+    value: boolean;
+    rules: SchemaFlagRule[];
+};
 export type PageFolder = {
     id: string;
     name: string;
@@ -161,6 +204,8 @@ export type Schema = {
         permanentUrl: string;
     };
     variables: SchemaVariable[];
+    /** Keyed by the name each is read by. A space that declares none has none — documents written before flags too. */
+    flags?: Record<string, SchemaFlag>;
     settings: {
         keepState?: boolean;
         stateStorage?: 'localStorage' | 'sessionStorage';
@@ -286,13 +331,27 @@ export type SchemaContextValue = {
     schemaAddVariable?: (variable: SchemaVariable, fromSubscriptions?: boolean) => void;
     schemaUpdateVariable?: (variable: SchemaVariable, fromSubscriptions?: boolean) => void;
     schemaRemoveVariable?: (name: string, fromSubscriptions?: boolean) => void;
-    schemaAddTemplate?: (to: string, data: Element, dropPosition?: DropPosition, initialItems?: Record<string, Element>, templatePlatform?: Style, variables?: SchemaVariable[], fromSubscriptions?: boolean) => void;
+    schemaSetFlag?: (name: string, flag: SchemaFlag, fromSubscriptions?: boolean) => void;
+    schemaRemoveFlag?: (name: string, fromSubscriptions?: boolean) => void;
+    schemaAddSnippet?: (to: string, data: Element, dropPosition?: DropPosition, initialItems?: Record<string, Element>, style?: SnippetStyle, variables?: SchemaVariable[], fromSubscriptions?: boolean) => void;
     schemaUpdateSettings?: (value: string | number | boolean, path?: string, fromSubscriptions?: boolean) => void;
 };
+/** The fields of a definition an element may go without — absent in a document, `null` from GraphQL. */
+type OptionalDefinitionKey = 'parentId' | 'items' | 'bindings' | 'interactions' | 'initialState' | 'runtime' | 'loadStrategy' | 'flag' | 'anchor';
+/**
+ * An element as it arrives on the wire. GraphQL answers every field a query names, so one the element does not have
+ * comes back `null` — where the element itself has nothing. `schemaFromWire` drops them on arrival.
+ */
+export type WireElement = Omit<Element, 'definition'> & {
+    definition: Omit<ElementDefinition, OptionalDefinitionKey> & {
+        [K in OptionalDefinitionKey]?: ElementDefinition[K] | null;
+    };
+};
 export type SchemaRaw = {
     definition: Schema['definition'];
-    flat: Element[];
+    flat: WireElement[];
     variables: SchemaVariable[];
+    flags?: Schema['flags'];
     settings: Schema['settings'];
     rsc?: Schema['rsc'];
     pages: Element['id'][];

package/dist/types/ServerTypes.d.ts

@@ -6,6 +6,7 @@ import { SSRRealtimeConfig } from './RealtimeTypes';
 import { Schema } from './SchemaTypes';
 import { AnalyticsConfig, OfflineDataRaw } from './SdkTypes';
 import { FontHead, Style } from './StyleTypes';
+import { FlagOverrides } from '../flags/resolveFlags';
 import { SpaceChange } from '../history/types';
 import { IncomingHttpHeaders } from 'node:http';
 import { FC } from 'react';
@@ -153,6 +154,24 @@ export type SSRTemplateProps = {
      */
     fonts?: FontHead;
 };
+/**
+ * Remote pictures this server fetches, resizes and keeps, at `/_plitzi/img`.
+ *
+ * A picture from a dozen other sites, some 1500 px wide for a 360 px card, is the heaviest part of most pages; with
+ * this on, an `image` whose `src` is another site's offers the browser a `srcset` of sizes this server makes — in
+ * AVIF or WebP when the browser takes them, and with `sharp` installed (without it the picture is passed through,
+ * still cached).
+ */
+export type SSRImagesConfig = {
+    /**
+     * The hosts a picture may come from: `images.example.com`, or `*.example.com` for every subdomain. Nothing else is
+     * fetched — the endpoint is otherwise a way to make this server download anything — and each address is also held
+     * to the rule every outbound request is (no private network, every redirect judged).
+     */
+    domains: readonly string[];
+    /** Where the resized files are kept. Default: `.plitzi/images` under the working directory. */
+    cacheDir?: string;
+};
 /**
  * How a store-relative font path becomes a URL a browser can fetch.
  *
@@ -256,6 +275,13 @@ export type SSRSpaceDeployment = {
     credential?: SSRCredential;
     spaceId?: number | null;
     revision?: number;
+    /**
+     * What this space's feature flags are at, for a deployment that keeps them apart from its revisions — a hash that
+     * changes exactly when they do. Part of every cache key a render is kept under (the page, its server data, the space
+     * read for it), so a flag turned in production reaches the next request while the revision stays the same. Absent,
+     * the flags change only with the revision, and the revision alone keys the caches.
+     */
+    flagsVersion?: string;
     /**
      * This render is an author looking at their own work — the builder's preview — rather than a visitor being
      * served. Metering skips it: nobody should be billed for editing.
@@ -489,6 +515,12 @@ export interface SSRRscContext {
      * doing so. Awaiting this joins the read already under way; it never starts a second one.
      */
     loadOfflineData: () => Promise<OfflineDataRaw | undefined>;
+    /**
+     * What the layers above the space decide about its flags for this request: the server's own and, on a page allowed
+     * to debug, a tester's. An element gated off by a flag is not resolved — `resolveRscData` resolves the flags
+     * against the page it matched and skips it — so a feature that is off puts nothing in the payload.
+     */
+    flagOverrides?: FlagOverrides;
 }
 /**
  * Which published version of a space is asking.
@@ -520,6 +552,8 @@ export type ActionLookupsConfig = {
     getConnector?: (spaceId: number, connectorId: string, at?: SpaceRevision) => Promise<unknown>;
     /** The space's own functions as of that revision — `SpaceFunctions` in `@plitzi/sdk-server/functions`. */
     getFunctions?: (spaceId: number, at?: SpaceRevision) => Promise<unknown>;
+    /** The feature flags the space declares as of that revision — what a flow reads as `{{ flags.<name> }}`. */
+    getFlags?: (spaceId: number, at?: SpaceRevision) => Promise<Schema['flags']>;
 };
 export type SSRActionConfig = {
     /** URL path for the write endpoint, and the base for the action-addressed routes. Defaults to '/_action'. */
@@ -876,6 +910,17 @@ export type SSRServerConfig = {
      *  so does a space whose settings switched `devTools` on. Set, it decides for every space: `false` is a refusal
      *  no space can turn around. */
     debugMode?: boolean;
+    /**
+     * The feature flags this deployment decides, by name — the `server` layer: above what each space declares, below
+     * the SDK embedding a page and a tester with the dev tools. Only for flags a space declares; an override of one it
+     * does not is ignored, and the page says so in its console.
+     *
+     * A function when one server renders several spaces and they do not share their flags: it is asked per render.
+     */
+    flags?: Record<string, boolean> | ((space: {
+        spaceId: number;
+        environment: Environment;
+    }) => Record<string, boolean>);
     cacheTtlMs?: number;
     loginPath?: string | false;
     middlewares?: SSRMiddleware[];
@@ -905,6 +950,8 @@ export type SSRServerConfig = {
     allowPrivatePluginHosts?: boolean;
     /** Where this deployment serves the font files a space uploaded — see {@link SSRFontsConfig}. */
     fonts?: SSRFontsConfig;
+    /** Remote pictures resized by this server — see {@link SSRImagesConfig}. Absent, images keep their own `src`. */
+    images?: SSRImagesConfig;
     /** Omit client-side JS from the rendered page — useful for verifying SSR HTML without hydration. Default: false. */
     ssrOnly?: boolean;
     /** Stream HTML to the client as React renders, reducing TTFB. Default: false. */

package/dist/types/SnippetTypes.d.ts

@@ -0,0 +1,28 @@
+import { Element, Schema } from './SchemaTypes';
+import { Style, StyleVariables } from './StyleTypes';
+/**
+ * A published snippet: a subtree, the style that dresses it, and the element a builder instantiates.
+ *
+ * The artefact someone hosts when they are not building a space — fetched by URL, shown in the Resources panel,
+ * dragged onto a canvas — which is why it lives beside the schema and the style rather than with the builder's own
+ * types: it is a document, produced and consumed by processes that never open a builder.
+ */
+export type Snippet = {
+    id?: string;
+    definition: {
+        name: string;
+        description: string;
+        /** Root of what travels. Its subtree is the whole of `schema.flat`, and it answers to no parent. */
+        baseElementId: Element['id'];
+    };
+    /**
+     * Only what travels: the subtree and the variables its rules read. Nothing else of the space it was cut from — its
+     * pages, settings or components — comes along, and a builder showing or dropping it reads nothing else.
+     */
+    schema: Pick<Schema, 'flat' | 'variables'>;
+    style: Style;
+};
+/** The part of a style a snippet brings into a space: its rules, by display mode, and the tokens they read. */
+export type SnippetStyle = Pick<Style, 'platform'> & {
+    variables?: Partial<StyleVariables>;
+};

package/dist/types/StoreTypes.d.ts

@@ -8,6 +8,7 @@ import { Schema, Element } from './SchemaTypes';
 import { SpaceConnector } from './SpaceTypes';
 import { DisplayMode, Style, StyleState } from './StyleTypes';
 import { ColorScheme, Theme } from './ThemeTypes';
+import { FlagOverrides, FlagResolution } from '../flags/resolveFlags';
 export type RuntimeSourceValues = {
     variables?: Record<string, unknown>;
     navigation?: {
@@ -21,6 +22,19 @@ export type RuntimeSourceValues = {
         mode: Theme;
         resolved: ColorScheme;
     };
+    flags?: Record<string, boolean>;
+};
+/**
+ * The feature flags of this render: what each layer above the space says, and how every flag resolved.
+ *
+ * Top-level for the reason `rsc` is: the overrides are written at the root — by whoever mounts the SDK, by the builder
+ * forcing one — and an element scope owning `runtime` would keep a write from any depth to itself.
+ */
+export type FlagsState = {
+    overrides?: FlagOverrides;
+    /** Each declared flag's answer and the layer that gave it — what the dev tools show. The values alone are the
+     *  `flags` source. */
+    resolved?: Record<string, FlagResolution>;
 };
 export type CommonState = {
     schema: Schema;
@@ -41,12 +55,17 @@ export type CommonState = {
     };
     sources?: Record<string, Source>;
     rsc?: RscState;
+    flags?: FlagsState;
     actions?: ActionsState;
     /** Where this origin's realtime channels answer — absent in a render with no server, where no channel opens. */
     realtime?: {
         endpoint?: string;
         transport?: RealtimeTransport;
     };
+    /** Where this origin resizes remote pictures — absent in a render with no server, where an image keeps its `src`. */
+    images?: {
+        endpoint?: string;
+    };
     render?: RenderSettings;
     /**
      * The theme, mirrored from `themeStore` so the devtools store viewer answers "which theme is this" in one line.
@@ -214,6 +233,12 @@ export type BuilderState = CommonState & {
         queryParams: QueryParams;
         hostname: string;
     };
+    /**
+     * The builder's OWN feature flags — Plitzi's, not the space's: which parts of the editor this person is shown, as the
+     * platform resolved them for them when the editor opened (`PlatformFlags` in the builder's first query). Never
+     * authored, never published.
+     */
+    platformFlags?: Record<string, boolean>;
     displayMode: DisplayMode;
     selector?: string;
     styleSelector?: string;