@plitzi/cli 0.38.9 → 0.38.10

package/dist/index.js

@@ -1354,7 +1354,7 @@ var n$3 = [
 	".otf"
 ];
 var r$5 = () => Object.fromEntries(n$3.map((e) => [e, "dataurl"]));
-var i$5 = /\?(raw|inline)$/;
+var i$4 = /\?(raw|inline)$/;
 var a$5 = {
 	".wasm": "application/wasm",
 	".js": "text/javascript",
@@ -1371,8 +1371,8 @@ var a$5 = {
 var o$4 = () => ({
 	name: "plitzi-import-queries",
 	setup: (n) => {
-		n.onResolve({ filter: i$5 }, async (e) => {
-			let t = i$5.exec(e.path)?.[1] ?? "raw", r = await n.resolve(e.path.replace(i$5, ""), {
+		n.onResolve({ filter: i$4 }, async (e) => {
+			let t = i$4.exec(e.path)?.[1] ?? "raw", r = await n.resolve(e.path.replace(i$4, ""), {
 				kind: e.kind,
 				importer: e.importer,
 				resolveDir: e.resolveDir
@@ -2656,7 +2656,7 @@ ${code(".claude/skills/plitzi-cli/SKILL.md")} first: ${code("plitzi plugin add")
 
 What you leave behind is the next reader's problem — the user's, or the next agent's. Before calling a change done:
 
-- **Nothing unused.** Delete what you made and no longer use — a file, a page, a component, a class, a token, a data file, an import, a plugin folder. No commented-out code, no ${code("console.log")} left from debugging, no copy of a file kept "just in case": git keeps the history.
+- **Nothing unused.** Delete what you made and no longer use — a file, a page, a component, a class, a token, a data file, an import, a plugin folder. A folder's ${code(".gitkeep")} keeps it in git while it is empty; once the folder holds files it does nothing, and ${code("doctor")} and ${code("upgrade")} ask for it no more. No commented-out code, no ${code("console.log")} left from debugging, no copy of a file kept "just in case": git keeps the history.
 - **Scratch goes in ${code(`tmp/`)}, or nowhere.** A one-off script, a dump, a picture to look at — never at the root or beside the source, where it reads as part of the project.
 - **One of everything.** A look used twice is a class; a value used twice is a token; a block used twice is a component, and rows of data are one list. Change it where it is defined, and rename everywhere when you rename.
 - **Files a reader can find.** One part per file, named after what it is, in the folder of its kind — the shape ${code("src/space/")} already has. Do not start a parallel layout of your own.
@@ -2908,6 +2908,8 @@ var serverOptionsModule = (local) => `import type { ProjectServerOptions } from
  *
  * - \`images: { domains: ['images.example.com'] }\` — pictures from those hosts resized here, with \`sharp\` installed.
 ${local ? ACTION_OPTIONS_DOC : ""} * - \`rsc: { elementTimeoutMs }\` — how long a section resolved on the server is waited for: 5 s by default.
+ * - \`devMode\` — the development build, the dev tools, a public action's trace: on unless \`NODE_ENV\` is \`production\`.
+ *   \`devMode: false\` keeps them off wherever the server is started, \`NODE_ENV\` or not. \`devReload\` follows it.
  */
 export const serverOptions: ProjectServerOptions = {};
 `;
@@ -4425,15 +4427,15 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-var e$42 = "[a-zA-Z_][a-zA-Z0-9_]*(?:-[a-zA-Z0-9_]+)*";
-var t$63 = `(?:${e$42}|\\d+)`;
-var n$47 = `\\[\\s*(?:\\d+|'[^']*'|"[^"]*"|${e$42}(?:\\.${t$63})*)\\s*\\]`;
-var r$36 = `${`${e$42}(?:${n$47})*(?:\\??\\.${t$63}(?:${n$47})*)*`}(?:\\s*\\?\\?\\s*[^|{}]+?)?(?:\\s*\\|\\s*[a-zA-Z_]+(?:\\([^)]*\\))?)*`;
-var i$28 = `\\{\\{\\s*${r$36}\\s*\\}\\}`;
-var a$24 = `(?:${`\\{\\{\\{\\s*${r$36}\\s*\\}\\}\\}`}|${i$28})`;
+var e$43 = "[a-zA-Z_][a-zA-Z0-9_]*(?:-[a-zA-Z0-9_]+)*";
+var t$63 = `(?:${e$43}|\\d+)`;
+var n$47 = `\\[\\s*(?:\\d+|'[^']*'|"[^"]*"|${e$43}(?:\\.${t$63})*)\\s*\\]`;
+var r$36 = `${`${e$43}(?:${n$47})*(?:\\??\\.${t$63}(?:${n$47})*)*`}(?:\\s*\\?\\?\\s*[^|{}]+?)?(?:\\s*\\|\\s*[a-zA-Z_]+(?:\\([^)]*\\))?)*`;
+var i$29 = `\\{\\{\\s*${r$36}\\s*\\}\\}`;
+var a$24 = `(?:${`\\{\\{\\{\\s*${r$36}\\s*\\}\\}\\}`}|${i$29})`;
 new RegExp(a$24, "g");
 RegExp(`^${a$24}$`);
-var e$41 = ["smooth", "auto"];
+var e$42 = ["smooth", "auto"];
 var t$61 = [
 	"start",
 	"center",
@@ -4445,7 +4447,7 @@ var r$34 = {
 	type: "select",
 	description: "How it moves: \"smooth\" glides there, \"auto\" jumps.",
 	default: "smooth",
-	options: [...e$41]
+	options: [...e$42]
 };
 var a$22 = {
 	setState: {
@@ -4561,7 +4563,7 @@ var a$22 = {
 		}
 	}
 };
-var e$40 = {
+var e$41 = {
 	onLoad: {
 		action: "onLoad",
 		title: "On Load",
@@ -4731,7 +4733,7 @@ var e$40 = {
 		params: {}
 	}
 };
-var e$39 = () => (e) => e;
+var e$40 = () => (e) => e;
 var t$60 = () => (e) => e;
 var t$59 = t$60()({
 	type: "blockHtml",
@@ -4964,13 +4966,13 @@ var n$44 = {
 var r$33 = t$60()({
 	type: "button",
 	attributeValues: {
-		subType: e$39()([
+		subType: e$40()([
 			"button",
 			"submit",
 			"reset"
 		]),
-		contentPlacement: e$39()(["before", "after"]),
-		iconPlacement: e$39()(["before", "after"])
+		contentPlacement: e$40()(["before", "after"]),
+		iconPlacement: e$40()(["before", "after"])
 	},
 	content: {
 		attributes: {
@@ -5038,7 +5040,7 @@ var r$33 = t$60()({
 });
 var n$43 = t$60()({
 	type: "dropdown",
-	attributeValues: { popupPlacement: e$39()([
+	attributeValues: { popupPlacement: e$40()([
 		"left",
 		"right",
 		"top",
@@ -5169,7 +5171,7 @@ var t$54 = t$60()({
 });
 var n$42 = t$60()({
 	type: "heading",
-	attributeValues: { subType: e$39()([
+	attributeValues: { subType: e$40()([
 		"h1",
 		"h2",
 		"h3",
@@ -5291,20 +5293,20 @@ var n$42 = t$60()({
 var n$41 = t$60()({
 	type: "link",
 	attributeValues: {
-		mode: e$39()([
+		mode: e$40()([
 			"page",
 			"internal",
 			"external"
 		]),
-		target: e$39()([
+		target: e$40()([
 			"self",
 			"blank",
 			"parent",
 			"top"
 		]),
-		contentPlacement: e$39()(["before", "after"]),
-		iconPlacement: e$39()(["before", "after"]),
-		current: e$39()(["page", "section"])
+		contentPlacement: e$40()(["before", "after"]),
+		iconPlacement: e$40()(["before", "after"]),
+		current: e$40()(["page", "section"])
 	},
 	content: {
 		attributes: {
@@ -5476,7 +5478,7 @@ var t$52 = t$60()({
 });
 var n$40 = t$60()({
 	type: "richText",
-	attributeValues: { format: e$39()([
+	attributeValues: { format: e$40()([
 		"html",
 		"markdown",
 		"text"
@@ -5613,7 +5615,7 @@ var n$39 = {
 };
 var r$32 = t$60()({
 	type: "themeToggle",
-	attributeValues: { subType: e$39()(["switch", "segmented"]) },
+	attributeValues: { subType: e$40()(["switch", "segmented"]) },
 	triggers: { onThemeChange: {
 		action: "onThemeChange",
 		title: "On Theme Change",
@@ -5679,7 +5681,7 @@ var r$32 = t$60()({
 });
 var n$38 = t$60()({
 	type: "form",
-	attributeValues: { method: e$39()(["get", "post"]) },
+	attributeValues: { method: e$40()(["get", "post"]) },
 	sourceType: "apiContainer",
 	triggers: { onSubmit: {
 		action: "onSubmit",
@@ -5813,7 +5815,7 @@ var r$31 = {
 	...n$37,
 	"line-height": "20px"
 };
-var i$25 = {
+var i$26 = {
 	display: "flex",
 	cursor: "pointer",
 	"font-weight": "600",
@@ -5823,7 +5825,7 @@ var i$25 = {
 	"user-select": "none"
 };
 var a$21 = {
-	...i$25,
+	...i$26,
 	"margin-bottom": "4px"
 };
 var o$23 = {
@@ -5857,7 +5859,7 @@ var l$13 = {
 	"font-size": "inherit",
 	"box-shadow": "none"
 };
-var u$13 = {
+var u$14 = {
 	height: "100%",
 	width: "100%",
 	display: "block",
@@ -5941,7 +5943,7 @@ var m$7 = (e, t, { field: n, icon: r } = {}) => ({
 var h$4 = { field: l$13 };
 var g$4 = t$60()({
 	type: "formControl",
-	attributeValues: { subType: e$39()([
+	attributeValues: { subType: e$40()([
 		"text",
 		"number",
 		"email",
@@ -5996,7 +5998,7 @@ var g$4 = t$60()({
 		definition: {
 			label: "Form Control",
 			type: "formControl",
-			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
+			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. Optional unless `required: true`, as an HTML field is: a `requiredMessage` alone requires nothing. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The box is ringed (`2px solid currentColor`) while the field inside has keyboard focus: restyle it with a `focus-within` state on the `input` slot — the box never takes `focus` itself. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
 			bindings: {},
 			styleSelectors: {
 				base: "",
@@ -6051,7 +6053,7 @@ var g$4 = t$60()({
 					color: "inherit",
 					resize: "vertical"
 				}),
-				select: m$7("Form Control Select", f$10, { field: u$13 }),
+				select: m$7("Form Control Select", f$10, { field: u$14 }),
 				checkbox: {
 					name: "Form Control Checkbox",
 					displayMode: "desktop",
@@ -6063,7 +6065,7 @@ var g$4 = t$60()({
 							"margin-left": "0px",
 							"margin-right": "4px"
 						} },
-						label: { default: i$25 },
+						label: { default: i$26 },
 						requiredMark: { default: s$20 },
 						error: { default: o$23 }
 					}
@@ -6075,7 +6077,7 @@ var g$4 = t$60()({
 						base: { default: {} },
 						input: { default: p$11 },
 						label: { default: {
-							...i$25,
+							...i$26,
 							"align-items": "center"
 						} },
 						requiredMark: { default: s$20 },
@@ -6089,7 +6091,7 @@ var g$4 = t$60()({
 });
 var n$36 = t$60()({
 	type: "layoutContainer",
-	attributeValues: { subType: e$39()([
+	attributeValues: { subType: e$40()([
 		"div",
 		"header",
 		"footer",
@@ -6221,6 +6223,11 @@ var t$49 = t$60()({
 });
 var t$48 = t$60()({
 	type: "page",
+	serverTemplates: [
+		"seoPageTitle",
+		"seoPageDescription",
+		"notFound"
+	],
 	triggers: { onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",
@@ -6388,12 +6395,12 @@ var t$46 = t$60()({
 var n$35 = t$60()({
 	type: "image",
 	attributeValues: {
-		fetchPriority: e$39()([
+		fetchPriority: e$40()([
 			"high",
 			"low",
 			"auto"
 		]),
-		loadMode: e$39()([
+		loadMode: e$40()([
 			"auto",
 			"eager",
 			"lazy"
@@ -6542,7 +6549,7 @@ var t$44 = t$60()({
 var n$34 = t$60()({
 	type: "apiContainer",
 	attributeValues: {
-		subType: e$39()([
+		subType: e$40()([
 			"",
 			"div",
 			"header",
@@ -6555,25 +6562,26 @@ var n$34 = t$60()({
 			"address",
 			"figure"
 		]),
-		method: e$39()([
+		method: e$40()([
 			"get",
 			"post",
 			"put",
 			"delete",
 			"patch"
 		]),
-		credentials: e$39()([
+		credentials: e$40()([
 			"include",
 			"omit",
 			"same-origin"
 		]),
-		pagination: e$39()([
+		pagination: e$40()([
 			"none",
 			"url",
 			"append"
 		])
 	},
 	sourceType: "apiContainer",
+	serverTemplates: ["notFound"],
 	triggers: {
 		onApiError: {
 			action: "onApiError",
@@ -6715,7 +6723,7 @@ var n$34 = t$60()({
 });
 var n$33 = t$60()({
 	type: "channel",
-	attributeValues: { subType: e$39()([
+	attributeValues: { subType: e$40()([
 		"",
 		"div",
 		"section",
@@ -6835,6 +6843,49 @@ var n$33 = t$60()({
 	}
 });
 var t$43 = t$60()({
+	type: "carouselTrack",
+	ancestorType: "carousel",
+	content: {
+		attributes: {},
+		definition: {
+			label: "Carousel Track",
+			type: "carouselTrack",
+			description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-film"
+		},
+		defaultStyle: {
+			name: "Carousel Track",
+			displayMode: "desktop",
+			style: { base: { default: {
+				position: "relative",
+				overflow: "hidden"
+			} } }
+		},
+		settings: {}
+	}
+});
+var t$42 = t$60()({
 	type: "carousel",
 	sourceType: "carousel",
 	triggers: { onChange: {
@@ -6936,53 +6987,10 @@ var t$43 = t$60()({
 	},
 	initialItems: ["carouselTrack"]
 });
-var t$42 = t$60()({
-	type: "carouselTrack",
-	ancestorType: "carousel",
-	content: {
-		attributes: {},
-		definition: {
-			label: "Carousel Track",
-			type: "carouselTrack",
-			description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canSnippet: !1,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-film"
-		},
-		defaultStyle: {
-			name: "Carousel Track",
-			displayMode: "desktop",
-			style: { base: { default: {
-				position: "relative",
-				overflow: "hidden"
-			} } }
-		},
-		settings: {}
-	}
-});
 var r$30 = t$60()({
 	type: "container",
 	attributeValues: {
-		subType: e$39()([
+		subType: e$40()([
 			"div",
 			"header",
 			"footer",
@@ -7006,7 +7014,7 @@ var r$30 = t$60()({
 			"p",
 			"span"
 		]),
-		live: e$39()([
+		live: e$40()([
 			"",
 			"polite",
 			"assertive"
@@ -7097,8 +7105,8 @@ var B$2 = {
 	BlockHtml: t$59,
 	BlockJsx: t$58,
 	Button: r$33,
-	Carousel: t$43,
-	CarouselTrack: t$42,
+	Carousel: t$42,
+	CarouselTrack: t$43,
 	Channel: n$33,
 	Container: r$30,
 	Custom: t$57,
@@ -7231,8 +7239,7 @@ var B$2 = {
 						top: "0",
 						position: "absolute",
 						"z-index": "210",
-						"background-color": "black",
-						opacity: "0.5"
+						"background-color": "rgb(0 0 0 / 50%)"
 					} },
 					rootContainer: { default: {
 						display: "flex",
@@ -7303,8 +7310,8 @@ var B$2 = {
 	List: t$60()({
 		type: "list",
 		attributeValues: {
-			subType: e$39()(["ul", "ol"]),
-			source: e$39()(["none", "controlled"])
+			subType: e$40()(["ul", "ol"]),
+			source: e$40()(["none", "controlled"])
 		},
 		sourceType: "list",
 		content: {
@@ -7467,7 +7474,7 @@ var B$2 = {
 			definition: {
 				label: "Modal Container",
 				type: "modalContainer",
-				description: "A modal overlay container opened and closed through interactions; use for dialogs over the page.",
+				description: "A modal overlay container opened and closed through interactions; use for dialogs over the page. The element itself is fixed over the whole viewport, and holds two layers side by side — neither inside the other: `backgroundContainer`, the dim layer, `rgb(0 0 0 / 50%)` (its `background-color` is the whole dim), and `rootContainer`, the dialog, centred by `top: 50%`, `left: 50%` and `transform: translate3d(-50%, -50%, 0)` — to sit it near the top, set `top` and `transform: translateX(-50%)`; flex alignment on the dim layer moves nothing. Inside the dialog, top to bottom: `headerContainer` (with `headerTitle` and `headerCloseButton`) and `bodyContainer`.",
 				items: [],
 				bindings: {},
 				loadStrategy: "lazy",
@@ -7519,8 +7526,7 @@ var B$2 = {
 						top: "0",
 						position: "absolute",
 						"z-index": "210",
-						"background-color": "black",
-						opacity: "0.5"
+						"background-color": "rgb(0 0 0 / 50%)"
 					} },
 					rootContainer: { default: {
 						display: "flex",
@@ -7604,8 +7610,8 @@ var B$2 = {
 	Pagination: t$60()({
 		type: "pagination",
 		attributeValues: {
-			mode: e$39()(["pages", "loadMore"]),
-			target: e$39()(["url", "interaction"])
+			mode: e$40()(["pages", "loadMore"]),
+			target: e$40()(["url", "interaction"])
 		},
 		triggers: { onPageChange: {
 			action: "onPageChange",
@@ -7857,6 +7863,7 @@ var B$2 = {
 	ThemeToggle: r$32,
 	Video: t$44
 };
+Object.fromEntries(Object.values(B$2).flatMap((e) => "serverTemplates" in e ? [[e.type, e.serverTemplates]] : []));
 /** Every declaration, read through the part of its shape this catalog uses. */
 var declarations$1 = B$2;
 /** Keyed by the schema `type`, which is what a document and every catalog address a type by. */
@@ -7867,7 +7874,7 @@ var elementCatalog = Object.fromEntries(Object.values(declarations$1).map((decla
 }]));
 Object.keys(elementCatalog);
 Object.fromEntries(Object.values(declarations$1).filter((declaration) => declaration.sourceType).map((declaration) => [declaration.type, declaration.sourceType]));
-Object.fromEntries(Object.values(declarations$1).map((declaration) => [declaration.type, [...Object.keys(e$40), ...Object.keys(declaration.triggers ?? {})]]));
+Object.fromEntries(Object.values(declarations$1).map((declaration) => [declaration.type, [...Object.keys(e$41), ...Object.keys(declaration.triggers ?? {})]]));
 /** The triggers only some types fire, by action name — for a step builder that wants the title the builder shows. */
 var typeTriggerDefinitions = Object.fromEntries(Object.values(declarations$1).flatMap((declaration) => Object.entries(declaration.triggers ?? {})));
 Object.fromEntries(Object.values(declarations$1).flatMap((declaration) => Object.entries(declaration.callbacks ?? {})));
@@ -7968,6 +7975,11 @@ var AUTHORING_CODES = {
 		means: "a page that sends visitors it is not for to a page the space does not have",
 		fix: "a page's id or slug (`''` is the home page), or a full URL"
 	},
+	"page-template": {
+		kind: "refused",
+		means: "a template in a page's `seoTitle`, `seoDescription` or `notFound` that reads what is not there when the server answers — anything but the page's `runtime: 'server'` providers and `navigation` — or cannot be read",
+		fix: "read the record from a provider with `runtime: 'server'` on the page or its layout — `'{{ apiContainer_post.title }} — Blog'` — or words of its own"
+	},
 	"folder-undeclared": {
 		kind: "refused",
 		means: "a page, a layout or a folder filed in a folder the space does not declare",
@@ -8143,6 +8155,11 @@ var AUTHORING_CODES = {
 		means: "an ancestor condition keyed by something that is neither a class name nor `'>'` (the parent)",
 		fix: "`[card.name]` for a `styles()` declaration, or `'>'` for the parent whatever it wears"
 	},
+	"focus-on-field-box": {
+		kind: "warned",
+		means: "a `focus` or `focus-visible` state on a text field's or a select's `input` slot — the box the field is drawn in, which never takes focus, so no ring is ever shown",
+		fix: "`'focus-within'` on the same class, or the state on the `field` slot"
+	},
 	"heading-level-overridden": {
 		kind: "warned",
 		means: "a markdown's or richText's `heading` slot and a level's (`heading3`) both setting one property, the general class written later in the stylesheet — the level's value is lost",
@@ -8380,7 +8397,7 @@ var AUTHORING_CODES = {
 	},
 	"not-found-not-a-template": {
 		kind: "refused",
-		means: "`notFound` that is not one `{{ expression }}` against the answer — never `true`, so never a 404",
+		means: "`notFound`, a provider's or a page's, that is not one `{{ expression }}` — never `true`, so never a 404",
 		fix: "`notFound: '{{ source.found == false }}'`"
 	},
 	"server-data-in-browser": {
@@ -8403,6 +8420,11 @@ var AUTHORING_CODES = {
 		means: "a control in a form with no `name` — its value never reaches `values`",
 		fix: "`formControl({ name: 'email', … })`"
 	},
+	"required-message-unused": {
+		kind: "warned",
+		means: "a `requiredMessage` on a field nothing requires — fields are optional unless `required: true`, so it is never shown and an empty answer is sent",
+		fix: "`required: true` on the field, or no message"
+	},
 	"form-control-name-taken": {
 		kind: "warned",
 		means: "two controls in one form with one name — one overwrites the other",
@@ -8983,7 +9005,7 @@ var sourceRow = (listSource, items) => {
 		index: pathTo(`${listSource}.index`, 0)
 	};
 };
-var e$38 = [
+var e$39 = [
 	"variables",
 	"navigation",
 	"auth",
@@ -8993,7 +9015,7 @@ var e$38 = [
 	"flags",
 	"computed"
 ];
-e$38.filter((e) => e !== "state" && e !== "computed");
+e$39.filter((e) => e !== "state" && e !== "computed");
 var t$30 = {
 	DISPLAY: "display",
 	FLEX_WRAP: "flex-wrap",
@@ -9199,7 +9221,7 @@ Object.values(t$30).map((e) => ({
 	label: e
 }));
 t$30.DISPLAY, t$30.FLEX_WRAP, t$30.FLEX_DIRECTION, t$30.ALIGN_ITEMS, t$30.JUSTIFY_ITEMS, t$30.JUSTIFY_CONTENT, t$30.ALIGN_CONTENT, t$30.ROW_GAP, t$30.COLUMN_GAP, t$30.GRID_ROW_GAP, t$30.GRID_COLUMN_GAP, t$30.GRID_TEMPLATE_AREAS, t$30.GRID_TEMPLATE_COLUMNS, t$30.GRID_TEMPLATE_ROWS, t$30.GRID_AUTO_FLOW, t$30.GRID_AUTO_ROWS, t$30.GRID_AUTO_COLUMNS, t$30.GRID_ROW_START, t$30.GRID_COLUMN_START, t$30.GRID_ROW_END, t$30.GRID_COLUMN_END, t$30.ALIGN_SELF, t$30.JUSTIFY_SELF, t$30.ORDER, t$30.FLEX_GROW, t$30.FLEX_SHRINK, t$30.FLEX_BASIS, t$30.LIST_STYLE, t$30.LIST_STYLE_TYPE, t$30.LIST_STYLE_POSITION, t$30.LIST_STYLE_IMAGE, t$30.BACKGROUND_COLOR, t$30.BACKGROUND_IMAGE, t$30.BACKGROUND_POSITION, t$30.BACKGROUND_SIZE, t$30.BACKGROUND_CLIP, t$30.BACKGROUND_ORIGIN, t$30.BACKGROUND_REPEAT, t$30.BACKGROUND_ATTACHMENT, t$30.BACKGROUND_BLEND_MODE, t$30.MASK_IMAGE, t$30.MASK_SIZE, t$30.MASK_POSITION, t$30.MASK_REPEAT, t$30.MASK_COMPOSITE, t$30.WEBKIT_MASK_IMAGE, t$30.BORDER_TOP_STYLE, t$30.BORDER_TOP_WIDTH, t$30.BORDER_TOP_COLOR, t$30.BORDER_BOTTOM_STYLE, t$30.BORDER_BOTTOM_WIDTH, t$30.BORDER_BOTTOM_COLOR, t$30.BORDER_LEFT_STYLE, t$30.BORDER_LEFT_WIDTH, t$30.BORDER_LEFT_COLOR, t$30.BORDER_RIGHT_STYLE, t$30.BORDER_RIGHT_WIDTH, t$30.BORDER_RIGHT_COLOR, t$30.BORDER_TOP_LEFT_RADIUS, t$30.BORDER_TOP_RIGHT_RADIUS, t$30.BORDER_BOTTOM_LEFT_RADIUS, t$30.BORDER_BOTTOM_RIGHT_RADIUS, t$30.BORDER_COLLAPSE, t$30.BORDER_SPACING, t$30.TABLE_LAYOUT, t$30.OPACITY, t$30.VISIBILITY, t$30.CURSOR, t$30.TRANSITION, t$30.TRANSITION_PROPERTY, t$30.TRANSITION_DURATION, t$30.TRANSITION_TIMING_FUNCTION, t$30.TRANSITION_DELAY, t$30.TRANSITION_BEHAVIOR, t$30.ANIMATION, t$30.ANIMATION_NAME, t$30.ANIMATION_DURATION, t$30.ANIMATION_TIMING_FUNCTION, t$30.ANIMATION_DELAY, t$30.ANIMATION_ITERATION_COUNT, t$30.ANIMATION_DIRECTION, t$30.ANIMATION_FILL_MODE, t$30.ANIMATION_PLAY_STATE, t$30.ANIMATION_TIMELINE, t$30.ANIMATION_RANGE, t$30.BOX_SHADOW, t$30.FILTER, t$30.BACKDROP_FILTER, t$30.MIX_BLEND_MODE, t$30.ISOLATION, t$30.CLIP_PATH, t$30.TRANSFORM, t$30.TRANSFORM_ORIGIN, t$30.TRANSLATE, t$30.ROTATE, t$30.SCALE, t$30.TRANSFORM_STYLE, t$30.PERSPECTIVE, t$30.PERSPECTIVE_ORIGIN, t$30.BACKFACE_VISIBILITY, t$30.WILL_CHANGE, t$30.OUTLINE_WIDTH, t$30.OUTLINE_STYLE, t$30.OUTLINE_COLOR, t$30.OUTLINE_OFFSET, t$30.POINTER_EVENTS, t$30.USER_SELECT, t$30.TOUCH_ACTION, t$30.RESIZE, t$30.APPEARANCE, t$30.SCROLL_BEHAVIOR, t$30.OVERSCROLL_BEHAVIOR, t$30.SCROLL_SNAP_TYPE, t$30.SCROLL_SNAP_ALIGN, t$30.SCROLL_SNAP_STOP, t$30.SCROLL_PADDING_TOP, t$30.SCROLL_MARGIN_TOP, t$30.ACCENT_COLOR, t$30.CARET_COLOR, t$30.COLOR_SCHEME, t$30.POSITION, t$30.FLOAT, t$30.CLEAR, t$30.Z_INDEX, t$30.TOP, t$30.BOTTOM, t$30.LEFT, t$30.RIGHT, t$30.BOX_SIZING, t$30.ASPECT_RATIO, t$30.WIDTH, t$30.HEIGHT, t$30.MIN_WIDTH, t$30.MIN_HEIGHT, t$30.MAX_WIDTH, t$30.MAX_HEIGHT, t$30.OVERFLOW, t$30.OVERFLOW_X, t$30.OVERFLOW_Y, t$30.SCROLLBAR_WIDTH, t$30.SCROLLBAR_COLOR, t$30.CONTAINER_TYPE, t$30.CONTENT, t$30.CONTAINER_NAME, t$30.OBJECT_FIT, t$30.OBJECT_POSITION, t$30.COLUMN_WIDTH, t$30.COLUMN_COUNT, t$30.MARGIN_TOP, t$30.MARGIN_BOTTOM, t$30.MARGIN_LEFT, t$30.MARGIN_RIGHT, t$30.PADDING_TOP, t$30.PADDING_BOTTOM, t$30.PADDING_LEFT, t$30.PADDING_RIGHT, t$30.FONT_FAMILY, t$30.FONT_WEIGHT, t$30.FONT_SIZE, t$30.LINE_HEIGHT, t$30.COLOR, t$30.TEXT_ALIGN, t$30.FONT_STYLE, t$30.FONT_VARIANT, t$30.FONT_VARIANT_NUMERIC, t$30.FONT_FEATURE_SETTINGS, t$30.TEXT_DECORATION, t$30.TEXT_DECORATION_LINE, t$30.TEXT_DECORATION_COLOR, t$30.TEXT_DECORATION_STYLE, t$30.TEXT_DECORATION_THICKNESS, t$30.TEXT_UNDERLINE_OFFSET, t$30.LETTER_SPACING, t$30.WORD_SPACING, t$30.TEXT_INDENT, t$30.TEXT_TRANSFORM, t$30.DIRECTION, t$30.WRITING_MODE, t$30.TEXT_ORIENTATION, t$30.WHITE_SPACE, t$30.TEXT_WRAP, t$30.WORD_BREAK, t$30.OVERFLOW_WRAP, t$30.HYPHENS, t$30.VERTICAL_ALIGN, t$30.TEXT_OVERFLOW, t$30.TEXT_SHADOW, t$30.LINE_CLAMP, t$30.WEBKIT_LINE_CLAMP, t$30.WEBKIT_BOX_ORIENT, t$30.WEBKIT_TEXT_FILL_COLOR, t$30.WEBKIT_BACKGROUND_CLIP, t$30.BOX_DECORATION_BREAK, t$30.WEBKIT_BOX_DECORATION_BREAK, t$30.FILL, t$30.STROKE, t$30.STROKE_WIDTH;
-[...e$38];
+[...e$39];
 /** Both binding forms as one list. The map form targets attributes, which is what nearly every binding does. */
 var toBindingSpecs = (bind) => Array.isArray(bind) ? bind : Object.entries(bind).map(([to, source]) => ({
 	to,
@@ -9511,20 +9533,20 @@ var tabContainerItem = defineElement(B$2.TabContainerItem);
 var text$1 = defineElement(B$2.Text);
 var themeToggle = defineElement(B$2.ThemeToggle);
 var video = defineElement(B$2.Video);
-var e$32 = (e) => typeof e == "object" && !!e && !Array.isArray(e);
+var e$33 = (e) => typeof e == "object" && !!e && !Array.isArray(e);
 var STEP_TYPES = [
 	"trigger",
 	"globalCallback",
 	"callback",
 	"utility"
 ];
-var e$30 = {
+var e$31 = {
 	desktop: 1024,
 	tablet: 768,
 	mobile: 0
 };
-var t$26 = (t) => e$30[t] === 0 ? "0" : `${String(e$30[t] / 16)}rem`;
-var e$29 = [
+var t$26 = (t) => e$31[t] === 0 ? "0" : `${String(e$31[t] / 16)}rem`;
+var e$30 = [
 	"desktop",
 	"tablet",
 	"mobile"
@@ -9532,14 +9554,14 @@ var e$29 = [
 Object.values(/* @__PURE__ */ function(e) {
 	return e.COLOR = "color", e.SPACING = "spacing", e.SHADOW = "shadow", e.CUSTOM = "custom", e;
 }({}));
-var e$27 = {
+var e$28 = {
 	"motion-reduce": "@media (prefers-reduced-motion: reduce)",
 	"motion-safe": "@media (prefers-reduced-motion: no-preference)"
 };
-var t$23 = Object.keys(e$27);
-var r$18 = (t) => Object.hasOwn(e$27, t);
-var i$17 = String.raw`\d+(?:\.\d+)?(?:px|rem|em|ch)`;
-var a$15 = String.raw`\((?:min|max)-width:\s*${i$17}\)`;
+var t$23 = Object.keys(e$28);
+var r$18 = (t) => Object.hasOwn(e$28, t);
+var i$18 = String.raw`\d+(?:\.\d+)?(?:px|rem|em|ch)`;
+var a$15 = String.raw`\((?:min|max)-width:\s*${i$18}\)`;
 var o$17 = new RegExp(String.raw`^container(?:\s+(?<name>-?[_a-zA-Z][\w-]*))?\s+(?<query>${a$15}(?:\s+and\s+${a$15})?)$`);
 var s$15 = (e) => {
 	let t = o$17.exec(e.trim());
@@ -9553,7 +9575,7 @@ var c$12 = (e) => {
 	let t = s$15(e);
 	if (t) return t.name ? `container ${t.name} ${t.query}` : `container ${t.query}`;
 };
-var e$26 = [
+var e$27 = [
 	"before",
 	"after",
 	"marker",
@@ -9572,7 +9594,7 @@ var t$22 = {
 	selection: "::selection"
 };
 var n$19 = (e) => Object.hasOwn(t$22, e);
-var i$16 = [
+var i$17 = [
 	"before",
 	"after",
 	"marker"
@@ -9633,7 +9655,7 @@ var l$8 = {
 		...c$11
 	]
 };
-var u$7 = (e, t) => {
+var u$8 = (e, t) => {
 	let n = l$8[e];
 	return !n || t.startsWith("--") || n.includes(t);
 };
@@ -9672,7 +9694,7 @@ var m$4 = (e) => {
 	let t = p$8(e.trim());
 	return t?.length ? t.every((e) => /^(["']).*\1$/s.test(e) || d$7.has(e.toLowerCase()) || f$5.test(e) && e.endsWith(")")) : !1;
 };
-var e$25 = [
+var e$26 = [
 	"hover",
 	"focus",
 	"focus-visible",
@@ -9707,7 +9729,7 @@ var r$16 = {
 	disabled: 13,
 	hidden: 14
 };
-var i$15 = (e) => Object.hasOwn(r$16, e);
+var i$16 = (e) => Object.hasOwn(r$16, e);
 var l$7 = {
 	current: ":is([aria-current]:not([aria-current=\"false\"]),[aria-pressed=\"true\"],[aria-selected=\"true\"],[role=\"tabpanel\"]:not([hidden]))",
 	expanded: "[aria-expanded=\"true\"]",
@@ -9717,7 +9739,7 @@ var l$7 = {
 	odd: ":nth-child(odd)",
 	even: ":nth-child(even)"
 };
-var u$6 = (e) => (i$15(e) ? l$7[e] : void 0) ?? `:${e}`;
+var u$7 = (e) => (i$16(e) ? l$7[e] : void 0) ?? `:${e}`;
 var p$7 = (e) => e === ">";
 var n$16 = (e) => {
 	let t = typeof e == "string" && e.trim() !== "" ? Number(e) : e;
@@ -9753,7 +9775,7 @@ var r$13 = {
 	del: "delete",
 	return: "enter"
 };
-var i$12 = /* @__PURE__ */ new Set([
+var i$13 = /* @__PURE__ */ new Set([
 	"escape",
 	"enter",
 	"tab",
@@ -9786,7 +9808,7 @@ var o$11 = (e, t) => {
 	}
 	if (u.length !== 1) return { problem: `"${e.trim()}" names ${u.length ? `${u.length} keys (${u.join(", ")})` : "no key, only modifiers"}: a shortcut is modifiers and ONE key, like "shift+f"` };
 	let [d] = u;
-	return d.length !== 1 && !i$12.has(d) ? { problem: `"${d}" in "${e.trim()}" is not a key: use one character ("f", "?", "+") or a key's name (${[...i$12].slice(0, 15).join(", ")}, f1…f12)` } : { combo: a$10(l, d) };
+	return d.length !== 1 && !i$13.has(d) ? { problem: `"${d}" in "${e.trim()}" is not a key: use one character ("f", "?", "+") or a key's name (${[...i$13].slice(0, 15).join(", ")}, f1…f12)` } : { combo: a$10(l, d) };
 };
 var s$9 = (e, t = !1) => {
 	let n = e.split(",").map((e) => o$11(e, t));
@@ -9839,7 +9861,7 @@ var steps_exports$1 = /* @__PURE__ */ __exportAll({
 * the builders useless for exactly the flows that matter most.
 */
 var builtinTrigger = (trigger) => {
-	if (Object.hasOwn(e$40, trigger)) return e$40[trigger];
+	if (Object.hasOwn(e$41, trigger)) return e$41[trigger];
 	return Object.hasOwn(typeTriggerDefinitions, trigger) ? typeTriggerDefinitions[trigger] : void 0;
 };
 var on = (trigger, params = {}) => {
@@ -10150,7 +10172,7 @@ var carouselGoTo = (target, index) => carouselStep(target, "goTo", "Go To Slide"
 var carouselPlay = (target) => carouselStep(target, "play", "Play");
 /** The carousel `target` stops moving by itself until it is told to play. */
 var carouselPause = (target) => carouselStep(target, "pause", "Pause");
-var e$21 = {
+var e$22 = {
 	origin: "Requests to the same site",
 	all: "All cached requests",
 	elements: "Only these containers",
@@ -10162,7 +10184,7 @@ var t$16 = (t, n = () => !0) => ({
 		description: "What to refresh once the write succeeded, so the page shows the new data: the requests to the same site, every provider on the page, only the api containers named in `invalidateElements`, or none for a step that only reads. Server-driven containers are refreshed too, asking the server past its cache. Containers on screen ask again at once; the rest when they are shown.",
 		default: t[0],
 		options: [...t],
-		optionLabels: Object.fromEntries(t.map((t) => [t, e$21[t]])),
+		optionLabels: Object.fromEntries(t.map((t) => [t, e$22[t]])),
 		label: "Refresh cached requests",
 		canBind: !1,
 		when: n
@@ -10242,7 +10264,7 @@ var t$15 = {
 		preview: { cancelled: "" }
 	}
 };
-var e$20 = {
+var e$21 = {
 	login: {
 		source: "auth",
 		title: "Auth Login",
@@ -10328,7 +10350,7 @@ var e$20 = {
 		params: {}
 	}
 };
-var e$19 = { hostAction: {
+var e$20 = { hostAction: {
 	source: "host",
 	title: "Host Action",
 	strictParams: !0,
@@ -10345,7 +10367,7 @@ var e$19 = { hostAction: {
 		}
 	}
 } };
-var e$18 = { navigate: {
+var e$19 = { navigate: {
 	source: "navigation",
 	title: "Navigate",
 	strictParams: !0,
@@ -10372,7 +10394,7 @@ var e$18 = { navigate: {
 		}
 	}
 } };
-var e$17 = { invalidateQueries: {
+var e$18 = { invalidateQueries: {
 	source: "queries",
 	title: "Invalidate Queries",
 	strictParams: !0,
@@ -10605,11 +10627,11 @@ var BUILTIN_GLOBAL_CALLBACKS = {
 			default: ""
 		} }
 	},
-	...e$19,
-	...e$18,
 	...e$20,
+	...e$19,
+	...e$21,
 	...t$15,
-	...e$17
+	...e$18
 };
 var steps_exports = /* @__PURE__ */ __exportAll({
 	SET_STATE_TYPES: () => SET_STATE_TYPES,
@@ -10848,10 +10870,11 @@ var t$14 = (e) => {
 var t$13 = "[A-Za-z_][A-Za-z0-9_]*";
 RegExp(`^${t$13}$`);
 RegExp(`^!?${t$13}$`);
-var e$8 = "/data/";
-var e$6 = (e) => typeof e == "string" && /\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}/.test(e);
-var i$4 = (e) => `value|round(0, '${e}')`;
-i$4("floor"), i$4("ceil");
+var e$9 = "/data/";
+var e$7 = (e) => typeof e == "string" && /\{\{[\s\S]*?\}\}|\{%[\s\S]*?%\}/.test(e);
+var i$5 = (e) => `value|round(0, '${e}')`;
+i$5("floor"), i$5("ceil");
+new Set(Object.entries(g$4.content.defaultStyle.subTypes).filter(([, variant]) => "field" in variant.style).map(([subType]) => subType));
 /** A container with no tag of its own named: the row `list-row-not-li` makes an `<li>` without asking. */
 var isPlainContainer = (element) => element.definition.type === "container" && (element.attributes.subType === void 0 || element.attributes.subType === "div");
 new Set(STEP_TYPES);
@@ -11010,7 +11033,7 @@ Array.from({ length: 9 }, (e, t) => ({
 Object.entries(AUTHORING_CODES).filter(([, entry]) => entry.kind === "suggested").map(([code]) => code);
 var URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 /** A page target that is really a URL: the one reading of `mailto:`/`https:` a page-mode link can never mean. */
-var isUrlTarget = (target) => typeof target === "string" && !e$6(target) && URL_SCHEME.test(target);
+var isUrlTarget = (target) => typeof target === "string" && !e$7(target) && URL_SCHEME.test(target);
 var isRoot = (element) => !element.definition.parentId;
 var stepsOf$1 = (element) => Object.values(element.definition.interactions ?? {});
 /**
@@ -11021,7 +11044,7 @@ var settleUnknownKeys = (record, known, what, on, report, defaults = {}) => {
 	for (const key of Object.keys(record)) {
 		if (known.includes(key)) continue;
 		const wrapped = record[key];
-		if (e$32(wrapped) && Object.keys(wrapped).length > 0 && Object.keys(wrapped).every((inner) => known.includes(inner))) {
+		if (e$33(wrapped) && Object.keys(wrapped).length > 0 && Object.keys(wrapped).every((inner) => known.includes(inner))) {
 			const inners = Object.keys(wrapped);
 			if (inners.every((inner) => record[inner] === void 0 || record[inner] === defaults[inner])) {
 				Object.assign(record, wrapped);
@@ -11302,7 +11325,7 @@ t$4.map((e) => {
 		fieldOf: (e) => t.get(e)
 	};
 });
-Object.fromEntries(e$29.map((e) => [e, t$26(e)]));
+Object.fromEntries(e$30.map((e) => [e, t$26(e)]));
 /** Every kebab-case CSS property Plitzi's style engine understands. Values written to a definition must use these
 *  exact keys — camelCase or unknown keys are rejected. */
 var cssProperties = Array.from(new Set(Object.values(t$30))).sort();
@@ -12087,7 +12110,7 @@ var byProperty = (rules) => {
 	return responsive;
 };
 /** The states a selector can react to — the closed list the style editor offers, read from where it is declared. */
-var STYLE_STATES = e$25;
+var STYLE_STATES = e$26;
 var STYLE_STATE_SET = new Set(STYLE_STATES);
 var RULE_SET_KEYS = /* @__PURE__ */ new Set([
 	"css",
@@ -12151,11 +12174,11 @@ var assertPseudo = (pseudo, part) => {
 	const ruleSets = partRuleSets(part);
 	for (const rules of ruleSets) for (const [property, value] of Object.entries(rules)) {
 		if (property === "content") {
-			if (!i$16.includes(pseudo)) throw new AuthoringError("style-pseudo-content", `\`content\` on \`::${pseudo}\` draws nothing: only ${i$16.map((name) => `\`::${name}\``).join(", ")} take one.`);
+			if (!i$17.includes(pseudo)) throw new AuthoringError("style-pseudo-content", `\`content\` on \`::${pseudo}\` draws nothing: only ${i$17.map((name) => `\`::${name}\``).join(", ")} take one.`);
 			if (!m$4(String(value))) throw new AuthoringError("style-pseudo-content", `\`content: ${String(value)}\` on \`::${pseudo}\` is not text CSS can read, so nothing is drawn. Text goes in quotes inside the string — \`content: '"${String(value).replace(/"/g, "\\\"")}"'\` — and an empty box is \`'""'\`; \`counter()\`, \`attr()\` and \`url()\` are written as they are.`);
 			continue;
 		}
-		if (!u$7(pseudo, property)) throw new AuthoringError("style-pseudo-property", `\`${property}\` on \`::${pseudo}\` is dropped by every browser — \`::${pseudo}\` honours ${(l$8[pseudo] ?? []).map((name) => `\`${name}\``).join(", ")}. Style the element itself for the rest.`);
+		if (!u$8(pseudo, property)) throw new AuthoringError("style-pseudo-property", `\`${property}\` on \`::${pseudo}\` is dropped by every browser — \`::${pseudo}\` honours ${(l$8[pseudo] ?? []).map((name) => `\`${name}\``).join(", ")}. Style the element itself for the rest.`);
 	}
 	if (a$14.includes(pseudo) && !ruleSets.some((rules) => Object.hasOwn(rules, "content"))) throw new AuthoringError("style-pseudo-content", `\`::${pseudo}\` has no \`content\`, so the browser draws nothing for it. Give it one — \`content: '""'\` for an empty box — in its rules or in a state's.`);
 };
@@ -12163,7 +12186,7 @@ var toPseudos = (pseudos) => {
 	const parts = /* @__PURE__ */ new Map();
 	for (const [name, spec] of Object.entries(pseudos ?? {})) {
 		const bare = name.replace(/^:+/, "");
-		if (!n$19(name)) throw new AuthoringError("style-pseudo-unknown", `Unknown pseudo-element "${name}"${n$19(bare) ? ` — write it without the colons, "${bare}"` : didYouMean(bare, e$26)}. A class dresses ${e$26.join(", ")}.`);
+		if (!n$19(name)) throw new AuthoringError("style-pseudo-unknown", `Unknown pseudo-element "${name}"${n$19(bare) ? ` — write it without the colons, "${bare}"` : didYouMean(bare, e$27)}. A class dresses ${e$27.join(", ")}.`);
 		const part = partOf(spec);
 		const rules = {
 			base: toResponsive(part.css),
@@ -13789,7 +13812,7 @@ var createTw = ({ colors = {} } = {}) => (classes) => {
 	return rules;
 };
 createTw();
-[...new Set(STYLE_STATES.filter((state) => state !== "hidden"))].filter((state) => u$6(state) !== `:${state}`);
+[...new Set(STYLE_STATES.filter((state) => state !== "hidden"))].filter((state) => u$7(state) !== `:${state}`);
 new Set("break case catch class const continue debugger default delete do else enum export extends false finally for function if import in instanceof new null return super switch this throw true try typeof var void while with yield let static implements interface package private protected public await element styles".split(" "));
 new Set(STYLE_STATES);
 new Set([
@@ -14972,7 +14995,7 @@ var V$1 = (e) => {
 	for (let n of e.filter((e) => x$2.test(e))) t.set(M$1(n), [...t.get(M$1(n)) ?? [], n]);
 	return [...t].flatMap(([e, t]) => t.slice(1).map((n) => y$1("plugin-type-taken", `${o$1$1}/${n}/`, `${o$1$1}/${t[0]}/ and ${o$1$1}/${n}/ are both the plugin ${e}: the server registers a folder by its name with a small first letter, and keeps one.`, `Put them in one folder, or rename one: git mv ${o$1$1}/${n} ${o$1$1}/<AnotherName>`)));
 };
-var H$1 = (t) => e$32(t.assets) ? Object.values(t.assets).flatMap((t) => e$32(t) && typeof t.src == "string" && typeof t.type == "string" ? [{
+var H$1 = (t) => e$33(t.assets) ? Object.values(t.assets).flatMap((t) => e$33(t) && typeof t.src == "string" && typeof t.type == "string" ? [{
 	src: t.src,
 	type: t.type,
 	isMain: t.isMain === !0
@@ -14986,7 +15009,7 @@ var U$1 = (t, n) => {
 	} catch (e) {
 		return { problem: y$1("vendor-manifest-invalid", i, `${i} is not JSON (${e instanceof Error ? e.message : String(e)}), so ${n} does not run.`, a) };
 	}
-	if (!e$32(o)) return { problem: y$1("vendor-manifest-invalid", i, `${i} is not a manifest, so ${n} does not run.`, a) };
+	if (!e$33(o)) return { problem: y$1("vendor-manifest-invalid", i, `${i} is not a manifest, so ${n} does not run.`, a) };
 	let s = H$1(o), l = s.find((e) => e.type === "script" && e.isMain) ?? s.find((e) => e.type === "script");
 	if (!l) return { problem: y$1("vendor-script-missing", i, `${i} names no script to run, so ${n} does not run.`, a) };
 	if (!C$1(t, path.posix.join(r, l.src), "file")) return { problem: y$1("vendor-script-missing", i, `${i} names ${l.src} as the script to run, and ${r}/${l.src} is not there, so ${n} does not run.`, a) };
@@ -15110,7 +15133,7 @@ var ce$1 = (e, t) => {
 var Z$1 = (t) => {
 	try {
 		let n = JSON.parse(readFileSync(path.join(t, "package.json"), "utf-8"));
-		return e$32(n) && [n.dependencies, n.devDependencies].some((t) => e$32(t) && "@plitzi/sdk-server" in t);
+		return e$33(n) && [n.dependencies, n.devDependencies].some((t) => e$33(t) && "@plitzi/sdk-server" in t);
 	} catch {
 		return !1;
 	}
@@ -15233,7 +15256,7 @@ var publicData = (folder) => fileReader(folder, "/");
 * never serves (`dataDir`) — for `authorSpace`'s `serverData`: bindings are held to the file, and a provider reading
 * one from the browser is refused.
 */
-var projectData = (folder) => fileReader(folder, e$8);
+var projectData = (folder) => fileReader(folder, e$9);
 /**
 * The declaration of every plugin under `folder` — `src/plugins/<Name>/declaration.ts`, its default export — for
 * `authorSpace`'s `plugins`: what each fires, answers and reads. Found by folder, as the server finds the plugins
@@ -15255,7 +15278,7 @@ var pluginDeclarations = async (folder) => {
 var manifestOf$1 = (file) => {
 	try {
 		const manifest = JSON.parse(readFileSync(file, "utf-8"));
-		return e$32(manifest) ? manifest : {};
+		return e$33(manifest) ? manifest : {};
 	} catch {
 		return {};
 	}
@@ -15266,7 +15289,7 @@ var manifestOf$1 = (file) => {
 */
 var builtPluginTypes = (folder) => existsSync(folder) ? readdirSync(folder, { withFileTypes: true }).filter((entry) => entry.isDirectory()).sort((a, b) => a.name.localeCompare(b.name)).flatMap((entry) => {
 	const { pluginSchema } = manifestOf$1(path.join(folder, entry.name, d$1));
-	return [entry.name, ...e$32(pluginSchema) ? Object.keys(pluginSchema) : []];
+	return [entry.name, ...e$33(pluginSchema) ? Object.keys(pluginSchema) : []];
 }) : [];
 /**
 * The stylesheets of the plugins under `folder` — every `.css` in a plugin's folder, at any depth — as their text, for
@@ -15335,7 +15358,7 @@ var importProjectModule = async (file, root) => {
 * What the module exports as `space`, taken as a declaration when it has the shape of one. `authorSpace` checks the
 * rest of it, field by field, and says what is wrong — so this only has to tell a space from anything else.
 */
-var isSpaceSpec = (value) => e$32(value) && typeof value.name === "string" && typeof value.permanentUrl === "string" && Array.isArray(value.pages);
+var isSpaceSpec = (value) => e$33(value) && typeof value.name === "string" && typeof value.permanentUrl === "string" && Array.isArray(value.pages);
 /**
 * `projectSpace` of the project at `root`, held to the same checks: for a tool that works on a project from another
 * folder — the CLI, run anywhere inside one. A project's own code calls `projectSpace()` or `authorProjectSpace()`.
@@ -15343,7 +15366,7 @@ var isSpaceSpec = (value) => e$32(value) && typeof value.name === "string" && ty
 var projectSpaceAt = async (root) => {
 	const authoring = await projectAuthoringAt(root);
 	const module = await importProjectModule(l$2(root, a$1, process.argv[1]), root);
-	const space = e$32(module) ? module.space : void 0;
+	const space = e$33(module) ? module.space : void 0;
 	if (!isSpaceSpec(space)) throw new ProjectSpaceError(a$1);
 	return {
 		space,
@@ -16294,7 +16317,8 @@ var unifiedDiff = (file, before, after, context = 2) => {
 *   is left to the author, said with the command that would take the registry's.
 * - `skills`: `.claude/skills/plitzi-*` from the packages installed, each replaced whole.
 * - `renames`: a name a version renamed, still written in the source (`canTemplate`), at its file and line — and with
-*   `--write`, renamed.
+*   `--write`, renamed. With it, what a version changed that the source may count on — a `formControl` written
+*   before fields became optional — at its file and line, for a project last upgraded before: said, never written.
 *
 * Shown by default; `--write` makes it. What the space is — its pages, plugins, data — is the project's, never named.
 *
@@ -16355,6 +16379,42 @@ var renamesIn = (file, text) => RENAMES.filter((rename) => !rename.from || impor
 	since: rename.since,
 	what: rename.what
 }] : []));
+/** Before this version a `formControl` was required unless it said `required: false`; from it, optional unless `true`. */
+var OPTIONAL_FIELDS_SINCE = "0.38.9";
+/** The text of the call whose `(` is at `open`, up to its `)` — strings skipped, so a `)` inside one closes nothing. */
+var callArguments = (text, open) => {
+	let depth = 0;
+	let quote;
+	for (let at = open; at < text.length; at++) {
+		const char = text[at];
+		if (quote && char === "\\") {
+			at++;
+			continue;
+		}
+		if (quote) {
+			quote = char === quote ? void 0 : quote;
+			continue;
+		}
+		if (/['"`]/.test(char)) quote = char;
+		else if (char === "(") depth++;
+		else if (char === ")" && --depth === 0) return text.slice(open + 1, at);
+	}
+	return text.slice(open + 1);
+};
+/**
+* A `formControl(…)` that writes no `required`: one that, written before fields became optional, was required, and now
+* takes an empty answer. Said, never written — whether a field must be answered is the space's to say. Found as written
+* in the call: one built by a helper of the project's own is the helper's to look at.
+*/
+var optionalFieldsIn = (file, text) => [...text.matchAll(/\bformControl\(/g)].flatMap((match) => {
+	const open = match.index + match[0].length - 1;
+	return /\brequired\s*:/.test(callArguments(text, open)) ? [] : [{
+		file,
+		line: text.slice(0, match.index).split("\n").length,
+		since: OPTIONAL_FIELDS_SINCE,
+		what: "a formControl with no `required` is optional now — write `required: true` if it must be answered"
+	}];
+});
 /** The lowest version a range allows, as numbers: `^0.38.2` → [0, 38, 2]. */
 var floorOf$1 = (range) => {
 	const match = /(\d+)\.(\d+)\.(\d+)/.exec(range);
@@ -16451,8 +16511,20 @@ var readText$1 = async (file) => {
 		return;
 	}
 };
+var holdsFiles = async (folder) => {
+	try {
+		return (await fs.readdir(folder)).length > 0;
+	} catch {
+		return false;
+	}
+};
 var planFiles = async (root, files, recorded, take) => Promise.all(Object.entries(files).map(async ([file, ours]) => {
 	const yours = await readText$1(path.join(root, file));
+	if (yours === void 0 && path.basename(file) === ".gitkeep" && await holdsFiles(path.join(root, file, ".."))) return {
+		file,
+		status: "current",
+		ours
+	};
 	if (yours === void 0) return {
 		file,
 		status: "added",
@@ -16611,6 +16683,10 @@ var reportText$3 = (report, install) => {
 		lines.push(report.renames.length === 0 ? chalk.green("renames: none written") : "renames:");
 		lines.push(...report.renames.map((found) => chalk.yellow(`  ${report.write ? "~" : "!"} ${found.file}:${String(found.line)} ${found.name} → ${found.to} (${found.since}: ${found.what})`)));
 	}
+	if (report.changes && report.changes.length > 0) {
+		lines.push("changes the source may count on (look, then decide — never written):");
+		lines.push(...report.changes.map((found) => chalk.yellow(`  ! ${found.file}:${String(found.line)} (${found.since}) ${found.what}`)));
+	}
 	return lines.join("\n");
 };
 var upgrade = async (parts, options) => {
@@ -16707,8 +16783,11 @@ var upgrade = async (parts, options) => {
 	}
 	if (wanted.has("renames")) {
 		const found = [];
+		const changes = [];
+		const before = record === void 0 || isBelow(record.cli, OPTIONAL_FIELDS_SINCE);
 		for (const file of await sourceFiles(root)) {
 			const text = await readText$1(path.join(root, file));
+			if (before && text !== void 0) changes.push(...optionalFieldsIn(file, text));
 			const inFile = text === void 0 ? [] : renamesIn(file, text);
 			if (write && text !== void 0 && inFile.length > 0) {
 				const renamed = [...new Set(inFile.map((entry) => entry.name))].reduce((result, name) => result.replace(wordOf(name), RENAMES.find((rename) => rename.name === name)?.to ?? name), text);
@@ -16717,6 +16796,7 @@ var upgrade = async (parts, options) => {
 			found.push(...inFile);
 		}
 		report.renames = found;
+		report.changes = changes;
 	}
 	console.log(options.json ? JSON.stringify(report) : reportText$3(report, installCommand(manager)));
 	if (report.packages?.install === "failed") {
@@ -18389,15 +18469,32 @@ var checkAccount = async (root, username) => {
 		password
 	};
 };
+/** Signs the page's browser in as the account, through the server's `/auth` routes: what went wrong, or nothing. */
+var signInAs = async (page, origin, account) => {
+	const answer = await page.request.post(`${origin}${SIGN_IN_PATH}`, { data: {
+		username: account.username,
+		password: account.password
+	} });
+	if (answer.ok()) return;
+	return answer.status() === 404 ? `nothing answers at ${SIGN_IN_PATH}: --as signs in through the routes createServer({ auth }) mounts there` : `${account.username} was not signed in (${String(answer.status())}): ${(await answer.text()).slice(0, 200)} — check ${CHECK_PASSWORD_ENV} in .env`;
+};
+var withoutTrailingSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+/** Where the page landed, when that is not the path it was opened at — sent to the sign-in, most often. */
+var sentElsewhere = (page, pathname) => {
+	const landed = new URL(page.url()).pathname;
+	const asked = new URL(pathname, page.url()).pathname;
+	return withoutTrailingSlash(landed) === withoutTrailingSlash(asked) ? void 0 : landed;
+};
 /** The space the project declares, authored. Only for one written here. */
 var projectSpace = async (root) => {
 	const project = await loadProjectSpace(root);
 	if ("problem" in project) return { problem: `${project.problem} There is nothing to check the page against.` };
 	try {
-		const { handles, schema } = authorSpace(project.space, project.authoring);
+		const { handles, schema, style } = authorSpace(project.space, project.authoring);
 		return {
 			handles,
-			schema
+			schema,
+			schemes: SCHEMES.filter((scheme) => style.theme.schemes.includes(scheme))
 		};
 	} catch (error) {
 		return { problem: `The space does not author — npm run author says why: ${error instanceof Error ? error.message.split("\n")[0] : String(error)}` };
@@ -18813,17 +18910,12 @@ var checkAt = async (browser, origin, pathname, width, scheme, authored, asked,
 		devTools: false,
 		lists: {}
 	});
-	if (account) {
-		const signedIn = await page.request.post(`${origin}${SIGN_IN_PATH}`, { data: {
-			username: account.username,
-			password: account.password
-		} });
-		if (!signedIn.ok()) return unchecked({
-			code: "not-signed-in",
-			message: signedIn.status() === 404 ? `nothing answers at ${SIGN_IN_PATH}: --as signs in through the routes createServer({ auth }) mounts there` : `${account.username} was not signed in (${String(signedIn.status())}): ${(await signedIn.text()).slice(0, 200)} — check ${CHECK_PASSWORD_ENV} in .env`,
-			width
-		});
-	}
+	const notSignedIn = account && await signInAs(page, origin, account);
+	if (notSignedIn) return unchecked({
+		code: "not-signed-in",
+		message: notSignedIn,
+		width
+	});
 	const consoleErrors = [];
 	const failedRequests = [];
 	page.on("pageerror", (error) => consoleErrors.push(error.message));
@@ -18857,8 +18949,8 @@ var checkAt = async (browser, origin, pathname, width, scheme, authored, asked,
 		consoleErrors,
 		failedRequests
 	};
-	const landed = new URL(page.url()).pathname;
-	if (withoutTrailingSlash(landed) !== withoutTrailingSlash(new URL(`${origin}${pathname}`).pathname)) return {
+	const landed = sentElsewhere(page, pathname);
+	if (landed) return {
 		...unchecked({
 			code: "redirected",
 			message: account ? `${pathname} sent the browser to ${landed}, signed in as ${account.username}: that account may not see it` : `${pathname} sent the browser to ${landed} — what a page for signed-in visitors does: \`plitzi page check ${pathname} --as <username>\` signs in first, the password in ${CHECK_PASSWORD_ENV} in .env`,
@@ -18986,7 +19078,7 @@ var clickedText = (clicked) => {
 	];
 };
 var reportText$2 = (report, asked) => {
-	const head = `${report.path} at ${String(report.width)} px`;
+	const head = `${report.path} at ${String(report.width)} px${report.scheme ? `, ${report.scheme}` : ""}`;
 	const held = [
 		...report.notFound ? ["  · sent with status 404: the page for an address that shows nothing"] : [],
 		...listsText(report.lists),
@@ -19008,7 +19100,6 @@ var reportText$2 = (report, asked) => {
 		...held
 	].join("\n");
 };
-var withoutTrailingSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
 var check = async (routes, options) => {
 	const project = await projectHere("whose page to check");
 	if (!project) return;
@@ -19062,17 +19153,26 @@ var checkRoutes = async (project, routes, options) => {
 	if ("problem" in browser) return browser;
 	try {
 		const reports = [];
-		for (const route of routes) for (const width of options.widths) reports.push(await checkAt(browser, where.origin, route, width, options.scheme, authored, options.asked, options.ssr, options.account, options.click));
+		for (const route of routes) for (const width of options.widths) {
+			const report = await checkAt(browser, where.origin, route, width, options.scheme, authored, options.asked, options.ssr, options.account, options.click);
+			reports.push({
+				...report,
+				...options.scheme ? { scheme: options.scheme } : {}
+			});
+		}
 		return reports;
 	} finally {
 		await browser.close();
 	}
 };
-/** The paths of the space's pages that take no parameter — the ones a check can open as they are. */
+/** What a whole-project check opens: every page with no parameter in its path, in every theme the space can show. */
 var staticPaths = async (root) => {
 	const authored = await projectSpace(root);
 	if ("problem" in authored) return authored;
-	return Object.values(authored.handles.pages).map((page) => isNotFoundPage(page) ? `${page.path.slice(0, -1)}${NOT_FOUND_PROBE}` : page.path).filter((pathname) => pathname.split("/").every((segment) => !segment.startsWith(":") && !/\{\{.*\}\}/.test(segment)));
+	return {
+		paths: Object.values(authored.handles.pages).map((page) => isNotFoundPage(page) ? `${page.path.slice(0, -1)}${NOT_FOUND_PROBE}` : page.path).filter((pathname) => pathname.split("/").every((segment) => !segment.startsWith(":") && !/\{\{.*\}\}/.test(segment))),
+		schemes: authored.schemes
+	};
 };
 //#endregion
 //#region src/commands/functions.ts
@@ -21186,12 +21286,12 @@ var measure = async (browser, url, width, scheme, read = []) => {
 		screen: await page.screenshot({ fullPage: true })
 	};
 };
-var count$2 = (amount, one, many = `${one}s`) => `${String(amount)} ${amount === 1 ? one : many}`;
+var count$3 = (amount, one, many = `${one}s`) => `${String(amount)} ${amount === 1 ? one : many}`;
 var summaryText = (summary, out, stale) => [
 	chalk.green(`Imported ${summary.url} into ${out}`),
-	`  tokens   ${count$2(summary.colours, "colour")} (${summary.dark ? "light and dark" : "no dark scheme: dark repeats light"}), ${count$2(summary.shadows, "shadow")}, ${count$2(summary.radii, "radius", "radii")}${summary.fonts.length > 0 ? `, fonts ${summary.fonts.join(", ")}` : ""}`,
-	`  outline  ${count$2(summary.blocks, "block")} at ${summary.widths.join(", ")} px`,
-	...summary.lists.length > 0 ? [`  lists    ${summary.lists.map((list) => `${list.file} (${count$2(list.rows, "row")})`).join(", ")}`] : [],
+	`  tokens   ${count$3(summary.colours, "colour")} (${summary.dark ? "light and dark" : "no dark scheme: dark repeats light"}), ${count$3(summary.shadows, "shadow")}, ${count$3(summary.radii, "radius", "radii")}${summary.fonts.length > 0 ? `, fonts ${summary.fonts.join(", ")}` : ""}`,
+	`  outline  ${count$3(summary.blocks, "block")} at ${summary.widths.join(", ")} px`,
+	...summary.lists.length > 0 ? [`  lists    ${summary.lists.map((list) => `${list.file} (${count$3(list.rows, "row")})`).join(", ")}`] : [],
 	`  pictures ${String(summary.pictures)} in assets.json`,
 	...stale.length > 0 ? [chalk.yellow(`  earlier  ${stale.join(", ")} ${stale.length === 1 ? "was" : "were"} there before and not written this time: delete what is stale`)] : [],
 	`  next     ${path.join(out, "IMPORT.md")} says what was not carried over`
@@ -22409,7 +22509,7 @@ var projectConnectors = async (root) => {
 		manifest: value.manifest
 	}] : []);
 };
-var count$1 = (entries, noun) => entries ? `${String(entries.length)} ${noun}${entries.length === 1 ? "" : "s"}` : `the space’s ${noun}s as they are`;
+var count$2 = (entries, noun) => entries ? `${String(entries.length)} ${noun}${entries.length === 1 ? "" : "s"}` : `the space’s ${noun}s as they are`;
 /**
 * What of the space would not reach Plitzi with it, said before it is sent — never left to be found on a page that
 * renders empty there:
@@ -22494,7 +22594,7 @@ var pushSpaceOf = async (root, connection, space, { base, force, downloads }) =>
 		outcome: "unchanged",
 		draft: data.draft
 	};
-	console.log(chalk.green(`The space is ${space.name}’s draft now — its pages and styles, ${count$1(sent.actions, "action")}, ${count$1(sent.connectors, "connector")}.`) + chalk.dim(" Any builder open on it shows it now."));
+	console.log(chalk.green(`The space is ${space.name}’s draft now — its pages and styles, ${count$2(sent.actions, "action")}, ${count$2(sent.connectors, "connector")}.`) + chalk.dim(" Any builder open on it shows it now."));
 	return {
 		outcome: "pushed",
 		draft: data.draft
@@ -23522,7 +23622,107 @@ var _ = `[data-motion-enter], [data-motion-stagger] > *, [data-motion-loop] { an
 	"[data-motion-on=\"scroll\"][data-motion-enter], [data-motion-on=\"scroll\"][data-motion-stagger] > * { animation-timeline: auto, auto !important; }"
 ].join("\n");
 //#endregion
+//#region src/commands/shotSteps.ts
+var STEP_NAMES = [
+	"click",
+	"type",
+	"press",
+	"wait",
+	"wait-for",
+	"shot",
+	"frames"
+];
+/** The longest a script may wait in one step: a page that needs more is waiting for something else. */
+var MAX_WAIT_MS = 3e4;
+var unquoted = (text) => text.replace(/^(["'])(.*)\1$/s, "$2");
+var count$1 = (value, at, max) => {
+	const parsed = Number(value);
+	return Number.isInteger(parsed) && parsed > 0 && parsed <= max ? parsed : { problem: `${at}: "${value ?? ""}" is not a whole number from 1 to ${String(max)}` };
+};
+/** A script, read into its steps — or what is wrong with it, said by its step. */
+var parseSteps = (script, every) => {
+	const lines = script.split(/[;\n]/).map((line) => line.trim()).filter((line) => line !== "" && !line.startsWith("#"));
+	if (lines.length === 0) return { problem: "--steps has no step: click, type, press, wait, wait-for, shot or frames, separated by \";\"" };
+	const steps = [];
+	for (const [index, line] of lines.entries()) {
+		const at = `step ${String(index + 1)} ("${line}")`;
+		const [name, ...rest] = line.split(/\s+/);
+		const argument = unquoted(rest.join(" "));
+		switch (name) {
+			case "click":
+			case "wait-for":
+				if (!argument) return { problem: `${at}: ${name} needs an element — its name or a CSS selector` };
+				steps.push({
+					kind: name,
+					target: argument
+				});
+				break;
+			case "type": {
+				const [target, ...words] = rest;
+				if (!target || words.length === 0) return { problem: `${at}: type needs an element and the text — type <element> <text>` };
+				steps.push({
+					kind: "type",
+					target,
+					text: unquoted(words.join(" "))
+				});
+				break;
+			}
+			case "press":
+				if (!argument) return { problem: `${at}: press needs a key — Enter, Escape, ArrowDown…` };
+				steps.push({
+					kind: "press",
+					key: argument
+				});
+				break;
+			case "wait": {
+				const ms = count$1(rest[0], at, MAX_WAIT_MS);
+				if (typeof ms !== "number") return ms;
+				steps.push({
+					kind: "wait",
+					ms
+				});
+				break;
+			}
+			case "shot":
+				steps.push({
+					kind: "shot",
+					...argument ? { label: argument } : {}
+				});
+				break;
+			case "frames": {
+				const frames = count$1(rest[0], at, 60);
+				if (typeof frames !== "number") return frames;
+				const apart = rest.length < 2 ? every : count$1(rest[1], at, MAX_WAIT_MS);
+				if (typeof apart !== "number") return apart;
+				steps.push({
+					kind: "frames",
+					count: frames,
+					every: apart
+				});
+				break;
+			}
+			default: return { problem: `${at}: "${name}" is not a step — the steps are ${STEP_NAMES.join(", ")}` };
+		}
+	}
+	return steps;
+};
+//#endregion
 //#region src/commands/shot.ts
+/**
+* `plitzi page shot`: a picture of one page of the project — and, asked, the numbers that say what a picture would.
+*
+*   plitzi page shot /about --width 390 --scheme dark
+*   plitzi page shot / --compare https://example.com --width 1440     # beside another site: what differs, and how
+*   plitzi page shot / --frames 4 --every 500                         # what moves: a marquee, an autoplay
+*   plitzi page shot / --clip pricing-table                           # one element, scrolled to wherever it is
+*   plitzi page shot / --scroll-to faq --viewport --frames 6          # the screen at that section, as it animates
+*
+* The project's server has to be running (`npm start`). `--json` answers in one object, for a tool or an agent. The
+* dev tools' badge is never in the picture; a picture of the whole page has every lazy image loaded and shows every
+* arrival that waits for the scroll as it ends — taken without scrolling, they would be holes where the sections are.
+*/
+/** When a run's first picture is taken: once the page settles, or as soon as its HTML is in. */
+var SHOT_MOMENTS = ["settled", "load"];
 /** A region moves when more than this share of it changed between two frames: below is anti-aliasing and carets. */
 var MOVING_PERCENT = .5;
 /** How long a whole page waits for its pictures before it is taken anyway. */
@@ -23533,8 +23733,8 @@ var TEXTS_SHOWN = 12;
 var DRIFT_PX = 2;
 /** An arrival that waits for the scroll and has not had it: one waiting to be seen, or one tied to the scroll. */
 var WAITING_FOR_SCROLL = "[data-motion-on=\"view\"]:not([data-motion-seen]), [data-motion-on=\"scroll\"]";
-/** A selector, or an element's name — what `data-plitzi-el` carries. */
-var selectorOf = (target) => /^[#.[]/.test(target) ? target : `[data-plitzi-el="${target}"]`;
+/** A selector — CSS, or Playwright's own (`text=Saved`, `role=button[name="Publish"]`) — or an element's name. */
+var selectorOf = (target) => /^([#.[]|(text|role|css|xpath)=)/.test(target) ? target : `[data-plitzi-el="${target}"]`;
 var framing = (view) => {
 	if (view.clip) return {
 		kind: "element",
@@ -23559,7 +23759,10 @@ var pictureOf = async (browser, url, view, origin) => {
 		colorScheme: view.scheme ?? "light",
 		reducedMotion: view.reducedMotion ? "reduce" : "no-preference"
 	});
-	if (!await openPage(page, url)) return { problem: `Nothing answers at ${url}.` };
+	const notSignedIn = origin && view.account && await signInAs(page, origin, view.account);
+	if (notSignedIn) return { problem: `--as ${notSignedIn}.` };
+	if (!(view.fromLoad ? await page.goto(url, { waitUntil: "domcontentloaded" }).catch(() => null) : await openPage(page, url))) return { problem: `Nothing answers at ${url}.${origin ? " Start the project first: npm start" : ""}` };
+	const sentTo = origin ? sentElsewhere(page, new URL(url).pathname) : void 0;
 	if (view.waitFor) {
 		if (!await page.waitForSelector(selectorOf(view.waitFor), { timeout: 1e4 }).catch(() => null)) return { problem: `${view.waitFor} did not appear on ${url} within 10 s.` };
 	}
@@ -23576,7 +23779,8 @@ var pictureOf = async (browser, url, view, origin) => {
 		png: await capture(page, framing(view)),
 		scheme: await paintedScheme(page, view.scheme ?? "light"),
 		settled,
-		unloaded: pictures?.missing ?? 0
+		unloaded: pictures?.missing ?? 0,
+		...sentTo ? { sentTo } : {}
 	};
 };
 var shiftText = (shift) => shift !== void 0 && Math.abs(shift) > DRIFT_PX ? ` (${shift > 0 ? "+" : ""}${String(shift)}px there)` : "";
@@ -23716,6 +23920,65 @@ var clickThrough = async (taken, how, clicks, { frames, every }) => {
 		clicked
 	};
 };
+/** What a step is, as its label says it. */
+var stepText = (step) => {
+	switch (step.kind) {
+		case "click":
+		case "wait-for": return `${step.kind} ${step.target}`;
+		case "type": return `type ${step.target}`;
+		case "press": return `press ${step.key}`;
+		case "wait": return `wait ${String(step.ms)} ms`;
+		case "shot": return step.label ?? "shot";
+		case "frames": return `frames ${String(step.count)}`;
+	}
+};
+/**
+* A `--steps` script played on the page: what each step does, and every picture the script asks for — each labelled with
+* its step and the time since the first, and measured against the one before it, so "nothing changed" is said.
+*/
+var playSteps = async (taken, how, steps) => {
+	const { page } = taken;
+	const started = Date.now();
+	const moments = [{
+		label: "before",
+		png: taken.png
+	}];
+	const changes = [];
+	const picture = async (label) => {
+		const before = moments[moments.length - 1].png;
+		const png = await capture(page, how);
+		const at = `${label} · +${String(Date.now() - started)} ms`;
+		moments.push({
+			label: at,
+			png
+		});
+		changes.push({
+			label: at,
+			changed: (await comparePictures(page, dataUrl(before), dataUrl(png))).changed
+		});
+	};
+	for (const [index, step] of steps.entries()) try {
+		if (step.kind === "click" || step.kind === "type") {
+			const element = page.locator(selectorOf(step.target)).first();
+			if (await element.count() === 0) return { problem: `Step ${String(index + 1)}: ${step.target} is not on the page — its name or a CSS selector.` };
+			await element.click({ timeout: 3e3 });
+			if (step.kind === "type") await page.keyboard.type(step.text);
+		} else if (step.kind === "press") await page.keyboard.press(step.key);
+		else if (step.kind === "wait") await page.waitForTimeout(step.ms);
+		else if (step.kind === "wait-for") await page.waitForSelector(selectorOf(step.target), { timeout: 1e4 });
+		else if (step.kind === "shot") await picture(step.label ?? `step ${String(index + 1)}`);
+		else for (let frame = 1; frame <= step.count; frame += 1) {
+			if (frame > 1) await page.waitForTimeout(step.every);
+			await picture(`frame ${String(frame)}/${String(step.count)}`);
+		}
+	} catch (error) {
+		return { problem: `Step ${String(index + 1)} (${stepText(step)}) did not happen: ${error instanceof Error ? error.message.split("\n")[0] : String(error)}` };
+	}
+	return {
+		moments,
+		changes
+	};
+};
 var shot = async (route, options) => {
 	const project = await projectHere("whose page to picture");
 	if (!project) return;
@@ -23724,20 +23987,53 @@ var shot = async (route, options) => {
 		fail(where.problem);
 		return;
 	}
+	const account = options.as === void 0 ? void 0 : await checkAccount(project.root, options.as);
+	if (account && "problem" in account) {
+		fail(`--as ${account.problem}.`);
+		return;
+	}
 	const browser = await launchBrowser(project.root);
 	if ("problem" in browser) {
 		fail(browser.problem);
 		return;
 	}
 	const clicks = options.click ?? [];
+	const script = options.steps?.startsWith("@") ? await readFile(path.resolve(options.steps.slice(1)), "utf-8").catch(() => void 0) : options.steps;
+	if (options.steps !== void 0 && script === void 0) {
+		await browser.close();
+		fail(`${options.steps.slice(1)} cannot be read: --steps @<file> names a file of steps.`);
+		return;
+	}
+	const steps = script === void 0 ? void 0 : parseSteps(script, options.every ?? 500);
+	if (steps && "problem" in steps) {
+		await browser.close();
+		fail(`--steps: ${steps.problem}.`);
+		return;
+	}
+	if (steps && (clicks.length > 0 || options.compare || (options.frames ?? 0) > 1)) {
+		await browser.close();
+		fail("`--steps` is the whole interaction — its own clicks and frames: leave out --click, --frames and --compare.");
+		return;
+	}
 	if (options.compare && clicks.length > 0) {
 		await browser.close();
 		fail("`--compare` sets the page beside another site as it loads: leave out --click, or picture the click on its own.");
 		return;
 	}
-	if (options.sheet && clicks.length === 0 && (options.frames ?? 0) <= 1) {
+	if (options.sheet && clicks.length === 0 && (options.frames ?? 0) <= 1 && options.steps === void 0) {
+		await browser.close();
+		fail("`--sheet` lays out the pictures a --click, --frames or --steps takes: with none of them, there is one picture and no sheet.");
+		return;
+	}
+	const fromLoad = options.from === "load";
+	if (fromLoad && ((options.frames ?? 0) <= 1 || clicks.length > 0 || options.compare)) {
+		await browser.close();
+		fail("`--from load` starts --frames as the HTML arrives, for what plays while the page loads: give it --frames, and leave out --click and --compare.");
+		return;
+	}
+	if (fromLoad && !options.clip && !options.scrollTo && !options.viewport) {
 		await browser.close();
-		fail("`--sheet` lays out the pictures a --click or --frames takes: with neither, there is one picture and no sheet.");
+		fail("`--from load` pictures the screen as the page arrives, never the whole page — unrolling it waits for it to settle: add --viewport or --clip.");
 		return;
 	}
 	if (options.compare && (options.clip || options.scrollTo || options.viewport)) {
@@ -23756,12 +24052,14 @@ var shot = async (route, options) => {
 			...options.clip ? { clip: options.clip } : {},
 			...options.scrollTo ? { scrollTo: options.scrollTo } : {},
 			...options.viewport ? { viewport: true } : {},
+			...account ? { account } : {},
+			...fromLoad ? { fromLoad } : {},
 			still: !options.clip && !options.scrollTo && !options.viewport && (options.frames ?? 0) <= 1 && clicks.length === 0
 		};
 		const how = framing(view);
 		const taken = await pictureOf(browser, `${where.origin}${pathname}`, view, where.origin);
 		if ("problem" in taken) {
-			fail(`${taken.problem} Start the project first: npm start`);
+			fail(taken.problem);
 			return;
 		}
 		const name = pathname === "/" ? "home" : pathname.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "");
@@ -23776,7 +24074,8 @@ var shot = async (route, options) => {
 			scheme: taken.scheme,
 			out,
 			...taken.settled > 0 ? { settled: taken.settled } : {},
-			...taken.unloaded > 0 ? { unloaded: taken.unloaded } : {}
+			...taken.unloaded > 0 ? { unloaded: taken.unloaded } : {},
+			...taken.sentTo ? { sentTo: taken.sentTo } : {}
 		};
 		if (options.compare) {
 			const other = new URL(options.compare);
@@ -23790,7 +24089,15 @@ var shot = async (route, options) => {
 		const frames = options.frames ?? 0;
 		const every = options.every ?? 500;
 		let moments = [];
-		if (clicks.length > 0) {
+		if (steps) {
+			const played = await playSteps(taken, how, steps);
+			if ("problem" in played) {
+				fail(played.problem);
+				return;
+			}
+			moments = played.moments;
+			report.steps = played.changes;
+		} else if (clicks.length > 0) {
 			const played = await clickThrough(taken, how, clicks, {
 				frames,
 				every
@@ -23808,7 +24115,7 @@ var shot = async (route, options) => {
 				pictures.push(await capture(taken.page, how));
 			}
 			moments = pictures.map((png, frame) => ({
-				label: frame === 0 ? "before" : `+${String(frame * every)} ms`,
+				label: frame === 0 ? fromLoad ? "HTML in" : "before" : `+${String(frame * every)} ms`,
 				png
 			}));
 			const diffs = [];
@@ -23832,7 +24139,7 @@ var shot = async (route, options) => {
 			})));
 			report.sheet = `${base}-sheet.png`;
 			await writeFile(report.sheet, Buffer.from(sheet.replace(/^data:image\/png;base64,/, ""), "base64"));
-		} else if (moments.length > 1 && clicks.length > 0) {
+		} else if (moments.length > 1 && (clicks.length > 0 || steps)) {
 			report.pictures = [];
 			for (const [index, moment] of moments.slice(1).entries()) {
 				const file = `${base}-${String(index + 1)}.png`;
@@ -23848,9 +24155,11 @@ var shot = async (route, options) => {
 			return;
 		}
 		console.log(out);
+		if (report.sentTo) console.log(chalk.yellow(account ? `${pathname} sent the browser to ${report.sentTo}, signed in as ${account.username}: the picture is of ${report.sentTo} — that account may not see ${pathname}` : `${pathname} sent the browser to ${report.sentTo}: the picture is of ${report.sentTo}. A page for signed-in visitors? \`--as <username>\` signs in first, the password in ${CHECK_PASSWORD_ENV} in .env`));
 		if (report.settled) console.log(chalk.dim(`${String(report.settled)} arrival${report.settled === 1 ? "" : "s"} waiting for the scroll shown as they end — --scroll-to <id> --viewport --frames 4 shows one arriving`));
 		if (report.unloaded) console.log(chalk.yellow(`${String(report.unloaded)} picture(s) had not loaded when the page was taken`));
 		if (report.compare) console.log(compareText(report.compare).join("\n"));
+		for (const { label, changed } of report.steps ?? []) console.log(changed > 0 ? `${label}: ${String(changed)}% of the picture changed` : chalk.yellow(`${label}: nothing changed since the picture before`));
 		for (const { target, changed } of report.clicked ?? []) console.log(changed > 0 ? `clicked ${target}: ${String(changed)}% of the picture changed` : chalk.yellow(`clicked ${target}: nothing changed — the click did nothing to see`));
 		if (report.sheet) console.log(`sheet: ${report.sheet}`);
 		for (const picture of report.pictures ?? []) console.log(`${picture.label}: ${picture.out}`);
@@ -23961,30 +24270,39 @@ var verify = async (options) => {
 };
 var NOT_STARTED = "start it (npm start) and verify again, or --no-pages to leave them";
 var pagesChecked = async (project) => {
-	const paths = await staticPaths(project.root);
-	if ("problem" in paths) return paths;
-	const options = {
-		widths: WIDTHS,
-		asked: { state: false },
-		ssr: false
+	const found = await staticPaths(project.root);
+	if ("problem" in found) return found;
+	const { paths, schemes } = found;
+	const inEveryTheme = async (routes, account) => {
+		const all = [];
+		for (const scheme of schemes) {
+			const reports = await checkRoutes(project, routes, {
+				widths: WIDTHS,
+				asked: { state: false },
+				ssr: false,
+				scheme,
+				...account ? { account } : {}
+			});
+			if ("problem" in reports) return { problem: `${reports.problem} — ${NOT_STARTED}` };
+			all.push(...reports);
+		}
+		return all;
 	};
-	const reports = await checkRoutes(project, paths, options);
-	if ("problem" in reports) return { problem: `${reports.problem} — ${NOT_STARTED}` };
+	const reports = await inEveryTheme(paths);
+	if ("problem" in reports) return reports;
 	const sentAway = [...new Set(reports.filter(redirected).map((report) => report.path))];
-	if (sentAway.length === 0) return summary(reports);
+	if (sentAway.length === 0) return summary(schemes, reports);
 	const account = await checkAccount(project.root);
-	if (!account || "problem" in account) return summary(reports, account ?? { none: true });
-	const signedIn = await checkRoutes(project, sentAway, {
-		...options,
-		account
-	});
-	if ("problem" in signedIn) return { problem: `${signedIn.problem} — ${NOT_STARTED}` };
-	return summary([...reports.filter((report) => !sentAway.includes(report.path)), ...signedIn], {
+	if (!account || "problem" in account) return summary(schemes, reports, account ?? { none: true });
+	const signedIn = await inEveryTheme(sentAway, account);
+	if ("problem" in signedIn) return signedIn;
+	return summary(schemes, [...reports.filter((report) => !sentAway.includes(report.path)), ...signedIn], {
 		as: account.username,
 		checks: signedIn.filter((report) => !unchecked(report)).length
 	});
 };
-var summary = (reports, signedIn) => ({
+var summary = (schemes, reports, signedIn) => ({
+	schemes,
 	passing: reports.filter((report) => report.ok).length,
 	failing: reports.filter((report) => !report.ok && !unchecked(report)),
 	unchecked: [...new Set(reports.filter(unchecked).map((report) => report.path))],
@@ -24003,7 +24321,7 @@ var verifyText = (results, pages) => [...results.flatMap((result) => result.ok ?
 	...(result.said ?? []).map((line) => `    ${line}`),
 	...result.fix ? [`    → ${result.fix}`] : []
 ]), ...pages === void 0 ? [chalk.yellow("- pages not checked: --no-pages")] : "waiting" in pages ? [chalk.yellow(`- not run until ${pages.after} passes: ${pages.waiting.join(", ")} (--keep-going runs them anyway)`)] : "problem" in pages ? [chalk.red(`✗ pages — ${pages.problem}`)] : [
-	pages.failing.length === 0 ? chalk.green(`✓ pages — ${String(pages.passing)} checks at ${WIDTHS.join(" and ")} px${pages.signedIn && "as" in pages.signedIn ? `, ${String(pages.signedIn.checks)} of them signed in as ${pages.signedIn.as}` : ""}`) : chalk.red(`✗ pages — ${String(pages.failing.length)} of ${String(pages.passing + pages.failing.length)} checks`),
+	pages.failing.length === 0 ? chalk.green(`✓ pages — ${String(pages.passing)} checks at ${WIDTHS.join(" and ")} px, ${pages.schemes.join(" and ")}${pages.signedIn && "as" in pages.signedIn ? `, ${String(pages.signedIn.checks)} of them signed in as ${pages.signedIn.as}` : ""}`) : chalk.red(`✗ pages — ${String(pages.failing.length)} of ${String(pages.passing + pages.failing.length)} checks`),
 	...pages.failing.map((report) => reportText$2(report, { state: false })),
 	...pages.unchecked.length > 0 ? [chalk.yellow(uncheckedText(pages))] : []
 ]].join("\n");
@@ -27192,7 +27510,7 @@ pageGroup.command("import").argument("<url>", "The page to start from: https://e
 	768,
 	390
 ])).option("-f, --force", "Write over what --out already holds").option("--account", "A site not served from this machine: ask your Plitzi account whether one of your spaces verified its domain (signs in)").option("--json", "One object, for a tool or an agent").option(...API_OPTION).option(...DRY_RUN_OPTION).action((url, options) => importPage(url, options));
-pageGroup.command("shot").argument("[path]", "The page: /about. The home page when left out").description("A picture of one page of the running project — and, asked, how it differs from another or what moves").addOption(new Option("--width <px>", "The viewport width").argParser(width).default(1280)).addOption(new Option("--height <px>", "The viewport height (the picture is the whole page unless --viewport, --scroll-to or --clip)").argParser(positiveInteger).default(800)).addOption(schemeOption()).option("-o, --out <file>", "Where the picture goes. tmp/shots/<page>-<width>-<scheme>.png by default").option("--compare <url>", "Another site: the same page there, side by side, and how much differs by section").addOption(new Option("--frames <n>", "Pictures taken one after another: which sections move (a marquee, an autoplay)").argParser(positiveInteger)).addOption(new Option("--every <ms>", "How far apart --frames are taken").argParser(positiveInteger).default(500)).option("--wait-for <element>", "An element to wait for first: its name (data-plitzi-el) or a CSS selector").option("--clip <element>", "Only this element — its name or a CSS selector — scrolled to wherever it is").option("--scroll-to <element>", "The page scrolled until this element is in view; the picture is the screen there").option("--viewport", "Only what fits the viewport, not the whole page").option("--click <element...>", "Click these in order once the page settles — each its name or a CSS selector, inside a plugin too — picturing what each changed (--frames pictures --every ms apart after each)").option("--sheet", "Every picture taken — before, after each click, each frame — on one contact sheet").option("--reduced-motion", "As a visitor who asked for less motion").option("--json", "One object, for a tool or an agent").action((path, options) => shot(path, options));
+pageGroup.command("shot").argument("[path]", "The page: /about. The home page when left out").description("A picture of one page of the running project — and, asked, how it differs from another or what moves").addOption(new Option("--width <px>", "The viewport width").argParser(width).default(1280)).addOption(new Option("--height <px>", "The viewport height (the picture is the whole page unless --viewport, --scroll-to or --clip)").argParser(positiveInteger).default(800)).addOption(schemeOption()).option("-o, --out <file>", "Where the picture goes. tmp/shots/<page>-<width>-<scheme>.png by default").option("--compare <url>", "Another site: the same page there, side by side, and how much differs by section").addOption(new Option("--frames <n>", "Pictures taken one after another: which sections move (a marquee, an autoplay)").argParser(positiveInteger)).addOption(new Option("--every <ms>", "How far apart --frames are taken").argParser(positiveInteger).default(500)).addOption(new Option("--from <moment>", "When --frames start: once the page settles, or as soon as its HTML is in (load) — what plays as it arrives").choices([...SHOT_MOMENTS]).default("settled")).option("--wait-for <element>", "An element to wait for first: its name (data-plitzi-el) or a CSS selector").option("--clip <element>", "Only this element — its name or a CSS selector — scrolled to wherever it is").option("--scroll-to <element>", "The page scrolled until this element is in view; the picture is the screen there").option("--viewport", "Only what fits the viewport, not the whole page").option("--click <element...>", "Click these in order once the page settles — each its name or a CSS selector, inside a plugin too — picturing what each changed (--frames pictures --every ms apart after each)").option("--sheet", "Every picture taken — before, after each click, each frame — on one contact sheet").option("--steps <script>", "An interaction, step by step: \"click <el>; type <el> <text>; press <key>; wait <ms>; wait-for <el>; shot [label]; frames <n> [ms]\" — or @file with one per line").option("--reduced-motion", "As a visitor who asked for less motion").option("--as <username>", "Sign in first as this account, through the server’s /auth routes — the password from PLITZI_CHECK_PASSWORD, in .env").option("--json", "One object, for a tool or an agent").action((path, options) => shot(path, options));
 program.command("verify").description("Whether the project is left passing: author, lints, types, format and every page, only the problems said").option("--no-pages", "Leave the pages out — said as such").option("--keep-going", "Run every check even after one fails — by default the first failure ends the run").option("--json", "One object, for a tool or an agent").action((options) => verify(options));
 elementGroup.command("where").argument("<query>", "An element’s id, a class it wears, or words it shows: hero-cta, navLink, \"Get started\"").description("Where the project’s code writes an element: the file, the line and the call itself").addOption(new Option("--by <reading>", "Read the query one way only, not the first of id, class and words that matches").choices(WHERE_READINGS)).option("--json", "One object, for a tool or an agent").action((query, options) => where(query, options));
 elementGroup.command("edit").argument("<id>", "The element, by its id: hero-cta").description("Change an element’s attributes in the call that writes it, then check the space still authors").option("--set <key=value...>", "An attribute to write: content=\"Start free\", required=true").option("--remove <key...>", "An attribute to take out").option("--every", "The call writes other elements too, and the change is for every one").option("--json", "One object, for a tool or an agent").action((id, options) => edit(id, options));