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

package/dist/index.mjs

@@ -1,4 +1,95 @@
-//#region src/theme.ts
+//#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",
@@ -19,185 +110,885 @@ const allowedFontFormats = [
 	"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://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
+		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 = {
-	colors: {
-		heading: "#111827",
-		paragraph: "#374151",
-		horizontal: "#EAEAEA",
-		footer: "#64748B",
-		blockquoteBorder: "#D1D5DB",
-		codeBackground: "#EFEFEF",
-		codeText: "#111827",
-		linkCardTitle: "#111827",
-		linkCardDescription: "#6B7280",
-		linkCardBadgeText: "#111827",
-		linkCardBadgeBackground: "#FEF08A",
-		linkCardSubTitle: "#6B7280"
-	},
-	fontSize: {
-		paragraph: {
-			size: "15px",
-			lineHeight: "26.25px"
+	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
 		},
-		footer: {
-			size: "14px",
-			lineHeight: "24px"
+		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: "600px",
-		minWidth: "300px",
-		paddingTop: "0.5rem",
-		paddingRight: "0.5rem",
-		paddingBottom: "0.5rem",
-		paddingLeft: "0.5rem",
-		borderRadius: "0px",
-		borderWidth: "0px",
+		maxWidth: 600,
+		minWidth: 300,
+		paddingTop: 8,
+		paddingRight: 8,
+		paddingBottom: 8,
+		paddingLeft: 8,
+		borderRadius: 0,
+		borderWidth: 0,
 		borderColor: "transparent"
 	},
 	body: {
 		backgroundColor: "#ffffff",
-		paddingTop: "0px",
-		paddingRight: "0px",
-		paddingBottom: "0px",
-		paddingLeft: "0px"
+		paddingTop: 0,
+		paddingRight: 0,
+		paddingBottom: 0,
+		paddingLeft: 0
 	},
 	button: {
 		backgroundColor: "#000000",
 		color: "#ffffff",
-		paddingTop: "10px",
-		paddingRight: "32px",
-		paddingBottom: "10px",
-		paddingLeft: "32px"
+		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: "600px",
-		minWidth: "300px",
-		paddingTop: "8px",
-		paddingRight: "8px",
-		paddingBottom: "8px",
-		paddingLeft: "8px",
-		borderRadius: "0px",
-		borderWidth: "0px",
+		maxWidth: 600,
+		minWidth: 300,
+		paddingTop: 8,
+		paddingRight: 8,
+		paddingBottom: 8,
+		paddingLeft: 8,
+		borderRadius: 0,
+		borderWidth: 0,
 		borderColor: "transparent"
 	},
 	body: {
 		backgroundColor: "#ffffff",
-		paddingTop: "0px",
-		paddingRight: "0px",
-		paddingBottom: "0px",
-		paddingLeft: "0px"
+		paddingTop: 0,
+		paddingRight: 0,
+		paddingBottom: 0,
+		paddingLeft: 0
 	},
 	button: {
 		backgroundColor: "#000000",
 		color: "#ffffff",
-		paddingTop: "10px",
-		paddingRight: "32px",
-		paddingBottom: "10px",
-		paddingLeft: "32px"
+		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/css-variables.ts
+//#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 = "}}";
 /**
-* if the value is undefined, it will return an empty object
-* so that we don't override the default value
-* @param name - The name of the CSS variable
-* @param value - The value of the CSS variable
-* @returns The CSS variable value
+* Regex that matches variable placeholders like {{name}} in a string.
+* Uses a non-greedy match to handle multiple variables in one string.
 */
-function getVariableValue(name, value) {
-	if (value === void 0 || value === null || value === "") return {};
-	return { [name]: value };
-}
-/**
-* Get the CSS variables for the theme
-* @param theme - The theme
-* @returns The CSS variables
-* @example
-* ```ts
-* const theme = {
-*   body: {
-*     backgroundColor: 'red',
-*   },
-* };
-*
-* const cssVariables = getCssVariables(theme);
-*
-* console.log(cssVariables);
-* // { '--mly-body-background-color': 'red' }
+const VARIABLE_PLACEHOLDER_REGEX = /({{.*?}})/g;
+/**
+* Delimiter used between fields inside a serialized variable string.
+* Format: {{id|label|required|hideDefaultValue}}.
 */
-function getMailyCssVariables(theme) {
-	const font = theme.font || DEFAULT_FONT;
+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 {
-		...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)`
+		id,
+		label: label || null,
+		required: parseBoolean(required, true),
+		hideDefaultValue: parseBoolean(hideDefaultValue, false)
 	};
 }
-
-//#endregion
-//#region src/font.ts
-function loadFont(font) {
-	const style = fontStyle(font);
-	const styleElement = document.createElement("style");
-	styleElement.textContent = style;
-	document.head.appendChild(styleElement);
+/**
+* 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 fontStyle(font) {
-	const { fontFamily, fallbackFontFamily, webFont } = font;
-	const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
-	const style = `
-  @font-face {
-    font-family: '${fontFamily}';
-    font-style: normal;
-    font-weight: 400;
-    mso-font-alt: '${fallbackFontFamily}';
-    ${src}
-  }`;
-	return style;
+function parseBoolean(value, defaultValue) {
+	if (value === "true") return true;
+	if (value === "false") return false;
+	return defaultValue;
 }
-
 //#endregion
-export { DEFAULT_EDITOR_THEME, DEFAULT_FONT, DEFAULT_LINK_TEXT_COLOR, DEFAULT_RENDERER_THEME, allowedFallbackFonts, allowedFontFormats, fontStyle, getMailyCssVariables, getVariableValue, loadFont };
+//#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
+export { BORDER_STYLES, BUTTON_KINDS, DATA_NODE_TYPE_KEY, DATA_VISIBILITY_RULE_KEY, DEFAULT_BORDER_COLOR, DEFAULT_BORDER_STYLE, DEFAULT_BUTTON_KIND, DEFAULT_EDITOR_THEME, DEFAULT_FONT, DEFAULT_FONT_FALLBACK, DEFAULT_FONT_FAMILIES, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_WEIGHT, DEFAULT_HTML_CODE_BLOCK_TAB, DEFAULT_LINE_HEIGHT, DEFAULT_LINK_TEXT_COLOR, DEFAULT_RENDERER_THEME, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DIRECTION, DEFAULT_VARIABLE_END_TRIGGER, DEFAULT_VARIABLE_START_TRIGGER, FIELD_MODE, FONT_SIZE_PRESETS, FONT_STYLES, FONT_WEIGHTS, HTML_CODE_BLOCK_TABS, LINE_HEIGHT_PRESETS, MAILY_BUG_REPORT_URL, MAILY_ERROR_PREFIX, MAILY_EXTENSION_TYPES, MAILY_MARK_TYPES, MAILY_NODE_TYPES, MAX_IMAGE_WIDTH_PERCENTAGE, MIN_IMAGE_WIDTH_PERCENTAGE, OPERATORS_WITHOUT_VALUE, TEXT_ALIGNMENTS, TEXT_DIRECTIONS, VARIABLE_PLACEHOLDER_REGEX, VARIABLE_TEXT_DELIMITER, VISIBILITY_ACTIONS, VISIBILITY_ACTION_OPTIONS, VISIBILITY_OPERATORS, VISIBILITY_OPERATOR_OPTIONS, absoluteFromPercentage, allowedButtonKinds, allowedFallbackFonts, allowedFieldModes, allowedFontFormats, allowedMarkTypes, allowedNodeTypes, allowedTextAligns, allowedTextDirections, buildDocFromVariableText, clamp, clampImageWidthPercentage, deepMerge, deserializeVariableFromText, getBorderStyle, getCssDirection, getFontFaceStyle, getFontStyle, getMailyCssVariables, getMarginStyle, getNodeFontStyleDefaults, getPaddingStyle, getVariableValue, hasVariableInText, invariant, is, isAllowedButtonKind, isAllowedFieldMode, isAllowedTextAlignment, isAllowedTextDirection, isBoolean, isDef, isNumber, isObject, isObjectDeepEqual, isString, loadFont, noop, parseWidthToPercentage, percentage, roundTo, serializeVariableToText, sleep };
+
 //# sourceMappingURL=index.mjs.map