@seliseblocks/mailcraft 0.2.18 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/mailcraft-editor.bundle.js +88 -83
  3. package/dist/mailcraft-editor.bundle.js.map +3 -3
  4. package/examples/templates/activate-your-account.html +5 -5
  5. package/examples/templates/back-in-stock.html +2 -2
  6. package/examples/templates/cart-left-behind.html +2 -2
  7. package/examples/templates/community-giveaway.html +2 -2
  8. package/examples/templates/frontend-futures-invite.html +3 -3
  9. package/examples/templates/give-25-get-25.html +3 -3
  10. package/examples/templates/invoice-paid.html +3 -3
  11. package/examples/templates/meet-nova-launch.html +3 -3
  12. package/examples/templates/mega-weekend-sale.html +1 -1
  13. package/examples/templates/order-confirmed.html +2 -2
  14. package/examples/templates/rate-your-headphones.html +2 -2
  15. package/examples/templates/reset-your-password.html +3 -3
  16. package/examples/templates/thankyou-promo-code.html +2 -2
  17. package/examples/templates/the-sunday-brief.html +2 -2
  18. package/examples/templates/welcome-to-your-workspace.html +4 -4
  19. package/examples/templates/your-order-shipped.html +5 -5
  20. package/examples/templates/your-password-was-changed.html +4 -4
  21. package/examples/templates/your-signin-code.html +4 -4
  22. package/examples/vanilla.html +53 -53
  23. package/package.json +1 -1
  24. package/src/core/blocks.js +3 -3
  25. package/src/core/editor-core.js +2 -2
  26. package/src/core/export.js +20 -2
  27. package/src/core/icons.js +17 -43
  28. package/src/core/import-html.js +8 -2
  29. package/src/core/sanitize.js +1 -1
  30. package/src/core/variables.js +1 -1
  31. package/src/mailcraft-editor.js +3 -1
  32. package/src/render/block-body.js +1 -1
  33. package/src/render/style.js +6 -1
package/examples/vanilla.html CHANGED
@@ -165,7 +165,7 @@
165
165
  <div class="field">
166
166
  <label for="font-select">Font</label>
167
167
  <select id="font-select">
168
- <option value="">Default (Manrope)</option>
168
+ <option value="">Default (editor font)</option>
169
169
  <option value="inherit">Match host app</option>
170
170
  <option value="Georgia, 'Times New Roman', serif">Serif</option>
171
171
  <option value="Verdana, Geneva, sans-serif">Verdana</option>
@@ -223,14 +223,14 @@
223
223
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
224
224
  <tr>
225
225
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
226
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
226
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{company}}</p>
227
227
  </td>
228
228
  </tr>
229
229
  <tr>
230
230
  <td align="center" style="padding:34px 36px 8px;">
231
231
  <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#0065b3;">Account activation</p>
232
- <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">One last step, {{ first_name }}</h1>
233
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Welcome to {{ company }}. Tap the button below to activate your account; it takes less than ten seconds.</p>
232
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">One last step, {{first_name}}</h1>
233
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Welcome to {{company}}. Tap the button below to activate your account; it takes less than ten seconds.</p>
234
234
  </td>
235
235
  </tr>
236
236
  <tr>
@@ -248,14 +248,14 @@
248
248
  <td style="padding:28px 36px 8px;">
249
249
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
250
250
  <tr>
251
- <td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#5b6d80;">This link is personal to <strong>{{ email }}</strong> and expires in 24 hours. If you didn&rsquo;t create an account with {{ company }}, you can safely ignore this email.</td>
251
+ <td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#5b6d80;">This link is personal to <strong>{{email}}</strong> and expires in 24 hours. If you didn&rsquo;t create an account with {{company}}, you can safely ignore this email.</td>
252
252
  </tr>
253
253
  </table>
254
254
  </td>
255
255
  </tr>
256
256
  <tr>
257
257
  <td style="padding:24px 36px 30px;">
258
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
258
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
259
259
  </td>
260
260
  </tr>
261
261
  </table>
@@ -280,7 +280,7 @@
280
280
  <tr>
281
281
  <td align="center" style="padding:36px 36px 8px;">
282
282
  <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#b85c38;">Back in stock</p>
283
- <h1 style="margin:0 0 10px; font-family:Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.25; color:#29241d;">Good news, {{ first_name }}</h1>
283
+ <h1 style="margin:0 0 10px; font-family:Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.25; color:#29241d;">Good news, {{first_name}}</h1>
284
284
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#5d574c;">The Terracotta Trainer in your size is back, and your watchlist held your place in line.</p>
285
285
  </td>
286
286
  </tr>
@@ -313,7 +313,7 @@
313
313
  </tr>
314
314
  <tr>
315
315
  <td align="center" style="padding:12px 36px 32px;">
316
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">You asked us to write when this returned, {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#a3988a;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
316
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">You asked us to write when this returned, {{email}}.<br /><a href="{{unsubscribe_url}}" style="color:#a3988a;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
317
317
  </td>
318
318
  </tr>
319
319
  </table>
@@ -346,7 +346,7 @@
346
346
  </tr>
347
347
  <tr>
348
348
  <td align="center" style="padding:16px 36px 6px;">
349
- <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:25px; line-height:1.3; color:#241b3a;">Still thinking it over, {{ first_name }}?</h1>
349
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:25px; line-height:1.3; color:#241b3a;">Still thinking it over, {{first_name}}?</h1>
350
350
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#574d70;">Your bag is being held for the next 48 hours, with a little thank-you for coming back.</p>
351
351
  </td>
352
352
  </tr>
@@ -382,7 +382,7 @@
382
382
  </tr>
383
383
  <tr>
384
384
  <td align="center" style="padding:12px 36px 32px;">
385
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9c92b8;">Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#9c92b8;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#9c92b8;">Preferences</a></p>
385
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9c92b8;">Sent to {{email}}.<br /><a href="{{unsubscribe_url}}" style="color:#9c92b8;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#9c92b8;">Preferences</a></p>
386
386
  </td>
387
387
  </tr>
388
388
  </table>
@@ -421,7 +421,7 @@
421
421
  <td align="center" style="padding:36px 36px 8px;">
422
422
  <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#38bdf8;">The community giveaway</p>
423
423
  <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:1.15; color:#ffffff;">One year free,<br />for you and a friend</h1>
424
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#aeb8d8;">We turned five this month. To celebrate, five lucky members win a free year, and each brings a friend along. Entry takes one click, {{ first_name }}.</p>
424
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#aeb8d8;">We turned five this month. To celebrate, five lucky members win a free year, and each brings a friend along. Entry takes one click, {{first_name}}.</p>
425
425
  </td>
426
426
  </tr>
427
427
  <tr>
@@ -465,7 +465,7 @@
465
465
  </tr>
466
466
  <tr>
467
467
  <td align="center" style="padding:12px 36px 32px;">
468
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6788;">Sent to {{ email }} &middot; Winners notified by reply, never by DM.<br /><a href="{{ unsubscribe_url }}" style="color:#5d6788;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#5d6788;">Preferences</a></p>
468
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6788;">Sent to {{email}} &middot; Winners notified by reply, never by DM.<br /><a href="{{unsubscribe_url}}" style="color:#5d6788;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#5d6788;">Preferences</a></p>
469
469
  </td>
470
470
  </tr>
471
471
  </table>
@@ -489,7 +489,7 @@
489
489
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#171332; ">
490
490
  <tr>
491
491
  <td align="center" style="padding:12px 36px 0;">
492
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.24em; text-transform:uppercase; color:#8f7bd8;">{{ company }} presents</p>
492
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.24em; text-transform:uppercase; color:#8f7bd8;">{{company}} presents</p>
493
493
  </td>
494
494
  </tr>
495
495
  <tr>
@@ -520,7 +520,7 @@
520
520
  </tr>
521
521
  <tr>
522
522
  <td style="padding:26px 44px 6px;">
523
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#b3a9d6;">{{ first_name }}, one evening, seven short talks, zero sales pitches: view transitions, state machines, and what accessibility looks like from the inside. Followed by drinks and argumentative dessert.</p>
523
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#b3a9d6;">{{first_name}}, one evening, seven short talks, zero sales pitches: view transitions, state machines, and what accessibility looks like from the inside. Followed by drinks and argumentative dessert.</p>
524
524
  </td>
525
525
  </tr>
526
526
  <tr>
@@ -536,7 +536,7 @@
536
536
  </tr>
537
537
  <tr>
538
538
  <td align="center" style="padding:12px 36px 32px;">
539
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6d6494;">Can&rsquo;t make it in person? The talks are streamed and archived.<br />Sent to {{ email }} &middot; <a href="{{ unsubscribe_url }}" style="color:#6d6494;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6d6494;">Preferences</a></p>
539
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6d6494;">Can&rsquo;t make it in person? The talks are streamed and archived.<br />Sent to {{email}} &middot; <a href="{{unsubscribe_url}}" style="color:#6d6494;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6d6494;">Preferences</a></p>
540
540
  </td>
541
541
  </tr>
542
542
  </table>
@@ -560,7 +560,7 @@
560
560
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#16352a; ">
561
561
  <tr>
562
562
  <td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
563
- <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#cdeeda;">The {{ company }} referral programme</p>
563
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#cdeeda;">The {{company}} referral programme</p>
564
564
  <h1 style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:36px; line-height:1.1; color:#ffffff;">Give $25 &middot; Get $25</h1>
565
565
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.5; color:#d9efe2;">You both win: they save on their first order, you get credit when it ships.</p>
566
566
  </td>
@@ -570,7 +570,7 @@
570
570
  <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#9dc3ad;">Your personal link</p>
571
571
  <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#0f1c17; ">
572
572
  <tr>
573
- <td style="padding:12px 22px; font-family:'Courier New', Courier, monospace; font-size:13px; color:#e9f5ee;">example.com/r/{{ first_name }}-8f2</td>
573
+ <td style="padding:12px 22px; font-family:'Courier New', Courier, monospace; font-size:13px; color:#e9f5ee;">example.com/r/{{first_name}}-8f2</td>
574
574
  </tr>
575
575
  </table>
576
576
  </td>
@@ -607,7 +607,7 @@
607
607
  </tr>
608
608
  <tr>
609
609
  <td align="center" style="padding:12px 36px 32px;">
610
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6f9784;">No cap on rewards; refer three friends, get $75. Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#6f9784;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6f9784;">Preferences</a></p>
610
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6f9784;">No cap on rewards; refer three friends, get $75. Sent to {{email}}.<br /><a href="{{unsubscribe_url}}" style="color:#6f9784;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6f9784;">Preferences</a></p>
611
611
  </td>
612
612
  </tr>
613
613
  </table>
@@ -633,7 +633,7 @@
633
633
  <td style="padding:30px 36px 10px;">
634
634
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
635
635
  <tr>
636
- <td style="font-family:Arial, Helvetica, sans-serif; font-size:19px; font-weight:bold; color:#14324f;">{{ company }}</td>
636
+ <td style="font-family:Arial, Helvetica, sans-serif; font-size:19px; font-weight:bold; color:#14324f;">{{company}}</td>
637
637
  <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5; color:#6b7c8f;">Invoice <strong style="color:#14324f;">#INV-2051</strong><br />Issued 26 August 2026</td>
638
638
  </tr>
639
639
  </table>
@@ -643,7 +643,7 @@
643
643
  <td style="padding:18px 36px 8px;">
644
644
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#e9f7ee; ">
645
645
  <tr>
646
- <td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1e7a3c;">&#10004; &nbsp;Paid in full. Thank you, {{ first_name }}</td>
646
+ <td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1e7a3c;">&#10004; &nbsp;Paid in full. Thank you, {{first_name}}</td>
647
647
  </tr>
648
648
  </table>
649
649
  </td>
@@ -686,7 +686,7 @@
686
686
  </tr>
687
687
  <tr>
688
688
  <td style="padding:10px 36px 30px;">
689
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Charged to Visa &bull;&bull;&bull;&bull; 4242. Questions about this invoice? Just reply to this email.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
689
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Charged to Visa &bull;&bull;&bull;&bull; 4242. Questions about this invoice? Just reply to this email.<br /><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
690
690
  </td>
691
691
  </tr>
692
692
  </table>
@@ -710,7 +710,7 @@
710
710
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#111832; ">
711
711
  <tr>
712
712
  <td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
713
- <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#bfdbfe;">New from {{ company }}</p>
713
+ <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#bfdbfe;">New from {{company}}</p>
714
714
  <h1 style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:38px; line-height:1.1; color:#ffffff;">Meet Nova</h1>
715
715
  <p style="margin:10px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.5; color:#dbeafe;">Our biggest release yet, and it&rsquo;s already in your account.</p>
716
716
  </td>
@@ -723,7 +723,7 @@
723
723
  <tr>
724
724
  <td align="center" style="padding:32px 36px 6px;">
725
725
  <h2 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:21px; line-height:1.3; color:#ffffff;">Everything you asked for, in one update</h2>
726
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#aebad6;">Hi {{ first_name }}: over 4,000 of you shaped this release. Nova rebuilds the parts that slowed you down and adds the three things you asked for most.</p>
726
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#aebad6;">Hi {{first_name}}: over 4,000 of you shaped this release. Nova rebuilds the parts that slowed you down and adds the three things you asked for most.</p>
727
727
  </td>
728
728
  </tr>
729
729
  <tr>
@@ -762,7 +762,7 @@
762
762
  </tr>
763
763
  <tr>
764
764
  <td align="center" style="padding:14px 36px 32px;">
765
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#68738f;">Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#68738f;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#68738f;">Preferences</a></p>
765
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#68738f;">Sent to {{email}}.<br /><a href="{{unsubscribe_url}}" style="color:#68738f;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#68738f;">Preferences</a></p>
766
766
  </td>
767
767
  </tr>
768
768
  </table>
@@ -821,7 +821,7 @@
821
821
  </tr>
822
822
  <tr>
823
823
  <td align="center" style="background-color:#0a0a0a; padding:16px 32px;">
824
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6e6e6e;">Sent to {{ email }} &middot; While stock lasts.<br /><a href="{{ unsubscribe_url }}" style="color:#6e6e6e;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6e6e6e;">Preferences</a></p>
824
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6e6e6e;">Sent to {{email}} &middot; While stock lasts.<br /><a href="{{unsubscribe_url}}" style="color:#6e6e6e;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6e6e6e;">Preferences</a></p>
825
825
  </td>
826
826
  </tr>
827
827
  </table>
@@ -846,7 +846,7 @@
846
846
  <tr>
847
847
  <td style="padding:32px 36px 6px;">
848
848
  <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.16em; text-transform:uppercase; color:#2f9e44;">Order confirmed</p>
849
- <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.25; color:#1a1a1a;">Thanks, {{ first_name }}: it&rsquo;s on its way</h1>
849
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.25; color:#1a1a1a;">Thanks, {{first_name}}: it&rsquo;s on its way</h1>
850
850
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#4a4a4a;">Order <strong>#48213</strong>, placed today. We&rsquo;ll email tracking as soon as the courier scans it, usually within one business day.</p>
851
851
  </td>
852
852
  </tr>
@@ -903,7 +903,7 @@
903
903
  <tr>
904
904
  <td style="padding:10px 36px 30px;">
905
905
  <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.6; color:#4a4a4a;">Need a different size? Exchanges are free for 30 days; start one from the order page above.</p>
906
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9a9a94;">This receipt was sent to {{ email }}. <a href="{{ unsubscribe_url }}" style="color:#9a9a94;">Unsubscribe from marketing</a>; you will still receive order emails.</p>
906
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9a9a94;">This receipt was sent to {{email}}. <a href="{{unsubscribe_url}}" style="color:#9a9a94;">Unsubscribe from marketing</a>; you will still receive order emails.</p>
907
907
  </td>
908
908
  </tr>
909
909
  </table>
@@ -929,7 +929,7 @@
929
929
  <td align="center" style="padding:36px 36px 10px;">
930
930
  <p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:26px; letter-spacing:0.1em; color:#e6b93c;">&#9733; &#9733; &#9733; &#9733; &#9733;</p>
931
931
  <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#16233a;">Two weeks with your headphones: how is it going?</h1>
932
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#435d80;">Hi {{ first_name }}, a quick one: your thoughts help the next buyer decide. It takes about a minute, and we&rsquo;d really appreciate it.</p>
932
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#435d80;">Hi {{first_name}}, a quick one: your thoughts help the next buyer decide. It takes about a minute, and we&rsquo;d really appreciate it.</p>
933
933
  </td>
934
934
  </tr>
935
935
  <tr>
@@ -969,7 +969,7 @@
969
969
  </tr>
970
970
  <tr>
971
971
  <td align="center" style="padding:12px 36px 32px;">
972
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Sent to {{ email }} &middot; we only ask once per order.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Preferences</a></p>
972
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Sent to {{email}} &middot; we only ask once per order.<br /><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Preferences</a></p>
973
973
  </td>
974
974
  </tr>
975
975
  </table>
@@ -993,14 +993,14 @@
993
993
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
994
994
  <tr>
995
995
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
996
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
996
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{company}}</p>
997
997
  </td>
998
998
  </tr>
999
999
  <tr>
1000
1000
  <td align="center" style="padding:34px 36px 8px;">
1001
1001
  <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#d97706;">Password reset</p>
1002
1002
  <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Reset your password</h1>
1003
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{ first_name }}, we received a request to reset the password for <strong>{{ email }}</strong>. Use the button below to choose a new one.</p>
1003
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{first_name}}, we received a request to reset the password for <strong>{{email}}</strong>. Use the button below to choose a new one.</p>
1004
1004
  </td>
1005
1005
  </tr>
1006
1006
  <tr>
@@ -1025,7 +1025,7 @@
1025
1025
  </tr>
1026
1026
  <tr>
1027
1027
  <td style="padding:24px 36px 30px;">
1028
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1028
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1029
1029
  </td>
1030
1030
  </tr>
1031
1031
  </table>
@@ -1050,7 +1050,7 @@
1050
1050
  <tr>
1051
1051
  <td align="center" style="padding:38px 36px 8px;">
1052
1052
  <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#c2762d;">A small thank-you</p>
1053
- <h1 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:30px; line-height:1.2; color:#2d2a24;">Here&rsquo;s 20% off, {{ first_name }}</h1>
1053
+ <h1 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:30px; line-height:1.2; color:#2d2a24;">Here&rsquo;s 20% off, {{first_name}}</h1>
1054
1054
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#5d574c;">It&rsquo;s been a year since you joined us, and that&rsquo;s worth celebrating. Here&rsquo;s a little something to mark it.</p>
1055
1055
  </td>
1056
1056
  </tr>
@@ -1095,7 +1095,7 @@
1095
1095
  </tr>
1096
1096
  <tr>
1097
1097
  <td align="center" style="padding:12px 36px 32px;">
1098
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">Sent to {{ email }} &middot; One code per order.<br /><a href="{{ unsubscribe_url }}" style="color:#a3988a;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
1098
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">Sent to {{email}} &middot; One code per order.<br /><a href="{{unsubscribe_url}}" style="color:#a3988a;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
1099
1099
  </td>
1100
1100
  </tr>
1101
1101
  </table>
@@ -1135,7 +1135,7 @@
1135
1135
  <td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
1136
1136
  <p style="margin:0 0 10px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#a06b2c;">Cover story</p>
1137
1137
  <h2 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.25; color:#1c1b18;">Why the best ideas arrive before nine</h2>
1138
- <p style="margin:0 0 18px; font-family:Georgia, serif; font-size:15px; line-height:1.65; color:#3d3a33;">Hello {{ first_name }}. This week we sat down with three writers who guard their mornings like a vault. What they cut, what they kept, and the one ritual all three share.</p>
1138
+ <p style="margin:0 0 18px; font-family:Georgia, serif; font-size:15px; line-height:1.65; color:#3d3a33;">Hello {{first_name}}. This week we sat down with three writers who guard their mornings like a vault. What they cut, what they kept, and the one ritual all three share.</p>
1139
1139
  <a href="https://example.com/issue-214" style="display:inline-block; background-color:#1c1b18; color:#f5f2ea; font-family:Georgia, serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 26px; ">Read the full story</a>
1140
1140
  </td>
1141
1141
  </tr>
@@ -1149,7 +1149,7 @@
1149
1149
  </tr>
1150
1150
  <tr>
1151
1151
  <td align="center" style="padding:24px 32px 30px;">
1152
- <p style="margin:0; font-family:Georgia, serif; font-size:12px; line-height:1.6; color:#8d887b;">You are reading The Sunday Brief because you subscribed at example.com.<br /><a href="{{ unsubscribe_url }}" style="color:#8d887b;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8d887b;">Update preferences</a></p>
1152
+ <p style="margin:0; font-family:Georgia, serif; font-size:12px; line-height:1.6; color:#8d887b;">You are reading The Sunday Brief because you subscribed at example.com.<br /><a href="{{unsubscribe_url}}" style="color:#8d887b;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8d887b;">Update preferences</a></p>
1153
1153
  </td>
1154
1154
  </tr>
1155
1155
  </table>
@@ -1176,8 +1176,8 @@
1176
1176
  </tr>
1177
1177
  <tr>
1178
1178
  <td style="padding:34px 36px 8px;">
1179
- <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Welcome aboard, {{ first_name }}</h1>
1180
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Your workspace for {{ company }} is ready. Three small steps and your whole team can be working in it today.</p>
1179
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Welcome aboard, {{first_name}}</h1>
1180
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Your workspace for {{company}} is ready. Three small steps and your whole team can be working in it today.</p>
1181
1181
  </td>
1182
1182
  </tr>
1183
1183
  <tr>
@@ -1196,7 +1196,7 @@
1196
1196
  <td style="padding:26px 36px 4px;">
1197
1197
  <h2 style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#10243c;">Get set up in five minutes</h2>
1198
1198
  <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">1.</strong> &nbsp;Create your first project; a name is enough, everything else can change later.</p>
1199
- <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">2.</strong> &nbsp;Invite your team: anyone with a {{ company }} email joins without approval.</p>
1199
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">2.</strong> &nbsp;Invite your team: anyone with a {{company}} email joins without approval.</p>
1200
1200
  <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">3.</strong> &nbsp;Connect your tools: two clicks each for calendar, storage and chat.</p>
1201
1201
  </td>
1202
1202
  </tr>
@@ -1213,7 +1213,7 @@
1213
1213
  <tr>
1214
1214
  <td style="padding:12px 36px 32px;">
1215
1215
  <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.6; color:#3f5063;">Stuck on anything? Reply to this email; a real person reads every message, usually within the hour.</p>
1216
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1216
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1217
1217
  </td>
1218
1218
  </tr>
1219
1219
  </table>
@@ -1237,14 +1237,14 @@
1237
1237
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
1238
1238
  <tr>
1239
1239
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
1240
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
1240
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{company}}</p>
1241
1241
  </td>
1242
1242
  </tr>
1243
1243
  <tr>
1244
1244
  <td align="center" style="padding:34px 36px 8px;">
1245
1245
  <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22170%22%20viewBox%3D%220%200%20240%20170%22%3E%20%3Cellipse%20cx%3D%22126%22%20cy%3D%22150%22%20rx%3D%2286%22%20ry%3D%2210%22%20fill%3D%22%23e1e8ef%22%2F%3E%20%3Cpath%20d%3D%22M126%2020%20L200%2052%20L200%20118%20L126%20150%20L52%20118%20L52%2052%20Z%22%20fill%3D%22%23d9995b%22%2F%3E%20%3Cpath%20d%3D%22M126%2020%20L200%2052%20L126%2084%20L52%2052%20Z%22%20fill%3D%22%23e8b988%22%2F%3E%20%3Cpath%20d%3D%22M126%2084%20L200%2052%20L200%20118%20L126%20150%20Z%22%20fill%3D%22%23c67f42%22%2F%3E%20%3Cpath%20d%3D%22M126%2084%20L126%20150%22%20stroke%3D%22%23a86a35%22%20stroke-width%3D%224%22%2F%3E%20%3Cpath%20d%3D%22M88%2036%20L162%2068%22%20stroke%3D%22%23f2d9bd%22%20stroke-width%3D%228%22%2F%3E%20%3Cg%20stroke%3D%22%230065b3%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%2212%22%20y1%3D%2266%22%20x2%3D%2232%22%20y2%3D%2266%22%2F%3E%20%3Cline%20x1%3D%224%22%20y1%3D%2290%22%20x2%3D%2230%22%20y2%3D%2290%22%2F%3E%20%3Cline%20x1%3D%2214%22%20y1%3D%22114%22%20x2%3D%2232%22%20y2%3D%22114%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E" width="120" alt="Your parcel, on the move" style="display:block; width:120px; max-width:100%; height:auto; margin:0 auto 18px;" />
1246
1246
  <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#0065b3;">Shipped &middot; Order #48213</p>
1247
- <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#10243c;">Your order is on its way, {{ first_name }}</h1>
1247
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#10243c;">Your order is on its way, {{first_name}}</h1>
1248
1248
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#3f5063;">Order <strong>#48213</strong> left our warehouse this morning and arrives <strong>Thursday, 2 September</strong>.</p>
1249
1249
  </td>
1250
1250
  </tr>
@@ -1254,11 +1254,11 @@
1254
1254
  <tr>
1255
1255
  <td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
1256
1256
  <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Carrier</p>
1257
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">DHL Express</p>
1257
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">Express Courier</p>
1258
1258
  </td>
1259
1259
  <td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
1260
1260
  <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Tracking number</p>
1261
- <p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">JD014669321DE</p>
1261
+ <p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">EC4821397205XX</p>
1262
1262
  </td>
1263
1263
  </tr>
1264
1264
  <tr>
@@ -1290,7 +1290,7 @@
1290
1290
  </tr>
1291
1291
  <tr>
1292
1292
  <td style="padding:10px 36px 30px;">
1293
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">No one home? The courier leaves a note and tries again the next working day. This update was sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1293
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">No one home? The courier leaves a note and tries again the next working day. This update was sent to {{email}}.<br /><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1294
1294
  </td>
1295
1295
  </tr>
1296
1296
  </table>
@@ -1314,14 +1314,14 @@
1314
1314
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
1315
1315
  <tr>
1316
1316
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
1317
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
1317
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{company}}</p>
1318
1318
  </td>
1319
1319
  </tr>
1320
1320
  <tr>
1321
1321
  <td align="center" style="padding:34px 36px 8px;">
1322
1322
  <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#2f9e44;">Security update</p>
1323
1323
  <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Password updated</h1>
1324
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{ first_name }}, your {{ company }} password was just changed. Everything went through; no action is needed.</p>
1324
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{first_name}}, your {{company}} password was just changed. Everything went through; no action is needed.</p>
1325
1325
  </td>
1326
1326
  </tr>
1327
1327
  <tr>
@@ -1329,7 +1329,7 @@
1329
1329
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e8ef; ">
1330
1330
  <tr>
1331
1331
  <td style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">Account</td>
1332
- <td align="right" style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#10243c;">{{ email }}</td>
1332
+ <td align="right" style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#10243c;">{{email}}</td>
1333
1333
  </tr>
1334
1334
  <tr>
1335
1335
  <td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">When</td>
@@ -1350,7 +1350,7 @@
1350
1350
  </tr>
1351
1351
  <tr>
1352
1352
  <td style="padding:26px 36px 30px;">
1353
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1353
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{unsubscribe_url}}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
1354
1354
  </td>
1355
1355
  </tr>
1356
1356
  </table>
@@ -1374,12 +1374,12 @@
1374
1374
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#1a1f2b; ">
1375
1375
  <tr>
1376
1376
  <td align="center" style="padding:36px 36px 0;">
1377
- <p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#7d8aa5;">{{ company }} &middot; sign-in code</p>
1377
+ <p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#7d8aa5;">{{company}} &middot; sign-in code</p>
1378
1378
  </td>
1379
1379
  </tr>
1380
1380
  <tr>
1381
1381
  <td align="center" style="padding:8px 36px 10px;">
1382
- <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#f2f5fa;">Hi {{ first_name }}, here is your code</h1>
1382
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#f2f5fa;">Hi {{first_name}}, here is your code</h1>
1383
1383
  <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#a8b3c7;">Enter this one-time code to finish signing in. It works only once.</p>
1384
1384
  </td>
1385
1385
  </tr>
@@ -1403,14 +1403,14 @@
1403
1403
  <td style="padding:26px 36px 8px;">
1404
1404
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#151a24; ">
1405
1405
  <tr>
1406
- <td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#7d8aa5;">Never share this code, not with support, not with anyone. {{ company }} will never ask for it by phone or email. If you didn&rsquo;t try to sign in, change your password right away.</td>
1406
+ <td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#7d8aa5;">Never share this code, not with support, not with anyone. {{company}} will never ask for it by phone or email. If you didn&rsquo;t try to sign in, change your password right away.</td>
1407
1407
  </tr>
1408
1408
  </table>
1409
1409
  </td>
1410
1410
  </tr>
1411
1411
  <tr>
1412
1412
  <td align="center" style="padding:22px 36px 32px;">
1413
- <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6981;">Sent to {{ email }}<br /><a href="{{ unsubscribe_url }}" style="color:#5d6981;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#5d6981;">Notification settings</a></p>
1413
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6981;">Sent to {{email}}<br /><a href="{{unsubscribe_url}}" style="color:#5d6981;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#5d6981;">Notification settings</a></p>
1414
1414
  </td>
1415
1415
  </tr>
1416
1416
  </table>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seliseblocks/mailcraft",
3
- "version": "0.2.18",
3
+ "version": "0.2.20",
4
4
  "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
5
5
  "license": "MIT",
6
6
  "author": "SELISE Digital Platforms",
package/src/core/blocks.js CHANGED
@@ -3,7 +3,7 @@ import { PH } from './placeholder.js';
3
3
  import { THEME } from './theme.js';
4
4
 
5
5
  export const BLOCKS = [
6
- { type: 'text', code: 'TXT', label: 'Text', hint: 'Rich text — edit inline', make: () => ({ html: 'Hi {{ first_name }} — we cut three things from the fall line and kept the two that mattered. Here they are.', size: 16, lh: 1.6, color: '', align: 'left', weight: '400', py: 10, px: 0 }) },
6
+ { type: 'text', code: 'TXT', label: 'Text', hint: 'Rich text — edit inline', make: () => ({ html: 'Hi {{first_name}} — we cut three things from the fall line and kept the two that mattered. Here they are.', size: 16, lh: 1.6, color: '', align: 'left', weight: '400', py: 10, px: 0 }) },
7
7
  { type: 'image', code: 'IMG', label: 'Image', hint: 'Image from the library', make: () => ({ src: PH('hero image 600 × 320', 600, 320), alt: 'Hero image', width: 100, align: 'center', href: '', radius: 10, py: 0, px: 0 }) },
8
8
  { type: 'button', code: 'BTN', label: 'Button', hint: 'Call to action', make: () => ({ label: 'Shop the drop', href: 'https://example.com', bg: '#0065b3', color: '#ffffff', radius: 8, py: 13, px: 26, align: 'left', size: 15, full: false, borderW: 0, borderStyle: 'solid', borderColor: '' }) },
9
9
  { type: 'divider', code: 'DIV', label: 'Divider', hint: 'Horizontal rule', make: () => ({ thickness: 1, lineStyle: 'solid', color: '#e2e8f0', width: 100, py: 14 }) },
@@ -167,8 +167,8 @@ export const GROUPS = {
167
167
  row.cols[0].blocks = [
168
168
  blk('divider', { py: 0 }),
169
169
  blk('social', { align: 'center', size: 18, shape: 'bare' }),
170
- blk('text', { html: '<strong>MailCraft, Inc.</strong><br />220 Foundry Street, Suite 4, Portland OR 97209<br />You are receiving this because you signed up at mailcraft.co.', size: 11.5, align: 'center', py: 6 }),
171
- blk('text', { html: '<a href="{{ unsubscribe_url }}">Unsubscribe</a> · <a href="#">Update preferences</a>', size: 11.5, align: 'center', py: 0 }),
170
+ blk('text', { html: '<strong>Selise Group</strong><br />You are receiving this because you signed up at selisegroup.com.', size: 11.5, align: 'center', py: 6 }),
171
+ blk('text', { html: '<a href="{{unsubscribe_url}}">Unsubscribe</a> · <a href="#">Update preferences</a>', size: 11.5, align: 'center', py: 0 }),
172
172
  ];
173
173
  return [row];
174
174
  },
package/src/core/editor-core.js CHANGED
@@ -1609,7 +1609,7 @@ export class EditorCore {
1609
1609
  const { aiGoal, aiTone, aiBrief } = this.state;
1610
1610
  this.setState({ aiBusy: true, aiResults: [] });
1611
1611
  const prompt = 'You write marketing email copy. Goal: ' + aiGoal + '. Tone: ' + aiTone + '. Brief: ' + aiBrief +
1612
- '. Return ONLY JSON: {"headline":"...","body":"...","cta":"..."} — body max 55 words, plain sentences, no emoji, may use {{ first_name }}.';
1612
+ '. Return ONLY JSON: {"headline":"...","body":"...","cta":"..."} — body max 55 words, plain sentences, no emoji, may use {{first_name}}.';
1613
1613
  let out = null;
1614
1614
  try {
1615
1615
  if (this.aiProvider) {
@@ -1622,7 +1622,7 @@ export class EditorCore {
1622
1622
  const s = (aiBrief || 'the new drop').replace(/\.$/, '');
1623
1623
  out = {
1624
1624
  headline: s.split(/[,.]/)[0].slice(0, 58),
1625
- body: 'Hi {{ first_name }} — ' + s + '. We kept it short: one link, one decision, no pressure.',
1625
+ body: 'Hi {{first_name}} — ' + s + '. We kept it short: one link, one decision, no pressure.',
1626
1626
  cta: 'See it',
1627
1627
  };
1628
1628
  }
package/src/core/export.js CHANGED
@@ -149,7 +149,7 @@ export function decorateLogicTags(html) {
149
149
  // preview document, never in the source string being mapped).
150
150
  return '<span data-mc-deco="" style="display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;border:1.5px dashed ' + color + ';border-radius:7px;background:' + color + '14;padding:4px 10px;margin:2px 0;color:' + color + ';font-family:ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:0.12em;">'
151
151
  + (end ? '⏶ ' : '⏷ ') + word
152
- + (expr ? ' <span style="font-weight:400;font-size:11px;letter-spacing:0;">{{ ' + esc(expr) + ' }}</span>' : '')
152
+ + (expr ? ' <span style="font-weight:400;font-size:11px;letter-spacing:0;">{' + '{' + esc(expr) + '}' + '}</span>' : '')
153
153
  + '</span>';
154
154
  };
155
155
  const bandRow = (kind, expr, end) => '<tr><td colspan="99" data-mc-deco="" style="padding:2px 8px;">' + chip(kind, expr, end) + '</td></tr>';
@@ -169,6 +169,24 @@ export function decorateLogicTags(html) {
169
169
  return s;
170
170
  }
171
171
 
172
+ /**
173
+ * Merge tags ship tight: `{{first_name}}`, never `{{ first_name }}`.
174
+ *
175
+ * The padded spelling is valid Handlebars/Mustache/Liquid, but plenty of
176
+ * sending engines substitute with a literal string match, or a regex that
177
+ * forgets `\s*` -- and there a padded tag simply never resolves, so the
178
+ * recipient gets raw braces in the middle of a sentence. The editor writes
179
+ * the tight form now; this pass repairs everything that predates it: a
180
+ * template authored earlier, a hand-typed tag, a legacy `[[token]]` draft.
181
+ *
182
+ * Only padding inside the braces goes. Whitespace that SEPARATES keeps its
183
+ * job, so `{{#if is_premium }}` tightens to `{{#if is_premium}}` -- tag and
184
+ * expression still two words. One caveat by design: a code block quoting
185
+ * handlebars as sample text is tightened too, since this runs over the
186
+ * finished document.
187
+ */
188
+ const tightenTokens = (html) => String(html).replace(/\{\{\s*([^{}]*?)\s*\}\}/g, '{' + '{$1}' + '}');
189
+
172
190
  export function buildHtml(state, root, boxCss, opts) {
173
191
  const d = state.doc; const t = d.theme;
174
192
  const logic = logicPlan(d);
@@ -719,5 +737,5 @@ export function buildHtml(state, root, boxCss, opts) {
719
737
  + (pageBg && pageBg !== 'transparent' && !/^rgba\(/.test(pageBg) ? ' color="' + pageBg + '"' : '') + ' /></v:background><![endif]-->';
720
738
  }
721
739
  const bodyStyle = 'margin:0;padding:0;' + pagePaint + 'font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;';
722
- return msoHarden(stampLinks('<!doctype html>\n<html lang="en"' + docDir + ' xmlns:o="urn:schemas-microsoft-com:office:office"' + (usedVml ? ' xmlns:v="urn:schemas-microsoft-com:vml"' : '') + '>\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body' + pageAttr + ' style="' + bodyStyle + '">' + pageVml + preheader + '\n<table role="presentation"' + pageAttr + ' width="100%" cellpadding="0" cellspacing="0" border="0" style="' + pagePaint + '">\n <tr><td align="center" style="padding:' + pagePad + ';">\n ' + ghostOpen + '\n ' + shell + '\n ' + ghostClose + '\n </td></tr>\n</table>\n</body>\n</html>'));
740
+ return tightenTokens(msoHarden(stampLinks('<!doctype html>\n<html lang="en"' + docDir + ' xmlns:o="urn:schemas-microsoft-com:office:office"' + (usedVml ? ' xmlns:v="urn:schemas-microsoft-com:vml"' : '') + '>\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body' + pageAttr + ' style="' + bodyStyle + '">' + pageVml + preheader + '\n<table role="presentation"' + pageAttr + ' width="100%" cellpadding="0" cellspacing="0" border="0" style="' + pagePaint + '">\n <tr><td align="center" style="padding:' + pagePad + ';">\n ' + ghostOpen + '\n ' + shell + '\n ' + ghostClose + '\n </td></tr>\n</table>\n</body>\n</html>')));
723
741
  }