@plitzi/sdk-shared 0.37.2 → 0.37.4

package/dist/store/renderSettings.d.ts

@@ -9,9 +9,12 @@ export declare const DEFAULT_RENDER_SETTINGS: Required<RenderSettings>;
  *  A nested scope that seeds `render` SHADOWS the whole slice — reads do not fall through key by key, whichever way
  *  they are written — so a subtree that overrides one flag must restate the rest ({@link useRenderOverride}). */
 declare const useRenderSettings: () => Required<RenderSettings>;
-/** Builds the value for a `<StoreProvider>` that renders a subtree under different settings — the builder's preview
- *  pane being preview whatever the editor's own toggle says. Carries the surrounding settings over explicitly,
- *  because the scope shadows the slice: what an override leaves out is NOT inherited, it is lost.
+/** Builds the value for a `<StoreProvider inherit="live">` that renders a subtree under different settings — the
+ *  builder's preview pane being preview whatever the editor's own toggle says. Carries the surrounding settings over
+ *  explicitly, because the scope shadows the slice: what an override leaves out is NOT inherited, it is lost.
+ *
+ *  `inherit="live"` is not optional. A nexus scope inherits nothing by default, so without it the subtree sees a store
+ *  holding `render` and nothing else — no `schema`, no `style` — and every element in it fails to find itself.
  *
  *  `overrides` has to be referentially stable (a module-level constant), like any memo input. */
 export declare const useRenderOverride: (overrides: RenderSettings) => {

package/dist/store/tracing/index.d.ts

@@ -5,4 +5,5 @@ export { MAX_COMMITS, createTracingState } from './tracingStore';
 export { previewValue, diffProps } from './preview';
 export { tracingMiddleware } from './tracingMiddleware';
 export type { UseTracingReturn } from './useTracing';
+export type { TracingReader } from './tracingCollector';
 export { tracingStore, tracingCollector, useTracing };

package/dist/store/tracing/tracingCollector.d.ts

@@ -1,7 +1,23 @@
-import { PropChange } from '../../types';
+import { CommitEntry, PropChange } from '../../types';
 import { ProfilerOnRenderCallback } from 'react';
+/**
+ * What the SDK publishes as `window.plitziTracing` while its render tracing is on (`debugMode`): the commits since a
+ * mark, for a test to ask which elements an interaction rendered — `inspectRenders` in `@plitzi/sdk-authoring/testing`.
+ */
+export type TracingReader = {
+    lastCommitId: () => number;
+    commitsSince: (commitId: number) => CommitEntry[];
+};
+declare global {
+    interface Window {
+        /** Present while render tracing is on (`debugMode`) — see {@link TracingReader}. */
+        plitziTracing?: TracingReader;
+    }
+}
 declare const tracingCollector: {
     onRender: ProfilerOnRenderCallback;
+    lastCommitId: () => number;
+    commitsSince: (commitId: number) => CommitEntry[];
     linkParent: (id: string, parentId: string | undefined, elementId: string) => void;
     markMounted: (id: string) => void;
     markUnmounted: (id: string) => void;

package/dist/store/tracing/tracingCollector.mjs

@@ -73,6 +73,11 @@ var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__
 			causes: D()
 		})), h && (u.set(e, a.get(f)?.commitId ?? g), l = !0), _ || (_ = !0, y(T));
 	},
+	lastCommitId: () => g,
+	commitsSince: (e) => {
+		let t = [...a.values()].sort((e, t) => e.timestamp - t.timestamp);
+		return [...i, ...t].filter((t) => t.commitId > e);
+	},
 	linkParent: E,
 	markMounted: (e) => {
 		d.delete(e) && (l = !0);

package/dist/style/index.d.ts

@@ -3,6 +3,7 @@ export * from './fontAssets';
 export * from './fontValidation';
 export * from './fonts';
 export * from './fontsFromCss';
+export * from './runtimeStyle';
 export * from './styleConstants';
 export * from './styleStates';
 export { styleConstants };

package/dist/style/index.mjs

@@ -3,5 +3,6 @@ import { fontLinkAssets as a } from "./fontAssets.mjs";
 import { SYSTEM_FONTS as o, availableFonts as s, familiesInCss as c, fontFamilyStack as l, fontUrlResolver as u, fontsToHead as d, googleCss2Url as f, googleTextSubsetUrl as p, isSafeFontUrl as m, primaryFamily as h } from "./fonts.mjs";
 import { FontValidationError as g, parseSpaceFont as _ } from "./fontValidation.mjs";
 import { fallbackForFamily as v, fontsFromCss as y } from "./fontsFromCss.mjs";
-import { STYLE_STATES as b, STYLE_STATE_LABELS as x, inCascadeOrder as S, isKnownState as C } from "./styleStates.mjs";
-export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, b as STYLE_STATES, x as STYLE_STATE_LABELS, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, S as inCascadeOrder, i as inheritableAttributesBase, C as isKnownState, m as isSafeFontUrl, _ as parseSpaceFont, h as primaryFamily, e as styleConstants };
+import { RUNTIME_STYLE_ID as b, markStyleCache as x, styleCacheFromDocument as S, styleCacheTravelsInDocument as C } from "./runtimeStyle.mjs";
+import { HIDDEN_CLASS as w, STYLE_STATES as T, STYLE_STATE_LABELS as E, inCascadeOrder as D, isKnownState as O, isStartingState as k, stateSuffix as A } from "./styleStates.mjs";
+export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, w as HIDDEN_CLASS, b as RUNTIME_STYLE_ID, T as STYLE_STATES, E as STYLE_STATE_LABELS, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, D as inCascadeOrder, i as inheritableAttributesBase, O as isKnownState, m as isSafeFontUrl, k as isStartingState, x as markStyleCache, _ as parseSpaceFont, h as primaryFamily, A as stateSuffix, S as styleCacheFromDocument, C as styleCacheTravelsInDocument, e as styleConstants };

package/dist/style/runtimeStyle.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The space's compiled stylesheet (`style.cache`) on a server-rendered page, which carries it once.
+ *
+ * The runtime `<style>` the page renders already holds the cache, verbatim, so sending it again in the hydration payload
+ * made every page ship its stylesheet twice. Instead the server leaves it out of the payload, and the browser reads it
+ * back from that `<style>` before hydrating — the same string, so the client renders the same markup and the store
+ * holds the same cache it always did.
+ *
+ * The cache sits between two comment markers inside the runtime stylesheet: a comment changes nothing about the
+ * cascade, and the element and its place in the tree stay exactly what they were.
+ */
+/** The `data-id` of the stylesheet the SDK renders into the page. */
+export declare const RUNTIME_STYLE_ID = "plitzi-runtime-style";
+/** The cache as the runtime stylesheet embeds it, between the markers `styleCacheFromDocument` reads it by. */
+export declare const markStyleCache: (cache: string) => string;
+/**
+ * Whether the cache reads back from the document byte for byte, so it can be left out of the payload.
+ *
+ * - `{{ token }}`: the stylesheet holds the cache with its tokens already replaced, and the browser needs the tokens to
+ *   replace them again when a variable changes.
+ * - `<`: React escapes a `<style` inside a stylesheet as it renders it, so the text would not come back as it went.
+ * - `\r` and `\0`: the HTML parser normalises both.
+ * - The end marker: the cache would end early.
+ *
+ * An empty cache has nothing to save.
+ */
+export declare const styleCacheTravelsInDocument: (cache: string) => boolean;
+/** The cache the server left in the runtime stylesheet under `root`, or `undefined` when there is none to read. */
+export declare const styleCacheFromDocument: (root: ParentNode) => string | undefined;

package/dist/style/runtimeStyle.mjs

@@ -0,0 +1,7 @@
+//#region src/style/runtimeStyle.ts
+var e = "plitzi-runtime-style", t = "/*plitzi:style-cache*/", n = "/*plitzi:style-cache-end*/", r = (e) => `${t}${e}${n}`, i = (e) => e !== "" && !/\{\{|<|\r|\0/.test(e) && !e.includes(n), a = (e) => {
+	let r = e.querySelector("style[data-id=\"plitzi-runtime-style\"]")?.textContent ?? "", i = r.indexOf(t), a = r.indexOf(n, i);
+	if (!(i < 0 || a < 0)) return r.slice(i + 22, a);
+};
+//#endregion
+export { e as RUNTIME_STYLE_ID, r as markStyleCache, a as styleCacheFromDocument, i as styleCacheTravelsInDocument };

package/dist/style/styleConstants.d.ts

@@ -69,6 +69,7 @@ declare const styleConstants: {
     readonly TRANSITION_DURATION: "transition-duration";
     readonly TRANSITION_TIMING_FUNCTION: "transition-timing-function";
     readonly TRANSITION_DELAY: "transition-delay";
+    readonly TRANSITION_BEHAVIOR: "transition-behavior";
     readonly ANIMATION: "animation";
     readonly ANIMATION_NAME: "animation-name";
     readonly ANIMATION_DURATION: "animation-duration";
@@ -176,8 +177,8 @@ declare const styleConstants: {
 };
 export declare const inheritableAttributesBase: StyleCategory[];
 export declare const StyleBindingsAllowed: {
-    path: "filter" | "fill" | "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" | "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" | "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: "filter" | "fill" | "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" | "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" | "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";
+    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";
 }[];
 export declare const baseDefaultValue: Record<StyleCategory, StyleValue>;
 export default styleConstants;

package/dist/style/styleConstants.mjs

@@ -82,6 +82,7 @@ var e = {
 	TRANSITION_DURATION: "transition-duration",
 	TRANSITION_TIMING_FUNCTION: "transition-timing-function",
 	TRANSITION_DELAY: "transition-delay",
+	TRANSITION_BEHAVIOR: "transition-behavior",
 	ANIMATION: "animation",
 	ANIMATION_NAME: "animation-name",
 	ANIMATION_DURATION: "animation-duration",
@@ -281,6 +282,7 @@ var e = {
 	[t.TRANSITION_DURATION]: "0s",
 	[t.TRANSITION_TIMING_FUNCTION]: "ease",
 	[t.TRANSITION_DELAY]: "0s",
+	[t.TRANSITION_BEHAVIOR]: "normal",
 	[t.ANIMATION]: "none",
 	[t.ANIMATION_NAME]: "none",
 	[t.ANIMATION_DURATION]: "0s",

package/dist/style/styleStates.d.ts

@@ -6,8 +6,14 @@
  *
  * `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.
+ *
+ * `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"];
+export declare const STYLE_STATES: readonly ["hover", "focus", "focus-visible", "focus-within", "active", "disabled", "checked", "visited", "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>;
 export declare const isKnownState: (state: string) => state is (typeof STYLE_STATES)[number];
 /**
@@ -15,3 +21,10 @@ 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. */
+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
+ * fades out to nothing fades in from it — and every pseudo-class is not.
+ */
+export declare const isStartingState: (state: string) => boolean;

package/dist/style/styleStates.mjs

@@ -7,8 +7,9 @@ var e = [
 	"active",
 	"disabled",
 	"checked",
-	"visited"
-], t = {
+	"visited",
+	"hidden"
+], t = "plitzi-component--hidden", n = {
 	hover: "Hover",
 	focus: "Focus",
 	"focus-visible": "Focus visible",
@@ -16,8 +17,9 @@ var e = [
 	active: "Active",
 	disabled: "Disabled",
 	checked: "Checked",
-	visited: "Visited"
-}, n = {
+	visited: "Visited",
+	hidden: "Hidden"
+}, r = {
 	visited: 0,
 	checked: 1,
 	"focus-within": 2,
@@ -25,7 +27,8 @@ var e = [
 	focus: 4,
 	"focus-visible": 5,
 	active: 6,
-	disabled: 7
-}, r = (e) => Object.hasOwn(n, e), i = (t) => r(t) ? n[t] : e.length, a = (e) => Object.entries(e).sort(([e], [t]) => i(e) - i(t));
+	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";
 //#endregion
-export { e as STYLE_STATES, t as STYLE_STATE_LABELS, a as inCascadeOrder, r as isKnownState };
+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 };

package/dist/theme/ThemeProvider.mjs

@@ -2,11 +2,11 @@ import { THEME_COOKIE_NAME as e, applyThemeClass as t, readThemeCookie as n, wri
 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 { use as d, useEffect as f, useId as p, useState as m, useSyncExternalStore as h } from "react";
-import { StoreContext as g, useIsomorphicLayoutEffect as _ } from "@plitzi/nexus/react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+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 x = "(prefers-color-scheme: dark)", S = () => window.matchMedia(x).matches ? "dark" : "light", C = ({ state: e }) => (u([
+var S = "(prefers-color-scheme: dark)", C = () => window.matchMedia(S).matches ? "dark" : "light", w = ({ state: e }) => (u([
 	"theme.mode",
 	"theme.resolved",
 	"theme.areas"
@@ -14,41 +14,47 @@ var x = "(prefers-color-scheme: dark)", S = () => window.matchMedia(x).matches ?
 	e.mode,
 	o(e.mode, e.scheme),
 	e.areas
-]), null), w = ({ defaultTheme: o = "system", theme: u, scope: w = "document", cookieName: T = e, children: E }) => {
-	let D = w === "container", O = p(), [k] = m(() => D ? a(`theme${O}`) : void 0), A = k ?? i;
-	_(() => {
-		let e = D ? void 0 : n(T);
-		A.batch(() => {
-			s(S(), A), c(u ?? e ?? o, A);
+]), 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,
+		remembered: !1
+	});
+	v(() => {
+		let e = O ? void 0 : n(E), t = u ?? e ?? o;
+		M.current = {
+			mode: t,
+			remembered: e !== void 0
+		}, j.batch(() => {
+			s(C(), j), c(t, j);
 		});
 	}, [
 		o,
 		u,
-		T,
-		D,
-		A
+		E,
+		O,
+		j
 	]);
-	let j = h(A.subscribe, A.getState, A.getState), M = d(g) !== void 0;
+	let N = g(j.subscribe, j.getState, j.getState), P = d(_) !== void 0;
 	f(() => {
-		let e = window.matchMedia(x), t = () => s(e.matches ? "dark" : "light", A);
+		let e = window.matchMedia(S), t = () => s(e.matches ? "dark" : "light", j);
 		return e.addEventListener("change", t), t(), () => e.removeEventListener("change", t);
-	}, [A]), f(() => {
-		if (D) return;
+	}, [j]), f(() => {
+		if (O) return;
 		let e = () => {
-			let { mode: e } = A.getState();
-			r(e, T), t(e, document.documentElement);
+			let { mode: e } = j.getState();
+			(M.current.remembered || e !== M.current.mode) && (r(e, E), M.current.remembered = !0), t(e, document.documentElement);
 		};
-		return e(), A.subscribe(e);
+		return e(), j.subscribe(e);
 	}, [
-		T,
-		D,
-		A
+		E,
+		O,
+		j
 	]);
-	let N = M ? /* @__PURE__ */ y(C, { state: j }) : null;
-	return D ? /* @__PURE__ */ b(l, {
-		value: k,
-		children: [N, E]
-	}) : /* @__PURE__ */ b(v, { children: [N, E] });
+	let F = P ? /* @__PURE__ */ b(w, { state: N }) : null;
+	return O ? /* @__PURE__ */ x(l, {
+		value: A,
+		children: [F, D]
+	}) : /* @__PURE__ */ x(y, { children: [F, D] });
 };
 //#endregion
-export { w as default };
+export { T as default };

package/dist/theme/themeCookie.mjs

@@ -1,24 +1,20 @@
+import { cookieFromHeader as e } from "../helpers/cookies.mjs";
 //#region src/theme/themeCookie.ts
-var e = "theme", t = ["dark", "light"], n = [...t, "system"], r = 31536e3, i = (e) => n.includes(e), a = (e, n) => {
-	for (let r of t) n.classList.toggle(r, e === r);
-}, o = (t, n = e) => {
-	if (t) for (let e of t.split(";")) {
-		let t = e.indexOf("=");
-		if (t > -1 && e.slice(0, t).trim() === n) {
-			let n = decodeURIComponent(e.slice(t + 1).trim());
-			return i(n) ? n : void 0;
-		}
-	}
-}, s = (t = e) => {
+var t = "theme", n = ["dark", "light"], r = [...n, "system"], i = 31536e3, a = (e) => r.includes(e), o = (e, t) => {
+	for (let r of n) t.classList.toggle(r, e === r);
+}, s = (n, r = t) => {
+	let i = e(n, r);
+	return a(i) ? i : void 0;
+}, c = (e = t) => {
 	try {
-		return o(document.cookie, t);
+		return s(document.cookie, e);
 	} catch {
 		return;
 	}
-}, c = (t, n = e) => {
+}, l = (e, n = t) => {
 	try {
-		document.cookie = `${n}=${encodeURIComponent(t)};path=/;max-age=${r};SameSite=Lax`;
+		document.cookie = `${n}=${encodeURIComponent(e)};path=/;max-age=${i};SameSite=Lax`;
 	} catch {}
 };
 //#endregion
-export { t as THEME_CLASSES, e as THEME_COOKIE_NAME, a as applyThemeClass, i as isTheme, s as readThemeCookie, o as themeFromCookies, c as writeThemeCookie };
+export { n as THEME_CLASSES, t as THEME_COOKIE_NAME, o as applyThemeClass, a as isTheme, c as readThemeCookie, s as themeFromCookies, l as writeThemeCookie };

package/dist/types/ActionTypes.d.ts

@@ -221,6 +221,8 @@ export type ActionRunReport = {
     status: ActionRunStatus;
     output: Record<string, unknown>;
     trace: Record<string, unknown>[];
+    /** Each step as it ran — status, timing, error, and what it logged. */
+    steps: ActionRunStep[];
 };
 /**
  * Whether the CLIENT flow waits. The server side is synchronous in every mode: `detached` means the step does not
@@ -343,6 +345,8 @@ export type ActionRunStep = {
     endTime: number;
     /** Why it failed, redacted of every credential value the run resolved. */
     error?: string;
+    /** What the step logged (`ctx.log`), redacted the same way; at most a hundred lines of a thousand characters. */
+    logs?: string[];
 };
 /**
  * A run a page RENDER started, reported to a page whose debugging is authorized.

package/dist/types/AuthTypes.d.ts

@@ -33,6 +33,16 @@ export type AuthGrant<U = Record<string, unknown>> = {
     user?: U;
     token?: TokenResult;
 };
+/**
+ * A right password that bought a CHALLENGE and not a session: the account has a second factor, and `mfaToken` is what
+ * the code is completed against (`auth.login` with `mode: 'mfa'`). Not a failure of the session — nothing was lost —
+ * which is why it is not one of the {@link AuthFailureReason}s.
+ */
+export type MfaChallenge = {
+    ok: false;
+    reason: 'mfa';
+    mfaToken: string;
+};
 export type AuthResult<U = Record<string, unknown>> = ({
     ok: true;
 } & AuthGrant<U>) | {
@@ -54,7 +64,7 @@ export type LoginResult = ({
 } & TokenResult) | {
     ok: false;
     reason: AuthFailureReason;
-};
+} | MfaChallenge;
 export type AuthContextValue = {
     /** The credentials your login endpoint expects. Values arrive from interaction parameters, hence `unknown`. */
     login: (params: Record<string, unknown>) => Promise<LoginResult>;

package/dist/types/CommonTypes.d.ts

@@ -1,4 +1,5 @@
 import { User } from './AuthTypes';
+import { RealtimeTransport } from './RealtimeTypes';
 import { SSRRenderResult, SSRRscData } from './ServerTypes';
 export type Environment = 'production' | 'staging' | 'development' | 'main';
 export type Server<T extends Record<string, unknown> = Record<string, unknown>> = {
@@ -44,6 +45,11 @@ export type ServerSSR = {
      *  is what tells a client flow that a `serverAction` step has nowhere to run, rather than letting it fail per
      *  click. A static export publishes nothing here and the step reports itself inert. */
     actionPath?: string;
+    /** Path where this origin's realtime channels answer. Published only by a server that mounts them: its absence is
+     *  what keeps a `channel` element closed in the builder, an embed or a static export. */
+    realtimePath?: string;
+    /** How pages connect to them — a stream (`sse`, when absent) or a socket (`websocket`). */
+    realtimeTransport?: RealtimeTransport;
     /** 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/FunctionTypes.d.ts

@@ -0,0 +1,52 @@
+import { InteractionCallbackParam } from './InteractionTypes';
+/**
+ * A space's own functions, as everything outside the runner sees them: the builder, the CLI, the MCP and the
+ * platform that stores them. The contract the code itself is written against is `@plitzi/sdk-server/functions`.
+ */
+/** One task the functions declare: everything but its code — what the catalog shows and a step is drawn from. */
+export type FunctionTaskManifest = {
+    namespace: string;
+    action: string;
+    title: string;
+    description?: string;
+    params: Record<string, InteractionCallbackParam<Record<string, unknown>>>;
+};
+/** What a space's functions declare, read from the bundle when it is saved: its tasks, routes and reachable hosts. */
+export type FunctionsManifest = {
+    hosts: string[];
+    tasks: FunctionTaskManifest[];
+    /** The route keys, `'GET /board-assets/:board/:asset'`, as declared. */
+    routes: string[];
+};
+/** One reason functions were not saved, where it is — what an editor underlines. */
+export type FunctionsProblem = {
+    file?: string;
+    line?: number;
+    column?: number;
+    message: string;
+};
+/** The live draft: the source files, which copy of them this is, and what they declared when last saved. */
+export type FunctionsDraft = {
+    /** `{ "index.ts": "…", "lib/feed.ts": "…" }`. */
+    files: Record<string, string>;
+    /** Hand it back as `base` when saving: a draft that moved on since is refused rather than overwritten. */
+    version: string;
+    manifest: FunctionsManifest | null;
+};
+/** Why nothing was built: the draft moved on since the copy this save started from. */
+export type FunctionsRefusal = {
+    status: 409;
+    error: string;
+    limit: 'version';
+};
+export type FunctionsSaveResult = {
+    ok: true;
+    version: string;
+    manifest: FunctionsManifest;
+} | {
+    ok: false;
+    problems: FunctionsProblem[];
+} | {
+    ok: false;
+    refusal: FunctionsRefusal;
+};

package/dist/types/PluginTypes.d.ts

@@ -101,7 +101,6 @@ export type PluginsContextValue = {
     assets: Record<string, Asset>;
     plugins: Record<string, ComponentDefinition>;
     dispatchPlugins?: unknown;
-    fetch?: (filter: object, cursor: string, limit: number) => Promise<unknown>;
     add?: (pluginType: string, resource?: string) => Promise<boolean>;
     setSettings?: (pluginType: string, attribute: string, value: string) => Promise<boolean>;
     getSettings?: (pluginType: string, attribute?: string, defaultValue?: string | number | boolean) => ComponentDefinition['settings'] | string | number | boolean;

package/dist/types/RealtimeTypes.d.ts

@@ -0,0 +1,94 @@
+import { ActionAccess } from './ActionTypes';
+/**
+ * One kind of channel a space offers, declared under a topic PATTERN — `board:{id}` is every board, each its own topic.
+ *
+ * A topic no pattern of the space matches is refused, by the server and at authoring: a page cannot open a channel
+ * nobody decided should exist.
+ */
+export type ChannelDeclaration = {
+    /** Who may subscribe and publish — the access vocabulary actions use. */
+    access: ActionAccess;
+    /**
+     * Who may send: `clients` (pages publish directly — cursors, reactions, what is cheap and ephemeral) or `server`
+     * (only a flow's `realtime.publish` — what was validated and saved first). `clients` when absent.
+     */
+    publish?: 'clients' | 'server';
+    /** Whether members announce themselves — who is here, and what they are pointing at. */
+    presence?: boolean;
+    /**
+     * Whether a page needs a GRANT to open a topic of it: a token a flow's `realtime.grant` issued for that exact topic —
+     * after checking a password, an invitation, an order's owner, whatever decides who is in. Without one the topic is
+     * refused, however well its name is known; `access` still applies on top. For a private room, a customer's order,
+     * a locked board.
+     */
+    grant?: boolean;
+    /** The largest `data` a page may send, as JSON bytes. 4 KB when absent. */
+    maxMessageBytes?: number;
+    /** How many messages one connection may send a second. 30 when absent. */
+    messagesPerSecond?: number;
+};
+export type ChannelDeclarations = Record<string, ChannelDeclaration>;
+/** Who sent a message, as the SERVER knows them: a page cannot say it is someone else. */
+export type RealtimeSender = {
+    /** The connection, as the server named it — stable for as long as the page stays connected. */
+    from: string;
+    /** The signed-in visitor, when the connection carries a session. */
+    user?: {
+        id: number;
+        name: string;
+    };
+};
+/**
+ * A message, as every subscriber receives it.
+ *
+ * `type` and `data` are the sender's own vocabulary; everything else is stamped by the server. Types starting with
+ * `$` are the channel's own: `$presence` (a member's state) and `$leave` (a member gone).
+ */
+export type RealtimeMessage = RealtimeSender & {
+    topic: string;
+    type: string;
+    data: unknown;
+    /** Server time, in milliseconds. */
+    at: number;
+};
+/** What a page sends to publish: the secret its connection was given, and the message. */
+export type RealtimePublishRequest = {
+    token: string;
+    topic: string;
+    type: string;
+    data: unknown;
+};
+/**
+ * How messages move between the processes and replicas of a deployment — transport only, strings in and out.
+ *
+ * Everything a channel DOES (who may, how big, how often, who sent it) is decided above it, once, for every
+ * deployment. In memory for one self-hosted process and its workers; Redis, NATS or a cloud service for a fleet.
+ */
+export type PubSubAdapter = {
+    /** Delivers `message` to every subscriber of `topic`, in this process and every other sharing the adapter. */
+    publish: (topic: string, message: string) => Promise<void>;
+    /** Calls `listener` for each message on `topic` until the returned function is called. */
+    subscribe: (topic: string, listener: (message: string) => void) => Promise<() => Promise<void>>;
+};
+/**
+ * How a page connects: a Server-Sent Events stream it publishes to with requests, or one WebSocket both ways.
+ *
+ * The stream works through anything that passes HTTP; the socket sends a message as a frame instead of a request,
+ * which is what a page publishing a cursor twenty times a second wants. A page told to use the socket falls back to
+ * the stream on its own where one cannot open (behind HTTP/2, a proxy that drops upgrades).
+ */
+export type RealtimeTransport = 'sse' | 'websocket';
+/** A server's realtime channels. On by default; `false` turns the endpoint off. */
+export type SSRRealtimeConfig = {
+    /** How messages reach the other processes and replicas. In memory (and across workers) when absent. */
+    pubsub?: PubSubAdapter;
+    /** Where pages connect. `/_realtime` when absent. */
+    path?: string;
+    /** How pages connect. `sse` when absent; both are always served, this is what pages are told to use. */
+    transport?: RealtimeTransport;
+    /**
+     * Origins, besides the server's own, whose pages may open a WebSocket here (`https://app.example.com`). A
+     * socket carries the visitor's cookies from any site, so every other origin is refused.
+     */
+    allowedOrigins?: string[];
+} | false;