@maily-to/shared 0.0.2 → 2.0.0-beta.1

package/dist/index.cjs

@@ -0,0 +1,1081 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/alignment.ts
+const TEXT_ALIGNMENTS = {
+	LEFT: "left",
+	CENTER: "center",
+	RIGHT: "right"
+};
+const allowedTextAligns = Object.freeze(Object.values(TEXT_ALIGNMENTS));
+const DEFAULT_TEXT_ALIGN = TEXT_ALIGNMENTS.LEFT;
+function isAllowedTextAlignment(value) {
+	return typeof value === "string" && allowedTextAligns.includes(value);
+}
+//#endregion
+//#region src/field-mode.ts
+/**
+* Controls how multi-value fields (padding, margin, border) are edited.
+* "none" disables the field, "uniform" links all sides to one value,
+* "mixed" allows independent per-side values, "preset" uses predefined
+* size options (e.g. small/medium/large).
+*/
+const FIELD_MODE = {
+	NONE: "none",
+	MIXED: "mixed",
+	UNIFORM: "uniform",
+	PRESET: "preset"
+};
+const allowedFieldModes = Object.values(FIELD_MODE);
+function isAllowedFieldMode(mode) {
+	return typeof mode === "string" && allowedFieldModes.includes(mode);
+}
+//#endregion
+//#region src/border.ts
+const BORDER_STYLES = {
+	SOLID: "solid",
+	DASHED: "dashed",
+	DOTTED: "dotted"
+};
+const DEFAULT_BORDER_STYLE = BORDER_STYLES.SOLID;
+const DEFAULT_BORDER_COLOR = "#000000";
+/**
+* Converts a BorderStyleConfig into CSS properties for inline styles.
+* When all widths or radii are equal (or the mode is "uniform"), emits
+* shorthand CSS; otherwise emits per-side longhand properties.
+*/
+function getBorderStyle(config) {
+	const { borderStyle = DEFAULT_BORDER_STYLE, borderColor = DEFAULT_BORDER_COLOR, borderWidthMode, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadiusMode, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius } = config;
+	const isBorderWidthUniform = borderWidthMode === FIELD_MODE.UNIFORM || borderLeftWidth === borderRightWidth && borderRightWidth === borderBottomWidth && borderBottomWidth === borderTopWidth;
+	const isBorderRadiusUniform = borderRadiusMode === FIELD_MODE.UNIFORM || borderTopLeftRadius === borderTopRightRadius && borderTopRightRadius === borderBottomRightRadius && borderBottomRightRadius === borderBottomLeftRadius;
+	return {
+		...isBorderWidthUniform ? { border: `${borderTopWidth}px ${borderStyle} ${borderColor}` } : {
+			borderTopWidth: `${borderTopWidth}px`,
+			borderRightWidth: `${borderRightWidth}px`,
+			borderBottomWidth: `${borderBottomWidth}px`,
+			borderLeftWidth: `${borderLeftWidth}px`,
+			borderStyle,
+			borderColor
+		},
+		...isBorderRadiusUniform ? { borderRadius: `${borderTopLeftRadius}px` } : { borderRadius: `${borderTopLeftRadius}px ${borderTopRightRadius}px ${borderBottomRightRadius}px ${borderBottomLeftRadius}px` }
+	};
+}
+//#endregion
+//#region src/button-kind.ts
+/**
+* Button layout kinds.
+* "tight" renders the button at its content width,
+* "full-width" stretches it to fill the container.
+*/
+const BUTTON_KINDS = {
+	TIGHT: "tight",
+	FULL_WIDTH: "full-width"
+};
+const allowedButtonKinds = Object.freeze(Object.values(BUTTON_KINDS));
+const DEFAULT_BUTTON_KIND = BUTTON_KINDS.TIGHT;
+function isAllowedButtonKind(value) {
+	return typeof value === "string" && allowedButtonKinds.includes(value);
+}
+//#endregion
+//#region src/constants.ts
+/** HTML data attribute key used to identify node types in rendered output. */
+const DATA_NODE_TYPE_KEY = "data-node-type";
+/** HTML data attribute key used to store serialized visibility rules. */
+const DATA_VISIBILITY_RULE_KEY = "data-visibility-rule";
+/** Prefix prepended to all Maily error messages for easy identification. */
+const MAILY_ERROR_PREFIX = "[Maily Error]";
+/** URL for filing bug reports against the Maily repository. */
+const MAILY_BUG_REPORT_URL = "https://github.com/arikchakma/maily.to/issues/new";
+//#endregion
+//#region src/font.ts
+/**
+* List of allowed fallback font families. These are system fonts or
+* generic font families that serve as fallbacks when a web font
+* fails to load.
+*/
+const allowedFallbackFonts = [
+	"Arial",
+	"Helvetica",
+	"Verdana",
+	"Georgia",
+	"Times New Roman",
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy"
+];
+const allowedFontFormats = [
+	"woff",
+	"woff2",
+	"truetype",
+	"opentype",
+	"embedded-opentype",
+	"svg"
+];
+/**
+* Default font configuration: Inter with sans-serif fallback,
+* loaded from the Maily CDN as woff2.
+*/
+const DEFAULT_FONT = {
+	fallbackFontFamily: "sans-serif",
+	fontFamily: "Inter",
+	webFont: {
+		url: "https://cdn.usemaily.com/fonts/v0/inter.woff2",
+		format: "woff2"
+	}
+};
+/**
+* Injects a @font-face style element into the document head to load
+* the given font. Only works in browser environments.
+*/
+function loadFont(font) {
+	const style = getFontFaceStyle(font);
+	const styleElement = document.createElement("style");
+	styleElement.textContent = style;
+	document.head.appendChild(styleElement);
+}
+/**
+* Generates a @font-face CSS rule string for the given font configuration.
+* Includes the font family, style, weight, MSO fallback, and web font
+* source URL when available.
+*/
+function getFontFaceStyle(font) {
+	const { fontFamily, fallbackFontFamily, webFont, fontWeight = 400, fontStyle = "normal" } = font;
+	return `@font-face {font-family: '${fontFamily}';font-style: ${fontStyle};font-weight: ${fontWeight};mso-font-alt: '${fallbackFontFamily}';${webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : ""}}`;
+}
+//#endregion
+//#region src/css-variables.ts
+/**
+* Returns a CSS variable object for the given name and value.
+* If the value is nullish or empty, returns an empty object so that
+* the default CSS variable value is not overridden. Numbers are
+* automatically suffixed with "px".
+*/
+function getVariableValue(name, value) {
+	if (value === void 0 || value === null || value === "") return {};
+	return { [name]: typeof value === "number" ? `${value}px` : value };
+}
+/**
+* Converts an EditorThemeOptions object into a flat map of Maily CSS
+* custom properties (--mly-*). Used to apply theme overrides as inline
+* styles on the editor or renderer root element. Covers body background,
+* container dimensions and borders, button colors, link color, and
+* font family settings.
+*/
+function getMailyCssVariables(theme) {
+	const font = theme.font || DEFAULT_FONT;
+	return {
+		...getVariableValue("--mly-body-background-color", theme.body?.backgroundColor),
+		...getVariableValue("--mly-body-padding-top", theme.body?.paddingTop),
+		...getVariableValue("--mly-body-padding-right", theme.body?.paddingRight),
+		...getVariableValue("--mly-body-padding-bottom", theme.body?.paddingBottom),
+		...getVariableValue("--mly-body-padding-left", theme.body?.paddingLeft),
+		...getVariableValue("--mly-container-background-color", theme.container?.backgroundColor),
+		...getVariableValue("--mly-container-max-width", theme.container?.maxWidth),
+		...getVariableValue("--mly-container-min-width", theme.container?.minWidth),
+		...getVariableValue("--mly-container-padding-top", theme.container?.paddingTop),
+		...getVariableValue("--mly-container-padding-right", theme.container?.paddingRight),
+		...getVariableValue("--mly-container-padding-bottom", theme.container?.paddingBottom),
+		...getVariableValue("--mly-container-padding-left", theme.container?.paddingLeft),
+		...getVariableValue("--mly-container-border-radius", theme.container?.borderRadius),
+		...getVariableValue("--mly-container-border-width", theme.container?.borderWidth),
+		...getVariableValue("--mly-container-border-color", theme.container?.borderColor),
+		...getVariableValue("--mly-button-background-color", theme.button?.backgroundColor),
+		...getVariableValue("--mly-button-text-color", theme.button?.color),
+		...getVariableValue("--mly-button-padding-top", theme.button?.paddingTop),
+		...getVariableValue("--mly-button-padding-right", theme.button?.paddingRight),
+		...getVariableValue("--mly-button-padding-bottom", theme.button?.paddingBottom),
+		...getVariableValue("--mly-button-padding-left", theme.button?.paddingLeft),
+		...getVariableValue("--mly-link-color", theme.link?.color),
+		...getVariableValue("--mly-font-family", font.fontFamily),
+		...getVariableValue("--mly-font-fallback-family", font.fallbackFontFamily),
+		"--mly-font": `var(--mly-font-family), var(--mly-font-fallback-family)`
+	};
+}
+//#endregion
+//#region src/html-code-block.ts
+/**
+* Tab options for the HTML code block node.
+* "code" shows the raw HTML source, "preview" renders it visually.
+*/
+const HTML_CODE_BLOCK_TABS = {
+	CODE: "code",
+	PREVIEW: "preview"
+};
+const DEFAULT_HTML_CODE_BLOCK_TAB = HTML_CODE_BLOCK_TABS.CODE;
+//#endregion
+//#region src/math.ts
+function clamp(value, [min, max]) {
+	return Math.min(Math.max(value, min), max);
+}
+function percentage(portion, total) {
+	return clamp(portion / total * 100, [0, 100]);
+}
+function absoluteFromPercentage(percentage, total) {
+	return Math.round(total * percentage / 100);
+}
+function roundTo(value, decimals) {
+	const factor = Math.pow(10, decimals);
+	return Math.round(value * factor) / factor;
+}
+//#endregion
+//#region src/image-width.ts
+const MIN_IMAGE_WIDTH_PERCENTAGE = 5;
+const MAX_IMAGE_WIDTH_PERCENTAGE = 100;
+const MAX_IMAGE_WIDTH_PIXELS = 600;
+/**
+* Converts any ImageWidth value to a clamped percentage number.
+* Handles "auto" (→ 100), percentage strings (e.g. "50%" → 50),
+* and legacy pixel numbers (converted relative to maxWidthPixels).
+* Returns 100 for null or unrecognized values.
+*/
+function parseWidthToPercentage(width, maxWidthPixels = MAX_IMAGE_WIDTH_PIXELS) {
+	if (typeof width === "string") {
+		if (width === "auto") return 100;
+		return width.endsWith("%") ? clampImageWidthPercentage(parseInt(width)) : 100;
+	}
+	if (typeof width === "number") return clampImageWidthPercentage(Math.round(100 * width / maxWidthPixels));
+	return 100;
+}
+function clampImageWidthPercentage(width) {
+	return clamp(width, [5, 100]);
+}
+//#endregion
+//#region src/mark.ts
+/** Registry of all inline mark type strings used in the document JSON. */
+const MAILY_MARK_TYPES = {
+	BOLD: "bold",
+	ITALIC: "italic",
+	STRIKE: "strike",
+	UNDERLINE: "underline",
+	LINK: "link",
+	CODE: "code",
+	TEXT_STYLE: "textStyle",
+	HIGHLIGHT: "highlight"
+};
+const allowedMarkTypes = Object.values(MAILY_MARK_TYPES);
+//#endregion
+//#region src/node.ts
+/**
+* Registry of all document node type strings. These map 1:1 to
+* Tiptap extension names and are used as discriminators in the
+* document JSON.
+*/
+const MAILY_NODE_TYPES = {
+	DOCUMENT: "doc",
+	PARAGRAPH: "paragraph",
+	TEXT: "text",
+	HEADING: "heading",
+	VARIABLE: "variable",
+	IMAGE: "image",
+	SPACER: "spacer",
+	SECTION: "section",
+	COLUMNS: "columns",
+	COLUMN: "column",
+	BULLET_LIST: "bulletList",
+	ORDERED_LIST: "orderedList",
+	LIST_ITEM: "listItem",
+	HORIZONTAL_RULE: "horizontalRule",
+	BUTTON: "button",
+	REPEAT: "repeat",
+	HTML_CODE_BLOCK: "htmlCodeBlock",
+	BLOCKQUOTE: "blockquote",
+	HARD_BREAK: "hardBreak",
+	FOOTER: "footer",
+	INLINE_IMAGE: "inlineImage",
+	LINK_CARD: "linkCard"
+};
+/**
+* Tiptap extension types that attach attributes to nodes but are
+* not document nodes themselves (e.g. fontStyle, visibility).
+*/
+const MAILY_EXTENSION_TYPES = {
+	FONT_STYLE: "fontStyle",
+	VISIBILITY: "visibility"
+};
+const allowedNodeTypes = Object.values(MAILY_NODE_TYPES);
+//#endregion
+//#region src/is.ts
+function guard(type) {
+	return (node) => node.type === type;
+}
+/**
+* Type guards for Maily nodes and marks. Provides narrowing functions
+* for every node type (is.paragraph, is.button, etc.) and mark type
+* (is.bold, is.link, etc.), plus structural checks like is.parent
+* and is.marked. Each guard narrows the input to its specific type.
+*
+* Example:
+*   if (is.paragraph(node)) {
+*     node.attrs.textAlign // narrowed to ParagraphNode
+*   }
+*/
+const is = {
+	any(value) {
+		return this.node(value) || this.mark(value);
+	},
+	parent(node) {
+		return Array.isArray(node?.content);
+	},
+	marked(node) {
+		return Array.isArray(node?.marks);
+	},
+	node(node) {
+		return typeof node === "object" && node !== null && "type" in node && allowedNodeTypes.includes(node.type);
+	},
+	doc: guard(MAILY_NODE_TYPES.DOCUMENT),
+	paragraph: guard(MAILY_NODE_TYPES.PARAGRAPH),
+	text: guard(MAILY_NODE_TYPES.TEXT),
+	heading: guard(MAILY_NODE_TYPES.HEADING),
+	variable: guard(MAILY_NODE_TYPES.VARIABLE),
+	image: guard(MAILY_NODE_TYPES.IMAGE),
+	inlineImage: guard(MAILY_NODE_TYPES.INLINE_IMAGE),
+	spacer: guard(MAILY_NODE_TYPES.SPACER),
+	section: guard(MAILY_NODE_TYPES.SECTION),
+	button: guard(MAILY_NODE_TYPES.BUTTON),
+	columns: guard(MAILY_NODE_TYPES.COLUMNS),
+	column: guard(MAILY_NODE_TYPES.COLUMN),
+	repeat: guard(MAILY_NODE_TYPES.REPEAT),
+	bulletList: guard(MAILY_NODE_TYPES.BULLET_LIST),
+	orderedList: guard(MAILY_NODE_TYPES.ORDERED_LIST),
+	listItem: guard(MAILY_NODE_TYPES.LIST_ITEM),
+	horizontalRule: guard(MAILY_NODE_TYPES.HORIZONTAL_RULE),
+	htmlCodeBlock: guard(MAILY_NODE_TYPES.HTML_CODE_BLOCK),
+	blockquote: guard(MAILY_NODE_TYPES.BLOCKQUOTE),
+	hardBreak: guard(MAILY_NODE_TYPES.HARD_BREAK),
+	footer: guard(MAILY_NODE_TYPES.FOOTER),
+	linkCard: guard(MAILY_NODE_TYPES.LINK_CARD),
+	mark(mark) {
+		return typeof mark === "object" && mark !== null && "type" in mark && allowedMarkTypes.includes(mark.type);
+	},
+	bold: guard(MAILY_MARK_TYPES.BOLD),
+	italic: guard(MAILY_MARK_TYPES.ITALIC),
+	strike: guard(MAILY_MARK_TYPES.STRIKE),
+	underline: guard(MAILY_MARK_TYPES.UNDERLINE),
+	link: guard(MAILY_MARK_TYPES.LINK),
+	code: guard(MAILY_MARK_TYPES.CODE),
+	textStyle: guard(MAILY_MARK_TYPES.TEXT_STYLE),
+	highlight: guard(MAILY_MARK_TYPES.HIGHLIGHT)
+};
+/** Type guard that checks if a value is defined (not null or undefined). */
+function isDef(val) {
+	return val !== void 0 && val !== null;
+}
+/** Type guard that checks if a value is a boolean. */
+function isBoolean(val) {
+	return typeof val === "boolean";
+}
+/** Type guard that checks if a value is a number. */
+function isNumber(val) {
+	return typeof val === "number";
+}
+/** Type guard that checks if a value is a string. */
+function isString(val) {
+	return typeof val === "string";
+}
+/** Type guard that checks if a value is a non-null object. */
+function isObject(val) {
+	return typeof val === "object" && val !== null;
+}
+//#endregion
+//#region src/font-style.ts
+/**
+* Built-in font options served from the Maily CDN. System fonts
+* (Arial, Helvetica, etc.) are included without a webFont field.
+*/
+const DEFAULT_FONT_FAMILIES = [
+	{
+		fontFamily: "Inter",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/inter.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Roboto",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/roboto.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Open Sans",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/open-sans.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Lato",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/lato.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Montserrat",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/montserrat.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Poppins",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/poppins.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Raleway",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/raleway.woff2",
+			format: "woff2"
+		}
+	},
+	{
+		fontFamily: "Ubuntu",
+		webFont: {
+			url: "https://cdn.usemaily.com/fonts/v0/ubuntu.woff2",
+			format: "woff2"
+		}
+	},
+	{ fontFamily: "Arial" },
+	{ fontFamily: "Helvetica" },
+	{ fontFamily: "Georgia" },
+	{ fontFamily: "Times New Roman" },
+	{ fontFamily: "Verdana" },
+	{ fontFamily: "Courier New" },
+	{ fontFamily: "Trebuchet MS" }
+];
+const FONT_STYLES = {
+	NORMAL: "normal",
+	ITALIC: "italic"
+};
+/** Preset options for the font size dropdown in the editor. */
+const FONT_SIZE_PRESETS = [
+	{
+		value: 12,
+		label: "Small"
+	},
+	{
+		value: 14,
+		label: "Normal"
+	},
+	{
+		value: 16,
+		label: "Medium"
+	},
+	{
+		value: 18,
+		label: "Large"
+	},
+	{
+		value: 24,
+		label: "XL"
+	},
+	{
+		value: 32,
+		label: "2XL"
+	}
+];
+/** Preset options for the line height dropdown in the editor. */
+const LINE_HEIGHT_PRESETS = [
+	{
+		value: 1,
+		label: "Tight"
+	},
+	{
+		value: 1.25,
+		label: "Snug"
+	},
+	{
+		value: 1.5,
+		label: "Normal"
+	},
+	{
+		value: 1.75,
+		label: "Relaxed"
+	},
+	{
+		value: 2,
+		label: "Loose"
+	}
+];
+const DEFAULT_FONT_FAMILY = "Inter";
+const DEFAULT_FONT_SIZE = 15;
+const DEFAULT_FONT_WEIGHT = 400;
+const DEFAULT_LINE_HEIGHT = 1.75;
+const DEFAULT_FONT_FALLBACK = "sans-serif";
+/**
+* Builds a CSS properties object from a node's font attributes,
+* falling back to the provided defaults for any null values.
+* Only includes properties that have a resolved value.
+*/
+function getFontStyle(attrs, defaults) {
+	const { fontFamily, fontFallback, fontSize, fontWeight, lineHeight, fontStyle } = attrs;
+	const size = fontSize ?? defaults?.fontSize;
+	const weight = fontWeight ?? defaults?.fontWeight;
+	const line = lineHeight ?? defaults?.lineHeight;
+	const style = fontStyle ?? defaults?.fontStyle;
+	const fontFamilyParts = [fontFamily, fontFallback].filter(Boolean);
+	return {
+		...fontFamilyParts.length > 0 && { fontFamily: fontFamilyParts.join(", ") },
+		...isDef(size) ? { fontSize: `${size}px` } : {},
+		...isDef(weight) ? { fontWeight: weight } : {},
+		...isDef(line) ? { lineHeight: line } : {},
+		...isDef(style) ? { fontStyle: style } : {}
+	};
+}
+//#endregion
+//#region src/font-weight.ts
+/**
+* Numeric font weight values mapped to semantic names.
+* Normal (400), Medium (500), Semibold (600), Bold (700), Extra Bold (800).
+*/
+const FONT_WEIGHTS = {
+	NORMAL: 400,
+	MEDIUM: 500,
+	SEMIBOLD: 600,
+	BOLD: 700,
+	EXTRA_BOLD: 800
+};
+//#endregion
+//#region src/function.ts
+/** A no-operation function. Useful as a default callback or placeholder. */
+function noop() {}
+//#endregion
+//#region src/invariant.ts
+function invariant(value, message) {
+	if (value === false || value === null || typeof value === "undefined") {
+		console.error(`${MAILY_ERROR_PREFIX}: The following error is a bug in Maily;
+Please open an issue! ${MAILY_BUG_REPORT_URL}`);
+		throw new Error(message);
+	}
+}
+//#endregion
+//#region src/margin.ts
+/**
+* Converts a MarginStyleConfig into CSS properties for inline styles.
+* When all sides are equal (or mode is "uniform"), emits shorthand CSS;
+* otherwise emits per-side longhand properties.
+*/
+function getMarginStyle(config) {
+	const { marginMode, marginTop, marginRight, marginBottom, marginLeft } = config;
+	if (marginMode === FIELD_MODE.UNIFORM || marginLeft === marginRight && marginRight === marginBottom && marginBottom === marginTop) return { margin: `${marginTop}px` };
+	return {
+		marginTop: `${marginTop}px`,
+		marginRight: `${marginRight}px`,
+		marginBottom: `${marginBottom}px`,
+		marginLeft: `${marginLeft}px`
+	};
+}
+//#endregion
+//#region src/object.ts
+function isMergableObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+/**
+* One-level deep merge of plain objects. Nested plain objects are
+* shallow-merged; primitives, arrays, and null are replaced outright.
+* Does not mutate the target — returns a new object.
+*
+* Example:
+*   deepMerge({ a: 1, nested: { x: 1, y: 2 } }, { nested: { y: 3 } })
+*   // => { a: 1, nested: { x: 1, y: 3 } }
+*/
+function deepMerge(target, ...sources) {
+	const result = { ...target };
+	for (const source of sources) for (const [key, value] of Object.entries(source)) result[key] = isMergableObject(value) && isMergableObject(result[key]) ? {
+		...result[key],
+		...value
+	} : value;
+	return result;
+}
+function isObjectDeepEqual(first, second) {
+	if (first === second) return true;
+	for (const key of Object.keys(first)) if (first[key] !== second[key]) return false;
+	return true;
+}
+//#endregion
+//#region src/padding.ts
+/**
+* Converts a PaddingStyleConfig into CSS properties for inline styles.
+* When all sides are equal (or mode is "uniform"), emits shorthand CSS;
+* otherwise emits per-side longhand properties.
+*/
+function getPaddingStyle(config) {
+	const { paddingMode, paddingTop, paddingRight, paddingBottom, paddingLeft } = config;
+	if (paddingMode === FIELD_MODE.UNIFORM || paddingLeft === paddingRight && paddingRight === paddingBottom && paddingBottom === paddingTop) return { padding: `${paddingTop}px` };
+	return {
+		paddingTop: `${paddingTop}px`,
+		paddingRight: `${paddingRight}px`,
+		paddingBottom: `${paddingBottom}px`,
+		paddingLeft: `${paddingLeft}px`
+	};
+}
+//#endregion
+//#region src/promise.ts
+/** Returns a promise that resolves after the given number of milliseconds. */
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+//#endregion
+//#region src/text-direction.ts
+/** Text direction values matching the HTML `dir` attribute: ltr, rtl, auto. */
+const TEXT_DIRECTIONS = {
+	LTR: "ltr",
+	RTL: "rtl",
+	AUTO: "auto"
+};
+const allowedTextDirections = Object.freeze(Object.values(TEXT_DIRECTIONS));
+const DEFAULT_TEXT_DIRECTION = TEXT_DIRECTIONS.AUTO;
+function isAllowedTextDirection(value) {
+	return typeof value === "string" && allowedTextDirections.includes(value);
+}
+/**
+* Returns a CSS `direction` property object for the given dir value.
+* Returns an empty object for "auto" or nullish values, since the
+* browser default is sufficient in those cases.
+*/
+function getCssDirection(dir) {
+	if (dir && dir !== TEXT_DIRECTIONS.AUTO) return { direction: dir };
+	return {};
+}
+//#endregion
+//#region src/theme.ts
+const DEFAULT_LINK_TEXT_COLOR = "#111827";
+const DEFAULT_RENDERER_THEME = {
+	paragraph: {
+		color: "#374151",
+		fontSize: 15,
+		lineHeight: 1.75,
+		fontWeight: FONT_WEIGHTS.NORMAL
+	},
+	heading: {
+		defaults: { color: "#111827" },
+		h1: {
+			fontSize: 36,
+			lineHeight: 1.1111111,
+			fontWeight: FONT_WEIGHTS.SEMIBOLD
+		},
+		h2: {
+			fontSize: 30,
+			lineHeight: 1.3333333,
+			fontWeight: FONT_WEIGHTS.SEMIBOLD
+		},
+		h3: {
+			fontSize: 24,
+			lineHeight: 1.6,
+			fontWeight: FONT_WEIGHTS.SEMIBOLD
+		}
+	},
+	footer: {
+		color: "#64748B",
+		fontSize: 14,
+		lineHeight: 1.7142857,
+		fontWeight: FONT_WEIGHTS.NORMAL
+	},
+	blockquote: {
+		color: "#374151",
+		borderColor: "#D1D5DB",
+		fontSize: 15,
+		lineHeight: 1.75,
+		fontWeight: FONT_WEIGHTS.MEDIUM,
+		fontStyle: FONT_STYLES.ITALIC
+	},
+	horizontalRule: { color: "#EAEAEA" },
+	code: {
+		color: "#111827",
+		backgroundColor: "#EFEFEF"
+	},
+	linkCard: {
+		titleColor: "#111827",
+		descriptionColor: "#374151",
+		badgeTextColor: "#374151",
+		badgeBackgroundColor: "#fff085",
+		subTitleColor: "#6B7280",
+		borderColor: "#E5E7EB"
+	},
+	container: {
+		backgroundColor: "#ffffff",
+		maxWidth: 600,
+		minWidth: 300,
+		paddingTop: 8,
+		paddingRight: 8,
+		paddingBottom: 8,
+		paddingLeft: 8,
+		borderRadius: 0,
+		borderWidth: 0,
+		borderColor: "transparent"
+	},
+	body: {
+		backgroundColor: "#ffffff",
+		paddingTop: 0,
+		paddingRight: 0,
+		paddingBottom: 0,
+		paddingLeft: 0
+	},
+	button: {
+		backgroundColor: "#000000",
+		color: "#ffffff",
+		paddingTop: 10,
+		paddingRight: 32,
+		paddingBottom: 10,
+		paddingLeft: 32,
+		fontSize: 14,
+		lineHeight: 1.4285714,
+		fontWeight: FONT_WEIGHTS.SEMIBOLD
+	},
+	link: { color: DEFAULT_LINK_TEXT_COLOR },
+	listMarker: { color: "#d1d5dc" },
+	font: DEFAULT_FONT
+};
+const DEFAULT_EDITOR_THEME = {
+	container: {
+		backgroundColor: "#ffffff",
+		maxWidth: 600,
+		minWidth: 300,
+		paddingTop: 8,
+		paddingRight: 8,
+		paddingBottom: 8,
+		paddingLeft: 8,
+		borderRadius: 0,
+		borderWidth: 0,
+		borderColor: "transparent"
+	},
+	body: {
+		backgroundColor: "#ffffff",
+		paddingTop: 0,
+		paddingRight: 0,
+		paddingBottom: 0,
+		paddingLeft: 0
+	},
+	button: {
+		backgroundColor: "#000000",
+		color: "#ffffff",
+		paddingTop: 10,
+		paddingRight: 32,
+		paddingBottom: 10,
+		paddingLeft: 32
+	},
+	link: { color: DEFAULT_LINK_TEXT_COLOR },
+	font: DEFAULT_FONT
+};
+/**
+* Resolves the baseline font defaults for a node type from the
+* renderer theme. Falls back to paragraph defaults for unknown types.
+*/
+function getNodeFontStyleDefaults(nodeType, level) {
+	const paragraph = DEFAULT_RENDERER_THEME.paragraph;
+	const fallback = {
+		fontSize: paragraph.fontSize,
+		lineHeight: paragraph.lineHeight,
+		fontWeight: paragraph.fontWeight
+	};
+	if (nodeType === MAILY_NODE_TYPES.HEADING) {
+		const heading = DEFAULT_RENDERER_THEME.heading;
+		const key = `h${level ?? 1}`;
+		const entry = heading?.[key];
+		return {
+			fontSize: entry?.fontSize ?? fallback.fontSize,
+			lineHeight: entry?.lineHeight ?? fallback.lineHeight,
+			fontWeight: entry?.fontWeight ?? fallback.fontWeight
+		};
+	}
+	if (nodeType === MAILY_NODE_TYPES.BUTTON) {
+		const btn = DEFAULT_RENDERER_THEME.button;
+		return {
+			fontSize: btn?.fontSize ?? fallback.fontSize,
+			lineHeight: btn?.lineHeight ?? fallback.lineHeight,
+			fontWeight: btn?.fontWeight ?? fallback.fontWeight
+		};
+	}
+	if (nodeType === MAILY_NODE_TYPES.BLOCKQUOTE) {
+		const bq = DEFAULT_RENDERER_THEME.blockquote;
+		return {
+			fontSize: bq?.fontSize ?? fallback.fontSize,
+			lineHeight: bq?.lineHeight ?? fallback.lineHeight,
+			fontWeight: bq?.fontWeight ?? fallback.fontWeight,
+			fontStyle: bq?.fontStyle ?? void 0
+		};
+	}
+	if (nodeType === MAILY_NODE_TYPES.FOOTER) {
+		const ft = DEFAULT_RENDERER_THEME.footer;
+		return {
+			fontSize: ft?.fontSize ?? fallback.fontSize,
+			lineHeight: ft?.lineHeight ?? fallback.lineHeight,
+			fontWeight: ft?.fontWeight ?? fallback.fontWeight
+		};
+	}
+	return fallback;
+}
+//#endregion
+//#region src/variable.ts
+/** Default opening delimiter for variable placeholders in text. */
+const DEFAULT_VARIABLE_START_TRIGGER = "{{";
+/** Default closing delimiter for variable placeholders in text. */
+const DEFAULT_VARIABLE_END_TRIGGER = "}}";
+/**
+* Regex that matches variable placeholders like {{name}} in a string.
+* Uses a non-greedy match to handle multiple variables in one string.
+*/
+const VARIABLE_PLACEHOLDER_REGEX = /({{.*?}})/g;
+/**
+* Delimiter used between fields inside a serialized variable string.
+* Format: {{id|label|required|hideDefaultValue}}.
+*/
+const VARIABLE_TEXT_DELIMITER = "|";
+/**
+* Serializes a variable node's attributes into a delimited string.
+* Output format: `{{id|label|required|hideDefaultValue}}`.
+* Used to represent structured variable data as a template string
+* in plain text contexts.
+*/
+function serializeVariableToText(variable) {
+	const { id, label, required = true, hideDefaultValue = false } = variable;
+	return [
+		"{{",
+		defaultStringifyValue(id),
+		"|",
+		defaultStringifyValue(label),
+		"|",
+		required,
+		"|",
+		hideDefaultValue,
+		"}}"
+	].join("");
+}
+function defaultStringifyValue(value) {
+	return value ?? "";
+}
+/**
+* Deserializes a variable string back into VariableAttributes.
+* Expected input format: `{{id|label|required|hideDefaultValue}}`.
+* Missing fields default to undefined; boolean fields are parsed
+* from "true"/"false" strings.
+*/
+function deserializeVariableFromText(text) {
+	const [id, label, required, hideDefaultValue] = text.slice(2, text.length - 2).trim().split("|");
+	return {
+		id,
+		label: label || null,
+		required: parseBoolean(required, true),
+		hideDefaultValue: parseBoolean(hideDefaultValue, false)
+	};
+}
+/**
+* Parses a string containing variable placeholders (e.g. "Hello {{name}}")
+* into a Tiptap-compatible document JSON with text and variable nodes.
+* Splits on {{...}} boundaries and creates the appropriate node type
+* for each segment.
+*/
+function buildDocFromVariableText(content) {
+	const parts = content.split(VARIABLE_PLACEHOLDER_REGEX);
+	return {
+		type: MAILY_NODE_TYPES.DOCUMENT,
+		content: [{
+			type: MAILY_NODE_TYPES.PARAGRAPH,
+			content: parts.flatMap((part) => {
+				if (part.startsWith("{{") && part.endsWith("}}")) return {
+					type: MAILY_NODE_TYPES.VARIABLE,
+					attrs: deserializeVariableFromText(part)
+				};
+				if (part) return {
+					type: MAILY_NODE_TYPES.TEXT,
+					text: part
+				};
+				return [];
+			}).filter(Boolean)
+		}]
+	};
+}
+/**
+* Checks if a string contains at least one variable placeholder.
+* Returns true for strings like "Hello {{name}}", false for plain text.
+* Uses index-based scanning instead of regex for performance.
+*/
+function hasVariableInText(text) {
+	const start = text.indexOf("{{");
+	if (start === -1) return false;
+	return text.indexOf("}}", start + 2) !== -1;
+}
+function parseBoolean(value, defaultValue) {
+	if (value === "true") return true;
+	if (value === "false") return false;
+	return defaultValue;
+}
+//#endregion
+//#region src/visibility.ts
+/**
+* Comparison operators for conditional visibility rules.
+* Used to evaluate a template variable against a value
+* to decide whether a node should be shown or hidden.
+*/
+const VISIBILITY_OPERATORS = {
+	IS_TRUE: "is_true",
+	IS_FALSE: "is_false",
+	EQUALS: "equals",
+	NOT_EQUALS: "not_equals",
+	CONTAINS: "contains",
+	NOT_CONTAINS: "not_contains",
+	STARTS_WITH: "starts_with",
+	ENDS_WITH: "ends_with",
+	GREATER_THAN: "greater_than",
+	LESS_THAN: "less_than"
+};
+const VISIBILITY_OPERATOR_OPTIONS = [
+	{
+		value: VISIBILITY_OPERATORS.IS_TRUE,
+		label: "Is true"
+	},
+	{
+		value: VISIBILITY_OPERATORS.IS_FALSE,
+		label: "Is false"
+	},
+	{
+		value: VISIBILITY_OPERATORS.EQUALS,
+		label: "Equals"
+	},
+	{
+		value: VISIBILITY_OPERATORS.NOT_EQUALS,
+		label: "Not equals"
+	},
+	{
+		value: VISIBILITY_OPERATORS.CONTAINS,
+		label: "Contains"
+	},
+	{
+		value: VISIBILITY_OPERATORS.NOT_CONTAINS,
+		label: "Not contains"
+	},
+	{
+		value: VISIBILITY_OPERATORS.STARTS_WITH,
+		label: "Starts with"
+	},
+	{
+		value: VISIBILITY_OPERATORS.ENDS_WITH,
+		label: "Ends with"
+	},
+	{
+		value: VISIBILITY_OPERATORS.GREATER_THAN,
+		label: "Greater than"
+	},
+	{
+		value: VISIBILITY_OPERATORS.LESS_THAN,
+		label: "Less than"
+	}
+];
+/**
+* Unary operators that don't require a comparison value.
+* The UI hides the value input field when one of these is selected.
+*/
+const OPERATORS_WITHOUT_VALUE = [VISIBILITY_OPERATORS.IS_TRUE, VISIBILITY_OPERATORS.IS_FALSE];
+const VISIBILITY_ACTIONS = {
+	NONE: "none",
+	SHOW: "show",
+	HIDE: "hide"
+};
+const VISIBILITY_ACTION_OPTIONS = [
+	{
+		value: VISIBILITY_ACTIONS.NONE,
+		label: "None"
+	},
+	{
+		value: VISIBILITY_ACTIONS.SHOW,
+		label: "Show if"
+	},
+	{
+		value: VISIBILITY_ACTIONS.HIDE,
+		label: "Hide if"
+	}
+];
+//#endregion
+exports.BORDER_STYLES = BORDER_STYLES;
+exports.BUTTON_KINDS = BUTTON_KINDS;
+exports.DATA_NODE_TYPE_KEY = DATA_NODE_TYPE_KEY;
+exports.DATA_VISIBILITY_RULE_KEY = DATA_VISIBILITY_RULE_KEY;
+exports.DEFAULT_BORDER_COLOR = DEFAULT_BORDER_COLOR;
+exports.DEFAULT_BORDER_STYLE = DEFAULT_BORDER_STYLE;
+exports.DEFAULT_BUTTON_KIND = DEFAULT_BUTTON_KIND;
+exports.DEFAULT_EDITOR_THEME = DEFAULT_EDITOR_THEME;
+exports.DEFAULT_FONT = DEFAULT_FONT;
+exports.DEFAULT_FONT_FALLBACK = DEFAULT_FONT_FALLBACK;
+exports.DEFAULT_FONT_FAMILIES = DEFAULT_FONT_FAMILIES;
+exports.DEFAULT_FONT_FAMILY = DEFAULT_FONT_FAMILY;
+exports.DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE;
+exports.DEFAULT_FONT_WEIGHT = DEFAULT_FONT_WEIGHT;
+exports.DEFAULT_HTML_CODE_BLOCK_TAB = DEFAULT_HTML_CODE_BLOCK_TAB;
+exports.DEFAULT_LINE_HEIGHT = DEFAULT_LINE_HEIGHT;
+exports.DEFAULT_LINK_TEXT_COLOR = DEFAULT_LINK_TEXT_COLOR;
+exports.DEFAULT_RENDERER_THEME = DEFAULT_RENDERER_THEME;
+exports.DEFAULT_TEXT_ALIGN = DEFAULT_TEXT_ALIGN;
+exports.DEFAULT_TEXT_DIRECTION = DEFAULT_TEXT_DIRECTION;
+exports.DEFAULT_VARIABLE_END_TRIGGER = DEFAULT_VARIABLE_END_TRIGGER;
+exports.DEFAULT_VARIABLE_START_TRIGGER = DEFAULT_VARIABLE_START_TRIGGER;
+exports.FIELD_MODE = FIELD_MODE;
+exports.FONT_SIZE_PRESETS = FONT_SIZE_PRESETS;
+exports.FONT_STYLES = FONT_STYLES;
+exports.FONT_WEIGHTS = FONT_WEIGHTS;
+exports.HTML_CODE_BLOCK_TABS = HTML_CODE_BLOCK_TABS;
+exports.LINE_HEIGHT_PRESETS = LINE_HEIGHT_PRESETS;
+exports.MAILY_BUG_REPORT_URL = MAILY_BUG_REPORT_URL;
+exports.MAILY_ERROR_PREFIX = MAILY_ERROR_PREFIX;
+exports.MAILY_EXTENSION_TYPES = MAILY_EXTENSION_TYPES;
+exports.MAILY_MARK_TYPES = MAILY_MARK_TYPES;
+exports.MAILY_NODE_TYPES = MAILY_NODE_TYPES;
+exports.MAX_IMAGE_WIDTH_PERCENTAGE = MAX_IMAGE_WIDTH_PERCENTAGE;
+exports.MIN_IMAGE_WIDTH_PERCENTAGE = MIN_IMAGE_WIDTH_PERCENTAGE;
+exports.OPERATORS_WITHOUT_VALUE = OPERATORS_WITHOUT_VALUE;
+exports.TEXT_ALIGNMENTS = TEXT_ALIGNMENTS;
+exports.TEXT_DIRECTIONS = TEXT_DIRECTIONS;
+exports.VARIABLE_PLACEHOLDER_REGEX = VARIABLE_PLACEHOLDER_REGEX;
+exports.VARIABLE_TEXT_DELIMITER = VARIABLE_TEXT_DELIMITER;
+exports.VISIBILITY_ACTIONS = VISIBILITY_ACTIONS;
+exports.VISIBILITY_ACTION_OPTIONS = VISIBILITY_ACTION_OPTIONS;
+exports.VISIBILITY_OPERATORS = VISIBILITY_OPERATORS;
+exports.VISIBILITY_OPERATOR_OPTIONS = VISIBILITY_OPERATOR_OPTIONS;
+exports.absoluteFromPercentage = absoluteFromPercentage;
+exports.allowedButtonKinds = allowedButtonKinds;
+exports.allowedFallbackFonts = allowedFallbackFonts;
+exports.allowedFieldModes = allowedFieldModes;
+exports.allowedFontFormats = allowedFontFormats;
+exports.allowedMarkTypes = allowedMarkTypes;
+exports.allowedNodeTypes = allowedNodeTypes;
+exports.allowedTextAligns = allowedTextAligns;
+exports.allowedTextDirections = allowedTextDirections;
+exports.buildDocFromVariableText = buildDocFromVariableText;
+exports.clamp = clamp;
+exports.clampImageWidthPercentage = clampImageWidthPercentage;
+exports.deepMerge = deepMerge;
+exports.deserializeVariableFromText = deserializeVariableFromText;
+exports.getBorderStyle = getBorderStyle;
+exports.getCssDirection = getCssDirection;
+exports.getFontFaceStyle = getFontFaceStyle;
+exports.getFontStyle = getFontStyle;
+exports.getMailyCssVariables = getMailyCssVariables;
+exports.getMarginStyle = getMarginStyle;
+exports.getNodeFontStyleDefaults = getNodeFontStyleDefaults;
+exports.getPaddingStyle = getPaddingStyle;
+exports.getVariableValue = getVariableValue;
+exports.hasVariableInText = hasVariableInText;
+exports.invariant = invariant;
+exports.is = is;
+exports.isAllowedButtonKind = isAllowedButtonKind;
+exports.isAllowedFieldMode = isAllowedFieldMode;
+exports.isAllowedTextAlignment = isAllowedTextAlignment;
+exports.isAllowedTextDirection = isAllowedTextDirection;
+exports.isBoolean = isBoolean;
+exports.isDef = isDef;
+exports.isNumber = isNumber;
+exports.isObject = isObject;
+exports.isObjectDeepEqual = isObjectDeepEqual;
+exports.isString = isString;
+exports.loadFont = loadFont;
+exports.noop = noop;
+exports.parseWidthToPercentage = parseWidthToPercentage;
+exports.percentage = percentage;
+exports.roundTo = roundTo;
+exports.serializeVariableToText = serializeVariableToText;
+exports.sleep = sleep;
+
+//# sourceMappingURL=index.cjs.map