@plitzi/sdk-shared 0.37.9 → 0.37.10

package/dist/style/breakpoints.d.ts

@@ -0,0 +1,11 @@
+import { DisplayMode } from '../types';
+/**
+ * Where each display mode begins, in CSS pixels — the widths a style's breakpoints are compiled at (`sdk-style`'s
+ * `generateCache`). A desktop's rules are the base; a tablet's apply up to and including 1024px and a phone's up to
+ * and including 768px, the phone's winning where the two meet.
+ */
+export declare const DISPLAY_MODE_MIN_WIDTH: Record<DisplayMode, number>;
+/** The same width as a media query writes it: in rem at the browser's default 16px, so it follows a visitor's zoom. */
+export declare const displayModeWidthRem: (mode: DisplayMode) => string;
+/** The display mode whose rules a page shows at a viewport width. */
+export declare const displayModeAt: (width: number) => DisplayMode;

package/dist/style/breakpoints.mjs

@@ -0,0 +1,8 @@
+//#region src/style/breakpoints.ts
+var e = {
+	desktop: 1024,
+	tablet: 768,
+	mobile: 0
+}, t = (t) => e[t] === 0 ? "0" : `${String(e[t] / 16)}rem`, n = (t) => t <= e.tablet ? "mobile" : t <= e.desktop ? "tablet" : "desktop";
+//#endregion
+export { e as DISPLAY_MODE_MIN_WIDTH, n as displayModeAt, t as displayModeWidthRem };

package/dist/style/displayModes.d.ts

@@ -0,0 +1,5 @@
+import { DisplayMode } from '../types';
+/** The breakpoints a style is written for, widest first — the keys of `Style['platform']`. */
+export declare const DISPLAY_MODES: readonly ["desktop", "tablet", "mobile"];
+/** Whether a key read off a document — `Object.keys(platform)` — is one of them. */
+export declare const isDisplayMode: (value: string) => value is DisplayMode;

package/dist/style/displayModes.mjs

@@ -0,0 +1,8 @@
+//#region src/style/displayModes.ts
+var e = [
+	"desktop",
+	"tablet",
+	"mobile"
+], t = (t) => e.some((e) => e === t);
+//#endregion
+export { e as DISPLAY_MODES, t as isDisplayMode };

package/dist/style/fontValidation.mjs

@@ -1,107 +1,108 @@
-import { isSafeFontUrl as e } from "./fonts.mjs";
+import { isRecord as e } from "../helpers/isRecord.mjs";
+import { isSafeFontUrl as t } from "./fonts.mjs";
 //#region src/style/fontValidation.ts
-var t = /* @__PURE__ */ new Set([
+var n = /* @__PURE__ */ new Set([
 	"system",
 	"google",
 	"remote",
 	"hosted"
-]), n = /* @__PURE__ */ new Set([
+]), r = /* @__PURE__ */ new Set([
 	"auto",
 	"block",
 	"swap",
 	"fallback",
 	"optional"
-]), r = /* @__PURE__ */ new Set(["woff2", "woff"]), i = 100, a = (e) => {
+]), i = /* @__PURE__ */ new Set(["woff2", "woff"]), a = 100, o = (e) => {
 	for (let t = 0; t < e.length; t += 1) {
 		let n = e.charCodeAt(t);
 		if (n < 32 || n === 127) return !0;
 	}
 	return !1;
-}, o = class extends Error {}, s = (e) => {
-	throw new o(e);
-}, c = (e) => typeof e == "object" && !!e && !Array.isArray(e), l = (e) => {
-	if (typeof e != "string") return s("font.family must be a string");
+}, s = class extends Error {}, c = (e) => {
+	throw new s(e);
+}, l = (e) => {
+	if (typeof e != "string") return c("font.family must be a string");
 	let t = e.trim();
-	return t ? t.length > i ? s(`font.family cannot be longer than ${i} characters`) : a(t) ? s("font.family cannot contain control characters") : t : s("font.family cannot be empty");
+	return t ? t.length > a ? c(`font.family cannot be longer than ${a} characters`) : o(t) ? c("font.family cannot contain control characters") : t : c("font.family cannot be empty");
 }, u = (e) => {
 	if (e === void 0) return [400];
-	if (!Array.isArray(e) || e.length === 0) return s("font.weights must be a non-empty list of numbers");
-	let t = e.map((e) => typeof e != "number" || !Number.isInteger(e) || e < 1 || e > 1e3 ? s("font.weights must hold whole numbers between 1 and 1000") : e);
+	if (!Array.isArray(e) || e.length === 0) return c("font.weights must be a non-empty list of numbers");
+	let t = e.map((e) => typeof e != "number" || !Number.isInteger(e) || e < 1 || e > 1e3 ? c("font.weights must hold whole numbers between 1 and 1000") : e);
 	return [...new Set(t)].sort((e, t) => e - t);
 }, d = (e) => {
 	if (e === void 0) return ["normal"];
-	if (!Array.isArray(e) || e.length === 0) return s("font.styles must be a non-empty list");
-	let t = e.map((e) => e !== "normal" && e !== "italic" ? s("font.styles may only hold \"normal\" or \"italic\"") : e);
+	if (!Array.isArray(e) || e.length === 0) return c("font.styles must be a non-empty list");
+	let t = e.map((e) => e !== "normal" && e !== "italic" ? c("font.styles may only hold \"normal\" or \"italic\"") : e);
 	return [...new Set(t)];
-}, f = (e, t) => {
-	if (!c(e)) return s(`font.files[${t}] must be an object`);
-	let { weight: n, style: i, format: a, unicodeRange: o } = e;
-	if (typeof n != "number" || !Number.isInteger(n) || n < 1 || n > 1e3) return s(`font.files[${t}].weight must be a whole number between 1 and 1000`);
-	if (i !== "normal" && i !== "italic") return s(`font.files[${t}].style must be "normal" or "italic"`);
-	if (typeof a != "string" || !r.has(a)) return s(`font.files[${t}].format must be "woff2" or "woff"`);
+}, f = (t, n) => {
+	if (!e(t)) return c(`font.files[${n}] must be an object`);
+	let { weight: r, style: a, format: o, unicodeRange: s } = t;
+	if (typeof r != "number" || !Number.isInteger(r) || r < 1 || r > 1e3) return c(`font.files[${n}].weight must be a whole number between 1 and 1000`);
+	if (a !== "normal" && a !== "italic") return c(`font.files[${n}].style must be "normal" or "italic"`);
+	if (typeof o != "string" || !i.has(o)) return c(`font.files[${n}].format must be "woff2" or "woff"`);
 	let l = {
-		weight: n,
-		style: i,
-		format: a
+		weight: r,
+		style: a,
+		format: o
 	};
-	if (o !== void 0) {
-		if (typeof o != "string") return s(`font.files[${t}].unicodeRange must be a string`);
-		l.unicodeRange = o;
+	if (s !== void 0) {
+		if (typeof s != "string") return c(`font.files[${n}].unicodeRange must be a string`);
+		l.unicodeRange = s;
 	}
 	return l;
-}, p = (e, t) => typeof e != "string" || !e ? s(`font.files[${t}].path must be a non-empty string`) : e.includes("://") || e.startsWith("/") ? s(`font.files[${t}].path must be relative to the font store, not a URL`) : e.split("/").includes("..") ? s(`font.files[${t}].path cannot climb out of the font store`) : e, m = (e) => !Array.isArray(e) || e.length === 0 ? s("font.files must be a non-empty list") : e, h = (r) => {
-	if (!c(r)) return s("a font must be an object");
-	let { source: i, fallback: a, display: o, preload: h } = r;
-	if (typeof i != "string" || !t.has(i)) return s("font.source must be one of: system, google, remote, hosted");
-	if (typeof a != "string" || !a.trim()) return s("font.fallback is required: it is what renders until the face arrives");
-	if (o !== void 0 && (typeof o != "string" || !n.has(o))) return s("font.display must be one of: auto, block, swap, fallback, optional");
-	if (h !== void 0 && typeof h != "boolean") return s("font.preload must be a boolean");
+}, p = (e, t) => typeof e != "string" || !e ? c(`font.files[${t}].path must be a non-empty string`) : e.includes("://") || e.startsWith("/") ? c(`font.files[${t}].path must be relative to the font store, not a URL`) : e.split("/").includes("..") ? c(`font.files[${t}].path cannot climb out of the font store`) : e, m = (e) => !Array.isArray(e) || e.length === 0 ? c("font.files must be a non-empty list") : e, h = (i) => {
+	if (!e(i)) return c("a font must be an object");
+	let { source: a, fallback: o, display: s, preload: h } = i;
+	if (typeof a != "string" || !n.has(a)) return c("font.source must be one of: system, google, remote, hosted");
+	if (typeof o != "string" || !o.trim()) return c("font.fallback is required: it is what renders until the face arrives");
+	if (s !== void 0 && (typeof s != "string" || !r.has(s))) return c("font.display must be one of: auto, block, swap, fallback, optional");
+	if (h !== void 0 && typeof h != "boolean") return c("font.preload must be a boolean");
 	let g = {
-		family: l(r.family),
-		fallback: a.trim(),
-		weights: u(r.weights),
-		styles: d(r.styles),
-		...o === void 0 ? {} : { display: o },
+		family: l(i.family),
+		fallback: o.trim(),
+		weights: u(i.weights),
+		styles: d(i.styles),
+		...s === void 0 ? {} : { display: s },
 		...h === void 0 ? {} : { preload: h }
 	};
-	if (i === "system") return {
+	if (a === "system") return {
 		...g,
 		source: "system"
 	};
-	if (i === "google") {
-		let { subsets: e } = r;
-		return e !== void 0 && (!Array.isArray(e) || e.some((e) => typeof e != "string")) ? s("font.subsets must be a list of strings") : {
+	if (a === "google") {
+		let { subsets: e } = i;
+		return e !== void 0 && (!Array.isArray(e) || e.some((e) => typeof e != "string")) ? c("font.subsets must be a list of strings") : {
 			...g,
 			source: "google",
 			...e === void 0 ? {} : { subsets: e }
 		};
 	}
-	if (i === "remote") {
-		let { stylesheet: t, files: n } = r;
-		return t === void 0 && n === void 0 ? s("a remote font needs either a stylesheet URL or the font files themselves") : t === void 0 ? {
+	if (a === "remote") {
+		let { stylesheet: e, files: n } = i;
+		return e === void 0 && n === void 0 ? c("a remote font needs either a stylesheet URL or the font files themselves") : e === void 0 ? {
 			...g,
 			source: "remote",
-			files: m(n).map((t, n) => {
-				let r = f(t, n), { url: i } = t;
-				return typeof i != "string" || !e(i) ? s(`font.files[${n}].url must be an https URL with no credentials in it`) : {
+			files: m(n).map((e, n) => {
+				let r = f(e, n), { url: i } = e;
+				return typeof i != "string" || !t(i) ? c(`font.files[${n}].url must be an https URL with no credentials in it`) : {
 					...r,
 					url: i
 				};
 			})
-		} : typeof t != "string" || !e(t) ? s("font.stylesheet must be an https URL with no credentials in it") : {
+		} : typeof e != "string" || !t(e) ? c("font.stylesheet must be an https URL with no credentials in it") : {
 			...g,
 			source: "remote",
-			stylesheet: t
+			stylesheet: e
 		};
 	}
 	return {
 		...g,
 		source: "hosted",
-		files: m(r.files).map((e, t) => ({
+		files: m(i.files).map((e, t) => ({
 			...f(e, t),
 			path: p(e.path, t)
 		}))
 	};
 };
 //#endregion
-export { o as FontValidationError, h as parseSpaceFont };
+export { s as FontValidationError, h as parseSpaceFont };

package/dist/style/fonts.d.ts

@@ -23,18 +23,6 @@ export declare const fontFamilyStack: (font: SpaceFont) => string;
 /** The family a `font-family` value leads with — the one the manifest is keyed by. The rest of the value is the
  *  fallback chain, which names nothing this space has to load. */
 export declare const primaryFamily: (value: string) => string;
-/**
- * One `css2` request for every Google family in the manifest.
- *
- * The axis tuples have to be listed in ascending order or the API answers 400, and the families
- * are sorted for a reason of our own: the URL is a cache key, and two spaces with the same fonts
- * in a different order should not be two entries in every CDN between here and the visitor.
- *
- * `subsets` is deliberately NOT sent. The v1 API took `subset=`; css2 answers with the full set of
- * unicode-range-split faces and lets the browser fetch only the ranges a page actually uses, which
- * is strictly better. The field stays on the manifest because mirroring (which downloads files
- * rather than linking them) does have to know which ranges to keep.
- */
 export declare const googleCss2Url: (fonts: GoogleFont[]) => string;
 /**
  * The stylesheet that draws family NAMES in their own typeface — the font picker, and nothing else.

package/dist/style/fonts.mjs

@@ -84,15 +84,15 @@ var e = "https://fonts.googleapis.com", t = {
 }, d = (e) => (e.split(",")[0] ?? "").trim().replace(/^['"]|['"]$/g, "").trim(), f = (e) => {
 	let t = [...new Set(e.weights)].filter((e) => Number.isFinite(e)).sort((e, t) => e - t);
 	return t.length > 0 ? t : [400];
-}, p = (e) => encodeURIComponent(e).replace(/%20/g, "+"), m = (t) => {
-	let n = [...t].sort((e, t) => e.family.localeCompare(t.family)).map((e) => {
+}, p = (e) => encodeURIComponent(e).replace(/%20/g, "+"), m = (e, t) => e === t ? 0 : e < t ? -1 : 1, h = (t) => {
+	let n = [...t].sort((e, t) => m(e.family, t.family)).map((e) => {
 		let t = f(e);
 		if (!e.styles.includes("italic")) return `family=${p(e.family)}:wght@${t.join(";")}`;
 		let n = [0, 1].flatMap((e) => t.map((t) => `${e},${t}`));
 		return `family=${p(e.family)}:ital,wght@${n.join(";")}`;
 	}), r = [...new Set(t.map((e) => e.display ?? "swap"))], i = r.length === 1 ? r[0] : "swap";
 	return `${e}/css2?${n.join("&")}&display=${i}`;
-}, h = (t, n) => `${e}/css2?${[...t].sort((e, t) => e.localeCompare(t)).map((e) => `family=${p(e)}`).join("&")}&text=${encodeURIComponent(n)}&display=swap`, g = "/fonts", _ = (e = g) => (t) => `${e.replace(/\/+$/, "")}/${t.replace(/^\/+/, "")}`, v = /* @__PURE__ */ new Set([
+}, g = (t, n) => `${e}/css2?${[...t].sort(m).map((e) => `family=${p(e)}`).join("&")}&text=${encodeURIComponent(n)}&display=swap`, _ = "/fonts", v = (e = _) => (t) => `${e.replace(/\/+$/, "")}/${t.replace(/^\/+/, "")}`, y = /* @__PURE__ */ new Set([
 	"serif",
 	"sans-serif",
 	"monospace",
@@ -111,16 +111,16 @@ var e = "https://fonts.googleapis.com", t = {
 	"revert",
 	"revert-layer",
 	"unset"
-]), y = (e) => {
+]), b = (e) => {
 	let t = /* @__PURE__ */ new Set();
 	for (let n of e.matchAll(/font-family\s*:\s*([^;}]+)/g)) {
 		let e = n[1];
 		if (e.includes("var(")) continue;
 		let r = d(e);
-		r && !v.has(r.toLowerCase()) && t.add(r);
+		r && !y.has(r.toLowerCase()) && t.add(r);
 	}
 	return [...t];
-}, b = (e, t) => [
+}, x = (e, t) => [
 	"@font-face{",
 	`font-family:${s(e.family)};`,
 	`font-style:${t.style === "italic" ? "italic" : "normal"};`,
@@ -129,12 +129,12 @@ var e = "https://fonts.googleapis.com", t = {
 	`src:url(${s(t.url)}) format(${s(t.format)});`,
 	t.unicodeRange && c.test(t.unicodeRange) ? `unicode-range:${t.unicodeRange};` : "",
 	"}"
-].join(""), x = (n, r) => {
+].join(""), S = (n, r) => {
 	let o = [], s = [], c = [], l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Set(), d = (e, t) => {
 		e && (u.add(e), l.set(e, (l.get(e) ?? !1) || t));
 	}, f = n.filter((e) => e.source === "google");
 	if (f.length > 0) {
-		let t = m(f);
+		let t = h(f);
 		d(e, !1), d("https://fonts.gstatic.com", !0), f.some((e) => e.preload) && s.push({
 			href: t,
 			rel: "preload",
@@ -158,7 +158,7 @@ var e = "https://fonts.googleapis.com", t = {
 		}
 		if (e.source === "remote" && e.files) {
 			e.files.filter((e) => i(e.url)).forEach((n) => {
-				d(a(n.url), !0), c.push(b(e, {
+				d(a(n.url), !0), c.push(x(e, {
 					...n,
 					url: n.url
 				})), e.preload && s.push({
@@ -173,7 +173,7 @@ var e = "https://fonts.googleapis.com", t = {
 		}
 		e.source === "hosted" && e.files.forEach((n) => {
 			let i = r(n.path);
-			d(a(i), !0), c.push(b(e, {
+			d(a(i), !0), c.push(x(e, {
 				...n,
 				url: i
 			})), e.preload && s.push({
@@ -195,4 +195,4 @@ var e = "https://fonts.googleapis.com", t = {
 	};
 };
 //#endregion
-export { n as SYSTEM_FONTS, r as availableFonts, y as familiesInCss, u as fontFamilyStack, _ as fontUrlResolver, x as fontsToHead, m as googleCss2Url, h as googleTextSubsetUrl, i as isSafeFontUrl, d as primaryFamily };
+export { n as SYSTEM_FONTS, r as availableFonts, b as familiesInCss, u as fontFamilyStack, v as fontUrlResolver, S as fontsToHead, h as googleCss2Url, g as googleTextSubsetUrl, i as isSafeFontUrl, d as primaryFamily };

package/dist/style/index.d.ts

@@ -1,9 +1,13 @@
 import { default as styleConstants } from './styleConstants';
+export * from './breakpoints';
+export * from './displayModes';
 export * from './fontAssets';
 export * from './fontValidation';
 export * from './fonts';
 export * from './fontsFromCss';
+export * from './layoutGrid';
 export * from './runtimeStyle';
+export * from './snippetStyle';
 export * from './styleConstants';
 export * from './styleStates';
 export { styleConstants };

package/dist/style/index.mjs

@@ -1,8 +1,12 @@
 import e, { EMPTY_STYLE_SCHEMA as t, StyleBindingsAllowed as n, baseDefaultValue as r, inheritableAttributesBase as i } from "./styleConstants.mjs";
-import { fontLinkAssets as a } from "./fontAssets.mjs";
-import { SYSTEM_FONTS as o, availableFonts as s, familiesInCss as c, fontFamilyStack as l, fontUrlResolver as u, fontsToHead as d, googleCss2Url as f, googleTextSubsetUrl as p, isSafeFontUrl as m, primaryFamily as h } from "./fonts.mjs";
-import { FontValidationError as g, parseSpaceFont as _ } from "./fontValidation.mjs";
-import { fallbackForFamily as v, fontsFromCss as y } from "./fontsFromCss.mjs";
-import { RUNTIME_STYLE_ID as b, markStyleCache as x, styleCacheFromDocument as S, styleCacheTravelsInDocument as C } from "./runtimeStyle.mjs";
-import { HIDDEN_CLASS as w, STYLE_STATES as T, STYLE_STATE_LABELS as E, inCascadeOrder as D, isKnownState as O, isStartingState as k, stateSuffix as A } from "./styleStates.mjs";
-export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, w as HIDDEN_CLASS, b as RUNTIME_STYLE_ID, T as STYLE_STATES, E as STYLE_STATE_LABELS, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, D as inCascadeOrder, i as inheritableAttributesBase, O as isKnownState, m as isSafeFontUrl, k as isStartingState, x as markStyleCache, _ as parseSpaceFont, h as primaryFamily, A as stateSuffix, S as styleCacheFromDocument, C as styleCacheTravelsInDocument, e as styleConstants };
+import { DISPLAY_MODE_MIN_WIDTH as a, displayModeAt as o, displayModeWidthRem as s } from "./breakpoints.mjs";
+import { DISPLAY_MODES as c, isDisplayMode as l } from "./displayModes.mjs";
+import { fontLinkAssets as u } from "./fontAssets.mjs";
+import { SYSTEM_FONTS as d, availableFonts as f, familiesInCss as p, fontFamilyStack as m, fontUrlResolver as h, fontsToHead as g, googleCss2Url as _, googleTextSubsetUrl as v, isSafeFontUrl as y, primaryFamily as b } from "./fonts.mjs";
+import { FontValidationError as x, parseSpaceFont as S } from "./fontValidation.mjs";
+import { fallbackForFamily as C, fontsFromCss as w } from "./fontsFromCss.mjs";
+import { LAYOUT_GRIDS as T, layoutGridCss as E, layoutGridLook as D } from "./layoutGrid.mjs";
+import { RUNTIME_STYLE_ID as O, markStyleCache as k, styleCacheFromDocument as A, styleCacheTravelsInDocument as j } from "./runtimeStyle.mjs";
+import { mergeSnippetStyle as M, sameSelector as N, selectorsOf as P } from "./snippetStyle.mjs";
+import { CURRENT_PAGE_SELECTOR as F, HIDDEN_CLASS as I, STYLE_STATES as L, STYLE_STATE_LABELS as R, inCascadeOrder as z, isKnownState as B, isStartingState as V, stateSuffix as H } from "./styleStates.mjs";
+export { F as CURRENT_PAGE_SELECTOR, c as DISPLAY_MODES, a as DISPLAY_MODE_MIN_WIDTH, t as EMPTY_STYLE_SCHEMA, x as FontValidationError, I as HIDDEN_CLASS, T as LAYOUT_GRIDS, O as RUNTIME_STYLE_ID, L as STYLE_STATES, R as STYLE_STATE_LABELS, d as SYSTEM_FONTS, n as StyleBindingsAllowed, f as availableFonts, r as baseDefaultValue, o as displayModeAt, s as displayModeWidthRem, C as fallbackForFamily, p as familiesInCss, m as fontFamilyStack, u as fontLinkAssets, h as fontUrlResolver, w as fontsFromCss, g as fontsToHead, _ as googleCss2Url, v as googleTextSubsetUrl, z as inCascadeOrder, i as inheritableAttributesBase, l as isDisplayMode, B as isKnownState, y as isSafeFontUrl, V as isStartingState, E as layoutGridCss, D as layoutGridLook, k as markStyleCache, M as mergeSnippetStyle, S as parseSpaceFont, b as primaryFamily, N as sameSelector, P as selectorsOf, H as stateSuffix, A as styleCacheFromDocument, j as styleCacheTravelsInDocument, e as styleConstants };

package/dist/style/layoutGrid.d.ts

@@ -0,0 +1,30 @@
+import { DisplayMode } from '../types';
+/**
+ * The layout grid drawn over a page on request: the columns it is usually laid out on — twelve on a desktop, eight on
+ * a tablet, four on a phone — so an element can be lined up by eye with the rest of it. The builder draws it over its
+ * canvas, the dev tools over a running page; both read it from here.
+ */
+export interface LayoutGrid {
+    columns: number;
+    gutter: number;
+    /** Clear on each side of the columns. */
+    margin: number;
+    /** The widest the columns get together; the margins grow past it. */
+    maxWidth?: number;
+}
+export declare const LAYOUT_GRIDS: Record<DisplayMode, LayoutGrid>;
+export interface LayoutGridLook {
+    width: string;
+    backgroundImage: string;
+    boxShadow: string;
+}
+/**
+ * How a grid is drawn on a box as wide as the page and centred in it: its width, its columns as a gradient, its edges.
+ * `zoom` scales every length, for a page drawn zoomed by an element the grid's box is not inside.
+ */
+export declare const layoutGridLook: ({ columns, gutter, margin, maxWidth }: LayoutGrid, zoom?: number) => LayoutGridLook;
+/**
+ * The grid as rules for a document of its own — the builder's canvas frame: fixed to its viewport and through to the
+ * page, the tablet's and the phone's taking over at the widths the page's own breakpoints switch at.
+ */
+export declare const layoutGridCss: (zoom?: number) => string;

package/dist/style/layoutGrid.mjs

@@ -0,0 +1,33 @@
+import { displayModeWidthRem as e } from "./breakpoints.mjs";
+//#region src/style/layoutGrid.ts
+var t = {
+	desktop: {
+		columns: 12,
+		gutter: 24,
+		margin: 32,
+		maxWidth: 1200
+	},
+	tablet: {
+		columns: 8,
+		gutter: 20,
+		margin: 24
+	},
+	mobile: {
+		columns: 4,
+		gutter: 16,
+		margin: 16
+	}
+}, n = "rgba(91, 61, 245, 0.07)", r = "rgba(91, 61, 245, 0.32)", i = (e, t) => `${String(e * t)}px`, a = ({ columns: e, gutter: t, margin: a, maxWidth: o }, s = 1) => {
+	let c = `calc(100% - ${i(a * 2, s)})`, l = `calc((100% - ${i(t * (e - 1), s)}) / ${String(e)})`;
+	return {
+		width: o === void 0 ? c : `min(${i(o, s)}, ${c})`,
+		backgroundImage: `repeating-linear-gradient(to right, ${n} 0px, ${n} ${l}, transparent ${l}, transparent calc(${l} + ${i(t, s)}))`,
+		boxShadow: `inset 1px 0 ${r}, inset -1px 0 ${r}`
+	};
+}, o = (e) => `width: ${e.width}; background-image: ${e.backgroundImage};`, s = (n = 1) => [
+	`html::after { content: ''; position: fixed; top: 0; bottom: 0; left: 50%; z-index: 2147483000; transform: translateX(-50%); pointer-events: none; box-shadow: ${a(t.desktop, n).boxShadow}; ${o(a(t.desktop, n))} }`,
+	`@media (max-width: ${e("desktop")}) { html::after { ${o(a(t.tablet, n))} } }`,
+	`@media (max-width: ${e("tablet")}) { html::after { ${o(a(t.mobile, n))} } }`
+].join("\n");
+//#endregion
+export { t as LAYOUT_GRIDS, s as layoutGridCss, a as layoutGridLook };

package/dist/style/notifications.d.ts

@@ -0,0 +1,52 @@
+/**
+ * How a space's notifications look — the toasts an `addNotification` step shows.
+ *
+ * Every value is any CSS colour or length, and a token is the right answer for all of them (`'var(--card)'`): a token
+ * follows the light/dark toggle, which the notifications already do. Left out, a value keeps the library's own.
+ */
+export interface NotificationsSpec {
+    /** The toast's surface. */
+    background?: string;
+    /** Its text. */
+    text?: string;
+    /** The accent of each `appearance`: its icon and its progress bar. */
+    success?: string;
+    danger?: string;
+    warning?: string;
+    info?: string;
+    /** Corner radius, e.g. `'12px'`. */
+    radius?: string;
+    /** Its typeface — the space's own, as a token: `'var(--font-sans)'`. */
+    font?: string;
+    /** Its text size, e.g. `'13px'`. */
+    fontSize?: string;
+    /** Its edge, as `border` writes it: `'1px solid var(--border)'`. */
+    border?: string;
+    /** Its depth, as `box-shadow` writes it: `'var(--shadow-lg)'`. */
+    shadow?: string;
+    /** The room inside it, e.g. `'12px 14px'`. */
+    padding?: string;
+}
+/** Every field `notifications` takes — what an editor of the setting (the MCP server's `patchSettings`) offers. */
+export declare const NOTIFICATIONS_FIELDS: readonly (keyof NotificationsSpec)[];
+/** Why a notifications spec would not style anything — a field it does not take, a value that is not one CSS value —
+ *  or `undefined` when it is sound. A `;` or a brace in a value would end the declaration early and let the rest of
+ *  the text become rules of its own. */
+export declare const notificationsProblem: (spec: Record<string, unknown> | undefined) => string | undefined;
+/**
+ * The rule that styles the toast container, or `''` when there is nothing to say. Fields it does not take and empty
+ * values say nothing; {@link notificationsProblem} is the check for a spec someone wrote.
+ */
+export declare const notificationsCss: (spec: NotificationsSpec | undefined) => string;
+/** The space's custom CSS with its notifications' rule after it — how a space's `customCss` carries both. */
+export declare const withNotificationsCss: (customCss: string, spec: NotificationsSpec | undefined) => string;
+/**
+ * A space's custom CSS read apart: the notifications' rule {@link notificationsCss} wrote, back as the spec, and the
+ * space's own CSS without it — so an editor shows and changes each on its own, and writes them together again with
+ * {@link withNotificationsCss}. A rule someone edited into something else (a declaration that is no field's) is left
+ * where it is, as the space's own CSS: read back, it would lose what was added to it.
+ */
+export declare const splitNotificationsCss: (customCss: string) => {
+    notifications: NotificationsSpec;
+    customCss: string;
+};

package/dist/style/notifications.mjs

@@ -0,0 +1,55 @@
+//#region src/style/notifications.ts
+var e = {
+	background: ["--toastify-color-light", "--toastify-color-dark"],
+	text: ["--toastify-text-color-light", "--toastify-text-color-dark"],
+	success: ["--toastify-color-success"],
+	danger: ["--toastify-color-error"],
+	warning: ["--toastify-color-warning"],
+	info: ["--toastify-color-info"],
+	radius: ["--toastify-toast-bd-radius"],
+	font: ["--toastify-font-family"],
+	shadow: ["--toastify-toast-shadow"],
+	padding: ["--toastify-toast-padding"]
+}, t = {
+	fontSize: "font-size",
+	border: "border"
+}, n = [...Object.keys(e), ...Object.keys(t)], r = (e) => n.includes(e), i = n.filter(r), a = ".Toastify__toast-container.plitzi-sdk-toasts", o = (e) => {
+	for (let [t, i] of Object.entries(e ?? {})) {
+		if (!r(t)) return `\`notifications\` has no "${t}". It takes ${n.join(", ")}.`;
+		if (i !== void 0 && (typeof i != "string" || i.trim() === "" || /[;{}]/.test(i))) return `\`notifications.${t}\` is ${JSON.stringify(i)}, which is not one CSS value. Write a colour or a length, like 'var(--card)' or '12px'.`;
+	}
+}, s = (n) => {
+	let i = [], o = [];
+	for (let [a, s] of Object.entries(n ?? {})) {
+		if (!r(a) || typeof s != "string" || s.trim() === "") continue;
+		let n = t[a];
+		n ? o.push(`  ${n}: ${s.trim()};`) : i.push(...(e[a] ?? []).map((e) => `  ${e}: ${s.trim()};`));
+	}
+	return [i.length > 0 ? `${a} {\n${i.join("\n")}\n}` : "", o.length > 0 ? `:where(${a} .Toastify__toast) {\n${o.join("\n")}\n}` : ""].filter(Boolean).join("\n");
+}, c = (e, t) => [e, s(t)].filter(Boolean).join("\n\n"), l = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), u = RegExp(`${l(a)}\\s*\\{([^}]*)\\}`), d = RegExp(`:where\\(${l(a)} \\.Toastify__toast\\)\\s*\\{([^}]*)\\}`), f = (e, t) => {
+	let n = [];
+	for (let r of e.split(";").map((e) => e.trim()).filter(Boolean)) {
+		let e = r.indexOf(":"), i = e > 0 ? t(r.slice(0, e).trim()) : void 0;
+		if (!i) return;
+		n.push([i, r.slice(e + 1).trim()]);
+	}
+	return n;
+}, p = new Map(Object.entries(e).flatMap(([e, t]) => r(e) ? t.map((t) => [t, e]) : [])), m = new Map(Object.entries(t).flatMap(([e, t]) => r(e) ? [[t, e]] : [])), h = (e) => {
+	let t = {};
+	for (let [n, r] of [[u, (e) => p.get(e)], [d, (e) => m.get(e)]]) {
+		let i = n.exec(e);
+		for (let [e, n] of (i ? f(i[1], r) : void 0) ?? []) t[e] = n;
+	}
+	let n = Object.keys(t).length > 0 ? s(t) : "";
+	if (!n || !e.endsWith(n)) return {
+		notifications: {},
+		customCss: e
+	};
+	let r = e.slice(0, e.length - n.length);
+	return {
+		notifications: t,
+		customCss: r.endsWith("\n\n") ? r.slice(0, -2) : r
+	};
+};
+//#endregion
+export { i as NOTIFICATIONS_FIELDS, s as notificationsCss, o as notificationsProblem, h as splitNotificationsCss, c as withNotificationsCss };

package/dist/style/snippetStyle.d.ts

@@ -0,0 +1,23 @@
+import { SnippetStyle, Style, StyleVariables } from '../types';
+/** Every selector a style answers to, in any display mode. */
+export declare const selectorsOf: (platform: Partial<Style["platform"]>) => Set<string>;
+/**
+ * Whether a selector says the same in two styles: the same rules in every display mode, and in the same modes. A
+ * selector one of them does not hold at all is not the same.
+ */
+export declare const sameSelector: (name: string, left: Partial<Style["platform"]>, right: Partial<Style["platform"]>) => boolean;
+/**
+ * A snippet's style, added to the style of the space it lands in — and nothing of the space's changed by it.
+ *
+ * A rule is added where the space has none under that name, in that display mode; a token where the space has none
+ * of that name. What the space already holds stays as it is: a class every element of the space wears, or a colour
+ * the whole space reads, is not the snippet's to restyle. A snippet whose class says something else under a name the
+ * space uses has been renamed before it gets here (`fitSnippet`, `@plitzi/sdk-schema`), so the only names left in
+ * common are the ones that say the same.
+ *
+ * The one rule both the editor and the server merge by, so the style a drop leaves is the same on both.
+ */
+export declare const mergeSnippetStyle: (space: SnippetStyle, snippet: SnippetStyle) => {
+    platform: Style["platform"];
+    variables: Partial<StyleVariables>;
+};

package/dist/style/snippetStyle.mjs

@@ -0,0 +1,32 @@
+import { sameValue as e } from "../history/diff.mjs";
+import { StyleVariableCategory as t } from "../types/StyleTypes.mjs";
+import { isDisplayMode as n } from "./displayModes.mjs";
+//#region src/style/snippetStyle.ts
+var r = (...e) => [...new Set(e.flatMap((e) => Object.keys(e).filter(n)))], i = (e) => {
+	if (!e) return;
+	let { cache: t, ...n } = e;
+	return n;
+}, a = (e) => new Set(Object.values(e).flatMap((e) => Object.keys(e))), o = (t, n, a) => r(n, a).every((r) => e(i(n[r]?.[t]), i(a[r]?.[t]))), s = (e, n) => {
+	let i = { ...e.platform };
+	r(n.platform).forEach((t) => {
+		let r = Object.entries(n.platform[t]).filter(([n]) => !Object.hasOwn(e.platform[t], n));
+		i[t] = {
+			...e.platform[t],
+			...Object.fromEntries(r)
+		};
+	});
+	let a = { ...e.variables };
+	for (let e of Object.values(t)) {
+		let t = n.variables?.[e], r = a[e] ?? {}, i = Object.entries(t ?? {}).filter(([e]) => !Object.hasOwn(r, e));
+		i.length > 0 && (a[e] = {
+			...r,
+			...Object.fromEntries(i)
+		});
+	}
+	return {
+		platform: i,
+		variables: a
+	};
+};
+//#endregion
+export { s as mergeSnippetStyle, o as sameSelector, a as selectorsOf };