@templatical/template-tools 0.46.0 → 0.48.0

package/dist/custom-block-CsZN9qMM.js

@@ -0,0 +1,2670 @@
+import Ajv from "ajv";
+import { getContrastRatio, isOpaqueHex, lintAccessibility, lintTemplate } from "@templatical/quality";
+import { createCustomBlock, createDefaultTemplateContent, createParagraphBlock } from "@templatical/types";
+import { Parser } from "htmlparser2";
+import { ForTag, Liquid, Output, Tag } from "liquidjs";
+import { escapeHtml, renderToMjml } from "@templatical/renderer";
+//#endregion
+//#region src/validate.ts
+/** The generated JSON Schema for `TemplateContent`, as a plain object. */
+const schema = {
+	$id: "https://templatical.com/schema/template-content.json",
+	$schema: "http://json-schema.org/draft-07/schema#",
+	$ref: "#/definitions/TemplateContent",
+	definitions: {
+		"TemplateContent": {
+			"type": "object",
+			"properties": {
+				"blocks": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/Block" }
+				},
+				"settings": { "$ref": "#/definitions/TemplateSettings" }
+			},
+			"required": ["blocks", "settings"],
+			"additionalProperties": false
+		},
+		"Block": { "anyOf": [
+			{ "$ref": "#/definitions/SectionBlock" },
+			{ "$ref": "#/definitions/TitleBlock" },
+			{ "$ref": "#/definitions/ParagraphBlock" },
+			{ "$ref": "#/definitions/ImageBlock" },
+			{ "$ref": "#/definitions/ButtonBlock" },
+			{ "$ref": "#/definitions/DividerBlock" },
+			{ "$ref": "#/definitions/VideoBlock" },
+			{ "$ref": "#/definitions/SocialIconsBlock" },
+			{ "$ref": "#/definitions/SpacerBlock" },
+			{ "$ref": "#/definitions/HtmlBlock" },
+			{ "$ref": "#/definitions/MenuBlock" },
+			{ "$ref": "#/definitions/TableBlock" },
+			{ "$ref": "#/definitions/CountdownBlock" },
+			{ "$ref": "#/definitions/CustomBlock" },
+			{ "$ref": "#/definitions/SlotBlock" },
+			{ "$ref": "#/definitions/WrapperBlock" }
+		] },
+		"SectionBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "section"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"columns": { "$ref": "#/definitions/ColumnLayout" },
+				"children": {
+					"type": "array",
+					"items": {
+						"type": "array",
+						"items": { "$ref": "#/definitions/Block" }
+					}
+				},
+				"stackOnMobile": {
+					"type": "boolean",
+					"description": "Whether columns stack vertically on mobile. Absent or `true` keeps MJML's default responsive behavior (columns stack below 480px). `false` renders the columns inside an `<mj-group>` so they stay side-by-side on mobile, proportionally shrunk to fit."
+				},
+				"borderRadius": {
+					"$ref": "#/definitions/BorderRadiusValue",
+					"description": "Corner radius in px — one number, or a radius per corner. Omitted/0 = square corners."
+				},
+				"border": {
+					"$ref": "#/definitions/BorderValue",
+					"description": "Border around the section box, per side. Omitted = no border; a side with width 0 is not drawn."
+				},
+				"backgroundImage": {
+					"$ref": "#/definitions/BackgroundImage",
+					"description": "Image behind the section's columns, rendered as `background-url` (plus size, position and repeat) on the `mj-section`. `styles.backgroundColor` is its fallback."
+				},
+				"hero": {
+					"$ref": "#/definitions/SectionHero",
+					"description": "Draws a one-column section with a background image as an `mj-hero`: the image fills the box and the content sits on top. Ignored (the section renders as a regular one, and the `structure` linter says why) with more than one column, without an image, or with `height: \"image\"` and no image size."
+				},
+				"wrapper": {
+					"$ref": "#/definitions/SectionWrapper",
+					"description": "Optional outer frame (rendered as an `mj-wrapper` around the section)."
+				}
+			},
+			"required": [
+				"children",
+				"columns",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"BlockStyles": {
+			"type": "object",
+			"properties": {
+				"padding": { "$ref": "#/definitions/SpacingValue" },
+				"backgroundColor": { "type": "string" }
+			},
+			"required": ["padding"],
+			"additionalProperties": false
+		},
+		"SpacingValue": {
+			"type": "object",
+			"properties": {
+				"top": { "type": "number" },
+				"right": { "type": "number" },
+				"bottom": { "type": "number" },
+				"left": { "type": "number" }
+			},
+			"required": [
+				"top",
+				"right",
+				"bottom",
+				"left"
+			],
+			"additionalProperties": false
+		},
+		"BlockVisibility": {
+			"type": "object",
+			"properties": {
+				"desktop": { "type": "boolean" },
+				"mobile": { "type": "boolean" }
+			},
+			"required": ["desktop", "mobile"],
+			"additionalProperties": false
+		},
+		"ColumnLayout": {
+			"type": "string",
+			"enum": [
+				"1",
+				"2",
+				"3",
+				"2-1",
+				"1-2"
+			]
+		},
+		"BorderRadiusValue": {
+			"anyOf": [{ "type": "number" }, { "$ref": "#/definitions/CornerRadius" }],
+			"description": "A corner radius in px: one number for all four corners, or a radius per corner."
+		},
+		"CornerRadius": {
+			"type": "object",
+			"properties": {
+				"topLeft": { "type": "number" },
+				"topRight": { "type": "number" },
+				"bottomRight": { "type": "number" },
+				"bottomLeft": { "type": "number" }
+			},
+			"required": [
+				"topLeft",
+				"topRight",
+				"bottomRight",
+				"bottomLeft"
+			],
+			"additionalProperties": false,
+			"description": "A radius per corner, in px."
+		},
+		"BorderValue": {
+			"type": "object",
+			"properties": {
+				"top": { "$ref": "#/definitions/BorderSideValue" },
+				"right": { "$ref": "#/definitions/BorderSideValue" },
+				"bottom": { "$ref": "#/definitions/BorderSideValue" },
+				"left": { "$ref": "#/definitions/BorderSideValue" }
+			},
+			"required": [
+				"top",
+				"right",
+				"bottom",
+				"left"
+			],
+			"additionalProperties": false,
+			"description": "A border described per side, like `SpacingValue`. Only elements MJML can border natively carry one: sections, images and buttons."
+		},
+		"BorderSideValue": {
+			"type": "object",
+			"properties": {
+				"width": {
+					"type": "number",
+					"description": "Width in px. `0` means no border on this side."
+				},
+				"style": { "$ref": "#/definitions/BorderStyle" },
+				"color": { "type": "string" }
+			},
+			"required": [
+				"width",
+				"style",
+				"color"
+			],
+			"additionalProperties": false,
+			"description": "One side of a border. A width of `0` leaves that side undrawn."
+		},
+		"BorderStyle": {
+			"type": "string",
+			"enum": [
+				"solid",
+				"dashed",
+				"dotted"
+			]
+		},
+		"BackgroundImage": {
+			"type": "object",
+			"properties": {
+				"url": { "type": "string" },
+				"size": { "$ref": "#/definitions/BackgroundSize" },
+				"position": {
+					"type": "object",
+					"properties": {
+						"x": { "$ref": "#/definitions/BackgroundPositionX" },
+						"y": { "$ref": "#/definitions/BackgroundPositionY" }
+					},
+					"required": ["x", "y"],
+					"additionalProperties": false
+				},
+				"repeat": {
+					"type": "boolean",
+					"description": "`false` paints the image once; `true` tiles it."
+				},
+				"naturalWidth": {
+					"type": "number",
+					"description": "The image file's own width in px, when known: given by the media library, measured by the editor when the author sets the URL, or read by an importer (from MJML, the hero's `background-width`, which may be the box's size rather than the file's). Only the ratio with `naturalHeight` is used: a section hero with `height: \"image\"` keeps its box at that shape. Both or neither; one without the other reads as unknown."
+				},
+				"naturalHeight": {
+					"type": "number",
+					"description": "The image file's own height in px, when known; it pairs with `naturalWidth`, and only their ratio is used. Both or neither."
+				}
+			},
+			"required": [
+				"url",
+				"size",
+				"position",
+				"repeat"
+			],
+			"additionalProperties": false,
+			"description": "An image painted behind a section or a wrapper band. The element's own `backgroundColor` is its fallback: it shows while the image loads, with images off, and in clients without background-image support."
+		},
+		"BackgroundSize": {
+			"type": "string",
+			"enum": [
+				"cover",
+				"contain",
+				"auto"
+			],
+			"description": "`background-size` keywords. In Outlook on Windows (VML), `cover` and `contain` draw a single frame when `repeat` is off and tile when it is on; `auto` always tiles from the top center, whatever `position` and `repeat` say."
+		},
+		"BackgroundPositionX": {
+			"type": "string",
+			"enum": [
+				"left",
+				"center",
+				"right"
+			]
+		},
+		"BackgroundPositionY": {
+			"type": "string",
+			"enum": [
+				"top",
+				"center",
+				"bottom"
+			]
+		},
+		"SectionHero": {
+			"type": "object",
+			"properties": {
+				"height": {
+					"anyOf": [{
+						"type": "string",
+						"const": "image"
+					}, { "type": "number" }],
+					"description": "`\"image\"` makes the box as tall as the image drawn across its desktop width, and needs the image's size on `backgroundImage.naturalWidth` / `naturalHeight`; a phone keeps that height and crops the image's sides. A number is the box's fixed height in px, padding included."
+				},
+				"verticalAlign": { "$ref": "#/definitions/HeroVerticalAlign" }
+			},
+			"required": ["height", "verticalAlign"],
+			"additionalProperties": false,
+			"description": "Draws a one-column section as an MJML `mj-hero`: its background image fills the box (always `cover`, never tiled) and the content sits on top of it. A hero applies only to a one-column section with a background image; otherwise the section renders as a regular one."
+		},
+		"HeroVerticalAlign": {
+			"type": "string",
+			"enum": [
+				"top",
+				"middle",
+				"bottom"
+			],
+			"description": "Where a hero's content sits in its box."
+		},
+		"SectionWrapper": {
+			"type": "object",
+			"properties": {
+				"backgroundColor": { "type": "string" },
+				"padding": { "$ref": "#/definitions/SpacingValue" },
+				"borderRadius": {
+					"$ref": "#/definitions/BorderRadiusValue",
+					"description": "Corner radius in px for the outer frame — one number, or a radius per corner. Omitted/0 = square corners."
+				},
+				"backgroundImage": {
+					"$ref": "#/definitions/BackgroundImage",
+					"description": "Image behind the band; `backgroundColor` is its fallback."
+				}
+			},
+			"additionalProperties": false,
+			"description": "Optional outer frame for a section. When present, the section is rendered inside an `mj-wrapper` — a band (its own background + padding) that frames the section, e.g. a white card sitting on a colored band. The band is as wide as the email body (`settings.width`), not the recipient's viewport."
+		},
+		"TitleBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "title"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"content": { "type": "string" },
+				"level": { "$ref": "#/definitions/HeadingLevel" },
+				"color": {
+					"type": "string",
+					"description": "Text color. Unset = inherit the document-level `textColor`."
+				},
+				"textAlign": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				},
+				"fontFamily": { "type": "string" }
+			},
+			"required": [
+				"content",
+				"id",
+				"level",
+				"styles",
+				"textAlign",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"HeadingLevel": {
+			"type": "number",
+			"enum": [
+				1,
+				2,
+				3,
+				4
+			]
+		},
+		"ParagraphBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "paragraph"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"content": { "type": "string" },
+				"paragraphSpacing": {
+					"type": "number",
+					"description": "Gap in px between this block's paragraphs — the space below every `<p>` except the last. Absent means `RICH_TEXT_SPACING.paragraphGap`.\n\nOnly affects a block holding more than one paragraph; a single `<p>` has no internal gap, and the space around the block is `styles.padding`.\n\n`0` is a valid choice (paragraphs butted together) and is distinct from the field being absent, so readers must test for `undefined` rather than falsiness."
+				}
+			},
+			"required": [
+				"content",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"ImageBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "image"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"src": { "type": "string" },
+				"alt": { "type": "string" },
+				"width": { "anyOf": [{ "type": "number" }, {
+					"type": "string",
+					"const": "full"
+				}] },
+				"height": {
+					"type": "number",
+					"description": "Height in pixels. Absent means the height is derived from the width, so the image keeps its aspect ratio — setting both stretches it, since email clients don't support `object-fit`."
+				},
+				"naturalWidth": {
+					"type": "number",
+					"description": "The image file's own size in px, when known: given by the media library, read by an importer, or measured in the editor during an edit. Both or neither; one without the other reads as unknown. It drives the editor's aspect-ratio lock and is never rendered. Cleared when `src` changes without a new size alongside it."
+				},
+				"naturalHeight": { "type": "number" },
+				"align": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				},
+				"borderRadius": {
+					"$ref": "#/definitions/BorderRadiusValue",
+					"description": "Corner radius in px. Omitted/0 = square corners. A radius of at least half the rendered size rounds a square image to a circle, which is how avatar and portrait layouts are built. A radius per corner is also accepted."
+				},
+				"border": {
+					"$ref": "#/definitions/BorderValue",
+					"description": "Border around the image itself, per side. Omitted = no border; a side with width 0 is not drawn."
+				},
+				"linkUrl": { "type": "string" },
+				"linkOpenInNewTab": { "type": "boolean" },
+				"placeholderUrl": { "type": "string" },
+				"decorative": { "type": "boolean" }
+			},
+			"required": [
+				"align",
+				"alt",
+				"id",
+				"src",
+				"styles",
+				"type",
+				"width"
+			],
+			"additionalProperties": false
+		},
+		"ButtonBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "button"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"text": { "type": "string" },
+				"url": { "type": "string" },
+				"openInNewTab": { "type": "boolean" },
+				"backgroundColor": { "type": "string" },
+				"textColor": { "type": "string" },
+				"borderRadius": {
+					"$ref": "#/definitions/BorderRadiusValue",
+					"description": "Corner radius in px — one number, or a radius per corner."
+				},
+				"border": {
+					"$ref": "#/definitions/BorderValue",
+					"description": "Border around the button itself, per side. Omitted = no border; a side with width 0 is not drawn. For an outline (\"ghost\") button, set `backgroundColor` to the keyword `\"transparent\"` (the background control stores it) and set `textColor` too — a new button is `#333333` with white text. An empty fill exports as `transparent`, because MJML paints `#414141` when the attribute is omitted."
+				},
+				"fontSize": { "type": "number" },
+				"buttonPadding": { "$ref": "#/definitions/SpacingValue" },
+				"fontFamily": { "type": "string" },
+				"width": { "anyOf": [{ "type": "number" }, {
+					"type": "string",
+					"const": "full"
+				}] },
+				"align": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					],
+					"description": "Placement of the button within its column. No visible effect when `width` is `\"full\"`, since the button then spans the column."
+				}
+			},
+			"required": [
+				"align",
+				"backgroundColor",
+				"borderRadius",
+				"buttonPadding",
+				"fontSize",
+				"id",
+				"styles",
+				"text",
+				"textColor",
+				"type",
+				"url"
+			],
+			"additionalProperties": false
+		},
+		"DividerBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "divider"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"lineStyle": {
+					"type": "string",
+					"enum": [
+						"solid",
+						"dashed",
+						"dotted"
+					]
+				},
+				"color": { "type": "string" },
+				"thickness": { "type": "number" },
+				"width": {
+					"anyOf": [
+						{ "type": "number" },
+						{
+							"type": "string",
+							"const": "full"
+						},
+						{ "$ref": "#/definitions/DividerPercentWidth" }
+					],
+					"description": "`\"full\"` spans the column and a number is pixels. A percentage is a share of the column: MJML renders it natively, and it shrinks with the column on a phone where a pixel width would overflow."
+				}
+			},
+			"required": [
+				"color",
+				"id",
+				"lineStyle",
+				"styles",
+				"thickness",
+				"type",
+				"width"
+			],
+			"additionalProperties": false
+		},
+		"DividerPercentWidth": {
+			"type": "string",
+			"description": "A share of the column, from `\"0%\"` to `\"100%\"`.",
+			"pattern": "^(?:100(?:\\.0+)?|\\d{1,2}(?:\\.\\d+)?)%$"
+		},
+		"VideoBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "video"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"url": { "type": "string" },
+				"openInNewTab": { "type": "boolean" },
+				"thumbnailUrl": { "type": "string" },
+				"alt": { "type": "string" },
+				"width": { "anyOf": [{ "type": "number" }, {
+					"type": "string",
+					"const": "full"
+				}] },
+				"height": {
+					"type": "number",
+					"description": "Height in pixels for the thumbnail. Absent means the height is derived from the width, so the thumbnail keeps its aspect ratio — setting both stretches it, since email clients don't support `object-fit`."
+				},
+				"align": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				},
+				"placeholderUrl": { "type": "string" }
+			},
+			"required": [
+				"align",
+				"alt",
+				"id",
+				"styles",
+				"thumbnailUrl",
+				"type",
+				"url",
+				"width"
+			],
+			"additionalProperties": false
+		},
+		"SocialIconsBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "social"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"icons": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/SocialIcon" }
+				},
+				"iconStyle": { "$ref": "#/definitions/SocialIconStyle" },
+				"iconTone": {
+					"$ref": "#/definitions/SocialIconTone",
+					"description": "Absent means `\"brand\"`."
+				},
+				"iconSize": { "$ref": "#/definitions/SocialIconSize" },
+				"spacing": { "type": "number" },
+				"align": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				}
+			},
+			"required": [
+				"align",
+				"iconSize",
+				"iconStyle",
+				"icons",
+				"id",
+				"spacing",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"SocialIcon": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"platform": { "$ref": "#/definitions/SocialPlatform" },
+				"url": { "type": "string" }
+			},
+			"required": [
+				"id",
+				"platform",
+				"url"
+			],
+			"additionalProperties": false
+		},
+		"SocialPlatform": {
+			"type": "string",
+			"enum": [
+				"facebook",
+				"twitter",
+				"instagram",
+				"linkedin",
+				"youtube",
+				"tiktok",
+				"pinterest",
+				"email",
+				"whatsapp",
+				"telegram",
+				"discord",
+				"snapchat",
+				"reddit",
+				"github",
+				"dribbble",
+				"behance",
+				"website"
+			]
+		},
+		"SocialIconStyle": {
+			"type": "string",
+			"enum": [
+				"solid",
+				"outlined",
+				"rounded",
+				"square",
+				"circle",
+				"plain"
+			],
+			"description": "The icon's shape. `plain` is the glyph alone, with no badge or outline."
+		},
+		"SocialIconTone": {
+			"type": "string",
+			"enum": [
+				"brand",
+				"dark",
+				"light"
+			],
+			"description": "The colors an icon is drawn in: each platform's own brand color, or one tone (dark or light) for every icon."
+		},
+		"SocialIconSize": {
+			"type": "string",
+			"enum": [
+				"small",
+				"medium",
+				"large"
+			]
+		},
+		"SpacerBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "spacer"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"height": { "type": "number" }
+			},
+			"required": [
+				"height",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"HtmlBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "html"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"content": { "type": "string" }
+			},
+			"required": [
+				"content",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"MenuBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "menu"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"items": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/MenuItemData" }
+				},
+				"fontSize": { "type": "number" },
+				"fontFamily": { "type": "string" },
+				"color": {
+					"type": "string",
+					"description": "Base text/link color. Unset = inherit the document-level `textColor`."
+				},
+				"linkColor": { "type": "string" },
+				"textAlign": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				},
+				"separator": { "type": "string" },
+				"separatorColor": { "type": "string" },
+				"spacing": { "type": "number" }
+			},
+			"required": [
+				"fontSize",
+				"id",
+				"items",
+				"separator",
+				"separatorColor",
+				"spacing",
+				"styles",
+				"textAlign",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"MenuItemData": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"text": { "type": "string" },
+				"url": { "type": "string" },
+				"openInNewTab": { "type": "boolean" },
+				"bold": { "type": "boolean" },
+				"underline": { "type": "boolean" },
+				"color": { "type": "string" }
+			},
+			"required": [
+				"id",
+				"text",
+				"url",
+				"openInNewTab",
+				"bold",
+				"underline"
+			],
+			"additionalProperties": false
+		},
+		"TableBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "table"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"rows": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/TableRowData" }
+				},
+				"hasHeaderRow": { "type": "boolean" },
+				"headerBackgroundColor": { "type": "string" },
+				"borderColor": { "type": "string" },
+				"borderWidth": { "type": "number" },
+				"cellPadding": { "type": "number" },
+				"fontSize": { "type": "number" },
+				"fontFamily": { "type": "string" },
+				"color": {
+					"type": "string",
+					"description": "Text color. Unset = inherit the document-level `textColor`."
+				},
+				"textAlign": {
+					"type": "string",
+					"enum": [
+						"left",
+						"center",
+						"right"
+					]
+				}
+			},
+			"required": [
+				"borderColor",
+				"borderWidth",
+				"cellPadding",
+				"fontSize",
+				"hasHeaderRow",
+				"id",
+				"rows",
+				"styles",
+				"textAlign",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"TableRowData": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"cells": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/TableCellData" }
+				}
+			},
+			"required": ["id", "cells"],
+			"additionalProperties": false
+		},
+		"TableCellData": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"content": { "type": "string" }
+			},
+			"required": ["id", "content"],
+			"additionalProperties": false
+		},
+		"CountdownBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "countdown"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"targetDate": { "type": "string" },
+				"timezone": { "type": "string" },
+				"showDays": { "type": "boolean" },
+				"showHours": { "type": "boolean" },
+				"showMinutes": { "type": "boolean" },
+				"showSeconds": { "type": "boolean" },
+				"separator": {
+					"type": "string",
+					"enum": [
+						":",
+						"-",
+						" "
+					]
+				},
+				"digitFontSize": { "type": "number" },
+				"digitColor": { "type": "string" },
+				"labelColor": { "type": "string" },
+				"labelFontSize": { "type": "number" },
+				"backgroundColor": { "type": "string" },
+				"fontFamily": { "type": "string" },
+				"labelDays": { "type": "string" },
+				"labelHours": { "type": "string" },
+				"labelMinutes": { "type": "string" },
+				"labelSeconds": { "type": "string" },
+				"expiredMessage": { "type": "string" },
+				"expiredImageUrl": { "type": "string" },
+				"hideOnExpiry": { "type": "boolean" }
+			},
+			"required": [
+				"backgroundColor",
+				"digitColor",
+				"digitFontSize",
+				"expiredImageUrl",
+				"expiredMessage",
+				"hideOnExpiry",
+				"id",
+				"labelColor",
+				"labelDays",
+				"labelFontSize",
+				"labelHours",
+				"labelMinutes",
+				"labelSeconds",
+				"separator",
+				"showDays",
+				"showHours",
+				"showMinutes",
+				"showSeconds",
+				"styles",
+				"targetDate",
+				"timezone",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "custom"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"customType": { "type": "string" },
+				"fieldValues": {
+					"type": "object",
+					"additionalProperties": {}
+				},
+				"renderedHtml": { "type": "string" },
+				"renderedStylesheet": {
+					"type": "string",
+					"description": "The definition's `stylesheet`, copied in when `renderedHtml` is written. A render provider's backend, and Cloud rendering from storage, have no definition to ask, so `@templatical/renderer` emits this when no `getCustomBlockStylesheet` resolver is passed. A resolver, when passed, decides every type, so a stale copy never overrides a live definition."
+				},
+				"dataSourceFetched": { "type": "boolean" }
+			},
+			"required": [
+				"customType",
+				"fieldValues",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"SlotBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "slot"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				}
+			},
+			"required": [
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false,
+			"description": "Layout-only hole where authored content is spliced in. Extends BaseBlock so Block walkers stay typed (`styles` unused; spliced out before render)."
+		},
+		"WrapperBlock": {
+			"type": "object",
+			"properties": {
+				"id": { "type": "string" },
+				"type": {
+					"type": "string",
+					"const": "wrapper"
+				},
+				"styles": { "$ref": "#/definitions/BlockStyles" },
+				"visibility": { "$ref": "#/definitions/BlockVisibility" },
+				"displayCondition": {
+					"type": "object",
+					"properties": {
+						"label": { "type": "string" },
+						"before": { "type": "string" },
+						"after": { "type": "string" },
+						"group": { "type": "string" },
+						"description": { "type": "string" }
+					},
+					"required": [
+						"label",
+						"before",
+						"after"
+					],
+					"additionalProperties": false
+				},
+				"children": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/Block" }
+				},
+				"borderRadius": { "type": "number" },
+				"backgroundImage": {
+					"$ref": "#/definitions/BackgroundImage",
+					"description": "Image behind the band; `styles.backgroundColor` is its fallback."
+				}
+			},
+			"required": [
+				"children",
+				"id",
+				"styles",
+				"type"
+			],
+			"additionalProperties": false,
+			"description": "Layout-only band rendered as `mj-wrapper`. The block is the band: `styles.backgroundColor` / `styles.padding` / `borderRadius` / `backgroundImage` map to the wrapper. Legal in layout only."
+		},
+		"TemplateSettings": {
+			"type": "object",
+			"properties": {
+				"width": { "type": "number" },
+				"backgroundColor": { "type": "string" },
+				"textColor": {
+					"type": "string",
+					"description": "Document-level default text color: the `<mj-text>` default in the rendered MJML, inherited by every text block (Title, Paragraph, Menu, Table) that doesn't set its own `color`. Required, defaulting to `#1a1a1a` (see `DEFAULT_TEMPLATE_DEFAULTS`); customize the default per-consumer via `templateDefaults`. A block's explicit `color` or an inline text-color mark overrides it."
+				},
+				"linkColor": {
+					"type": "string",
+					"description": "Document-level link color: emitted as the global `a { color }` rule in the rendered MJML, so it cascades to every link — rich-text and menu alike. Optional: when unset, links inherit the surrounding text color (`color: inherit`), preserving the pre-#352 default. A per-block or per-item color (a Menu item's `color`, `MenuBlock.linkColor`) still overrides it."
+				},
+				"linkUnderline": {
+					"type": "boolean",
+					"description": "Whether links are underlined document-wide: drives the global `a { text-decoration }` rule (`underline` when true, `none` when false). Required, defaulting to `true` (see `DEFAULT_TEMPLATE_DEFAULTS`) — the common, more accessible email default. Applies to body (rich-text) links; buttons and menu items carry their own inline `text-decoration` and are unaffected. Set `false` to render links without an underline."
+				},
+				"fontFamily": { "type": "string" },
+				"preheaderText": { "type": "string" },
+				"locale": {
+					"type": "string",
+					"description": "BCP-47 language code for the rendered email's `<html lang>`. Drives screen-reader pronunciation. Default `'en'` via `DEFAULT_TEMPLATE_DEFAULTS`."
+				},
+				"direction": {
+					"$ref": "#/definitions/ContentDirection",
+					"description": "Writing direction of the delivered email: the canvas `dir` and the rendered `<mjml dir>`. Independent of the editor chrome (`init({ locale })`). Optional: when unset, `resolveContentDirection` falls through to the content language (`ar` / `he` / `fa` / … → `\"rtl\"`, otherwise `\"ltr\"`). An explicit `\"ltr\"` on an Arabic template is a stated decision, not a missing value."
+				}
+			},
+			"required": [
+				"width",
+				"backgroundColor",
+				"textColor",
+				"linkUnderline",
+				"fontFamily",
+				"locale"
+			],
+			"additionalProperties": false
+		},
+		"ContentDirection": {
+			"type": "string",
+			"enum": ["ltr", "rtl"],
+			"description": "Writing direction of the delivered email — the canvas `dir` and the rendered `<mjml dir>`. Independent of the editor chrome language (`init({ locale })`)."
+		}
+	}
+};
+const ajv = new Ajv({
+	allErrors: true,
+	strict: false
+});
+const typeToDef = {};
+for (const [name, def] of Object.entries(schema.definitions)) {
+	const constType = def?.properties?.type?.const;
+	if (typeof constType === "string") typeToDef[constType] = name;
+}
+const validatorCache = /* @__PURE__ */ new Map();
+function validatorFor(defName) {
+	const cached = validatorCache.get(defName);
+	if (cached) return cached;
+	const definitions = structuredClone(schema.definitions);
+	if (defName === "SectionBlock") {
+		const section = definitions.SectionBlock;
+		if (section?.properties) section.properties.children = { type: "array" };
+	}
+	const compiled = ajv.compile({
+		$ref: `#/definitions/${defName}`,
+		definitions
+	});
+	validatorCache.set(defName, compiled);
+	return compiled;
+}
+const settingsValidator = ajv.compile({
+	$ref: "#/definitions/TemplateSettings",
+	definitions: structuredClone(schema.definitions)
+});
+function flattenBlocks(blocks, basePath, out) {
+	if (!Array.isArray(blocks)) return;
+	blocks.forEach((block, i) => {
+		const path = `${basePath}[${i}]`;
+		out.push({
+			path,
+			block: block ?? null
+		});
+		if (block?.type === "section" && Array.isArray(block.children)) block.children.forEach((column, ci) => {
+			flattenBlocks(column, `${path}.children[${ci}]`, out);
+		});
+	});
+}
+function formatAjvErrors(errors, prefix) {
+	return (errors ?? []).map((e) => {
+		const where = `${prefix}${e.instancePath}`;
+		const extra = e.keyword === "additionalProperties" ? ` (${e.params.additionalProperty})` : "";
+		return `${where} ${e.message}${extra}`;
+	});
+}
+/**
+* Structural validation. Synchronous, depends only on ajv + the committed
+* schema.json (no build of the workspace packages required).
+*/
+function validateTemplate(data) {
+	const errors = [];
+	if (data === null || typeof data !== "object" || Array.isArray(data)) return {
+		valid: false,
+		errors: ["(root) must be an object"]
+	};
+	const doc = data;
+	if (!Array.isArray(doc.blocks)) errors.push("blocks must be an array");
+	if (doc.settings === null || typeof doc.settings !== "object") errors.push("settings must be an object");
+	else if (!settingsValidator(doc.settings)) errors.push(...formatAjvErrors(settingsValidator.errors, "settings"));
+	const flat = [];
+	flattenBlocks(doc.blocks, "blocks", flat);
+	for (const { path, block } of flat) {
+		const type = block?.type;
+		const defName = typeof type === "string" ? typeToDef[type] : void 0;
+		if (!defName) {
+			const known = Object.keys(typeToDef).join(", ");
+			errors.push(`${path} has unknown or missing block type ${JSON.stringify(type)} (expected one of: ${known})`);
+			continue;
+		}
+		const validate = validatorFor(defName);
+		if (!validate(block)) errors.push(...formatAjvErrors(validate.errors, `${path} (${type})`));
+	}
+	return {
+		valid: errors.length === 0,
+		errors
+	};
+}
+/**
+* Quality layer — accessibility / structure / link linting.
+*
+* Assumes structurally-valid input, so callers should run `validateTemplate`
+* first; the try/catch is a guard against a malformed template crashing the
+* linter rather than a substitute for that ordering.
+*/
+function runQualityLint(data) {
+	try {
+		return { issues: lintTemplate(data) ?? [] };
+	} catch (err) {
+		return {
+			issues: [],
+			error: err.message
+		};
+	}
+}
+//#endregion
+//#region src/custom-block/safety.ts
+const FLEX_GRID = /(^|;)\s*display\s*:\s*(inline-)?(flex|grid)\b/i;
+const POSITION = /(^|;)\s*position\s*:\s*(absolute|fixed)\b/i;
+const DIV_LAYOUT = /(^|;)\s*(width|max-width|float)\s*:/i;
+const CSS_VARIABLE = /\bvar\(\s*--/i;
+const COLOR_VALUE = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?)\(/i;
+const FORM_CONTROLS = /* @__PURE__ */ new Set([
+	"form",
+	"input",
+	"select",
+	"textarea"
+]);
+const CSS_FLEX_GRID = /(^|[;{\s])display\s*:\s*(inline-)?(flex|grid)\b/i;
+const CSS_POSITION = /(^|[;{\s])position\s*:\s*(absolute|fixed)\b/i;
+const IMPORT_MESSAGE = "`@import` is dropped by most email clients; inline the rules.";
+const FLEX_GRID_MESSAGE = "`display: flex`/`grid` is ignored by Outlook and Gmail on many clients; use tables.";
+const POSITION_MESSAGE = "`position: absolute/fixed` is unsupported in email clients.";
+const CSS_VARIABLE_MESSAGE = "CSS custom properties (`var(--…)`) are dropped by Gmail and Outlook, and the whole declaration with them; write the value itself.";
+/** A style attribute's declarations as lowercase property → raw value pairs. */
+function declarations(style) {
+	const out = [];
+	for (const part of style.split(";")) {
+		const colon = part.indexOf(":");
+		if (colon > 0) out.push([part.slice(0, colon).trim().toLowerCase(), part.slice(colon + 1)]);
+	}
+	return out;
+}
+/**
+* Whether a background image here has a colour to fall back on when images
+* are blocked: `background-color`, a colour inside the `background:`
+* shorthand, or the `bgcolor` attribute Outlook reads.
+*/
+function backgroundIssue(style, attrs) {
+	const decls = declarations(style);
+	if (!decls.some(([prop, value]) => (prop === "background" || prop === "background-image") && /url\(/i.test(value)) || "bgcolor" in attrs) return false;
+	return !decls.some(([prop, value]) => prop === "background-color" || prop === "background" && COLOR_VALUE.test(stripCssUrlsAndStrings(value)));
+}
+/** Drops `/* … *\/` comments in one linear pass; an unterminated comment drops the rest. */
+function stripCssComments(css) {
+	let out = "";
+	let i = 0;
+	for (;;) {
+		const open = css.indexOf("/*", i);
+		if (open === -1) return out + css.slice(i);
+		out += css.slice(i, open);
+		const close = css.indexOf("*/", open + 2);
+		if (close === -1) return out;
+		i = close + 2;
+	}
+}
+/**
+* Remove `url(...)` and quoted strings so the class scan can't read `.png` or
+* `"x.y"` as a selector. Linear: each opener's next position is searched for
+* again only once the cursor has passed it, so an opener that never closes
+* costs one scan, not one per occurrence. An unterminated `url(` or quote
+* drops the rest, as a CSS parser would.
+*/
+function stripCssUrlsAndStrings(css) {
+	const lower = css.toLowerCase();
+	const next = (needle, from) => {
+		const at = lower.indexOf(needle, from);
+		return at === -1 ? Infinity : at;
+	};
+	const closers = {
+		"url(": ")",
+		"\"": "\"",
+		"'": "'"
+	};
+	const pos = {
+		"url(": 0,
+		"\"": 0,
+		"'": 0
+	};
+	for (const k of Object.keys(pos)) pos[k] = next(k, 0);
+	let out = "";
+	let i = 0;
+	for (;;) {
+		let opener = "";
+		let open = Infinity;
+		for (const k of Object.keys(pos)) {
+			if (pos[k] < i) pos[k] = next(k, i);
+			if (pos[k] < open) {
+				open = pos[k];
+				opener = k;
+			}
+		}
+		if (open === Infinity) return out + css.slice(i);
+		out += css.slice(i, open);
+		const close = lower.indexOf(closers[opener], open + opener.length);
+		if (close === -1) return out;
+		i = close + 1;
+	}
+}
+/** Layout rules that hold for stylesheet text: the definition's and a `<style>`'s. */
+function cssLayoutIssues(css, path) {
+	const text = stripCssComments(css);
+	const issues = [];
+	const at = path === void 0 ? {} : { path };
+	if (CSS_FLEX_GRID.test(text)) issues.push({
+		ruleId: "safety.flex-grid",
+		severity: "error",
+		...at,
+		message: FLEX_GRID_MESSAGE
+	});
+	if (CSS_POSITION.test(text)) issues.push({
+		ruleId: "safety.position",
+		severity: "error",
+		...at,
+		message: POSITION_MESSAGE
+	});
+	if (CSS_VARIABLE.test(text)) issues.push({
+		ruleId: "safety.css-variable",
+		severity: "warning",
+		...at,
+		message: CSS_VARIABLE_MESSAGE
+	});
+	return issues;
+}
+function stylesheetIssues(def, css) {
+	const issues = [];
+	if (/@import\b/i.test(stripCssComments(css))) issues.push({
+		ruleId: "safety.import",
+		severity: "error",
+		path: "/stylesheet",
+		message: IMPORT_MESSAGE
+	});
+	issues.push(...cssLayoutIssues(css, "/stylesheet"));
+	const stripped = stripCssUrlsAndStrings(stripCssComments(css));
+	const prefix = `tplc-${def.type}-`;
+	const unscoped = [...new Set([...stripped.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map((m) => m[1]))].filter((cls) => !cls.startsWith(prefix));
+	if (unscoped.length > 0) issues.push({
+		ruleId: "safety.unscoped-class",
+		severity: "warning",
+		path: "/stylesheet",
+		message: `Classes ${unscoped.map((c) => `.${c}`).join(", ")} aren't prefixed \`${prefix}\`; the SDK doesn't scope them, so they can collide with other blocks.`
+	});
+	return issues;
+}
+function checkEmailSafety(def, rendered) {
+	const issues = [];
+	const add = (ruleId, severity, message) => issues.push({
+		ruleId,
+		severity,
+		message
+	});
+	for (const { state, html } of rendered) {
+		let inStyle = false;
+		let styleText = "";
+		const parser = new Parser({
+			onopentag(name, attrs) {
+				const style = attrs.style ?? "";
+				if (FLEX_GRID.test(style)) add("safety.flex-grid", "error", FLEX_GRID_MESSAGE);
+				if (POSITION.test(style)) add("safety.position", "error", POSITION_MESSAGE);
+				if (CSS_VARIABLE.test(style)) add("safety.css-variable", "warning", CSS_VARIABLE_MESSAGE);
+				if (backgroundIssue(style, attrs)) add("safety.bg-image-fallback", "warning", "A background image needs a fallback colour (`background-color`, a colour in `background:`, or `bgcolor`); many clients block images.");
+				if (name === "svg") add("safety.svg", "error", "Inline `<svg>` is stripped by Gmail and not drawn by Outlook; use a PNG `<img>`.");
+				if (FORM_CONTROLS.has(name)) add("safety.form", "warning", `\`<${name}>\` doesn't work in most email clients (Gmail and Outlook disable forms); link to a page instead.`);
+				if (name === "script") add("safety.script", "error", "`<script>` is stripped by every email client.");
+				if (name === "link" && (attrs.rel ?? "").toLowerCase() === "stylesheet") add("safety.external-stylesheet", "error", "External stylesheets are not loaded by email clients; use inline styles or `stylesheet`.");
+				if (name === "style") {
+					inStyle = true;
+					styleText = "";
+					add("safety.style-tag", "warning", "Move `<style>` rules into the definition's `stylesheet`, which the renderer places in `<mj-head>`.");
+				}
+				if (name === "div" && DIV_LAYOUT.test(style)) add("safety.div-layout", "warning", "A `<div>` carrying width or float is unreliable in Outlook; lay out with tables.");
+				if (name === "img") {
+					if (!("alt" in attrs)) add("safety.img-alt", "warning", "Every `<img>` needs an `alt` attribute (`alt=\"\"` for decorative images), ideally bound to a field.");
+					if (!("width" in attrs)) add("safety.img-width", "warning", "Give `<img>` a `width` attribute; Outlook ignores CSS widths on images.");
+					if ((attrs.src ?? "") === "") add("safety.empty-img-src", "warning", `An \`<img>\` renders with an empty \`src\` in the "${state}" state; wrap it in \`{% if <field> != blank %}\` (Liquid treats an empty string as true, so a bare \`{% if <field> %}\` doesn't hide it).`);
+				}
+			},
+			ontext(text) {
+				if (inStyle) styleText += text;
+			},
+			onclosetag(name) {
+				if (name === "style") {
+					inStyle = false;
+					if (/@import\b/i.test(stripCssComments(styleText))) add("safety.import", "error", IMPORT_MESSAGE);
+					issues.push(...cssLayoutIssues(styleText));
+				}
+			}
+		}, { decodeEntities: true });
+		parser.write(html);
+		parser.end();
+	}
+	if (def.stylesheet) issues.push(...stylesheetIssues(def, def.stylesheet));
+	const seen = /* @__PURE__ */ new Set();
+	return issues.filter((i) => {
+		const k = `${i.ruleId}\0${i.path ?? ""}\0${i.message}`;
+		if (seen.has(k)) return false;
+		seen.add(k);
+		return true;
+	});
+}
+//#endregion
+//#region src/custom-block/a11y.ts
+const HEX = /#[0-9a-f]{3,8}\b/i;
+const PX = /^\s*(\d+(?:\.\d+)?)px/i;
+/** The colours and font size an element sets inline, over its parent's. */
+function frameFor(attrs, parent) {
+	const frame = { ...parent };
+	if (attrs.bgcolor && isOpaqueHex(attrs.bgcolor)) frame.background = attrs.bgcolor;
+	for (const [prop, raw] of declarations(attrs.style ?? "")) {
+		const value = raw.replace(/!important/i, "").trim();
+		if (prop === "color" && isOpaqueHex(value)) frame.color = value;
+		if (prop === "background-color" && isOpaqueHex(value)) frame.background = value;
+		if (prop === "background") {
+			const hex = stripCssUrlsAndStrings(value).match(HEX)?.[0];
+			if (hex && isOpaqueHex(hex)) frame.background = hex;
+		}
+		if (prop === "font-size") {
+			const px = value.match(PX)?.[1];
+			if (px) frame.fontSize = Number(px);
+		}
+	}
+	return frame;
+}
+/** quality's own vague-link rule, run over the HTML as if it were a paragraph. */
+function vagueLinkMessages(html) {
+	const content = createDefaultTemplateContent();
+	content.blocks = [createParagraphBlock({ content: html })];
+	return lintAccessibility(content).filter((i) => i.ruleId === "a11y.link-vague-text").map((i) => i.message);
+}
+function checkAccessibility(rendered) {
+	const issues = [];
+	const add = (ruleId, message) => issues.push({
+		ruleId,
+		severity: "warning",
+		message
+	});
+	for (const { state, html } of rendered) {
+		for (const message of vagueLinkMessages(html)) add("a11y.link-vague-text", message);
+		const frames = [{}];
+		const tables = [];
+		let link = null;
+		const parser = new Parser({
+			onopentag(name, attrs) {
+				frames.push(frameFor(attrs, frames[frames.length - 1]));
+				if (name === "table") {
+					const role = (attrs.role ?? "").toLowerCase();
+					tables.push({
+						presentation: role === "presentation" || role === "none",
+						hasHeader: false
+					});
+				}
+				if (name === "th" && tables.length > 0) tables[tables.length - 1].hasHeader = true;
+				if (name === "a") link = { named: (attrs["aria-label"] ?? "").trim() !== "" || (attrs.title ?? "").trim() !== "" };
+				if (name === "img" && link && (attrs.alt ?? "").trim() !== "") link.named = true;
+			},
+			ontext(text) {
+				if (text.trim() === "") return;
+				if (link) link.named = true;
+				const { color, background, fontSize } = frames[frames.length - 1];
+				if (!color || !background) return;
+				const required = (fontSize ?? 0) >= 24 ? 3 : 4.5;
+				const ratio = getContrastRatio(color, background);
+				if (Number.isNaN(ratio) || ratio >= required) return;
+				add("a11y.contrast", `Text in ${color} on ${background} has ${ratio.toFixed(2)}:1 contrast; it needs ${required}:1.`);
+			},
+			onclosetag(name) {
+				frames.pop();
+				if (name === "table") {
+					const table = tables.pop();
+					if (table && !table.presentation && !table.hasHeader) add("a11y.table-role", "A layout `<table>` needs `role=\"presentation\"`, or screen readers read it as a data table, cell by cell. A data table needs `<th>` headers instead.");
+				}
+				if (name === "a" && link) {
+					if (!link.named) add("a11y.link-no-name", `A link has no text, \`aria-label\` or image \`alt\` in the "${state}" state, so a screen reader announces only "link".`);
+					link = null;
+				}
+			}
+		}, { decodeEntities: true });
+		parser.write(html);
+		parser.end();
+	}
+	const seen = /* @__PURE__ */ new Set();
+	return issues.filter((i) => {
+		const key = `${i.ruleId}\0${i.message}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+//#endregion
+//#region src/custom-block/definition.ts
+const validateDefinition = new Ajv({
+	allErrors: true,
+	strict: false
+}).compile({
+	$id: "https://templatical.com/schema/custom-block-definition.json",
+	$schema: "http://json-schema.org/draft-07/schema#",
+	$ref: "#/definitions/CustomBlockDefinition",
+	definitions: {
+		"CustomBlockDefinition": {
+			"type": "object",
+			"properties": {
+				"type": { "type": "string" },
+				"name": { "type": "string" },
+				"icon": { "type": "string" },
+				"description": { "type": "string" },
+				"fields": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/CustomBlockField" }
+				},
+				"template": { "type": "string" },
+				"defaultStyles": {
+					"type": "object",
+					"properties": {
+						"padding": { "$ref": "#/definitions/SpacingValue" },
+						"backgroundColor": { "type": "string" }
+					},
+					"additionalProperties": false,
+					"description": "Default block styles applied when a new instance of this custom block is created. Deep-merged over the built-in defaults — only specify the fields you want to override. Controls both the editor canvas wrapper and the rendered MJML/email output."
+				},
+				"stylesheet": {
+					"type": "string",
+					"description": "Optional CSS rules attached to this custom block definition. Emitted once (deduped across instances) into `<mj-head><mj-style>…</mj-style></mj-head>` in the rendered MJML, and adopted into the editor canvas (shadow root or light-DOM mount) so authored responsive/hover/font behavior previews inside the editor.\n\nUse this for media queries, hover states, or any CSS that should apply once per definition rather than per block instance. Class names are not scoped by the SDK — namespace them yourself (e.g. `.tplc-<type>-<el>`) to avoid collisions with other definitions or built-in editor styles."
+				}
+			},
+			"required": [
+				"type",
+				"name",
+				"fields",
+				"template"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockField": { "anyOf": [
+			{ "$ref": "#/definitions/CustomBlockTextField" },
+			{ "$ref": "#/definitions/CustomBlockTextareaField" },
+			{ "$ref": "#/definitions/CustomBlockImageField" },
+			{ "$ref": "#/definitions/CustomBlockColorField" },
+			{ "$ref": "#/definitions/CustomBlockNumberField" },
+			{ "$ref": "#/definitions/CustomBlockSelectField" },
+			{ "$ref": "#/definitions/CustomBlockBooleanField" },
+			{ "$ref": "#/definitions/CustomBlockRepeatableField" }
+		] },
+		"CustomBlockTextField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "text"
+				},
+				"default": { "type": "string" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockTextareaField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "textarea"
+				},
+				"default": { "type": "string" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockImageField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "image"
+				},
+				"default": { "type": "string" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockColorField": {
+			"type": "object",
+			"properties": {
+				"presets": {
+					"type": "array",
+					"items": { "type": "string" },
+					"description": "Preset colors rendered as a clickable grid inside every color picker popover. Each entry is a hex string (`'#0b5cff'`); clicking one applies it, and the preset matching the current value is marked selected (matched case-insensitively). The grid supplements the wheel and hex input unless `allowCustom` is `false`."
+				},
+				"allowCustom": {
+					"type": "boolean",
+					"description": "Allow free-form color entry — the wheel and hex input — alongside the presets. Defaults to `true`.\n\nSet to `false` together with `presets` to lock authors to the preset palette: the popover then offers only the preset grid, with no wheel or hex field (a white-label / brand-kit constraint). Ignored with a warning when no `presets` are configured — hiding the only inputs would leave the picker with no way to choose a color."
+				},
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "color"
+				},
+				"default": { "type": "string" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false,
+			"description": "A color-picker field. Beyond the shared field props it accepts the same flat `presets` / `allowCustom` pair as the editor-wide `colors` config (their shapes are derived from `ColorsConfig`, so the two can't drift), scoping this one field to a color *role* — e.g. a button-color field offering only the brand's accent/ink pair while other color fields inherit the global palette.\n\n**Narrowing only — of the author's freedom, not the palette.** A field can restrict what authors may do (lock this field, or give it its own `presets`), but never unlock what the editor locked. Its `presets` *replace* the editor-wide grid rather than intersecting it, so a locked field may offer colors outside `colors.presets`:\n\n- `presets` — entries are validated exactly like editor-level presets   (`#rgb` / `#rrggbb` hex; invalid ones are skipped with a console warning   naming the block and field). A non-empty valid list replaces the editor's   palette for this field; leaving it unset, passing `[]`, or passing only   invalid entries all inherit the editor's palette.\n- `allowCustom` — `false` locks this field to its palette even while the rest   of the editor allows free-form entry. `true` cannot unlock a field when the   editor-wide `colors.allowCustom` is `false`; it is ignored with a warning."
+		},
+		"CustomBlockNumberField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "number"
+				},
+				"default": { "type": "number" },
+				"min": { "type": "number" },
+				"max": { "type": "number" },
+				"step": { "type": "number" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockSelectField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "select"
+				},
+				"options": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/SelectOption" }
+				},
+				"default": { "type": "string" }
+			},
+			"required": [
+				"key",
+				"label",
+				"options",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"SelectOption": {
+			"type": "object",
+			"properties": {
+				"label": { "type": "string" },
+				"value": { "type": "string" }
+			},
+			"required": ["label", "value"],
+			"additionalProperties": false
+		},
+		"CustomBlockBooleanField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "boolean"
+				},
+				"default": { "type": "boolean" }
+			},
+			"required": [
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockRepeatableField": {
+			"type": "object",
+			"properties": {
+				"key": { "type": "string" },
+				"label": { "type": "string" },
+				"required": { "type": "boolean" },
+				"placeholder": { "type": "string" },
+				"readOnly": { "type": "boolean" },
+				"type": {
+					"type": "string",
+					"const": "repeatable"
+				},
+				"fields": {
+					"type": "array",
+					"items": { "$ref": "#/definitions/CustomBlockRepeatableItemField" }
+				},
+				"default": {
+					"type": "array",
+					"items": {
+						"type": "object",
+						"additionalProperties": {}
+					}
+				},
+				"minItems": { "type": "number" },
+				"maxItems": { "type": "number" }
+			},
+			"required": [
+				"fields",
+				"key",
+				"label",
+				"type"
+			],
+			"additionalProperties": false
+		},
+		"SpacingValue": {
+			"type": "object",
+			"properties": {
+				"top": { "type": "number" },
+				"right": { "type": "number" },
+				"bottom": { "type": "number" },
+				"left": { "type": "number" }
+			},
+			"required": [
+				"top",
+				"right",
+				"bottom",
+				"left"
+			],
+			"additionalProperties": false
+		},
+		"CustomBlockRepeatableItemField": { "anyOf": [
+			{ "$ref": "#/definitions/CustomBlockTextField" },
+			{ "$ref": "#/definitions/CustomBlockTextareaField" },
+			{ "$ref": "#/definitions/CustomBlockImageField" },
+			{ "$ref": "#/definitions/CustomBlockColorField" },
+			{ "$ref": "#/definitions/CustomBlockNumberField" },
+			{ "$ref": "#/definitions/CustomBlockSelectField" },
+			{ "$ref": "#/definitions/CustomBlockBooleanField" }
+		] }
+	}
+});
+const validateRecipe = new Ajv({
+	allErrors: false,
+	strict: false
+}).compile({
+	type: "object",
+	additionalProperties: false,
+	required: [
+		"label",
+		"request",
+		"map"
+	],
+	properties: {
+		label: {
+			type: "string",
+			minLength: 1
+		},
+		request: {
+			type: "object",
+			additionalProperties: false,
+			required: ["url"],
+			properties: {
+				method: { enum: ["GET", "POST"] },
+				url: {
+					type: "string",
+					minLength: 1
+				},
+				headers: {
+					type: "object",
+					additionalProperties: { type: "string" }
+				},
+				body: { type: "string" }
+			}
+		},
+		map: {
+			type: "object",
+			additionalProperties: {
+				type: "string",
+				minLength: 1
+			}
+		}
+	}
+});
+function schemaIssues(errors, base = "") {
+	return (errors ?? []).map((e) => ({
+		ruleId: "schema",
+		severity: "error",
+		path: `${base}${e.instancePath}` || "/",
+		message: `${base}${e.instancePath || ""} ${e.message ?? "is invalid"}${e.keyword === "additionalProperties" ? ` (\`${e.params.additionalProperty}\`)` : ""}`.trim()
+	}));
+}
+const isCount = (n) => n === void 0 || Number.isInteger(n) && n >= 0;
+function fieldIssues(fields, base) {
+	const issues = [];
+	const seen = /* @__PURE__ */ new Set();
+	fields.forEach((field, i) => {
+		const path = `${base}/${i}`;
+		if (seen.has(field.key)) issues.push({
+			ruleId: "field.duplicate-key",
+			severity: "error",
+			path,
+			message: `Field key \`${field.key}\` is used twice; the second would overwrite the first's value.`
+		});
+		seen.add(field.key);
+		if (field.type === "number" && field.min !== void 0 && field.max !== void 0 && field.min > field.max) issues.push({
+			ruleId: "field.range",
+			severity: "error",
+			path,
+			message: `\`${field.key}\` has min ${field.min} above max ${field.max}, so no value is allowed.`
+		});
+		if (field.type === "number" && typeof field.default === "number") {
+			const below = field.min !== void 0 && field.default < field.min;
+			const above = field.max !== void 0 && field.default > field.max;
+			if (below || above) issues.push({
+				ruleId: "field.default-range",
+				severity: "error",
+				path: `${path}/default`,
+				message: `\`${field.key}\` defaults to ${field.default}, outside ${field.min ?? "-∞"}–${field.max ?? "∞"}.`
+			});
+		}
+		if (field.type === "select" && field.default !== void 0 && !(field.options ?? []).some((o) => o.value === field.default)) issues.push({
+			ruleId: "field.default-option",
+			severity: "error",
+			path: `${path}/default`,
+			message: `\`${field.key}\` defaults to "${String(field.default)}", which is not one of its options.`
+		});
+		if (field.type === "repeatable") {
+			const { minItems, maxItems } = field;
+			if (!isCount(minItems) || !isCount(maxItems)) issues.push({
+				ruleId: "field.items-range",
+				severity: "error",
+				path,
+				message: `\`${field.key}\`'s minItems and maxItems must be whole numbers of 0 or more.`
+			});
+			else if (minItems !== void 0 && maxItems !== void 0 && minItems > maxItems) issues.push({
+				ruleId: "field.items-range",
+				severity: "error",
+				path,
+				message: `\`${field.key}\` has minItems ${minItems} above maxItems ${maxItems}, so no list length is allowed.`
+			});
+			else if (Array.isArray(field.default)) {
+				const n = field.default.length;
+				if (minItems !== void 0 && n < minItems || maxItems !== void 0 && n > maxItems) issues.push({
+					ruleId: "field.default-items",
+					severity: "error",
+					path: `${path}/default`,
+					message: `\`${field.key}\` defaults to ${n} item(s), outside ${minItems ?? 0}–${maxItems ?? "∞"}; the palette would insert a list the editor won't allow.`
+				});
+			}
+			if (field.fields) issues.push(...fieldIssues(field.fields, `${path}/fields`));
+		}
+	});
+	return issues;
+}
+/**
+* A module's `dataSource` is `{ label, onFetch }` with a function, which the
+* schema can't describe (the generator hides functions). A JSON working file
+* can't hold a function at all, so there it is always an error that points at
+* `dataSourcePreview`.
+*/
+function dataSourceIssues(dataSource) {
+	const ds = dataSource;
+	const issue = (message) => [{
+		ruleId: "schema",
+		severity: "error",
+		path: "/dataSource",
+		message
+	}];
+	if (ds === null || typeof ds !== "object" || Array.isArray(ds)) return issue("`dataSource` must be an object with `label` and `onFetch`.");
+	if (typeof ds.onFetch !== "function") return issue("`dataSource.onFetch` must be a function. A JSON working file can't hold one: preview with `dataSourcePreview`, and write `dataSource` in the module at handoff.");
+	if (typeof ds.label !== "string" || ds.label === "") return issue("`dataSource.label` must be a non-empty string.");
+	return [];
+}
+function validateCustomBlockDefinition(data) {
+	if (data === null || typeof data !== "object" || Array.isArray(data)) return {
+		valid: false,
+		issues: [{
+			ruleId: "schema",
+			severity: "error",
+			path: "/",
+			message: "A custom block definition must be a JSON object."
+		}]
+	};
+	const { dataSourcePreview, dataSource, ...definition } = data;
+	const issues = [];
+	if (dataSource !== void 0) issues.push(...dataSourceIssues(dataSource));
+	if (!validateDefinition(definition)) issues.push(...schemaIssues(validateDefinition.errors));
+	if (dataSourcePreview !== void 0 && !validateRecipe(dataSourcePreview)) issues.push(...schemaIssues(validateRecipe.errors, "/dataSourcePreview"));
+	if (issues.length === 0) issues.push(...fieldIssues(definition.fields, "/fields"));
+	return {
+		valid: !issues.some((i) => i.severity === "error"),
+		issues
+	};
+}
+//#endregion
+//#region src/custom-block/liquid.ts
+function createLiquid() {
+	return new Liquid({
+		strictVariables: false,
+		strictFilters: false,
+		templates: {}
+	});
+}
+const LIQUID_GLOBALS = /* @__PURE__ */ new Set(["forloop"]);
+const FILE_TAGS = /* @__PURE__ */ new Set([
+	"include",
+	"render",
+	"layout"
+]);
+const NO_PARTIALS = { partials: false };
+/** A tag's child templates, from liquidjs's static-analysis generator. */
+function childTemplates(template) {
+	if (!template.children) return [];
+	const gen = template.children(false, true);
+	let step = gen.next();
+	while (!step.done) step = gen.next();
+	return step.value ?? [];
+}
+/** Every template in the tree, depth-first, nested tags included. */
+function allTemplates(templates) {
+	return templates.flatMap((t) => [t, ...allTemplates(childTemplates(t))]);
+}
+/** Every `for` tag in the tree, nested ones included. */
+function forTags(templates) {
+	return allTemplates(templates).filter((t) => t instanceof ForTag);
+}
+/** Names of the file-loading tags in the tree, each once, in source order. */
+function fileTags(templates) {
+	const names = allTemplates(templates).filter((t) => t instanceof Tag && FILE_TAGS.has(t.name)).map((t) => t.name);
+	return [...new Set(names)];
+}
+/** How many `{{ }}` outputs in the tree reach the text without a `json` filter. */
+function outputsWithoutJson(templates) {
+	return allTemplates(templates).filter((t) => t instanceof Output && !t.value.filters.some((f) => f.name === "json")).length;
+}
+/** The message for a template or recipe that uses a file-loading tag. */
+function fileTagMessage(name, where) {
+	return `\`{% ${name} %}\` loads another template file, and ${where} has none to load. Write its content inline instead.`;
+}
+/**
+* The field a loop iterates, when its collection is a bare identifier.
+* `for x in a.b` iterates a property of `a`, not `a`, so it has none.
+*/
+function bareCollection(tag) {
+	const c = tag.collection;
+	if (c.variable !== void 0 || c.props?.length !== 1) return null;
+	const name = c.props[0].content;
+	return typeof name === "string" ? name : null;
+}
+function checkLiquid(def) {
+	const engine = createLiquid();
+	let parsed;
+	try {
+		parsed = engine.parse(def.template);
+	} catch (err) {
+		return [{
+			ruleId: "liquid.parse",
+			severity: "error",
+			path: "/template",
+			message: `The template does not parse: ${err.message}`
+		}];
+	}
+	const issues = fileTags(parsed).map((name) => ({
+		ruleId: "liquid.file-tag",
+		severity: "error",
+		path: "/template",
+		message: fileTagMessage(name, "a custom block")
+	}));
+	const fields = new Map(def.fields.map((f, i) => [f.key, {
+		field: f,
+		index: i
+	}]));
+	const globals = new Set(engine.globalVariableSegmentsSync(def.template, NO_PARTIALS).map((segments) => String(segments[0])).filter((name) => !LIQUID_GLOBALS.has(name)));
+	for (const name of globals) if (!fields.has(name)) issues.push({
+		ruleId: "liquid.undefined-variable",
+		severity: "error",
+		path: "/template",
+		message: `The template reads \`${name}\`, which no field defines.`
+	});
+	const recipeReads = /* @__PURE__ */ new Set();
+	const request = def.dataSourcePreview?.request;
+	for (const text of [request?.url, request?.body]) {
+		if (text === void 0) continue;
+		try {
+			for (const [name] of engine.globalVariableSegmentsSync(text, NO_PARTIALS)) recipeReads.add(String(name));
+		} catch {}
+	}
+	for (const [key, { index }] of fields) if (!globals.has(key) && !recipeReads.has(key)) issues.push({
+		ruleId: "liquid.unused-field",
+		severity: "warning",
+		path: `/fields/${index}`,
+		message: `Field \`${key}\` is never read by the template or the data-source recipe.`
+	});
+	for (const loop of forTags(parsed)) {
+		const local = loop.variable;
+		const collection = bareCollection(loop);
+		if (collection === null) continue;
+		const target = fields.get(collection)?.field;
+		if (!target) continue;
+		if (target.type !== "repeatable") {
+			issues.push({
+				ruleId: "liquid.loop-not-repeatable",
+				severity: "error",
+				path: "/template",
+				message: `\`{% for ${local} in ${collection} %}\` iterates \`${collection}\`, which is a ${target.type} field, not a repeatable.`
+			});
+			continue;
+		}
+		for (const [head, sub] of engine.variableSegmentsSync(loop.templates, NO_PARTIALS)) {
+			if (String(head) !== local || typeof sub !== "string") continue;
+			if (!target.fields.some((f) => f.key === sub)) issues.push({
+				ruleId: "liquid.unknown-item-key",
+				severity: "error",
+				path: "/template",
+				message: `\`${local}.${sub}\` reads \`${sub}\`, which \`${collection}\`'s items don't define.`
+			});
+		}
+	}
+	return issues;
+}
+//#endregion
+//#region src/custom-block/recipe.ts
+const ENV_REF = /\$\{env:([A-Za-z_][A-Za-z0-9_]*)\}/g;
+const LIQUID = /\{\{|\{%/;
+const UNSAFE_KEYS = /* @__PURE__ */ new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
+const CREDENTIAL_WORD = /^(?:authorization|auth|cookie|key|apikey|password|credentials?|sessionid)$|(?:token|secret)$/;
+function namesCredential(header) {
+	const words = header.toLowerCase().split(/[-_]/);
+	return words.some((w, i) => CREDENTIAL_WORD.test(w) || w === "session" && words[i + 1] === "id");
+}
+const HOST_TEMPLATE_ERROR = "The request URL's scheme and host must be literal; Liquid may only follow the first `/` after the host.";
+/**
+* Where the URL's scheme and authority end: the first `/`, `?` or `#` after
+* `://`, or the whole string when there is no `://`. Anything before this
+* index decides the origin, so it must hold no Liquid.
+*/
+function authorityEnd(url) {
+	const scheme = url.indexOf("://");
+	if (scheme < 0) return url.length;
+	const rest = url.slice(scheme + 3).search(/[/?#]/);
+	return rest < 0 ? url.length : scheme + 3 + rest;
+}
+/** The recipe URL's origin, or null when Liquid can reach it. */
+function literalOrigin(url) {
+	const prefix = url.slice(0, authorityEnd(url));
+	if (LIQUID.test(prefix)) return null;
+	try {
+		return new URL(prefix).origin;
+	} catch {
+		return null;
+	}
+}
+function encodeValue(value) {
+	if (value === null || value === void 0) return "";
+	if (typeof value === "string" || typeof value === "number") return encodeURIComponent(String(value));
+	return encodeURIComponent(JSON.stringify(value));
+}
+function getPath(value, path) {
+	const parts = path.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+	let cur = value;
+	for (const part of parts) {
+		if (cur === null || typeof cur !== "object") return void 0;
+		cur = cur[part];
+	}
+	return cur;
+}
+function checkRecipe(def) {
+	const r = def.dataSourcePreview;
+	if (!r) return [];
+	const issues = [];
+	const keys = new Set(def.fields.map((f) => f.key));
+	const add = (severity) => (ruleId, path, message) => issues.push({
+		ruleId,
+		severity,
+		path: `/dataSourcePreview${path}`,
+		message
+	});
+	const err = add("error");
+	const warn = add("warning");
+	const engine = createLiquid();
+	for (const [part, text] of [["/request/url", r.request.url], ["/request/body", r.request.body]]) {
+		if (text === void 0) continue;
+		if (new RegExp(ENV_REF.source).test(text)) err("recipe.env-outside-headers", part, "`${env:…}` is resolved only in header values; keep secrets out of the URL and body.");
+		try {
+			for (const [name] of engine.globalVariableSegmentsSync(text, NO_PARTIALS)) if (!keys.has(String(name))) err("recipe.undefined-variable", part, `The recipe reads \`${String(name)}\`, which no field defines.`);
+			const parsed = engine.parse(text);
+			for (const name of fileTags(parsed)) err("recipe.file-tag", part, fileTagMessage(name, "a recipe"));
+			if (part === "/request/body" && /^\s*[[{]/.test(text) && outputsWithoutJson(parsed) > 0) warn("recipe.body-unescaped", part, "A JSON body interpolates a value without `| json`, so a quote in it breaks the JSON. Write `{{ key | json }}`, which adds the quotes.");
+		} catch (e) {
+			err("recipe.undefined-variable", part, `Does not parse: ${e.message}`);
+		}
+	}
+	if (r.request.url.includes("://") && LIQUID.test(r.request.url.slice(0, authorityEnd(r.request.url)))) err("recipe.url-host-template", "/request/url", HOST_TEMPLATE_ERROR);
+	const probeUrl = replaceLiquid(r.request.url);
+	let parses = true;
+	try {
+		new URL(probeUrl);
+	} catch {
+		parses = false;
+	}
+	if (!/^https?:\/\//i.test(probeUrl) || !parses) err("recipe.url", "/request/url", "The request URL must be an absolute http(s) URL.");
+	if (r.request.body !== void 0 && (r.request.method ?? "GET") !== "POST") err("recipe.body-without-post", "/request/body", "A `body` is sent only with `\"method\": \"POST\"`; a GET request can't carry one.");
+	for (const [name, value] of Object.entries(r.request.headers ?? {})) if (LIQUID.test(value)) err("recipe.field-in-header", `/request/headers/${name}`, `Header \`${name}\` interpolates a field; headers take only \`\${env:NAME}\`.`);
+	else if (namesCredential(name) && !new RegExp(ENV_REF.source).test(value)) err("recipe.literal-secret", `/request/headers/${name}`, `Header \`${name}\` holds a literal credential. Use \`\${env:NAME}\` and export the variable instead.`);
+	for (const field of Object.keys(r.map)) if (!keys.has(field)) err("recipe.unknown-map-key", `/map/${field}`, `\`map\` writes \`${field}\`, which no field defines.`);
+	return issues;
+}
+async function runRecipe(recipe, fieldValues, { env = process.env, fetch: doFetch = fetch, timeoutMs = 1e4 } = {}) {
+	const expectedOrigin = literalOrigin(recipe.request.url);
+	if (expectedOrigin === null) return {
+		ok: false,
+		error: HOST_TEMPLATE_ERROR
+	};
+	const engine = createLiquid();
+	const encoded = Object.fromEntries(Object.entries(fieldValues).map(([k, v]) => [k, encodeValue(v)]));
+	let url;
+	let body;
+	try {
+		url = String(await engine.parseAndRender(recipe.request.url, encoded));
+		body = recipe.request.body === void 0 ? void 0 : String(await engine.parseAndRender(recipe.request.body, fieldValues));
+	} catch (e) {
+		return {
+			ok: false,
+			error: `The request template does not render: ${e.message}`
+		};
+	}
+	let renderedOrigin = null;
+	try {
+		renderedOrigin = new URL(url).origin;
+	} catch {}
+	/* v8 ignore start */
+	if (renderedOrigin !== expectedOrigin) return {
+		ok: false,
+		error: `The rendered URL's origin (${renderedOrigin ?? "unparseable"}) differs from the recipe's (${expectedOrigin}); no request was made.`
+	};
+	/* v8 ignore stop */
+	const secrets = [];
+	const headers = {};
+	for (const [name, template] of Object.entries(recipe.request.headers ?? {})) {
+		let missing;
+		headers[name] = template.replace(ENV_REF, (_, variable) => {
+			const value = env[variable];
+			if (value === void 0 || value === "") {
+				missing ??= variable;
+				return "";
+			}
+			secrets.push(value);
+			return value;
+		});
+		if (missing) return {
+			ok: false,
+			error: `Environment variable ${missing} is not set. Export it in the shell that runs the live server.`
+		};
+	}
+	const redact = (s) => secrets.reduce((acc, secret) => acc.split(secret).join("***"), s);
+	const redactDeep = (v) => {
+		if (typeof v === "string") return redact(v);
+		if (Array.isArray(v)) return v.map(redactDeep);
+		if (v !== null && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, redactDeep(x)]));
+		return v;
+	};
+	const method = recipe.request.method ?? "GET";
+	try {
+		const res = await doFetch(url, {
+			method,
+			headers,
+			body,
+			redirect: "manual",
+			signal: AbortSignal.timeout(timeoutMs)
+		});
+		if (res.status >= 300 && res.status < 400) {
+			const location = res.headers.get("location") ?? "(none)";
+			return {
+				ok: false,
+				status: res.status,
+				error: redact(`${method} ${url} redirected (${res.status}) to ${location}. Redirects are not followed; point the recipe at the final URL.`)
+			};
+		}
+		const text = await res.text();
+		if (!res.ok) return {
+			ok: false,
+			status: res.status,
+			error: `${redact(`${method} ${url} returned ${res.status}: `)}${redact(text).slice(0, 200)}`
+		};
+		let json;
+		try {
+			json = JSON.parse(text);
+		} catch {
+			return {
+				ok: false,
+				status: res.status,
+				error: redact(`${method} ${url} did not return JSON.`)
+			};
+		}
+		const values = {};
+		const unmapped = [];
+		for (const [field, path] of Object.entries(recipe.map)) {
+			if (UNSAFE_KEYS.has(field)) continue;
+			const v = getPath(json, path);
+			if (v === void 0) unmapped.push(field);
+			else values[field] = redactDeep(v);
+		}
+		return {
+			ok: true,
+			status: res.status,
+			values,
+			unmapped
+		};
+	} catch (e) {
+		return {
+			ok: false,
+			error: redact(`${method} ${url} failed: ${e.message}`)
+		};
+	}
+}
+/** Replaces each `{{…}}` / `{%…%}` span with "x" in one linear pass; an unterminated opener swallows the rest. */
+function replaceLiquid(text) {
+	const MISSING = Infinity;
+	const next = (needle, from) => {
+		const at = text.indexOf(needle, from);
+		return at === -1 ? MISSING : at;
+	};
+	let out = "";
+	let i = 0;
+	let a = next("{{", 0);
+	let b = next("{%", 0);
+	for (;;) {
+		if (a < i) a = next("{{", i);
+		if (b < i) b = next("{%", i);
+		const open = Math.min(a, b);
+		if (open === MISSING) return out + text.slice(i);
+		out += text.slice(i, open);
+		const close = text.indexOf(open === a ? "}}" : "%}", open + 2);
+		if (close === -1) return out + "x";
+		out += "x";
+		i = close + 2;
+	}
+}
+//#endregion
+//#region src/custom-block/specimen.ts
+const SPECIMEN_STATES = [
+	"defaults",
+	"empty",
+	"long",
+	"min-items",
+	"max-items",
+	"flipped"
+];
+function fieldDefault(f) {
+	if (f.default !== void 0) return structuredClone(f.default);
+	if (f.type === "repeatable") return [];
+	if (f.type === "boolean") return false;
+	if (f.type === "number") return 0;
+	return "";
+}
+function itemFrom(fields) {
+	return Object.fromEntries(fields.map((f) => [f.key, fieldDefault(f)]));
+}
+function items(f, n) {
+	const seeds = Array.isArray(f.default) && f.default.length > 0 ? f.default : [itemFrom(f.fields)];
+	return Array.from({ length: n }, (_, i) => structuredClone(seeds[i % seeds.length]));
+}
+function lengthen(f, v) {
+	if (f.type === "text" || f.type === "textarea") {
+		const base = typeof v === "string" && v || f.placeholder || f.label;
+		return [
+			base,
+			base,
+			base
+		].join(" ");
+	}
+	if (f.type === "number") return f.max ?? v;
+	if (f.type === "repeatable" && Array.isArray(v)) return v.map((item) => Object.fromEntries(f.fields.map((s) => [s.key, lengthen(s, item[s.key])])));
+	return v;
+}
+function clear(f, v) {
+	if (f.required) return v;
+	if (f.type === "boolean") return false;
+	if (f.type === "number") return null;
+	if (f.type === "repeatable") return items(f, f.minItems ?? 0);
+	return "";
+}
+function buildSpecimen(def) {
+	const defaults = createCustomBlock(def).fieldValues;
+	const map = (fn) => Object.fromEntries(def.fields.map((f) => [f.key, fn(f, structuredClone(defaults[f.key]))]));
+	const out = [
+		{
+			state: "defaults",
+			fieldValues: structuredClone(defaults)
+		},
+		{
+			state: "empty",
+			fieldValues: map(clear)
+		},
+		{
+			state: "long",
+			fieldValues: map(lengthen)
+		}
+	];
+	const repeatables = def.fields.filter((f) => f.type === "repeatable");
+	if (repeatables.length > 0) {
+		const sized = (pick) => ({
+			...structuredClone(defaults),
+			...Object.fromEntries(repeatables.map((f) => [f.key, items(f, pick(f))]))
+		});
+		out.push({
+			state: "min-items",
+			fieldValues: sized((f) => f.minItems ?? 0)
+		});
+		out.push({
+			state: "max-items",
+			fieldValues: sized((f) => Math.max(f.minItems ?? 0, f.maxItems ?? 6))
+		});
+	}
+	const booleans = def.fields.filter((f) => f.type === "boolean");
+	if (booleans.length > 0) out.push({
+		state: "flipped",
+		fieldValues: {
+			...structuredClone(defaults),
+			...Object.fromEntries(booleans.map((f) => [f.key, !defaults[f.key]]))
+		}
+	});
+	return out;
+}
+/**
+* The live preview's "fetched" state: the block filled from the real
+* endpoint and marked fetched, so read-only fields lock as they do in
+* production. A failed request puts its error on the label instead.
+*/
+function fetchedSpecimenBlocks(def, fetched) {
+	const id = "specimen-fetched";
+	if (!fetched.ok) return [createParagraphBlock({
+		id: `${id}-label`,
+		content: `<p><strong>Specimen:</strong> fetched. The request failed: ${escapeHtml(fetched.error)}</p>`
+	})];
+	return [createParagraphBlock({
+		id: `${id}-label`,
+		content: "<p><strong>Specimen:</strong> fetched</p>"
+	}), {
+		...createCustomBlock(def),
+		id,
+		fieldValues: fetched.fieldValues,
+		dataSourceFetched: true
+	}];
+}
+/** The id each state's custom block gets in the specimen sheet; its label is `${id}-label`. */
+function specimenBlockId(state) {
+	return `specimen-${state}`;
+}
+function buildSpecimenTemplate(def, host, only) {
+	const content = host ? structuredClone(host) : createDefaultTemplateContent();
+	for (const instance of buildSpecimen(def)) {
+		if (only && instance.state !== only) continue;
+		const id = specimenBlockId(instance.state);
+		content.blocks.push(createParagraphBlock({
+			id: `${id}-label`,
+			content: `<p><strong>Specimen:</strong> ${instance.state}</p>`
+		}), {
+			...createCustomBlock(def),
+			id,
+			fieldValues: instance.fieldValues
+		});
+	}
+	return content;
+}
+//#endregion
+//#region src/custom-block/render.ts
+async function renderStates(def, instances = buildSpecimen(def)) {
+	const liquid = createLiquid();
+	return Promise.all(instances.map(async (i) => ({
+		state: i.state,
+		html: String(await liquid.parseAndRender(def.template, i.fieldValues))
+	})));
+}
+async function renderSpecimenMjml(def, template = buildSpecimenTemplate(def)) {
+	const liquid = createLiquid();
+	return renderToMjml(template, {
+		renderCustomBlock: async (block) => String(await liquid.parseAndRender(def.template, block.fieldValues)),
+		getCustomBlockStylesheet: (customType) => customType === def.type ? def.stylesheet : void 0
+	});
+}
+//#endregion
+//#region src/custom-block/check.ts
+const finish = (issues) => ({
+	valid: !issues.some((i) => i.severity === "error"),
+	issues
+});
+async function checkCustomBlock(data, { compileMjml } = {}) {
+	const structural = validateCustomBlockDefinition(data);
+	if (!structural.valid) return structural;
+	const def = data;
+	const issues = [...structural.issues, ...checkRecipe(def)];
+	const liquid = checkLiquid(def);
+	issues.push(...liquid);
+	if (liquid.some((i) => i.ruleId === "liquid.parse" || i.ruleId === "liquid.file-tag")) return finish(issues);
+	let rendered;
+	try {
+		rendered = await renderStates(def);
+	} catch (err) {
+		issues.push({
+			ruleId: "liquid.render",
+			severity: "error",
+			path: "/template",
+			message: `The template does not render: ${err.message}`
+		});
+		return finish(issues);
+	}
+	issues.push(...checkEmailSafety(def, rendered));
+	issues.push(...checkAccessibility(rendered));
+	const mjml = await renderSpecimenMjml(def);
+	const stylesheet = def.stylesheet?.trim();
+	if (stylesheet && !mjml.includes(stylesheet)) issues.push({
+		ruleId: "render.stylesheet-missing",
+		severity: "error",
+		message: "The stylesheet did not reach <mj-head> in the rendered MJML."
+	});
+	if (compileMjml) for (const e of (await compileMjml(mjml)).errors) {
+		const o = e;
+		issues.push({
+			ruleId: "render.mjml",
+			severity: "warning",
+			message: o.formattedMessage ?? o.message ?? String(e)
+		});
+	}
+	return finish(issues);
+}
+//#endregion
+export { buildSpecimenTemplate as a, runRecipe as c, schema as d, validateTemplate as f, buildSpecimen as i, validateCustomBlockDefinition as l, renderSpecimenMjml as n, fetchedSpecimenBlocks as o, SPECIMEN_STATES as r, checkRecipe as s, checkCustomBlock as t, runQualityLint as u };
+
+//# sourceMappingURL=custom-block-CsZN9qMM.js.map