@riverbankcms/sdk 0.130.0 → 0.130.2

package/dist/server/page-converter.mjs

@@ -1,1041 +1,8 @@
 import "react/jsx-runtime";
 import { z } from "zod";
+import "react";
 import * as fs from "fs/promises";
 import * as path from "path";
-//#region ../../node_modules/.pnpm/@vibrant+image@4.0.4/node_modules/@vibrant/image/dist/esm/histogram.js
-var Histogram = class {
-	constructor(pixels, opts) {
-		this.pixels = pixels;
-		this.opts = opts;
-		const { sigBits } = opts;
-		const getColorIndex = (r2, g2, b2) => (r2 << 2 * sigBits) + (g2 << sigBits) + b2;
-		this.getColorIndex = getColorIndex;
-		const rshift = 8 - sigBits;
-		const hn = 1 << 3 * sigBits;
-		const hist = new Uint32Array(hn);
-		let rmax;
-		let rmin;
-		let gmax;
-		let gmin;
-		let bmax;
-		let bmin;
-		let r;
-		let g;
-		let b;
-		let a;
-		rmax = gmax = bmax = 0;
-		rmin = gmin = bmin = Number.MAX_VALUE;
-		const n = pixels.length / 4;
-		let i = 0;
-		while (i < n) {
-			const offset = i * 4;
-			i++;
-			r = pixels[offset + 0];
-			g = pixels[offset + 1];
-			b = pixels[offset + 2];
-			a = pixels[offset + 3];
-			if (a === 0) continue;
-			r = r >> rshift;
-			g = g >> rshift;
-			b = b >> rshift;
-			const index = getColorIndex(r, g, b);
-			if (hist[index] === void 0) hist[index] = 0;
-			hist[index] += 1;
-			if (r > rmax) rmax = r;
-			if (r < rmin) rmin = r;
-			if (g > gmax) gmax = g;
-			if (g < gmin) gmin = g;
-			if (b > bmax) bmax = b;
-			if (b < bmin) bmin = b;
-		}
-		this._colorCount = hist.reduce((total, c) => c > 0 ? total + 1 : total, 0);
-		this.hist = hist;
-		this.rmax = rmax;
-		this.rmin = rmin;
-		this.gmax = gmax;
-		this.gmin = gmin;
-		this.bmax = bmax;
-		this.bmin = bmin;
-	}
-	get colorCount() {
-		return this._colorCount;
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+image@4.0.4/node_modules/@vibrant/image/dist/esm/index.js
-var ImageBase = class {
-	scaleDown(opts) {
-		const width = this.getWidth();
-		const height = this.getHeight();
-		let ratio = 1;
-		if (opts.maxDimension > 0) {
-			const maxSide = Math.max(width, height);
-			if (maxSide > opts.maxDimension) ratio = opts.maxDimension / maxSide;
-		} else ratio = 1 / opts.quality;
-		if (ratio < 1) this.resize(width * ratio, height * ratio, ratio);
-	}
-};
-function applyFilters(imageData, filters) {
-	if (filters.length > 0) {
-		const pixels = imageData.data;
-		const n = pixels.length / 4;
-		let offset;
-		let r;
-		let g;
-		let b;
-		let a;
-		for (let i = 0; i < n; i++) {
-			offset = i * 4;
-			r = pixels[offset + 0];
-			g = pixels[offset + 1];
-			b = pixels[offset + 2];
-			a = pixels[offset + 3];
-			for (let j = 0; j < filters.length; j++) if (!filters[j]?.(r, g, b, a)) {
-				pixels[offset + 3] = 0;
-				break;
-			}
-		}
-	}
-	return imageData;
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+image-browser@4.0.4/node_modules/@vibrant/image-browser/dist/esm/index.js
-function isRelativeUrl(url) {
-	const u = new URL(url, location.href);
-	return u.protocol === location.protocol && u.host === location.host && u.port === location.port;
-}
-function isSameOrigin(a, b) {
-	const ua = new URL(a);
-	const ub = new URL(b);
-	return ua.protocol === ub.protocol && ua.hostname === ub.hostname && ua.port === ub.port;
-}
-var BrowserImage = class extends ImageBase {
-	_getCanvas() {
-		if (!this._canvas) throw new Error("Canvas is not initialized");
-		return this._canvas;
-	}
-	_getContext() {
-		if (!this._context) throw new Error("Context is not initialized");
-		return this._context;
-	}
-	_getWidth() {
-		if (!this._width) throw new Error("Width is not initialized");
-		return this._width;
-	}
-	_getHeight() {
-		if (!this._height) throw new Error("Height is not initialized");
-		return this._height;
-	}
-	_initCanvas() {
-		const img = this.image;
-		if (!img) throw new Error("Image is not initialized");
-		const canvas = this._canvas = document.createElement("canvas");
-		const context = canvas.getContext("2d");
-		if (!context) throw new ReferenceError("Failed to create canvas context");
-		this._context = context;
-		canvas.className = "@vibrant/canvas";
-		canvas.style.display = "none";
-		this._width = canvas.width = img.width;
-		this._height = canvas.height = img.height;
-		context.drawImage(img, 0, 0);
-		document.body.appendChild(canvas);
-	}
-	load(image) {
-		let img;
-		let src;
-		if (typeof image === "string") {
-			img = document.createElement("img");
-			src = image;
-			if (!isRelativeUrl(src) && !isSameOrigin(window.location.href, src)) img.crossOrigin = "anonymous";
-			img.src = src;
-		} else if (image instanceof HTMLImageElement) {
-			img = image;
-			src = image.src;
-		} else return Promise.reject(/* @__PURE__ */ new Error(`Cannot load buffer as an image in browser`));
-		this.image = img;
-		return new Promise((resolve, reject) => {
-			const onImageLoad = () => {
-				this._initCanvas();
-				resolve(this);
-			};
-			if (img.complete) onImageLoad();
-			else {
-				img.onload = onImageLoad;
-				img.onerror = (_e) => reject(/* @__PURE__ */ new Error(`Fail to load image: ${src}`));
-			}
-		});
-	}
-	clear() {
-		this._getContext().clearRect(0, 0, this._getWidth(), this._getHeight());
-	}
-	update(imageData) {
-		this._getContext().putImageData(imageData, 0, 0);
-	}
-	getWidth() {
-		return this._getWidth();
-	}
-	getHeight() {
-		return this._getHeight();
-	}
-	resize(targetWidth, targetHeight, ratio) {
-		if (!this.image) throw new Error("Image is not initialized");
-		this._width = this._getCanvas().width = targetWidth;
-		this._height = this._getCanvas().height = targetHeight;
-		this._getContext().scale(ratio, ratio);
-		this._getContext().drawImage(this.image, 0, 0);
-	}
-	getPixelCount() {
-		return this._getWidth() * this._getHeight();
-	}
-	getImageData() {
-		return this._getContext().getImageData(0, 0, this._getWidth(), this._getHeight());
-	}
-	remove() {
-		if (this._canvas && this._canvas.parentNode) this._canvas.parentNode.removeChild(this._canvas);
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+core@4.0.4/node_modules/@vibrant/core/dist/esm/utils.js
-function assignDeep(target, ...sources) {
-	sources.forEach((s) => {
-		if (!s) return;
-		for (const key in s) if (s.hasOwnProperty(key)) {
-			const v = s[key];
-			if (Array.isArray(v)) target[key] = v.slice(0);
-			else if (typeof v === "object") {
-				if (!target[key]) target[key] = {};
-				assignDeep(target[key], v);
-			} else target[key] = v;
-		}
-	});
-	return target;
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+core@4.0.4/node_modules/@vibrant/core/dist/esm/options.js
-function buildProcessOptions(opts, override) {
-	const { colorCount, quantizer, generators, filters } = opts;
-	const commonQuantizerOpts = { colorCount };
-	const q = typeof quantizer === "string" ? {
-		name: quantizer,
-		options: {}
-	} : quantizer;
-	q.options = assignDeep({}, commonQuantizerOpts, q.options);
-	return assignDeep({}, {
-		quantizer: q,
-		generators,
-		filters
-	}, override);
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+core@4.0.4/node_modules/@vibrant/core/dist/esm/builder.js
-var Builder = class {
-	/**
-	* Arguments are the same as `Vibrant.constructor`.
-	*/
-	constructor(src, opts = {}) {
-		this._src = src;
-		this._opts = assignDeep({}, Vibrant.DefaultOpts, opts);
-	}
-	/**
-	* Sets `opts.colorCount` to `n`.
-	* @returns this `Builder` instance.
-	*/
-	maxColorCount(n) {
-		this._opts.colorCount = n;
-		return this;
-	}
-	/**
-	* Sets `opts.maxDimension` to `d`.
-	* @returns this `Builder` instance.
-	*/
-	maxDimension(d) {
-		this._opts.maxDimension = d;
-		return this;
-	}
-	/**
-	* Adds a filter function
-	* @returns this `Builder` instance.
-	*/
-	addFilter(name) {
-		if (!this._opts.filters) this._opts.filters = [name];
-		else this._opts.filters.push(name);
-		return this;
-	}
-	/**
-	* Removes a filter function.
-	* @returns this `Builder` instance.
-	*/
-	removeFilter(name) {
-		if (this._opts.filters) {
-			const i = this._opts.filters.indexOf(name);
-			if (i > 0) this._opts.filters.splice(i);
-		}
-		return this;
-	}
-	/**
-	* Clear all filters.
-	* @returns this `Builder` instance.
-	*/
-	clearFilters() {
-		this._opts.filters = [];
-		return this;
-	}
-	/**
-	* Sets `opts.quality` to `q`.
-	* @returns this `Builder` instance.
-	*/
-	quality(q) {
-		this._opts.quality = q;
-		return this;
-	}
-	/**
-	* Specifies which `Image` implementation class to use.
-	* @returns this `Builder` instance.
-	*/
-	useImageClass(imageClass) {
-		this._opts.ImageClass = imageClass;
-		return this;
-	}
-	/**
-	* Sets `opts.generator` to `generator`
-	* @returns this `Builder` instance.
-	*/
-	useGenerator(generator, options) {
-		if (!this._opts.generators) this._opts.generators = [];
-		this._opts.generators.push(options ? {
-			name: generator,
-			options
-		} : generator);
-		return this;
-	}
-	/**
-	* Specifies which `Quantizer` implementation class to use
-	* @returns this `Builder` instance.
-	*/
-	useQuantizer(quantizer, options) {
-		this._opts.quantizer = options ? {
-			name: quantizer,
-			options
-		} : quantizer;
-		return this;
-	}
-	/**
-	* Builds and returns a `Vibrant` instance as configured.
-	*/
-	build() {
-		return new Vibrant(this._src, this._opts);
-	}
-	/**
-	* Builds a `Vibrant` instance as configured and calls its `getPalette` method.
-	*/
-	getPalette() {
-		return this.build().getPalette();
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+core@4.0.4/node_modules/@vibrant/core/dist/esm/pipeline/index.js
-var Stage = class {
-	constructor(pipeline) {
-		this.pipeline = pipeline;
-		this._map = {};
-	}
-	names() {
-		return Object.keys(this._map);
-	}
-	has(name) {
-		return !!this._map[name];
-	}
-	get(name) {
-		return this._map[name];
-	}
-	register(name, stageFn) {
-		this._map[name] = stageFn;
-		return this.pipeline;
-	}
-};
-var BasicPipeline = class {
-	constructor() {
-		this.filter = new Stage(this);
-		this.quantizer = new Stage(this);
-		this.generator = new Stage(this);
-	}
-	_buildProcessTasks({ filters, quantizer, generators }) {
-		if (generators.length === 1 && generators[0] === "*") generators = this.generator.names();
-		return {
-			filters: filters.map((f) => createTask(this.filter, f)),
-			quantizer: createTask(this.quantizer, quantizer),
-			generators: generators.map((g) => createTask(this.generator, g))
-		};
-		function createTask(stage, o) {
-			let name;
-			let options;
-			if (typeof o === "string") name = o;
-			else {
-				name = o.name;
-				options = o.options;
-			}
-			return {
-				name,
-				fn: stage.get(name),
-				options
-			};
-		}
-	}
-	async process(imageData, opts) {
-		const { filters, quantizer, generators } = this._buildProcessTasks(opts);
-		const imageFilterData = await this._filterColors(filters, imageData);
-		const colors = await this._generateColors(quantizer, imageFilterData);
-		return {
-			colors,
-			palettes: await this._generatePalettes(generators, colors)
-		};
-	}
-	_filterColors(filters, imageData) {
-		return Promise.resolve(applyFilters(imageData, filters.map(({ fn }) => fn)));
-	}
-	_generateColors(quantizer, imageData) {
-		return Promise.resolve(quantizer.fn(imageData.data, quantizer.options));
-	}
-	async _generatePalettes(generators, colors) {
-		const promiseArr = await Promise.all(generators.map(({ fn, options }) => Promise.resolve(fn(colors, options))));
-		return Promise.resolve(promiseArr.reduce((promises, promiseVal, i) => {
-			promises[generators[i].name] = promiseVal;
-			return promises;
-		}, {}));
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+color@4.0.4/node_modules/@vibrant/color/dist/esm/converter.js
-function rgbToHex(r, g, b) {
-	return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1, 7);
-}
-function rgbToHsl(r, g, b) {
-	r /= 255;
-	g /= 255;
-	b /= 255;
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
-	let h = 0;
-	let s = 0;
-	const l = (max + min) / 2;
-	if (max !== min) {
-		const d = max - min;
-		s = l > .5 ? d / (2 - max - min) : d / (max + min);
-		switch (max) {
-			case r:
-				h = (g - b) / d + (g < b ? 6 : 0);
-				break;
-			case g:
-				h = (b - r) / d + 2;
-				break;
-			case b:
-				h = (r - g) / d + 4;
-				break;
-		}
-		h /= 6;
-	}
-	return [
-		h,
-		s,
-		l
-	];
-}
-function hslToRgb(h, s, l) {
-	let r;
-	let g;
-	let b;
-	function hue2rgb(p, q, t) {
-		if (t < 0) t += 1;
-		if (t > 1) t -= 1;
-		if (t < 1 / 6) return p + (q - p) * 6 * t;
-		if (t < 1 / 2) return q;
-		if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-		return p;
-	}
-	if (s === 0) r = g = b = l;
-	else {
-		const q = l < .5 ? l * (1 + s) : l + s - l * s;
-		const p = 2 * l - q;
-		r = hue2rgb(p, q, h + 1 / 3);
-		g = hue2rgb(p, q, h);
-		b = hue2rgb(p, q, h - 1 / 3);
-	}
-	return [
-		r * 255,
-		g * 255,
-		b * 255
-	];
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+color@4.0.4/node_modules/@vibrant/color/dist/esm/index.js
-var Swatch = class Swatch {
-	static applyFilters(colors, filters) {
-		return filters.length > 0 ? colors.filter(({ r, g, b }) => {
-			for (let j = 0; j < filters.length; j++) if (!filters[j]?.(r, g, b, 255)) return false;
-			return true;
-		}) : colors;
-	}
-	/**
-	* Make a value copy of a swatch based on a previous one. Returns a new Swatch instance
-	* @param {Swatch} swatch
-	*/
-	static clone(swatch) {
-		return new Swatch(swatch._rgb, swatch._population);
-	}
-	/**
-	* The red value in the RGB value
-	*/
-	get r() {
-		return this._rgb[0];
-	}
-	/**
-	* The green value in the RGB value
-	*/
-	get g() {
-		return this._rgb[1];
-	}
-	/**
-	* The blue value in the RGB value
-	*/
-	get b() {
-		return this._rgb[2];
-	}
-	/**
-	* The color value as a rgb value
-	*/
-	get rgb() {
-		return this._rgb;
-	}
-	/**
-	* The color value as a hsl value
-	*/
-	get hsl() {
-		if (!this._hsl) {
-			const [r, g, b] = this._rgb;
-			this._hsl = rgbToHsl(r, g, b);
-		}
-		return this._hsl;
-	}
-	/**
-	* The color value as a hex string
-	*/
-	get hex() {
-		if (!this._hex) {
-			const [r, g, b] = this._rgb;
-			this._hex = rgbToHex(r, g, b);
-		}
-		return this._hex;
-	}
-	get population() {
-		return this._population;
-	}
-	/**
-	* Get the JSON object for the swatch
-	*/
-	toJSON() {
-		return {
-			rgb: this.rgb,
-			population: this.population
-		};
-	}
-	getYiq() {
-		if (!this._yiq) {
-			const rgb = this._rgb;
-			this._yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3;
-		}
-		return this._yiq;
-	}
-	/**
-	* Returns an appropriate color to use for any 'title' text which is displayed over this Swatch's color.
-	*/
-	get titleTextColor() {
-		if (!this._titleTextColor) this._titleTextColor = this.getYiq() < 200 ? "#fff" : "#000";
-		return this._titleTextColor;
-	}
-	/**
-	* Returns an appropriate color to use for any 'body' text which is displayed over this Swatch's color.
-	*/
-	get bodyTextColor() {
-		if (!this._bodyTextColor) this._bodyTextColor = this.getYiq() < 150 ? "#fff" : "#000";
-		return this._bodyTextColor;
-	}
-	/**
-	* Internal use.
-	* @param rgb `[r, g, b]`
-	* @param population Population of the color in an image
-	*/
-	constructor(rgb, population) {
-		this._rgb = rgb;
-		this._population = population;
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+core@4.0.4/node_modules/@vibrant/core/dist/esm/index.js
-const _Vibrant = class _Vibrant {
-	/**
-	*
-	* @param _src Path to image file (supports HTTP/HTTPs)
-	* @param opts Options (optional)
-	*/
-	constructor(_src, opts) {
-		this._src = _src;
-		this.opts = assignDeep({}, _Vibrant.DefaultOpts, opts);
-	}
-	static use(pipeline) {
-		this._pipeline = pipeline;
-	}
-	static from(src) {
-		return new Builder(src);
-	}
-	get result() {
-		return this._result;
-	}
-	_process(image, opts) {
-		image.scaleDown(this.opts);
-		const processOpts = buildProcessOptions(this.opts, opts);
-		return _Vibrant._pipeline.process(image.getImageData(), processOpts);
-	}
-	async getPalette() {
-		const image = new this.opts.ImageClass();
-		try {
-			const image1 = await image.load(this._src);
-			const result1 = await this._process(image1, { generators: ["default"] });
-			this._result = result1;
-			const res = result1.palettes["default"];
-			if (!res) throw new Error(`Something went wrong and a palette was not found, please file a bug against our GitHub repo: https://github.com/vibrant-Colors/node-vibrant/`);
-			image.remove();
-			return res;
-		} catch (err) {
-			image.remove();
-			return Promise.reject(err);
-		}
-	}
-	async getPalettes() {
-		const image = new this.opts.ImageClass();
-		try {
-			const image1 = await image.load(this._src);
-			const result1 = await this._process(image1, { generators: ["*"] });
-			this._result = result1;
-			const res = result1.palettes;
-			image.remove();
-			return res;
-		} catch (err) {
-			image.remove();
-			return Promise.reject(err);
-		}
-	}
-};
-_Vibrant.DefaultOpts = {
-	colorCount: 64,
-	quality: 5,
-	filters: []
-};
-let Vibrant = _Vibrant;
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/configs/config.js
-Vibrant.DefaultOpts.quantizer = "mmcq";
-Vibrant.DefaultOpts.generators = ["default"];
-Vibrant.DefaultOpts.filters = ["default"];
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/configs/browser.js
-Vibrant.DefaultOpts.ImageClass = BrowserImage;
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+quantizer-mmcq@4.0.4/node_modules/@vibrant/quantizer-mmcq/dist/esm/vbox.js
-const SIGBITS = 5;
-const RSHIFT = 8 - SIGBITS;
-var VBox = class VBox {
-	constructor(r1, r2, g1, g2, b1, b2, histogram) {
-		this.histogram = histogram;
-		this._volume = -1;
-		this._avg = null;
-		this._count = -1;
-		this.dimension = {
-			r1,
-			r2,
-			g1,
-			g2,
-			b1,
-			b2
-		};
-	}
-	static build(pixels) {
-		const h = new Histogram(pixels, { sigBits: SIGBITS });
-		const { rmin, rmax, gmin, gmax, bmin, bmax } = h;
-		return new VBox(rmin, rmax, gmin, gmax, bmin, bmax, h);
-	}
-	invalidate() {
-		this._volume = this._count = -1;
-		this._avg = null;
-	}
-	volume() {
-		if (this._volume < 0) {
-			const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-			this._volume = (r2 - r1 + 1) * (g2 - g1 + 1) * (b2 - b1 + 1);
-		}
-		return this._volume;
-	}
-	count() {
-		if (this._count < 0) {
-			const { hist, getColorIndex } = this.histogram;
-			const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-			let c = 0;
-			for (let r = r1; r <= r2; r++) for (let g = g1; g <= g2; g++) for (let b = b1; b <= b2; b++) {
-				const index = getColorIndex(r, g, b);
-				if (!hist[index]) continue;
-				c += hist[index];
-			}
-			this._count = c;
-		}
-		return this._count;
-	}
-	clone() {
-		const { histogram } = this;
-		const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-		return new VBox(r1, r2, g1, g2, b1, b2, histogram);
-	}
-	avg() {
-		if (!this._avg) {
-			const { hist, getColorIndex } = this.histogram;
-			const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-			let ntot = 0;
-			const mult = 1 << 8 - SIGBITS;
-			let rsum;
-			let gsum;
-			let bsum;
-			rsum = gsum = bsum = 0;
-			for (let r = r1; r <= r2; r++) for (let g = g1; g <= g2; g++) for (let b = b1; b <= b2; b++) {
-				const h = hist[getColorIndex(r, g, b)];
-				if (!h) continue;
-				ntot += h;
-				rsum += h * (r + .5) * mult;
-				gsum += h * (g + .5) * mult;
-				bsum += h * (b + .5) * mult;
-			}
-			if (ntot) this._avg = [
-				~~(rsum / ntot),
-				~~(gsum / ntot),
-				~~(bsum / ntot)
-			];
-			else this._avg = [
-				~~(mult * (r1 + r2 + 1) / 2),
-				~~(mult * (g1 + g2 + 1) / 2),
-				~~(mult * (b1 + b2 + 1) / 2)
-			];
-		}
-		return this._avg;
-	}
-	contains(rgb) {
-		let [r, g, b] = rgb;
-		const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-		r >>= RSHIFT;
-		g >>= RSHIFT;
-		b >>= RSHIFT;
-		return r >= r1 && r <= r2 && g >= g1 && g <= g2 && b >= b1 && b <= b2;
-	}
-	split() {
-		const { hist, getColorIndex } = this.histogram;
-		const { r1, r2, g1, g2, b1, b2 } = this.dimension;
-		const count = this.count();
-		if (!count) return [];
-		if (count === 1) return [this.clone()];
-		const rw = r2 - r1 + 1;
-		const gw = g2 - g1 + 1;
-		const bw = b2 - b1 + 1;
-		const maxw = Math.max(rw, gw, bw);
-		let accSum = null;
-		let sum;
-		let total;
-		sum = total = 0;
-		let maxd = null;
-		if (maxw === rw) {
-			maxd = "r";
-			accSum = new Uint32Array(r2 + 1);
-			for (let r = r1; r <= r2; r++) {
-				sum = 0;
-				for (let g = g1; g <= g2; g++) for (let b = b1; b <= b2; b++) {
-					const index = getColorIndex(r, g, b);
-					if (!hist[index]) continue;
-					sum += hist[index];
-				}
-				total += sum;
-				accSum[r] = total;
-			}
-		} else if (maxw === gw) {
-			maxd = "g";
-			accSum = new Uint32Array(g2 + 1);
-			for (let g = g1; g <= g2; g++) {
-				sum = 0;
-				for (let r = r1; r <= r2; r++) for (let b = b1; b <= b2; b++) {
-					const index = getColorIndex(r, g, b);
-					if (!hist[index]) continue;
-					sum += hist[index];
-				}
-				total += sum;
-				accSum[g] = total;
-			}
-		} else {
-			maxd = "b";
-			accSum = new Uint32Array(b2 + 1);
-			for (let b = b1; b <= b2; b++) {
-				sum = 0;
-				for (let r = r1; r <= r2; r++) for (let g = g1; g <= g2; g++) {
-					const index = getColorIndex(r, g, b);
-					if (!hist[index]) continue;
-					sum += hist[index];
-				}
-				total += sum;
-				accSum[b] = total;
-			}
-		}
-		let splitPoint = -1;
-		const reverseSum = new Uint32Array(accSum.length);
-		for (let i = 0; i < accSum.length; i++) {
-			const d = accSum[i];
-			if (!d) continue;
-			if (splitPoint < 0 && d > total / 2) splitPoint = i;
-			reverseSum[i] = total - d;
-		}
-		const vbox = this;
-		function doCut(d) {
-			const dim1 = d + "1";
-			const dim2 = d + "2";
-			const d1 = vbox.dimension[dim1];
-			let d2 = vbox.dimension[dim2];
-			const vbox1 = vbox.clone();
-			const vbox2 = vbox.clone();
-			const left = splitPoint - d1;
-			const right = d2 - splitPoint;
-			if (left <= right) {
-				d2 = Math.min(d2 - 1, ~~(splitPoint + right / 2));
-				d2 = Math.max(0, d2);
-			} else {
-				d2 = Math.max(d1, ~~(splitPoint - 1 - left / 2));
-				d2 = Math.min(vbox.dimension[dim2], d2);
-			}
-			while (!accSum[d2]) d2++;
-			let c2 = reverseSum[d2];
-			while (!c2 && accSum[d2 - 1]) c2 = reverseSum[--d2];
-			vbox1.dimension[dim2] = d2;
-			vbox2.dimension[dim1] = d2 + 1;
-			return [vbox1, vbox2];
-		}
-		return doCut(maxd);
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+quantizer-mmcq@4.0.4/node_modules/@vibrant/quantizer-mmcq/dist/esm/pqueue.js
-var PQueue = class {
-	_sort() {
-		if (!this._sorted) {
-			this.contents.sort(this._comparator);
-			this._sorted = true;
-		}
-	}
-	constructor(comparator) {
-		this._comparator = comparator;
-		this.contents = [];
-		this._sorted = false;
-	}
-	push(item) {
-		this.contents.push(item);
-		this._sorted = false;
-	}
-	peek(index) {
-		this._sort();
-		index = typeof index === "number" ? index : this.contents.length - 1;
-		return this.contents[index];
-	}
-	pop() {
-		this._sort();
-		return this.contents.pop();
-	}
-	size() {
-		return this.contents.length;
-	}
-	map(mapper) {
-		this._sort();
-		return this.contents.map(mapper);
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+quantizer-mmcq@4.0.4/node_modules/@vibrant/quantizer-mmcq/dist/esm/index.js
-const fractByPopulations = .75;
-function _splitBoxes(pq, target) {
-	let lastSize = pq.size();
-	while (pq.size() < target) {
-		const vbox = pq.pop();
-		if (vbox && vbox.count() > 0) {
-			const [vbox1, vbox2] = vbox.split();
-			if (!vbox1) break;
-			pq.push(vbox1);
-			if (vbox2 && vbox2.count() > 0) pq.push(vbox2);
-			if (pq.size() === lastSize) break;
-			else lastSize = pq.size();
-		} else break;
-	}
-}
-const MMCQ = (pixels, opts) => {
-	if (pixels.length === 0 || opts.colorCount < 2 || opts.colorCount > 256) throw new Error("Wrong MMCQ parameters");
-	const vbox = VBox.build(pixels);
-	vbox.histogram.colorCount;
-	const pq = new PQueue((a, b) => a.count() - b.count());
-	pq.push(vbox);
-	_splitBoxes(pq, fractByPopulations * opts.colorCount);
-	const pq2 = new PQueue((a, b) => a.count() * a.volume() - b.count() * b.volume());
-	pq2.contents = pq.contents;
-	_splitBoxes(pq2, opts.colorCount - pq2.size());
-	return generateSwatches(pq2);
-};
-function generateSwatches(pq) {
-	const swatches = [];
-	while (pq.size()) {
-		const v = pq.pop();
-		const color = v.avg();
-		const [r, g, b] = color;
-		swatches.push(new Swatch(color, v.count()));
-	}
-	return swatches;
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vibrant+generator-default@4.0.4/node_modules/@vibrant/generator-default/dist/esm/index.js
-const DefaultOpts = {
-	targetDarkLuma: .26,
-	maxDarkLuma: .45,
-	minLightLuma: .55,
-	targetLightLuma: .74,
-	minNormalLuma: .3,
-	targetNormalLuma: .5,
-	maxNormalLuma: .7,
-	targetMutesSaturation: .3,
-	maxMutesSaturation: .4,
-	targetVibrantSaturation: 1,
-	minVibrantSaturation: .35,
-	weightSaturation: 3,
-	weightLuma: 6.5,
-	weightPopulation: .5
-};
-function _findMaxPopulation(swatches) {
-	let p = 0;
-	swatches.forEach((s) => {
-		p = Math.max(p, s.population);
-	});
-	return p;
-}
-function _isAlreadySelected(palette, s) {
-	return palette.Vibrant === s || palette.DarkVibrant === s || palette.LightVibrant === s || palette.Muted === s || palette.DarkMuted === s || palette.LightMuted === s;
-}
-function _createComparisonValue(saturation, targetSaturation, luma, targetLuma, population, maxPopulation, opts) {
-	function weightedMean(...values) {
-		let sum = 0;
-		let weightSum = 0;
-		for (let i = 0; i < values.length; i += 2) {
-			const value = values[i];
-			const weight = values[i + 1];
-			if (!value || !weight) continue;
-			sum += value * weight;
-			weightSum += weight;
-		}
-		return sum / weightSum;
-	}
-	function invertDiff(value, targetValue) {
-		return 1 - Math.abs(value - targetValue);
-	}
-	return weightedMean(invertDiff(saturation, targetSaturation), opts.weightSaturation, invertDiff(luma, targetLuma), opts.weightLuma, population / maxPopulation, opts.weightPopulation);
-}
-function _findColorVariation(palette, swatches, maxPopulation, targetLuma, minLuma, maxLuma, targetSaturation, minSaturation, maxSaturation, opts) {
-	let max = null;
-	let maxValue = 0;
-	swatches.forEach((swatch) => {
-		const [, s, l] = swatch.hsl;
-		if (s >= minSaturation && s <= maxSaturation && l >= minLuma && l <= maxLuma && !_isAlreadySelected(palette, swatch)) {
-			const value = _createComparisonValue(s, targetSaturation, l, targetLuma, swatch.population, maxPopulation, opts);
-			if (max === null || value > maxValue) {
-				max = swatch;
-				maxValue = value;
-			}
-		}
-	});
-	return max;
-}
-function _generateVariationColors(swatches, maxPopulation, opts) {
-	const palette = {
-		Vibrant: null,
-		DarkVibrant: null,
-		LightVibrant: null,
-		Muted: null,
-		DarkMuted: null,
-		LightMuted: null
-	};
-	palette.Vibrant = _findColorVariation(palette, swatches, maxPopulation, opts.targetNormalLuma, opts.minNormalLuma, opts.maxNormalLuma, opts.targetVibrantSaturation, opts.minVibrantSaturation, 1, opts);
-	palette.LightVibrant = _findColorVariation(palette, swatches, maxPopulation, opts.targetLightLuma, opts.minLightLuma, 1, opts.targetVibrantSaturation, opts.minVibrantSaturation, 1, opts);
-	palette.DarkVibrant = _findColorVariation(palette, swatches, maxPopulation, opts.targetDarkLuma, 0, opts.maxDarkLuma, opts.targetVibrantSaturation, opts.minVibrantSaturation, 1, opts);
-	palette.Muted = _findColorVariation(palette, swatches, maxPopulation, opts.targetNormalLuma, opts.minNormalLuma, opts.maxNormalLuma, opts.targetMutesSaturation, 0, opts.maxMutesSaturation, opts);
-	palette.LightMuted = _findColorVariation(palette, swatches, maxPopulation, opts.targetLightLuma, opts.minLightLuma, 1, opts.targetMutesSaturation, 0, opts.maxMutesSaturation, opts);
-	palette.DarkMuted = _findColorVariation(palette, swatches, maxPopulation, opts.targetDarkLuma, 0, opts.maxDarkLuma, opts.targetMutesSaturation, 0, opts.maxMutesSaturation, opts);
-	return palette;
-}
-function _generateEmptySwatches(palette, _maxPopulation, opts) {
-	if (!palette.Vibrant && !palette.DarkVibrant && !palette.LightVibrant) {
-		if (!palette.DarkVibrant && palette.DarkMuted) {
-			let [h, s, l] = palette.DarkMuted.hsl;
-			l = opts.targetDarkLuma;
-			palette.DarkVibrant = new Swatch(hslToRgb(h, s, l), 0);
-		}
-		if (!palette.LightVibrant && palette.LightMuted) {
-			let [h, s, l] = palette.LightMuted.hsl;
-			l = opts.targetDarkLuma;
-			palette.DarkVibrant = new Swatch(hslToRgb(h, s, l), 0);
-		}
-	}
-	if (!palette.Vibrant && palette.DarkVibrant) {
-		let [h, s, l] = palette.DarkVibrant.hsl;
-		l = opts.targetNormalLuma;
-		palette.Vibrant = new Swatch(hslToRgb(h, s, l), 0);
-	} else if (!palette.Vibrant && palette.LightVibrant) {
-		let [h, s, l] = palette.LightVibrant.hsl;
-		l = opts.targetNormalLuma;
-		palette.Vibrant = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.DarkVibrant && palette.Vibrant) {
-		let [h, s, l] = palette.Vibrant.hsl;
-		l = opts.targetDarkLuma;
-		palette.DarkVibrant = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.LightVibrant && palette.Vibrant) {
-		let [h, s, l] = palette.Vibrant.hsl;
-		l = opts.targetLightLuma;
-		palette.LightVibrant = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.Muted && palette.Vibrant) {
-		let [h, s, l] = palette.Vibrant.hsl;
-		l = opts.targetMutesSaturation;
-		palette.Muted = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.DarkMuted && palette.DarkVibrant) {
-		let [h, s, l] = palette.DarkVibrant.hsl;
-		l = opts.targetMutesSaturation;
-		palette.DarkMuted = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.LightMuted && palette.LightVibrant) {
-		let [h, s, l] = palette.LightVibrant.hsl;
-		l = opts.targetMutesSaturation;
-		palette.LightMuted = new Swatch(hslToRgb(h, s, l), 0);
-	}
-}
-const DefaultGenerator = ((swatches, opts) => {
-	opts = Object.assign({}, DefaultOpts, opts);
-	const maxPopulation = _findMaxPopulation(swatches);
-	const palette = _generateVariationColors(swatches, maxPopulation, opts);
-	_generateEmptySwatches(palette, maxPopulation, opts);
-	return palette;
-});
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/pipeline/index.js
-const pipeline = new BasicPipeline().filter.register("default", (r, g, b, a) => a >= 125 && !(r > 250 && g > 250 && b > 250)).quantizer.register("mmcq", MMCQ).generator.register("default", DefaultGenerator);
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/browser.js
-Vibrant.use(pipeline);
-//#endregion
 //#region ../theme-core/src/tokens/colorTokenParts.ts
 function parseOpacityPercent(source) {
 	const trimmed = source.trim();
@@ -4984,9 +3951,30 @@ function presetCategory(recipe) {
 //#region ../theme-core/src/cards/types.ts
 const cardVariantRoleValues = ["default", "alternative"];
 const boxlessCardVariantValue = "none";
+const openCardRoleValue = "open";
+/**
+* The roles a site style implements with an actual card variant. `none` is
+* deliberately absent: it is a role value only, never a variant.
+*/
+const surfaceCardRoleValues = [...cardVariantRoleValues, openCardRoleValue];
+/**
+* The closed card-role vocabulary Looks and blocks address cards by — this is
+* `BoxStylesCardVariant` widened with `open`, not a parallel enum.
+*
+* - `none`        — no site-style card surface; the block's own composition and
+*                   the author's own card fields govern the item. This is *not*
+*                   a promise of visible boxlessness: a block whose base class
+*                   draws a border still draws one. It says the Look is not
+*                   asking the site style for a card.
+* - `open`        — boxless but marked (a rule or accent edge, no enclosing box)
+* - `default`     — the site's quiet everyday card
+* - `alternative` — the statement card carrying the site's personality
+*/
+const cardRoleValues = [...surfaceCardRoleValues, boxlessCardVariantValue];
 const legacyCardVariantRoleAliases = {
 	variant1: "alternative",
-	variant2: "alternative"
+	variant2: "alternative",
+	statement: "alternative"
 };
 const cardSpacingSchema = z.enum([
 	"none",
@@ -4996,6 +3984,17 @@ const cardSpacingSchema = z.enum([
 	"comfortable",
 	"spacious"
 ]);
+/** Per-axis padding, for boxless cards whose inline padding differs from block. */
+const cardSpacingAxesSchema = z.object({
+	block: cardSpacingSchema,
+	inline: cardSpacingSchema
+});
+/**
+* A card's content padding: one value for both axes, or one per axis. Two
+* fields would let a variant say both and leave the reader to guess, so this is
+* a union — the legacy `spacingAxes` key is lifted into it on parse.
+*/
+const cardSpacingValueSchema = z.union([cardSpacingSchema, cardSpacingAxesSchema]);
 const gradientDirectionSchema = z.enum([
 	"to-r",
 	"to-l",
@@ -5007,7 +4006,13 @@ const gradientDirectionSchema = z.enum([
 	"to-bl"
 ]);
 const cardVariantRoleSchema = z.enum(cardVariantRoleValues);
-const boxStylesCardVariantSchema = z.enum([...cardVariantRoleValues, boxlessCardVariantValue]);
+const surfaceCardRoleSchema = z.enum(surfaceCardRoleValues);
+const cardRoleSchema = z.enum(cardRoleValues);
+/**
+* Historical name for the role vocabulary as it reaches box styles. Widened to
+* the full `CardRole` set — old values keep parsing, `open` now parses too.
+*/
+const boxStylesCardVariantSchema = cardRoleSchema;
 function isCardVariantRole(value) {
 	return typeof value === "string" && cardVariantRoleValues.includes(value);
 }
@@ -5016,6 +4021,28 @@ function normalizeCardVariantRole(value) {
 	if (typeof value !== "string") return null;
 	return legacyCardVariantRoleAliases[value] ?? null;
 }
+/**
+* The one untrusted-input boundary for the role vocabulary. Legacy alias values
+* (`variant1`, `variant2`, `statement`) normalize here and nowhere else.
+*/
+function normalizeCardRole(value) {
+	if (value === "none") return boxlessCardVariantValue;
+	if (value === "open") return openCardRoleValue;
+	return normalizeCardVariantRole(value);
+}
+const PRIORITY_ROLE_INFERENCE = {
+	1: "default",
+	2: "alternative"
+};
+/**
+* Role inference for legacy card systems authored before variants carried a
+* `role`. Priority 1 is the everyday card, priority 2 the statement card —
+* which is how variants are surfaced today. `open` is never inferred: a site
+* style has to opt into it.
+*/
+function inferCardVariantRoleFromPriority(priority) {
+	return PRIORITY_ROLE_INFERENCE[priority] ?? null;
+}
 const cardBackgroundSchema = z.discriminatedUnion("type", [
 	z.object({
 		type: z.literal("solid"),
@@ -5041,17 +4068,19 @@ const cardCornerValueSchema = z.enum([
 	"pill",
 	"expressive"
 ]);
+const cardEdgeSchema = z.enum([
+	"left",
+	"top",
+	"right",
+	"bottom"
+]);
 /**
-* A single accented card edge (e.g. a left accent bar). When set, it replaces
-* the full `border` so the card reads as edge-accented rather than outlined.
+* Legacy single accented card edge (e.g. a left accent bar). Persisted and
+* curated data may still carry it; it lifts into a one-element `decorations`
+* list at the parse boundary and has no representation after that.
 */
 const cardAccentEdgeSchema = z.object({
-	edge: z.enum([
-		"left",
-		"top",
-		"right",
-		"bottom"
-	]),
+	edge: cardEdgeSchema,
 	colorToken: themeColorTokenSchema,
 	width: z.enum([
 		"thin",
@@ -5060,13 +4089,43 @@ const cardAccentEdgeSchema = z.object({
 		"heavy"
 	])
 });
+/** `hairline` (1px) is the widening the boxless `open` role needs. */
+const cardEdgeRuleWidthSchema = z.enum([
+	"hairline",
+	"thin",
+	"medium",
+	"thick",
+	"heavy"
+]);
+const cardEdgeRuleLengthSchema = z.enum(["full", "short"]);
+const cardEdgeRuleAlignSchema = z.enum([
+	"start",
+	"center",
+	"end"
+]);
+/**
+* Decorations are edge rules today. The alias exists so the list can grow into
+* a discriminated union without every call site changing.
+*/
+const cardDecorationSchema = z.object({
+	edge: cardEdgeSchema,
+	colorToken: themeColorTokenSchema,
+	width: cardEdgeRuleWidthSchema,
+	/** Defaults to `full`. */
+	length: cardEdgeRuleLengthSchema.optional(),
+	/** Where a `short` rule sits along its edge. Defaults to `start`. */
+	align: cardEdgeRuleAlignSchema.optional(),
+	/** Opacity applied to `colorToken`, 0–1. Scoped here, not on the token. */
+	alpha: z.number().min(0).max(1).optional()
+});
+const cardDecorationsSchema = z.array(cardDecorationSchema).max(2);
 const cardCornerRadiiSchema = z.object({
 	topLeft: cardCornerValueSchema.optional(),
 	topRight: cardCornerValueSchema.optional(),
 	bottomLeft: cardCornerValueSchema.optional(),
 	bottomRight: cardCornerValueSchema.optional()
 });
-const cardVariantSchema = z.object({
+const cardVariantInputSchema = z.object({
 	id: z.string(),
 	name: z.string().min(1).max(20),
 	enabled: z.boolean(),
@@ -5075,8 +4134,10 @@ const cardVariantSchema = z.object({
 		z.literal(2),
 		z.literal(3)
 	]),
+	role: surfaceCardRoleSchema.optional(),
 	background: cardBackgroundSchema,
-	spacing: cardSpacingSchema,
+	spacing: cardSpacingValueSchema,
+	spacingAxes: cardSpacingAxesSchema.optional(),
 	foregroundToken: themeColorTokenSchema.optional(),
 	shadow: z.object({
 		elevation: z.enum([
@@ -5100,9 +4161,91 @@ const cardVariantSchema = z.object({
 	]).optional(),
 	cornerRadii: cardCornerRadiiSchema.optional(),
 	border: cardBorderSchema.optional(),
+	decorations: cardDecorationsSchema.optional(),
 	accentEdge: cardAccentEdgeSchema.optional()
 });
-const cardSystemSchema = z.object({ variants: z.array(cardVariantSchema).min(1).max(3) });
+/**
+* Lift a legacy `accentEdge` into the decoration list. The old emitter reset
+* `border: 0` implicitly whenever an accent edge was present; conversion drops
+* the border instead, so the output is unchanged and the data says so.
+*/
+function normalizeLegacyAccentEdge(variant) {
+	const { accentEdge, ...rest } = normalizeLegacySpacingAxes(variant);
+	if (!accentEdge) return rest;
+	const { border: _droppedByAccentEdgeReset, ...withoutBorder } = rest;
+	return {
+		...withoutBorder,
+		decorations: [{
+			...accentEdge,
+			length: "full"
+		}]
+	};
+}
+/**
+* Lift a legacy `spacingAxes` into `spacing`. It always won over the flat value
+* when both were set, so the lift preserves the emitted padding exactly.
+*/
+function normalizeLegacySpacingAxes(variant) {
+	const { spacingAxes, ...rest } = variant;
+	return spacingAxes ? {
+		...rest,
+		spacing: spacingAxes
+	} : variant;
+}
+function validateSingleDecorationSource(variant, ctx) {
+	if (!variant.accentEdge || !variant.decorations) return;
+	ctx.addIssue({
+		code: "custom",
+		path: ["decorations"],
+		message: "A card variant carries either the legacy `accentEdge` or `decorations`, never both."
+	});
+}
+const cardVariantSchema = cardVariantInputSchema.superRefine(validateSingleDecorationSource).transform(normalizeLegacyAccentEdge);
+/**
+* Fill in roles for legacy systems whose variants declare none. Inference is
+* collision-tolerant on purpose: first claimant wins and a later variant that
+* would infer a taken role simply gets no role. Legacy data is not obliged to
+* be well-formed, and a card system that fails to parse takes the whole theme
+* down with it.
+*/
+function withInferredRoles(variants) {
+	const claimed = new Set(variants.flatMap((variant) => variant.role ? [variant.role] : []));
+	return variants.map((variant) => {
+		if (variant.role) return variant;
+		const inferred = inferCardVariantRoleFromPriority(variant.priority);
+		if (!inferred || claimed.has(inferred)) return variant;
+		claimed.add(inferred);
+		return {
+			...variant,
+			role: inferred
+		};
+	});
+}
+/**
+* Only *declared* roles are validated — a site style saying "these two
+* variants are both the default card" is an authoring error worth rejecting.
+*/
+function validateUniqueDeclaredCardVariantRoles(system, ctx) {
+	const declared = /* @__PURE__ */ new Set();
+	system.variants.forEach((variant, index) => {
+		const role = variant.role;
+		if (!role) return;
+		if (declared.has(role)) {
+			ctx.addIssue({
+				code: "custom",
+				path: [
+					"variants",
+					index,
+					"role"
+				],
+				message: `Card role "${role}" is already implemented by another variant.`
+			});
+			return;
+		}
+		declared.add(role);
+	});
+}
+const cardSystemSchema = z.object({ variants: z.array(cardVariantSchema).min(1).max(3) }).superRefine(validateUniqueDeclaredCardVariantRoles).transform((system) => ({ variants: withInferredRoles(system.variants) }));
 //#endregion
 //#region ../theme-core/src/accordions/types.ts
 /**
@@ -5874,7 +5017,6 @@ function defineBlockDesignCapability(capability) {
 		sectionHeights: capability.sectionHeights ?? ["default"],
 		imageSurfaceTreatments: capability.imageSurfaceTreatments ?? ["none"],
 		imageSurfaceMotions: capability.imageSurfaceMotions ?? ["static"],
-		testimonialCardTreatments: capability.testimonialCardTreatments ?? ["default"],
 		tileTreatments: capability.tileTreatments ?? ["default"],
 		eventListTreatments: capability.eventListTreatments ?? ["plain"],
 		eyebrowTreatments: capability.eyebrowTreatments ?? ["plain"],
@@ -5994,6 +5136,58 @@ new Set(themeV2NormalEditorRawStyleFieldNames);
 [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
 const siteChromeBackgroundOverrideOwner = "site-chrome-editor";
+//#endregion
+//#region ../theme-core/src/header/legacyHeaderVariant.ts
+/**
+* The header variants the system actually renders.
+*
+* Each one has a layout row in the site-header block and a paint target in
+* `paintTargets.ts`. This is the canonical list: the block transform's variant
+* class allowlist and the AI theme generator's enum both derive from it, so
+* they cannot drift.
+*/
+const headerVariantValues = [
+	"classic",
+	"centered",
+	"floating"
+];
+z.enum(headerVariantValues);
+/**
+* Header variant spellings that were once authorable but no longer name a
+* layout of their own, and the variant they read as now.
+*
+* `transparent` was an overlay header with no CSS of its own: everything it
+* did (transparent root background, overlay content flow) is what `floating`
+* already does, and it had zero persisted usage in production or locally when
+* it was retired. It survives here as a one-boundary alias so a theme authored
+* against the old vocabulary still parses.
+*
+* This matters because the theme schema is strict and has no per-field
+* `.catch()`: an out-of-enum variant fails `themeSchema.safeParse` for the
+* *whole* theme, which silently swaps the site's theme for
+* `modernMinimalTheme`. Aliasing here keeps that from happening.
+*/
+const legacyHeaderVariants = { transparent: "floating" };
+const legacyHeaderVariantValues = Object.keys(legacyHeaderVariants);
+/**
+* The header variant boundary for themes that go through `themeSchema`:
+* canonical variants pass through, legacy spellings normalize to the variant
+* they meant, everything else fails the parse.
+*
+* Deliberately an enum plus a transform rather than a `z.preprocess`, so the
+* schema's *input* type stays an accurate union (the legacy spelling is still
+* accepted on the wire) instead of widening to `unknown`. `SdkThemeWire` in
+* `@riverbankcms/api` is `z.input<typeof themeSchema>`, so a widened input here
+* would leak straight into a public type.
+*
+* Not every read of a persisted theme goes through the schema:
+* `resolveRuntimeTheme` in
+* `apps/dashboard/src/server/services/sites/runtimeSiteResponse.ts` returns the
+* raw database JSON asserted as `Theme` with no parse, so a theme still
+* carrying a legacy spelling reaches the theme editor un-aliased. That gap
+* predates this alias and is harmless while persisted usage is zero.
+*/
+const headerVariantWithLegacyAliasSchema = z.enum([...headerVariantValues, ...legacyHeaderVariantValues]).transform((value) => value in legacyHeaderVariants ? legacyHeaderVariants[value] : value);
 const BREAKPOINT_LG = 1024;
 const BREAKPOINT_XL = 1280;
 const BREAKPOINT_LG_DOWN = BREAKPOINT_LG - 1;
@@ -6310,14 +5504,7 @@ const cardStylesOverrideSchema = z.object({
 	spacing: semanticSpacingSchema.nullable().optional(),
 	raised: z.boolean().nullable().optional(),
 	rounded: boxRoundedSchema.nullable().optional(),
-	treatment: z.enum([
-		"accent-quote",
-		"editorial-rule",
-		"soft-panel",
-		"editorial-serif-quote",
-		"editorial-open",
-		"color-blocked"
-	]).nullable().optional(),
+	role: cardRoleSchema.nullable().optional(),
 	cardVariant: boxStylesCardVariantSchema.nullable().optional()
 });
 const blockStyleOverridesSchema = z.object({
@@ -6423,30 +5610,6 @@ const motion = z.object({
 	]).nullable()
 });
 z.object({ shape: corners });
-z.object({
-	elevation: z.enum([
-		"none",
-		"low",
-		"medium",
-		"high"
-	]),
-	border: z.enum([
-		"none",
-		"subtle",
-		"defined"
-	]),
-	shape: corners,
-	headerStyle: z.enum([
-		"plain",
-		"accentBar",
-		"subtleBg"
-	]).nullable(),
-	mediaTreatment: z.enum([
-		"square",
-		"rounded",
-		"bleed"
-	]).nullable()
-});
 const inputStyle = z.object({
 	shape: corners,
 	border: z.enum([
@@ -6461,12 +5624,6 @@ const inputStyle = z.object({
 	]),
 	label: z.enum(["inside", "above"])
 });
-const headerVariant = z.enum([
-	"classic",
-	"centered",
-	"transparent",
-	"floating"
-]);
 const headerPositioning = z.enum([
 	"static",
 	"sticky",
@@ -6610,7 +5767,7 @@ const headerBackgroundSchema = z.object({
 	textColor: tokenOrCssColorValueSchema.nullable().optional()
 });
 const headerSchema = z.object({
-	variant: headerVariant,
+	variant: headerVariantWithLegacyAliasSchema,
 	positioning: headerPositioning,
 	shrinkOnScroll: z.boolean(),
 	maxWidth: headerMaxWidth,
@@ -6923,12 +6080,33 @@ function assertValidOptionGroups(preset) {
 		defineLookOptionGroup(group);
 	});
 }
+/**
+* Every Look carries a card role. A Look that says nothing about cards renders
+* none, which is the overwhelming majority of them; the card-bearing ones name
+* the role they want and the site style owns how it looks.
+*/
 function defineBlockAppearancePreset(preset) {
 	assertValidOptionGroups(preset);
-	return preset;
+	return {
+		...preset,
+		design: {
+			...preset.design,
+			cardRole: preset.design.cardRole ?? "none"
+		}
+	};
 }
 //#endregion
 //#region ../theme-core/src/site-styles/blockAppearancePresets.ts
+/**
+* A Look is a composition: which section surface, which content frame, and —
+* where it wants one — which *card role* it asks the site style for. It never
+* states how a card looks; that is the site style's identity.
+*
+* A Look with no `cardRole` asks the site style for no card at all
+* (`defineBlockAppearancePreset` defaults it to `none`) — the block's own
+* composition still governs how its items look. The per-Look rationale for the card-bearing ones lives
+* in `.project/plans/1297-card-role-contract-site-styles-own-card-surfaces/mapping-table.md`.
+*/
 const brandScrimOptionGroups = [{
 	id: "image-surface-treatment",
 	label: "Treatment",
@@ -6966,7 +6144,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "hero-image",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		sectionHeight: "hero",
 		heroComposition: "center",
 		heroTypographyScale: "display",
@@ -7009,7 +6186,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "hero-image",
 		contentFrame: panelFrame("raised"),
-		itemSurface: "none",
 		sectionHeight: "immersive",
 		heroComposition: "bottom-left",
 		heroTypographyScale: "display",
@@ -7034,7 +6210,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "hero-image",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		sectionHeight: "immersive",
 		heroComposition: "center",
 		heroTypographyScale: "poster",
@@ -7055,7 +6230,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "hero-image",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		sectionHeight: "immersive",
 		heroComposition: "center",
 		heroTypographyScale: "display",
@@ -7075,7 +6249,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "hero-image",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		sectionHeight: "immersive",
 		heroComposition: "center",
 		heroTypographyScale: "display",
@@ -7095,7 +6268,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		heroComposition: "center",
 		heroTypographyScale: "editorial",
 		eyebrowTreatment: "accent-pill-bounce"
@@ -7108,7 +6280,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: panelFrame("inset"),
-		itemSurface: "none",
 		heroComposition: "center",
 		heroTypographyScale: "editorial"
 	}
@@ -7121,7 +6292,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		heroTypographyScale: "editorial"
 	}
 }), defineBlockAppearancePreset({
@@ -7133,7 +6303,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		heroTypographyScale: "display",
 		eyebrowTreatment: "accent-pill-bounce"
 	}
@@ -7146,7 +6315,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: panelFrame("raised"),
-		itemSurface: "none",
 		heroTypographyScale: "editorial"
 	}
 }), defineBlockAppearancePreset({
@@ -7158,7 +6326,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "accent-band",
 		contentFrame: panelFrame("raised"),
-		itemSurface: "none",
 		heroTypographyScale: "display"
 	}
 }), defineBlockAppearancePreset({
@@ -7170,7 +6337,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		composition: {
 			kind: "intro",
 			treatment: "editorial-statement"
@@ -7185,7 +6351,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		composition: {
 			kind: "intro",
 			treatment: "portrait-bio"
@@ -7199,7 +6364,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "default"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "offerings-preview-secondary-cards",
@@ -7209,7 +6374,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: plainFrame,
-		itemSurface: "inset"
+		cardRole: "alternative"
 	}
 }), defineBlockAppearancePreset({
 	id: "offerings-preview-non-carded",
@@ -7219,7 +6384,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: plainFrame,
-		itemSurface: "editorial"
+		cardRole: "open"
 	}
 }), defineBlockAppearancePreset({
 	id: "offerings-preview-paired-feature-cards",
@@ -7229,8 +6394,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["cards"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "offerings-preview-open-editorial-columns",
@@ -7240,8 +6404,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["cards"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "offerings-preview-joined-programme-panel",
@@ -7251,8 +6414,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["cards"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-raised-rule",
@@ -7262,7 +6424,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "raised"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-bold-colors",
@@ -7272,7 +6434,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "color-blocked"
+		cardRole: "alternative"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-editorial-columns",
@@ -7280,9 +6442,9 @@ defineBlockAppearancePreset({
 	label: "Editorial open columns",
 	blockKinds: ["block.feature-cards"],
 	design: {
-		sectionSurface: "base",
+		sectionSurface: "muted-band",
 		contentFrame: plainFrame,
-		itemSurface: "editorial"
+		cardRole: "open"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-asymmetric-emphasis",
@@ -7293,7 +6455,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		composition: {
 			kind: "feature-cards",
 			treatment: "asymmetric-emphasis"
@@ -7308,7 +6469,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "inset",
+		cardRole: "alternative",
 		composition: {
 			kind: "feature-cards",
 			treatment: "framed-programme"
@@ -7322,7 +6483,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "inset"
+		cardRole: "alternative"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-editorial-diptych",
@@ -7333,7 +6494,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "flat"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-editorial-pathways",
@@ -7344,7 +6505,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "flat"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "feature-cards-photo-tiles",
@@ -7354,7 +6515,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "raised"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "events-lined-panel",
@@ -7363,8 +6524,7 @@ defineBlockAppearancePreset({
 	blockKinds: ["block.event-calendar", "block.event-listing"],
 	design: {
 		sectionSurface: "base",
-		contentFrame: panelFrame("raised"),
-		itemSurface: "none"
+		contentFrame: panelFrame("raised")
 	}
 }), defineBlockAppearancePreset({
 	id: "events-ruled-register",
@@ -7374,7 +6534,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		eventListTreatment: "ruled-register"
 	}
 }), defineBlockAppearancePreset({
@@ -7385,7 +6544,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		eventListTreatment: "editorial-register"
 	}
 }), defineBlockAppearancePreset({
@@ -7396,7 +6554,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "accent-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		eventListTreatment: "dense-index"
 	}
 }), defineBlockAppearancePreset({
@@ -7407,7 +6564,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		tileTreatment: "brand-depth"
 	}
 }), defineBlockAppearancePreset({
@@ -7417,8 +6573,7 @@ defineBlockAppearancePreset({
 	blockKinds: ["block.media-text"],
 	design: {
 		sectionSurface: "muted-band",
-		contentFrame: flushPanelFrame({ bleed: "start" }),
-		itemSurface: "none"
+		contentFrame: flushPanelFrame({ bleed: "start" })
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-simple-cards",
@@ -7428,7 +6583,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "default"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-raised-panel",
@@ -7438,7 +6593,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: panelFrame("raised"),
-		itemSurface: "raised"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-accent-panel",
@@ -7448,7 +6603,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "accent-band",
 		contentFrame: panelFrame("raised"),
-		itemSurface: "raised"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-default-cards",
@@ -7458,8 +6613,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "none",
-		testimonialCardTreatment: "default"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-statement-cards",
@@ -7469,8 +6623,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "accent-band",
 		contentFrame: plainFrame,
-		itemSurface: "raised",
-		testimonialCardTreatment: "statement"
+		cardRole: "alternative"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-brand-statement-cards",
@@ -7480,8 +6633,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "brand-depth-band",
 		contentFrame: plainFrame,
-		itemSurface: "raised",
-		testimonialCardTreatment: "statement"
+		cardRole: "alternative"
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-non-carded",
@@ -7491,8 +6643,10 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
-		testimonialCardTreatment: "non-carded"
+		composition: {
+			kind: "testimonials",
+			treatment: "open-editorial"
+		}
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-evergreen-lead",
@@ -7502,8 +6656,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["featured-editorial"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-room-and-response",
@@ -7513,8 +6666,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["featured-editorial"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "testimonials-open-floor",
@@ -7524,8 +6676,7 @@ defineBlockAppearancePreset({
 	constraints: { layoutVariantKeys: ["featured-editorial"] },
 	design: {
 		sectionSurface: "base",
-		contentFrame: plainFrame,
-		itemSurface: "none"
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "faq-base-accordion",
@@ -7535,7 +6686,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "base",
 		contentFrame: plainFrame,
-		itemSurface: "default"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "faq-contained-help",
@@ -7545,7 +6696,7 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "muted-band",
 		contentFrame: panelFrame("inset"),
-		itemSurface: "default"
+		cardRole: "default"
 	}
 }), defineBlockAppearancePreset({
 	id: "contact-form-panel",
@@ -7554,8 +6705,16 @@ defineBlockAppearancePreset({
 	blockKinds: ["block.form"],
 	design: {
 		sectionSurface: "muted-band",
-		contentFrame: panelFrame("raised"),
-		itemSurface: "none"
+		contentFrame: panelFrame("raised")
+	}
+}), defineBlockAppearancePreset({
+	id: "booking-brand-band",
+	target: "contact-form",
+	label: "Brand band booking",
+	blockKinds: ["block.appointment-booking"],
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame
 	}
 }), defineBlockAppearancePreset({
 	id: "cta-accent-band",
@@ -7565,7 +6724,6 @@ defineBlockAppearancePreset({
 	design: {
 		sectionSurface: "accent-band",
 		contentFrame: plainFrame,
-		itemSurface: "none",
 		eyebrowTreatment: "accent"
 	}
 });
@@ -7630,6 +6788,49 @@ function uniqueStrings(values) {
 	return Array.from(new Set(values));
 }
 //#endregion
+//#region ../theme-core/src/site-styles/cardRoleVocabulary.ts
+/**
+* The legacy `itemSurface` treatment vocabulary, and how it reads as a card
+* role.
+*
+* `itemSurface` named a *treatment* ("raised", "inset"); a role names *which
+* card* a Look wants and defers the appearance to the site style. Phase 3
+* deleted the treatment vocabulary and the recipe table it fed, so this map is
+* no longer a migration coexistence device — it is the one parse boundary where
+* persisted design plans written before the cutover still load, normalizing to
+* the role they meant.
+*
+* Per-value rationale is recorded in
+* `.project/plans/1297-card-role-contract-site-styles-own-card-surfaces/mapping-table.md`.
+*/
+const legacyItemSurfaceCardRoles = {
+	none: "none",
+	flat: "default",
+	default: "default",
+	outlined: "default",
+	raised: "default",
+	inset: "alternative",
+	editorial: "open",
+	"color-blocked": "alternative"
+};
+Object.keys(legacyItemSurfaceCardRoles);
+/**
+* Read a card role from untrusted input, accepting the legacy `itemSurface`
+* vocabulary as aliases. Returns `null` for anything else.
+*/
+function cardRoleFromLegacyVocabulary(value) {
+	const role = normalizeCardRole(value);
+	if (role) return role;
+	if (typeof value !== "string") return null;
+	return legacyItemSurfaceCardRoles[value] ?? null;
+}
+/**
+* The parse boundary for card roles reaching design intents and persisted
+* design plans: roles pass through, legacy `itemSurface` values normalize to
+* the role they meant, everything else fails the parse.
+*/
+const cardRoleWithLegacyAliasSchema = z.preprocess((value) => cardRoleFromLegacyVocabulary(value) ?? value, cardRoleSchema);
+//#endregion
 //#region ../theme-core/src/site-styles/sectionTransitions.ts
 function boundaryRuntimeMetrics(family, size, heightExpression) {
 	return {
@@ -8040,14 +7241,15 @@ const softEarthAccordionSystem = {
 /**
 * Reusable card systems for curated site styles.
 *
-* generateCardCss emits a `.card-{id}` class per enabled variant. The
-* intended convention (block-level role selection is wired in a follow-up) is
-* a role pair:
+* generateCardCss emits a `.card-{id}` class per enabled variant, plus stable
+* `.card-role-{role}` aliases resolved through the fallback chain. Each variant
+* declares which role it implements:
 *   - `default`     — the quiet, everyday card (most blocks, most of the time)
 *   - `alternative` — the prominent "statement" card for sections that pop
-* A card-heavy site style may add a third; the schema allows up to three
-* variants. The planned fallback when a block references a missing variant is
-* `alternative`, then `default`.
+*   - `open`        — boxless but marked; falls back to the generated baseline
+* The schema allows three variants, one per role. A block asking for a role a
+* site style does not define falls back per `resolveCardRole`: `alternative` →
+* `default` → generated baseline.
 *
 * Keep `default` close to the generated baseline so shared consumers (event
 * cards, testimonials) stay stable; put the personality in `alternative`.
@@ -8063,6 +7265,7 @@ const southWestCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -8080,6 +7283,7 @@ const southWestCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "primary-700"
@@ -8091,11 +7295,12 @@ const southWestCardSystem = { variants: [{
 		softness: null,
 		position: "bottom"
 	},
-	accentEdge: {
+	decorations: [{
 		edge: "left",
 		colorToken: "secondary",
-		width: "heavy"
-	},
+		width: "heavy",
+		length: "full"
+	}],
 	cornerRadii: {
 		topLeft: "square",
 		topRight: "expressive",
@@ -8108,6 +7313,7 @@ const clarityZenCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -8125,6 +7331,7 @@ const clarityZenCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "surfaceAlt"
@@ -8139,6 +7346,117 @@ const clarityZenCardSystem = { variants: [{
 	}
 }] };
 /**
+* Grounded Practice: the first site style to own the `open` role.
+*
+* `default` and `alternative` restate the generated baseline this style's token
+* recipes already produce (soft corners, flat surface card, tinted statement
+* card, hairline border) so nothing that renders today moves — declaring a card
+* system means the `.card-{id}` classes must keep existing for event and
+* offering cards.
+*
+* `open` is the change, and it is the one place this style deliberately
+* diverges from `boxlessOpenCardVariant` (the generated baseline's
+* hairline-plus-short-accent marking). Grounded Practice takes Luna's
+* therapy-page card literally
+* (`apps/dashboard/scripts/design-bakeoff/results/studies/anna-raven-yoga-20260713-115605Z/revisions/005/index.html`,
+* `.fit__card`: `padding: 1.6rem 1.45rem 1.75rem; border-top: 2px solid
+* var(--ochre); background: rgba(242,243,235,.72)`):
+*
+* - one **full-length 2px** rule in the style's ochre `accent` (`#c69a3c` —
+*   the mockup's `--ochre`); `width: 'thin'` is the 2px step in
+*   `CARD_EDGE_RULE_WIDTH_MAP`. No hairline underneath and no short marker:
+*   the single rule *is* the marking.
+* - a light solid fill. Card backgrounds take no alpha, so the token that
+*   reads like the mockup's translucent pale tint is `surfaceAlt`
+*   (`#f2ecdb`), which sits one step lighter than the `muted` band the
+*   Look now paints — the same lift Luna gets from `rgba(242,243,235,.72)`
+*   over `--ground-2`.
+* - comfortable spacing on both axes. The baseline keeps `inline: 'none'`
+*   so a boxless card stays flush with the section; a filled card needs its
+*   padding back or the text touches the fill's edge.
+*
+* The baseline `boxlessOpenCardVariant` is unchanged — this divergence is
+* grounded-practice's alone. See
+* `.project/plans/1297-card-role-contract-site-styles-own-card-surfaces/decisions.md`
+* §0.7 and "Phase 2.4".
+*/
+const groundedPracticeCardSystem = { variants: [
+	{
+		id: "default",
+		name: "Default",
+		enabled: true,
+		priority: 1,
+		role: "default",
+		background: {
+			type: "solid",
+			colorToken: "surface"
+		},
+		foregroundToken: "text",
+		spacing: "comfortable",
+		corners: "soft",
+		shadow: {
+			elevation: "none",
+			softness: null,
+			position: "bottom"
+		},
+		border: {
+			widthClass: "border",
+			colorToken: "border"
+		}
+	},
+	{
+		id: "alternative",
+		name: "Statement",
+		enabled: true,
+		priority: 2,
+		role: "alternative",
+		background: {
+			type: "solid",
+			colorToken: "surfaceAlt"
+		},
+		foregroundToken: "text",
+		spacing: "comfortable",
+		corners: "soft",
+		shadow: {
+			elevation: "low",
+			softness: null,
+			position: "bottom"
+		},
+		border: {
+			widthClass: "border",
+			colorToken: "border"
+		}
+	},
+	{
+		id: "open",
+		name: "Open",
+		enabled: true,
+		priority: 3,
+		role: "open",
+		background: {
+			type: "solid",
+			colorToken: "surfaceAlt"
+		},
+		foregroundToken: "text",
+		spacing: {
+			block: "comfortable",
+			inline: "comfortable"
+		},
+		corners: "square",
+		shadow: {
+			elevation: "none",
+			softness: null,
+			position: "bottom"
+		},
+		decorations: [{
+			edge: "top",
+			colorToken: "accent",
+			width: "thin",
+			length: "full"
+		}]
+	}
+] };
+/**
 * Original Joy: warm, flat, generously rounded cards on the dark clay ground.
 * `default` is a quiet brown surface card with cream text; `alternative` is a
 * burnt-orange statement card for sections that should pop. Both flat (the
@@ -8150,6 +7468,7 @@ const originalJoyCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -8167,6 +7486,7 @@ const originalJoyCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "primary"
@@ -8780,16 +8100,7 @@ const generatedDesignOptionCatalog = {
 		"hero-image"
 	],
 	contentFrames: generatedContentFrames,
-	itemSurfaces: [
-		"none",
-		"default",
-		"flat",
-		"outlined",
-		"raised",
-		"inset",
-		"editorial",
-		"color-blocked"
-	],
+	cardRoles: cardRoleValues,
 	transitions: [
 		"none",
 		"soft-fade-short",
@@ -8806,7 +8117,7 @@ const userDesignOptionCatalog = {
 	source: "user",
 	sectionSurfaces: generatedDesignOptionCatalog.sectionSurfaces,
 	contentFrames: userContentFrames,
-	itemSurfaces: generatedDesignOptionCatalog.itemSurfaces,
+	cardRoles: generatedDesignOptionCatalog.cardRoles,
 	transitions: [
 		...generatedDesignOptionCatalog.transitions,
 		"soft-fade-expansive",
@@ -8822,7 +8133,7 @@ const userDesignOptionCatalog = {
 	emphases: generatedDesignOptionCatalog.emphases,
 	detachedCustom: false
 };
-userDesignOptionCatalog.sectionSurfaces, userDesignOptionCatalog.contentFrames, userDesignOptionCatalog.itemSurfaces, userDesignOptionCatalog.transitions, userDesignOptionCatalog.emphases;
+userDesignOptionCatalog.sectionSurfaces, userDesignOptionCatalog.contentFrames, userDesignOptionCatalog.cardRoles, userDesignOptionCatalog.transitions, userDesignOptionCatalog.emphases;
 //#endregion
 //#region ../theme-core/src/site-styles/siteStyleTypography.ts
 const modernSansTypography = {
@@ -9277,6 +8588,8 @@ function defaultTypographyForRecipe(recipe) {
 		case "classic-serif": return classicSerifTypography;
 	}
 }
+//#endregion
+//#region ../theme-core/src/site-styles/designState.ts
 const designResolutionPolicySchema = z.enum([
 	"generated",
 	"user",
@@ -9285,108 +8598,6 @@ const designResolutionPolicySchema = z.enum([
 ]);
 const runtimeStyleFieldNameSchema = z.enum(themeV2RuntimeStyleFieldNames);
 const nonEmptyRuntimeStyleFieldNamesSchema = z.array(runtimeStyleFieldNameSchema).min(1).transform((fields) => [fields[0], ...fields.slice(1)]);
-const heroLegibilityStrategySchema = z.enum([
-	"none",
-	"scrim-gradient",
-	"solid-panel"
-]);
-const heroCompositionIntentSchema = z.enum(["center", "bottom-left"]);
-const heroTypographyScaleIntentSchema = z.enum([
-	"quiet",
-	"editorial",
-	"display",
-	"poster"
-]);
-const sectionHeightIntentSchema = z.enum([
-	"default",
-	"banner",
-	"hero",
-	"immersive"
-]);
-const imageSurfaceTreatmentIntensitySchema = z.enum([
-	"soft",
-	"balanced",
-	"strong"
-]);
-const imageSurfaceMotionSchema = z.enum(["static", "fixed-frame"]);
-const imageSurfaceTreatmentSchema = z.discriminatedUnion("kind", [
-	z.object({ kind: z.literal("none") }).strict(),
-	z.object({
-		kind: z.literal("brand-scrim"),
-		token: z.enum([
-			"primary",
-			"secondary",
-			"accent"
-		]),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("brand-wash"),
-		token: z.enum([
-			"primary",
-			"secondary",
-			"accent"
-		]),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("neutral-scrim"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("neutral-wash"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("solid-panel"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict()
-]);
-const testimonialCardTreatmentSchema = z.enum(["default", "accent-quote"]);
-const tileTreatmentSchema = z.enum(tileTreatmentValues);
-const eventListTreatmentSchema = z.enum(eventListTreatmentValues);
-const eyebrowTreatmentSchema = z.enum(eyebrowTreatmentValues);
-function uniqueNonEmpty$1(values) {
-	const uniqueValues = [...new Set(values)];
-	const firstValue = uniqueValues[0];
-	if (!firstValue) throw new Error("Expected at least one Theme V2 design state option.");
-	return [firstValue, ...uniqueValues.slice(1)];
-}
-const userPanelTreatments = uniqueNonEmpty$1(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "panel").map((frame) => frame.treatment));
-const userFlushTreatments = uniqueNonEmpty$1(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "flush-panel").map((frame) => frame.treatment));
-const userFlushBleeds = uniqueNonEmpty$1(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "flush-panel").map((frame) => frame.bleed));
-const contentFrameIntentSchema = z.discriminatedUnion("kind", [
-	z.object({ kind: z.literal("plain") }).strict(),
-	z.object({
-		kind: z.literal("panel"),
-		treatment: z.enum(userPanelTreatments)
-	}).strict(),
-	z.object({
-		kind: z.literal("flush-panel"),
-		treatment: z.enum(userFlushTreatments),
-		bleed: z.enum(userFlushBleeds)
-	}).strict()
-]);
-const blockDesignPlanSchema = z.object({
-	blockId: z.string().min(1).transform(asDesignBlockId),
-	blockKind: z.string().min(1),
-	purpose: z.string().min(1),
-	sectionSurface: z.enum(userDesignOptionCatalog.sectionSurfaces),
-	contentFrame: contentFrameIntentSchema,
-	itemSurface: z.enum(userDesignOptionCatalog.itemSurfaces),
-	transitionAfter: z.enum(userDesignOptionCatalog.transitions),
-	emphasis: z.enum(userDesignOptionCatalog.emphases),
-	sectionHeight: sectionHeightIntentSchema.optional(),
-	heroLegibility: heroLegibilityStrategySchema.optional(),
-	heroComposition: heroCompositionIntentSchema.optional(),
-	heroTypographyScale: heroTypographyScaleIntentSchema.optional(),
-	imageSurfaceTreatment: imageSurfaceTreatmentSchema.optional(),
-	imageSurfaceMotion: imageSurfaceMotionSchema.optional(),
-	testimonialCardTreatment: testimonialCardTreatmentSchema.optional(),
-	tileTreatment: tileTreatmentSchema.optional(),
-	eventListTreatment: eventListTreatmentSchema.optional(),
-	eyebrowTreatment: eyebrowTreatmentSchema.optional()
-}).strict();
 const styleAuthoritySchema = z.discriminatedUnion("kind", [
 	z.object({
 		kind: z.literal("theme-v2"),
@@ -9405,22 +8616,12 @@ const styleAuthoritySchema = z.discriminatedUnion("kind", [
 		reason: z.literal("detached-custom-runtime-fields")
 	}).strict()
 ]);
-const blockRuntimeStyleAuthoritySchema = z.object({
+z.object({
 	unit: z.literal("block-runtime-fields"),
 	blockId: z.string().min(1).transform(asDesignBlockId),
 	fields: nonEmptyRuntimeStyleFieldNamesSchema,
 	authority: styleAuthoritySchema
 }).strict();
-z.object({
-	schemaVersion: z.literal(1),
-	siteStyleId: z.string().min(1).transform(asSiteStyleId),
-	templateId: z.string().min(1).transform(asDesignSystemTemplateId),
-	templateVersion: z.number().int().nonnegative(),
-	resolverVersion: z.number().int().nonnegative(),
-	rhythmPresetId: z.string().min(1),
-	blocks: z.array(blockDesignPlanSchema),
-	styleAuthorities: z.array(blockRuntimeStyleAuthoritySchema)
-}).strict();
 //#endregion
 //#region ../theme-core/src/site-styles/runtimeCompiler.ts
 function defineSectionForegroundRuntimeTokens(input) {
@@ -9524,61 +8725,7 @@ const defaultComponentRuntimeRules = defineComponentRuntimeRules({
 		spacing: "none",
 		rounded: "none",
 		raised: false
-	} },
-	itemSurfaces: {
-		none: null,
-		default: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false
-		},
-		flat: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false
-		},
-		outlined: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false,
-			border: {
-				enabled: true,
-				width: "1",
-				colorToken: "border"
-			}
-		},
-		raised: {
-			spacing: "medium",
-			rounded: "xl",
-			raised: true
-		},
-		inset: {
-			treatment: "soft-panel",
-			spacing: "comfortable",
-			rounded: "xl",
-			raised: false,
-			border: { enabled: false },
-			background: {
-				type: "color",
-				color: "surfaceAlt",
-				textColor: "text"
-			}
-		},
-		editorial: {
-			treatment: "editorial-rule",
-			spacing: "none",
-			rounded: "none",
-			raised: false,
-			border: { enabled: false }
-		},
-		"color-blocked": {
-			treatment: "color-blocked",
-			spacing: "spacious",
-			rounded: "2xl",
-			raised: false,
-			border: { enabled: false }
-		}
-	}
+	} }
 });
 function uniformSectionForeground(token) {
 	return {
@@ -9664,36 +8811,7 @@ function componentRuntimeRulesForTokenRecipes(recipes) {
 				rounded: recipes.radius === "square" ? "none" : cornerTreatment
 			}
 		},
-		flushFrames: defaultComponentRuntimeRules.flushFrames,
-		itemSurfaces: {
-			none: null,
-			default: {
-				...defaultComponentRuntimeRules.itemSurfaces.default,
-				rounded: cornerTreatment
-			},
-			flat: {
-				...defaultComponentRuntimeRules.itemSurfaces.flat,
-				rounded: cornerTreatment
-			},
-			outlined: {
-				...defaultComponentRuntimeRules.itemSurfaces.outlined,
-				rounded: cornerTreatment
-			},
-			raised: {
-				...defaultComponentRuntimeRules.itemSurfaces.raised,
-				rounded: cornerTreatment,
-				raised
-			},
-			inset: {
-				...defaultComponentRuntimeRules.itemSurfaces.inset,
-				rounded: cornerTreatment
-			},
-			editorial: defaultComponentRuntimeRules.itemSurfaces.editorial,
-			"color-blocked": {
-				...defaultComponentRuntimeRules.itemSurfaces["color-blocked"],
-				rounded: cornerTreatment
-			}
-		}
+		flushFrames: defaultComponentRuntimeRules.flushFrames
 	});
 }
 const kirtanOrnateDesignRuntimeRules = defineDesignRuntimeRules({
@@ -10143,7 +9261,6 @@ function defineCuratedSiteStyle(input) {
 			compositionBudget: input.compositionBudget,
 			supportedSectionSurfaces: generatedDesignOptionCatalog.sectionSurfaces,
 			supportedContentFrames: input.supportedContentFrames ?? generatedContentFrameKinds,
-			supportedItemSurfaces: input.supportedItemSurfaces ?? generatedDesignOptionCatalog.itemSurfaces,
 			supportedTransitions: generatedDesignOptionCatalog.transitions
 		},
 		headingDecoration: input.headingDecoration ?? noHeadingDecoration,
@@ -11224,6 +10341,7 @@ const curatedSiteStyles = [
 		name: "Grounded Practice",
 		themeOverrides: {
 			accordions: editorialDividedAccordionSystem,
+			cards: groundedPracticeCardSystem,
 			testimonialQuote: serifDisplayQuote
 		},
 		description: "Quiet, grounded editorial design for practitioner-led services, recurring classes, and thoughtful one-to-one work.",
@@ -11278,7 +10396,8 @@ const curatedSiteStyles = [
 			"feature-cards-soft-panels",
 			"events-lined-panel",
 			"testimonials-non-carded",
-			"faq-base-accordion"
+			"faq-base-accordion",
+			"booking-brand-band"
 		],
 		recommendedFooterLookIds: ["footer-links-quiet"],
 		buttonStyleChoices: [
@@ -11304,6 +10423,23 @@ asLayoutVariantKey("micro");
 asBoundaryOptionId("break:wave");
 asPageFlowPresetId("flow:quiet"), noneBoundaryOption.id, asPageFlowPresetId("flow:balanced"), softBoundaryOption.id, asPageFlowPresetId("flow:expressive"), spaciousBoundaryOption.id;
 //#endregion
+//#region ../theme-core/src/site-styles/resolver.ts
+const blockDesignFallback = {
+	sectionSurface: "base",
+	contentFrame: plainFrame,
+	transitionAfter: "none",
+	sectionHeight: "default",
+	heroLegibility: "none",
+	imageSurfaceTreatment: { kind: "none" },
+	imageSurfaceMotion: "static",
+	tileTreatment: "default",
+	eventListTreatment: "plain",
+	eyebrowTreatment: "plain",
+	accordionIconTreatment: null,
+	composition: null
+};
+blockDesignFallback.sectionSurface, blockDesignFallback.contentFrame, blockDesignFallback.transitionAfter, blockDesignFallback.sectionHeight, blockDesignFallback.heroLegibility, blockDesignFallback.imageSurfaceTreatment, blockDesignFallback.imageSurfaceMotion, blockDesignFallback.tileTreatment, blockDesignFallback.eventListTreatment, blockDesignFallback.eyebrowTreatment, blockDesignFallback.accordionIconTreatment, blockDesignFallback.composition;
+//#endregion
 //#region ../theme-core/src/site-styles/generatedSchemas.ts
 function uniqueNonEmpty(values) {
 	const uniqueValues = [...new Set(values)];
@@ -11342,7 +10478,7 @@ function generatedChoiceSchema(valueSchema) {
 const generatedBlockDesignIntentSchema = z.object({
 	sectionSurface: generatedChoiceSchema(z.enum(generatedDesignOptionCatalog.sectionSurfaces)),
 	contentFrame: generatedChoiceSchema(generatedContentFrameIntentSchema),
-	itemSurface: generatedChoiceSchema(z.enum(generatedDesignOptionCatalog.itemSurfaces)),
+	cardRole: generatedChoiceSchema(cardRoleWithLegacyAliasSchema),
 	transitionAfter: generatedChoiceSchema(z.enum(generatedDesignOptionCatalog.transitions)),
 	emphasis: generatedChoiceSchema(z.enum(generatedDesignOptionCatalog.emphases))
 }).strict();
@@ -11720,18 +10856,32 @@ function isFreePublicEventPriceDisplay(display) {
 }
 //#endregion
 //#region ../core/src/event-page-surface-subject.ts
+function createEventSeriesPageSurfaceSubject(eventSeriesId, bookingScope) {
+	return bookingScope === "whole_series" ? {
+		kind: "eventSeries",
+		eventSeriesId,
+		bookingScope,
+		isWholeSeriesBooking: true
+	} : {
+		kind: "eventSeries",
+		eventSeriesId,
+		bookingScope
+	};
+}
 function parseEventPageSurfaceSubject(value) {
 	if (!isRecord$6(value)) return err({ kind: "notObject" });
 	switch (value.kind) {
 		case "eventSeries": {
 			const eventSeriesId = parseEventSeriesId(value.eventSeriesId);
-			return eventSeriesId.ok ? ok({
-				kind: "eventSeries",
-				eventSeriesId: eventSeriesId.value
-			}) : err({
+			if (!eventSeriesId.ok) return err({
 				kind: "invalidEventSeriesId",
 				error: eventSeriesId.error
 			});
+			if (value.bookingScope !== "single_occurrence" && value.bookingScope !== "whole_series") return err({
+				kind: "invalidEventSeriesBookingScope",
+				bookingScope: value.bookingScope
+			});
+			return ok(createEventSeriesPageSurfaceSubject(eventSeriesId.value, value.bookingScope));
 		}
 		case "eventOffering": {
 			const eventOfferingId = parseEventOfferingId(value.eventOfferingId);
@@ -14087,6 +13237,37 @@ function styledContainer(config) {
 //#endregion
 //#region ../blocks/src/system/spacing.ts
 /**
+* Type-safe spacing system for sections and containers.
+*
+* This module provides:
+* - Semantic spacing values (none, compact, cozy, medium, comfortable, spacious)
+* - Type-safe mappings to CSS class tokens
+* - Runtime validation via type guards
+* - Separate handling for section (vertical) vs container (all-sides) spacing
+*
+* Type Safety Guarantees:
+* - Type is derived from data (single source of truth)
+* - Maps are validated for completeness at compile time
+* - Runtime validation available via isSemanticSpacing()
+*/
+/**
+* Single source of truth for semantic spacing values.
+* The SemanticSpacing type is derived from this array to ensure they stay in sync.
+*
+* Adding a new spacing value:
+* 1. Add it to this array
+* 2. TypeScript will error until you update both spacing maps
+* 3. No way to get out of sync
+*/
+const SEMANTIC_SPACING_VALUES = [
+	"none",
+	"compact",
+	"cozy",
+	"medium",
+	"comfortable",
+	"spacious"
+];
+/**
 * Default spacing value for sections when not explicitly configured.
 */
 const DEFAULT_SECTION_SPACING = "medium";
@@ -14579,6 +13760,31 @@ function responsiveTwoColumn({ image, text, ratioFrom, imagePositionFrom, gapCla
 }
 //#endregion
 //#region ../blocks/src/system/node/fragments/styledCard.ts
+/**
+* The shared child hooks generated card CSS targets (`.card-media`,
+* `.card-content`). They join the class list only while a card role is in play,
+* so cards still on the legacy treatment path keep their exact classes.
+*
+* Blocks whose items each choose a surface pass `itemRole` so the hook follows
+* the item's choice; blocks with one surface per block bind from the card
+* styles themselves (the transform reads the role off `stylesFrom` and ignores
+* a non-string bound value), which keeps one emission path for both shapes.
+*/
+function cardRoleChildClass(input) {
+	return { $bind: {
+		from: input.itemRole?.from ?? input.stylesFrom,
+		transforms: [{
+			id: "boxStyles.cardRoleClass",
+			options: {
+				emit: input.emit,
+				baseClass: input.baseClass,
+				stylesPath: input.stylesFrom,
+				...input.itemRole?.aliases ? { itemRoleAliases: input.itemRole.aliases } : {}
+			}
+		}],
+		fallback: input.baseClass
+	} };
+}
 function styledCard(children, opts, ...mods) {
 	const baseClassName = opts.baseClassName ?? "rb-relative rb-isolate rb-overflow-visible rb-border";
 	const defaultBackgroundLayer = el("div", {
@@ -14596,19 +13802,32 @@ function styledCard(children, opts, ...mods) {
 			}]
 		} }
 	};
+	const classNameBinding = opts.itemRole ? { $bind: {
+		from: opts.itemRole.from,
+		transforms: [{
+			id: "boxStyles.cardRoleClass",
+			options: {
+				axis: "all",
+				baseClass: baseClassName,
+				stylesPath: opts.stylesFrom,
+				...opts.itemRole.aliases ? { itemRoleAliases: opts.itemRole.aliases } : {}
+			}
+		}],
+		fallback: baseClassName
+	} } : { $bind: {
+		from: opts.stylesFrom,
+		transforms: [{
+			id: "boxStyles.all",
+			options: {
+				axis: "all",
+				baseClass: baseClassName
+			}
+		}],
+		fallback: baseClassName
+	} };
 	return el("div", {
 		...opts.dataProps ?? {},
-		className: { $bind: {
-			from: opts.stylesFrom,
-			transforms: [{
-				id: "boxStyles.all",
-				options: {
-					axis: "all",
-					baseClass: baseClassName
-				}
-			}],
-			fallback: baseClassName
-		} },
+		className: classNameBinding,
 		...style ? { style } : {}
 	}, [
 		defaultBackgroundLayer,
@@ -17127,7 +16346,11 @@ const teamMemberFragment = defineFragment({
 		gap: "sm",
 		className: "rb-team-member rb-items-center rb-text-center"
 	}, [
-		el("div", { className: "rb-team-member-photo-wrap rb-w-full" }, [media({
+		el("div", { className: cardRoleChildClass({
+			emit: "media",
+			baseClass: "rb-team-member-photo-wrap rb-w-full",
+			stylesFrom: "content._cardStyles"
+		}) }, [media({
 			className: "rb-team-member-photo rb-w-full rb-object-cover",
 			style: { aspectRatio: "1 / 1" },
 			size: {
@@ -17430,6 +16653,111 @@ const heroBlockDefinition = { manifest: createBlockManifest({
 		spacing: "xl"
 	}
 }) };
+/**
+* Canonical responsive ladder for a user-configured column count: 1 column at
+* base, 2 from `sm`, 3 from `lg` (when the count allows), and the full count
+* from `xl`. This matches the events blocks' COLUMN_CLASSES ladder — the two
+* are derived from this single function.
+*/
+function gridUserColumnLadder(count) {
+	const capped = Number.isFinite(count) ? Math.max(1, Math.min(4, Math.floor(count))) : 3;
+	const ladder = { base: 1 };
+	if (capped >= 2) ladder.sm = 2;
+	if (capped >= 3) ladder.lg = 3;
+	if (capped >= 4) ladder.xl = capped;
+	return ladder;
+}
+/** The ladder as a space-separated `rb-*` utility class string. */
+function gridUserColumnClasses(count) {
+	const ladder = gridUserColumnLadder(count);
+	return GRID_BREAKPOINTS.flatMap((bp) => {
+		const value = ladder[bp];
+		return typeof value === "number" ? [COL_COUNT_CLASS[bp](value)] : [];
+	}).join(" ");
+}
+/** Utility class for a numeric column COUNT at a given breakpoint. */
+const COL_COUNT_CLASS = {
+	base: (n) => `rb-grid-cols-${n}`,
+	sm: (n) => `rb-sm-grid-cols-${n}`,
+	md: (n) => `rb-md-grid-cols-${n}`,
+	lg: (n) => `rb-lg-grid-cols-${n}`,
+	xl: (n) => `rb-xl-grid-cols-${n}`
+};
+const GRID_BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+//#endregion
+//#region ../blocks/src/system/fields/gridLayout.ts
+/**
+* Grid `userColumns` binding for blocks with a user-configured column count.
+* The count renders through the canonical responsive ladder — see
+* {@link gridUserColumnLadder}.
+*/
+function userColumnsGridBinding() {
+	return { $bind: {
+		from: "content.columns",
+		fallback: 3,
+		coerce: "number"
+	} };
+}
+/** Shared "Columns" select (2/3/4) for grid-layout blocks. */
+function columnsSelectField(options = {}) {
+	return parseFieldDefinition({
+		id: "columns",
+		type: "select",
+		label: options.label ?? "Columns",
+		...options.description ? { description: options.description } : {},
+		defaultValue: options.defaultValue ?? String(3),
+		options: [
+			{
+				value: "2",
+				label: "2 columns"
+			},
+			{
+				value: "3",
+				label: "3 columns"
+			},
+			{
+				value: "4",
+				label: "4 columns"
+			}
+		],
+		ui: {
+			intent: "display",
+			...options.visibleWhen ? { visibleWhen: options.visibleWhen } : {}
+		}
+	});
+}
+const SEMANTIC_SPACING_LABELS = {
+	none: "None",
+	compact: "Compact",
+	cozy: "Cozy",
+	medium: "Medium",
+	comfortable: "Comfortable",
+	spacious: "Spacious"
+};
+/** Shared semantic "Gap" select for layout blocks. */
+function gapSelectField(options = {}) {
+	return parseFieldDefinition({
+		id: "gap",
+		type: "select",
+		label: options.label ?? "Gap",
+		...options.description ? { description: options.description } : {},
+		defaultValue: options.defaultValue ?? "medium",
+		options: SEMANTIC_SPACING_VALUES.map((value) => ({
+			value,
+			label: SEMANTIC_SPACING_LABELS[value]
+		})),
+		ui: {
+			intent: "display",
+			...options.visibleWhen ? { visibleWhen: options.visibleWhen } : {}
+		}
+	});
+}
 //#endregion
 //#region ../blocks/src/system/fields/aspectRatio.ts
 const standardAspectRatioOptions = [
@@ -17690,47 +17018,14 @@ const introBlockDefinition = { manifest: createBlockManifest({
 				equals: "media-copy"
 			}
 		}),
-		{
-			id: "gap",
-			type: "select",
+		gapSelectField({
 			label: "Gap between media and text",
-			required: false,
 			defaultValue: "comfortable",
-			multiple: false,
-			options: [
-				{
-					value: "none",
-					label: "None"
-				},
-				{
-					value: "compact",
-					label: "Compact"
-				},
-				{
-					value: "cozy",
-					label: "Cozy"
-				},
-				{
-					value: "medium",
-					label: "Medium"
-				},
-				{
-					value: "comfortable",
-					label: "Comfortable"
-				},
-				{
-					value: "spacious",
-					label: "Spacious"
-				}
-			],
-			ui: {
-				intent: "display",
-				visibleWhen: {
-					field: "variant",
-					equals: "media-copy"
-				}
+			visibleWhen: {
+				field: "variant",
+				equals: "media-copy"
 			}
-		},
+		}),
 		createImageColSizeField({
 			id: "ratio",
 			label: "Media column size",
@@ -17977,9 +17272,21 @@ function postReadMore() {
 		value: "Read more"
 	}, when("content.readMoreText", { not: true }))]);
 }
+/**
+* The shared child hooks generated card CSS targets. Blog listing has one card
+* surface per block, so the hooks read the role straight off the compiled card
+* styles (Phase 2b).
+*/
+function postCardChildClass(emit, baseClass) {
+	return cardRoleChildClass({
+		emit,
+		baseClass,
+		stylesFrom: "content._cardStyles"
+	});
+}
 function postImageLink(className, mediaOptions) {
 	return link({
-		className: "rb-block rb-overflow-hidden",
+		className: postCardChildClass("media", "rb-block rb-overflow-hidden"),
 		href: { $bind: { from: "post.path" } }
 	}, [media({ className }, bind("post.image", { transforms: [{
 		id: "media.fromUrl",
@@ -18000,7 +17307,7 @@ const gridPostCard = postCard([postImageLink("rb-h-48 rb-w-full rb-object-cover
 	resize: "cover"
 }), stack({
 	gap: "sm",
-	className: "rb-flex-1 rb-p-6"
+	className: postCardChildClass("content", "rb-flex-1 rb-p-6")
 }, [
 	postTitle(),
 	postDate(),
@@ -18009,7 +17316,7 @@ const gridPostCard = postCard([postImageLink("rb-h-48 rb-w-full rb-object-cover
 ])], repeat("data.posts", "post"));
 const stackPostCard = styledCard([inline({
 	gap: "lg",
-	className: "rb-flex-col rb-items-stretch rb-sm-flex-row rb-sm-items-start rb-p-5 rb-sm-p-6"
+	className: postCardChildClass("content", "rb-flex-col rb-items-stretch rb-sm-flex-row rb-sm-items-start rb-p-5 rb-sm-p-6")
 }, [postImageLink("rb-h-44 rb-w-full rb-sm-h-32 rb-sm-w-36 rb-object-cover", {
 	width: 320,
 	height: 240,
@@ -18052,11 +17359,7 @@ function blogListingShell(children) {
 	});
 }
 const gridLayout$2 = blogListingShell([grid$3({
-	cols: { $bind: {
-		from: "content.columns",
-		fallback: 3,
-		coerce: "number"
-	} },
+	userColumns: userColumnsGridBinding(),
 	gap: "lg"
 }, [gridPostCard]), emptyState$2]);
 const blogListingManifest = createBlockManifest({
@@ -18084,33 +17387,13 @@ const blogListingManifest = createBlockManifest({
 		}
 	},
 	additionalFields: [
-		parseFieldDefinition({
-			id: "columns",
-			type: "select",
+		columnsSelectField({
 			label: "Grid columns",
 			description: "Number of columns in the grid layout.",
-			defaultValue: "3",
-			ui: {
-				intent: "display",
-				visibleWhen: {
-					field: "variant",
-					equals: "grid"
-				}
-			},
-			options: [
-				{
-					value: "2",
-					label: "2 columns"
-				},
-				{
-					value: "3",
-					label: "3 columns"
-				},
-				{
-					value: "4",
-					label: "4 columns"
-				}
-			]
+			visibleWhen: {
+				field: "variant",
+				equals: "grid"
+			}
 		}),
 		parseFieldDefinition({
 			id: "postsPerPage",
@@ -18769,7 +18052,7 @@ const defaultLayout = styledSection({
 const twoColumnLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
-		children: el("div", { className: "rb-faq-split-heading rb-grid rb-grid-cols-1 rb-gap-8 rb-lg-grid-cols-2 rb-lg-items-start" }, [el("div", { className: "rb-faq-split-heading-copy" }, [headingLayout]), el("div", { className: "rb-faq-split-heading-accordion" }, [accordionLayout])])
+		children: el("div", { className: "rb-faq-split-heading rb-grid rb-grid-cols-1 rb-gap-8 rb-lg-grid-cols-2 rb-items-start" }, [el("div", { className: "rb-faq-split-heading-copy" }, [headingLayout]), el("div", { className: "rb-faq-split-heading-accordion" }, [accordionLayout])])
 	}),
 	baseClass: ""
 });
@@ -18786,7 +18069,7 @@ const questionColumnsLayout = styledSection({
 const splitHeadingColumnsLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
-		children: el("div", { className: "rb-faq-split-heading-columns rb-grid rb-grid-cols-1 rb-gap-8 rb-lg-grid-cols-2 rb-lg-items-start" }, [el("div", { className: "rb-faq-split-heading-columns-copy" }, [headingLayout]), el("div", { className: "rb-faq-split-heading-columns-accordion" }, [questionColumnsAccordionLayout])])
+		children: el("div", { className: "rb-faq-split-heading-columns rb-grid rb-grid-cols-1 rb-gap-8 rb-lg-grid-cols-2 rb-items-start" }, [el("div", { className: "rb-faq-split-heading-columns-copy" }, [headingLayout]), el("div", { className: "rb-faq-split-heading-columns-accordion" }, [questionColumnsAccordionLayout])])
 	}),
 	baseClass: ""
 });
@@ -19101,17 +18384,6 @@ const centeredLayout = stack({
 		fallback: `rb-container rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-flex-col rb-items-center rb-gap-5 rb-text-center`
 	})
 }, [centeredLogoRow, createNavRow(`${desktopOnlyDisplay("flex")} rb-flex-wrap rb-justify-center rb-gap-x-6 rb-gap-y-3`, "center")], when("$root.theme.header.variant", { equals: "centered" }));
-const transparentLayout = inline({
-	className: bindProp("$root.theme.header.maxWidth", {
-		transforms: pipe(tx("layout.maxWidthClass", { base: `rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6` })),
-		fallback: `rb-container rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6`
-	}),
-	align: "center"
-}, [
-	logoRow,
-	createNavRow(`rb-ml-auto ${desktopOnlyDisplay("flex")} rb-gap-6`),
-	headerCta
-], when("$root.theme.header.variant", { equals: "transparent" }));
 const floatingLayout = inline({
 	[SITE_CHROME_VISIBLE_HEADER_ATTR]: "true",
 	className: bindProp("$root.theme.header.maxWidth", {
@@ -19170,7 +18442,6 @@ const siteHeaderBlockDefinition = { manifest: createBlockManifest({
 		classicLayout,
 		classicCenteredNavLayout,
 		centeredLayout,
-		transparentLayout,
 		floatingLayout,
 		mobileOverlay
 	], props({ "data-site-header": "true" })),
@@ -19875,26 +19146,20 @@ const repeatedItemsNode = repeaterFragmentLayout({
 	itemName: ITEM_NAME$1,
 	fragments: collectionFragments,
 	itemGap: "md",
-	itemClassName: {
-		$bind: {
-			from: "content._cardStyles",
-			transforms: [{
-				id: "boxStyles.all",
-				options: {
-					axis: "all",
-					baseClass: "rb-collection-item rb-relative rb-isolate rb-overflow-visible rb-border"
-				}
-			}]
-		},
+	itemClassName: { $bind: {
+		from: "content._cardStyles",
+		transforms: [{
+			id: "boxStyles.all",
+			options: {
+				axis: "all",
+				baseClass: "rb-collection-item rb-relative rb-isolate rb-overflow-visible rb-border"
+			}
+		}],
 		fallback: "rb-collection-item"
-	}
+	} }
 });
 const gridLayoutNode = el("grid", {
-	cols: { $bind: {
-		from: "content.columns",
-		fallback: 3,
-		coerce: "number"
-	} },
+	userColumns: userColumnsGridBinding(),
 	gap: { $bind: {
 		from: "content.gap",
 		fallback: "medium"
@@ -19933,79 +19198,26 @@ const collectionBlockDefinition = { manifest: createBlockManifest({
 	additionalFields: [
 		parseFieldDefinition({
 			id: "layout",
-			type: "select",
-			label: "Layout",
-			defaultValue: "grid",
-			options: [{
-				value: "grid",
-				label: "Grid"
-			}, {
-				value: "stack",
-				label: "Stack"
-			}],
-			ui: { intent: "display" }
-		}),
-		parseFieldDefinition({
-			id: "columns",
-			type: "select",
-			label: "Columns",
-			description: "Number of columns in the grid layout.",
-			defaultValue: "3",
-			options: [
-				{
-					value: "2",
-					label: "2 columns"
-				},
-				{
-					value: "3",
-					label: "3 columns"
-				},
-				{
-					value: "4",
-					label: "4 columns"
-				}
-			],
-			ui: {
-				intent: "display",
-				visibleWhen: {
-					field: "layout",
-					equals: "grid"
-				}
-			}
-		}),
-		parseFieldDefinition({
-			id: "gap",
-			type: "select",
-			label: "Gap",
-			defaultValue: "medium",
-			options: [
-				{
-					value: "none",
-					label: "None"
-				},
-				{
-					value: "compact",
-					label: "Compact"
-				},
-				{
-					value: "cozy",
-					label: "Cozy"
-				},
-				{
-					value: "medium",
-					label: "Medium"
-				},
-				{
-					value: "comfortable",
-					label: "Comfortable"
-				},
-				{
-					value: "spacious",
-					label: "Spacious"
-				}
-			],
+			type: "select",
+			label: "Layout",
+			defaultValue: "grid",
+			options: [{
+				value: "grid",
+				label: "Grid"
+			}, {
+				value: "stack",
+				label: "Stack"
+			}],
 			ui: { intent: "display" }
 		}),
+		columnsSelectField({
+			description: "Number of columns in the grid layout.",
+			visibleWhen: {
+				field: "layout",
+				equals: "grid"
+			}
+		}),
+		gapSelectField(),
 		fragmentsToRepeaterField("items", "Items", collectionFragments, {
 			minItems: 0,
 			maxItems: 50,
@@ -20043,6 +19255,22 @@ const FEATURE_CARD_GENERATED_ICON_SIZE_PX = {
 };
 //#endregion
 //#region ../blocks/src/system/blocks/feature-cards.ts
+const featureCardItemRole = {
+	from: "card.surfaceRole",
+	aliases: {
+		open: "none",
+		panel: "alternative"
+	}
+};
+/** The shared child hooks, bound from this block's per-item surface choice. */
+function featureCardChildClass(emit, baseClass) {
+	return cardRoleChildClass({
+		emit,
+		baseClass,
+		stylesFrom: "content._cardStyles",
+		itemRole: featureCardItemRole
+	});
+}
 function grid$2(props, children) {
 	return el("grid", props ?? void 0, children ?? void 0);
 }
@@ -20073,12 +19301,12 @@ const editorialSectionHeading = stack({
 		style: textColorStyle("mutedText")
 	}, when("content.description"), bind("content.description"))
 ]);
-const featureCard = styledCard([el("div", { className: "rb-feature-card-media-frame rb-overflow-hidden rb-w-full" }, [media({
+const featureCard = styledCard([el("div", { className: featureCardChildClass("media", "rb-feature-card-media-frame rb-overflow-hidden rb-w-full") }, [media({
 	className: "rb-feature-card-media rb-w-full rb-h-auto rb-object-cover",
 	style: { aspectRatio: { $bind: { from: "card.aspectRatio" } } }
 }, bind("card.media"))], when("card.media")), stack({
 	gap: "sm",
-	className: "rb-feature-card-content rb-flex-1 rb-p-6"
+	className: featureCardChildClass("content", "rb-feature-card-content rb-flex-1 rb-p-6")
 }, [
 	el("feature-card-icon", {
 		treatment: { $bind: {
@@ -20114,6 +19342,7 @@ const featureCard = styledCard([el("div", { className: "rb-feature-card-media-fr
 	stylesFrom: "content._cardStyles",
 	backgroundFrom: "content._cardStyles.background",
 	baseClassName: "rb-feature-card rb-relative rb-isolate rb-border rb-flex rb-h-full rb-flex-col",
+	itemRole: featureCardItemRole,
 	dataProps: { "data-surface-role": { $bind: {
 		from: "card.surfaceRole",
 		fallback: "open"
@@ -20129,11 +19358,7 @@ const cardsLayout = styledSection({
 				from: "content.cardMarker",
 				fallback: "icons"
 			} },
-			cols: { $bind: {
-				from: "content.columns",
-				fallback: 3,
-				coerce: "number"
-			} },
+			userColumns: userColumnsGridBinding(),
 			gap: "lg"
 		}, [featureCard])]
 	}),
@@ -20193,29 +19418,7 @@ const featureCardsBlockDefinition = { manifest: createBlockManifest({
 			required: false,
 			ui: { richTextVariant: "limited" }
 		},
-		{
-			id: "columns",
-			type: "select",
-			label: "Columns",
-			required: false,
-			defaultValue: "3",
-			multiple: false,
-			options: [
-				{
-					value: "2",
-					label: "2 columns"
-				},
-				{
-					value: "3",
-					label: "3 columns"
-				},
-				{
-					value: "4",
-					label: "4 columns"
-				}
-			],
-			ui: { intent: "display" }
-		},
+		columnsSelectField(),
 		{
 			id: "cards",
 			type: "repeater",
@@ -20505,6 +19708,19 @@ function createCarouselBehaviorFields(options = {}) {
 		}
 	];
 }
+/**
+* Media-text's card is an author choice ("wrap text in a card") styled through
+* `_textCardStyles`, while the Look compiles its card role onto the shared
+* `_cardStyles`. The role therefore rides in as the per-card override and the
+* author's own card fields ride along on top, through the one card-class
+* emission path. Padding stays the author's `Inner spacing` choice, so no
+* `.card-content` hook is emitted here (Phase 2b).
+*/
+const mediaTextCardOptions = {
+	stylesFrom: "content._textCardStyles",
+	backgroundFrom: "content._textCardStyles.background",
+	itemRole: { from: "content._cardStyles.role" }
+};
 const textCardStylesField = (() => {
 	const field = cardStylesField({
 		id: "_textCardStyles",
@@ -20598,41 +19814,10 @@ const mediaTextBlockDefinition = { manifest: createBlockManifest({
 			defaultValue: "left",
 			uiIntent: "display"
 		}),
-		{
-			id: "gap",
-			type: "select",
+		gapSelectField({
 			label: "Gap between media and text",
-			required: false,
-			defaultValue: "comfortable",
-			multiple: false,
-			options: [
-				{
-					value: "none",
-					label: "None"
-				},
-				{
-					value: "compact",
-					label: "Compact"
-				},
-				{
-					value: "cozy",
-					label: "Cozy"
-				},
-				{
-					value: "medium",
-					label: "Medium"
-				},
-				{
-					value: "comfortable",
-					label: "Comfortable"
-				},
-				{
-					value: "spacious",
-					label: "Spacious"
-				}
-			],
-			ui: { intent: "display" }
-		},
+			defaultValue: "comfortable"
+		}),
 		{ ...createImageColSizeField({
 			id: "ratio",
 			label: "Image column size",
@@ -20740,16 +19925,10 @@ const mediaTextBlockDefinition = { manifest: createBlockManifest({
 			as: "p",
 			className: eyebrowClassName("rb-eyebrow heading-eyebrow")
 		}, when("content.eyebrow"), bind("content.eyebrow")), text({ as: "h2" }, bind("content.title"))], when("content.title"));
-		const defaultTextColumn = el("div", {}, [styledCard([richText({ className: "rb-prose rb-max-w-none" }, bind("content.text"))], {
-			stylesFrom: "content._textCardStyles",
-			backgroundFrom: "content._textCardStyles.background"
-		}, when("content.wrapTextInCard")), richText({ className: "rb-prose rb-max-w-none" }, when("content.wrapTextInCard", { not: true }), bind("content.text"))]);
+		const defaultTextColumn = el("div", {}, [styledCard([richText({ className: "rb-prose rb-max-w-none" }, bind("content.text"))], mediaTextCardOptions, when("content.wrapTextInCard")), richText({ className: "rb-prose rb-max-w-none" }, when("content.wrapTextInCard", { not: true }), bind("content.text"))]);
 		const bioTextColumn = el("div", { className: "rb-flex rb-h-full rb-w-full rb-max-w-prose rb-flex-col rb-justify-center rb-gap-5" }, [
 			copyHeading,
-			styledCard([richText({ className: bodyClassNameFromAlignment }, bind("content.text"))], {
-				stylesFrom: "content._textCardStyles",
-				backgroundFrom: "content._textCardStyles.background"
-			}, when("content.wrapTextInCard")),
+			styledCard([richText({ className: bodyClassNameFromAlignment }, bind("content.text"))], mediaTextCardOptions, when("content.wrapTextInCard")),
 			richText({ className: bodyClassNameFromAlignment }, when("content.wrapTextInCard", { not: true }), bind("content.text"))
 		]);
 		const defaultImageCommonProps = {
@@ -20813,19 +19992,13 @@ const mediaTextBlockDefinition = { manifest: createBlockManifest({
 			imageWrapperClassName: "rb-w-full rb-shrink-0",
 			textWrapperClassName: "rb-w-full rb-min-w-0 rb-flex-1 rb-self-stretch"
 		})], whenImagesLength(0, { not: true }));
-		const defaultTextOnlyLayout = el("div", {}, [styledCard([richText({ className: "rb-prose rb-max-w-none" }, bind("content.text"))], {
-			stylesFrom: "content._textCardStyles",
-			backgroundFrom: "content._textCardStyles.background"
-		}, when("content.wrapTextInCard")), richText({ className: "rb-prose rb-max-w-none" }, when("content.wrapTextInCard", { not: true }), bind("content.text"))], whenImagesLength(0));
+		const defaultTextOnlyLayout = el("div", {}, [styledCard([richText({ className: "rb-prose rb-max-w-none" }, bind("content.text"))], mediaTextCardOptions, when("content.wrapTextInCard")), richText({ className: "rb-prose rb-max-w-none" }, when("content.wrapTextInCard", { not: true }), bind("content.text"))], whenImagesLength(0));
 		const bioTextOnlyLayout = el("div", { className: "rb-flex rb-w-full rb-max-w-prose rb-flex-col rb-gap-5" }, [
 			text({
 				as: "h2",
 				className: titleClassNameFromAlignment
 			}, when("content.title"), bind("content.title")),
-			styledCard([richText({ className: bodyClassNameFromAlignment }, bind("content.text"))], {
-				stylesFrom: "content._textCardStyles",
-				backgroundFrom: "content._textCardStyles.background"
-			}, when("content.wrapTextInCard")),
+			styledCard([richText({ className: bodyClassNameFromAlignment }, bind("content.text"))], mediaTextCardOptions, when("content.wrapTextInCard")),
 			richText({ className: bodyClassNameFromAlignment }, when("content.wrapTextInCard", { not: true }), bind("content.text"))
 		], whenImagesLength(0));
 		const defaultInner = el("div", {}, [defaultImagesLayout, defaultTextOnlyLayout]);
@@ -20875,6 +20048,44 @@ const mediaTextBlockDefinition = { manifest: createBlockManifest({
 	],
 	icon: "Columns"
 }) };
+//#endregion
+//#region ../blocks/src/system/blocks/appointment-booking.tsx
+const bookingHeading = text({ as: "h2" }, bind("content.heading"), when("content.heading"));
+const bookingDescription = richText({}, bind("content.description"), when("content.description"));
+/**
+* The wizard island itself. Structure above it may change per variant, but this
+* node never does — the SSR shell and the hydrated client agree on geometry
+* because the split lives *outside* the island root, in server-rendered markup
+* that hydration never rewrites.
+*/
+const bookingWizard = bookingForm(withApiBindings({
+	portalToken: { $bind: {
+		from: "$root.portalToken",
+		fallback: null
+	} },
+	formId: { $bind: { from: "content.formId" } },
+	form: { $bind: { from: "data.form" } },
+	services: { $bind: { from: "data.services" } }
+}));
+/** Both variants sit in the same section shell; only the inner layout differs. */
+function bookingSection(children) {
+	return styledSection({
+		children: sectionContainer([...children], { gap: "lg" }),
+		baseClass: "",
+		spacing: "spacious"
+	});
+}
+/** Heading, description and wizard in one column — the historical layout. */
+const stackedLayout$1 = bookingSection([
+	bookingHeading,
+	bookingDescription,
+	bookingWizard
+]);
+/**
+* Section copy beside the booking card. Two columns from `lg` up (roughly 40/60,
+* giving the wizard the wider side), stacking to the default order below that.
+*/
+const splitCopyLayout = bookingSection([el("div", { className: "rb-booking-split rb-grid rb-grid-cols-1 rb-gap-8 rb-lg-grid-cols-5 rb-items-start" }, [el("div", { className: "rb-booking-split-copy rb-lg-col-span-2" }, [stack({ gap: "md" }, [bookingHeading, bookingDescription])]), el("div", { className: "rb-booking-split-form rb-lg-col-span-3 rb-min-w-0" }, [bookingWizard])])]);
 const appointmentBookingBlockDefinition = {
 	manifest: createBlockManifest({
 		id: "block.appointment-booking",
@@ -20936,23 +20147,24 @@ const appointmentBookingBlockDefinition = {
 			"reservation"
 		],
 		icon: "Calendar",
-		layout: [styledSection({
-			children: sectionContainer([
-				text({ as: "h2" }, bind("content.heading"), when("content.heading")),
-				richText({}, bind("content.description"), when("content.description")),
-				bookingForm(withApiBindings({
-					portalToken: { $bind: {
-						from: "$root.portalToken",
-						fallback: null
-					} },
-					formId: { $bind: { from: "content.formId" } },
-					form: { $bind: { from: "data.form" } },
-					services: { $bind: { from: "data.services" } }
-				}))
-			], { gap: "lg" }),
-			baseClass: "",
-			spacing: "spacious"
-		})]
+		layout: [stackedLayout$1],
+		variants: {
+			default: stackedLayout$1,
+			"split-copy": splitCopyLayout
+		},
+		defaultVariant: "default",
+		variantOptions: {
+			default: {
+				label: "Stacked",
+				description: "Heading and description above the booking form.",
+				icon: "Rows2"
+			},
+			"split-copy": {
+				label: "Split copy",
+				description: "Pairs the wizard with your heading and intro copy, side by side; stacks on smaller screens.",
+				icon: "Columns2"
+			}
+		}
 	}),
 	dataSchemas: { availability: z.object({ slots: z.array(z.object({
 		startAt: z.string(),
@@ -21487,6 +20699,7 @@ const eventPresetSchema = z.enum([
 	"event",
 	"class",
 	"course",
+	"term",
 	"workshop",
 	"retreat",
 	"performance"
@@ -21545,57 +20758,49 @@ z.enum([
 */
 const accessRestrictionSchema = z.enum(["none", "category"]);
 z.enum(["single", "ticket_types"]);
+const freePriceDisplaySchema = z.object({
+	kind: z.literal("free"),
+	currency: z.string()
+});
+const exactPriceDisplaySchema = z.object({
+	kind: z.literal("exact"),
+	amount: z.number(),
+	currency: z.string()
+});
+const fromPriceDisplaySchema = z.object({
+	kind: z.literal("from"),
+	amount: z.number(),
+	currency: z.string()
+});
+const unavailablePriceDisplaySchema = z.object({
+	kind: z.literal("unavailable"),
+	currency: z.string()
+});
+const rangePriceDisplaySchema = z.object({
+	kind: z.literal("range"),
+	minAmount: z.number(),
+	maxAmount: z.number(),
+	currency: z.string()
+});
+const mixedPriceDisplaySchema = z.object({
+	kind: z.literal("mixed"),
+	paidFromAmount: z.number(),
+	paidToAmount: z.number(),
+	currency: z.string()
+});
 const publicCoursePriceDisplaySchema = z.discriminatedUnion("kind", [
-	z.object({
-		kind: z.literal("free"),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("exact"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("from"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("unavailable"),
-		currency: z.string()
-	})
+	freePriceDisplaySchema,
+	exactPriceDisplaySchema,
+	fromPriceDisplaySchema,
+	unavailablePriceDisplaySchema
 ]);
 z.discriminatedUnion("kind", [
-	z.object({
-		kind: z.literal("free"),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("exact"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("from"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("range"),
-		minAmount: z.number(),
-		maxAmount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("mixed"),
-		paidFromAmount: z.number(),
-		paidToAmount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("unavailable"),
-		currency: z.string()
-	}),
+	freePriceDisplaySchema,
+	exactPriceDisplaySchema,
+	fromPriceDisplaySchema,
+	rangePriceDisplaySchema,
+	mixedPriceDisplaySchema,
+	unavailablePriceDisplaySchema,
 	z.object({
 		kind: z.literal("external"),
 		label: z.string()
@@ -21606,36 +20811,12 @@ z.discriminatedUnion("kind", [
 	})
 ]);
 const publicEventTicketTypePriceDisplaySchema = z.union([
-	z.object({
-		kind: z.literal("free"),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("exact"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("from"),
-		amount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("range"),
-		minAmount: z.number(),
-		maxAmount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("mixed"),
-		paidFromAmount: z.number(),
-		paidToAmount: z.number(),
-		currency: z.string()
-	}),
-	z.object({
-		kind: z.literal("unavailable"),
-		currency: z.string()
-	})
+	freePriceDisplaySchema,
+	exactPriceDisplaySchema,
+	fromPriceDisplaySchema,
+	rangePriceDisplaySchema,
+	mixedPriceDisplaySchema,
+	unavailablePriceDisplaySchema
 ]);
 const publicEventAttendanceModeSchema = z.enum(["in_person", "online"]);
 const publicEventAttendanceModeAvailabilitySchema = z.object({
@@ -21749,6 +20930,22 @@ const publicTeamMemberSummarySchema = z.object({
 	summary: z.string().nullable(),
 	profilePath: z.string().nullable()
 });
+const publicEventBookingAvailabilitySchema = z.discriminatedUnion("kind", [z.object({ kind: z.literal("open") }), z.object({
+	kind: z.literal("closed"),
+	reason: z.enum([
+		"occurrence_cancelled",
+		"occurrence_completed",
+		"series_draft",
+		"series_cancelled",
+		"series_completed",
+		"series_archived",
+		"parent_archived",
+		"parent_inconsistent",
+		"not_public",
+		"already_started",
+		"enrollment_closed"
+	])
+})]);
 /**
 * Zod schema for public event data
 */
@@ -21773,6 +20970,7 @@ const publicEventSchema = z.object({
 	path: z.string().nullable(),
 	destination: publicEventDestinationSchema,
 	requiresRegistration: z.boolean(),
+	bookingAvailability: publicEventBookingAvailabilitySchema,
 	deliveryMode: z.enum([
 		"in_person",
 		"online",
@@ -21791,6 +20989,8 @@ const publicEventSchema = z.object({
 	status: z.enum([
 		"active",
 		"draft",
+		"cancelled",
+		"completed",
 		"archived"
 	]).optional(),
 	timeZone: z.string(),
@@ -21970,6 +21170,7 @@ function normalizeIdList(parts) {
 //#region ../blocks/src/system/blocks/events/shared/filtering.ts
 const eventSurfacePresetValues = [
 	"course",
+	"term",
 	"class",
 	"workshop",
 	"retreat",
@@ -22103,6 +21304,7 @@ const unsupportedEventRegistrationPageSurfaceSubjectSchema = z.object({
 	reason: z.enum([
 		"unsupportedSubject",
 		"invalidEventSeriesId",
+		"invalidEventSeriesBookingScope",
 		"invalidEventOfferingId"
 	])
 });
@@ -22850,6 +22052,10 @@ const eventRegistrationBlockDefinition = {
 		},
 		wholeSeriesOffering: {
 			endpoint: "getPublicWholeSeriesOffering",
+			when: { $bind: {
+				from: "$root.subject.isWholeSeriesBooking",
+				fallback: false
+			} },
 			params: {
 				siteId: { $bind: { from: "$root.siteId" } },
 				eventSeriesId: { $bind: { from: "$root.subject.eventSeriesId" } },
@@ -23683,11 +22889,14 @@ const eventSpotlightBlockDefinition = {
 };
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/utils.ts
-/** Column class mappings for grid layouts */
+/**
+* Column class mappings for grid layouts, derived from the canonical
+* responsive column ladder (see gridUserColumnLadder).
+*/
 const COLUMN_CLASSES = {
-	"2": "rb-sm-grid-cols-2",
-	"3": "rb-sm-grid-cols-2 rb-lg-grid-cols-3",
-	"4": "rb-sm-grid-cols-2 rb-lg-grid-cols-3 rb-xl-grid-cols-4"
+	"2": gridUserColumnClasses(2),
+	"3": gridUserColumnClasses(3),
+	"4": gridUserColumnClasses(4)
 };
 /**
 * Build container class based on layout mode
@@ -23699,7 +22908,7 @@ function getContainerClass(layout, columns) {
 	if (layout === "compact") return "event-listing-compact-container rb-flex rb-flex-col";
 	if (layout === "stack") return "rb-flex rb-flex-col rb-gap-6";
 	const fallbackColumnClass = COLUMN_CLASSES["3"] ?? "";
-	return `rb-grid rb-items-stretch rb-grid-cols-1 rb-gap-6 ${COLUMN_CLASSES[columns] ?? fallbackColumnClass}`;
+	return `rb-grid rb-items-stretch rb-gap-6 ${COLUMN_CLASSES[columns] ?? fallbackColumnClass}`;
 }
 /**
 * Get card orientation based on layout mode
@@ -27451,8 +26660,8 @@ const audioPlayerBlockDefinition = { manifest: createBlockManifest({
 		}
 	],
 	layout: styledSection({
-		children: stack({ className: "rb-container rb-mx-auto rb-max-w-3xl" }, [el("div", { className: "card-surface rb-overflow-hidden" }, [media({
-			className: "rb-aspect-video rb-w-full rb-object-cover",
+		children: stack({ className: "rb-container rb-mx-auto rb-max-w-3xl" }, [el("div", { className: "card-role-default" }, [media({
+			className: "card-media rb-aspect-video rb-w-full rb-object-cover",
 			size: {
 				width: 960,
 				height: 540,
@@ -29655,6 +28864,28 @@ const newsletterSignupBlockDefinition = {
 //#endregion
 //#region ../blocks/src/system/blocks/team-members.ts
 const ITEM_NAME = "member";
+/**
+* Team members gains a card surface with the role contract (issue 1297, Phase
+* 2b): the repeated member wrapper renders whatever card the site style's role
+* resolves to. No Look assigns the block a role yet, and with no compiled card
+* styles the binding contributes nothing, so today's rendering is unchanged.
+*/
+const memberCardClassName = { $bind: {
+	from: "content._cardStyles",
+	transforms: [{
+		id: "boxStyles.all",
+		options: {
+			axis: "all",
+			baseClass: ""
+		}
+	}],
+	fallback: ""
+} };
+const memberPhotoClassName = (baseClass) => cardRoleChildClass({
+	emit: "media",
+	baseClass,
+	stylesFrom: "content._cardStyles"
+});
 const teamMemberPhotoSchema = mediaSchema.refine((media) => media.type === "image", { message: "Team member photos must be image media" }).nullable();
 const teamMemberDataSchema = z.object({
 	_type: z.literal("teamMember"),
@@ -29710,7 +28941,7 @@ const wrapVariant = (variantLayout) => styledSection({
 	baseClass: "",
 	spacing: "comfortable"
 });
-const teamMemberStackLayout = el("div", { className: "rb-team-member rb-team-member--stack rb-flex rb-flex-col rb-md-flex-row rb-items-start rb-gap-3" }, [el("div", { className: "rb-team-member-photo-col rb-w-full rb-shrink-0" }, [el("div", { className: "rb-team-member-photo-wrap rb-w-full" }, [media({
+const teamMemberStackLayout = el("div", { className: "rb-team-member rb-team-member--stack rb-flex rb-flex-col rb-md-flex-row rb-items-start rb-gap-3" }, [el("div", { className: "rb-team-member-photo-col rb-w-full rb-shrink-0" }, [el("div", { className: memberPhotoClassName("rb-team-member-photo-wrap rb-w-full") }, [media({
 	className: "rb-team-member-photo rb-w-full rb-object-cover",
 	style: { aspectRatio: "1 / 1" },
 	size: {
@@ -29734,27 +28965,27 @@ const teamMemberStackLayout = el("div", { className: "rb-team-member rb-team-mem
 	}, when("role"), bind("role")),
 	richText({ className: "rb-prose rb-max-w-none" }, when("bio"), bind("bio"))
 ])]);
-const gridVariant = wrapVariant(el("grid", {
-	cols: { $bind: {
-		from: "content.columns",
-		fallback: 3,
-		coerce: "number"
-	} },
-	gap: { $bind: {
-		from: "content.gap",
-		fallback: "medium"
-	} }
-}, [when("content.source", manualSourceWhen)(repeaterFragmentLayout({
+const manualGridMembersNode = when("content.source", manualSourceWhen)(repeaterFragmentLayout({
 	collectionPath: "content.members",
 	itemName: ITEM_NAME,
 	fragments: { teamMember: teamMemberFragment },
-	itemGap: "sm"
-})), when("content.source", dynamicSourceWhen)(repeaterFragmentLayout({
+	itemGap: "sm",
+	itemClassName: memberCardClassName
+}));
+const dynamicGridMembersNode = when("content.source", dynamicSourceWhen)(repeaterFragmentLayout({
 	collectionPath: "data.members",
 	itemName: ITEM_NAME,
 	fragments: { teamMember: teamMemberFragment },
-	itemGap: "sm"
-}))]));
+	itemGap: "sm",
+	itemClassName: memberCardClassName
+}));
+const gridVariant = wrapVariant(el("grid", {
+	userColumns: userColumnsGridBinding(),
+	gap: { $bind: {
+		from: "content.gap",
+		fallback: "medium"
+	} }
+}, [manualGridMembersNode, dynamicGridMembersNode]));
 const stackVariant = wrapVariant({
 	type: "stack",
 	props: { gap: { $bind: {
@@ -29766,13 +28997,15 @@ const stackVariant = wrapVariant({
 		itemName: ITEM_NAME,
 		fragments: { teamMember: teamMemberFragment },
 		layoutOverrides: { teamMember: teamMemberStackLayout },
-		itemGap: "sm"
+		itemGap: "sm",
+		itemClassName: memberCardClassName
 	})), when("content.source", dynamicSourceWhen)(repeaterFragmentLayout({
 		collectionPath: "data.members",
 		itemName: ITEM_NAME,
 		fragments: { teamMember: teamMemberFragment },
 		layoutOverrides: { teamMember: teamMemberStackLayout },
-		itemGap: "sm"
+		itemGap: "sm",
+		itemClassName: memberCardClassName
 	}))]
 });
 const teamMembersBlockDefinition = {
@@ -29922,66 +29155,11 @@ const teamMembersBlockDefinition = {
 					}
 				}
 			}),
-			parseFieldDefinition({
-				id: "columns",
-				type: "select",
-				label: "Columns",
-				defaultValue: "3",
-				options: [
-					{
-						value: "2",
-						label: "2 columns"
-					},
-					{
-						value: "3",
-						label: "3 columns"
-					},
-					{
-						value: "4",
-						label: "4 columns"
-					}
-				],
-				ui: {
-					intent: "display",
-					visibleWhen: {
-						field: "variant",
-						equals: "grid"
-					}
-				}
-			}),
-			parseFieldDefinition({
-				id: "gap",
-				type: "select",
-				label: "Gap",
-				defaultValue: "medium",
-				options: [
-					{
-						value: "none",
-						label: "None"
-					},
-					{
-						value: "compact",
-						label: "Compact"
-					},
-					{
-						value: "cozy",
-						label: "Cozy"
-					},
-					{
-						value: "medium",
-						label: "Medium"
-					},
-					{
-						value: "comfortable",
-						label: "Comfortable"
-					},
-					{
-						value: "spacious",
-						label: "Spacious"
-					}
-				],
-				ui: { intent: "display" }
-			}),
+			columnsSelectField({ visibleWhen: {
+				field: "variant",
+				equals: "grid"
+			} }),
+			gapSelectField(),
 			{
 				...fragmentsToRepeaterField("members", "Team members", { teamMember: teamMemberFragment }, {
 					minItems: 0,
@@ -29997,7 +29175,11 @@ const teamMembersBlockDefinition = {
 						equals: "manual"
 					}
 				}
-			}
+			},
+			cardStylesField({
+				id: "_cardStyles",
+				label: "Member card styles"
+			})
 		],
 		layout: gridVariant,
 		variants: {
@@ -30415,14 +29597,14 @@ function sectionOnly() {
 	return declareBlockDesignCapability({
 		sectionSurfaces: "supported",
 		contentFrames: ["plain"],
-		itemSurfaces: "unsupported"
+		cardRoles: "unsupported"
 	});
 }
 function panelCapable() {
 	return declareBlockDesignCapability({
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "unsupported"
+		cardRoles: "unsupported"
 	});
 }
 const heroSectionHeights = [
@@ -30460,7 +29642,7 @@ function heroCapable() {
 		sectionSurfaces: "supported",
 		richBackgrounds: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "unsupported",
+		cardRoles: "unsupported",
 		sectionHeights: heroSectionHeights,
 		imageSurfaceTreatments: heroImageSurfaceTreatments,
 		imageSurfaceMotions: heroImageSurfaceMotions
@@ -30470,14 +29652,14 @@ function plainItemsCapable() {
 	return declareBlockDesignCapability({
 		sectionSurfaces: "supported",
 		contentFrames: ["plain"],
-		itemSurfaces: "supported"
+		cardRoles: "supported"
 	});
 }
 function panelAndItemsCapable() {
 	return declareBlockDesignCapability({
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "supported"
+		cardRoles: "supported"
 	});
 }
 function mediaPanelCapable() {
@@ -30488,7 +29670,7 @@ function mediaPanelCapable() {
 			"panel",
 			"flush-panel"
 		],
-		itemSurfaces: "unsupported"
+		cardRoles: "supported"
 	});
 }
 const allSectionSurfaces = [
@@ -30521,7 +29703,7 @@ function scheduleDetailsCapable() {
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain"],
-		itemSurfaces: "unsupported",
+		cardRoles: "unsupported",
 		tileTreatments: scheduleTileTreatments
 	});
 }
@@ -30530,7 +29712,7 @@ function eventListCapable() {
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "unsupported",
+		cardRoles: "unsupported",
 		eventListTreatments
 	});
 }
@@ -30539,7 +29721,7 @@ function offeringsPreviewCapable() {
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain"],
-		itemSurfaces: "supported"
+		cardRoles: "supported"
 	});
 }
 function defaultBoundaryBias(visualWeight) {
@@ -30658,7 +29840,7 @@ const systemBlockDefinitions = [
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "unsupported",
+		cardRoles: "unsupported",
 		compositions: {
 			kind: "intro",
 			treatments: ["editorial-statement", "portrait-bio"]
@@ -30785,7 +29967,7 @@ const systemBlockDefinitions = [
 	withDesignCapability("block.faq", faqBlockDefinition, withLookCapability(withEyebrowCapability(declareBlockDesignCapability({
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "supported",
+		cardRoles: "supported",
 		accordionIconSets: [
 			"plus",
 			"chevron",
@@ -30829,14 +30011,11 @@ const systemBlockDefinitions = [
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "supported",
-		testimonialCardTreatments: [
-			"default",
-			"statement",
-			"non-carded",
-			"accent-quote",
-			"editorial-serif-quote"
-		],
+		cardRoles: "supported",
+		compositions: {
+			kind: "testimonials",
+			treatments: ["open-editorial"]
+		},
 		headingDecorationCapability: {
 			kind: "supported",
 			families: ["short-center-rule"]
@@ -30896,7 +30075,7 @@ const systemBlockDefinitions = [
 		looks: "supported",
 		sectionSurfaces: "supported",
 		contentFrames: ["plain", "panel"],
-		itemSurfaces: "supported",
+		cardRoles: "supported",
 		compositions: {
 			kind: "feature-cards",
 			treatments: ["asymmetric-emphasis", "framed-programme"]
@@ -30938,12 +30117,16 @@ const systemBlockDefinitions = [
 			bias: "soft"
 		})]
 	})),
-	withDesignCapability("block.appointment-booking", appointmentBookingBlockDefinition, sectionOnly(), defineBlockDesignMetadata({
+	withDesignCapability("block.appointment-booking", appointmentBookingBlockDefinition, withLookCapability(sectionOnly()), defineBlockDesignMetadata({
 		flow: conversionFlow,
 		layoutProfiles: [layoutProfile({
 			variantKey: "default",
 			family: "form",
 			weight: "standard"
+		}), layoutProfile({
+			variantKey: "split-copy",
+			family: "split",
+			weight: "standard"
 		})]
 	})),
 	withDesignCapability("block.weekly-slot-availability", weeklySlotAvailabilityBlockDefinition, sectionOnly(), defineBlockDesignMetadata({
@@ -31048,7 +30231,11 @@ const systemBlockDefinitions = [
 			weight: "standard"
 		})]
 	})),
-	withDesignCapability("block.team-members", teamMembersBlockDefinition, sectionOnly(), defineBlockDesignMetadata({
+	withDesignCapability("block.team-members", teamMembersBlockDefinition, declareBlockDesignCapability({
+		sectionSurfaces: "supported",
+		contentFrames: ["plain"],
+		cardRoles: "supported"
+	}), defineBlockDesignMetadata({
 		flow: proofFlow,
 		layoutProfiles: [layoutProfile({
 			variantKey: "grid",