npm - @seliseblocks/mailcraft - Versions diffs - 0.1.0 - Mend

@seliseblocks/mailcraft 0.1.0

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 (89) hide show

package/DOCS.md +557 -0
package/LICENSE +21 -0
package/README.md +126 -0
package/dist/mailcraft-editor.bundle.js +519 -0
package/dist/mailcraft-editor.bundle.js.map +7 -0
package/examples/templates/activate-your-account.html +54 -0
package/examples/templates/back-in-stock.html +63 -0
package/examples/templates/cart-left-behind.html +74 -0
package/examples/templates/community-giveaway.html +81 -0
package/examples/templates/frontend-futures-invite.html +69 -0
package/examples/templates/give-25-get-25.html +69 -0
package/examples/templates/invoice-paid.html +77 -0
package/examples/templates/meet-nova-launch.html +69 -0
package/examples/templates/mega-weekend-sale.html +57 -0
package/examples/templates/order-confirmed.html +80 -0
package/examples/templates/rate-your-headphones.html +71 -0
package/examples/templates/reset-your-password.html +54 -0
package/examples/templates/thankyou-promo-code.html +68 -0
package/examples/templates/the-sunday-brief.html +47 -0
package/examples/templates/welcome-to-your-workspace.html +62 -0
package/examples/templates/your-order-shipped.html +74 -0
package/examples/templates/your-password-was-changed.html +58 -0
package/examples/templates/your-signin-code.html +58 -0
package/examples/vanilla.html +1574 -0
package/package.json +66 -0
package/src/core/accent.js +194 -0
package/src/core/assets.js +15 -0
package/src/core/binder.js +119 -0
package/src/core/blocks.js +256 -0
package/src/core/css-cascade.js +117 -0
package/src/core/editor-core.js +1492 -0
package/src/core/export.js +58 -0
package/src/core/footer.js +73 -0
package/src/core/i18n/ar.js +177 -0
package/src/core/i18n/bg.js +152 -0
package/src/core/i18n/bn.js +176 -0
package/src/core/i18n/ca.js +152 -0
package/src/core/i18n/cs.js +152 -0
package/src/core/i18n/da.js +152 -0
package/src/core/i18n/de-CH.js +152 -0
package/src/core/i18n/de.js +152 -0
package/src/core/i18n/dz.js +179 -0
package/src/core/i18n/el.js +152 -0
package/src/core/i18n/en.js +269 -0
package/src/core/i18n/es.js +152 -0
package/src/core/i18n/et.js +152 -0
package/src/core/i18n/fi.js +152 -0
package/src/core/i18n/fr.js +152 -0
package/src/core/i18n/hr.js +152 -0
package/src/core/i18n/hu.js +152 -0
package/src/core/i18n/index.js +83 -0
package/src/core/i18n/it.js +152 -0
package/src/core/i18n/lt.js +152 -0
package/src/core/i18n/lv.js +152 -0
package/src/core/i18n/nb.js +152 -0
package/src/core/i18n/nl.js +152 -0
package/src/core/i18n/pl.js +152 -0
package/src/core/i18n/pt.js +152 -0
package/src/core/i18n/ro.js +152 -0
package/src/core/i18n/ru.js +152 -0
package/src/core/i18n/sk.js +152 -0
package/src/core/i18n/sl.js +152 -0
package/src/core/i18n/sv.js +152 -0
package/src/core/i18n/tables.js +50 -0
package/src/core/i18n/tr.js +152 -0
package/src/core/i18n/uk.js +152 -0
package/src/core/icons.js +235 -0
package/src/core/ids.js +1 -0
package/src/core/import-html.js +959 -0
package/src/core/layout-style.js +115 -0
package/src/core/parse.js +10 -0
package/src/core/placeholder.js +15 -0
package/src/core/sanitize.js +141 -0
package/src/core/storage-limits.js +184 -0
package/src/core/storage.js +85 -0
package/src/core/theme.js +1 -0
package/src/core/toolbar.js +67 -0
package/src/core/variables.js +11 -0
package/src/create-editor.js +109 -0
package/src/index.js +9 -0
package/src/mailcraft-editor.js +1862 -0
package/src/render/block-body.js +295 -0
package/src/render/canvas.js +284 -0
package/src/render/fields.js +609 -0
package/src/render/focus-preserve.js +158 -0
package/src/render/rte.js +212 -0
package/src/render/screenshot.js +132 -0
package/src/render/story.js +415 -0
package/src/render/style.js +452 -0

package/examples/templates/activate-your-account.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Activate your account</title>
+</head>
+<body style="margin:0; padding:0; background-color:#eef2f6;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
+          <tr>
+            <td align="center" style="background-color:#0065b3; padding:22px 36px;">
+              <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:34px 36px 8px;">
+              <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>
+              <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>
+              <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 &mdash; it takes less than ten seconds.</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:26px 36px 8px;">
+              <a href="https://example.com/activate" style="display:inline-block; background-color:#0065b3; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 38px; ">Activate my account</a>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:10px 36px 4px;">
+              <p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">Button not working? Paste this into your browser:</p>
+              <p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:12px; line-height:1.6; color:#3f5063;"><a href="https://example.com/activate" style="color:#0065b3;">https://example.com/activate</a></p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:28px 36px 8px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
+                <tr>
+                  <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>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px 36px 30px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/back-in-stock.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Back in stock — the one you wanted</title>
+</head>
+<body style="margin:0; padding:0; background-color:#faf7f2;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#faf7f2;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
+          <tr>
+            <td align="center" style="padding:36px 36px 8px;">
+              <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>
+              <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>
+              <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 &mdash; and your watchlist held your place in line.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px 36px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f1e9; ">
+                <tr>
+                  <td width="38%" valign="middle" align="center" style="padding:22px 18px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#b85c38; ">
+                      <tr>
+                        <td align="center" style="padding:30px 24px;">
+                          <p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#f3dcc9;">Terracotta</p>
+                          <p style="margin:0; font-family:Georgia, serif; font-size:22px; color:#ffffff;">Trainer</p>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                  <td width="62%" valign="middle" style="padding:18px 18px 18px 6px;">
+                    <h2 style="margin:0 0 6px; font-family:Georgia, serif; font-size:19px; color:#29241d;">Terracotta Trainer</h2>
+                    <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:13.5px; line-height:1.55; color:#5d574c;">Suede and canvas, hand-finished. Your size (42) is one of 60 pairs back from restock.</p>
+                    <p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#29241d;"><span style="text-decoration:line-through; color:#a3988a;">$129</span> &nbsp;<strong>$99</strong> &nbsp;<span style="font-size:12px; color:#b85c38;">restock price</span></p>
+                    <a href="https://example.com/product/terracotta-trainer" style="display:inline-block; background-color:#b85c38; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13.5px; font-weight:bold; text-decoration:none; padding:11px 26px; ">Grab my pair</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:20px 36px 8px;">
+              <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8b8271;">Last restock sold out in 4 days &mdash; sizes go first, pairs follow.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:20px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #eee7db; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:12px 36px 32px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/cart-left-behind.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>You left something behind</title>
+</head>
+<body style="margin:0; padding:0; background-color:#f6f6f8;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f6f8;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
+          <tr>
+            <td align="center" style="padding:34px 36px 8px;">
+              <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#f0ecfa; ">
+                <tr>
+                  <td align="center" style="padding:12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.16em; text-transform:uppercase; color:#7048b8;">Your bag is waiting</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:16px 36px 6px;">
+              <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>
+              <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 &mdash; with a little thank-you for coming back.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:22px 36px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e7e3f2; ">
+                <tr>
+                  <td width="30%" valign="middle" align="center" style="padding:22px 16px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#7048b8; ">
+                      <tr>
+                        <td align="center" style="padding:26px 22px;">
+                          <p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#dddcf3;">Chestnut</p>
+                          <p style="margin:0; font-family:Georgia, serif; font-size:19px; color:#ffffff;">Weekend bag</p>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                  <td width="70%" valign="middle" style="padding:16px 16px 16px 4px;">
+                    <h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#241b3a;">Leather weekend bag</h2>
+                    <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#574d70;">Chestnut &middot; one size</p>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#241b3a;"><span style="text-decoration:line-through; color:#9c92b8;">$210.00</span> &nbsp;<strong>$178.50</strong></p>
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="2" style="padding:14px 16px; background-color:#faf8fd; border-top:1px solid #e7e3f2; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#574d70;">Come-back code <strong style="font-family:'Courier New', Courier, monospace; color:#7048b8;">COMEBACK15</strong> applied at checkout &mdash; 15% off this bag.</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:22px 36px 6px;">
+              <a href="https://example.com/cart" style="display:inline-block; background-color:#7048b8; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 40px; ">Finish my order</a>
+              <p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#9c92b8;">Held until Friday, 18:00 &mdash; after that the bag returns to the shelf.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:22px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #eceaf3; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:12px 36px 32px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/community-giveaway.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>You&rsquo;re in — the community giveaway</title>
+</head>
+<body style="margin:0; padding:0; background-color:#0c1226;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#131b36; ">
+          <tr>
+            <td align="center" style="height:10px; line-height:10px; font-size:0; padding:0;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
+                <tr>
+                  <td width="20%" style="height:10px; background-color:#f59e0b; font-size:0; line-height:10px; ">&nbsp;</td>
+                  <td width="20%" style="height:10px; background-color:#ef4444; font-size:0; line-height:10px;">&nbsp;</td>
+                  <td width="20%" style="height:10px; background-color:#ec4899; font-size:0; line-height:10px;">&nbsp;</td>
+                  <td width="20%" style="height:10px; background-color:#8b5cf6; font-size:0; line-height:10px;">&nbsp;</td>
+                  <td width="20%" style="height:10px; background-color:#38bdf8; font-size:0; line-height:10px; ">&nbsp;</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:36px 36px 8px;">
+              <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>
+              <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:1.15; color:#ffffff;">One year free &mdash;<br />for you and a friend</h1>
+              <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 &mdash; and each brings a friend along. Entry takes one click, {{ first_name }}.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 40px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td width="50%" valign="top" style="padding:0 8px 0 0;">
+                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226; ">
+                      <tr>
+                        <td style="padding:16px 18px;">
+                          <p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:26px; font-weight:bold; color:#f59e0b;">5</p>
+                          <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.5; color:#aeb8d8;">free yearly plans up for grabs</p>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                  <td width="50%" valign="top" style="padding:0 0 0 8px;">
+                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226; ">
+                      <tr>
+                        <td style="padding:16px 18px;">
+                          <p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:26px; font-weight:bold; color:#38bdf8;">+5</p>
+                          <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.5; color:#aeb8d8;">friend passes each winner can gift</p>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:24px 36px 8px;">
+              <a href="https://example.com/giveaway" style="display:inline-block; background-color:#f59e0b; color:#0c1226; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 44px; ">Enter the giveaway</a>
+              <p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8a94b8;">Drawn live on stream, Friday 18 September &middot; no purchase needed.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #232e58; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:12px 36px 32px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/frontend-futures-invite.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>You&rsquo;re invited — Frontend Futures, 24 Sept</title>
+</head>
+<body style="margin:0; padding:0; background-color:#0e0c1a;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0e0c1a;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#171332; ">
+          <tr>
+            <td align="center" style="padding:12px 36px 0;">
+              <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>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:20px 36px 6px;">
+              <h1 style="margin:0 0 8px; font-family:Georgia, 'Times New Roman', serif; font-size:42px; line-height:1.05; color:#ffffff;">Frontend<br />Futures</h1>
+              <p style="margin:0; font-family:Georgia, serif; font-size:15px; font-style:italic; color:#c3b6f2;">A one-evening conference on what the web becomes next.</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:22px 36px 6px;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td align="center" valign="top" style="padding:0 18px;">
+                    <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">24</p>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">September</p>
+                  </td>
+                  <td align="center" valign="top" style="padding:0 18px; border-left:1px solid #332a5e;">
+                    <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">18:30</p>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">Doors</p>
+                  </td>
+                  <td align="center" valign="top" style="padding:0 18px; border-left:1px solid #332a5e;">
+                    <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">7</p>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">Talks</p>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 44px 6px;">
+              <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 &mdash; view transitions, state machines, and what accessibility looks like from the inside. Followed by drinks and argumentative dessert.</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:24px 36px 8px;">
+              <a href="https://example.com/events/frontend-futures" style="display:inline-block; background-color:#a48ef0; color:#171332; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 44px; ">Reserve a seat &mdash; free</a>
+              <p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8f83b8;">The Atrium, 4 Harbour Lane &middot; seats are first come, first served</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #2c2454; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:12px 36px 32px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/give-25-get-25.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Give $25, get $25</title>
+</head>
+<body style="margin:0; padding:0; background-color:#0f1c17;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0f1c17;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#16352a; ">
+          <tr>
+            <td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
+              <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>
+              <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>
+              <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.5; color:#d9efe2;">You both win &mdash; they save on their first order, you get credit when it ships.</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:28px 36px 8px;">
+              <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#9dc3ad;">Your personal link</p>
+              <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#0f1c17; ">
+                <tr>
+                  <td style="padding:12px 22px; font-family:'Courier New', Courier, monospace; font-size:13px; color:#e9f5ee;">example.com/r/{{ first_name }}-8f2</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:18px 36px 8px;">
+              <a href="https://example.com/r/share" style="display:inline-block; background-color:#ffd166; color:#16352a; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 42px; ">Share my link</a>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 36px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td width="33%" valign="top" align="center" style="padding:0 8px;">
+                    <h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">1. Share</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Send your link to a friend who&rsquo;d like this as much as you do.</p>
+                  </td>
+                  <td width="34%" valign="top" align="center" style="padding:0 8px;">
+                    <h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">2. They save $25</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Their first order over $75 comes $25 off, automatically.</p>
+                  </td>
+                  <td width="33%" valign="top" align="center" style="padding:0 8px;">
+                    <h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">3. You get $25</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Credit lands in your account the day their order ships.</p>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:28px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #24503d; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:12px 36px 32px;">
+              <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6f9784;">No cap on rewards &mdash; 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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/invoice-paid.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Invoice paid — #INV-2051</title>
+</head>
+<body style="margin:0; padding:0; background-color:#f4f6f9;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
+          <tr>
+            <td style="padding:30px 36px 10px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="font-family:Arial, Helvetica, sans-serif; font-size:19px; font-weight:bold; color:#14324f;">{{ company }}</td>
+                  <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>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:18px 36px 8px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#e9f7ee; ">
+                <tr>
+                  <td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1e7a3c;">&#10004; &nbsp;Paid in full &mdash; thank you, {{ first_name }}</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:22px 36px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0; ">
+                <tr>
+                  <td style="padding:12px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Description</td>
+                  <td align="right" style="padding:12px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Amount</td>
+                </tr>
+                <tr>
+                  <td style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">Pro plan &mdash; monthly</td>
+                  <td align="right" style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">$49.00</td>
+                </tr>
+                <tr>
+                  <td style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">Extra seats &times; 2</td>
+                  <td align="right" style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">$24.00</td>
+                </tr>
+                <tr>
+                  <td style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#6b7c8f;">Tax</td>
+                  <td align="right" style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#6b7c8f;">$6.16</td>
+                </tr>
+                <tr>
+                  <td style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#14324f;">Total paid</td>
+                  <td align="right" style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#14324f;">$79.16</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:22px 36px 6px;">
+              <a href="https://example.com/invoices/2051" style="display:inline-block; background-color:#14324f; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 30px; ">Download receipt (PDF)</a>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:22px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #e2e8f0; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:10px 36px 30px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>

package/examples/templates/meet-nova-launch.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Meet Nova — our biggest release yet</title>
+</head>
+<body style="margin:0; padding:0; background-color:#0b1020;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0b1020;">
+    <tr>
+      <td align="center" style="padding:24px 12px;">
+        <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#111832; ">
+          <tr>
+            <td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
+              <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>
+              <h1 style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:38px; line-height:1.1; color:#ffffff;">Meet Nova</h1>
+              <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 &mdash; and it&rsquo;s already in your account.</p>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:32px 36px 6px;">
+              <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>
+              <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#aebad6;">Hi {{ first_name }} &mdash; 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>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px 36px 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td width="33%" valign="top" align="center" style="padding:0 8px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">2&times;</td></tr></table>
+                    <h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Faster</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">A new engine under the hood &mdash; big projects open instantly.</p>
+                  </td>
+                  <td width="34%" valign="top" align="center" style="padding:0 8px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">Smart</td></tr></table>
+                    <h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Assist</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">Drafts, summaries and clean-ups, one keystroke away.</p>
+                  </td>
+                  <td width="33%" valign="top" align="center" style="padding:0 8px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">100%</td></tr></table>
+                    <h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Private</h3>
+                    <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">Your data stays yours &mdash; encrypted, never trained on.</p>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:28px 36px 8px;">
+              <a href="https://example.com/nova" style="display:inline-block; background-color:#58a8e3; color:#0b1020; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 40px; ">Try Nova today</a>
+              <p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8f9cbd;">Free for every current customer &mdash; nothing to buy, nothing to migrate.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:26px 36px 8px;">
+              <hr style="border:none; border-top:1px solid #232e52; margin:0;" />
+            </td>
+          </tr>
+          <tr>
+            <td align="center" style="padding:14px 36px 32px;">
+              <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>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>