@samva/markup 0.14.0 → 0.15.0

package/AGENTS.md

@@ -23,7 +23,7 @@ Authoring entries are what a template file imports:
   functions a body may call.
 - `@samva/markup/sms` and `@samva/markup/whatsapp` — the channel components (`Sms`; `WhatsApp` with
   `WhatsApp.Header`, `Body`, `Footer`, `Buttons`, `UrlButton`, `QuickReplyButton`, `PhoneButton`,
-  `CopyCodeButton`). `whatsappTemplate` derives Meta's positional `{{n}}` text.
+  `CopyCodeButton`, `FlowButton`). `whatsappTemplate` derives Meta's positional `{{n}}` text.
 - `@samva/markup/input-schema` — `inputSchema`, which turns any Standard JSON Schema into the
   portable JSON Schema and validator a template's input is checked against.
 - `samva:brand` — `BrandLogo` (light logo, swapped for the dark one where the client honors dark

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## @samva/markup@0.15.0
+
+### WhatsApp template FLOW buttons
+
+`<WhatsApp.FlowButton flow="order-survey">Take survey</WhatsApp.FlowButton>` adds a Meta FLOW
+button to a WhatsApp template. `flow` is the Samva flow handle (lowercase kebab-case, the file
+`flows/<handle>.json` in the template project); Samva maps it to Meta's flow id per business
+account when it registers the template. `action` is `navigate` by default or `data_exchange`, and
+`screen` names the screen a `navigate` flow opens on (omitted, the flow's first entry screen);
+`screen` is refused with `data_exchange`. `flow`, `action` and `screen` are string literals, and a
+template holds at most one flow button.
+
+The IR button is `{ type: "flow", text, flow, action, screen? }`, and the rendered WhatsApp
+channel and the editor preview carry it. The editor shows a flow button as a locked row; it is
+authored in source.
+
 ## @samva/markup@0.14.0
 
 ### A semantic theme vocabulary, one dark-mode mechanism and a contrast check

package/README.md

@@ -194,7 +194,7 @@ explicit argument overrides it.
 One template carries one schema and a body for each channel it supports. `@samva/markup/sms` and
 `@samva/markup/whatsapp` export the channel components (`Sms`; `WhatsApp` with `WhatsApp.Header`,
 `.Body`, `.Footer`, `.Buttons`, `.UrlButton`, `.QuickReplyButton`, `.PhoneButton` and
-`.CopyCodeButton`). Their names are distinct per channel, so a wrong prop fails in the type checker.
+`.CopyCodeButton` and `.FlowButton`). Their names are distinct per channel, so a wrong prop fails in the type checker.
 WhatsApp bindings compile to Meta's positional `{{1}}` placeholders (`whatsappTemplate`), and a
 conditional in a WhatsApp text part is refused because Meta templates cannot branch. The platform
 gates these channels.

package/dist/{brand-B-t62NJB.js → brand-nreeKWxF.js}

@@ -1,4 +1,4 @@
-import { D as samvaBrandPlugin, O as BRAND_FOOTER_MARKER, k as UNSUBSCRIBE_LINK, r as escapeAttribute } from "./html-eOZfDwVf.js";
+import { D as samvaBrandPlugin, O as BRAND_FOOTER_MARKER, k as UNSUBSCRIBE_LINK, r as escapeAttribute } from "./html-BvRFepeO.js";
 import { a as jsx, n as Fragment } from "./jsx-runtime-CBlexoeR.js";
 //#region src/email/assets.ts
 /** Files a template may import, and what they are served as. */

package/dist/brand.js

@@ -1,4 +1,4 @@
-import { D as samvaBrandPlugin } from "./html-eOZfDwVf.js";
+import { D as samvaBrandPlugin } from "./html-BvRFepeO.js";
 import { a as THEME_COLOR_ROLES, c as foregroundDefaults, i as THEME_COLORS, l as parseBrandCss, n as DEFAULT_THEME_CSS, o as THEME_TOKENS, r as FILL_COLORS, s as contrastForeground, t as DEFAULT_THEME, u as printBrandCss } from "./theme-css-s9QwD5Ko.js";
-import { a as ASSET_CONTENT_TYPES, c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, r as renderedFooterMarkers, s as assetUrl, t as BRAND_COMPONENT_CLASSES, u as isExternalAsset } from "./brand-B-t62NJB.js";
+import { a as ASSET_CONTENT_TYPES, c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, r as renderedFooterMarkers, s as assetUrl, t as BRAND_COMPONENT_CLASSES, u as isExternalAsset } from "./brand-nreeKWxF.js";
 export { ASSET_CONTENT_TYPES, BRAND_COMPONENT_CLASSES, DEFAULT_THEME, DEFAULT_THEME_CSS, FILL_COLORS, THEME_COLORS, THEME_COLOR_ROLES, THEME_TOKENS, assetEntry, assetUrl, brandComponents, checkAssetBase, contrastForeground, foregroundDefaults, isAssetPath, isExternalAsset, parseBrandCss, printBrandCss, renderedFooterMarkers, samvaBrandPlugin, withoutUnsubscribeRow };

package/dist/compiler.d.ts

@@ -2,7 +2,7 @@ import { n as parseBrandSpecifier, t as BrandPlugin } from "./brand-plugin-CHhce
 import { a as TemplateDiagnostic, r as EmailDiagnostic } from "./diagnostics-CUYlQ_6x.js";
 import { r as EmailNode } from "./jsx-runtime-DC7xG0aA.js";
 import { n as AssetEntry, p as EmailBrand, u as BrandComponents } from "./assets-tISHaQNF.js";
-import { C as Compound, D as EmittedPosition, S as CompiledSelector, T as matchesSelector, _ as Specificity, b as parseStylesheet, ct as TemplateIr, g as CssRule, h as CssDeclaration, r as RenderedEmail, v as Stylesheet, w as classListOf, x as Ancestry, y as compileSelector } from "./render-C1X3S5or.js";
+import { C as Compound, D as EmittedPosition, S as CompiledSelector, T as matchesSelector, _ as Specificity, b as parseStylesheet, ct as TemplateIr, g as CssRule, h as CssDeclaration, r as RenderedEmail, v as Stylesheet, w as classListOf, x as Ancestry, y as compileSelector } from "./render-BdvewoQt.js";
 import { a as TEMPLATE_NAME_PATTERN, n as EmailContent } from "./template-B-UDXK8a.js";
 import { caniemail } from "caniemail";
 //#region src/email/compatibility.d.ts

package/dist/compiler.js

@@ -1,15 +1,15 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { n as TEMPLATE_NAME_PATTERN } from "./template-zLUjcwfF.js";
-import { D as samvaBrandPlugin, T as parseBrandSpecifier, _ as renderIr, w as brandSpecifierPattern } from "./html-eOZfDwVf.js";
-import { m as PRIMITIVE_CSS } from "./components-CwWSoG5N.js";
+import { D as samvaBrandPlugin, T as parseBrandSpecifier, _ as renderIr, w as brandSpecifierPattern } from "./html-BvRFepeO.js";
+import { m as PRIMITIVE_CSS } from "./components-3XHjYD3i.js";
 import { c as foregroundDefaults, d as downlevelColors, f as formatColor, l as parseBrandCss, n as DEFAULT_THEME_CSS, p as parseColor, u as printBrandCss } from "./theme-css-s9QwD5Ko.js";
 import { n as isDarkSchemeCondition, r as isDarkSchemeQuery, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
-import { a as downlevelMediaQuery, c as renderHeadCss, d as matchesSelector, f as unquote, i as renderDarkRules, l as resolveVariables, o as finalizeValue, r as applyStylesheet, s as foldCalc, u as classListOf } from "./ir-D-gTGquU.js";
+import { a as downlevelMediaQuery, c as renderHeadCss, d as matchesSelector, f as unquote, i as renderDarkRules, l as resolveVariables, o as finalizeValue, r as applyStylesheet, s as foldCalc, u as classListOf } from "./ir-DNL6H7jA.js";
 import { i as buildLineMap, s as lineColumn } from "./diagnostic-codes-UXwOO3A-.js";
-import { a as lowerProject, d as resolveFromDirectory, f as resolveThemeImports, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile, u as projectDirectory } from "./profile-Cc8VxOKA.js";
-import { c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-B-t62NJB.js";
+import { a as lowerProject, d as resolveFromDirectory, f as resolveThemeImports, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile, u as projectDirectory } from "./profile-AatO_SvP.js";
+import { c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-nreeKWxF.js";
 import { t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
-import { n as compileEmail, r as renderEmailContent } from "./render-6gLei61p.js";
+import { n as compileEmail, r as renderEmailContent } from "./render-DpYouYYG.js";
 import { caniemail, parseHtml, rawData } from "caniemail";
 import { generate, ident, parse, walk } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";

package/dist/{components-CwWSoG5N.js → components-3XHjYD3i.js}

@@ -1,4 +1,4 @@
-import { i as escapeText, r as escapeAttribute } from "./html-eOZfDwVf.js";
+import { i as escapeText, r as escapeAttribute } from "./html-BvRFepeO.js";
 import { a as jsx, c as rawMarkup, l as reportEmailDiagnostic, n as Fragment, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
 //#region src/email/primitive-css.ts
 /** The classes the primitives put on the elements they generate. */

package/dist/edit.js

@@ -1,7 +1,7 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { d as completeJsxSourceLocation, u as JSX_SOURCE_LOCATION_PROP } from "./jsx-runtime-CBlexoeR.js";
 import { i as buildLineMap } from "./diagnostic-codes-UXwOO3A-.js";
-import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-Cc8VxOKA.js";
+import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-AatO_SvP.js";
 import { parse } from "@babel/parser";
 //#region src/source-edit.ts
 const node = (value) => isObject(value) && "type" in value && typeof value.type === "string" && "start" in value && typeof value.start === "number" && "end" in value && typeof value.end === "number";

package/dist/email.js

@@ -1,2 +1,2 @@
-import { a as Email, c as PREHEADER_ATTRIBUTE, d as equalColumnWidth, f as preheaderNode, i as Divider, l as Section, n as Column, o as Image, r as Columns, s as Link, t as Button, u as Spacer } from "./components-CwWSoG5N.js";
+import { a as Email, c as PREHEADER_ATTRIBUTE, d as equalColumnWidth, f as preheaderNode, i as Divider, l as Section, n as Column, o as Image, r as Columns, s as Link, t as Button, u as Spacer } from "./components-3XHjYD3i.js";
 export { Button, Column, Columns, Divider, Email, Image, Link, PREHEADER_ATTRIBUTE, Section, Spacer, equalColumnWidth, preheaderNode };

package/dist/{html-eOZfDwVf.js → html-BvRFepeO.js}

@@ -1137,6 +1137,15 @@ const resolveButtons = (ctx, nodes, out, depth) => {
 					code: value(node.code)
 				});
 				break;
+			case "flow":
+				out.push({
+					type: "flow",
+					text: value(node.text),
+					flow: node.flow,
+					action: node.action,
+					...node.screen === void 0 ? {} : { screen: node.screen }
+				});
+				break;
 			default: invalid("Unknown WhatsApp button.");
 		}
 	}

package/dist/{ir-D-gTGquU.js → ir-DNL6H7jA.js}

@@ -1,5 +1,5 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
-import { a as kebab, n as declarationValue, r as escapeAttribute } from "./html-eOZfDwVf.js";
+import { a as kebab, n as declarationValue, r as escapeAttribute } from "./html-BvRFepeO.js";
 import { t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
 import { i as withinDarkScheme, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
 //#region src/email/font-stacks.ts

package/dist/{profile-Cc8VxOKA.js → profile-AatO_SvP.js}

@@ -1,13 +1,13 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { n as inputSchema, r as jsonSchema } from "./input-schema-zjkgrXn2.js";
 import { n as TEMPLATE_NAME_PATTERN, t as TEMPLATE_ID_PATTERN } from "./template-zLUjcwfF.js";
-import { D as samvaBrandPlugin, E as reservedBrandAttributes, O as BRAND_FOOTER_MARKER, S as emailElement, T as parseBrandSpecifier, b as EMAIL_ELEMENTS, s as serializeStyle, t as checkAttribute } from "./html-eOZfDwVf.js";
+import { D as samvaBrandPlugin, E as reservedBrandAttributes, O as BRAND_FOOTER_MARKER, S as emailElement, T as parseBrandSpecifier, b as EMAIL_ELEMENTS, s as serializeStyle, t as checkAttribute } from "./html-BvRFepeO.js";
 import { FORMATTER_NAMES } from "./fmt.js";
 import { i as drainEmailDiagnostics, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
-import { a as Email, d as equalColumnWidth, i as Divider, l as Section, n as Column, o as Image, p as PRIMITIVE_CLASSES, r as Columns, s as Link, t as Button, u as Spacer } from "./components-CwWSoG5N.js";
-import { i as renderDarkRules, n as DARK_CLASS_PREFIX, r as applyStylesheet } from "./ir-D-gTGquU.js";
+import { a as Email, d as equalColumnWidth, i as Divider, l as Section, n as Column, o as Image, p as PRIMITIVE_CLASSES, r as Columns, s as Link, t as Button, u as Spacer } from "./components-3XHjYD3i.js";
+import { i as renderDarkRules, n as DARK_CLASS_PREFIX, r as applyStylesheet } from "./ir-DNL6H7jA.js";
 import { i as buildLineMap, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-UXwOO3A-.js";
-import { l as isAssetPath, n as brandComponents } from "./brand-B-t62NJB.js";
+import { l as isAssetPath, n as brandComponents } from "./brand-nreeKWxF.js";
 import { parse } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";
 //#region src/email/theme-imports.ts
@@ -2530,7 +2530,12 @@ const BUTTON_TEXT_LIMIT = 25;
 const URL_BUTTON_LIMIT = 2;
 const PHONE_BUTTON_LIMIT = 1;
 const QUICK_REPLY_LIMIT = 10;
+const FLOW_BUTTON_LIMIT = 1;
 const BUTTON_LIMIT = 10;
+const FLOW_HANDLE_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const FLOW_HANDLE_LIMIT = 64;
+const FLOW_SCREEN_PATTERN = /^[A-Za-z_]{1,100}$/;
+const FLOW_ACTIONS = ["navigate", "data_exchange"];
 const jsxName = (name) => {
 	if (name.type === "JSXIdentifier") return text(name, "name") ?? "";
 	if (name.type === "JSXMemberExpression") return `${jsxName(child(name, "object") ?? name)}.${text(child(name, "property") ?? name, "name") ?? ""}`;
@@ -2636,6 +2641,7 @@ const ZERO = {
 	url: 0,
 	phone: 0,
 	quickReply: 0,
+	flow: 0,
 	total: 0
 };
 /** The most buttons of each kind any combination of the conditions can produce. */
@@ -2650,18 +2656,21 @@ const maximalCounts = (nodes) => {
 				url: Math.max(then.url, otherwise.url),
 				phone: Math.max(then.phone, otherwise.phone),
 				quickReply: Math.max(then.quickReply, otherwise.quickReply),
+				flow: Math.max(then.flow, otherwise.flow),
 				total: Math.max(then.total, otherwise.total)
 			};
 		} else add = {
 			url: node.type === "url" ? 1 : 0,
 			phone: node.type === "phone" ? 1 : 0,
 			quickReply: node.type === "quick-reply" ? 1 : 0,
+			flow: node.type === "flow" ? 1 : 0,
 			total: 1
 		};
 		counts = {
 			url: counts.url + add.url,
 			phone: counts.phone + add.phone,
 			quickReply: counts.quickReply + add.quickReply,
+			flow: counts.flow + add.flow,
 			total: counts.total + add.total
 		};
 	}
@@ -2679,6 +2688,7 @@ const buttonNodes = (buttons) => buttons.flatMap((button) => {
 		case "url": return [button.text, button.url];
 		case "phone": return [button.text, button.phone];
 		case "copy-code": return [button.code];
+		case "flow": return [button.text];
 	}
 });
 const whatsappChannel = (input, field) => {
@@ -2772,6 +2782,7 @@ const whatsappChannel = (input, field) => {
 		over("URL buttons", counts.url, URL_BUTTON_LIMIT);
 		over("phone buttons", counts.phone, PHONE_BUTTON_LIMIT);
 		over("quick-reply buttons", counts.quickReply, QUICK_REPLY_LIMIT);
+		over("flow buttons", counts.flow, FLOW_BUTTON_LIMIT);
 		over("buttons in all", counts.total, BUTTON_LIMIT);
 		roots.push(...buttonNodes(buttons));
 	}
@@ -2790,7 +2801,8 @@ const BUTTON_TAGS = [
 	"UrlButton",
 	"QuickReplyButton",
 	"PhoneButton",
-	"CopyCodeButton"
+	"CopyCodeButton",
+	"FlowButton"
 ];
 const buttonList = (input, ctx, local, parent) => {
 	const { lowerer } = input;
@@ -2815,6 +2827,54 @@ const buttonList = (input, ctx, local, parent) => {
 		if (value === void 0) lowerer.error(ctx, element, "missing-attribute", `This button needs \`${name}\`.`, `Write ${name}="…" or ${name}={input.field}.`);
 		return value;
 	};
+	const flowButton = (element) => {
+		const label_ = label(element, "label");
+		const values = /* @__PURE__ */ new Map();
+		let valid = true;
+		const refuse = (node, code, message, fix) => {
+			valid = false;
+			lowerer.error(ctx, node, code, message, fix);
+		};
+		for (const item of attributesOf(element)) {
+			if (item.type === "JSXSpreadAttribute") {
+				refuse(item, "invalid-attribute", "A spread attribute runs code, and templates render without running code.", "Write flow, action and screen as string literals.");
+				continue;
+			}
+			const nameNode = child(item, "name");
+			const name = nameNode === void 0 ? "" : jsxName(nameNode);
+			if (name === "key") continue;
+			if (name !== "flow" && name !== "action" && name !== "screen") {
+				refuse(item, "invalid-attribute", `\`${name}\` is not an attribute of this button.`, "The attributes are flow, action and screen.");
+				continue;
+			}
+			const raw = child(item, "value");
+			const literal = raw?.type === "JSXExpressionContainer" ? child(raw, "expression") : raw;
+			if (literal?.type !== "StringLiteral") {
+				refuse(item, "invalid-attribute", `\`${name}\` is fixed when the template is registered, so it is a string literal, not a binding.`, `Write ${name}="…".`);
+				continue;
+			}
+			values.set(name, text(literal, "value") ?? "");
+		}
+		const flow = values.get("flow");
+		if (flow === void 0) {
+			if (valid) refuse(element, "missing-attribute", "This button needs `flow`.", "Write flow=\"handle\".");
+		} else if (flow.length > FLOW_HANDLE_LIMIT || !FLOW_HANDLE_PATTERN.test(flow)) refuse(element, "invalid-attribute", `\`${flow}\` is not a flow handle.`, `Use the lowercase kebab-case handle of flows/<handle>.json, at most ${FLOW_HANDLE_LIMIT} characters.`);
+		const action = values.get("action") ?? "navigate";
+		if (!FLOW_ACTIONS.includes(action)) refuse(element, "invalid-attribute", `\`${action}\` is not a flow action.`, `Use one of ${FLOW_ACTIONS.join(", ")}.`);
+		const screen = values.get("screen");
+		if (screen !== void 0) {
+			if (action === "data_exchange") refuse(element, "invalid-attribute", "A data_exchange flow has its endpoint choose the first screen, so it takes no `screen`.", "Remove screen, or use action=\"navigate\".");
+			else if (!FLOW_SCREEN_PATTERN.test(screen) || screen === "SUCCESS") refuse(element, "invalid-attribute", `\`${screen}\` is not a flow screen id.`, "Use the screen's id: letters and underscores, at most 100 characters, and not SUCCESS.");
+		}
+		if (!valid || flow === void 0 || label_ === void 0) return void 0;
+		return {
+			type: "flow",
+			text: label_,
+			flow,
+			action,
+			...screen === void 0 ? {} : { screen }
+		};
+	};
 	const single = (element) => {
 		const tag = tagOf(element);
 		switch (tag.startsWith(`${local}.`) ? tag.slice(local.length + 1) : "") {
@@ -2851,6 +2911,7 @@ const buttonList = (input, ctx, local, parent) => {
 					code
 				};
 			}
+			case "FlowButton": return flowButton(element);
 			default:
 				lowerer.error(ctx, element, "whatsapp-structure", `<WhatsApp.Buttons> holds ${BUTTON_TAGS.map((name) => `<WhatsApp.${name}>`).join(", ")}.`, "Use one of the button components.");
 				return;

package/dist/{render-C1X3S5or.d.ts → render-BdvewoQt.d.ts}

@@ -167,6 +167,14 @@ type IrWhatsAppButton = {
 } | {
   readonly type: "copy-code";
   readonly code: IrValue;
+} | {
+  readonly type: "flow";
+  readonly text: IrValue;
+  /** The Samva flow handle, resolved to Meta's flow id when the template is registered. */
+  readonly flow: string;
+  readonly action: "navigate" | "data_exchange";
+  /** Meta's `navigate_screen`; absent opens the flow's first entry screen. */
+  readonly screen?: string;
 };
 /** A button, or buttons that appear when a condition over the input holds. */
 type IrWhatsAppButtonNode = IrWhatsAppButton | {
@@ -243,6 +251,12 @@ type RenderedWhatsAppButton = {
 } | {
   readonly type: "copy-code";
   readonly code: string;
+} | {
+  readonly type: "flow";
+  readonly text: string;
+  readonly flow: string;
+  readonly action: "navigate" | "data_exchange";
+  readonly screen?: string;
 };
 /** A WhatsApp message with every text rendered and every conditional button resolved. */
 interface RenderedIrWhatsApp {

package/dist/{render-6gLei61p.js → render-DpYouYYG.js}

@@ -1,7 +1,7 @@
-import { S as emailElement, o as serializeEmailHtml } from "./html-eOZfDwVf.js";
+import { S as emailElement, o as serializeEmailHtml } from "./html-BvRFepeO.js";
 import { i as drainEmailDiagnostics, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
-import { f as preheaderNode } from "./components-CwWSoG5N.js";
-import { i as renderDarkRules, r as applyStylesheet } from "./ir-D-gTGquU.js";
+import { f as preheaderNode } from "./components-3XHjYD3i.js";
+import { i as renderDarkRules, r as applyStylesheet } from "./ir-DNL6H7jA.js";
 import { r as hasBlockingDiagnostic, t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
 //#region src/email/text.ts
 const PARAGRAPH = "\n\n";

package/dist/render.d.ts

@@ -1,5 +1,5 @@
 import { C as isUrlAttribute, S as emailElement, _ as EmailGlobalProps, b as EmailStyle, g as EmailElementSpec, h as EmailAttributeSpec, m as EMAIL_GLOBAL_ATTRIBUTES, p as EMAIL_ELEMENTS, r as EmailNode, v as EmailIntrinsicElements, x as EmailTag, y as EmailLayout } from "./jsx-runtime-DC7xG0aA.js";
-import { $ as IrWhatsApp, A as emailAuthoringTarget, B as IrElement, D as EmittedPosition, E as EmailElementSelection, F as emailSelections, G as IrPredicate, H as IrFormatter, I as renderIrPreview, J as IrRawPart, K as IrPreheader, L as IrArithmetic, M as emailSelectionAncestry, N as emailSelectionIndex, O as INSTANCE_PATH_ATTRIBUTE, P as emailSelectionSiblings, Q as IrValue, R as IrComparison, U as IrIf, V as IrEmail, W as IrNode, X as IrSource, Y as IrSms, Z as IrStyle, a as renderEmailContent, at as RenderedPosition, c as checkAttribute, ct as TemplateIr, d as escapeText, et as IrWhatsAppButton, f as kebab, i as compileEmail, it as RenderedIrWhatsApp, j as emailDefinitionInstances, k as IrPreview, l as declarationValue, m as serializeStyle, n as EmailCompileOutput, nt as RenderOptions, o as EmailHtmlOutput, ot as RenderedWhatsAppButton, p as serializeEmailHtml, q as IrRaw, r as RenderedEmail, rt as RenderedIrEmail, s as SerializeEmailOptions, st as SML_IR_VERSION, t as EMAIL_DOCTYPE, tt as IrWhatsAppButtonNode, u as escapeAttribute, z as IrEach } from "./render-C1X3S5or.js";
+import { $ as IrWhatsApp, A as emailAuthoringTarget, B as IrElement, D as EmittedPosition, E as EmailElementSelection, F as emailSelections, G as IrPredicate, H as IrFormatter, I as renderIrPreview, J as IrRawPart, K as IrPreheader, L as IrArithmetic, M as emailSelectionAncestry, N as emailSelectionIndex, O as INSTANCE_PATH_ATTRIBUTE, P as emailSelectionSiblings, Q as IrValue, R as IrComparison, U as IrIf, V as IrEmail, W as IrNode, X as IrSource, Y as IrSms, Z as IrStyle, a as renderEmailContent, at as RenderedPosition, c as checkAttribute, ct as TemplateIr, d as escapeText, et as IrWhatsAppButton, f as kebab, i as compileEmail, it as RenderedIrWhatsApp, j as emailDefinitionInstances, k as IrPreview, l as declarationValue, m as serializeStyle, n as EmailCompileOutput, nt as RenderOptions, o as EmailHtmlOutput, ot as RenderedWhatsAppButton, p as serializeEmailHtml, q as IrRaw, r as RenderedEmail, rt as RenderedIrEmail, s as SerializeEmailOptions, st as SML_IR_VERSION, t as EMAIL_DOCTYPE, tt as IrWhatsAppButtonNode, u as escapeAttribute, z as IrEach } from "./render-BdvewoQt.js";
 //#region src/render-ir.d.ts
 interface IrRenderDiagnostic {
   readonly code: string;

package/dist/render.js

@@ -1,6 +1,6 @@
-import { C as isUrlAttribute, S as emailElement, _ as renderIr, a as kebab, b as EMAIL_ELEMENTS, c as INSTANCE_PATH_ATTRIBUTE, d as emailSelectionAncestry, f as emailSelectionIndex, g as IrRenderError, h as renderIrPreview, i as escapeText, l as emailAuthoringTarget, m as emailSelections, n as declarationValue, o as serializeEmailHtml, p as emailSelectionSiblings, r as escapeAttribute, s as serializeStyle, t as checkAttribute, u as emailDefinitionInstances, v as renderIrSms, x as EMAIL_GLOBAL_ATTRIBUTES, y as renderIrWhatsApp } from "./html-eOZfDwVf.js";
-import { t as SML_IR_VERSION } from "./ir-D-gTGquU.js";
-import { i as deriveEmailText, n as compileEmail, r as renderEmailContent, t as EMAIL_DOCTYPE } from "./render-6gLei61p.js";
+import { C as isUrlAttribute, S as emailElement, _ as renderIr, a as kebab, b as EMAIL_ELEMENTS, c as INSTANCE_PATH_ATTRIBUTE, d as emailSelectionAncestry, f as emailSelectionIndex, g as IrRenderError, h as renderIrPreview, i as escapeText, l as emailAuthoringTarget, m as emailSelections, n as declarationValue, o as serializeEmailHtml, p as emailSelectionSiblings, r as escapeAttribute, s as serializeStyle, t as checkAttribute, u as emailDefinitionInstances, v as renderIrSms, x as EMAIL_GLOBAL_ATTRIBUTES, y as renderIrWhatsApp } from "./html-BvRFepeO.js";
+import { t as SML_IR_VERSION } from "./ir-DNL6H7jA.js";
+import { i as deriveEmailText, n as compileEmail, r as renderEmailContent, t as EMAIL_DOCTYPE } from "./render-DpYouYYG.js";
 //#region src/sms-segments.ts
 const GSM7_EXTENDED = /* @__PURE__ */ new Set([
 	"[",

package/dist/whatsapp.d.ts

@@ -36,9 +36,26 @@ interface WhatsAppCopyCodeButtonProps {
   /** The code the button copies. */
   readonly children?: EmailChild;
 }
+type WhatsAppFlowAction = "navigate" | "data_exchange";
+interface WhatsAppFlowButtonProps {
+  /**
+   * The Samva flow handle: lowercase kebab-case, the file `flows/<handle>.json` in the template
+   * project. Samva maps it to Meta's flow id per business account when it registers the template.
+   */
+  readonly flow: string;
+  /** `navigate` by default; `data_exchange` has the flow's endpoint choose the first screen. */
+  readonly action?: WhatsAppFlowAction | undefined;
+  /**
+   * The screen a `navigate` flow opens on (Meta's `navigate_screen`); omitted, the flow's first
+   * entry screen. Refused with `data_exchange`.
+   */
+  readonly screen?: string | undefined;
+  /** The button label. */
+  readonly children?: EmailChild;
+}
 /**
  * The root of a WhatsApp body. Meta's template anatomy is the vocabulary: `WhatsApp.Header`,
- * `WhatsApp.Body`, `WhatsApp.Footer` and `WhatsApp.Buttons`, whose children are the four button
+ * `WhatsApp.Body`, `WhatsApp.Footer` and `WhatsApp.Buttons`, whose children are the five button
  * kinds.
  */
 declare const WhatsApp: ((props: WhatsAppProps) => EmailNode) & {
@@ -50,6 +67,7 @@ declare const WhatsApp: ((props: WhatsAppProps) => EmailNode) & {
   QuickReplyButton: (props: WhatsAppQuickReplyButtonProps) => EmailNode;
   PhoneButton: (props: WhatsAppPhoneButtonProps) => EmailNode;
   CopyCodeButton: (props: WhatsAppCopyCodeButtonProps) => EmailNode;
+  FlowButton: (props: WhatsAppFlowButtonProps) => EmailNode;
 };
 //#endregion
-export { WhatsApp, WhatsAppButtonsProps, type WhatsAppCategory, WhatsAppCopyCodeButtonProps, WhatsAppHeaderProps, type WhatsAppHeaderType, WhatsAppPhoneButtonProps, WhatsAppProps, WhatsAppQuickReplyButtonProps, WhatsAppTextProps, WhatsAppUrlButtonProps };
+export { WhatsApp, WhatsAppButtonsProps, type WhatsAppCategory, WhatsAppCopyCodeButtonProps, WhatsAppFlowAction, WhatsAppFlowButtonProps, WhatsAppHeaderProps, type WhatsAppHeaderType, WhatsAppPhoneButtonProps, WhatsAppProps, WhatsAppQuickReplyButtonProps, WhatsAppTextProps, WhatsAppUrlButtonProps };

package/dist/whatsapp.js

@@ -3,7 +3,7 @@ import { a as jsx, n as Fragment } from "./jsx-runtime-CBlexoeR.js";
 const fragment = (children) => jsx(Fragment, { children });
 /**
 * The root of a WhatsApp body. Meta's template anatomy is the vocabulary: `WhatsApp.Header`,
-* `WhatsApp.Body`, `WhatsApp.Footer` and `WhatsApp.Buttons`, whose children are the four button
+* `WhatsApp.Body`, `WhatsApp.Footer` and `WhatsApp.Buttons`, whose children are the five button
 * kinds.
 */
 const WhatsApp = Object.assign((props) => fragment(props.children), {
@@ -14,7 +14,8 @@ const WhatsApp = Object.assign((props) => fragment(props.children), {
 	UrlButton: (props) => fragment(props.children),
 	QuickReplyButton: (props) => fragment(props.children),
 	PhoneButton: (props) => fragment(props.children),
-	CopyCodeButton: (props) => fragment(props.children)
+	CopyCodeButton: (props) => fragment(props.children),
+	FlowButton: (props) => fragment(props.children)
 });
 //#endregion
 export { WhatsApp };

package/generated/contract.json

@@ -720,6 +720,36 @@
           "description": "The code the button copies."
         }
       ]
+    },
+    {
+      "name": "WhatsApp.FlowButton",
+      "import": "@samva/markup/whatsapp",
+      "props": [
+        {
+          "name": "flow",
+          "type": "string",
+          "optional": false,
+          "description": "The Samva flow handle: lowercase kebab-case, the file `flows/<handle>.json` in the template project. Samva maps it to Meta's flow id per business account when it registers the template."
+        },
+        {
+          "name": "action",
+          "type": "WhatsAppFlowAction",
+          "optional": true,
+          "description": "`navigate` by default; `data_exchange` has the flow's endpoint choose the first screen."
+        },
+        {
+          "name": "screen",
+          "type": "string",
+          "optional": true,
+          "description": "The screen a `navigate` flow opens on (Meta's `navigate_screen`); omitted, the flow's first entry screen. Refused with `data_exchange`."
+        },
+        {
+          "name": "children",
+          "type": "EmailChild",
+          "optional": true,
+          "description": "The button label."
+        }
+      ]
     }
   ],
   "elements": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samva/markup",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Type-safe authoring and compilation primitives for Samva templates",
   "keywords": [
     "email",