@riverbankcms/sdk 0.129.0 → 0.130.0

package/dist/server/manifest.mjs

@@ -0,0 +1,4966 @@
+import { z } from "zod";
+import * as fs from "fs/promises";
+import * as path from "path";
+//#region ../blocks/src/system/node/validation-constants.ts
+/**
+* Constants for validating declarative node layouts.
+*
+* These whitelists define which node types and transform IDs
+* are allowed in custom block layouts.
+*/
+/**
+* Valid node types for declarative layouts.
+*
+* This whitelist defines which component types can be used in
+* SdkCustomBlock.layout definitions. Node types not in this list
+* will be rejected during validation.
+*/
+const ALLOWED_NODE_TYPES = [
+	"div",
+	"figure",
+	"section",
+	"headerSection",
+	"stack",
+	"inline",
+	"grid",
+	"text",
+	"richText",
+	"media",
+	"videoEmbed",
+	"icon",
+	"feature-card-icon",
+	"svg",
+	"button",
+	"link",
+	"carousel",
+	"accordion",
+	"accordionItem",
+	"form",
+	"booking-form",
+	"weekly-slot-availability",
+	"event-registration",
+	"event-spotlight",
+	"event-listing",
+	"event-calendar",
+	"offerings-preview",
+	"event-combined",
+	"shop",
+	"product-list",
+	"product-detail",
+	"cart",
+	"checkout",
+	"gifting"
+];
+/**
+* Valid transform IDs for declarative layouts.
+*
+* This whitelist defines which transforms can be referenced in
+* $bind.transforms within custom block layouts. Transform IDs
+* not in this list will be rejected during validation.
+*/
+const ALLOWED_TRANSFORM_IDS = [
+	"string.uppercase",
+	"value.fallback",
+	"date.formatShort",
+	"array.length",
+	"value.jsonArray",
+	"value.csv",
+	"array.marqueeLoop",
+	"value.mapToken",
+	"layout.maxWidthClass",
+	"layout.headerRootClass",
+	"layout.footerRootClass",
+	"layout.headerRootStyle",
+	"layout.headerSectionBackground",
+	"layout.classicNavMode",
+	"layout.footerRootStyle",
+	"ui.headerNavLinkClass",
+	"ui.headingClassFromAlignment",
+	"ui.bodyClassFromAlignment",
+	"ui.stackAlignFromAlignment",
+	"ui.sectionStateTone",
+	"ui.heroContentWrapperClass",
+	"ui.heroCtaJustify",
+	"ui.heroStackJustifyFromVerticalAlignment",
+	"ui.heroGridClassFromVerticalAlignment",
+	"ui.conditionalClass",
+	"ui.twoColumnContainerClass",
+	"ui.twoColumnFlexBasis",
+	"ui.imageGalleryFilterClass",
+	"ui.imageGalleryTileClass",
+	"ui.imageGalleryTileStyle",
+	"ui.imageGalleryMarqueeTileStyle",
+	"ui.imageGalleryMarqueeDuration",
+	"ui.imageGalleryMarqueeDirection",
+	"ui.imageFragmentClass",
+	"ui.imageFragmentSize",
+	"media.fromUrl",
+	"background.resolveStyle",
+	"background.resolveColorsStyle",
+	"background.resolveFrameClassName",
+	"background.resolveImageStyle",
+	"background.resolveImageClassName",
+	"background.resolveOverlayStyle",
+	"links.resolve",
+	"links.label",
+	"content.interpolateRichTextTokens",
+	"boxStyles.spacing",
+	"boxStyles.resolveRootClass",
+	"boxStyles.resolveRootStyle",
+	"boxStyles.semanticGap",
+	"boxStyles.semanticGapValue",
+	"boxStyles.cardVariantClass",
+	"containerStyles.resolveBoxClassName"
+];
+new Set(ALLOWED_NODE_TYPES);
+new Set(ALLOWED_TRANSFORM_IDS);
+//#endregion
+//#region ../blocks/src/system/manifest/richTextSchema.ts
+/**
+* Shared Rich Text Schema
+*
+* This module provides a single source of truth for TipTap rich text validation
+* across both the block-form editor and the block rendering system.
+*
+* Rich-text fields use one canonical root shape:
+* `{ type: 'doc', content: [...] }`.
+*/
+/**
+* TipTap document node schema (recursive structure)
+*
+* Supports the full TipTap document structure including:
+* - type: Node type (e.g., 'doc', 'paragraph', 'text')
+* - content: Nested array of child nodes
+* - text: Text content for text nodes
+* - attrs: Node attributes (e.g., alignment, color)
+* - marks: Text formatting marks (e.g., bold, italic)
+*/
+const TipTapMarkSchema = z.object({
+	type: z.string().min(1),
+	attrs: z.record(z.string(), z.unknown()).optional()
+}).strict();
+const TipTapNodeSchema = z.lazy(() => z.object({
+	type: z.string().min(1),
+	content: z.array(TipTapNodeSchema).optional(),
+	text: z.string().optional(),
+	attrs: z.record(z.string(), z.unknown()).optional(),
+	marks: z.array(TipTapMarkSchema).optional()
+}).strict().superRefine((node, ctx) => {
+	if (node.type === "doc") ctx.addIssue({
+		code: "custom",
+		path: ["type"],
+		message: "Document nodes are only valid at the rich-text root"
+	});
+	if (node.type === "text") {
+		if (node.text === void 0 || node.text.length === 0) ctx.addIssue({
+			code: "custom",
+			path: ["text"],
+			message: "Text nodes require a non-empty text value"
+		});
+		if (node.content !== void 0) ctx.addIssue({
+			code: "custom",
+			path: ["content"],
+			message: "Text nodes cannot contain child nodes"
+		});
+		return;
+	}
+	if (node.text !== void 0) ctx.addIssue({
+		code: "custom",
+		path: ["text"],
+		message: "Only text nodes can contain a text value"
+	});
+}));
+/**
+* Canonical schema for a TipTap rich-text document root.
+*
+* Stricter than {@link TipTapNodeSchema}: `type` is literally `'doc'` and
+* `content` is required (possibly empty). This is the shape every producer
+* (dummy content, editor output, migrations) must emit, and the shape every
+* non-legacy consumer can rely on.
+*
+*/
+const RichTextDocSchema = z.object({
+	type: z.literal("doc"),
+	content: z.array(TipTapNodeSchema)
+}).strict();
+function createHardBreakNode() {
+	return { type: "hardBreak" };
+}
+/**
+* Parse a small markdown subset into TipTap inline nodes.
+*
+* This intentionally supports only bold (`**text**`) because the SDK/content
+* import paths use it for lightweight default content, not full markdown.
+*/
+function parseRichTextInlineMarkdown(text) {
+	const out = [];
+	const pushText = (value, marks) => {
+		if (!value) return;
+		out.push(marks && marks.length > 0 ? {
+			type: "text",
+			text: value,
+			marks
+		} : {
+			type: "text",
+			text: value
+		});
+	};
+	let rest = text;
+	while (rest.length > 0) {
+		const start = rest.indexOf("**");
+		if (start === -1) {
+			pushText(rest);
+			break;
+		}
+		const end = rest.indexOf("**", start + 2);
+		if (end === -1) {
+			pushText(rest);
+			break;
+		}
+		pushText(rest.slice(0, start));
+		pushText(rest.slice(start + 2, end), [{ type: "bold" }]);
+		rest = rest.slice(end + 2);
+	}
+	return out;
+}
+function parseRichTextParagraphInlineMarkdown(text) {
+	return text.split("\n").flatMap((line, index) => {
+		const lineNodes = parseRichTextInlineMarkdown(line.trim());
+		return index === 0 ? lineNodes : [createHardBreakNode(), ...lineNodes];
+	});
+}
+/**
+* Convert a plain string with a tiny markdown subset to canonical TipTap JSON.
+*
+* Double newlines create semantic paragraphs. Single newlines remain inside the
+* current paragraph as TipTap `hardBreak` nodes for line-oriented content such
+* as addresses, opening hours, and contact details.
+*/
+function createRichTextDocFromMarkdown(markdown) {
+	const normalized = markdown.replace(/\r\n/g, "\n").trim();
+	if (!normalized) return {
+		type: "doc",
+		content: []
+	};
+	return {
+		type: "doc",
+		content: normalized.split(/\n{2,}/).map((paragraph) => paragraph.trim()).filter(Boolean).map((paragraph) => {
+			const inline = parseRichTextParagraphInlineMarkdown(paragraph);
+			return inline.length > 0 ? {
+				type: "paragraph",
+				content: inline
+			} : { type: "paragraph" };
+		})
+	};
+}
+//#endregion
+//#region src/manifest/debug.ts
+/**
+* Create a debug writer that outputs to a timestamped subdirectory.
+*
+* Each invocation creates a unique directory like:
+* `{debugDir}/manifest-20260126-083345/`
+*
+* This avoids the dangerous pattern of clearing arbitrary directories.
+*/
+function createDebugWriter(debugDir) {
+	if (!debugDir) return {
+		outputDir: void 0,
+		writeText: async () => {},
+		writeJson: async () => {}
+	};
+	const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+	const runDir = path.join(debugDir, `manifest-${timestamp}`);
+	let dirCreated = false;
+	async function ensureDir() {
+		if (!dirCreated) {
+			await fs.mkdir(runDir, { recursive: true });
+			dirCreated = true;
+		}
+	}
+	return {
+		outputDir: runDir,
+		async writeText(filename, content) {
+			try {
+				await ensureDir();
+				await fs.writeFile(path.join(runDir, filename), content, "utf-8");
+			} catch {}
+		},
+		async writeJson(filename, value) {
+			try {
+				await ensureDir();
+				await fs.writeFile(path.join(runDir, filename), JSON.stringify(value, null, 2), "utf-8");
+			} catch {}
+		}
+	};
+}
+//#endregion
+//#region src/manifest/prompt/theme-summary.ts
+/**
+* Font weight name to numeric value mapping.
+*/
+const WEIGHT_MAP = {
+	thin: "100",
+	extralight: "200",
+	light: "300",
+	regular: "400",
+	normal: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700",
+	extrabold: "800",
+	black: "900"
+};
+function asRecord(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+	return value;
+}
+/**
+* Extract unique typography weights from theme configuration.
+*
+* @param theme - The theme to extract weights from
+* @returns Array of numeric weight strings (e.g., ['400', '600', '700'])
+*/
+function extractTypographyWeights(theme) {
+	const typography = asRecord(asRecord(theme)?.typography);
+	const weights = /* @__PURE__ */ new Set();
+	const bodyWeight = (() => {
+		const body = asRecord(typography?.body);
+		return typeof body?.weight === "string" ? body.weight : null;
+	})();
+	if (bodyWeight) weights.add(WEIGHT_MAP[bodyWeight] || bodyWeight);
+	const headingWeight = (() => {
+		const def = asRecord(asRecord(typography?.headings)?.default);
+		return typeof def?.weight === "string" ? def.weight : null;
+	})();
+	if (headingWeight) weights.add(WEIGHT_MAP[headingWeight] || headingWeight);
+	for (const level of [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6"
+	]) {
+		const levelWeight = (() => {
+			const levelRec = asRecord(asRecord(typography?.headings)?.[level]);
+			return typeof levelRec?.weight === "string" ? levelRec.weight : null;
+		})();
+		if (levelWeight) weights.add(WEIGHT_MAP[levelWeight] || levelWeight);
+	}
+	const result = Array.from(weights).sort();
+	return result.length > 0 ? result : [
+		"400",
+		"600",
+		"700"
+	];
+}
+/**
+* Map corner style to actual CSS value for LLM understanding.
+*/
+function getCornerRadius(corners) {
+	switch (corners) {
+		case "square": return "0px";
+		case "soft": return "4px";
+		case "rounded": return "8px";
+		case "pill": return "9999px";
+		default:
+			console.warn("Unknown corner style, defaulting to soft (4px)");
+			return "4px";
+	}
+}
+/**
+* Infer usage hint for a color based on its name.
+*
+* @param name - The color name from the theme palette
+* @returns A human-readable usage description
+*/
+function inferColorUsage(name) {
+	const lower = name.toLowerCase();
+	if (lower.includes("primary")) return "buttons, links, primary accents";
+	if (lower.includes("secondary")) return "secondary buttons, subtle accents";
+	if (lower.includes("accent")) return "highlights, focus states, special emphasis";
+	if (lower.includes("background") || lower.includes("bg")) return "page/section backgrounds";
+	if (lower.includes("surface")) return "card backgrounds, elevated surfaces";
+	if (lower.includes("text") || lower.includes("foreground")) return "body text, headings";
+	if (lower.includes("muted")) return "subtle text, borders, disabled states";
+	if (lower.includes("error") || lower.includes("danger") || lower.includes("red")) return "error states, destructive actions";
+	if (lower.includes("success") || lower.includes("green")) return "success states, positive feedback";
+	if (lower.includes("warning") || lower.includes("yellow") || lower.includes("orange")) return "warning states, cautions";
+	if (lower.includes("info") || lower.includes("blue")) return "informational messages";
+	return "general styling";
+}
+/**
+* Summarize theme for LLM context.
+*
+* Extracts the most relevant theme information for the LLM to understand
+* available tokens without overwhelming the context window.
+*
+* @example
+* ```typescript
+* const summary = summarizeThemeForLLM(theme);
+* // Use in system prompt to show available tokens
+* ```
+*/
+function summarizeThemeForLLM(theme) {
+	const themeRecord = asRecord(theme);
+	const paletteRec = asRecord(themeRecord?.palette);
+	const palette = (Array.isArray(paletteRec?.colors) ? paletteRec.colors : []).map((color) => asRecord(color)).filter((color) => Boolean(color)).filter((color) => typeof color.name === "string" && typeof color.hex === "string").map((color) => {
+		const token = String(color.name);
+		return {
+			token,
+			hex: String(color.hex),
+			usage: inferColorUsage(token)
+		};
+	});
+	const weights = extractTypographyWeights(theme);
+	const typographyRec = asRecord(themeRecord?.typography);
+	const bodyRec = asRecord(typographyRec?.body);
+	const headingsDefaultRec = asRecord(asRecord(typographyRec?.headings)?.default);
+	const bodyFamily = typeof bodyRec?.family === "string" ? bodyRec.family : "system-ui";
+	const headingFamily = typeof headingsDefaultRec?.family === "string" ? headingsDefaultRec.family : bodyFamily;
+	const spacing = typeof themeRecord?.space === "string" ? themeRecord.space : "standard";
+	const cornersValue = typeof themeRecord?.corners === "string" ? themeRecord.corners : "soft";
+	return {
+		palette,
+		typography: {
+			bodyFamily,
+			headingFamily,
+			weights
+		},
+		spacing,
+		corners: `${cornersValue} (${getCornerRadius(cornersValue)})`
+	};
+}
+/**
+* Format theme summary as a string for inclusion in prompts.
+*/
+function formatThemeSummaryForPrompt(summary) {
+	return [
+		"## Available Theme Tokens",
+		"",
+		"### Color Palette",
+		...summary.palette.map((c) => `- **${c.token}**: ${c.hex} (${c.usage})`),
+		"",
+		"### Typography",
+		`- Body font: ${summary.typography.bodyFamily}`,
+		`- Heading font: ${summary.typography.headingFamily}`,
+		`- Available weights: ${summary.typography.weights.join(", ")}`,
+		"",
+		"### Spacing & Corners",
+		`- Spacing preset: ${summary.spacing}`,
+		`- Corner style: ${summary.corners}`
+	].join("\n");
+}
+//#endregion
+//#region src/manifest/validation/layout-utils.ts
+/**
+* Collect node information from a layout tree.
+* Returns an array of NodeInfo objects with path, type, and binding information.
+*/
+function collectLayoutNodeInfos(node, path = "layout", out = []) {
+	if (!node || typeof node !== "object") return out;
+	const n = node;
+	const type = typeof n.type === "string" ? n.type : "unknown";
+	let bindFrom = null;
+	if (n.$bind && typeof n.$bind === "object") {
+		const b = n.$bind;
+		if (typeof b.from === "string") bindFrom = b.from;
+	}
+	out.push({
+		path,
+		type,
+		bindFrom
+	});
+	if (Array.isArray(n.children)) for (let i = 0; i < n.children.length; i++) collectLayoutNodeInfos(n.children[i], `${path}.children[${i}]`, out);
+	return out;
+}
+/**
+* Collect all classNames from a layout tree.
+* Returns a Set of all className tokens found in node props.
+*/
+function collectLayoutClassNames(node, out = /* @__PURE__ */ new Set()) {
+	if (!node || typeof node !== "object") return out;
+	const n = node;
+	if (n.props && typeof n.props === "object") {
+		const className = n.props.className;
+		if (typeof className === "string") for (const token of className.split(/\s+/).filter(Boolean)) out.add(token);
+	}
+	if (Array.isArray(n.children)) for (const child of n.children) collectLayoutClassNames(child, out);
+	return out;
+}
+//#endregion
+//#region src/zod/titleSourceSchema.ts
+const titleSourceValueSchema = z.union([z.string().min(1), z.array(z.string().min(1)).min(1)]);
+//#endregion
+//#region src/manifest/validation/output-schema.ts
+/**
+* Zod Schema for LLM Output Validation
+*
+* Validates the raw output from the LLM before further processing.
+* This schema is used with getAiResponse() for structured output.
+*
+* IMPORTANT: OpenAI structured output requires all schema fields to have explicit types.
+* We cannot use z.any() - it must be replaced with explicit union types.
+*/
+const blockCategoryEnum = z.enum([
+	"marketing",
+	"content",
+	"blog",
+	"media",
+	"layout",
+	"interactive"
+]);
+/**
+* Color object (used in palette.colors)
+*/
+const llmColorValue = z.object({
+	name: z.string(),
+	hex: z.string()
+});
+/**
+* Theme patch primitive values.
+*/
+const llmThemePrimitive = z.union([
+	z.string(),
+	z.number(),
+	z.boolean(),
+	z.null()
+]);
+/**
+* Theme patch value - explicit union of allowed types.
+* Covers: primitives, color objects, arrays of colors, and arrays of primitives.
+*/
+const llmThemePatchValue = z.union([
+	llmThemePrimitive,
+	llmColorValue,
+	z.array(llmColorValue),
+	z.array(llmThemePrimitive)
+]);
+/**
+* LLM-compatible theme patch operation schema.
+* Uses discriminated union for the 3 operation types.
+*/
+const llmThemePatchOpSchema = z.discriminatedUnion("op", [
+	z.object({
+		op: z.literal("add"),
+		path: z.string().min(1),
+		value: llmThemePatchValue
+	}),
+	z.object({
+		op: z.literal("replace"),
+		path: z.string().min(1),
+		value: llmThemePatchValue
+	}),
+	z.object({
+		op: z.literal("remove"),
+		path: z.string().min(1)
+	})
+]);
+/**
+* CSS declaration - property/value pair.
+* Using explicit object instead of z.record() for OpenAI compatibility.
+*/
+const llmCssDeclaration = z.object({
+	property: z.string(),
+	value: z.string()
+});
+/**
+* LLM-compatible custom CSS rule schema.
+* Uses array of declarations instead of record for OpenAI compatibility.
+*/
+const llmCustomCssRuleSchema = z.object({
+	id: z.string().min(1),
+	selector: z.string().min(1),
+	declarations: z.array(llmCssDeclaration)
+});
+/**
+* LLM-compatible nested rule schema for @media/@supports rules.
+* Uses array of declarations instead of record for OpenAI compatibility.
+*/
+const llmNestedRuleSchema = z.object({
+	selector: z.string().min(1),
+	declarations: z.array(llmCssDeclaration)
+});
+/**
+* LLM-compatible @media at-rule schema.
+*/
+const llmMediaAtRuleSchema = z.object({
+	id: z.string().min(1),
+	type: z.literal("media"),
+	query: z.string().min(1),
+	rules: z.array(llmNestedRuleSchema)
+});
+/**
+* LLM-compatible at-rule schema.
+* For now, only supports @media rules from LLM output.
+* Other at-rules (@keyframes, @font-face, @supports) can be added manually if needed.
+*/
+const llmAtRuleSchema = llmMediaAtRuleSchema;
+/**
+* Convert array-of-declarations format to record format.
+* LLM outputs: [{ property: "fontSize", value: "3rem" }]
+* Runtime expects: { fontSize: "3rem" }
+*/
+function normalizeDeclarationsArrayToRecord(declarations) {
+	const record = {};
+	for (const decl of declarations) record[decl.property] = decl.value;
+	return record;
+}
+/**
+* Normalize LLM CSS rule output to runtime format.
+*/
+function normalizeLlmCssRule(rule) {
+	return {
+		id: rule.id,
+		selector: rule.selector,
+		declarations: normalizeDeclarationsArrayToRecord(rule.declarations)
+	};
+}
+/**
+* Normalize LLM nested rule output to runtime format.
+*/
+function normalizeLlmNestedRule(rule) {
+	return {
+		selector: rule.selector,
+		declarations: normalizeDeclarationsArrayToRecord(rule.declarations)
+	};
+}
+/**
+* Normalize LLM @media at-rule output to runtime format.
+*/
+function normalizeLlmMediaAtRule(atRule) {
+	return {
+		id: atRule.id,
+		type: "media",
+		query: atRule.query,
+		rules: atRule.rules.map(normalizeLlmNestedRule)
+	};
+}
+/**
+* Primitive JSON value types for defaultValue fields.
+* These are the base types that can appear in arrays or objects.
+*/
+const jsonPrimitiveSchema = z.union([
+	z.string(),
+	z.number(),
+	z.boolean(),
+	z.null()
+]);
+/**
+* JSON-compatible value type for defaultValue fields.
+* OpenAI requires explicit types and doesn't support 'propertyNames' (from z.record).
+* For LLM-generated defaults, we only need primitives and arrays of primitives.
+* Complex object defaults can be added manually after generation if needed.
+*/
+const jsonValueSchema = z.union([jsonPrimitiveSchema, z.array(jsonPrimitiveSchema)]);
+/**
+* Base field properties common to all field types.
+* Note: OpenAI structured output requires all properties in 'required' array.
+* Optional fields use nullable types instead of .optional().
+* UI hints removed as they're not critical for LLM generation.
+*/
+const llmBaseFieldSchema = z.object({
+	id: z.string().min(1),
+	label: z.string().min(1),
+	description: z.string().nullable(),
+	required: z.boolean(),
+	defaultValue: jsonValueSchema.nullable()
+});
+/**
+* Text field schema.
+*/
+const llmTextFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("text"),
+	multiline: z.boolean(),
+	maxLength: z.number().int().positive().nullable()
+});
+/**
+* Rich text field schema.
+*/
+const llmRichTextFieldSchema = llmBaseFieldSchema.extend({ type: z.literal("richText") });
+/**
+* Media field schema.
+*/
+const llmMediaFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("media"),
+	mediaKinds: z.array(z.enum([
+		"image",
+		"video",
+		"audio"
+	])).nullable()
+});
+/**
+* File field schema.
+*/
+const llmFileFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("file"),
+	fileKinds: z.array(z.enum([
+		"document",
+		"spreadsheet",
+		"archive",
+		"audio"
+	])).nullable()
+});
+/**
+* Boolean field schema.
+*/
+const llmBooleanFieldSchema = llmBaseFieldSchema.extend({ type: z.literal("boolean") });
+/**
+* Link field schema.
+*/
+const llmLinkFieldSchema = llmBaseFieldSchema.extend({ type: z.literal("link") });
+/**
+* Select field schema.
+*/
+const llmSelectFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("select"),
+	options: z.array(z.object({
+		value: z.string(),
+		label: z.string()
+	})),
+	multiple: z.boolean().nullable()
+});
+/**
+* Number field schema.
+*/
+const llmNumberFieldSchema = llmBaseFieldSchema.extend({ type: z.literal("number") });
+/**
+* Schema for nested fields in groups/repeaters.
+* Uses a permissive object schema that OpenAI accepts (has explicit type key).
+* All properties are required (nullable for optional ones) per OpenAI's requirements.
+* The actual field structure is validated at runtime.
+*/
+const llmNestedFieldSchema = z.object({
+	id: z.string(),
+	type: z.string(),
+	label: z.string(),
+	required: z.boolean().nullable(),
+	multiline: z.boolean().nullable(),
+	defaultValue: jsonValueSchema.nullable()
+}).passthrough();
+const llmNestedFieldsSchema = z.array(llmNestedFieldSchema);
+/**
+* Group field schema.
+*/
+const llmGroupFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("group"),
+	schema: z.object({ fields: llmNestedFieldsSchema })
+});
+/**
+* Repeater field schema.
+*/
+const llmRepeaterFieldSchema = llmBaseFieldSchema.extend({
+	type: z.literal("repeater"),
+	itemLabel: z.string(),
+	itemLabelSource: z.string().nullable(),
+	minItems: z.number().int().min(0),
+	maxItems: z.number().int().positive().nullable(),
+	allowConversion: z.boolean(),
+	schema: z.object({ fields: llmNestedFieldsSchema })
+});
+/**
+* Combined field schema for LLM output.
+* Supports: text, richText, media, file, boolean, link, select, number, group, repeater.
+*/
+const llmFieldSchema = z.union([
+	llmTextFieldSchema,
+	llmRichTextFieldSchema,
+	llmMediaFieldSchema,
+	llmFileFieldSchema,
+	llmBooleanFieldSchema,
+	llmLinkFieldSchema,
+	llmSelectFieldSchema,
+	llmNumberFieldSchema,
+	llmGroupFieldSchema,
+	llmRepeaterFieldSchema
+]);
+/**
+* Simplified binding schema for LLM output.
+* Note: Transform options removed as OpenAI doesn't support z.record() (emits propertyNames).
+* All properties required (nullable for optional ones) per OpenAI's requirements.
+*/
+const llmBindingSchema = z.object({
+	from: z.string(),
+	fallback: z.string().nullable(),
+	transforms: z.array(z.object({ id: z.string() })).nullable()
+});
+/**
+* Simplified repeat schema for LLM output.
+*/
+const llmRepeatSchema = z.object({
+	collection: z.object({ from: z.string() }),
+	itemName: z.string()
+});
+/**
+* Props schema - uses passthrough to accept any props structure.
+* OpenAI doesn't support z.record() (emits propertyNames), so we use
+* a permissive object. Actual props are validated at runtime.
+*/
+const llmPropsSchema = z.object({}).passthrough().nullable();
+/**
+* Simplified node schema for LLM output.
+* All properties required (nullable for optional ones) per OpenAI's requirements.
+*
+* IMPORTANT:
+* OpenAI structured output doesn't support truly-recursive JSON schemas.
+* However, giving children a "type-only" schema causes the model to omit
+* nested node details entirely (no props/$bind/etc), which then fails our
+* runtime validation. To avoid both problems, we use a depth-limited schema
+* that still fully specifies child node shape.
+*/
+function buildLlmNodeSchema(maxDepth) {
+	const nodeBase = z.object({
+		type: z.string(),
+		props: llmPropsSchema,
+		$bind: llmBindingSchema.nullable(),
+		$repeat: llmRepeatSchema.nullable(),
+		$when: z.object({ condition: z.object({ from: z.string() }) }).nullable()
+	});
+	let schema = nodeBase.extend({ children: z.null() });
+	for (let i = 0; i < maxDepth; i++) schema = nodeBase.extend({ children: z.array(schema).nullable() });
+	return schema;
+}
+const llmNodeSchema = buildLlmNodeSchema(6);
+/**
+* LLM output schema for custom block definitions.
+*
+* Uses simplified LLM-compatible schemas (no z.any()) for OpenAI structured output.
+* All properties required (nullable for optional ones) per OpenAI's requirements.
+* Full validation happens after parsing via validateLayout().
+*
+* Note: Explicit type annotation required due to recursive schema complexity.
+*/
+const llmCustomBlockSchema = z.object({
+	id: z.string().min(8).regex(/^custom\.[a-z][a-z0-9-]*$/, { message: "Block ID must start with 'custom.' followed by lowercase letters, numbers, or hyphens" }),
+	title: z.string().min(1, "Title is required"),
+	titleSource: titleSourceValueSchema.nullable(),
+	description: z.string().nullable(),
+	category: blockCategoryEnum,
+	icon: z.string().nullable(),
+	tags: z.array(z.string()).nullable(),
+	fields: llmFieldSchema.array().min(1, "Custom blocks must have at least one field"),
+	layout: llmNodeSchema
+});
+/**
+* Schema for the complete LLM output.
+*
+* This is used with getAiResponse({ kind: 'json', schema }) for
+* structured output generation.
+* All properties required (nullable for optional ones) per OpenAI's requirements.
+*
+* Note: Explicit type annotation required due to complex nested types.
+*/
+const htmlToManifestOutputSchema = z.object({
+	blocks: z.array(llmCustomBlockSchema).min(1, "At least one block is required").max(10, "Maximum 10 blocks per conversion"),
+	themePatch: z.array(llmThemePatchOpSchema).nullable(),
+	customCssRules: z.array(llmCustomCssRuleSchema).nullable(),
+	customCssAtRules: z.array(llmMediaAtRuleSchema).nullable(),
+	/**
+	* Explanation of fixes made when retrying after validation errors.
+	* Should explain what changes were made and why.
+	*/
+	fixRationale: z.string().nullable()
+});
+/**
+* Collect validation errors from a parsed output.
+*
+* Goes beyond Zod schema validation to check:
+* - Node types are whitelisted
+* - Transform IDs are whitelisted
+* - $bind references match defined fields
+* - Content nodes have bindings (text, richText, media, button, link)
+* - All defined fields are used in the layout
+* - Redundant link/text nodes in repeaters
+*/
+function collectValidationErrors(output) {
+	const errors = [];
+	const blockIds = output.blocks.map((b) => b.id);
+	const singleBlockId = blockIds.length === 1 ? blockIds[0] ?? null : null;
+	for (const block of output.blocks) {
+		const layoutErrors = validateLayoutDeep(block.layout, block.id, block.fields);
+		errors.push(...layoutErrors);
+		const fieldInfo = collectFieldInfo(block.fields);
+		const used = collectUsedFieldRefs(block.layout);
+		const unusedTopLevelFields = Array.from(fieldInfo.topLevelFieldIds).filter((id) => !used.topLevel.has(id));
+		if (unusedTopLevelFields.length > 0) errors.push({
+			path: `blocks["${block.id}"].fields`,
+			message: `Block "${block.id}": Fields defined but never used in layout: ${unusedTopLevelFields.join(", ")}`,
+			suggestion: `Every field should be bound to a layout node. Add $bind: { from: "content.${unusedTopLevelFields[0] ?? "fieldId"}" } to an appropriate node, or remove unused fields.`
+		});
+		for (const [repeaterFieldId, nestedFieldIds] of fieldInfo.repeaterNestedFieldIds.entries()) {
+			if (!used.topLevel.has(repeaterFieldId)) continue;
+			const usedNested = used.nestedByRepeater.get(repeaterFieldId) ?? /* @__PURE__ */ new Set();
+			const missingNested = Array.from(nestedFieldIds).filter((id) => !usedNested.has(id));
+			if (missingNested.length === 0) continue;
+			const itemName = used.itemNameByRepeater.get(repeaterFieldId) ?? "item";
+			errors.push({
+				path: `blocks["${block.id}"].fields`,
+				message: `Block "${block.id}": Repeater field "${repeaterFieldId}": nested fields defined but never used in repeated layout: ${missingNested.join(", ")}`,
+				suggestion: `Inside the $repeat subtree for content.${repeaterFieldId} (itemName "${itemName}"), add nodes with $bind.from like "${itemName}.${missingNested[0] ?? "fieldId"}".`
+			});
+		}
+		const missingBindings = findMissingBindings(block.layout, block.id);
+		errors.push(...missingBindings);
+		errors.push(...validateLinkFieldDefaultValues(block));
+		errors.push(...findMissingLinkHrefs(block.layout, block.id, block.fields));
+		errors.push(...detectRedundantLinkLabels(block.layout, block.id, block.fields));
+	}
+	if (output.customCssRules && output.customCssRules.length > 0) errors.push(...validateCustomCssRules(output.customCssRules, singleBlockId, output.blocks));
+	return errors;
+}
+function validateLinkFieldDefaultValues(block) {
+	const errors = [];
+	for (const field of block.fields) {
+		if (field.type !== "link") continue;
+		const dv = field.defaultValue ?? null;
+		const isRequired = field.required === true;
+		if (dv === null) {
+			if (isRequired) errors.push({
+				path: `blocks["${block.id}"].fields["${field.id}"].defaultValue`,
+				message: `Block "${block.id}": required link field "${field.id}" is missing defaultValue`,
+				suggestion: `Set defaultValue to an object like { "href": "/path-or-#anchor", "label": "Link Text" }.`
+			});
+			continue;
+		}
+		if (typeof dv !== "object" || Array.isArray(dv)) {
+			errors.push({
+				path: `blocks["${block.id}"].fields["${field.id}"].defaultValue`,
+				message: `Block "${block.id}": link field "${field.id}" defaultValue must be an object (got ${typeof dv})`,
+				suggestion: `Use { "href": "/path-or-#anchor", "label": "Link Text" }.`
+			});
+			continue;
+		}
+		const record = dv;
+		const href = typeof record.href === "string" ? record.href.trim() : "";
+		const label = typeof record.label === "string" ? record.label.trim() : "";
+		const title = typeof record.title === "string" ? record.title.trim() : "";
+		const identifier = typeof record.identifier === "string" ? record.identifier.trim() : "";
+		const routeId = typeof record.routeId === "string" ? record.routeId.trim() : "";
+		const hasDestination = href.length > 0 || identifier.length > 0 || routeId.length > 0;
+		const hasLabel = label.length > 0 || title.length > 0 || identifier.length > 0 || href.length > 0;
+		if (!hasDestination || !hasLabel) errors.push({
+			path: `blocks["${block.id}"].fields["${field.id}"].defaultValue`,
+			message: `Block "${block.id}": link field "${field.id}" defaultValue is missing destination/label (got ${JSON.stringify(dv)})`,
+			suggestion: `Use { "href": "/path-or-#anchor", "label": "Link Text" }.`
+		});
+	}
+	return errors;
+}
+function getNestedFields(field) {
+	if (!field || typeof field !== "object") return null;
+	if (!field.schema || typeof field.schema !== "object") return null;
+	const fields = field.schema.fields;
+	return Array.isArray(fields) ? fields : null;
+}
+function resolveFieldTypeForFrom(allFields, from, repeatStack) {
+	if (!from) return null;
+	if (from.startsWith("content.")) {
+		const [topId, ...rest] = from.replace("content.", "").split(".").filter(Boolean);
+		if (!topId) return null;
+		let current = allFields.find((f) => f.id === topId);
+		if (!current) return null;
+		for (const seg of rest) {
+			const nested = getNestedFields(current);
+			if (!nested) return null;
+			current = nested.find((f) => f.id === seg);
+			if (!current) return null;
+		}
+		return current.type ?? null;
+	}
+	for (let i = repeatStack.length - 1; i >= 0; i--) {
+		const ctx = repeatStack[i];
+		if (!ctx) continue;
+		const prefix = `${ctx.itemName}.`;
+		if (!from.startsWith(prefix)) continue;
+		const [nestedId, ...rest] = from.slice(prefix.length).split(".").filter(Boolean);
+		if (!nestedId) return null;
+		let current = ctx.fields.find((f) => f.id === nestedId);
+		if (!current) return null;
+		for (const seg of rest) {
+			const nested = getNestedFields(current);
+			if (!nested) return null;
+			current = nested.find((f) => f.id === seg);
+			if (!current) return null;
+		}
+		return current.type ?? null;
+	}
+	return null;
+}
+function bindingHasTransform(bind, id) {
+	if (!bind) return false;
+	const transforms = bind.transforms;
+	if (!Array.isArray(transforms)) return false;
+	return transforms.some((t) => t && typeof t === "object" && t.id === id);
+}
+function extractNestedHrefBindFromProps(props) {
+	if (!props || typeof props !== "object") return null;
+	const href = props.href;
+	if (!href || typeof href !== "object") return null;
+	if (!("$bind" in href)) return null;
+	const bind = href.$bind;
+	return bind && typeof bind === "object" ? bind : null;
+}
+function findMissingLinkHrefs(node, blockId, fields, path = "layout", repeatStack = []) {
+	const errors = [];
+	if (!node || typeof node !== "object") return errors;
+	const n = node;
+	const nodeType = typeof n.type === "string" ? n.type : null;
+	let nextRepeatStack = repeatStack;
+	if (n.$repeat && typeof n.$repeat === "object") {
+		const repeat = n.$repeat;
+		const itemName = typeof repeat.itemName === "string" ? repeat.itemName : null;
+		const collection = repeat.collection && typeof repeat.collection === "object" ? repeat.collection : null;
+		const from = collection && typeof collection.from === "string" ? collection.from : null;
+		if (itemName && from && from.startsWith("content.")) {
+			const repeaterFieldId = from.replace("content.", "").split(".")[0] ?? "";
+			const repeaterField = fields.find((f) => f.id === repeaterFieldId) ?? null;
+			const nested = repeaterField ? getNestedFields(repeaterField) ?? [] : [];
+			nextRepeatStack = [...repeatStack, {
+				itemName,
+				fields: nested
+			}];
+		}
+	}
+	if (nodeType === "link" || nodeType === "button") {
+		const bind = n.$bind && typeof n.$bind === "object" ? n.$bind : null;
+		const bindFrom = bind && typeof bind.from === "string" ? bind.from : null;
+		const bindFieldType = bindFrom ? resolveFieldTypeForFrom(fields, bindFrom, nextRepeatStack) : null;
+		const hrefBind = extractNestedHrefBindFromProps(n.props);
+		const hrefFrom = hrefBind && typeof hrefBind.from === "string" ? hrefBind.from : null;
+		const hrefFieldType = hrefFrom ? resolveFieldTypeForFrom(fields, hrefFrom, nextRepeatStack) : null;
+		if (bindFieldType === "link" || hrefFieldType === "link" || bindingHasTransform(bind, "links.label")) {
+			if (!hrefBind || !hrefFrom) errors.push({
+				path,
+				message: `Block "${blockId}": ${nodeType} node at ${path} is bound to a link field but is missing props.href binding`,
+				suggestion: `Add props.href: { "$bind": { "from": "${bindFrom ?? "content.yourLinkField"}", "fallback": null, "transforms": [{ "id": "links.resolve" }] } }`
+			});
+			else if (!bindingHasTransform(hrefBind, "links.resolve")) errors.push({
+				path,
+				message: `Block "${blockId}": ${nodeType} node at ${path} has props.href binding but is missing transforms: [{id:"links.resolve"}]`,
+				suggestion: `Set props.href.$bind.transforms to [{ "id": "links.resolve" }].`
+			});
+			if (bindFrom && bindFieldType === "link" && !bindingHasTransform(bind, "links.label")) errors.push({
+				path,
+				message: `Block "${blockId}": ${nodeType} node at ${path} binds label from a link field but is missing links.label transform`,
+				suggestion: `Set node.$bind.transforms to [{ "id": "links.label" }] so the label renders as text.`
+			});
+		}
+	}
+	if ("children" in n && Array.isArray(n.children)) for (let i = 0; i < n.children.length; i++) errors.push(...findMissingLinkHrefs(n.children[i], blockId, fields, `${path}.children[${i}]`, nextRepeatStack));
+	return errors;
+}
+/**
+* Detect redundant link label patterns in repeaters.
+*
+* A common LLM mistake: when iterating over a repeater with link fields,
+* the LLM creates both:
+* 1. A link/button node with links.label transform (correct - displays the label)
+* 2. A separate text node binding to item.label (redundant - duplicates the label)
+*
+* This validation detects when a container has sibling nodes where:
+* - One is a link/button with links.label transform
+* - Another is a text node binding to a label-like field from the same item
+*/
+function detectRedundantLinkLabels(node, blockId, fields, path = "layout", repeatStack = []) {
+	const errors = [];
+	if (!node || typeof node !== "object") return errors;
+	const n = node;
+	let nextRepeatStack = repeatStack;
+	if (n.$repeat && typeof n.$repeat === "object") {
+		const repeat = n.$repeat;
+		const itemName = typeof repeat.itemName === "string" ? repeat.itemName : null;
+		const collection = repeat.collection && typeof repeat.collection === "object" ? repeat.collection : null;
+		const from = collection && typeof collection.from === "string" ? collection.from : null;
+		if (itemName && from && from.startsWith("content.")) {
+			const repeaterFieldId = from.replace("content.", "").split(".")[0] ?? "";
+			const repeaterField = fields.find((f) => f.id === repeaterFieldId) ?? null;
+			const nested = repeaterField ? getNestedFields(repeaterField) ?? [] : [];
+			nextRepeatStack = [...repeatStack, {
+				itemName,
+				fields: nested
+			}];
+		}
+	}
+	if (Array.isArray(n.children) && n.children.length > 1) {
+		const children = n.children;
+		const redundancies = findRedundantLinkTextSiblings(children, nextRepeatStack, path);
+		errors.push(...redundancies.map((r) => ({
+			path: r.path,
+			message: `Block "${blockId}": ${r.message}`,
+			suggestion: r.suggestion
+		})));
+	}
+	if (Array.isArray(n.children)) for (let i = 0; i < n.children.length; i++) errors.push(...detectRedundantLinkLabels(n.children[i], blockId, fields, `${path}.children[${i}]`, nextRepeatStack));
+	return errors;
+}
+/**
+* Find redundant text nodes that duplicate link labels in a set of sibling nodes.
+*/
+function findRedundantLinkTextSiblings(children, repeatStack, parentPath) {
+	const results = [];
+	const linkNodesWithLabel = [];
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (!child) continue;
+		const nodeType = child.type;
+		if (nodeType !== "link" && nodeType !== "button") continue;
+		const bind = child.$bind;
+		if (!bind) continue;
+		if (!bindingHasTransform(bind, "links.label")) continue;
+		const bindFrom = typeof bind.from === "string" ? bind.from : "";
+		if (bindFrom) linkNodesWithLabel.push({
+			index: i,
+			bindFrom
+		});
+	}
+	if (linkNodesWithLabel.length === 0) return results;
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (!child) continue;
+		if (child.type !== "text") continue;
+		const bind = child.$bind;
+		if (!bind) continue;
+		const textBindFrom = typeof bind.from === "string" ? bind.from : "";
+		if (!textBindFrom) continue;
+		for (const linkNode of linkNodesWithLabel) {
+			const redundancy = checkRedundantLabelBinding(linkNode.bindFrom, textBindFrom, repeatStack);
+			if (redundancy) results.push({
+				path: `${parentPath}.children[${i}]`,
+				message: `Redundant text node binding to "${textBindFrom}" - the link node at children[${linkNode.index}] already displays the label via links.label transform`,
+				suggestion: `Remove this text node. The link/button node with links.label transform already displays "${redundancy.labelField}" as its visible text.`
+			});
+		}
+	}
+	return results;
+}
+/**
+* Check if a text binding is redundant given a link binding with links.label.
+* Returns info about the redundant label field, or null if not redundant.
+*/
+function checkRedundantLabelBinding(linkBindFrom, textBindFrom, repeatStack) {
+	for (let i = repeatStack.length - 1; i >= 0; i--) {
+		const ctx = repeatStack[i];
+		if (!ctx) continue;
+		const prefix = `${ctx.itemName}.`;
+		if (!linkBindFrom.startsWith(prefix) || !textBindFrom.startsWith(prefix)) continue;
+		const linkFieldId = linkBindFrom.slice(prefix.length).split(".")[0] ?? "";
+		const textFieldId = textBindFrom.slice(prefix.length).split(".")[0] ?? "";
+		const linkField = ctx.fields.find((f) => f.id === linkFieldId);
+		if (!linkField || linkField.type !== "link") continue;
+		if ([
+			"label",
+			"text",
+			"title",
+			"name"
+		].includes(textFieldId.toLowerCase()) || textFieldId.toLowerCase() === `${linkFieldId}label` || textFieldId.toLowerCase() === `${linkFieldId}text`) return { labelField: textFieldId };
+	}
+	return null;
+}
+const DISALLOWED_SELECTOR_TOKENS = [
+	"@media",
+	"@supports",
+	"@keyframes",
+	"@font-face",
+	"@import"
+];
+function validateCustomCssRules(rules, singleBlockId, blocks) {
+	const errors = [];
+	const layoutClassNamesByBlockId = /* @__PURE__ */ new Map();
+	const layoutNodeInfosByBlockId = /* @__PURE__ */ new Map();
+	for (const block of blocks) {
+		layoutClassNamesByBlockId.set(block.id, collectLayoutClassNames(block.layout));
+		layoutNodeInfosByBlockId.set(block.id, collectLayoutNodeInfos(block.layout));
+	}
+	const missingLayoutHooksByBlockId = /* @__PURE__ */ new Map();
+	for (let i = 0; i < rules.length; i++) {
+		const rule = rules[i];
+		if (!rule) continue;
+		const selector = rule.selector.trim();
+		const rulePath = `customCssRules[${i}]`;
+		if (!selector) {
+			errors.push({
+				path: `${rulePath}.selector`,
+				message: "customCssRules: selector cannot be empty",
+				suggestion: "Provide a concrete selector scoped to the block (e.g., `[data-block=\"custom.my-block\"] .my-class`)."
+			});
+			continue;
+		}
+		if (selector.startsWith("@") || selector.includes("{") || selector.includes("}")) {
+			errors.push({
+				path: `${rulePath}.selector`,
+				message: `customCssRules: selector "${rule.selector}" looks like an at-rule. At-rules are not supported in customCssRules selectors.`,
+				suggestion: "Remove @media/@supports wrappers and emit only base styles, or add non-responsive styles only."
+			});
+			continue;
+		}
+		for (const token of DISALLOWED_SELECTOR_TOKENS) if (selector.toLowerCase().includes(token)) {
+			errors.push({
+				path: `${rulePath}.selector`,
+				message: `customCssRules: selector "${rule.selector}" contains "${token}". At-rules are not supported here.`,
+				suggestion: "Remove responsive/at-rule CSS and keep only base selectors."
+			});
+			break;
+		}
+		if (selector.includes(".cms-node-")) errors.push({
+			path: `${rulePath}.selector`,
+			message: `customCssRules: selector "${rule.selector}" relies on internal ".cms-node-*" classes.`,
+			suggestion: "Do not target internal renderer classes. Add your own className to the relevant node props and target that class instead."
+		});
+		const targetBlockId = extractBlockIdFromSelector(selector) ?? singleBlockId;
+		if (!targetBlockId) {
+			errors.push({
+				path: `${rulePath}.selector`,
+				message: "customCssRules: selector must include a [data-block=\"custom.*\"] scope when multiple blocks are present.",
+				suggestion: "Prefix selectors with `[data-block=\"custom.some-block-id\"]`."
+			});
+			continue;
+		}
+		const expectedScope = `[data-block="${targetBlockId}"]`;
+		if (!selector.includes(expectedScope)) errors.push({
+			path: `${rulePath}.selector`,
+			message: `customCssRules: selector must be scoped to ${expectedScope} for safety.`,
+			suggestion: `Prefix the selector with ${expectedScope} (e.g., \`${expectedScope} .my-class\`).`
+		});
+		const classNames = layoutClassNamesByBlockId.get(targetBlockId) ?? /* @__PURE__ */ new Set();
+		const selectorClasses = extractSelectorClasses$1(selector);
+		for (const className of selectorClasses) if (!classNames.has(className)) {
+			const existing = missingLayoutHooksByBlockId.get(targetBlockId) ?? /* @__PURE__ */ new Set();
+			existing.add(className);
+			missingLayoutHooksByBlockId.set(targetBlockId, existing);
+		}
+	}
+	for (const [blockId, missingClassNames] of missingLayoutHooksByBlockId.entries()) {
+		const missing = Array.from(missingClassNames).sort();
+		if (missing.length === 0) continue;
+		const attachSuggestions = buildClassHookAttachSuggestions(blockId, missing, layoutNodeInfosByBlockId.get(blockId) ?? []);
+		const attachSuggestionsLine = attachSuggestions ? `\n\nSuggested attachments:\n${attachSuggestions}` : "";
+		errors.push({
+			path: "customCssRules",
+			message: `customCssRules: selectors reference className hooks not present in the layout for block "${blockId}": ${missing.map((c) => `"${c}"`).join(", ")}`,
+			suggestion: `Add these classes to one or more nodes via props.className. Tip: prefer kebab-case hooks and attach them to the exact nodes you want to style (grid/headline/body/etc).${attachSuggestionsLine}`
+		});
+	}
+	return errors;
+}
+function buildClassHookAttachSuggestions(blockId, missingClassNames, nodes) {
+	if (missingClassNames.length === 0) return null;
+	const slug = blockId.replace(/^custom\./, "");
+	const lines = [];
+	const rootPath = "layout";
+	const firstGrid = nodes.find((n) => n.type === "grid")?.path ?? null;
+	const firstStack = nodes.find((n) => n.type === "stack")?.path ?? null;
+	const headlineNode = nodes.find((n) => (n.bindFrom ?? "").includes("headline"))?.path ?? null;
+	const highlightNode = nodes.find((n) => (n.bindFrom ?? "").includes("highlight"))?.path ?? null;
+	const paragraphNode = nodes.find((n) => (n.bindFrom ?? "").includes("paragraph"))?.path ?? null;
+	for (const className of missingClassNames) {
+		const lower = className.toLowerCase();
+		if (className === slug || className === `split-${slug}` || lower.includes(slug)) {
+			lines.push(`- ${className} → add to ${rootPath}.props.className`);
+			continue;
+		}
+		if (lower.includes("grid") && firstGrid) {
+			lines.push(`- ${className} → add to ${firstGrid}.props.className`);
+			continue;
+		}
+		if ((lower.includes("headline") || lower.includes("title")) && (headlineNode ?? firstStack)) {
+			lines.push(`- ${className} → add to ${headlineNode ?? firstStack ?? rootPath}.props.className`);
+			continue;
+		}
+		if (lower.includes("highlight") && highlightNode) {
+			lines.push(`- ${className} → add to ${highlightNode}.props.className`);
+			continue;
+		}
+		if ((lower.includes("body") || lower.includes("copy") || lower.includes("paragraph")) && (paragraphNode ?? firstStack)) {
+			lines.push(`- ${className} → add to ${paragraphNode ?? firstStack ?? rootPath}.props.className`);
+			continue;
+		}
+		lines.push(`- ${className} → add to ${rootPath}.props.className (fallback)`);
+	}
+	return lines.slice(0, 8).join("\n");
+}
+/**
+* Extract class names from a CSS selector.
+* This version handles scoped selectors by stripping [data-block=...] attributes
+* and skipping internal .cms-node-* classes.
+*/
+function extractSelectorClasses$1(selector) {
+	const withoutDataBlockAttrs = selector.replace(/\[data-block=(["']).*?\1\]/g, "");
+	const classes = /* @__PURE__ */ new Set();
+	const re = /\.([_a-zA-Z][-_a-zA-Z0-9]*)/g;
+	let match;
+	while ((match = re.exec(withoutDataBlockAttrs)) !== null) {
+		const className = match[1];
+		if (!className) continue;
+		if (className.startsWith("cms-node-")) continue;
+		classes.add(className);
+	}
+	return classes;
+}
+function extractBlockIdFromSelector(selector) {
+	return selector.match(/\[data-block=(["'])(custom\.[^"']+)\1\]/)?.[2] ?? null;
+}
+/**
+* Validate that a node type is in the allowed list.
+*/
+function validateNodeType(nodeType, path, ctx) {
+	if (!ALLOWED_NODE_TYPES.includes(nodeType)) return {
+		path: `${path}.type`,
+		message: `Block "${ctx.blockId}": Unknown node type "${nodeType}" at ${path}`,
+		suggestion: `ALLOWED: ${ALLOWED_NODE_TYPES.slice(0, 10).join(", ")}... FIX: Replace "${nodeType}" with a valid node type.`
+	};
+	return null;
+}
+/**
+* Validate transforms in a $bind object.
+*/
+function validateTransforms(transforms, path, ctx) {
+	const errors = [];
+	for (let i = 0; i < transforms.length; i++) {
+		const transform = transforms[i];
+		if (transform.id && typeof transform.id === "string") {
+			if (!ALLOWED_TRANSFORM_IDS.includes(transform.id)) errors.push({
+				path: `${path}.transforms[${i}].id`,
+				message: `Block "${ctx.blockId}": Unknown transform "${transform.id}"`,
+				suggestion: `ALLOWED: ${ALLOWED_TRANSFORM_IDS.slice(0, 8).join(", ")}... FIX: Replace with a valid transform ID or remove.`
+			});
+		}
+	}
+	return errors;
+}
+/**
+* Validate a single $bind object for field references and transforms.
+*/
+function validateBinding(bind, path, ctx) {
+	const errors = [];
+	if ("from" in bind && typeof bind.from === "string") {
+		const bindPath = bind.from;
+		if (bindPath.startsWith("content.")) {
+			const fieldId = bindPath.replace("content.", "").split(".")[0] ?? "";
+			if (fieldId && !ctx.fieldIds.has(fieldId)) errors.push({
+				path: `${path}.from`,
+				message: `Block "${ctx.blockId}": $bind references unknown field "${fieldId}"`,
+				suggestion: `DEFINED FIELDS: ${Array.from(ctx.fieldIds).join(", ")}. FIX: Add field { id: '${fieldId}', type: '...' } or use existing field.`
+			});
+		}
+	}
+	if ("transforms" in bind && Array.isArray(bind.transforms)) errors.push(...validateTransforms(bind.transforms, path, ctx));
+	return errors;
+}
+/**
+* Deep validation of layout tree for allowed node types, transforms, and bindings.
+*/
+function validateLayoutDeep(node, blockId, fields, path = "layout") {
+	return validateLayoutNode(node, path, {
+		blockId,
+		fieldIds: collectFieldIds(fields)
+	});
+}
+/**
+* Recursively validate a layout node and its children.
+*/
+function validateLayoutNode(node, path, ctx) {
+	const errors = [];
+	if (!node || typeof node !== "object") return errors;
+	const n = node;
+	if ("type" in n && typeof n.type === "string") {
+		const typeError = validateNodeType(n.type, path, ctx);
+		if (typeError) errors.push(typeError);
+	}
+	if ("$bind" in n && n.$bind && typeof n.$bind === "object") {
+		const bindErrors = validateBinding(n.$bind, `${path}.$bind`, ctx);
+		errors.push(...bindErrors);
+	}
+	if ("props" in n && n.props && typeof n.props === "object") {
+		const propsErrors = validatePropsBindings(n.props, `${path}.props`, ctx);
+		errors.push(...propsErrors);
+	}
+	if ("children" in n && Array.isArray(n.children)) for (let i = 0; i < n.children.length; i++) {
+		const childErrors = validateLayoutNode(n.children[i], `${path}.children[${i}]`, ctx);
+		errors.push(...childErrors);
+	}
+	return errors;
+}
+/**
+* Validate bindings in props objects.
+*/
+function validatePropsBindings(props, path, ctx) {
+	const errors = [];
+	for (const [key, value] of Object.entries(props)) if (value && typeof value === "object" && "$bind" in value) {
+		const bind = value.$bind;
+		const bindErrors = validateBinding(bind, `${path}.${key}.$bind`, ctx);
+		errors.push(...bindErrors);
+	} else if (value && typeof value === "object" && !Array.isArray(value)) {
+		const nestedErrors = validatePropsBindings(value, `${path}.${key}`, ctx);
+		errors.push(...nestedErrors);
+	}
+	return errors;
+}
+/**
+* Collect all field IDs from a fields array, including nested fields.
+*/
+function collectFieldIds(fields) {
+	const ids = /* @__PURE__ */ new Set();
+	function collect(fieldList) {
+		for (const field of fieldList) {
+			ids.add(field.id);
+			if (field.schema && typeof field.schema === "object" && "fields" in field.schema) {
+				const nestedFields = field.schema.fields;
+				if (isFieldIdRecordArray(nestedFields)) collect(nestedFields);
+			}
+			if (isRecordArray(field.tabs)) {
+				for (const tab of field.tabs) if (isFieldIdRecordArray(tab.fields)) collect(tab.fields);
+			}
+			if (field.itemTypes && typeof field.itemTypes === "object") {
+				for (const itemType of Object.values(field.itemTypes)) if (itemType && typeof itemType === "object" && "fields" in itemType) collect(itemType.fields);
+			}
+		}
+	}
+	collect(fields);
+	return ids;
+}
+function isRecordArray(value) {
+	return Array.isArray(value);
+}
+function isFieldIdRecordArray(value) {
+	return Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null && typeof item.id === "string");
+}
+/**
+* Content node types that typically require bindings to display field data.
+*/
+const CONTENT_NODE_TYPES = [
+	"text",
+	"richText",
+	"media",
+	"button",
+	"link"
+];
+/**
+* Collect field metadata for "unused field" validation.
+*
+* IMPORTANT:
+* - Only top-level fields can be referenced via `content.fieldId`.
+* - Nested fields (e.g. repeater item schema fields) are referenced via the repeat itemName
+*   (e.g. `item.text`) and must be validated within the $repeat subtree.
+*/
+function collectFieldInfo(fields) {
+	const topLevelFieldIds = /* @__PURE__ */ new Set();
+	const repeaterNestedFieldIds = /* @__PURE__ */ new Map();
+	for (const field of fields) {
+		topLevelFieldIds.add(field.id);
+		if (field.type === "repeater" && field.schema && typeof field.schema === "object" && "fields" in field.schema) {
+			const nestedFields = field.schema.fields ?? [];
+			repeaterNestedFieldIds.set(field.id, new Set(nestedFields.map((f) => f.id)));
+		}
+	}
+	return {
+		topLevelFieldIds,
+		repeaterNestedFieldIds
+	};
+}
+function collectUsedFieldRefs(node) {
+	const topLevel = /* @__PURE__ */ new Set();
+	const nestedByRepeater = /* @__PURE__ */ new Map();
+	const itemNameByRepeater = /* @__PURE__ */ new Map();
+	function addNested(repeaterFieldId, nestedFieldId) {
+		const used = nestedByRepeater.get(repeaterFieldId) ?? /* @__PURE__ */ new Set();
+		used.add(nestedFieldId);
+		nestedByRepeater.set(repeaterFieldId, used);
+	}
+	function recordBindFrom(from, repeatStack) {
+		if (from.startsWith("content.")) {
+			const fieldId = from.replace("content.", "").split(".")[0] ?? "";
+			if (fieldId) topLevel.add(fieldId);
+			return;
+		}
+		for (let i = repeatStack.length - 1; i >= 0; i--) {
+			const ctx = repeatStack[i];
+			if (!ctx) continue;
+			if (from.startsWith(`${ctx.itemName}.`)) {
+				const nestedFieldId = from.replace(`${ctx.itemName}.`, "").split(".")[0] ?? "";
+				if (nestedFieldId) addNested(ctx.repeaterFieldId, nestedFieldId);
+				return;
+			}
+		}
+	}
+	function visitProps(props, repeatStack) {
+		for (const value of Object.values(props)) if (value && typeof value === "object" && "$bind" in value) {
+			const bind = value.$bind;
+			if (bind && typeof bind.from === "string") recordBindFrom(bind.from, repeatStack);
+		} else if (value && typeof value === "object" && !Array.isArray(value)) visitProps(value, repeatStack);
+	}
+	function visit(n, repeatStack) {
+		if (!n || typeof n !== "object") return;
+		const nodeObj = n;
+		let nextRepeatStack = repeatStack;
+		if (nodeObj.$repeat && typeof nodeObj.$repeat === "object") {
+			const repeat = nodeObj.$repeat;
+			const itemName = typeof repeat.itemName === "string" ? repeat.itemName : null;
+			const collection = repeat.collection && typeof repeat.collection === "object" ? repeat.collection : null;
+			const from = collection && typeof collection.from === "string" ? collection.from : null;
+			if (itemName && from && from.startsWith("content.")) {
+				const repeaterFieldId = from.replace("content.", "").split(".")[0] ?? "";
+				if (repeaterFieldId) {
+					topLevel.add(repeaterFieldId);
+					itemNameByRepeater.set(repeaterFieldId, itemName);
+					nextRepeatStack = [...repeatStack, {
+						repeaterFieldId,
+						itemName
+					}];
+				}
+			}
+		}
+		if (nodeObj.$bind && typeof nodeObj.$bind === "object") {
+			const bind = nodeObj.$bind;
+			if (typeof bind.from === "string") recordBindFrom(bind.from, nextRepeatStack);
+		}
+		if (nodeObj.props && typeof nodeObj.props === "object") visitProps(nodeObj.props, nextRepeatStack);
+		if (Array.isArray(nodeObj.children)) for (const child of nodeObj.children) visit(child, nextRepeatStack);
+	}
+	visit(node, []);
+	return {
+		topLevel,
+		nestedByRepeater,
+		itemNameByRepeater
+	};
+}
+/**
+* Find content nodes that should have bindings but don't.
+* Returns validation errors for text, richText, media, button, link nodes without $bind.
+*/
+function findMissingBindings(node, blockId, path = "layout") {
+	const errors = [];
+	if (!node || typeof node !== "object") return errors;
+	const n = node;
+	const nodeType = n.type;
+	if ("$repeat" in n && n.$repeat && typeof n.$repeat === "object") {
+		if (nodeType && CONTENT_NODE_TYPES.includes(nodeType)) errors.push({
+			path,
+			message: `Block "${blockId}": ${nodeType} node at ${path} uses $repeat, but content nodes cannot be repeat containers`,
+			suggestion: `Move $repeat to a container node (grid/stack/div) and put a ${nodeType} child inside with $bind.from like "item.field".`
+		});
+		if (!Array.isArray(n.children) || n.children.length === 0) errors.push({
+			path,
+			message: `Block "${blockId}": node at ${path} uses $repeat but has no children to repeat`,
+			suggestion: "Add one or more child nodes under children[] that bind to the repeat item (e.g., $bind.from: \"item.text\")."
+		});
+	}
+	if (nodeType && CONTENT_NODE_TYPES.includes(nodeType)) {
+		const hasBind = "$bind" in n && n.$bind && typeof n.$bind === "object" && "from" in n.$bind;
+		if (Array.isArray(n.children) && n.children.length > 0) errors.push({
+			path,
+			message: `Block "${blockId}": ${nodeType} node at ${path} has children, but content nodes must have children: null`,
+			suggestion: `Replace this ${nodeType} with a container node (div/stack/inline) and put the ${nodeType} nodes inside it.`
+		});
+		if (!hasBind) errors.push({
+			path: `${path}`,
+			message: `Block "${blockId}": ${nodeType} node at ${path} has no $bind - it won't display any content`,
+			suggestion: `Add $bind: { from: "content.fieldName" } to connect this ${nodeType} to a field. Example: { "type": "${nodeType}", "$bind": { "from": "content.headline" } }`
+		});
+	}
+	if ("children" in n && Array.isArray(n.children)) for (let i = 0; i < n.children.length; i++) {
+		const childErrors = findMissingBindings(n.children[i], blockId, `${path}.children[${i}]`);
+		errors.push(...childErrors);
+	}
+	return errors;
+}
+/**
+* Calculate the maximum depth of a layout tree.
+* Returns 0 for a leaf node, increments for each level of nesting.
+*/
+function getMaxDepth(node, currentDepth = 0) {
+	if (!node || typeof node !== "object") return currentDepth;
+	const n = node;
+	if (!n.children || !Array.isArray(n.children)) return currentDepth;
+	if (n.children.length === 0) return currentDepth;
+	return Math.max(...n.children.map((child) => getMaxDepth(child, currentDepth + 1)));
+}
+/**
+* Container node types that might be truncated if they have null children at max depth.
+*/
+const CONTAINER_NODE_TYPES = [
+	"section",
+	"stack",
+	"grid",
+	"div",
+	"inline"
+];
+/**
+* Detect if layout was likely truncated at depth limit.
+* Returns paths to container nodes at max depth that have children: null.
+*
+* This helps identify when the LLM wanted to create deeper structures but
+* was constrained by the schema depth limit.
+*/
+function detectPotentialTruncation(node, maxAllowedDepth, currentDepth = 0, path = "layout") {
+	if (!node || typeof node !== "object") return [];
+	const n = node;
+	const truncatedPaths = [];
+	if (currentDepth === maxAllowedDepth && n.children === null) {
+		if (CONTAINER_NODE_TYPES.includes(n.type || "")) truncatedPaths.push(`${path} (${n.type ?? "node"} at depth ${currentDepth})`);
+	}
+	if (n.children && Array.isArray(n.children)) n.children.forEach((child, i) => {
+		truncatedPaths.push(...detectPotentialTruncation(child, maxAllowedDepth, currentDepth + 1, `${path}.children[${i}]`));
+	});
+	return truncatedPaths;
+}
+/**
+* Format validation errors as actionable feedback for LLM self-correction.
+*/
+function formatValidationFeedback(errors, output) {
+	const lines = [];
+	if (output && output.blocks[0]?.layout) {
+		const layout = output.blocks[0].layout;
+		const maxDepth = getMaxDepth(layout);
+		const truncatedPaths = detectPotentialTruncation(layout, 6);
+		if (truncatedPaths.length > 0) {
+			lines.push("### DEPTH LIMIT WARNING");
+			lines.push("");
+			lines.push(`The layout reached the maximum depth of 6 levels.`);
+			lines.push("These container nodes at the depth limit have no children:");
+			for (const path of truncatedPaths) lines.push(`  ⚠️ ${path}`);
+			lines.push("");
+			lines.push("**FIX**: Flatten your layout structure or use $repeat for lists.");
+			lines.push("- Combine wrapper nodes where possible (e.g., section > stack > div → section > stack)");
+			lines.push("- Use $repeat instead of manual nesting for repeated items");
+			lines.push(`- Current max depth: ${maxDepth}, limit: 6`);
+			lines.push("");
+		}
+	}
+	if (errors.length === 0) return lines.length > 0 ? lines.join("\n") : "";
+	lines.push("## CRITICAL: Your output failed validation. You MUST fix these errors.");
+	lines.push("");
+	lines.push("Your previous output had the following problems:");
+	lines.push("");
+	const missingBindErrors = errors.filter((e) => e.message.includes("no $bind"));
+	const unusedFieldErrors = errors.filter((e) => e.message.includes("never used"));
+	const otherErrors = errors.filter((e) => !e.message.includes("no $bind") && !e.message.includes("never used"));
+	if (missingBindErrors.length > 0) {
+		lines.push("### MISSING $bind ERRORS (nodes that display nothing)");
+		lines.push("");
+		for (const error of missingBindErrors) lines.push(`❌ ${error.message}`);
+		lines.push("");
+		lines.push("**FIX**: Every text, richText, media, button, and link node MUST have $bind.");
+		lines.push("");
+		lines.push("WRONG (displays nothing):");
+		lines.push("```json");
+		lines.push("{ \"type\": \"text\", \"props\": { \"as\": \"h1\" }, \"children\": null, \"$bind\": null }");
+		lines.push("```");
+		lines.push("");
+		lines.push("CORRECT (bound to field):");
+		lines.push("```json");
+		lines.push("{ \"type\": \"text\", \"props\": { \"as\": \"h1\" }, \"children\": null, \"$bind\": { \"from\": \"content.headline\", \"fallback\": null, \"transforms\": null } }");
+		lines.push("```");
+		lines.push("");
+	}
+	if (unusedFieldErrors.length > 0) {
+		lines.push("### UNUSED FIELD ERRORS (fields defined but never bound)");
+		lines.push("");
+		for (const error of unusedFieldErrors) lines.push(`❌ ${error.message}`);
+		lines.push("");
+		const fieldNames = unusedFieldErrors.flatMap((e) => {
+			const captured = e.message.match(/never used in layout: (.+)$/)?.[1];
+			return captured ? captured.split(", ") : [];
+		});
+		if (fieldNames.length > 0) {
+			lines.push("**CHECKLIST - Add a binding for EACH of these fields:**");
+			for (const field of fieldNames) lines.push(`- [ ] ${field} → text node with $bind: { from: "content.${field}" }`);
+			lines.push("");
+		}
+		lines.push("**COMMON MISTAKE**: Creating container nodes with `children: null` instead of actual bindings.");
+		lines.push("");
+		lines.push("This is WRONG (container with no content inside):");
+		lines.push("```json");
+		lines.push("{ \"type\": \"inline\", \"children\": null }");
+		lines.push("```");
+		lines.push("");
+		lines.push("This is CORRECT (container with bound text node):");
+		lines.push("```json");
+		lines.push("{ \"type\": \"inline\", \"children\": [");
+		lines.push("  { \"type\": \"text\", \"$bind\": { \"from\": \"content.fieldName\", \"fallback\": null, \"transforms\": null }, \"props\": null, \"$repeat\": null, \"$when\": null, \"children\": null }");
+		lines.push("] }");
+		lines.push("```");
+		lines.push("");
+		lines.push("**FIX**: Every field you define MUST be used in a $bind somewhere in the layout.");
+		lines.push("If you have a field \"highlight\", you MUST have a node with $bind: { from: \"content.highlight\" }");
+		lines.push("");
+	}
+	if (otherErrors.length > 0) {
+		lines.push("### OTHER ERRORS");
+		lines.push("");
+		for (const error of otherErrors) {
+			lines.push(`❌ ${error.message}`);
+			if (error.suggestion) lines.push(`   FIX: ${error.suggestion}`);
+		}
+		lines.push("");
+	}
+	lines.push("---");
+	lines.push("Re-generate the COMPLETE output with these errors fixed.");
+	lines.push("Do NOT just acknowledge the errors - output the corrected JSON.");
+	return lines.join("\n");
+}
+//#endregion
+//#region src/manifest/passes/pass1-fields.ts
+/**
+* Pass 1: Field Extraction
+*
+* Shared schema and prompt for extracting editable content fields from HTML.
+* Used by both two-pass and three-pass converters.
+*/
+const simpleFieldTypeEnum = z.enum([
+	"text",
+	"richText",
+	"media",
+	"link",
+	"boolean",
+	"select",
+	"number"
+]);
+z.enum([
+	"text",
+	"richText",
+	"media",
+	"link",
+	"boolean",
+	"select",
+	"number",
+	"repeater",
+	"group"
+]);
+const linkDefaultValue = z.object({ label: z.string().describe("The visible link text") });
+const mediaDefaultValue = z.object({
+	src: z.string().describe("Image/video source URL"),
+	alt: z.string().describe("Alt text for accessibility (empty string if none)")
+});
+/**
+* Schema for nested fields inside repeaters/groups.
+* Uses simple types only (no nested repeaters) to avoid deep recursion.
+*/
+const nestedFieldSchema = z.object({
+	id: z.string().min(1).describe("camelCase field ID"),
+	type: simpleFieldTypeEnum,
+	label: z.string().min(1),
+	required: z.boolean().nullable()
+});
+/**
+* Simple field schema (text, richText, media, link, boolean, select, number).
+*/
+const simpleFieldSchema = z.object({
+	id: z.string().min(1).describe("camelCase field ID (e.g., headline, ctaButton)"),
+	type: simpleFieldTypeEnum,
+	label: z.string().min(1),
+	required: z.boolean(),
+	multiline: z.boolean().nullable().describe("For text fields: true if multiple lines"),
+	defaultValue: z.union([
+		z.string(),
+		z.number(),
+		z.boolean(),
+		linkDefaultValue,
+		mediaDefaultValue,
+		z.null()
+	]).describe("Default content extracted from HTML"),
+	htmlContext: z.string().describe("Brief description of where this appears in the HTML")
+});
+/**
+* Repeater field schema - for lists of similar items that editors can add/remove/reorder.
+*/
+const repeaterFieldSchema = z.object({
+	id: z.string().min(1).describe("camelCase field ID (e.g., socialLinks, features)"),
+	type: z.literal("repeater"),
+	label: z.string().min(1),
+	required: z.boolean(),
+	itemLabel: z.string().min(1).describe("Singular label for each item (e.g., \"Link\", \"Feature\")"),
+	itemFields: z.array(nestedFieldSchema).min(1).describe("Fields for each item in the repeater"),
+	htmlContext: z.string().describe("Brief description of where this appears in the HTML")
+});
+/**
+* Group field schema - for organizing related fields together (not repeating).
+*/
+const groupFieldSchema = z.object({
+	id: z.string().min(1).describe("camelCase field ID (e.g., contactInfo, seoSettings)"),
+	type: z.literal("group"),
+	label: z.string().min(1),
+	required: z.boolean(),
+	groupFields: z.array(nestedFieldSchema).min(1).describe("Fields within the group"),
+	htmlContext: z.string().describe("Brief description of where this appears in the HTML")
+});
+/**
+* Combined field schema supporting all field types.
+* Uses discriminated union on 'type' field.
+*/
+const extractedFieldSchema = z.union([
+	simpleFieldSchema,
+	repeaterFieldSchema,
+	groupFieldSchema
+]);
+/**
+* Schema for extracted content entry data.
+* Used when the LLM decides to use content types.
+*/
+const extractedEntrySchema = z.object({
+	identifier: z.string().regex(/^[a-z0-9-]+$/).describe("Unique slug-safe identifier (e.g., wine-tasting-evening)"),
+	title: z.string().min(1).describe("Entry title"),
+	data: z.object({}).passthrough().describe("Entry data matching the content type schema")
+});
+/**
+* Schema for a new content type definition.
+* Used when no existing content type fits.
+*/
+const newContentTypeSchema = z.object({
+	key: z.string().regex(/^[a-z][a-z0-9-]*$/).describe("Content type key (e.g., testimonial, team-member)"),
+	name: z.string().min(1).describe("Human-readable name"),
+	description: z.string().nullable().describe("Description of this content type"),
+	fields: z.array(z.object({
+		id: z.string().min(1),
+		type: z.string().min(1),
+		label: z.string().min(1),
+		required: z.boolean().nullable(),
+		description: z.string().nullable()
+	})).min(1),
+	isRouted: z.boolean().describe("Whether entries have their own pages")
+});
+/**
+* Discriminated union for content type decision.
+* The LLM chooses how to handle list-like content.
+*/
+const contentTypeApproachSchema = z.discriminatedUnion("approach", [
+	z.object({
+		approach: z.literal("existingContentType"),
+		contentTypeKey: z.string().min(1).describe("Key of the existing content type to use"),
+		entries: z.array(extractedEntrySchema).min(1).describe("Extracted entries"),
+		rationale: z.string().describe("Why this content type fits")
+	}),
+	z.object({
+		approach: z.literal("newContentType"),
+		contentType: newContentTypeSchema,
+		entries: z.array(extractedEntrySchema).min(1).describe("Extracted entries"),
+		rationale: z.string().describe("Why a new content type is needed")
+	}),
+	z.object({
+		approach: z.literal("repeater"),
+		rationale: z.string().describe("Why repeater is preferred over content type")
+	}),
+	z.object({
+		approach: z.literal("none"),
+		rationale: z.string().describe("Why this is not list data")
+	})
+]);
+const pass1OutputSchema = z.object({
+	blockId: z.string().regex(/^custom\.[a-z][a-z0-9-]*$/).describe("Block ID like custom.hero-section"),
+	blockTitle: z.string().min(1),
+	blockDescription: z.string().nullable(),
+	category: z.enum([
+		"marketing",
+		"content",
+		"blog",
+		"media",
+		"layout",
+		"interactive"
+	]),
+	fields: z.array(extractedFieldSchema).min(1),
+	/**
+	* Content type decision for list-like content.
+	* When content types are available, the LLM may decide to use content entries
+	* instead of repeater fields. This is null when no content types were provided
+	* or when the content is not list-like.
+	*/
+	contentTypeApproach: contentTypeApproachSchema.nullable()
+});
+function buildContentTypePromptSection(contentTypes) {
+	return `
+
+## CONTENT TYPE CONSIDERATION
+
+If this section displays a LIST of similar items (testimonials, events, team members, etc.),
+you must decide how to handle the data. Choose ONE of these approaches:
+
+### Option A: Use existing content type (PREFERRED when schema matches)
+
+Available content types:
+${contentTypes.map((ct) => {
+		const fieldList = ct.fields.map((f) => `${f.id} (${f.type})`).join(", ");
+		return `- **${ct.key}**: ${ct.name}
+  Fields: ${fieldList}
+  Routable: ${ct.isRouted ? "Yes (has own pages)" : "No"}`;
+	}).join("\n")}
+
+If using a content type:
+1. Add a "contentType" field with the type key as defaultValue
+2. Extract entries matching the content type's schema
+3. Set contentTypeApproach with approach: "existingContentType"
+
+### Option B: Create new content type (when no existing type fits)
+
+Define a new content type with:
+- key: slug-safe identifier
+- name: human-readable name
+- fields: schema fields matching the data
+- isRouted: true if entries should have their own pages
+
+### Option C: Use repeater field (for page-specific lists)
+
+Use when items are specific to this page and won't be reused elsewhere.
+Example: FAQ items, feature bullet points, pricing tiers.
+Set contentTypeApproach with approach: "repeater"
+
+### Option D: Not list data (standard fields)
+
+If this is not list-like content, set contentTypeApproach with approach: "none"
+
+## GUIDANCE
+
+- Testimonials, team bios → content types (reusable across site)
+- Events, blog posts → content types (have own pages)
+- FAQ items, feature bullets → repeaters (page-specific)
+- Single items → plain fields`;
+}
+const PASS1_SYSTEM_PROMPT = `You are an expert at analyzing HTML/JSX markup to extract editable content fields for a CMS.
+
+Your task: Analyze the HTML/JSX markup and identify ALL pieces of content that should be editable by a user.
+
+## FIELD ECONOMY PRINCIPLES
+
+**Prefer fewer, smarter fields. CMS editors should not face 25-field forms.**
+
+1. **Use richText for formatted lists and multi-line content:**
+   - Opening hours → single richText with formatted list (not 6 separate text fields)
+   - Address with line breaks → single richText with hard line breaks / Shift+Enter between lines (not address1, address2, city, postcode)
+   - Feature lists, specs, ingredients → richText with bullet list
+
+   RichText supports: paragraphs, hard line breaks, bold, italic, bullet lists, numbered lists, links.
+   The CMS editor can format content naturally without rigid field structure.
+   For line-oriented content like addresses, opening hours, and contact details, keep one logical paragraph and use hard line breaks between lines. In the CMS editor, authors create those line breaks with Shift+Enter; Enter creates a new paragraph.
+
+2. **Use repeaters only when items need individual editing/reordering:**
+   - Testimonials with avatar + name + quote → repeater (each item is distinct)
+   - Team members with photo + bio → repeater
+   - Social links where user adds/removes platforms → repeater
+
+3. **Anti-patterns to AVOID:**
+   ❌ hoursMonFriDay, hoursMonFriTime, hoursSatDay... (6+ fields for hours table)
+   ❌ socialInstagram, socialFacebook, socialTwitter (proliferating similar fields)
+   ❌ address1, address2, city, state, zip (5 fields for one address)
+
+   ✅ openingHours: single richText field with formatted content / hard line breaks
+   ✅ address: single richText field with hard line breaks (Shift+Enter in the editor)
+   ✅ socialLinks: repeater with { platform, url } IF user needs to add/remove links
+
+## Field Type Rules
+
+### Simple Fields
+- **text**: Short text (<200 chars), headings, labels, button text
+  - Set multiline: true for paragraphs or text with line breaks
+  - Set multiline: false for single-line text
+- **richText**: Formatted content with HTML tags (p, strong, em, ul, etc.)
+- **media**: Images (<img>) or videos (<video>)
+  - defaultValue: { "src": "image-url", "alt": "description" }
+- **link**: Anchors (<a>) or buttons that navigate
+  - defaultValue: { "label": "visible text" }
+  - Only extract the visible text - link destinations are configured in the CMS
+
+### Container Fields
+
+- **repeater**: List of similar items that editors can add/remove/reorder
+  - Use when: Multiple similar items (social links, features, team members)
+  - Requires: itemLabel (singular name for item), itemFields (array of nested fields)
+  - Example: Social links → repeater with itemFields: [{ id: "platform", type: "text" }, { id: "url", type: "link" }]
+
+- **group**: Related fields grouped together (NOT repeating)
+  - Use when: Logically related fields that should appear together in the CMS
+  - Requires: groupFields (array of nested fields)
+  - Example: Contact info → group with groupFields: [{ id: "phone", type: "text" }, { id: "email", type: "text" }]
+
+### When to use each type:
+- Single value → simple field (text, richText, media, link)
+- Formatted list where structure is static → richText (opening hours, address; use hard line breaks / Shift+Enter for line-oriented text)
+- List where items can be added/removed/reordered → repeater
+- Related fields that belong together → group
+
+## Output Requirements
+
+1. Give each field a camelCase id (e.g., headline, ctaButton, heroImage)
+2. Extract the actual content as defaultValue
+3. Describe where each field appears in htmlContext
+4. Set required: true for primary content, false for optional
+
+## Examples
+
+### Example 1: Simple Fields
+
+Input HTML:
+\`\`\`html
+<section>
+  <h1>Welcome to Our Site</h1>
+  <p>We build amazing products.</p>
+  <a href="/start">Get Started</a>
+</section>
+\`\`\`
+
+Output:
+\`\`\`json
+{
+  "blockId": "custom.hero",
+  "blockTitle": "Hero Section",
+  "blockDescription": "Simple hero with headline, description, and CTA",
+  "category": "marketing",
+  "fields": [
+    { "id": "headline", "type": "text", "label": "Headline", "required": true, "multiline": false, "defaultValue": "Welcome to Our Site", "htmlContext": "h1 main heading" },
+    { "id": "description", "type": "text", "label": "Description", "required": true, "multiline": false, "defaultValue": "We build amazing products.", "htmlContext": "p below heading" },
+    { "id": "cta", "type": "link", "label": "Call to Action", "required": false, "multiline": null, "defaultValue": { "label": "Get Started" }, "htmlContext": "a button at bottom" }
+  ],
+  "contentTypeApproach": { "approach": "none", "rationale": "Single hero section, not list data" }
+}
+\`\`\`
+
+### Example 2: Repeater Field
+
+Input HTML with repeating social links:
+\`\`\`html
+<footer>
+  <div class="social-links">
+    <a href="https://instagram.com/..."><svg>Instagram</svg></a>
+    <a href="https://facebook.com/..."><svg>Facebook</svg></a>
+    <a href="https://twitter.com/..."><svg>Twitter</svg></a>
+  </div>
+</footer>
+\`\`\`
+
+Output with repeater:
+\`\`\`json
+{
+  "blockId": "custom.footer",
+  "blockTitle": "Footer",
+  "blockDescription": "Footer with social links",
+  "category": "layout",
+  "fields": [
+    {
+      "id": "socialLinks",
+      "type": "repeater",
+      "label": "Social Links",
+      "required": false,
+      "itemLabel": "Link",
+      "itemFields": [
+        { "id": "platform", "type": "text", "label": "Platform", "required": true },
+        { "id": "url", "type": "link", "label": "URL", "required": true }
+      ],
+      "htmlContext": "Row of social media icon links"
+    }
+  ],
+  "contentTypeApproach": { "approach": "repeater", "rationale": "Social links are page-specific and editors need to add/remove platforms" }
+}
+\`\`\`
+`;
+//#endregion
+//#region src/manifest/passes/ai-helpers.ts
+/**
+* Make a structured JSON request to the AI model.
+*
+* @param config - Model configuration (model, system prompt, temperature)
+* @param userMessage - The user message to send
+* @param schema - Zod schema for response validation
+* @returns Parsed response matching the schema
+*/
+async function getJsonFromAi(ai, config, userMessage, schema) {
+	const response = await ai.getAiResponse(config, (_ctx) => [{
+		role: "user",
+		content: userMessage
+	}], {
+		kind: "json",
+		schema
+	});
+	if (response.kind !== "json") throw new Error("Unexpected response kind");
+	return response.data;
+}
+//#endregion
+//#region src/manifest/passes/pass3-styling.ts
+/**
+* Pass 3 Styling Module
+*
+* Two-step styling pass:
+* - Pass 3a: LLM outputs className patches (which nodes get which classes)
+* - Pass 3b: LLM outputs CSS rules (targeting those classes)
+*
+* Programmatic transformations between passes ensure coordination:
+* - Patches are applied deterministically
+* - Selectors are scoped programmatically
+*/
+const pass3aOutputSchema = z.object({
+	classNamePatches: z.array(z.object({
+		nodePath: z.string(),
+		className: z.string().min(1)
+	})),
+	rationale: z.string()
+});
+const pass3bOutputSchema = z.object({
+	customCssRules: z.array(llmCustomCssRuleSchema).nullable(),
+	customCssAtRules: z.array(llmMediaAtRuleSchema).nullable(),
+	rationale: z.string()
+});
+/**
+* Get a node at a specific path in the layout tree.
+* Path format: "" for root, or "children[0].children[1]" etc.
+*
+* STRICT PARSING: Rejects invalid path formats to prevent silent failures.
+*/
+function getNodeAtPath(layout, path) {
+	if (path === "" || path === "root" || path === "layout") return layout;
+	let normalizedPath = path;
+	if (normalizedPath.startsWith("layout.")) normalizedPath = normalizedPath.slice(7);
+	if (!/^(children\[\d+\]\.)*children\[\d+\]$/.test(normalizedPath)) return null;
+	const parts = normalizedPath.match(/children\[(\d+)\]/g) || [];
+	let current = layout;
+	for (const part of parts) {
+		const indexMatch = part.match(/\d+/);
+		if (!indexMatch) return null;
+		const index = parseInt(indexMatch[0], 10);
+		if (!current.children || !current.children[index]) return null;
+		current = current.children[index];
+	}
+	return current;
+}
+/**
+* Apply className patches to a layout.
+* Uses APPEND semantics - preserves existing classNames.
+*/
+function applyClassNamePatches(layout, patches) {
+	const patched = structuredClone(layout);
+	for (const patch of patches) {
+		const node = getNodeAtPath(patched, patch.nodePath);
+		if (!node) throw new Error(`Invalid nodePath: ${patch.nodePath}`);
+		node.props = node.props || {};
+		const existing = node.props.className;
+		if (existing) {
+			if (!existing.split(/\s+/).includes(patch.className)) node.props.className = `${existing} ${patch.className}`;
+		} else node.props.className = patch.className;
+	}
+	return patched;
+}
+/**
+* Generate node path inventory for the LLM prompt.
+*/
+function buildNodeInventory(layout) {
+	return collectLayoutNodeInfos(layout).map((info) => {
+		const pathDisplay = info.path === "layout" ? "\"\"" : `"${info.path.replace("layout.", "")}"`;
+		const bindInfo = info.bindFrom ? ` -> binds to ${info.bindFrom}` : "";
+		return `- ${pathDisplay} (${info.type})${bindInfo}`;
+	}).join("\n");
+}
+/**
+* Validate Pass 3a output - className patches.
+*/
+function validatePass3aOutput(output, layout) {
+	const errors = [];
+	const seenPaths = /* @__PURE__ */ new Set();
+	for (const patch of output.classNamePatches) {
+		if (seenPaths.has(patch.nodePath)) {}
+		seenPaths.add(patch.nodePath);
+		if (!getNodeAtPath(layout, patch.nodePath)) errors.push(`Invalid nodePath "${patch.nodePath}": node does not exist in layout`);
+		if (!/^[a-zA-Z_-][a-zA-Z0-9_-]*$/.test(patch.className)) errors.push(`Invalid className "${patch.className}": must be a valid CSS class name (no spaces, start with letter/underscore/hyphen)`);
+	}
+	return errors;
+}
+/**
+* Extract class names from a CSS selector.
+*
+* This is a simplified version used for validating LLM output BEFORE scoping.
+* At this stage, selectors are simple like ".hero-title" without [data-block=...].
+*
+* NOTE: A different implementation exists in output-schema.ts for final validation
+* of scoped selectors (strips [data-block=...] and skips .cms-node-* classes).
+*/
+function extractSelectorClasses(selector) {
+	const classes = /* @__PURE__ */ new Set();
+	const re = /\.([_a-zA-Z][-_a-zA-Z0-9]*)/g;
+	let match;
+	while ((match = re.exec(selector)) !== null) {
+		const className = match[1];
+		if (className) classes.add(className);
+	}
+	return classes;
+}
+/**
+* Validate Pass 3b output BEFORE scoping.
+* Ensures selectors are class-based and reference only available classNames.
+*/
+function validatePass3bOutput(output, availableClassNames) {
+	const errors = [];
+	const checkSelector = (selector, ruleId) => {
+		if (selector.includes("[data-block=")) errors.push(`Rule "${ruleId}": Selector should not include [data-block=...]. We add scoping programmatically.`);
+		if (selector.includes("@media") || selector.includes("@supports")) errors.push(`Rule "${ruleId}": Selector contains @media/@supports. Use customCssAtRules for responsive styles.`);
+		const selectorClasses = extractSelectorClasses(selector);
+		for (const cls of selectorClasses) if (!availableClassNames.has(cls)) errors.push(`Rule "${ruleId}": Selector references unknown class ".${cls}". Available: ${Array.from(availableClassNames).join(", ")}`);
+	};
+	for (const rule of output.customCssRules ?? []) checkSelector(rule.selector, rule.id);
+	for (const atRule of output.customCssAtRules ?? []) for (const nestedRule of atRule.rules) checkSelector(nestedRule.selector, atRule.id);
+	return errors;
+}
+/**
+* Scope a single selector with the block prefix.
+* Handles comma-separated selector lists safely.
+*
+* IMPORTANT: ".a, .b" must become "[data-block=...] .a, [data-block=...] .b"
+* NOT "[data-block=...] .a, .b" (which would leak .b globally)
+*/
+function scopeSelector(prefix, selector) {
+	return selector.split(",").map((part) => `${prefix} ${part.trim()}`).join(", ");
+}
+/**
+* Scope all selectors in CSS rules.
+* Operates on LLM-format rules (before normalization).
+*/
+function scopeSelectorsInPlace(prefix, rules) {
+	return rules.map((rule) => ({
+		...rule,
+		selector: scopeSelector(prefix, rule.selector)
+	}));
+}
+/**
+* Scope and normalize CSS rules from Pass 3b output.
+* Pipeline: scope selectors -> normalize declarations
+*/
+function scopeAndNormalizeRules(blockId, output) {
+	const prefix = `[data-block="${blockId}"]`;
+	const scopedRules = output.customCssRules ? scopeSelectorsInPlace(prefix, output.customCssRules) : null;
+	const scopedAtRules = output.customCssAtRules ? output.customCssAtRules.map((atRule) => ({
+		...atRule,
+		rules: scopeSelectorsInPlace(prefix, atRule.rules)
+	})) : null;
+	return {
+		customCssRules: scopedRules?.map(normalizeLlmCssRule) ?? null,
+		customCssAtRules: scopedAtRules?.map(normalizeLlmMediaAtRule) ?? null
+	};
+}
+function buildPass3aSystemPrompt() {
+	return `You are an expert at styling CMS block layouts.
+
+## YOUR TASK
+
+Analyze the layout and determine which nodes need CSS class names for styling.
+You will output className patches - a list of which nodes get which class names.
+
+## RULES
+
+1. Assign classNames to nodes that need custom styling
+2. Use descriptive, semantic class names (e.g., "hero-title", "cta-button", "feature-grid")
+3. Use nodePath EXACTLY as shown in the available paths list
+4. The root node is referenced as "" (empty string)
+5. You can assign multiple patches to different nodes
+6. Use kebab-case for class names (e.g., "hero-title" not "heroTitle")
+
+## OUTPUT FORMAT
+
+Return:
+- classNamePatches: Array of { nodePath, className } objects
+- rationale: Explain your styling decisions
+
+## EXAMPLE
+
+Available paths:
+- "" (section)
+- "children[0]" (text) -> binds to content.headline
+- "children[1]" (text) -> binds to content.body
+
+Output:
+\`\`\`json
+{
+  "classNamePatches": [
+    { "nodePath": "", "className": "hero-section" },
+    { "nodePath": "children[0]", "className": "hero-title" },
+    { "nodePath": "children[1]", "className": "hero-body" }
+  ],
+  "rationale": "Added semantic class names to enable styling. The root section gets 'hero-section' for container styles, the headline gets 'hero-title' for typography, and the body gets 'hero-body' for paragraph styling."
+}
+\`\`\`
+`;
+}
+/**
+* Build the user message for Pass 3a (className patches).
+*/
+function buildPass3aUserMessage(layout, html, nodeInventory) {
+	return `Analyze this layout and determine which nodes need CSS class names for styling.
+
+## LAYOUT TREE
+
+\`\`\`json
+${JSON.stringify(layout, null, 2)}
+\`\`\`
+
+## AVAILABLE NODE PATHS
+
+Choose from these paths (generated from the layout):
+${nodeInventory}
+
+## ORIGINAL HTML (for style reference)
+
+\`\`\`html
+${html}
+\`\`\`
+
+Return className patches for nodes that need styling.
+`;
+}
+function buildPass3bSystemPrompt() {
+	return `You are an expert at writing CSS for CMS blocks.
+
+## YOUR TASK
+
+Write CSS rules for the styled layout nodes.
+
+## RULES
+
+1. Write selectors using ONLY the classNames listed in "AVAILABLE CLASSNAMES"
+2. Use simple selectors: \`.hero-title\`, not \`[data-block="..."] .hero-title\`
+3. Do NOT include [data-block=...] in selectors - we add that programmatically
+4. Use customCssRules for base styles
+5. Use customCssAtRules for responsive (@media) styles
+6. Match the visual styling from the original HTML
+
+## COLOR TOKENS (IMPORTANT)
+
+- Prefer **literal hex** values from the provided theme summary.
+- If you use CSS variables from the app, use the **resolved color variables**:
+  - ✅ \`var(--color-primary)\`, \`var(--color-accent)\`, \`var(--color-background)\`, \`var(--color-foreground)\`, etc.
+  - ❌ Do NOT use \`var(--primary)\` / \`var(--accent)\` directly (those are HSL components).
+- Do NOT invent variables like \`--white\`, \`--text\`, \`--theme-text\`, \`--theme-background\`.
+
+## DECLARATION FORMAT
+
+Use array format with camelCase properties:
+\`\`\`json
+{
+  "declarations": [
+    { "property": "fontSize", "value": "3rem" },
+    { "property": "fontWeight", "value": "bold" }
+  ]
+}
+\`\`\`
+
+## EXAMPLE
+
+Available classNames: hero-section, hero-title, hero-body
+
+Output:
+\`\`\`json
+{
+  "customCssRules": [
+    {
+      "id": "hero-title-base",
+      "selector": ".hero-title",
+      "declarations": [
+        { "property": "fontSize", "value": "2rem" },
+        { "property": "fontWeight", "value": "bold" }
+      ]
+    }
+  ],
+  "customCssAtRules": [
+    {
+      "id": "hero-title-lg",
+      "type": "media",
+      "query": "(min-width: 1024px)",
+      "rules": [{
+        "selector": ".hero-title",
+        "declarations": [{ "property": "fontSize", "value": "3rem" }]
+      }]
+    }
+  ],
+  "rationale": "Base font size of 2rem scales to 3rem on large screens."
+}
+\`\`\`
+`;
+}
+/**
+* Build the user message for Pass 3b (CSS rules).
+*/
+function buildPass3bUserMessage(patchedLayout, html, availableClassNames, themeSummary) {
+	return `Write CSS rules for the styled layout nodes.
+
+## LAYOUT WITH CLASSNAMES
+
+\`\`\`json
+${JSON.stringify(patchedLayout, null, 2)}
+\`\`\`
+
+## AVAILABLE CLASSNAMES
+
+These classNames are assigned to nodes in the layout:
+${availableClassNames.map((c) => `- ${c}`).join("\n")}
+
+## ORIGINAL HTML (for style reference)
+
+\`\`\`html
+${html}
+\`\`\`
+
+## THEME COLORS
+
+${themeSummary}
+
+Write CSS rules targeting ONLY the available classNames listed above.
+Do NOT include [data-block=...] in selectors - we add that automatically.
+`;
+}
+//#endregion
+//#region src/manifest/constants.ts
+/**
+* Manifest Generator Constants
+*
+* Configuration constants for the HTML-to-manifest converter.
+*/
+/**
+* Default model for manifest generation.
+* Can be overridden via the RIVERBANK_MANIFEST_MODEL environment variable.
+*/
+const DEFAULT_MANIFEST_MODEL = process.env.RIVERBANK_MANIFEST_MODEL || "gpt-5-mini";
+//#endregion
+//#region src/manifest/three-pass-converter.ts
+/**
+* Three-Pass HTML-to-Manifest Converter
+*
+* Pass 1: Extract fields from HTML (identify editable content)
+* Pass 2: Generate layout structure using the extracted fields (no styling)
+* Pass 3: Add styling via two sub-passes:
+*   - Pass 3a: LLM outputs className patches (which nodes get which classes)
+*   - Pass 3b: LLM outputs CSS rules (targeting those classes)
+*
+* This approach ensures CSS rules reference classNames that actually exist
+* in the layout by applying patches programmatically between passes.
+*/
+/**
+* Convert a plain string (or simple markdown) to TipTap doc format.
+*
+* Double newlines create semantic paragraphs. Single newlines remain inside the
+* current paragraph as TipTap hardBreak nodes for line-oriented content such as
+* addresses and opening hours.
+*/
+function stringToTipTapDoc(text) {
+	return createRichTextDocFromMarkdown(text);
+}
+/**
+* Coerce a richText defaultValue to TipTap format.
+* Handles:
+* - Plain strings → TipTap doc with paragraphs
+* - Already valid TipTap docs → pass through
+*/
+function coerceRichTextDefaultValue(value) {
+	if (value === null || value === void 0) return null;
+	if (typeof value === "string") return stringToTipTapDoc(value);
+	const parsed = RichTextDocSchema.safeParse(value);
+	return parsed.success ? parsed.data : null;
+}
+/**
+* Check if a Pass 1 field is a repeater field.
+*/
+function isRepeaterField(field) {
+	return field.type === "repeater" && "itemFields" in field;
+}
+/**
+* Check if a Pass 1 field is a group field.
+*/
+function isGroupField(field) {
+	return field.type === "group" && "groupFields" in field;
+}
+/**
+* Map a Pass 1 field to a simplified field format for HtmlToManifestOutput.
+* This produces FieldDefinition-compatible output.
+*/
+function mapPass1FieldToSimpleOutput(field) {
+	if (isRepeaterField(field)) return {
+		id: field.id,
+		type: "repeater",
+		label: field.label,
+		required: field.required,
+		itemLabel: field.itemLabel,
+		minItems: 0,
+		maxItems: void 0,
+		schema: { fields: field.itemFields.map((nf) => ({
+			id: nf.id,
+			type: nf.type,
+			label: nf.label,
+			required: nf.required ?? false
+		})) }
+	};
+	if (isGroupField(field)) return {
+		id: field.id,
+		type: "group",
+		label: field.label,
+		required: field.required,
+		schema: { fields: field.groupFields.map((nf) => ({
+			id: nf.id,
+			type: nf.type,
+			label: nf.label,
+			required: nf.required ?? false
+		})) }
+	};
+	const simpleField = field;
+	let defaultValue = simpleField.defaultValue ?? void 0;
+	if (field.type === "richText" && defaultValue !== void 0) defaultValue = coerceRichTextDefaultValue(defaultValue) ?? void 0;
+	return {
+		id: field.id,
+		type: field.type,
+		label: field.label,
+		required: field.required,
+		defaultValue,
+		multiline: simpleField.multiline ?? void 0
+	};
+}
+/**
+* Map a Pass 1 field to the output schema format.
+* Handles simple fields, repeaters, and groups.
+*/
+function mapPass1FieldToOutputField(field) {
+	if (isRepeaterField(field)) return {
+		id: field.id,
+		type: "repeater",
+		label: field.label,
+		description: null,
+		required: field.required,
+		defaultValue: null,
+		itemLabel: field.itemLabel,
+		itemLabelSource: null,
+		minItems: 0,
+		maxItems: null,
+		allowConversion: false,
+		schema: { fields: field.itemFields.map((nf) => ({
+			id: nf.id,
+			type: nf.type,
+			label: nf.label,
+			required: nf.required,
+			multiline: null,
+			defaultValue: null
+		})) }
+	};
+	if (isGroupField(field)) return {
+		id: field.id,
+		type: "group",
+		label: field.label,
+		description: null,
+		required: field.required,
+		defaultValue: null,
+		schema: { fields: field.groupFields.map((nf) => ({
+			id: nf.id,
+			type: nf.type,
+			label: nf.label,
+			required: nf.required,
+			multiline: null,
+			defaultValue: null
+		})) }
+	};
+	const simpleField = field;
+	let defaultValue = simpleField.defaultValue ?? null;
+	if (field.type === "richText" && defaultValue !== null) defaultValue = coerceRichTextDefaultValue(defaultValue) ?? null;
+	return {
+		id: field.id,
+		type: field.type,
+		label: field.label,
+		description: null,
+		required: field.required,
+		defaultValue,
+		multiline: simpleField.multiline ?? false,
+		maxLength: null
+	};
+}
+const pass2OutputSchema = z.object({
+	layout: llmNodeSchema,
+	rationale: z.string().describe("Explain which node binds to which field")
+});
+function buildPass2SystemPrompt(fields, contentTypeApproach) {
+	const fieldList = fields.map((f) => {
+		if (isRepeaterField(f)) {
+			const itemFieldsList = f.itemFields.map((nf) => `${nf.id} (${nf.type})`).join(", ");
+			return `- ${f.id} (repeater): ${f.label}\n    Item fields: ${itemFieldsList}`;
+		}
+		if (isGroupField(f)) {
+			const groupFieldsList = f.groupFields.map((nf) => `${nf.id} (${nf.type})`).join(", ");
+			return `- ${f.id} (group): ${f.label}\n    Group fields: ${groupFieldsList}`;
+		}
+		return `- ${f.id} (${f.type}): ${f.label}`;
+	}).join("\n");
+	const hasRepeaterFields = fields.some(isRepeaterField);
+	let contentTypeSection = "";
+	if (contentTypeApproach?.approach === "existingContentType" || contentTypeApproach?.approach === "newContentType") contentTypeSection = `
+
+## DATA BINDING FOR CONTENT ENTRIES
+
+This block loads "${contentTypeApproach.approach === "existingContentType" ? contentTypeApproach.contentTypeKey : contentTypeApproach.contentType.key}" entries via dataLoaders. Use the $repeat pattern to iterate:
+
+\`\`\`json
+{
+  "type": "grid",
+  "$repeat": { "collection": { "from": "data.entries" }, "itemName": "entry" },
+  "children": [
+    { "type": "text", "$bind": { "from": "entry.content.name", "fallback": null, "transforms": null }, "props": null, "children": null, "$repeat": null },
+    { "type": "richText", "$bind": { "from": "entry.content.body", "fallback": null, "transforms": null }, "props": null, "children": null, "$repeat": null }
+  ],
+  "props": null,
+  "$bind": null
+}
+\`\`\`
+
+Available entry fields:
+${contentTypeApproach.approach === "newContentType" ? contentTypeApproach.contentType.fields.map((f) => `- entry.content.${f.id} (${f.type})`).join("\n") : "(see content type schema)"}
+
+Also available on each entry:
+- entry.title - Entry title
+- entry.slug - URL slug (if routable)
+- entry.identifier - Unique identifier
+
+CRITICAL: The $repeat node MUST be a container (grid/stack/div), and its children bind to entry.content.* fields.`;
+	return `You are an expert at creating layout structures for a CMS block.
+
+## YOUR TASK
+
+Create a layout tree that DISPLAYS the following fields. Each field MUST appear in the layout.
+DO NOT add any styling - no className props, no custom CSS. Just structure and $bind.
+
+## FIELDS TO DISPLAY (${fields.length} total)
+
+${fieldList}
+
+## CRITICAL RULE: Every field must be bound into the layout
+
+The layout MUST contain one binding per field. Most fields bind via a node's $bind.
+Link fields ALSO need a bound href prop so they render as clickable links.
+
+| Field Type | Node Type | Binding Pattern |
+|------------|-----------|-----------------|
+| text | "text" | node.$bind.from: "content.{fieldId}" |
+| richText | "richText" | node.$bind.from: "content.{fieldId}" |
+| media | "media" | node.$bind.from: "content.{fieldId}" |
+| link | "button" or "link" | node.$bind.from: "content.{fieldId}" with transforms: [{id:"links.label"}] AND props.href: { "$bind": { from: "content.{fieldId}", transforms: [{id:"links.resolve"}] } } |
+| repeater | container + children | Use $repeat on a container, with child nodes that bind to item.{itemFieldId} |${hasRepeaterFields ? `
+
+## REPEATER FIELD BINDING
+
+For repeater fields, use $repeat to iterate over items. The container gets $repeat, and children bind to item fields:
+
+\`\`\`json
+{
+  "type": "inline",
+  "props": null,
+  "$repeat": { "collection": { "from": "content.socialLinks" }, "itemName": "item" },
+  "$bind": null,
+  "$when": null,
+  "children": [
+    {
+      "type": "link",
+      "props": { "href": { "$bind": { "from": "item.url", "fallback": null, "transforms": [{ "id": "links.resolve" }] } } },
+      "$bind": { "from": "item.platform", "fallback": null, "transforms": null },
+      "$repeat": null,
+      "$when": null,
+      "children": null
+    }
+  ]
+}
+\`\`\`
+
+CRITICAL for repeaters:
+1. The $repeat node MUST be a container (inline, div, grid, stack)
+2. The $repeat node MUST have children: [...] (NOT children: null)
+3. Child nodes bind to item.{fieldId} (not content.{fieldId})
+
+## IMPORTANT: Link fields already display their label
+
+When binding a link field to a link/button node with the \`links.label\` transform,
+DO NOT create a separate text node to display the label. The link node already
+displays the label via the transform.
+
+❌ WRONG (redundant - displays label twice):
+\`\`\`json
+{
+  "type": "inline",
+  "$repeat": { "collection": { "from": "content.navLinks" }, "itemName": "item" },
+  "children": [
+    { "type": "link", "$bind": { "from": "item.url", "transforms": [{"id": "links.label"}] }, "props": {"href": {...}} },
+    { "type": "text", "$bind": { "from": "item.label" } }  // ← WRONG! Redundant
+  ]
+}
+\`\`\`
+
+✅ CORRECT (link node displays label via transform):
+\`\`\`json
+{
+  "type": "inline",
+  "$repeat": { "collection": { "from": "content.navLinks" }, "itemName": "item" },
+  "children": [
+    { "type": "link", "$bind": { "from": "item.url", "transforms": [{"id": "links.label"}] }, "props": {"href": {...}} }
+  ]
+}
+\`\`\`` : ""}
+
+## ❌ WRONG - This layout is BROKEN (no $bind = nothing displays):
+
+\`\`\`json
+{
+  "type": "section",
+  "children": [
+    { "type": "div" },
+    { "type": "div" }
+  ]
+}
+\`\`\`
+
+## ✅ CORRECT - Every field has a node with $bind:
+
+Given fields: headline (text), description (text), ctaButton (link)
+
+\`\`\`json
+{
+  "type": "section",
+  "props": null,
+  "children": [
+    {
+      "type": "stack",
+      "props": { "gap": "lg" },
+      "children": [
+        {
+          "type": "text",
+          "props": { "as": "h1" },
+          "children": null,
+          "$bind": { "from": "content.headline", "fallback": null, "transforms": null },
+          "$repeat": null
+        },
+        {
+          "type": "text",
+          "props": { "as": "p" },
+          "children": null,
+          "$bind": { "from": "content.description", "fallback": null, "transforms": null },
+          "$repeat": null
+        },
+        {
+          "type": "button",
+          "props": {
+            "variant": "primary",
+            "href": { "$bind": { "from": "content.ctaButton", "fallback": null, "transforms": [{ "id": "links.resolve" }] } }
+          },
+          "children": null,
+          "$bind": { "from": "content.ctaButton", "fallback": null, "transforms": [{ "id": "links.label" }] },
+          "$repeat": null
+        }
+      ],
+      "$bind": null,
+      "$repeat": null
+    }
+  ],
+  "$bind": null,
+  "$repeat": null
+}
+\`\`\`
+
+## Node Types
+
+- **Container nodes** (organize children, $bind: null): section, stack, inline, grid, div
+- **Content nodes** (display data, MUST have $bind): text, richText, media, button, link
+
+Valid types: ${ALLOWED_NODE_TYPES.slice(0, 15).join(", ")}...
+
+## LAYOUT DEPTH LIMIT
+
+The layout can nest UP TO 6 levels deep. Count from root:
+
+✅ VALID (within limit):
+section (root)
+  └─ stack (depth 1)
+       └─ grid (depth 2)
+            └─ div (depth 3)
+                 └─ inline (depth 4)
+                      └─ text (depth 5)  ← OK at depth 5
+
+❌ INVALID (exceeds limit - will be truncated):
+section (root)
+  └─ stack → div → grid → stack → inline → div → text  ← TOO DEEP!
+
+**If you need deeply nested content**:
+- Use $repeat instead of manual nesting for lists
+- Flatten wrapper divs that don't add semantic value
+- Combine related nodes (e.g., inline + text can often just be text)
+
+In your rationale, note the depth of complex paths:
+- "headline → text at depth 2 (section > stack > text)"
+- "links → repeater at depth 3, items at depth 4"
+
+## IMPORTANT: Do NOT output raw HTML tag node types
+
+Do not invent node types like "main", "nav", "header", "footer", etc.
+Use the allowed node types only (e.g. "section", "div", "headerSection", "footerSection").
+
+## Output Requirements
+
+In your rationale, you MUST list each field and confirm how it is bound:
+- headline → text node at children[0].children[0]
+- description → text node at children[0].children[1]
+- ctaButton → button node at children[0].children[2] (label via links.label, href via props.href + links.resolve)
+
+If a field has no corresponding $bind node, YOUR OUTPUT IS INVALID.
+${contentTypeSection}`;
+}
+async function runPass1(html, css, availableContentTypes, ctx) {
+	ctx.onProgress?.("Pass 1: Extracting fields from HTML/JSX...");
+	let systemPrompt = PASS1_SYSTEM_PROMPT;
+	if (availableContentTypes && availableContentTypes.length > 0) systemPrompt = PASS1_SYSTEM_PROMPT + buildContentTypePromptSection(availableContentTypes);
+	const userMessage = `Analyze this HTML/JSX markup and extract all editable content fields:
+
+\`\`\`html
+${html}
+\`\`\`
+${css ? `\nCSS:\n\`\`\`css\n${css}\n\`\`\`` : ""}
+`;
+	await ctx.debug.writeText("pass1-system-prompt.txt", systemPrompt);
+	await ctx.debug.writeText("pass1-user-message.txt", userMessage);
+	const attempts = [];
+	let lastErrors;
+	for (let attempt = 1; attempt <= ctx.maxRetries; attempt++) {
+		ctx.onProgress?.(`Pass 1 attempt ${attempt}/${ctx.maxRetries}`);
+		try {
+			const attemptUserMessage = lastErrors ? `${userMessage}\n\n⚠️ PREVIOUS ATTEMPT FAILED:\n${lastErrors}\n\nFix these errors and output valid JSON.` : userMessage;
+			const result = await getJsonFromAi(ctx.ai, {
+				model: ctx.model,
+				system: systemPrompt,
+				temperature: ctx.temperature
+			}, attemptUserMessage, pass1OutputSchema);
+			await ctx.debug.writeJson(`pass1-attempt${attempt}-output.json`, result);
+			const fieldErrors = validatePass1FieldDefaults(result);
+			if (fieldErrors.length > 0) {
+				lastErrors = [
+					"## PASS 1 FIELD DEFAULT VALIDATION FAILED",
+					"",
+					...fieldErrors.map((e) => `- ${e}`),
+					"",
+					"### Link field defaultValue rules",
+					"- For type \"link\", defaultValue MUST be an object with a label key:",
+					"  - label: non-empty string (visible link text)",
+					"",
+					"Example:",
+					"{ \"id\": \"cta\", \"type\": \"link\", \"defaultValue\": { \"label\": \"Get Started\" } }"
+				].join("\n");
+				await ctx.debug.writeText(`pass1-attempt${attempt}-errors.txt`, fieldErrors.join("\n"));
+				attempts.push({
+					attempt,
+					validationErrors: fieldErrors,
+					rawOutput: result
+				});
+				continue;
+			}
+			const transformedResult = transformLinkDefaults(result);
+			await ctx.debug.writeJson("pass1-output.json", transformedResult);
+			ctx.onProgress?.(`Pass 1 complete: Found ${transformedResult.fields.length} fields`);
+			return {
+				success: true,
+				data: transformedResult
+			};
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			attempts.push({
+				attempt,
+				validationErrors: [message]
+			});
+			lastErrors = message;
+		}
+	}
+	return {
+		success: false,
+		error: lastErrors ?? "Pass 1 (field extraction) failed: exhausted retries without a valid result.",
+		attempts
+	};
+}
+function validatePass1FieldDefaults(result) {
+	const errors = [];
+	for (const field of result.fields) {
+		if (field.type !== "link") continue;
+		const dv = field.defaultValue;
+		if (!field.required && (dv === null || dv === void 0)) continue;
+		if (!dv || typeof dv !== "object" || Array.isArray(dv)) {
+			errors.push(`Field "${field.id}" (link): defaultValue must be an object like { label: "..." } (got ${typeof dv})`);
+			continue;
+		}
+		const record = dv;
+		const label = typeof record.label === "string" ? record.label.trim() : "";
+		if (label.length === 0) errors.push(`Field "${field.id}" (link): defaultValue must include non-empty label (got label="${label}")`);
+	}
+	return errors;
+}
+/**
+* Transform link field defaultValues from `{ label }` to valid LinkValue shape.
+*
+* Pass 1 can only extract the visible link text from HTML. The HTML hrefs
+* (like `#about`, `#menu`) are meaningless anchors that won't work in the CMS.
+* Link destinations are configured via the CMS link picker, not extracted from HTML.
+*
+* This transforms `{ label: "Our Story" }` to `{ kind: "url", href: "#", label: "Our Story" }`
+* which satisfies validation (href = hasDestination, label = hasLabel) and works at runtime.
+*/
+function transformLinkDefaults(pass1Result) {
+	return {
+		...pass1Result,
+		fields: pass1Result.fields.map((field) => {
+			if (field.type !== "link") return field;
+			const dv = field.defaultValue;
+			if (dv && typeof dv === "object" && ("href" in dv || "kind" in dv)) return field;
+			const label = dv && typeof dv === "object" && "label" in dv ? String(dv.label) : "";
+			return {
+				...field,
+				defaultValue: {
+					kind: "url",
+					href: "#",
+					label
+				}
+			};
+		})
+	};
+}
+/**
+* Transform layout to add missing props.href bindings for link/button nodes.
+*
+* The LLM often forgets to add the props.href binding even when the node's $bind
+* correctly references a link field. This transform automatically adds it.
+*
+* Handles both:
+* - Top-level link fields: content.fieldId
+* - Repeater item link fields: item.fieldId (or custom itemName)
+*/
+function transformMissingLinkHrefs(layout, fields) {
+	const topLevelLinkIds = /* @__PURE__ */ new Set();
+	for (const field of fields) {
+		if (field.type === "link") topLevelLinkIds.add(field.id);
+		if (isGroupField(field)) {
+			for (const nested of field.groupFields) if (nested.type === "link") topLevelLinkIds.add(field.id);
+		}
+	}
+	const repeaterLinkFields = /* @__PURE__ */ new Map();
+	for (const field of fields) if (isRepeaterField(field)) {
+		const linkIds = /* @__PURE__ */ new Set();
+		for (const nested of field.itemFields) if (nested.type === "link") linkIds.add(nested.id);
+		if (linkIds.size > 0) repeaterLinkFields.set(field.id, linkIds);
+	}
+	return transformLayoutNode(layout, topLevelLinkIds, repeaterLinkFields, []);
+}
+/**
+* Check if a binding path resolves to a link field.
+*/
+function isLinkBinding(bindFrom, topLevelLinkIds, repeaterStack) {
+	if (bindFrom.startsWith("content.")) {
+		const fieldId = bindFrom.replace("content.", "").split(".")[0] ?? "";
+		return topLevelLinkIds.has(fieldId);
+	}
+	for (let i = repeaterStack.length - 1; i >= 0; i--) {
+		const ctx = repeaterStack[i];
+		if (!ctx) continue;
+		const prefix = `${ctx.itemName}.`;
+		if (bindFrom.startsWith(prefix)) {
+			const nestedFieldId = bindFrom.slice(prefix.length).split(".")[0] ?? "";
+			return ctx.linkFieldIds.has(nestedFieldId);
+		}
+	}
+	return false;
+}
+function transformLayoutNode(node, topLevelLinkIds, repeaterLinkFields, repeaterStack) {
+	let nextRepeaterStack = repeaterStack;
+	const repeat = node.$repeat;
+	if (repeat?.collection?.from && repeat?.itemName) {
+		const collectionFrom = repeat.collection.from;
+		if (collectionFrom.startsWith("content.")) {
+			const repeaterFieldId = collectionFrom.replace("content.", "").split(".")[0] ?? "";
+			const nestedLinkIds = repeaterLinkFields.get(repeaterFieldId);
+			if (nestedLinkIds && nestedLinkIds.size > 0) nextRepeaterStack = [...repeaterStack, {
+				itemName: repeat.itemName,
+				linkFieldIds: nestedLinkIds
+			}];
+		}
+	}
+	const nodeType = node.type;
+	if (nodeType === "link" || nodeType === "button") {
+		const bind = node.$bind;
+		const bindFrom = typeof bind?.from === "string" ? bind.from : null;
+		if (bindFrom && isLinkBinding(bindFrom, topLevelLinkIds, nextRepeaterStack)) {
+			const props = node.props ?? {};
+			const hrefProp = props.href;
+			if (!(hrefProp && typeof hrefProp === "object" && "$bind" in hrefProp)) {
+				const newProps = {
+					...props,
+					href: { $bind: {
+						from: bindFrom,
+						fallback: null,
+						transforms: [{ id: "links.resolve" }]
+					} }
+				};
+				let newBind = bind;
+				const transforms = Array.isArray(bind?.transforms) ? bind.transforms : [];
+				if (!transforms.some((t) => t && typeof t === "object" && t.id === "links.label")) newBind = {
+					...bind,
+					transforms: [...transforms, { id: "links.label" }]
+				};
+				return {
+					...node,
+					props: newProps,
+					$bind: newBind,
+					children: node.children ? node.children.map((c) => transformLayoutNode(c, topLevelLinkIds, repeaterLinkFields, nextRepeaterStack)) : null
+				};
+			}
+		}
+	}
+	if (node.children && Array.isArray(node.children)) return {
+		...node,
+		children: node.children.map((c) => transformLayoutNode(c, topLevelLinkIds, repeaterLinkFields, nextRepeaterStack))
+	};
+	return node;
+}
+async function runPass2(pass1Result, html, themeSummary, ctx) {
+	ctx.onProgress?.("Pass 2: Generating layout structure...");
+	const systemPrompt = buildPass2SystemPrompt(pass1Result.fields, pass1Result.contentTypeApproach);
+	const baseUserMessage = `Create a layout for this block that displays all the fields.
+DO NOT add any className props or styling. Just structure and $bind.
+
+Original markup (HTML/JSX) for reference:
+\`\`\`html
+${html}
+\`\`\`
+
+Theme context:
+${themeSummary}
+
+Remember: EVERY field must have a node with $bind pointing to it.
+`;
+	await ctx.debug.writeText("pass2-system-prompt.txt", systemPrompt);
+	await ctx.debug.writeText("pass2-user-message.txt", baseUserMessage);
+	const attempts = [];
+	let lastErrors;
+	for (let attempt = 1; attempt <= ctx.maxRetries; attempt++) {
+		ctx.onProgress?.(`Pass 2 attempt ${attempt}/${ctx.maxRetries}`);
+		try {
+			const userMessage = lastErrors ? `${baseUserMessage}\n\n⚠️ PREVIOUS ATTEMPT FAILED:\n${lastErrors}\n\nFix these errors.` : baseUserMessage;
+			const pass2Result = await getJsonFromAi(ctx.ai, {
+				model: ctx.model,
+				system: systemPrompt,
+				temperature: ctx.temperature
+			}, userMessage, pass2OutputSchema);
+			await ctx.debug.writeJson(`pass2-attempt${attempt}-output.json`, pass2Result);
+			await ctx.debug.writeText(`pass2-attempt${attempt}-rationale.txt`, pass2Result.rationale);
+			const transformedLayout = transformMissingLinkHrefs(pass2Result.layout, pass1Result.fields);
+			const maxDepth = getMaxDepth(transformedLayout);
+			const potentialTruncations = detectPotentialTruncation(transformedLayout, 6);
+			await ctx.debug.writeJson(`pass2-attempt${attempt}-depth-analysis.json`, {
+				maxDepth,
+				depthLimit: 6,
+				atLimit: maxDepth >= 6,
+				potentialTruncations
+			});
+			const tempOutput = buildValidationOutput(pass1Result, transformedLayout, null, null);
+			const validationErrors = collectValidationErrors(tempOutput);
+			if (validationErrors.length > 0) {
+				lastErrors = formatValidationFeedback(validationErrors, tempOutput);
+				await ctx.debug.writeText(`pass2-attempt${attempt}-errors.txt`, validationErrors.map((e) => e.message).join("\n\n"));
+				attempts.push({
+					attempt,
+					validationErrors: validationErrors.map((e) => e.message),
+					rawOutput: tempOutput
+				});
+				ctx.onProgress?.(`Pass 2 validation errors: ${validationErrors.length}`);
+				continue;
+			}
+			return {
+				success: true,
+				layout: transformedLayout,
+				attempts
+			};
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			attempts.push({
+				attempt,
+				validationErrors: [message]
+			});
+			if (!message.includes("validation")) return {
+				success: false,
+				error: `Pass 2 (layout generation) failed: ${message}`,
+				attempts
+			};
+			lastErrors = message;
+		}
+	}
+	return {
+		success: false,
+		error: `Pass 2 failed after ${ctx.maxRetries} attempts. Last errors: ${lastErrors || "Unknown"}`,
+		attempts
+	};
+}
+async function runPass3a(layout, html, ctx) {
+	ctx.onProgress?.("Pass 3a: Generating className patches...");
+	const nodeInventory = buildNodeInventory(layout);
+	const systemPrompt = buildPass3aSystemPrompt();
+	const baseUserMessage = buildPass3aUserMessage(layout, html, nodeInventory);
+	await ctx.debug.writeText("pass3a-system-prompt.txt", systemPrompt);
+	await ctx.debug.writeText("pass3a-user-message.txt", baseUserMessage);
+	let lastErrors;
+	for (let attempt = 1; attempt <= ctx.maxRetries; attempt++) {
+		ctx.onProgress?.(`Pass 3a attempt ${attempt}/${ctx.maxRetries}`);
+		try {
+			const userMessage = lastErrors ? `${baseUserMessage}\n\n⚠️ PREVIOUS ATTEMPT FAILED:\n${lastErrors}\n\nFix these errors.` : baseUserMessage;
+			const result = await getJsonFromAi(ctx.ai, {
+				model: ctx.model,
+				system: systemPrompt,
+				temperature: ctx.temperature
+			}, userMessage, pass3aOutputSchema);
+			await ctx.debug.writeJson(`pass3a-attempt${attempt}-output.json`, result);
+			await ctx.debug.writeText(`pass3a-attempt${attempt}-rationale.txt`, result.rationale);
+			const patchErrors = validatePass3aOutput(result, layout);
+			if (patchErrors.length > 0) {
+				lastErrors = `## PATCH VALIDATION FAILED\n\n${patchErrors.map((e) => `- ${e}`).join("\n")}\n\nFix these errors and try again.`;
+				await ctx.debug.writeText(`pass3a-attempt${attempt}-errors.txt`, patchErrors.join("\n"));
+				ctx.onProgress?.(`Pass 3a validation errors: ${patchErrors.length}`);
+				continue;
+			}
+			return {
+				success: true,
+				patches: result
+			};
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			lastErrors = message;
+			await ctx.debug.writeText(`pass3a-attempt${attempt}-error.txt`, message);
+			ctx.onProgress?.(`Pass 3a error: ${message}`);
+		}
+	}
+	return { success: false };
+}
+async function runPass3b(patchedLayout, html, availableClassNames, themeSummary, ctx) {
+	ctx.onProgress?.("Pass 3b: Generating CSS rules...");
+	const systemPrompt = buildPass3bSystemPrompt();
+	const baseUserMessage = buildPass3bUserMessage(patchedLayout, html, availableClassNames, themeSummary);
+	await ctx.debug.writeText("pass3b-system-prompt.txt", systemPrompt);
+	await ctx.debug.writeText("pass3b-user-message.txt", baseUserMessage);
+	let lastErrors;
+	for (let attempt = 1; attempt <= ctx.maxRetries; attempt++) {
+		ctx.onProgress?.(`Pass 3b attempt ${attempt}/${ctx.maxRetries}`);
+		try {
+			const userMessage = lastErrors ? `${baseUserMessage}\n\n⚠️ PREVIOUS ATTEMPT FAILED:\n${lastErrors}\n\nFix these errors.` : baseUserMessage;
+			const result = await getJsonFromAi(ctx.ai, {
+				model: ctx.model,
+				system: systemPrompt,
+				temperature: ctx.temperature
+			}, userMessage, pass3bOutputSchema);
+			await ctx.debug.writeJson(`pass3b-attempt${attempt}-output.json`, result);
+			await ctx.debug.writeText(`pass3b-attempt${attempt}-rationale.txt`, result.rationale);
+			const cssErrors = validatePass3bOutput(result, new Set(availableClassNames));
+			if (cssErrors.length > 0) {
+				lastErrors = `## CSS VALIDATION FAILED\n\n${cssErrors.map((e) => `- ${e}`).join("\n")}\n\nFix these errors and try again. Remember:\n- Use ONLY the classNames listed in AVAILABLE CLASSNAMES\n- Do NOT include [data-block=...] in selectors`;
+				await ctx.debug.writeText(`pass3b-attempt${attempt}-errors.txt`, cssErrors.join("\n"));
+				ctx.onProgress?.(`Pass 3b validation errors: ${cssErrors.length}`);
+				continue;
+			}
+			return {
+				success: true,
+				rules: result
+			};
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unknown error";
+			lastErrors = message;
+			await ctx.debug.writeText(`pass3b-attempt${attempt}-error.txt`, message);
+			ctx.onProgress?.(`Pass 3b error: ${message}`);
+		}
+	}
+	return { success: false };
+}
+/** Build validation output structure from pass results */
+function buildValidationOutput(pass1Result, layout, customCssRules, customCssAtRules) {
+	return {
+		blocks: [{
+			id: pass1Result.blockId,
+			title: pass1Result.blockTitle,
+			titleSource: null,
+			description: pass1Result.blockDescription,
+			category: pass1Result.category,
+			icon: "layout",
+			tags: null,
+			fields: pass1Result.fields.map(mapPass1FieldToOutputField),
+			layout
+		}],
+		themePatch: null,
+		customCssRules,
+		customCssAtRules,
+		fixRationale: null
+	};
+}
+/**
+* Build dataLoaders config for a content type.
+* Used when the LLM decides to create content entries.
+* @param _contentTypeKey - The content type key (unused, as loader binds dynamically to content.contentType)
+*/
+function buildDataLoadersForContentType(_contentTypeKey) {
+	return { entries: {
+		endpoint: "listPublishedEntries",
+		params: {
+			type: { $bind: { from: "content.contentType" } },
+			siteId: { $bind: { from: "$root.siteId" } },
+			stage: { $bind: {
+				from: "$root.previewStage",
+				fallback: "published"
+			} }
+		}
+	} };
+}
+/**
+* Extract entries and content types from the content type approach.
+*/
+function extractEntriesFromApproach(approach) {
+	if (!approach) return {
+		entries: void 0,
+		contentTypes: void 0,
+		contentTypeKey: void 0
+	};
+	if (approach.approach === "existingContentType") return {
+		entries: approach.entries.map((e) => ({
+			identifier: e.identifier,
+			contentType: approach.contentTypeKey,
+			title: e.title,
+			data: e.data,
+			status: "draft"
+		})),
+		contentTypes: void 0,
+		contentTypeKey: approach.contentTypeKey
+	};
+	if (approach.approach === "newContentType") return {
+		entries: approach.entries.map((e) => ({
+			identifier: e.identifier,
+			contentType: approach.contentType.key,
+			title: e.title,
+			data: e.data,
+			status: "draft"
+		})),
+		contentTypes: [{
+			key: approach.contentType.key,
+			name: approach.contentType.name,
+			description: approach.contentType.description ?? void 0,
+			fields: approach.contentType.fields.map((f) => ({
+				id: f.id,
+				type: f.type,
+				label: f.label,
+				required: f.required ?? void 0,
+				description: f.description ?? void 0
+			})),
+			isRouted: approach.contentType.isRouted
+		}],
+		contentTypeKey: approach.contentType.key
+	};
+	return {
+		entries: void 0,
+		contentTypes: void 0,
+		contentTypeKey: void 0
+	};
+}
+/** Build final output structure */
+function buildFinalOutput(pass1Result, layout, scopedRules) {
+	const normalizedLayout = normalizeLlmLayoutToRuntimeNode(layout);
+	const { entries, contentTypes, contentTypeKey } = extractEntriesFromApproach(pass1Result.contentTypeApproach);
+	const block = {
+		id: pass1Result.blockId,
+		title: pass1Result.blockTitle,
+		description: pass1Result.blockDescription ?? void 0,
+		category: pass1Result.category,
+		icon: "layout",
+		fields: pass1Result.fields.map(mapPass1FieldToSimpleOutput),
+		layout: normalizedLayout
+	};
+	if (contentTypeKey) Object.assign(block, { dataLoaders: buildDataLoadersForContentType(contentTypeKey) });
+	return {
+		blocks: [block],
+		customCssRules: scopedRules?.customCssRules ?? void 0,
+		customCssAtRules: scopedRules?.customCssAtRules ?? void 0,
+		entries,
+		contentTypes
+	};
+}
+function normalizeLlmBindingToRuntimeBinding(binding) {
+	const normalized = { from: binding.from };
+	if (binding.fallback !== null && binding.fallback !== void 0) normalized.fallback = binding.fallback;
+	if (Array.isArray(binding.transforms)) normalized.transforms = binding.transforms.map((t) => ({ id: t.id }));
+	return normalized;
+}
+/**
+* Convert the converter's LLM-friendly node shape (nullable keys)
+* into the runtime NodeDefinition shape used by sdkCustomBlockSchema / PageRenderer.
+*/
+function normalizeLlmLayoutToRuntimeNode(raw) {
+	const node = raw;
+	const normalized = { type: node.type };
+	if (node.props && Object.keys(node.props).length > 0) normalized.props = node.props;
+	if (Array.isArray(node.children) && node.children.length > 0) normalized.children = node.children.map((child) => normalizeLlmLayoutToRuntimeNode(child));
+	if (node.$bind) normalized.$bind = normalizeLlmBindingToRuntimeBinding(node.$bind);
+	if (node.$repeat) normalized.$repeat = {
+		collection: { from: node.$repeat.collection.from },
+		itemName: node.$repeat.itemName
+	};
+	if (node.$when) normalized.$when = { when: { from: node.$when.condition.from } };
+	return normalized;
+}
+async function convertHtmlToManifest(input, options) {
+	const { ai, maxRetries = 3, model = DEFAULT_MANIFEST_MODEL, temperature = .2, onProgress, debugDir } = options;
+	const { html, css, theme, availableContentTypes } = input;
+	const debug = createDebugWriter(debugDir);
+	const ctx = {
+		ai,
+		model,
+		temperature,
+		maxRetries,
+		debug,
+		onProgress
+	};
+	const themeSummary = formatThemeSummaryForPrompt(summarizeThemeForLLM(theme));
+	const pass1 = await runPass1(html, css, availableContentTypes, ctx);
+	if (!pass1.success) return {
+		success: false,
+		error: pass1.error,
+		attempts: pass1.attempts
+	};
+	const pass1Result = pass1.data;
+	const pass2 = await runPass2(pass1Result, html, themeSummary, ctx);
+	if (!pass2.success) return {
+		success: false,
+		error: pass2.error,
+		attempts: pass2.attempts
+	};
+	const pass2Layout = pass2.layout;
+	const pass3a = await runPass3a(pass2Layout, html, ctx);
+	if (!pass3a.success || pass3a.patches.classNamePatches.length === 0) {
+		onProgress?.("Pass 3a failed or produced no patches, returning unstyled layout");
+		await debug.writeText("pass3-fallback.txt", "Pass 3a (className patches) failed or produced no patches. Returning unstyled layout from Pass 2.");
+		const finalOutput = buildFinalOutput(pass1Result, pass2Layout, null);
+		await debug.writeJson("final-output.json", finalOutput);
+		return {
+			success: true,
+			output: finalOutput,
+			attempts: pass2.attempts.length + 1
+		};
+	}
+	onProgress?.("Applying className patches to layout...");
+	let patchedLayout;
+	try {
+		patchedLayout = applyClassNamePatches(pass2Layout, pass3a.patches.classNamePatches);
+		await debug.writeJson("pass3-patched-layout.json", patchedLayout);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : "Unknown error";
+		onProgress?.(`Failed to apply patches: ${message}`);
+		await debug.writeText("pass3-fallback.txt", `Failed to apply patches: ${message}`);
+		const finalOutput = buildFinalOutput(pass1Result, pass2Layout, null);
+		await debug.writeJson("final-output.json", finalOutput);
+		return {
+			success: true,
+			output: finalOutput,
+			attempts: pass2.attempts.length + 1
+		};
+	}
+	const availableClassNames = Array.from(collectLayoutClassNames(patchedLayout));
+	const pass3b = await runPass3b(patchedLayout, html, availableClassNames, themeSummary, ctx);
+	let scopedRules = null;
+	if (pass3b.success) {
+		scopedRules = scopeAndNormalizeRules(pass1Result.blockId, pass3b.rules);
+		await debug.writeJson("pass3b-scoped-rules.json", scopedRules);
+	} else {
+		onProgress?.("Pass 3b failed, returning layout with classNames but no CSS rules");
+		await debug.writeText("pass3b-fallback.txt", "Pass 3b (CSS rules) failed. Returning layout with classNames but no CSS rules.");
+	}
+	onProgress?.("Running final validation...");
+	const finalValidationErrors = collectValidationErrors(buildValidationOutput(pass1Result, patchedLayout, scopedRules?.customCssRules ?? null, scopedRules?.customCssAtRules ?? null));
+	if (finalValidationErrors.length > 0) {
+		await debug.writeText("final-validation-warnings.txt", finalValidationErrors.map((e) => e.message).join("\n\n"));
+		onProgress?.(`Final validation warnings: ${finalValidationErrors.length}`);
+	}
+	const finalOutput = buildFinalOutput(pass1Result, patchedLayout, scopedRules);
+	await debug.writeJson("final-output.json", finalOutput);
+	onProgress?.("Conversion complete!");
+	return {
+		success: true,
+		output: finalOutput,
+		attempts: pass2.attempts.length + 1
+	};
+}
+/**
+* Validate HTML-to-manifest output structure.
+*
+* Can be used to validate output loaded from a file or
+* generated by another tool.
+*
+* @example
+* ```typescript
+* const { valid, errors } = validateManifestOutput(jsonData);
+* if (!valid) {
+*   console.error('Invalid manifest:', errors);
+* }
+* ```
+*/
+function validateManifestOutput(data) {
+	const parseResult = htmlToManifestOutputSchema.safeParse(data);
+	if (!parseResult.success) return {
+		valid: false,
+		errors: parseResult.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`)
+	};
+	const validationErrors = collectValidationErrors(parseResult.data);
+	if (validationErrors.length > 0) return {
+		valid: false,
+		errors: validationErrors.map((e) => e.message)
+	};
+	return {
+		valid: true,
+		output: parseResult.data
+	};
+}
+//#endregion
+//#region src/manifest/prompt/knowledge-base.ts
+/**
+* LLM Knowledge Base for HTML-to-Manifest Conversion
+*
+* Contains reference material for the LLM including:
+* - Allowed node types and their usage
+* - Transform functions and their purposes
+* - Field type inference rules
+* - Styling decision tree
+* - Block boundary heuristics
+*/
+/**
+* Documentation for each allowed node type.
+*/
+const NODE_TYPE_DOCS = {
+	div: "Generic container for grouping elements",
+	figure: "Container for media with optional caption",
+	section: "Full-width section with optional background and padding",
+	headerSection: "Section styled as a site header",
+	stack: "Vertical flex container (gap between children)",
+	inline: "Horizontal flex container (items in a row)",
+	grid: "CSS grid container",
+	text: "Text element (headings, paragraphs, spans). Use props.as for semantic tag (h1-h6, p, span)",
+	richText: "Rich text content (paragraphs with formatting)",
+	media: "Image or video element. Binds to media field type",
+	videoEmbed: "Embedded video (YouTube, Vimeo)",
+	button: "Button element with variant styling (label comes from node $bind; href comes from props.href)",
+	link: "Link element (label from node $bind; href from props.href)",
+	carousel: "Image/content carousel",
+	accordion: "Accordion container",
+	accordionItem: "Single accordion panel",
+	form: "Contact/submission form",
+	"booking-form": "Booking/appointment form",
+	"event-registration": "Event registration form",
+	"event-spotlight": "Featured event display",
+	"event-listing": "Event listing grid",
+	"event-calendar": "Calendar view of events",
+	"event-combined": "Combined event display",
+	shop: "E-commerce shop component"
+};
+/**
+* Generate node types documentation string for the system prompt.
+*
+* Lists all allowed node types grouped by category with descriptions.
+*
+* @returns Formatted markdown documentation for node types
+*/
+function getNodeTypesReference() {
+	return [
+		"## Allowed Node Types",
+		"",
+		"Use these node types in the layout tree. Each node has a `type` property.",
+		"",
+		"### Layout Containers",
+		...filterNodeDocs([
+			"div",
+			"figure",
+			"section",
+			"headerSection",
+			"stack",
+			"inline",
+			"grid"
+		]),
+		"",
+		"### Content Nodes",
+		...filterNodeDocs([
+			"text",
+			"richText",
+			"media",
+			"videoEmbed"
+		]),
+		"",
+		"### Interactive Nodes",
+		...filterNodeDocs([
+			"button",
+			"link",
+			"carousel",
+			"accordion",
+			"accordionItem"
+		]),
+		"",
+		"Full list of allowed types: " + ALLOWED_NODE_TYPES.join(", ")
+	].join("\n");
+}
+function filterNodeDocs(types) {
+	return types.filter((t) => NODE_TYPE_DOCS[t]).map((t) => `- **${t}**: ${NODE_TYPE_DOCS[t] ?? ""}`);
+}
+/**
+* Documentation for commonly used transforms.
+*/
+const TRANSFORM_DOCS = {
+	"string.uppercase": "Convert string to uppercase",
+	"value.fallback": "Provide fallback value if binding is empty. Options: { fallback: \"default\" }",
+	"date.formatShort": "Format date as short string",
+	"array.length": "Get length of array",
+	"value.jsonArray": "Parse JSON array string",
+	"layout.maxWidthClass": "Get max-width CSS class based on layout setting",
+	"background.resolveStyle": "Resolve background field to CSS styles",
+	"background.resolveClass": "Resolve background field to CSS classes",
+	"links.resolve": "Resolve link objects (LinkValue or {href}) to href strings using the route map",
+	"links.label": "Extract a human-readable label from link objects (label/title/identifier/href)",
+	"media.fromUrl": "Create media object from URL string",
+	"boxStyles.resolveRootClass": "Get root element class from box styles",
+	"boxStyles.resolveRootStyle": "Get root element style from box styles"
+};
+/**
+* Generate transforms documentation string for the system prompt.
+*
+* Lists allowed transform IDs with descriptions and example usage.
+*
+* @returns Formatted markdown documentation for transforms
+*/
+function getTransformsReference() {
+	return [
+		"## Available Transforms",
+		"",
+		"Use transforms in $bind to modify values. Example:",
+		"```json",
+		"{",
+		"  \"$bind\": {",
+		"    \"from\": \"content.title\",",
+		"    \"transforms\": [{ \"id\": \"string.uppercase\" }]",
+		"  }",
+		"}",
+		"```",
+		"",
+		"### Common Transforms",
+		...Object.entries(TRANSFORM_DOCS).map(([id, desc]) => `- **${id}**: ${desc}`),
+		"",
+		"Full list of allowed transforms: " + ALLOWED_TRANSFORM_IDS.slice(0, 15).join(", ") + "..."
+	].join("\n");
+}
+const FIELD_TYPE_INFERENCE = `
+## Field Type Inference Rules
+
+When extracting editable content from HTML, choose field types as follows:
+
+1. **text** (single-line string):
+   - Short headings, labels, button text (<100 chars, no block elements)
+   - Example: <h1>Welcome</h1> → field type: text
+
+2. **richText** (formatted content):
+   - Paragraphs, descriptions, content with <p>, <ul>, <em>, <strong>
+   - Example: <p>Our <strong>mission</strong> is...</p> → field type: richText
+
+3. **media** (images/videos):
+   - <img>, <video>, <picture> elements with src attributes
+   - Example: <img src="hero.jpg"> → field type: media
+
+4. **link** (navigation/buttons):
+   - <a> elements with href, or buttons that navigate
+   - defaultValue should be an object containing both href and label
+   - Example: <a href="/contact">Contact</a> → field type: link, defaultValue: { href: "/contact", label: "Contact" }
+
+5. **repeater** (repeated content):
+   - 3+ similar sibling elements (cards, testimonials, features)
+   - Example: Multiple <div class="card">...</div> → repeater with schema
+
+6. **group** (related fields):
+   - Logically related fields (e.g., author name + avatar)
+   - Use to organize complex content
+
+7. **boolean** (toggles):
+   - Show/hide states (isVisible, showButton)
+
+8. **select** (predefined options):
+   - When content appears to be one of N options
+   - Define options array with value/label
+`;
+const STYLING_DECISION_TREE = `
+## Styling Decision Tree
+
+When converting styles from HTML/Tailwind to the manifest, follow this priority:
+
+1. **Theme Token Match** (highest priority):
+   Does a theme token exist for this exact style?
+   → YES: Use token reference in props (e.g., background: 'primary')
+
+   Common token mappings:
+   - bg-blue-600 → background: 'primary' (if primary is blue)
+   - text-gray-900 → color: 'foreground'
+   - rounded-lg → uses theme.corners setting
+
+2. **Close Token Match**:
+   Is the style close to an existing token?
+   → YES: Use the token (minor variations are acceptable)
+
+3. **Site-wide Addition** (themePatch):
+   Is this a one-off value that should apply site-wide?
+   → YES: Add to themePatch array
+
+   Example: New accent color for the whole site
+   { "op": "add", "path": "/palette/colors/-", "value": { "name": "coral", "hex": "#ff6b6b" } }
+
+4. **Block-specific CSS** (customCssRules):
+   Is this specific to this block only?
+   → YES: Add to customCssRules
+
+   Example: Custom animation for hero section
+   1) Add a className to a node you want to target:
+      { "type": "text", "props": { "className": "hero-title" }, "children": null, "$bind": { "from": "content.title", "fallback": null, "transforms": null }, "$repeat": null, "$when": null }
+
+   2) Scope CSS to the block and target that class:
+      {
+        "id": "hero-pulse",
+        "selector": "[data-block=\"custom.hero\"] .hero-title",
+        "declarations": [{ "property": "animation", "value": "pulse 2s infinite" }]
+      }
+
+5. **Field Parameterization**:
+   Can the style be controlled by the user?
+   → YES: Add a field and use $bind with transform
+
+6. **Inline Styles** (last resort):
+   None of the above?
+   → Use inline styles in node props
+
+   Example: props: { style: { marginTop: '2rem' } }
+`;
+const BLOCK_BOUNDARY_HEURISTICS = `
+## Block Boundary Heuristics
+
+When converting a page with multiple sections, decide whether to create one block or multiple:
+
+### SPLIT into separate blocks when:
+- **Visual separation**: Full-width background color changes
+- **Semantic sections**: <section>, <header>, <footer> tags
+- **Reusable patterns**: Testimonials, pricing cards, feature grids
+- **Different purposes**: Hero vs features vs CTA
+- **Major spacing**: py-16+ or 4rem+ vertical padding between sections
+
+### KEEP as single block when:
+- **Tightly coupled**: Heading with its immediate description
+- **Small content**: <5 editable elements total
+- **No clear boundaries**: Content flows together naturally
+- **Context dependency**: Splitting would lose important context
+
+### Block ID Naming:
+- Use descriptive names: custom.hero, custom.features-grid, custom.testimonials
+- Keep lowercase with hyphens: custom.pricing-cards (not custom.pricingCards)
+`;
+const BINDING_SYNTAX = `
+## Binding Syntax
+
+**CRITICAL: $bind connects layout nodes to field data. Without it, nodes display nothing.**
+
+Connect layout nodes to field content using $bind:
+
+### Basic Binding
+\`\`\`json
+{
+  "type": "text",
+  "props": { "as": "h1" },
+  "$bind": { "from": "content.headline" }
+}
+\`\`\`
+
+### Binding with Fallback
+\`\`\`json
+{
+  "$bind": {
+    "from": "content.subtitle",
+    "fallback": "Default subtitle text"
+  }
+}
+\`\`\`
+
+### Binding with Transform
+\`\`\`json
+{
+  "$bind": {
+    "from": "content.title",
+    "transforms": [{ "id": "string.uppercase" }]
+  }
+}
+\`\`\`
+
+### Binding in Props
+\`\`\`json
+{
+  "type": "text",
+  "props": {
+    "as": "h1",
+    "className": {
+      "$bind": {
+        "from": "content.alignment",
+        "fallback": null,
+        "transforms": [{ "id": "ui.headingClassFromAlignment" }]
+      }
+    }
+  },
+  "children": null,
+  "$bind": { "from": "content.headline", "fallback": null, "transforms": null },
+  "$repeat": null,
+  "$when": null
+}
+\`\`\`
+
+### Repeating Content
+\`\`\`json
+{
+  "type": "grid",
+  "props": null,
+  "$repeat": {
+    "collection": { "from": "content.features" },
+    "itemName": "feature"
+  },
+  "children": [
+    {
+      "type": "text",
+      "props": null,
+      "children": null,
+      "$bind": { "from": "feature.title", "fallback": null, "transforms": null },
+      "$repeat": null,
+      "$when": null
+    }
+  ],
+  "$bind": null,
+  "$when": null
+}
+\`\`\`
+`;
+/**
+* Get the complete knowledge base for the system prompt.
+*
+* Combines all reference documentation including node types, transforms,
+* field inference rules, styling decision tree, and binding syntax.
+*
+* @returns Complete knowledge base as a formatted markdown string
+*/
+function getKnowledgeBase() {
+	return [
+		getNodeTypesReference(),
+		"",
+		getTransformsReference(),
+		"",
+		FIELD_TYPE_INFERENCE,
+		"",
+		STYLING_DECISION_TREE,
+		"",
+		BLOCK_BOUNDARY_HEURISTICS,
+		"",
+		BINDING_SYNTAX
+	].join("\n");
+}
+//#endregion
+//#region src/manifest/prompt/examples/hero.ts
+const heroExample = {
+	name: "Hero Section",
+	description: "A classic hero section with centered text and call-to-action button.",
+	html: `<section class="bg-blue-900 py-24 text-center text-white">
+  <div class="container mx-auto px-4">
+    <h1 class="text-5xl font-bold mb-4">Welcome to Our Platform</h1>
+    <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+      Build amazing products with our powerful tools and dedicated support.
+    </p>
+    <a href="/get-started" class="inline-block bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50">
+      Get Started
+    </a>
+  </div>
+</section>`,
+	output: { blocks: [{
+		id: "custom.hero",
+		title: "Hero Section",
+		description: "Centered hero with headline, description, and CTA",
+		category: "marketing",
+		icon: "layout",
+		tags: [
+			"hero",
+			"landing",
+			"cta"
+		],
+		fields: [
+			{
+				id: "headline",
+				type: "text",
+				label: "Headline",
+				required: true,
+				multiline: false,
+				defaultValue: "Welcome to Our Platform"
+			},
+			{
+				id: "description",
+				type: "text",
+				label: "Description",
+				required: false,
+				multiline: true,
+				defaultValue: "Build amazing products with our powerful tools and dedicated support."
+			},
+			{
+				id: "cta",
+				type: "link",
+				label: "Call to Action",
+				required: false
+			}
+		],
+		layout: {
+			type: "section",
+			props: {
+				background: "primary",
+				textColor: "white",
+				className: "text-center py-24"
+			},
+			children: [{
+				type: "stack",
+				props: {
+					align: "center",
+					gap: "lg"
+				},
+				children: [
+					{
+						type: "text",
+						props: {
+							as: "h1",
+							className: "text-5xl font-bold"
+						},
+						children: null,
+						$bind: {
+							from: "content.headline",
+							fallback: null,
+							transforms: null
+						},
+						$repeat: null,
+						$when: null
+					},
+					{
+						type: "text",
+						props: {
+							as: "p",
+							className: "text-xl opacity-80 max-w-2xl"
+						},
+						children: null,
+						$bind: {
+							from: "content.description",
+							fallback: null,
+							transforms: null
+						},
+						$repeat: null,
+						$when: null
+					},
+					{
+						type: "button",
+						props: {
+							variant: "secondary",
+							size: "lg",
+							href: { $bind: {
+								from: "content.cta",
+								fallback: null,
+								transforms: [{ id: "links.resolve" }]
+							} }
+						},
+						children: null,
+						$bind: {
+							from: "content.cta",
+							fallback: null,
+							transforms: [{ id: "links.label" }]
+						},
+						$repeat: null,
+						$when: null
+					}
+				],
+				$bind: null,
+				$repeat: null,
+				$when: null
+			}],
+			$bind: null,
+			$repeat: null,
+			$when: null
+		}
+	}] },
+	explanation: `
+	KEY POINTS:
+	- EVERY text node has $bind connecting it to a field (headline, description)
+	- CTA button binds label via links.label and href via props.href + links.resolve (cta)
+	- Container nodes (section, stack) do NOT have $bind
+	- All nullable fields are explicitly included (children: null, $repeat: null, $when: null)
+
+Styling:
+- bg-blue-900 mapped to 'primary' background token
+- text-white mapped to textColor: 'white'
+- Layout uses section > stack for vertical centering`
+};
+//#endregion
+//#region src/manifest/prompt/examples/features-grid.ts
+const featuresGridExample = {
+	name: "Features Grid",
+	description: "A grid of feature cards with icons, title, and description.",
+	html: `<section class="py-16 bg-gray-50">
+  <div class="container mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-12">Why Choose Us</h2>
+    <div class="grid md:grid-cols-3 gap-8">
+      <div class="bg-white p-6 rounded-lg shadow-sm">
+        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-blue-600"><!-- icon --></svg>
+        </div>
+        <h3 class="text-xl font-semibold mb-2">Fast Performance</h3>
+        <p class="text-gray-600">Lightning-fast load times and optimized delivery.</p>
+      </div>
+      <div class="bg-white p-6 rounded-lg shadow-sm">
+        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-blue-600"><!-- icon --></svg>
+        </div>
+        <h3 class="text-xl font-semibold mb-2">Secure by Default</h3>
+        <p class="text-gray-600">Enterprise-grade security built into every layer.</p>
+      </div>
+      <div class="bg-white p-6 rounded-lg shadow-sm">
+        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+          <svg class="w-6 h-6 text-blue-600"><!-- icon --></svg>
+        </div>
+        <h3 class="text-xl font-semibold mb-2">24/7 Support</h3>
+        <p class="text-gray-600">Our team is always here to help you succeed.</p>
+      </div>
+    </div>
+  </div>
+</section>`,
+	output: { blocks: [{
+		id: "custom.features-grid",
+		title: "Features Grid",
+		description: "Grid of feature cards with icons",
+		category: "marketing",
+		icon: "grid",
+		tags: [
+			"features",
+			"grid",
+			"cards"
+		],
+		fields: [{
+			id: "sectionTitle",
+			type: "text",
+			label: "Section Title",
+			required: true,
+			multiline: false,
+			defaultValue: "Why Choose Us"
+		}, {
+			id: "features",
+			type: "repeater",
+			label: "Features",
+			required: true,
+			itemLabel: "Feature",
+			minItems: 1,
+			maxItems: 12,
+			allowConversion: false,
+			schema: { fields: [
+				{
+					id: "icon",
+					type: "text",
+					label: "Icon",
+					required: false,
+					multiline: false,
+					ui: { placeholder: "Lucide icon name (e.g., zap, shield, headphones)" }
+				},
+				{
+					id: "title",
+					type: "text",
+					label: "Title",
+					required: true,
+					multiline: false
+				},
+				{
+					id: "description",
+					type: "text",
+					label: "Description",
+					required: false,
+					multiline: true
+				}
+			] }
+		}],
+		layout: {
+			type: "section",
+			props: {
+				background: "surface",
+				className: "py-16"
+			},
+			children: [{
+				type: "stack",
+				props: { gap: "xl" },
+				children: [{
+					type: "text",
+					props: {
+						as: "h2",
+						className: "text-3xl font-bold text-center"
+					},
+					$bind: { from: "content.sectionTitle" }
+				}, {
+					type: "grid",
+					props: {
+						columns: 3,
+						gap: "lg"
+					},
+					$repeat: {
+						collection: { from: "content.features" },
+						itemName: "feature"
+					},
+					children: [{
+						type: "div",
+						props: { className: "bg-white p-6 rounded-lg shadow-sm" },
+						children: [{
+							type: "stack",
+							props: { gap: "md" },
+							children: [
+								{
+									type: "div",
+									props: { className: "w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center" },
+									children: [{
+										type: "text",
+										props: { className: "text-primary" },
+										$bind: { from: "feature.icon" }
+									}]
+								},
+								{
+									type: "text",
+									props: {
+										as: "h3",
+										className: "text-xl font-semibold"
+									},
+									$bind: { from: "feature.title" }
+								},
+								{
+									type: "text",
+									props: { className: "text-muted" },
+									$bind: { from: "feature.description" }
+								}
+							]
+						}]
+					}]
+				}]
+			}]
+		}
+	}] },
+	explanation: `
+- Repeating cards detected (3+ similar elements) → repeater field
+- Each card has icon, title, description → schema.fields
+- $repeat used to iterate over features array
+- Grid layout with columns: 3 for responsive grid
+- bg-gray-50 mapped to 'surface' token
+- text-gray-600 mapped to 'muted' token
+- Icon placeholder uses Lucide icon names`
+};
+//#endregion
+//#region src/manifest/prompt/examples/testimonials.ts
+const testimonialsExample = {
+	name: "Testimonials",
+	description: "Customer testimonials with quotes, author info, and photos.",
+	html: `<section class="py-20 bg-white">
+  <div class="container mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-4">What Our Customers Say</h2>
+    <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+      Don't just take our word for it. Here's what our customers have to say.
+    </p>
+    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div class="bg-gray-50 p-8 rounded-xl">
+        <p class="text-gray-700 mb-6 italic">
+          "This platform has completely transformed how we work. The results speak for themselves."
+        </p>
+        <div class="flex items-center gap-4">
+          <img src="/avatars/sarah.jpg" alt="Sarah" class="w-12 h-12 rounded-full">
+          <div>
+            <p class="font-semibold">Sarah Johnson</p>
+            <p class="text-sm text-gray-500">CEO, TechCorp</p>
+          </div>
+        </div>
+      </div>
+      <!-- More testimonials... -->
+    </div>
+  </div>
+</section>`,
+	output: { blocks: [{
+		id: "custom.testimonials",
+		title: "Testimonials",
+		description: "Customer testimonials with quotes and author info",
+		category: "marketing",
+		icon: "quote",
+		tags: [
+			"testimonials",
+			"reviews",
+			"social-proof"
+		],
+		fields: [
+			{
+				id: "sectionTitle",
+				type: "text",
+				label: "Section Title",
+				required: true,
+				multiline: false,
+				defaultValue: "What Our Customers Say"
+			},
+			{
+				id: "sectionDescription",
+				type: "text",
+				label: "Section Description",
+				required: false,
+				multiline: true
+			},
+			{
+				id: "testimonials",
+				type: "repeater",
+				label: "Testimonials",
+				required: true,
+				itemLabel: "Testimonial",
+				itemLabelSource: "name",
+				minItems: 1,
+				maxItems: 9,
+				allowConversion: false,
+				schema: { fields: [
+					{
+						id: "quote",
+						type: "text",
+						label: "Quote",
+						required: true,
+						multiline: true
+					},
+					{
+						id: "avatar",
+						type: "media",
+						label: "Photo",
+						required: false,
+						mediaKinds: ["image"]
+					},
+					{
+						id: "name",
+						type: "text",
+						label: "Name",
+						required: true,
+						multiline: false
+					},
+					{
+						id: "role",
+						type: "text",
+						label: "Role / Company",
+						required: false,
+						multiline: false
+					}
+				] }
+			}
+		],
+		layout: {
+			type: "section",
+			props: { className: "py-20" },
+			children: [{
+				type: "stack",
+				props: {
+					gap: "xl",
+					align: "center"
+				},
+				children: [{
+					type: "stack",
+					props: {
+						gap: "md",
+						align: "center",
+						className: "max-w-2xl text-center"
+					},
+					children: [{
+						type: "text",
+						props: {
+							as: "h2",
+							className: "text-3xl font-bold"
+						},
+						$bind: { from: "content.sectionTitle" }
+					}, {
+						type: "text",
+						props: { className: "text-muted" },
+						$bind: { from: "content.sectionDescription" }
+					}]
+				}, {
+					type: "grid",
+					props: {
+						columns: 3,
+						gap: "lg"
+					},
+					$repeat: {
+						collection: { from: "content.testimonials" },
+						itemName: "testimonial"
+					},
+					children: [{
+						type: "div",
+						props: { className: "bg-surface p-8 rounded-xl" },
+						children: [{
+							type: "stack",
+							props: { gap: "lg" },
+							children: [{
+								type: "text",
+								props: { className: "italic" },
+								$bind: { from: "testimonial.quote" }
+							}, {
+								type: "inline",
+								props: {
+									gap: "md",
+									align: "center"
+								},
+								children: [{
+									type: "media",
+									props: { className: "w-12 h-12 rounded-full" },
+									$bind: { from: "testimonial.avatar" }
+								}, {
+									type: "stack",
+									props: { gap: "xs" },
+									children: [{
+										type: "text",
+										props: { className: "font-semibold" },
+										$bind: { from: "testimonial.name" }
+									}, {
+										type: "text",
+										props: { className: "text-sm text-muted" },
+										$bind: { from: "testimonial.role" }
+									}]
+								}]
+							}]
+						}]
+					}]
+				}]
+			}]
+		}
+	}] },
+	explanation: `
+- Testimonials repeater with quote, avatar, name, role fields
+- itemLabelSource: 'name' shows customer name in editor list
+- Avatar uses media field with mediaKinds: ['image']
+- Quote uses multiline text (longer content)
+- bg-gray-50 cards mapped to 'surface' token
+- Author info grouped with inline layout
+- rounded-full for circular avatar styling`
+};
+//#endregion
+//#region src/manifest/prompt/examples/pricing.ts
+const pricingExample = {
+	name: "Pricing Cards",
+	description: "Pricing tier cards with features list and CTA buttons.",
+	html: `<section class="py-20 bg-gray-100">
+  <div class="container mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-4">Simple, Transparent Pricing</h2>
+    <p class="text-gray-600 text-center mb-12">Choose the plan that works for you</p>
+    <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+      <div class="bg-white rounded-2xl p-8 shadow-sm">
+        <h3 class="text-xl font-semibold mb-2">Starter</h3>
+        <div class="text-4xl font-bold mb-4">$9<span class="text-lg text-gray-500">/mo</span></div>
+        <ul class="space-y-3 mb-8">
+          <li class="flex items-center gap-2">
+            <svg class="w-5 h-5 text-green-500"><!-- check --></svg>
+            <span>5 projects</span>
+          </li>
+          <li class="flex items-center gap-2">
+            <svg class="w-5 h-5 text-green-500"><!-- check --></svg>
+            <span>Basic analytics</span>
+          </li>
+        </ul>
+        <a href="/signup?plan=starter" class="block w-full text-center bg-gray-900 text-white py-3 rounded-lg">
+          Get Started
+        </a>
+      </div>
+      <!-- More pricing tiers... -->
+    </div>
+  </div>
+</section>`,
+	output: { blocks: [{
+		id: "custom.pricing",
+		title: "Pricing Cards",
+		description: "Pricing tiers with features and CTA",
+		category: "marketing",
+		icon: "credit-card",
+		tags: [
+			"pricing",
+			"plans",
+			"subscription"
+		],
+		fields: [
+			{
+				id: "sectionTitle",
+				type: "text",
+				label: "Section Title",
+				required: true,
+				multiline: false,
+				defaultValue: "Simple, Transparent Pricing"
+			},
+			{
+				id: "sectionSubtitle",
+				type: "text",
+				label: "Section Subtitle",
+				required: false,
+				multiline: false
+			},
+			{
+				id: "plans",
+				type: "repeater",
+				label: "Pricing Plans",
+				required: true,
+				itemLabel: "Plan",
+				itemLabelSource: "name",
+				minItems: 1,
+				maxItems: 5,
+				allowConversion: false,
+				schema: { fields: [
+					{
+						id: "name",
+						type: "text",
+						label: "Plan Name",
+						required: true,
+						multiline: false
+					},
+					{
+						id: "price",
+						type: "text",
+						label: "Price",
+						required: true,
+						multiline: false,
+						ui: { placeholder: "e.g., $9" }
+					},
+					{
+						id: "period",
+						type: "text",
+						label: "Period",
+						required: false,
+						multiline: false,
+						defaultValue: "/mo"
+					},
+					{
+						id: "isHighlighted",
+						type: "boolean",
+						label: "Highlight this plan",
+						required: false,
+						defaultValue: false
+					},
+					{
+						id: "features",
+						type: "repeater",
+						label: "Features",
+						required: true,
+						itemLabel: "Feature",
+						minItems: 1,
+						allowConversion: false,
+						schema: { fields: [{
+							id: "text",
+							type: "text",
+							label: "Feature",
+							required: true,
+							multiline: false
+						}] }
+					},
+					{
+						id: "cta",
+						type: "link",
+						label: "Call to Action",
+						required: true
+					},
+					{
+						id: "ctaText",
+						type: "text",
+						label: "Button Text",
+						required: true,
+						multiline: false,
+						defaultValue: "Get Started"
+					}
+				] }
+			}
+		],
+		layout: {
+			type: "section",
+			props: {
+				background: "surface",
+				className: "py-20"
+			},
+			children: [{
+				type: "stack",
+				props: {
+					gap: "xl",
+					align: "center"
+				},
+				children: [{
+					type: "stack",
+					props: {
+						gap: "md",
+						align: "center"
+					},
+					children: [{
+						type: "text",
+						props: {
+							as: "h2",
+							className: "text-3xl font-bold"
+						},
+						$bind: { from: "content.sectionTitle" }
+					}, {
+						type: "text",
+						props: { className: "text-muted" },
+						$bind: { from: "content.sectionSubtitle" }
+					}]
+				}, {
+					type: "grid",
+					props: {
+						columns: 3,
+						gap: "lg",
+						className: "max-w-5xl"
+					},
+					$repeat: {
+						collection: { from: "content.plans" },
+						itemName: "plan"
+					},
+					children: [{
+						type: "div",
+						props: { className: "bg-white rounded-2xl p-8 shadow-sm" },
+						children: [{
+							type: "stack",
+							props: { gap: "lg" },
+							children: [
+								{
+									type: "text",
+									props: {
+										as: "h3",
+										className: "text-xl font-semibold"
+									},
+									$bind: { from: "plan.name" }
+								},
+								{
+									type: "inline",
+									props: { align: "baseline" },
+									children: [{
+										type: "text",
+										props: { className: "text-4xl font-bold" },
+										$bind: { from: "plan.price" }
+									}, {
+										type: "text",
+										props: { className: "text-muted" },
+										$bind: { from: "plan.period" }
+									}]
+								},
+								{
+									type: "stack",
+									props: { gap: "sm" },
+									$repeat: {
+										collection: { from: "plan.features" },
+										itemName: "feature"
+									},
+									children: [{
+										type: "inline",
+										props: {
+											gap: "sm",
+											align: "center"
+										},
+										children: [{
+											type: "text",
+											props: { className: "text-green-500" },
+											children: []
+										}, {
+											type: "text",
+											$bind: { from: "feature.text" }
+										}]
+									}]
+								},
+								{
+									type: "button",
+									props: {
+										variant: "primary",
+										className: "w-full",
+										href: { $bind: {
+											from: "plan.cta",
+											transforms: [{ id: "links.resolve" }]
+										} }
+									},
+									$bind: { from: "plan.ctaText" }
+								}
+							]
+						}]
+					}]
+				}]
+			}]
+		}
+	}] },
+	explanation: `
+- Nested repeaters: plans > features (each plan has multiple features)
+- isHighlighted boolean for featured plan styling
+- Price and period as separate fields for flexible formatting
+- ctaText separate from cta link for button label customization
+- itemLabelSource: 'name' shows plan name in editor
+- Features use inner repeater with simple text field`
+};
+//#endregion
+//#region src/manifest/prompt/examples/cta.ts
+const ctaExample = {
+	name: "Call to Action",
+	description: "A simple CTA section with headline, description, and action buttons.",
+	html: `<section class="bg-gradient-to-r from-purple-600 to-blue-600 py-16">
+  <div class="container mx-auto px-4 text-center text-white">
+    <h2 class="text-3xl font-bold mb-4">Ready to Get Started?</h2>
+    <p class="text-lg text-white/80 mb-8 max-w-xl mx-auto">
+      Join thousands of happy customers and take your business to the next level.
+    </p>
+    <div class="flex justify-center gap-4">
+      <a href="/signup" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold">
+        Start Free Trial
+      </a>
+      <a href="/contact" class="border border-white text-white px-6 py-3 rounded-lg font-semibold">
+        Contact Sales
+      </a>
+    </div>
+  </div>
+</section>`,
+	output: {
+		blocks: [{
+			id: "custom.cta",
+			title: "Call to Action",
+			description: "CTA section with headline and buttons",
+			category: "marketing",
+			icon: "megaphone",
+			tags: [
+				"cta",
+				"conversion",
+				"action"
+			],
+			fields: [
+				{
+					id: "headline",
+					type: "text",
+					label: "Headline",
+					required: true,
+					multiline: false,
+					defaultValue: "Ready to Get Started?"
+				},
+				{
+					id: "description",
+					type: "text",
+					label: "Description",
+					required: false,
+					multiline: true
+				},
+				{
+					id: "primaryButton",
+					type: "group",
+					label: "Primary Button",
+					required: false,
+					schema: { fields: [{
+						id: "text",
+						type: "text",
+						label: "Button Text",
+						required: true,
+						multiline: false,
+						defaultValue: "Start Free Trial"
+					}, {
+						id: "link",
+						type: "link",
+						label: "Link",
+						required: true
+					}] }
+				},
+				{
+					id: "secondaryButton",
+					type: "group",
+					label: "Secondary Button",
+					required: false,
+					schema: { fields: [{
+						id: "text",
+						type: "text",
+						label: "Button Text",
+						required: false,
+						multiline: false,
+						defaultValue: "Contact Sales"
+					}, {
+						id: "link",
+						type: "link",
+						label: "Link",
+						required: false
+					}] }
+				}
+			],
+			layout: {
+				type: "section",
+				props: {
+					background: "primary",
+					className: "py-16"
+				},
+				children: [{
+					type: "stack",
+					props: {
+						gap: "lg",
+						align: "center",
+						className: "text-center text-white"
+					},
+					children: [
+						{
+							type: "text",
+							props: {
+								as: "h2",
+								className: "text-3xl font-bold"
+							},
+							children: null,
+							$bind: {
+								from: "content.headline",
+								fallback: null,
+								transforms: null
+							},
+							$repeat: null,
+							$when: null
+						},
+						{
+							type: "text",
+							props: { className: "text-lg opacity-80 max-w-xl" },
+							children: null,
+							$bind: {
+								from: "content.description",
+								fallback: null,
+								transforms: null
+							},
+							$repeat: null,
+							$when: null
+						},
+						{
+							type: "inline",
+							props: {
+								gap: "md",
+								justify: "center"
+							},
+							children: [{
+								type: "button",
+								props: {
+									variant: "secondary",
+									size: "lg",
+									href: { $bind: {
+										from: "content.primaryButton.link",
+										fallback: null,
+										transforms: [{ id: "links.resolve" }]
+									} }
+								},
+								children: null,
+								$bind: {
+									from: "content.primaryButton.text",
+									fallback: null,
+									transforms: null
+								},
+								$repeat: null,
+								$when: null
+							}, {
+								type: "button",
+								props: {
+									variant: "outline",
+									size: "lg",
+									href: { $bind: {
+										from: "content.secondaryButton.link",
+										fallback: null,
+										transforms: [{ id: "links.resolve" }]
+									} }
+								},
+								children: null,
+								$bind: {
+									from: "content.secondaryButton.text",
+									fallback: null,
+									transforms: null
+								},
+								$repeat: null,
+								$when: null
+							}],
+							$bind: null,
+							$repeat: null,
+							$when: null
+						}
+					],
+					$bind: null,
+					$repeat: null,
+					$when: null
+				}],
+				$bind: null,
+				$repeat: null,
+				$when: null
+			}
+		}],
+		customCssRules: [{
+			id: "cta-gradient-bg",
+			selector: "[data-block=\"custom.cta\"]",
+			declarations: [{
+				property: "background",
+				value: "linear-gradient(to right, #9333ea, #2563eb)"
+			}]
+		}]
+	},
+	explanation: `
+	KEY POINTS:
+	- EVERY text node has $bind (headline, description)
+	- Buttons bind label via primaryButton.text / secondaryButton.text and href via props.href + links.resolve
+	- All nullable fields are explicitly included (children: null, $repeat: null, $when: null)
+
+Structure:
+- Gradient background uses customCssRules with declarations as array of {property, value}
+- Two buttons grouped in primaryButton/secondaryButton groups
+- inline layout for horizontal button arrangement`
+};
+//#endregion
+//#region src/manifest/prompt/examples/index.ts
+/**
+* Example Conversions for System Prompt
+*
+* These examples teach the LLM how to convert HTML to block manifests.
+* Each example shows input HTML and expected output JSON.
+*/
+/**
+* Format an example for inclusion in the prompt.
+*
+* @param example - The conversion example to format
+* @returns Formatted markdown string for the system prompt
+*/
+function formatExample(example) {
+	return `
+### Example: ${example.name}
+
+${example.description}
+
+**Input HTML:**
+\`\`\`html
+${example.html}
+\`\`\`
+
+**Output:**
+\`\`\`json
+${JSON.stringify(example.output, null, 2)}
+\`\`\`
+
+**Key decisions:**
+${example.explanation}
+`;
+}
+/**
+* Get all examples formatted for the system prompt.
+*
+* @returns Formatted examples section for the system prompt
+*/
+function getExamples() {
+	return [
+		"## Examples",
+		"",
+		"Study these examples to understand the conversion patterns:",
+		...[
+			heroExample,
+			featuresGridExample,
+			testimonialsExample,
+			pricingExample,
+			ctaExample
+		].map(formatExample)
+	].join("\n");
+}
+//#endregion
+//#region src/manifest/prompt/system.ts
+const ROLE_DESCRIPTION = `
+You are an expert HTML-to-manifest conversion specialist. Your task is to convert HTML
+(typically with Tailwind CSS classes) into declarative block manifests for a CMS.
+
+You analyze HTML structure and extract:
+1. Editable content fields (text, images, links, etc.)
+2. Layout structure using the node DSL
+3. Styling mapped to theme tokens or custom CSS
+`;
+const OUTPUT_FORMAT = `
+## Output Format
+
+You MUST respond with a valid JSON object containing:
+
+\`\`\`typescript
+{
+  blocks: Array<{
+    id: string;              // Must start with 'custom.' (e.g., 'custom.hero')
+    title: string;           // Human-readable name
+    description?: string;    // Optional description
+    category: 'marketing' | 'content' | 'blog' | 'media' | 'layout' | 'interactive';
+    icon?: string;           // Lucide icon name (e.g., 'layout', 'image')
+    tags?: string[];         // Search tags
+    fields: Array<Field>;    // Editable content fields
+    layout: NodeDefinition;  // Visual structure
+  }>;
+
+  themePatch?: Array<{       // Optional: Add new theme tokens
+    op: 'add' | 'replace';
+    path: string;            // JSON path (e.g., '/palette/colors/-')
+    value: unknown;
+  }>;
+
+  customCssRules?: Array<{   // Optional: Block-specific CSS
+    id: string;              // Unique rule ID
+    selector: string;        // CSS selector (no :root, html, body, *)
+    declarations: Array<{ property: string; value: string }>;
+  }>;
+}
+\`\`\`
+
+## Field Types
+
+Available field types:
+- **text**: Single-line or multiline text (use multiline: true for paragraphs)
+- **richText**: Rich text with formatting (bold, italic, links)
+- **media**: Display media such as images, videos, or audio (specify mediaKinds: ['image'], ['image', 'video'], or ['audio'])
+- **file**: Downloadable files such as PDFs, documents, spreadsheets, archives, or audio (specify fileKinds: ['document'], ['spreadsheet'], ['archive'], or ['audio'])
+- **link**: Internal or external links
+- **boolean**: Toggle switches
+- **select**: Dropdown with predefined options (must include options array)
+- **number**: Numeric values
+- **repeater**: Repeating content (features, testimonials, etc.)
+- **group**: Grouped related fields
+
+## Layout Structure
+
+The layout is a tree of nodes. Each node has:
+- **type**: Node type (section, stack, text, media, etc.)
+- **props**: Optional properties (as, className, style)
+- **children**: Child nodes (for containers)
+- **$bind**: Content binding (connects to fields)
+- **$repeat**: Repeats children for array fields
+`;
+const IMPORTANT_RULES = `
+## Important Rules
+
+### CRITICAL: $bind is REQUIRED for ALL content nodes
+
+**This is the most important rule.** Without $bind, layout nodes display NOTHING.
+
+Every node of these types MUST have a $bind:
+- **text**: MUST have \`$bind: { from: "content.fieldId" }\`
+- **richText**: MUST have \`$bind: { from: "content.fieldId" }\`
+- **media**: MUST have \`$bind: { from: "content.fieldId" }\`
+- **button**: MUST have \`$bind\` for its LABEL (text or link label) and MUST set \`props.href\` for navigation
+  - Label: \`$bind: { from: "content.linkFieldId", transforms: [{ id: "links.label" }] }\`
+  - Href: \`props: { href: { $bind: { from: "content.linkFieldId", transforms: [{ id: "links.resolve" }] } } }\`
+- **link**: Same as button (label via \`links.label\`, href via \`props.href\` + \`links.resolve\`)
+
+**WRONG** (empty node that displays nothing):
+\`\`\`json
+{
+  "type": "text",
+  "props": { "as": "h1" },
+  "children": null,
+  "$bind": null,
+  "$repeat": null,
+  "$when": null
+}
+\`\`\`
+
+**CORRECT** (bound to field data):
+\`\`\`json
+{
+  "type": "text",
+  "props": { "as": "h1" },
+  "children": null,
+  "$bind": { "from": "content.headline", "fallback": null, "transforms": null },
+  "$repeat": null,
+  "$when": null
+}
+\`\`\`
+
+### Every field MUST be bound in the layout
+
+If you define a field, you MUST use it with $bind somewhere in the layout (node.$bind or a nested props.$bind). Unused fields are invalid.
+
+### Other Rules
+
+1. **Block IDs**: Must be 'custom.' + lowercase + hyphens only (e.g., 'custom.hero-section')
+
+2. **Field IDs**: Use camelCase (e.g., 'headline', 'ctaButton', 'featureItems')
+
+3. **Binding Paths**: Always start with 'content.' (e.g., 'content.headline')
+
+4. **Theme Priority**: Use theme tokens when possible before adding customCssRules
+
+5. **Custom CSS MUST match the layout**
+   - If a customCssRules selector uses a class (e.g. ".heroTitle"), you MUST add that class to some node via props.className.
+   - Do NOT target internal renderer classes like ".cms-node-*" (they are not guaranteed).
+   - Do NOT put "@media" / at-rules into selector (emit base styles only).
+   - Always scope selectors to the block: prefix with [data-block="custom.your-block-id"].
+
+5. **Required Fields**: Every field needs at minimum:
+   - id: Unique identifier
+   - type: Field type
+   - label: Human-readable label
+   - required: Boolean (true if essential content)
+
+6. **Layout Requirements**:
+   - Root node is typically 'section' for full-width blocks
+   - Use 'stack' for vertical layouts, 'inline' for horizontal
+   - Every text node MUST have $bind
+   - Include explicit nulls for unused keys (props, children, $bind, $repeat, $when)
+
+7. **No Hardcoded Content**: Extract all visible text as fields, bind them with $bind
+
+8. **Selector Safety**: customCssRules selectors cannot use :root, html, body, or *
+`;
+/**
+* Build the complete system prompt for HTML-to-manifest conversion.
+*
+* Combines role description, output format, theme context, knowledge base,
+* and examples into a comprehensive system prompt for the LLM.
+*
+* @param options - Options including theme and conversion preferences
+* @returns Complete system prompt string
+*/
+function buildSystemPrompt(options) {
+	const { theme, includeExamples = true, expectedBlockCount = "auto" } = options;
+	const themeSection = formatThemeSummaryForPrompt(summarizeThemeForLLM(theme));
+	const parts = [
+		ROLE_DESCRIPTION.trim(),
+		"",
+		OUTPUT_FORMAT.trim(),
+		"",
+		IMPORTANT_RULES.trim(),
+		"",
+		themeSection,
+		"",
+		getKnowledgeBase()
+	];
+	if (expectedBlockCount === "single") {
+		parts.push("");
+		parts.push("**Note**: Convert the HTML into a SINGLE block. Do not split into multiple blocks.");
+	} else if (expectedBlockCount === "multiple") {
+		parts.push("");
+		parts.push("**Note**: This HTML likely contains multiple sections. Split into separate blocks as appropriate.");
+	}
+	if (includeExamples) {
+		parts.push("");
+		parts.push(getExamples());
+	}
+	return parts.join("\n");
+}
+/**
+* Build the user message for the conversion request.
+*
+* Formats the HTML and optional CSS for conversion, including any
+* validation feedback from previous attempts.
+*
+* @param options - Message options with HTML content and optional CSS/errors
+* @returns Formatted user message string
+*/
+function buildUserMessage(options) {
+	const { html, css, previousErrors, isRetry } = options;
+	const parts = ["Convert the following HTML to a block manifest:"];
+	parts.push("");
+	parts.push("```html");
+	parts.push(html);
+	parts.push("```");
+	if (css) {
+		parts.push("");
+		parts.push("Additional CSS:");
+		parts.push("```css");
+		parts.push(css);
+		parts.push("```");
+	}
+	if (previousErrors) {
+		parts.push("");
+		parts.push("---");
+		parts.push("");
+		parts.push("⚠️ **YOUR PREVIOUS OUTPUT FAILED VALIDATION** ⚠️");
+		parts.push("");
+		parts.push("You must regenerate the output with the errors fixed. Read the errors carefully.");
+		parts.push("");
+		parts.push(previousErrors);
+	}
+	if (isRetry) {
+		parts.push("");
+		parts.push("---");
+		parts.push("");
+		parts.push("**REQUIRED: Explain your fixes in the `fixRationale` field.**");
+		parts.push("");
+		parts.push("In your output, set `fixRationale` to a string explaining:");
+		parts.push("1. What validation errors you found in your previous output");
+		parts.push("2. What specific changes you made to fix each error");
+		parts.push("3. Which fields you bound to which nodes with $bind");
+		parts.push("");
+		parts.push("Example fixRationale: \"Fixed 3 text nodes missing $bind. Added $bind: { from: content.headline } to the h1 text node, $bind: { from: content.description } to the p text node, and $bind: { from: content.highlight } to the span text node. All 3 defined fields are now bound in the layout.\"");
+	}
+	return parts.join("\n");
+}
+//#endregion
+export { buildSystemPrompt, buildUserMessage, collectValidationErrors, convertHtmlToManifest, formatValidationFeedback, htmlToManifestOutputSchema, llmAtRuleSchema, llmCustomBlockSchema, llmCustomCssRuleSchema, llmMediaAtRuleSchema, llmNestedRuleSchema, llmThemePatchOpSchema, normalizeDeclarationsArrayToRecord, normalizeLlmCssRule, normalizeLlmMediaAtRule, summarizeThemeForLLM, validateManifestOutput };