@rovela-ai/sdk 0.14.0 → 0.15.0

package/dist/emails/registry.js

@@ -4,16 +4,34 @@
  * The typed registry of every transactional email the store sends (Phase
  * D). This single object powers the whole /admin/emails surface: the list
  * page (name, trigger, category), the HTML previews (renderSample calls the
- * REAL template with realistic demo data), the test sends, and the
- * per-email variable chips for subject editing.
+ * REAL template with realistic demo data), the test sends, the per-email
+ * variable chips, AND the block editor — each entry declares its dynamic
+ * slots (order items, totals, tracking…) and the default block program that
+ * seeds "Customize layout".
  *
  * No registry entry, no store_emails row, no saved theme = the emails ship
- * byte-identical to today.
+ * byte-identical to today. The shipped template functions stay the default
+ * render path; blocks only take over when the merchant saved a custom body,
+ * and tryRenderBlocksEmail() falls back to null (→ shipped template) on any
+ * render surprise.
  */
-import { renderEmailVerification, getEmailVerificationSubject, renderWelcomeEmail, getWelcomeEmailSubject, renderPasswordResetEmail, getPasswordResetSubject, renderOrderConfirmation, getOrderConfirmationSubject, renderOrderShipped, getOrderShippedSubject, renderOrderReadyForPickup, getOrderReadyForPickupSubject, renderOrderDelivered, getOrderDeliveredSubject, renderOrderCancelled, getOrderCancelledSubject, renderRefundProcessed, getRefundProcessedSubject, } from './templates';
+import { renderEmailBlocks } from './blocks';
+import { baseLayout, renderEmailVerification, getEmailVerificationSubject, renderWelcomeEmail, getWelcomeEmailSubject, renderPasswordResetEmail, getPasswordResetSubject, renderOrderConfirmation, getOrderConfirmationSubject, renderOrderShipped, getOrderShippedSubject, renderOrderReadyForPickup, getOrderReadyForPickupSubject, renderOrderDelivered, getOrderDeliveredSubject, renderOrderCancelled, getOrderCancelledSubject, renderRefundProcessed, getRefundProcessedSubject, } from './templates';
+import { renderOrderDetailsBox, renderPaymentInstructionsBox, renderOrderItemsSection, renderOrderSummary, renderOrderAddress, renderReceiptButton, } from './templates/order-confirmation';
+import { renderTrackingDetails, renderDeliveryEstimate, renderShippingTo, } from './templates/order-shipped';
+import { renderPickupOrderInfo, renderPickupLocation, renderOpeningHours, renderPickupInstructions, renderPickupPhoneLine, } from './templates/order-ready-for-pickup';
+import { renderDeliveryDetails, renderReviewRequest, renderReturnCenter, } from './templates/order-delivered';
+import { renderCancellationDetails, renderRefundInfo, } from './templates/order-cancelled';
+import { renderRefundAmountBox, renderRefundMethodBox, renderRefundTiming, } from './templates/refund-processed';
+import { renderVerifyButton, renderVerifyLinkFallback } from './templates/email-verification';
+import { renderResetButton, renderResetLinkFallback } from './templates/password-reset';
+import { renderAccountDetails } from './templates/welcome';
 // =============================================================================
 // Sample data (realistic, shared across previews)
 // =============================================================================
+/** Inline SVG product placeholder — previews never depend on the network. */
+export const SAMPLE_PRODUCT_IMAGE = 'data:image/svg+xml;charset=utf-8,' +
+    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><rect width="160" height="160" rx="16" fill="#EEECE7"/><path d="M55 64h50l6 54H49l6-54z" fill="none" stroke="#B9B2A6" stroke-width="6" stroke-linejoin="round"/><path d="M65 64v-9a15 15 0 0 1 30 0v9" fill="none" stroke="#B9B2A6" stroke-width="6" stroke-linecap="round"/></svg>');
 const SAMPLE_ADDRESS = {
     name: 'Alex Martin',
     line1: '12 Riverside Avenue',
@@ -24,10 +42,23 @@ const SAMPLE_ADDRESS = {
     country: 'US',
 };
 const SAMPLE_ITEMS = [
-    { name: 'Classic Ceramic Mug — Set of 2', quantity: 1, price: '$34.00' },
-    { name: 'Organic Cotton Tote', quantity: 2, price: '$18.00' },
+    { name: 'Classic Ceramic Mug — Set of 2', quantity: 1, price: '$34.00', imageUrl: SAMPLE_PRODUCT_IMAGE },
+    { name: 'Organic Cotton Tote', quantity: 2, price: '$18.00', imageUrl: SAMPLE_PRODUCT_IMAGE },
 ];
-const SAMPLE_ORDER_NUMBER = 'A1B2C3D4';
+export const SAMPLE_ORDER_NUMBER = 'A1B2C3D4';
+// =============================================================================
+// Block helpers
+// =============================================================================
+let blockSeq = 0;
+function b(block) {
+    blockSeq += 1;
+    return { id: `d${blockSeq}`, ...block };
+}
+const dyn = (slot) => b({ type: 'dynamic', slot });
+const txt = (html, align = 'center') => b({ type: 'text', html, align });
+const head = (text) => b({ type: 'heading', text });
+const badge = (text, emoji) => b({ type: 'badge', text, emoji });
+const btn = (label, url, style = 'filled') => b({ type: 'button', label, url, style });
 // =============================================================================
 // Registry
 // =============================================================================
@@ -39,27 +70,86 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent to the customer the moment their order is placed.',
         canDisable: false,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getOrderConfirmationSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderOrderConfirmation({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                orderDate: 'March 12, 2026',
-                paymentStatus: 'Paid',
-                items: SAMPLE_ITEMS,
-                subtotal: '$70.00',
-                discount: '-$10.00',
-                discountCode: 'WELCOME10',
-                shippingCost: '$6.00',
-                tax: '$5.28',
-                total: '$71.28',
-                shippingAddress: SAMPLE_ADDRESS,
-                orderTrackingUrl: `${config.shopUrl}/account/orders`,
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'orderDate', 'orderUrl'],
+        slots: {
+            order_details: {
+                label: 'Order details',
+                description: 'Order number, date and payment status.',
+                render: (d, _c) => renderOrderDetailsBox(d),
+            },
+            payment_instructions: {
+                label: 'Payment instructions',
+                description: 'Manual-payment instructions (wire, cash on delivery) when the order has any.',
+                render: (d, _c) => renderPaymentInstructionsBox(d),
+            },
+            order_items: {
+                label: 'Order items',
+                description: 'The purchased products with quantities and prices.',
+                render: (d, _c) => renderOrderItemsSection(d),
+            },
+            order_totals: {
+                label: 'Order totals',
+                description: 'Subtotal, discount, shipping, tax and total.',
+                render: (d, _c) => renderOrderSummary(d),
+            },
+            shipping_address: {
+                label: 'Shipping address',
+                description: 'Where the order ships (or the pickup location on click & collect).',
+                render: (d, _c) => renderOrderAddress(d),
+            },
+            receipt_button: {
+                label: 'Receipt download',
+                description: 'A download button for the card receipt, when one exists.',
+                render: (d, _c) => renderReceiptButton(d),
+            },
+        },
+        defaultBlocks: [
+            badge('Order Confirmed'),
+            head('Thank You for Your Order!'),
+            txt("Hi {{customerName}}, we've received your order and we're getting it ready. We'll email you again as soon as it's on its way or ready to collect."),
+            dyn('order_details'),
+            dyn('payment_instructions'),
+            dyn('order_items'),
+            dyn('order_totals'),
+            dyn('shipping_address'),
+            btn('View Order Details', '{{orderUrl}}'),
+            dyn('receipt_button'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                orderDate: data.orderDate,
+                orderUrl: data.orderTrackingUrl,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            orderDate: 'March 12, 2026',
+            paymentStatus: 'Paid',
+            items: SAMPLE_ITEMS,
+            subtotal: '$70.00',
+            discount: '-$10.00',
+            discountCode: 'WELCOME10',
+            shippingCost: '$6.00',
+            tax: '$5.28',
+            total: '$71.28',
+            shippingAddress: SAMPLE_ADDRESS,
+            orderTrackingUrl: `${config.shopUrl}/account/orders`,
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[0];
+            return {
+                subject: getOrderConfirmationSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderOrderConfirmation(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -72,21 +162,63 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent when you mark an order as shipped (with tracking when available).',
         canDisable: false,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getOrderShippedSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderOrderShipped({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                trackingNumber: '1Z999AA10123456784',
-                carrierName: 'UPS',
-                estimatedDeliveryDate: 'March 16, 2026',
-                shippingAddress: SAMPLE_ADDRESS,
-                trackingUrl: 'https://www.ups.com/track?tracknum=1Z999AA10123456784',
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'trackingNumber', 'carrierName', 'trackingUrl'],
+        slots: {
+            tracking_details: {
+                label: 'Tracking details',
+                description: 'Order number, tracking number and carrier.',
+                render: (d, _c) => renderTrackingDetails(d),
+            },
+            delivery_estimate: {
+                label: 'Delivery estimate',
+                description: 'The estimated delivery date, highlighted.',
+                render: (d, _c) => renderDeliveryEstimate(d),
+            },
+            shipping_address: {
+                label: 'Shipping address',
+                description: "Where the package is heading.",
+                render: (d, _c) => renderShippingTo(d),
+            },
+        },
+        defaultBlocks: [
+            badge('Order Shipped', '📦'),
+            head('Your Order is On Its Way!'),
+            txt('Hi {{customerName}}, great news! Your order has been shipped and is heading your way.'),
+            dyn('tracking_details'),
+            dyn('delivery_estimate'),
+            dyn('shipping_address'),
+            btn('Track Your Package', '{{trackingUrl}}'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                trackingNumber: data.trackingNumber,
+                carrierName: data.carrierName,
+                trackingUrl: data.trackingUrl,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            trackingNumber: '1Z999AA10123456784',
+            carrierName: 'UPS',
+            estimatedDeliveryDate: 'March 16, 2026',
+            shippingAddress: SAMPLE_ADDRESS,
+            trackingUrl: 'https://www.ups.com/track?tracknum=1Z999AA10123456784',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[1];
+            return {
+                subject: getOrderShippedSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderOrderShipped(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -99,22 +231,75 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent on click & collect orders when you mark them ready to collect.',
         canDisable: false,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getOrderReadyForPickupSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderOrderReadyForPickup({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                locationName: 'Downtown Store',
-                pickupAddress: { ...SAMPLE_ADDRESS, name: 'Downtown Store', line2: undefined },
-                openingHoursLines: ['Mon–Fri 9:00–18:00', 'Sat 10:00–16:00'],
-                pickupInstructions: 'Come to the collection counter with your order number.',
-                locationPhone: '+1 (555) 010-0100',
-                orderUrl: `${config.shopUrl}/account/orders`,
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'locationName', 'orderUrl'],
+        slots: {
+            pickup_details: {
+                label: 'Pickup details',
+                description: 'Order number and pickup location name.',
+                render: (d, _c) => renderPickupOrderInfo(d),
+            },
+            pickup_address: {
+                label: 'Pickup address',
+                description: "The store location's address.",
+                render: (d, _c) => renderPickupLocation(d),
+            },
+            opening_hours: {
+                label: 'Opening hours',
+                description: "The location's opening hours, when set.",
+                render: (d, _c) => renderOpeningHours(d),
+            },
+            pickup_instructions: {
+                label: 'Pickup instructions',
+                description: 'Your pickup instructions (counter, what to bring), when set.',
+                render: (d, _c) => renderPickupInstructions(d),
+            },
+            phone_line: {
+                label: 'Store phone',
+                description: "A 'Questions? Call the store' line, when the location has a phone.",
+                render: (d, _c) => renderPickupPhoneLine(d),
+            },
+        },
+        defaultBlocks: [
+            badge('Ready for Pickup', '🛍️'),
+            head('Your Order is Ready for Pickup!'),
+            txt('Hi {{customerName}}, your order is packed and waiting for you at {{locationName}}. Bring your order number when you come by.'),
+            dyn('pickup_details'),
+            dyn('pickup_address'),
+            dyn('opening_hours'),
+            dyn('pickup_instructions'),
+            btn('View Your Order', '{{orderUrl}}'),
+            dyn('phone_line'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                locationName: data.locationName,
+                orderUrl: data.orderUrl,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            locationName: 'Downtown Store',
+            pickupAddress: { ...SAMPLE_ADDRESS, name: 'Downtown Store', line2: undefined },
+            openingHoursLines: ['Mon–Fri 9:00–18:00', 'Sat 10:00–16:00'],
+            pickupInstructions: 'Come to the collection counter with your order number.',
+            locationPhone: '+1 (555) 010-0100',
+            orderUrl: `${config.shopUrl}/account/orders`,
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[2];
+            return {
+                subject: getOrderReadyForPickupSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderOrderReadyForPickup(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -127,19 +312,59 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent when you mark an order as delivered.',
         canDisable: true,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getOrderDeliveredSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderOrderDelivered({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                deliveryDate: 'March 16, 2026',
-                deliveryLocation: 'Front door',
-                returnCenterUrl: `${config.shopUrl}/account/orders`,
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'deliveryDate', 'shopUrl'],
+        slots: {
+            delivery_details: {
+                label: 'Delivery details',
+                description: 'Order number, delivery date and where it was left.',
+                render: (d, _c) => renderDeliveryDetails(d),
+            },
+            review_request: {
+                label: 'Review request',
+                description: 'A highlighted ask-for-a-review card, when reviews are set up.',
+                render: (d, _c) => renderReviewRequest(d),
+            },
+            return_center: {
+                label: 'Returns link',
+                description: 'A return/exchange prompt with a button, when returns are enabled.',
+                render: (d, _c) => renderReturnCenter(d),
+            },
+        },
+        defaultBlocks: [
+            badge('Delivered'),
+            head('Your Order Has Been Delivered!'),
+            txt('Hi {{customerName}}, your order has been successfully delivered. We hope you love your purchase!'),
+            dyn('delivery_details'),
+            dyn('review_request'),
+            dyn('return_center'),
+            btn('Continue Shopping', '{{shopUrl}}'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                deliveryDate: data.deliveryDate,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            deliveryDate: 'March 16, 2026',
+            deliveryLocation: 'Front door',
+            returnCenterUrl: `${config.shopUrl}/account/orders`,
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[3];
+            return {
+                subject: getOrderDeliveredSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderOrderDelivered(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -152,19 +377,54 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent when an order is cancelled.',
         canDisable: false,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getOrderCancelledSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderOrderCancelled({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                cancellationReason: 'Requested by the customer',
-                cancellationDate: 'March 13, 2026',
-                refundMessage: 'Your payment has been refunded to your original payment method.',
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'shopUrl'],
+        slots: {
+            cancellation_details: {
+                label: 'Cancellation details',
+                description: 'Order number, cancellation date and the reason when one was given.',
+                render: (d, _c) => renderCancellationDetails(d),
+            },
+            refund_info: {
+                label: 'Refund information',
+                description: 'The refund status message for this cancellation.',
+                render: (d, _c) => renderRefundInfo(d),
+            },
+        },
+        defaultBlocks: [
+            head('Order Cancelled'),
+            txt('Hi {{customerName}},', 'left'),
+            txt('Your order #{{orderNumber}} has been cancelled as requested.', 'left'),
+            dyn('cancellation_details'),
+            dyn('refund_info'),
+            txt("If you have any questions about this cancellation, please don't hesitate to reach out to our support team.", 'left'),
+            btn('Continue Shopping', '{{shopUrl}}'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                cancellationDate: data.cancellationDate,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            cancellationReason: 'Requested by the customer',
+            cancellationDate: 'March 13, 2026',
+            refundMessage: 'Your payment has been refunded to your original payment method.',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[4];
+            return {
+                subject: getOrderCancelledSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderOrderCancelled(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -177,21 +437,64 @@ export const EMAIL_REGISTRY = [
         category: 'orders',
         trigger: 'Sent when a refund is issued (full or from an approved return).',
         canDisable: false,
-        variables: ['storeName', 'orderNumber', 'customerName'],
-        renderSample: (config) => ({
-            subject: getRefundProcessedSubject(config.storeName, SAMPLE_ORDER_NUMBER),
-            html: renderRefundProcessed({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                orderNumber: SAMPLE_ORDER_NUMBER,
-                refundAmount: '$71.28',
-                refundDate: 'March 14, 2026',
-                paymentMethod: 'Original payment method',
-                estimatedArrival: '5-10 business days',
-                businessDays: '5-10',
-            }),
+        variables: ['storeName', 'orderNumber', 'customerName', 'refundAmount', 'shopUrl'],
+        slots: {
+            refund_amount: {
+                label: 'Refund amount',
+                description: 'The refunded amount with order number and date.',
+                render: (d, _c) => renderRefundAmountBox(d),
+            },
+            refund_method: {
+                label: 'Refund method',
+                description: 'The payment method and estimated arrival window.',
+                render: (d, _c) => renderRefundMethodBox(d),
+            },
+            refund_timing: {
+                label: 'Timing note',
+                description: "The 'allow N business days' expectations line.",
+                render: (d, _c) => renderRefundTiming(d),
+            },
+        },
+        defaultBlocks: [
+            badge('Refund Processed'),
+            head('Your Refund Has Been Processed'),
+            txt('Hi {{customerName}},', 'left'),
+            txt('Good news! Your refund for order #{{orderNumber}} has been processed and issued to your original payment method.', 'left'),
+            dyn('refund_amount'),
+            dyn('refund_method'),
+            dyn('refund_timing'),
+            txt("If you have any questions about this refund, please don't hesitate to contact us."),
+            btn('Continue Shopping', '{{shopUrl}}'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                orderNumber: data.orderNumber,
+                refundAmount: data.refundAmount,
+                refundDate: data.refundDate,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            orderNumber: SAMPLE_ORDER_NUMBER,
+            refundAmount: '$71.28',
+            refundDate: 'March 14, 2026',
+            paymentMethod: 'Original payment method',
+            estimatedArrival: '5-10 business days',
+            businessDays: '5-10',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[5];
+            return {
+                subject: getRefundProcessedSubject(config.storeName, SAMPLE_ORDER_NUMBER),
+                html: renderRefundProcessed(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             orderNumber: SAMPLE_ORDER_NUMBER,
@@ -205,17 +508,51 @@ export const EMAIL_REGISTRY = [
         category: 'account',
         trigger: 'Sent when a customer creates an account, to confirm their address.',
         canDisable: false,
-        variables: ['storeName', 'customerName'],
-        renderSample: (config) => ({
-            subject: getEmailVerificationSubject(config.storeName),
-            html: renderEmailVerification({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                verificationLink: `${config.shopUrl}/auth/verify-email?token=sample`,
-                expiryTime: '24',
-            }),
+        variables: ['storeName', 'customerName', 'expiryTime'],
+        slots: {
+            verify_button: {
+                label: 'Verification button',
+                description: "The 'Verify Email Address' button with the secure link.",
+                render: (d, _c) => renderVerifyButton(d),
+            },
+            link_fallback: {
+                label: 'Link fallback',
+                description: 'The copy-paste link box for clients where the button fails.',
+                render: (d, _c) => renderVerifyLinkFallback(d),
+            },
+        },
+        defaultBlocks: [
+            head('Verify Your Email Address'),
+            txt('Hi {{customerName}},', 'left'),
+            txt('Thanks for signing up with {{storeName}}! To complete your registration and start shopping, please verify your email address by clicking the button below.', 'left'),
+            dyn('verify_button'),
+            txt('This link will expire in {{expiryTime}} hours for security reasons.', 'left'),
+            txt("If you didn't create an account with us, you can safely ignore this email.", 'left'),
+            dyn('link_fallback'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                expiryTime: data.expiryTime,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            verificationLink: `${config.shopUrl}/auth/verify-email?token=sample`,
+            expiryTime: '24',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[6];
+            return {
+                subject: getEmailVerificationSubject(config.storeName),
+                html: renderEmailVerification(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             customerName: 'Alex',
@@ -227,16 +564,43 @@ export const EMAIL_REGISTRY = [
         category: 'account',
         trigger: 'Sent once, right after a customer verifies their email.',
         canDisable: true,
-        variables: ['storeName', 'customerName'],
-        renderSample: (config) => ({
-            subject: getWelcomeEmailSubject(config.storeName),
-            html: renderWelcomeEmail({
-                config,
-                customerName: 'Alex',
-                customerEmail: 'alex@example.com',
-                createdDate: 'March 12, 2026',
-            }),
+        variables: ['storeName', 'customerName', 'shopUrl'],
+        slots: {
+            account_details: {
+                label: 'Account details',
+                description: "The customer's email + account creation date box.",
+                render: (d, _c) => renderAccountDetails(d),
+            },
+        },
+        defaultBlocks: [
+            head('Welcome to {{storeName}}!'),
+            txt('Hi {{customerName}},', 'left'),
+            txt("Thank you for creating an account with us! We're excited to have you join our community.", 'left'),
+            txt('Your account is now set up and ready to go. You can start exploring our products and enjoy a seamless shopping experience.', 'left'),
+            btn('Start Shopping', '{{shopUrl}}'),
+            dyn('account_details'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            customerEmail: 'alex@example.com',
+            createdDate: 'March 12, 2026',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[7];
+            return {
+                subject: getWelcomeEmailSubject(config.storeName),
+                html: renderWelcomeEmail(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             customerName: 'Alex',
@@ -248,16 +612,50 @@ export const EMAIL_REGISTRY = [
         category: 'account',
         trigger: 'Sent when a customer asks to reset their password.',
         canDisable: false,
-        variables: ['storeName', 'customerName'],
-        renderSample: (config) => ({
-            subject: getPasswordResetSubject(config.storeName),
-            html: renderPasswordResetEmail({
-                config,
-                customerName: 'Alex',
-                resetLink: `${config.shopUrl}/auth/reset-password?token=sample`,
-                expiryTime: '1',
-            }),
+        variables: ['storeName', 'customerName', 'expiryTime'],
+        slots: {
+            reset_button: {
+                label: 'Reset button',
+                description: "The 'Reset Password' button with the secure link.",
+                render: (d, _c) => renderResetButton(d),
+            },
+            link_fallback: {
+                label: 'Link fallback',
+                description: 'The copy-paste link box for clients where the button fails.',
+                render: (d, _c) => renderResetLinkFallback(d),
+            },
+        },
+        defaultBlocks: [
+            head('Reset Your Password'),
+            txt('Hi {{customerName}},', 'left'),
+            txt('We received a request to reset your password. Click the button below to create a new password:', 'left'),
+            dyn('reset_button'),
+            txt('This link will expire in {{expiryTime}} hours for security reasons.', 'left'),
+            txt("If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.", 'left'),
+            dyn('link_fallback'),
+        ],
+        buildVars: (d, config) => {
+            const data = d;
+            return {
+                storeName: config.storeName,
+                customerName: data.customerName,
+                expiryTime: data.expiryTime,
+                shopUrl: config.shopUrl,
+            };
+        },
+        sampleData: (config) => ({
+            config,
+            customerName: 'Alex',
+            resetLink: `${config.shopUrl}/auth/reset-password?token=sample`,
+            expiryTime: '1',
         }),
+        renderSample: (config) => {
+            const entry = EMAIL_REGISTRY[8];
+            return {
+                subject: getPasswordResetSubject(config.storeName),
+                html: renderPasswordResetEmail(entry.sampleData(config)),
+            };
+        },
         sampleVars: (config) => ({
             storeName: config.storeName,
             customerName: 'Alex',
@@ -267,4 +665,68 @@ export const EMAIL_REGISTRY = [
 export function getEmailRegistryEntry(key) {
     return EMAIL_REGISTRY.find((e) => e.key === key);
 }
+// =============================================================================
+// Block-body rendering (the fail-open custom path)
+// =============================================================================
+/**
+ * Render a customized (block) body for a BUILT-IN email against real or
+ * sample data. Returns the full email HTML, or null on ANY surprise — the
+ * caller then falls back to the shipped template. A merchant can never
+ * break their own transactional emails.
+ */
+export function tryRenderBlocksEmail(key, blocks, data, config, title) {
+    try {
+        const entry = getEmailRegistryEntry(key);
+        if (!entry || blocks.length === 0)
+            return null;
+        const slots = {};
+        for (const [slotKey, slot] of Object.entries(entry.slots)) {
+            slots[slotKey] = () => slot.render(data, config);
+        }
+        const content = renderEmailBlocks(blocks, {
+            config,
+            vars: entry.buildVars(data, config),
+            slots,
+        });
+        return baseLayout({ config, title, content });
+    }
+    catch (error) {
+        console.error(`[Emails] Custom body for '${key}' failed to render — using the standard template:`, error);
+        return null;
+    }
+}
+// =============================================================================
+// Custom emails (merchant-created, block-built)
+// =============================================================================
+export const CUSTOM_EMAIL_PREFIX = 'custom_';
+export function isCustomEmailKey(key) {
+    return key.startsWith(CUSTOM_EMAIL_PREFIX);
+}
+/** Variables available inside custom emails. */
+export const CUSTOM_EMAIL_VARIABLES = ['storeName', 'customerName', 'shopUrl'];
+export function customEmailVars(config, customerName) {
+    return {
+        storeName: config.storeName,
+        customerName: customerName?.trim() || 'there',
+        shopUrl: config.shopUrl,
+    };
+}
+/** Starter body for a freshly created custom email. */
+export function customStarterBlocks(name) {
+    return [
+        head(name || 'A note from {{storeName}}'),
+        txt('Hi {{customerName}},', 'left'),
+        txt('Write your message here. Use the panel on the left to add headings, buttons, images and more.', 'left'),
+        btn('Visit the store', '{{shopUrl}}'),
+    ];
+}
+/** Render a custom email's blocks into full HTML. Throws on surprises. */
+export function renderCustomEmail(blocks, config, options) {
+    const content = renderEmailBlocks(blocks, {
+        config,
+        vars: customEmailVars(config, options.customerName),
+        slots: {},
+    });
+    return baseLayout({ config, title: options.title, content });
+}
 //# sourceMappingURL=registry.js.map