@plitzi/sdk-schema 0.36.1 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @plitzi/sdk-schema
 
+## 0.37.0
+
+### Minor Changes
+
+- - A `button` takes a `title`: shown as a tooltip, and its accessible name when it has no text of its own — an
+    icon-only button without one was announced as nothing. The builder's settings offer it as "Tooltip". The JSON export
+    is two files, `schema.json` and `style.json`, shown as tabs; each group of changes in the export folds away.
+
+  - `BindingTransformer.params` is `Record<string, string | number | boolean>`: a param the builder draws as a checkbox
+    (`styleVariant`'s `append`) is stored as the boolean it is and read as one, so the type now says so. The MCP compares
+    such a param with its catalog options as text. A `container` may be an `li`, for the rows of a list. The export
+    keeps every element id with `keepIds`, and the header's Publish dialog opens wider.
+
+  - **The builder exports the space on screen — on paid plans.** **Export** in the header opens a wide dialog: the
+    format as tabs (TypeScript in one file, TypeScript with a file per page as a `.zip`, or JSON), generated as soon as
+    it is picked, shown read-only in CodeMirror — beside a file list when there are several — with one row of actions,
+    **Copy** and **Download**. What the export tidied is a one-line note that unfolds into readable groups. On the free
+    plan the dialog explains what export is instead; the server refuses the code with a 402 (`limit: 'spaceExport'`)
+    whatever the builder shows. `useSpaceExport` is the one way into it, for anything else that needs the space as files.
+
+  - **A space document can be read back into code.** `specFromSpace(documents)` turns a `{ schema, style }` pair — a
+    builder export, a seed checked in as JSON — into the `SpaceSpec` that authors it, and `specToSource(spec, { exportName })`
+    writes that spec out as the TypeScript a person would write: one factory call per element, the attributes a type
+    already defaults to left out, the longhands the document stores written back as `padding: 10px 20px`, and every class
+    something names as a `styles()` declaration held in a variable. `split: true` writes one file per page and per layout.
+    `compareSpaces(expected, actual)` proves the round trip: it lists every way two pairs render differently — the tree,
+    the attributes, the rules that apply to each element whatever its selector is called, bindings, flows, pages, layouts
+    and settings — and nothing else. A selector used by one element becomes that element's own `css`; one shared, or
+    spelled out anywhere in the document (a `customCss` rule, a template), stays a class under its own name; an element id
+    nothing refers to is left out and derived again.
+
+    What an older builder left behind is repaired on the way, and every repair is reported in `corrections` rather than
+    made silently: element types that no longer exist (`navbar` → a `list` laid out in a row, `navbarItem` → `listItem`),
+    a hover stored as a class of its own (`card:hover`) folded into the class, fields and attributes no component reads,
+    a setting nothing reads, a link `target` of `_blank` (the component adds the underscore, so it rendered as `__blank`),
+    `null` or an empty list where an attribute is unset, a binding to a source nothing publishes, a flow with a step that
+    runs nothing, and a global callback registered on the wrong module. A CSS property the style editor cannot hold is
+    kept in `customCss` under the same selector, so the page still renders it.
+
+  - **What a spec can say grew to what a document holds.** A selector carries its states and variants beside its rules —
+    `styles('card', { css, states: { hover }, variants: { active } })`, and `states` on an element's own `css` — and the
+    selector cache is now written by `processSelector`, the function the style editor writes it with. An element type's
+    defaults (`elements`) take states, variants, per-breakpoint rules and `slots` for its other selectors (a modal's
+    `rootContainer`). A space declares `layouts` — shells that pages render inside, named by `layout: { id, slot }` on a
+    page or on another layout, with the slot checked to be inside the shell — and a page takes `keepState` and
+    `stateStorage`. `visible: false` starts an element hidden for a flow to reveal, and `loadStrategy` is carried through.
+    An element's own selector never takes the name of a declared class any more, however that class happens to be called.
+
+  - `elementAttributeNames` lists, as data, the attributes each built-in element can be authored with — `null` for one
+    that takes any. It is generated from the elements' attribute types (`yarn generate:attribute-names`) and a type test
+    fails when the two disagree. `defaultAttributes(type)` and `defaultLabel(type)` expose what a factory fills in.
+
+  - `CustomAttributes` accepts any attribute, because the component a custom element's `renderType` names reads its own
+    attributes off it; and `FormControlAttributes` declares `previewError`, which `withFieldValue` reads.
+
+### Patch Changes
+
+- Updated dependencies
+  - @plitzi/sdk-shared@0.37.0
+  - @plitzi/sdk-style@0.37.0
+
+## 0.36.2
+
+### Patch Changes
+
+- v0.36.2
+- Updated dependencies
+  - @plitzi/sdk-shared@0.36.2
+  - @plitzi/sdk-style@0.36.2
+
 ## 0.36.1
 
 ### Patch Changes

package/dist/helpers/FlatMap.d.ts

@@ -74,7 +74,12 @@ declare class FlatMap {
     updateVariable: (variable: SchemaVariable) => boolean;
     removeVariables: (variables: string[]) => boolean;
     removeVariable: (variable: string) => boolean;
-    parentTree: (elementId: Element["id"]) => string[];
+    /**
+     * Everything an element is rendered inside, nearest first — its ancestors, and past a root the shell that root is
+     * shown in. A layout names its own shell the way a page does, so the walk continues through as many as are nested;
+     * `visited` keeps a document whose shells name each other from walking forever.
+     */
+    parentTree: (elementId: Element["id"], visited?: Set<Element["id"]>) => string[];
     childTree: (elementId: Element["id"]) => string[];
     isValidElement: (element?: Partial<Element>) => boolean;
     flatAsTemplate: (style: Style, elementId: Element["id"], excludeRoot?: boolean) => {

package/dist/helpers/FlatMap.mjs

@@ -151,17 +151,19 @@ var p = class {
 		return this.variables = this.variables.filter((t) => e.includes(t.name)), t !== this.variables.length;
 	};
 	removeVariable = (e) => this.removeVariables([e]);
-	parentTree = (e) => {
-		let t = this.flat[e], n = [];
-		if (!t) return n;
+	parentTree = (e, t = /* @__PURE__ */ new Set()) => {
+		let n = this.flat[e], r = [];
+		if (!n) return r;
 		do {
-			if (s(t, "definition.type") === "page") {
-				let e = s(t, "attributes.layout"), r = s(t, "attributes.layoutContainer");
-				e && r && n.push(r, ...this.parentTree(r));
+			let i = s(n, "definition.type");
+			if ((i === "page" || i === "layoutContainer") && !t.has(n.id)) {
+				t.add(n.id);
+				let e = s(n, "attributes.layout"), i = s(n, "attributes.layoutContainer");
+				e && i && r.push(i, ...this.parentTree(i, t));
 			}
-			e !== t.id && n.push(t.id), t = s(this.flat, s(t, "definition.parentId"), void 0);
-		} while (t);
-		return n;
+			e !== n.id && r.push(n.id), n = s(this.flat, s(n, "definition.parentId"), void 0);
+		} while (n);
+		return r;
 	};
 	childTree = (e) => {
 		let t = this.flat[e];

package/dist/helpers/schemaValidator.mjs

@@ -1,22 +1,23 @@
 import { isValidElementId as e } from "./elementId.mjs";
+import { findLayoutCycle as t } from "@plitzi/sdk-shared/schema/layoutChain";
 //#region src/helpers/schemaValidator.ts
-var t = (t) => {
-	let n = [], r = [], { flat: i, pages: a, pageFolders: o, variables: s } = t, c = (e) => !!i[e], l = (e) => i[e], u = () => Object.values(i).filter((e) => e?.definition?.type === "layoutContainer" && !e.definition.parentId).map((e) => e.id), d = () => [...a, ...u()], f = () => !i || typeof i != "object" ? (n.push({
+var n = (n) => {
+	let r = [], i = [], { flat: a, pages: o, pageFolders: s, variables: c } = n, l = (e) => !!a[e], u = (e) => a[e], d = () => Object.values(a).filter((e) => e?.definition?.type === "layoutContainer" && !e.definition.parentId).map((e) => e.id), f = () => [...o, ...d()], p = () => !a || typeof a != "object" ? (r.push({
 		code: "INVALID_FLAT",
 		message: "Schema.flat must be a valid Record<string, Element>"
-	}), !1) : Array.isArray(a) ? Array.isArray(o) ? Array.isArray(s) ? !0 : (n.push({
+	}), !1) : Array.isArray(o) ? Array.isArray(s) ? Array.isArray(c) ? !0 : (r.push({
 		code: "INVALID_VARIABLES",
 		message: "Schema.variables must be an array"
-	}), !1) : (n.push({
+	}), !1) : (r.push({
 		code: "INVALID_PAGE_FOLDERS",
 		message: "Schema.pageFolders must be an array"
-	}), !1) : (n.push({
+	}), !1) : (r.push({
 		code: "INVALID_PAGES",
 		message: "Schema.pages must be an array of element IDs"
-	}), !1), p = () => {
-		Object.entries(i).forEach(([e, t]) => {
+	}), !1), m = () => {
+		Object.entries(a).forEach(([e, t]) => {
 			if (!t) {
-				n.push({
+				r.push({
 					code: "NULL_ELEMENT",
 					message: `Element with id "${e}" is null or undefined`,
 					elementId: e
@@ -24,163 +25,163 @@ var t = (t) => {
 				return;
 			}
 			if (!t.id) {
-				n.push({
+				r.push({
 					code: "MISSING_ID",
 					message: `Element at key "${e}" has no id property`
 				});
 				return;
 			}
-			if (t.id !== e && n.push({
+			if (t.id !== e && r.push({
 				code: "ID_MISMATCH",
 				message: `Element id "${t.id}" doesn't match flat key "${e}"`,
 				elementId: e
 			}), !t.definition) {
-				n.push({
+				r.push({
 					code: "MISSING_DEFINITION",
 					message: "Element missing definition",
 					elementId: e
 				});
 				return;
 			}
-			let { definition: i, attributes: a } = t;
-			i.type || n.push({
+			let { definition: n, attributes: a } = t;
+			n.type || r.push({
 				code: "MISSING_TYPE",
 				message: "Element missing definition.type",
 				elementId: e
-			}), i.label === void 0 && n.push({
+			}), n.label === void 0 && r.push({
 				code: "MISSING_LABEL",
 				message: "Element missing definition.label",
 				elementId: e
-			}), i.rootId || n.push({
+			}), n.rootId || r.push({
 				code: "MISSING_ROOT_ID",
 				message: "Element missing definition.rootId",
 				elementId: e
-			}), (!i.styleSelectors || typeof i.styleSelectors != "object") && n.push({
+			}), (!n.styleSelectors || typeof n.styleSelectors != "object") && r.push({
 				code: "MISSING_STYLE_SELECTORS",
 				message: "Element missing or invalid definition.styleSelectors",
 				elementId: e
-			}), a || r.push({
+			}), a || i.push({
 				code: "MISSING_ATTRIBUTES",
 				message: "Element has no attributes",
 				elementId: e
-			}), i.items && (Array.isArray(i.items) ? i.items.forEach((t, r) => {
-				c(t) || n.push({
+			}), n.items && (Array.isArray(n.items) ? n.items.forEach((t, n) => {
+				l(t) || r.push({
 					code: "ORPHANED_ITEM_REFERENCE",
-					message: `Element "${e}" references non-existent child "${t}" at items[${r}]`,
+					message: `Element "${e}" references non-existent child "${t}" at items[${n}]`,
 					elementId: e,
 					details: {
 						childId: t,
-						index: r
+						index: n
 					}
 				});
-			}) : n.push({
+			}) : r.push({
 				code: "INVALID_ITEMS",
 				message: "Element.definition.items must be an array",
 				elementId: e
-			})), i.parentId && !c(i.parentId) && n.push({
+			})), n.parentId && !l(n.parentId) && r.push({
 				code: "ORPHANED_PARENT_REFERENCE",
-				message: `Element "${e}" has parentId "${i.parentId}" but parent doesn't exist in flat`,
+				message: `Element "${e}" has parentId "${n.parentId}" but parent doesn't exist in flat`,
 				elementId: e,
-				details: { parentId: i.parentId }
+				details: { parentId: n.parentId }
 			});
 		});
-	}, m = () => {
-		Object.values(i).forEach((e) => {
+	}, h = () => {
+		Object.values(a).forEach((e) => {
 			if (!e?.definition) return;
-			let { id: t, definition: r } = e;
-			if (r.items && r.items.forEach((e) => {
-				let r = l(e);
-				r?.definition && r.definition.parentId !== t && n.push({
+			let { id: t, definition: n } = e;
+			if (n.items && n.items.forEach((e) => {
+				let n = u(e);
+				n?.definition && n.definition.parentId !== t && r.push({
 					code: "PARENT_CHILD_MISMATCH",
-					message: `Element "${e}" is in "${t}".items but has parentId "${r.definition.parentId}"`,
+					message: `Element "${e}" is in "${t}".items but has parentId "${n.definition.parentId}"`,
 					elementId: e,
 					details: {
 						expectedParent: t,
-						actualParent: r.definition.parentId
+						actualParent: n.definition.parentId
 					}
 				});
-			}), r.parentId) {
-				let e = l(r.parentId);
+			}), n.parentId) {
+				let e = u(n.parentId);
 				if (!e?.definition) return;
 				let i = e.definition.items || [];
-				i.includes(t) || n.push({
+				i.includes(t) || r.push({
 					code: "PARENT_CHILD_MISMATCH",
-					message: `Element "${t}" has parentId "${r.parentId}" but parent doesn't have it in items`,
+					message: `Element "${t}" has parentId "${n.parentId}" but parent doesn't have it in items`,
 					elementId: t,
 					details: {
-						parentId: r.parentId,
+						parentId: n.parentId,
 						parentItems: i
 					}
 				});
 			}
 		});
-	}, h = () => {
-		let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set(), r = (i) => {
-			if (t.has(i)) return n.push({
+	}, g = () => {
+		let e = /* @__PURE__ */ new Set(), t = /* @__PURE__ */ new Set(), n = (i) => {
+			if (t.has(i)) return r.push({
 				code: "CIRCULAR_REFERENCE",
 				message: `Circular reference detected involving element "${i}"`,
 				elementId: i
 			}), !0;
 			if (e.has(i)) return !1;
 			e.add(i), t.add(i);
-			let a = l(i);
+			let a = u(i);
 			if (a?.definition?.items) {
-				for (let e of a.definition.items) if (r(e)) return t.delete(i), !0;
+				for (let e of a.definition.items) if (n(e)) return t.delete(i), !0;
 			}
 			let o = /* @__PURE__ */ new Set(), s = a;
 			for (; s?.definition?.parentId;) {
-				if (o.has(s.id)) return n.push({
+				if (o.has(s.id)) return r.push({
 					code: "CIRCULAR_PARENT_REFERENCE",
 					message: `Circular parent reference detected involving element "${s.id}"`,
 					elementId: s.id
 				}), !0;
-				o.add(s.id), s = l(s.definition.parentId);
+				o.add(s.id), s = u(s.definition.parentId);
 			}
 			return t.delete(i), !1;
 		};
-		Object.keys(i).forEach((t) => {
-			e.has(t) || r(t);
+		Object.keys(a).forEach((t) => {
+			e.has(t) || n(t);
 		});
-	}, g = () => {
+	}, _ = () => {
 		let e = /* @__PURE__ */ new Set(), t = 0;
-		a.forEach((r, i) => {
-			e.has(r) && n.push({
+		o.forEach((n, i) => {
+			e.has(n) && r.push({
 				code: "DUPLICATE_PAGE",
-				message: `Duplicate page ID "${r}" in pages array at index ${i}`,
-				elementId: r
-			}), e.add(r);
-			let a = l(r);
+				message: `Duplicate page ID "${n}" in pages array at index ${i}`,
+				elementId: n
+			}), e.add(n);
+			let a = u(n);
 			if (!a) {
-				n.push({
+				r.push({
 					code: "INVALID_PAGE_REFERENCE",
-					message: `Page ID "${r}" in pages array doesn't exist in flat`,
-					elementId: r
+					message: `Page ID "${n}" in pages array doesn't exist in flat`,
+					elementId: n
 				});
 				return;
 			}
-			a.definition.type !== "page" && n.push({
+			a.definition.type !== "page" && r.push({
 				code: "INVALID_PAGE_TYPE",
-				message: `Element "${r}" in pages array has type "${a.definition.type}" instead of "page"`,
-				elementId: r
-			}), a.definition.rootId !== r && n.push({
+				message: `Element "${n}" in pages array has type "${a.definition.type}" instead of "page"`,
+				elementId: n
+			}), a.definition.rootId !== n && r.push({
 				code: "PAGE_ROOT_ID_MISMATCH",
-				message: `Page "${r}" has rootId "${a.definition.rootId}" instead of its own ID`,
-				elementId: r
+				message: `Page "${n}" has rootId "${a.definition.rootId}" instead of its own ID`,
+				elementId: n
 			}), a.attributes?.default && t++;
-		}), t === 0 && a.length > 0 ? r.push({
+		}), t === 0 && o.length > 0 ? i.push({
 			code: "NO_DEFAULT_PAGE",
 			message: "No default page found in schema"
-		}) : t > 1 && r.push({
+		}) : t > 1 && i.push({
 			code: "MULTIPLE_DEFAULT_PAGES",
 			message: `Found ${t} default pages, expected 1`
 		});
-	}, _ = () => {
-		d().forEach((e) => {
-			let t = l(e);
+	}, v = () => {
+		f().forEach((e) => {
+			let t = u(e);
 			if (!t) return;
-			let r = (t) => {
-				let i = l(t);
-				i?.definition && (i.definition.rootId !== e && n.push({
+			let n = (t) => {
+				let i = u(t);
+				i?.definition && (i.definition.rootId !== e && r.push({
 					code: "ROOT_ID_MISMATCH",
 					message: `Element "${t}" has rootId "${i.definition.rootId}" but should be "${e}" (its root's ID)`,
 					elementId: t,
@@ -188,98 +189,110 @@ var t = (t) => {
 						expectedRootId: e,
 						actualRootId: i.definition.rootId
 					}
-				}), i.definition.items && i.definition.items.forEach((e) => r(e)));
+				}), i.definition.items && i.definition.items.forEach((e) => n(e)));
 			};
-			t.definition.items && t.definition.items.forEach((e) => r(e));
+			t.definition.items && t.definition.items.forEach((e) => n(e));
 		});
-	}, v = () => {
+	}, y = () => {
 		let e = /* @__PURE__ */ new Set();
-		o.forEach((t, r) => {
+		s.forEach((t, n) => {
 			if (!t.id) {
-				n.push({
+				r.push({
 					code: "INVALID_FOLDER",
-					message: `Page folder at index ${r} has no id`
+					message: `Page folder at index ${n} has no id`
 				});
 				return;
 			}
-			e.has(t.id) && n.push({
+			e.has(t.id) && r.push({
 				code: "DUPLICATE_FOLDER",
 				message: `Duplicate folder ID "${t.id}"`,
 				elementId: t.id
-			}), e.add(t.id), t.parentId && (e.has(t.parentId) || n.push({
+			}), e.add(t.id), t.parentId && (e.has(t.parentId) || r.push({
 				code: "ORPHANED_FOLDER_PARENT",
 				message: `Folder "${t.id}" has non-existent parent "${t.parentId}"`,
 				elementId: t.id,
 				details: { parentId: t.parentId }
 			}));
 		});
-	}, y = (e) => {
+	}, b = () => {
+		let e = /* @__PURE__ */ new Set();
+		d().forEach((n) => {
+			let i = t(u, n);
+			i.length === 0 || e.has(i[0]) || (i.forEach((t) => e.add(t)), r.push({
+				code: "LAYOUT_CYCLE",
+				message: `Layouts sit inside each other in a circle: ${i.join(" → ")}`,
+				elementId: n,
+				details: { cycle: i }
+			}));
+		});
+	}, x = (e) => {
 		let t = /* @__PURE__ */ new Set(), n = (e) => {
 			if (t.has(e)) return;
 			t.add(e);
-			let r = l(e);
+			let r = u(e);
 			r?.definition?.items && r.definition.items.forEach((e) => n(e));
-		}, a = (e) => {
-			n(e);
-			let t = l(e)?.attributes;
-			t?.layout && n(t.layout), t?.layoutContainer && n(t.layoutContainer);
+		}, r = /* @__PURE__ */ new Set(), o = (e) => {
+			if (r.has(e)) return;
+			r.add(e), n(e);
+			let t = u(e)?.attributes;
+			t?.layout && o(t.layout), t?.layoutContainer && n(t.layoutContainer);
 		};
-		e ? a(e) : d().forEach(a);
-		let o = new Set(d());
-		Object.keys(i).forEach((e) => {
-			let n = l(e);
-			n && !t.has(e) && n.definition.type !== "page" && !o.has(e) && r.push({
+		e ? o(e) : f().forEach(o);
+		let s = new Set(f());
+		Object.keys(a).forEach((e) => {
+			let n = u(e);
+			n && !t.has(e) && n.definition.type !== "page" && !s.has(e) && i.push({
 				code: "ORPHANED_ELEMENT",
 				message: `Element "${e}" is not reachable from any page or layout`,
 				elementId: e
 			});
 		});
-	}, b = () => {
+	}, S = () => {
 		let e = /* @__PURE__ */ new Set();
-		s.forEach((t, i) => {
+		c.forEach((t, n) => {
 			if (!t.name) {
-				n.push({
+				r.push({
 					code: "INVALID_VARIABLE",
-					message: `Variable at index ${i} has no name`
+					message: `Variable at index ${n} has no name`
 				});
 				return;
 			}
-			e.has(t.name) && n.push({
+			e.has(t.name) && r.push({
 				code: "DUPLICATE_VARIABLE",
 				message: `Duplicate variable name "${t.name}"`,
 				details: { variableName: t.name }
-			}), e.add(t.name), t.type || r.push({
+			}), e.add(t.name), t.type || i.push({
 				code: "MISSING_VARIABLE_TYPE",
 				message: `Variable "${t.name}" has no type`,
 				details: { variableName: t.name }
 			});
 		});
-	}, x = () => {
-		Object.values(i).forEach((t) => {
-			t && (e(t.id) || n.push({
+	}, C = () => {
+		Object.values(a).forEach((t) => {
+			t && (e(t.id) || r.push({
 				code: "INVALID_ELEMENT_ID",
 				message: `Element "${t.id}" has a name that must start with a letter, then letters, numbers, hyphens and underscores (no hyphen or underscore at the start, and no hyphen at the end)`,
 				elementId: t.id
 			}));
 		});
-	}, S = (e) => {
-		let t = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
-		Object.values(i).forEach((n) => {
-			if (!n) return;
-			t.add(n.id);
-			let i = e?.[n.definition.type];
-			i && a.set(n.id, i), r.add(n.definition.type);
-		}), Object.values(i).forEach((i) => {
-			i && i.definition.bindings && Object.entries(i.definition.bindings).forEach(([o, s]) => {
+	}, w = (e) => {
+		let t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map();
+		Object.values(a).forEach((r) => {
+			if (!r) return;
+			t.add(r.id);
+			let a = e?.[r.definition.type];
+			a && i.set(r.id, a), n.add(r.definition.type);
+		}), Object.values(a).forEach((a) => {
+			a && a.definition.bindings && Object.entries(a.definition.bindings).forEach(([o, s]) => {
 				(s ?? []).forEach((s) => {
 					let c = s.source.split(".")[0], l = c.indexOf("_");
 					if (l === -1) return;
-					let u = c.slice(0, l), d = c.slice(l + 1), f = `Element "${i.id}" binds ${o}.${s.to} to "${s.source}"`;
+					let u = c.slice(0, l), d = c.slice(l + 1), f = `Element "${a.id}" binds ${o}.${s.to} to "${s.source}"`;
 					if (!t.has(d)) {
-						(e || r.has(u)) && n.push({
+						(e || n.has(u)) && r.push({
 							code: "UNRESOLVED_BINDING_SOURCE",
 							message: `${f}, but no element answers to the name "${d}"`,
-							elementId: i.id,
+							elementId: a.id,
 							details: {
 								source: s.source,
 								elementId: d
@@ -287,11 +300,11 @@ var t = (t) => {
 						});
 						return;
 					}
-					let p = a.get(d);
-					p && p !== u && n.push({
+					let p = i.get(d);
+					p && p !== u && r.push({
 						code: "MISMATCHED_BINDING_SOURCE",
 						message: `${f}, but "${d}" publishes its source as "${p}_${d}"`,
-						elementId: i.id,
+						elementId: a.id,
 						details: {
 							source: s.source,
 							elementId: d,
@@ -301,54 +314,54 @@ var t = (t) => {
 				});
 			});
 		});
-	}, C = () => {
-		let t = new Set(Object.keys(i));
-		Object.values(i).forEach((r) => {
-			let i = r?.definition.interactions;
+	}, T = () => {
+		let t = new Set(Object.keys(a));
+		Object.values(a).forEach((n) => {
+			let i = n?.definition.interactions;
 			if (!i) return;
 			let a = Object.keys(i);
 			Object.entries(i).forEach(([i, o]) => {
-				e(i) || n.push({
+				e(i) || r.push({
 					code: "INVALID_INTERACTION_ID",
-					message: `Interaction "${i}" on element "${r.id}" has a name that must start with a letter, then letters, numbers, hyphens and underscores — a later step reads it as {{ ${i}.field }}`,
-					elementId: r.id
-				}), o.id !== i && n.push({
+					message: `Interaction "${i}" on element "${n.id}" has a name that must start with a letter, then letters, numbers, hyphens and underscores — a later step reads it as {{ ${i}.field }}`,
+					elementId: n.id
+				}), o.id !== i && r.push({
 					code: "INTERACTION_ID_MISMATCH",
-					message: `Interaction id "${o.id}" on element "${r.id}" doesn't match its key "${i}"`,
-					elementId: r.id
+					message: `Interaction id "${o.id}" on element "${n.id}" doesn't match its key "${i}"`,
+					elementId: n.id
 				}), ["beforeNode", "afterNode"].forEach((e) => {
 					let t = o[e];
-					t && !a.includes(t) && n.push({
+					t && !a.includes(t) && r.push({
 						code: "BROKEN_FLOW_LINK",
-						message: `Interaction "${o.id}" on element "${r.id}" names ${e} "${t}", which is not a node of this flow`,
-						elementId: r.id
+						message: `Interaction "${o.id}" on element "${n.id}" names ${e} "${t}", which is not a node of this flow`,
+						elementId: n.id
 					});
-				}), o.flowId && !a.includes(o.flowId) && n.push({
+				}), o.flowId && !a.includes(o.flowId) && r.push({
 					code: "BROKEN_FLOW_ID",
-					message: `Interaction "${o.id}" on element "${r.id}" belongs to flow "${o.flowId}", which is not a node of this flow`,
-					elementId: r.id
-				}), o.type === "callback" && o.elementId && !t.has(o.elementId) && n.push({
+					message: `Interaction "${o.id}" on element "${n.id}" belongs to flow "${o.flowId}", which is not a node of this flow`,
+					elementId: n.id
+				}), o.type === "callback" && o.elementId && !t.has(o.elementId) && r.push({
 					code: "UNRESOLVED_INTERACTION_TARGET",
-					message: `Interaction "${o.id}" on element "${r.id}" runs against "${o.elementId}", but no element answers to that name`,
-					elementId: r.id
+					message: `Interaction "${o.id}" on element "${n.id}" runs against "${o.elementId}", but no element answers to that name`,
+					elementId: n.id
 				});
 			});
 		});
-	}, w = () => {
-		Object.values(i).forEach((e) => {
+	}, E = () => {
+		Object.values(a).forEach((e) => {
 			if (!e || !e.definition.bindings) return;
 			let t = /* @__PURE__ */ new Set();
-			Object.entries(e.definition.bindings).forEach(([r, i]) => {
+			Object.entries(e.definition.bindings).forEach(([n, i]) => {
 				(i ?? []).forEach((i) => {
 					if (!i.id) {
-						n.push({
+						r.push({
 							code: "MISSING_BINDING_ID",
-							message: `Element "${e.id}" has a ${r} binding to "${i.to}" with no id`,
+							message: `Element "${e.id}" has a ${n} binding to "${i.to}" with no id`,
 							elementId: e.id
 						});
 						return;
 					}
-					t.has(i.id) && n.push({
+					t.has(i.id) && r.push({
 						code: "DUPLICATE_BINDING_ID",
 						message: `Element "${e.id}" has two bindings called "${i.id}"`,
 						elementId: e.id,
@@ -360,22 +373,22 @@ var t = (t) => {
 	};
 	return { validate: (e) => {
 		let { baseElementId: t } = e ?? {};
-		return f() ? (p(), m(), h(), g(), _(), v(), y(t), b(), x(), S(e?.sourceTypes), w(), C(), {
-			valid: n.length === 0,
-			errors: n,
-			warnings: r
+		return p() ? (m(), h(), g(), _(), v(), y(), b(), x(t), S(), C(), w(e?.sourceTypes), E(), T(), {
+			valid: r.length === 0,
+			errors: r,
+			warnings: i
 		}) : {
 			valid: !1,
-			errors: n,
-			warnings: r
+			errors: r,
+			warnings: i
 		};
 	} };
-}, n = (e, n) => t(e).validate(n), r = (e, t, r) => {
-	let i = n(e, t);
+}, r = (e, t) => n(e).validate(t), i = (e, t, n) => {
+	let i = r(e, t);
 	if (!i.valid) {
-		let e = `Invalid schema${r ? ` (${r})` : ""}: ${i.errors.map((e) => e.message).join("; ")}`;
+		let e = `Invalid schema${n ? ` (${n})` : ""}: ${i.errors.map((e) => e.message).join("; ")}`;
 		throw Error(e);
 	}
-}, i = (e, t) => n(e, t).valid;
+}, a = (e, t) => r(e, t).valid;
 //#endregion
-export { r as assertSchemaValid, i as isSchemaValid, n as validateSchema };
+export { i as assertSchemaValid, a as isSchemaValid, r as validateSchema };

package/dist/helpers/styleWithoutTag.d.ts

@@ -0,0 +1,14 @@
+import { Element, Style } from '@plitzi/sdk-shared';
+/**
+ * Why an element's style applies to nothing, if it does not.
+ *
+ * An `apiContainer` whose `subType` is empty — its default, the builder's "Container Tag: None" — renders its
+ * children and no element of its own, so a class with rules, a variant or a style binding on it styles nothing: its
+ * children sit straight in the parent's layout, and the gap or padding written on the provider is not there. Found on
+ * real spaces as a counter card with no card, a sticky sidebar that did not stick, and page sections that lost the
+ * gap between them.
+ *
+ * Needs the style document: the builder and the authoring package both give every element a class of its own, rules
+ * or not, so a class name on its own says nothing. A provider with no tag is legal and often right.
+ */
+export declare const styleWithoutTag: (element: Element, style: Pick<Style, "platform">) => string | undefined;

package/dist/helpers/styleWithoutTag.mjs

@@ -0,0 +1,10 @@
+//#region src/helpers/styleWithoutTag.ts
+var e = (e) => Object.keys(e ?? {}).length > 0, t = (t) => Object.values(t ?? {}).some(e), n = (n) => e(n.default) || t(n.states) || Object.values(n.variants ?? {}).some((n) => e(n.default) || t(n.states)), r = (e, t) => Object.values(e.platform).some((e) => Object.hasOwn(e, t) && Object.values(e[t].attributes).some(n)), i = (e, t) => {
+	if (e.definition.type !== "apiContainer") return;
+	let n = e.attributes.subType;
+	if (typeof n == "string" && n !== "") return;
+	let { styleSelectors: i, initialState: a, bindings: o } = e.definition, s = Object.values(i).some((e) => e.split(" ").some((e) => e && r(t, e))), c = Object.keys(a?.styleVariant ?? {}).length > 0, l = (o?.style?.length ?? 0) > 0;
+	if (s || c || l) return "has style but no `subType` (container tag), so it renders no element of its own and the style applies to nothing — its children lay out in its parent. Give it a tag (a `subType` of `div`, `section`, …) or move the style onto its parent or a child.";
+};
+//#endregion
+export { i as styleWithoutTag };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-schema",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -26,6 +26,10 @@
       "types": "./dist/helpers/schemaValidator.d.ts",
       "import": "./dist/helpers/schemaValidator.mjs"
     },
+    "./helpers/styleWithoutTag": {
+      "types": "./dist/helpers/styleWithoutTag.d.ts",
+      "import": "./dist/helpers/styleWithoutTag.mjs"
+    },
     "./index": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
@@ -45,14 +49,14 @@
   },
   "dependencies": {
     "@plitzi/plitzi-ui": "^1.6.21",
-    "@plitzi/sdk-shared": "0.36.1",
-    "@plitzi/sdk-style": "0.36.1",
+    "@plitzi/sdk-shared": "0.37.0",
+    "@plitzi/sdk-style": "0.37.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "eslint": "^9.39.5",
     "typescript": "^6.0.3",
     "vite": "^8.3.0",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.1"
   }
 }