@seliseblocks/mailcraft 0.2.13 → 0.2.15

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

@@ -21,14 +21,7 @@
               <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>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%20%3Crect%20width%3D%22340%22%20height%3D%22340%22%20fill%3D%22%23b85c38%22%2F%3E%20%3Ccircle%20cx%3D%22264%22%20cy%3D%2272%22%20r%3D%2242%22%20fill%3D%22%23c96f4a%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%22290%22%20r%3D%2254%22%20fill%3D%22%23a9502e%22%2F%3E%20%3Cellipse%20cx%3D%22172%22%20cy%3D%22252%22%20rx%3D%22120%22%20ry%3D%2213%22%20fill%3D%22%238f4526%22%2F%3E%20%3Cpath%20d%3D%22M52%20222%20Q52%20242%2076%20242%20L268%20242%20Q288%20242%20288%20224%20L288%20216%20Q288%20208%20278%20206%20L62%20206%20Q52%20208%2052%20222%20Z%22%20fill%3D%22%23f3e9dc%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q60%20152%2096%20140%20Q128%20130%20148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20Z%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3Cpath%20d%3D%22M148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20L196%20208%20Q170%20198%20156%20174%20Z%22%20fill%3D%22%23caa27f%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q61%20170%2082%20152%20Q68%20172%2070%20208%20Z%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3Cg%20stroke%3D%22%238f5a3a%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22112%22%20y1%3D%22152%22%20x2%3D%22140%22%20y2%3D%22166%22%2F%3E%20%3Cline%20x1%3D%22106%22%20y1%3D%22168%22%20x2%3D%22136%22%20y2%3D%22182%22%2F%3E%20%3Cline%20x1%3D%22102%22%20y1%3D%22184%22%20x2%3D%22132%22%20y2%3D%22198%22%2F%3E%20%3C%2Fg%3E%20%3Crect%20x%3D%2258%22%20y%3D%22230%22%20width%3D%22224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3C%2Fsvg%3E" width="170" alt="Terracotta Trainer — suede and canvas sneaker" style="display:block; width:170px; max-width:100%; height:auto;" />
                   </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>

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

@@ -29,14 +29,7 @@
               <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>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Crect%20width%3D%22300%22%20height%3D%22300%22%20fill%3D%22%237048b8%22%2F%3E%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2256%22%20r%3D%2236%22%20fill%3D%22%237f57c6%22%2F%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%22256%22%20r%3D%2240%22%20fill%3D%22%23633fa8%22%2F%3E%20%3Cellipse%20cx%3D%22150%22%20cy%3D%22236%22%20rx%3D%22106%22%20ry%3D%2211%22%20fill%3D%22%235d3aa0%22%2F%3E%20%3Cpath%20d%3D%22M110%20122%20Q110%2084%20150%2084%20Q190%2084%20190%20122%22%20fill%3D%22none%22%20stroke%3D%22%235c3a1e%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%22118%22%20width%3D%22184%22%20height%3D%22114%22%20rx%3D%2226%22%20fill%3D%22%238a5a33%22%2F%3E%20%3Cpath%20d%3D%22M84%20118%20Q58%20118%2058%20144%20L58%20206%20Q58%20232%2084%20232%20Z%22%20fill%3D%22%237a4e2b%22%2F%3E%20%3Cpath%20d%3D%22M216%20118%20Q242%20118%20242%20144%20L242%20206%20Q242%20232%20216%20232%20Z%22%20fill%3D%22%237a4e2b%22%2F%3E%20%3Crect%20x%3D%22106%22%20y%3D%22118%22%20width%3D%2212%22%20height%3D%22114%22%20fill%3D%22%236e4526%22%2F%3E%20%3Crect%20x%3D%22182%22%20y%3D%22118%22%20width%3D%2212%22%20height%3D%22114%22%20fill%3D%22%236e4526%22%2F%3E%20%3Cline%20x1%3D%2298%22%20y1%3D%22134%22%20x2%3D%22202%22%20y2%3D%22134%22%20stroke%3D%22%23e8d9c4%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%22202%22%20cy%3D%22134%22%20r%3D%226%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3C%2Fsvg%3E" width="150" alt="Chestnut leather weekend bag" style="display:block; width:150px; max-width:100%; height:auto;" />
                   </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>

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

@@ -16,6 +16,11 @@
               <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 style="padding:0;">
+              <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22230%22%20viewBox%3D%220%200%20600%20230%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22230%22%20fill%3D%22%230b1020%22%2F%3E%20%3Ccircle%20cx%3D%22524%22%20cy%3D%2230%22%20r%3D%2296%22%20fill%3D%22%23111832%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22216%22%20r%3D%2280%22%20fill%3D%22%23111832%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%2240%22%20width%3D%22300%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22%2316203c%22%2F%3E%20%3Cpath%20d%3D%22M150%2052%20Q150%2040%20162%2040%20L438%2040%20Q450%2040%20450%2052%20L450%2072%20L150%2072%20Z%22%20fill%3D%22%231c2848%22%2F%3E%20%3Ccircle%20cx%3D%22172%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%233b6ea5%22%2F%3E%20%3Ccircle%20cx%3D%22208%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2328497a%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%2290%22%20width%3D%22122%22%20height%3D%2214%22%20rx%3D%227%22%20fill%3D%22%232b3d69%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22118%22%20width%3D%22264%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22136%22%20width%3D%22236%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22154%22%20width%3D%22250%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22180%22%20width%3D%2298%22%20height%3D%2220%22%20rx%3D%2210%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Cpath%20d%3D%22M470%2084%20L479%20108%20L502%20117%20L479%20126%20L470%20150%20L461%20126%20L438%20117%20L461%20108%20Z%22%20fill%3D%22%23d9e9f9%22%2F%3E%20%3Cpath%20d%3D%22M502%2056%20L506%2067%20L517%2071%20L506%2075%20L502%2086%20L498%2075%20L487%2071%20L498%2067%20Z%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Nova — the new workspace" style="display:block; width:100%; max-width:600px; height:auto;" />
+            </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>

package/examples/templates/rate-your-headphones.html

@@ -35,14 +35,7 @@
               <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f9fd; ">
                 <tr>
                   <td valign="middle" width="30%" align="center" style="padding:22px 16px;">
-                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#16233a; ">
-                      <tr>
-                        <td align="center" style="padding:24px 20px;">
-                          <p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#93a7c4;">Studio</p>
-                          <p style="margin:0; font-family:Georgia, serif; font-size:18px; color:#ffffff;">MK II</p>
-                        </td>
-                      </tr>
-                    </table>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%20%3Crect%20width%3D%22280%22%20height%3D%22280%22%20fill%3D%22%2316233a%22%2F%3E%20%3Ccircle%20cx%3D%22230%22%20cy%3D%2250%22%20r%3D%2232%22%20fill%3D%22%231e2f4d%22%2F%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%22240%22%20r%3D%2242%22%20fill%3D%22%23121c30%22%2F%3E%20%3Cpath%20d%3D%22M70%20162%20L70%20120%20Q70%2050%20140%2050%20Q210%2050%20210%20120%20L210%20162%22%20fill%3D%22none%22%20stroke%3D%22%23dbe5f2%22%20stroke-width%3D%2214%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cline%20x1%3D%2270%22%20y1%3D%22152%22%20x2%3D%2270%22%20y2%3D%22178%22%20stroke%3D%22%2393a7c4%22%20stroke-width%3D%228%22%2F%3E%20%3Cline%20x1%3D%22210%22%20y1%3D%22152%22%20x2%3D%22210%22%20y2%3D%22178%22%20stroke%3D%22%2393a7c4%22%20stroke-width%3D%228%22%2F%3E%20%3Crect%20x%3D%2246%22%20y%3D%22168%22%20width%3D%2248%22%20height%3D%2266%22%20rx%3D%2220%22%20fill%3D%22%23dbe5f2%22%2F%3E%20%3Crect%20x%3D%22186%22%20y%3D%22168%22%20width%3D%2248%22%20height%3D%2266%22%20rx%3D%2220%22%20fill%3D%22%23dbe5f2%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%22178%22%20width%3D%2224%22%20height%3D%2246%22%20rx%3D%2212%22%20fill%3D%22%2393a7c4%22%2F%3E%20%3Crect%20x%3D%22198%22%20y%3D%22178%22%20width%3D%2224%22%20height%3D%2246%22%20rx%3D%2212%22%20fill%3D%22%2393a7c4%22%2F%3E%20%3C%2Fsvg%3E" width="140" alt="Studio Headphones MK II" style="display:block; width:140px; max-width:100%; height:auto;" />
                   </td>
                   <td valign="middle" width="70%" style="padding:16px 16px 16px 4px;">
                     <h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:15.5px; color:#16233a;">Studio Headphones MK II</h2>

package/examples/templates/the-sunday-brief.html

@@ -18,6 +18,11 @@
           <tr>
             <td style="height:5px; line-height:5px; font-size:0; background-color:#a06b2c;">&nbsp;</td>
           </tr>
+          <tr>
+            <td style="padding:0;">
+              <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22250%22%20viewBox%3D%220%200%20600%20250%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22250%22%20fill%3D%22%23eee9dd%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22158%22%20r%3D%2266%22%20fill%3D%22%23d9a05b%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22158%22%20r%3D%2266%22%20fill%3D%22none%22%20stroke%3D%22%23a06b2c%22%20stroke-width%3D%223%22%2F%3E%20%3Cg%20stroke%3D%22%23a06b2c%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22176%22%20y1%3D%2266%22%20x2%3D%22176%22%20y2%3D%2248%22%2F%3E%20%3Cline%20x1%3D%22224%22%20y1%3D%2284%22%20x2%3D%22238%22%20y2%3D%2270%22%2F%3E%20%3Cline%20x1%3D%22128%22%20y1%3D%2284%22%20x2%3D%22114%22%20y2%3D%2270%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M370%2078%20q9%20-9%2018%200%20M398%2092%20q8%20-8%2016%200%20M348%20100%20q7%20-7%2014%200%22%20stroke%3D%22%231c1b18%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M0%20202%20Q100%20140%20220%20190%20Q330%20234%20420%20192%20Q510%20152%20600%20182%20L600%20250%20L0%20250%20Z%22%20fill%3D%22%231c1b18%22%2F%3E%20%3Cpath%20d%3D%22M0%20222%20Q140%20180%20300%20214%20Q450%20244%20600%20212%20L600%20250%20L0%20250%20Z%22%20fill%3D%22%233d3a33%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Morning sun over quiet hills" style="display:block; width:100%; max-width:600px; height:auto;" />
+            </td>
+          </tr>
           <tr>
             <td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
               <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>

package/examples/templates/your-order-shipped.html

@@ -16,6 +16,7 @@
           </tr>
           <tr>
             <td align="center" style="padding:34px 36px 8px;">
+              <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;" />
               <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>
               <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>
               <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>

package/examples/vanilla.html

@@ -289,14 +289,7 @@
               <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>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%20%3Crect%20width%3D%22340%22%20height%3D%22340%22%20fill%3D%22%23b85c38%22%2F%3E%20%3Ccircle%20cx%3D%22264%22%20cy%3D%2272%22%20r%3D%2242%22%20fill%3D%22%23c96f4a%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%22290%22%20r%3D%2254%22%20fill%3D%22%23a9502e%22%2F%3E%20%3Cellipse%20cx%3D%22172%22%20cy%3D%22252%22%20rx%3D%22120%22%20ry%3D%2213%22%20fill%3D%22%238f4526%22%2F%3E%20%3Cpath%20d%3D%22M52%20222%20Q52%20242%2076%20242%20L268%20242%20Q288%20242%20288%20224%20L288%20216%20Q288%20208%20278%20206%20L62%20206%20Q52%20208%2052%20222%20Z%22%20fill%3D%22%23f3e9dc%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q60%20152%2096%20140%20Q128%20130%20148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20Z%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3Cpath%20d%3D%22M148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20L196%20208%20Q170%20198%20156%20174%20Z%22%20fill%3D%22%23caa27f%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q61%20170%2082%20152%20Q68%20172%2070%20208%20Z%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3Cg%20stroke%3D%22%238f5a3a%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22112%22%20y1%3D%22152%22%20x2%3D%22140%22%20y2%3D%22166%22%2F%3E%20%3Cline%20x1%3D%22106%22%20y1%3D%22168%22%20x2%3D%22136%22%20y2%3D%22182%22%2F%3E%20%3Cline%20x1%3D%22102%22%20y1%3D%22184%22%20x2%3D%22132%22%20y2%3D%22198%22%2F%3E%20%3C%2Fg%3E%20%3Crect%20x%3D%2258%22%20y%3D%22230%22%20width%3D%22224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3C%2Fsvg%3E" width="170" alt="Terracotta Trainer — suede and canvas sneaker" style="display:block; width:170px; max-width:100%; height:auto;" />
                   </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>
@@ -362,14 +355,7 @@
               <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>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Crect%20width%3D%22300%22%20height%3D%22300%22%20fill%3D%22%237048b8%22%2F%3E%20%3Ccircle%20cx%3D%22250%22%20cy%3D%2256%22%20r%3D%2236%22%20fill%3D%22%237f57c6%22%2F%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%22256%22%20r%3D%2240%22%20fill%3D%22%23633fa8%22%2F%3E%20%3Cellipse%20cx%3D%22150%22%20cy%3D%22236%22%20rx%3D%22106%22%20ry%3D%2211%22%20fill%3D%22%235d3aa0%22%2F%3E%20%3Cpath%20d%3D%22M110%20122%20Q110%2084%20150%2084%20Q190%2084%20190%20122%22%20fill%3D%22none%22%20stroke%3D%22%235c3a1e%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%22118%22%20width%3D%22184%22%20height%3D%22114%22%20rx%3D%2226%22%20fill%3D%22%238a5a33%22%2F%3E%20%3Cpath%20d%3D%22M84%20118%20Q58%20118%2058%20144%20L58%20206%20Q58%20232%2084%20232%20Z%22%20fill%3D%22%237a4e2b%22%2F%3E%20%3Cpath%20d%3D%22M216%20118%20Q242%20118%20242%20144%20L242%20206%20Q242%20232%20216%20232%20Z%22%20fill%3D%22%237a4e2b%22%2F%3E%20%3Crect%20x%3D%22106%22%20y%3D%22118%22%20width%3D%2212%22%20height%3D%22114%22%20fill%3D%22%236e4526%22%2F%3E%20%3Crect%20x%3D%22182%22%20y%3D%22118%22%20width%3D%2212%22%20height%3D%22114%22%20fill%3D%22%236e4526%22%2F%3E%20%3Cline%20x1%3D%2298%22%20y1%3D%22134%22%20x2%3D%22202%22%20y2%3D%22134%22%20stroke%3D%22%23e8d9c4%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%22202%22%20cy%3D%22134%22%20r%3D%226%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3C%2Fsvg%3E" width="150" alt="Chestnut leather weekend bag" style="display:block; width:150px; max-width:100%; height:auto;" />
                   </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>
@@ -729,6 +715,11 @@
               <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 style="padding:0;">
+              <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22230%22%20viewBox%3D%220%200%20600%20230%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22230%22%20fill%3D%22%230b1020%22%2F%3E%20%3Ccircle%20cx%3D%22524%22%20cy%3D%2230%22%20r%3D%2296%22%20fill%3D%22%23111832%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22216%22%20r%3D%2280%22%20fill%3D%22%23111832%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%2240%22%20width%3D%22300%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22%2316203c%22%2F%3E%20%3Cpath%20d%3D%22M150%2052%20Q150%2040%20162%2040%20L438%2040%20Q450%2040%20450%2052%20L450%2072%20L150%2072%20Z%22%20fill%3D%22%231c2848%22%2F%3E%20%3Ccircle%20cx%3D%22172%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%233b6ea5%22%2F%3E%20%3Ccircle%20cx%3D%22208%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2328497a%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%2290%22%20width%3D%22122%22%20height%3D%2214%22%20rx%3D%227%22%20fill%3D%22%232b3d69%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22118%22%20width%3D%22264%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22136%22%20width%3D%22236%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22154%22%20width%3D%22250%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22180%22%20width%3D%2298%22%20height%3D%2220%22%20rx%3D%2210%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Cpath%20d%3D%22M470%2084%20L479%20108%20L502%20117%20L479%20126%20L470%20150%20L461%20126%20L438%20117%20L461%20108%20Z%22%20fill%3D%22%23d9e9f9%22%2F%3E%20%3Cpath%20d%3D%22M502%2056%20L506%2067%20L517%2071%20L506%2075%20L502%2086%20L498%2075%20L487%2071%20L498%2067%20Z%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Nova — the new workspace" style="display:block; width:100%; max-width:600px; height:auto;" />
+            </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>
@@ -960,14 +951,7 @@
               <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f9fd; ">
                 <tr>
                   <td valign="middle" width="30%" align="center" style="padding:22px 16px;">
-                    <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#16233a; ">
-                      <tr>
-                        <td align="center" style="padding:24px 20px;">
-                          <p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#93a7c4;">Studio</p>
-                          <p style="margin:0; font-family:Georgia, serif; font-size:18px; color:#ffffff;">MK II</p>
-                        </td>
-                      </tr>
-                    </table>
+<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%20%3Crect%20width%3D%22280%22%20height%3D%22280%22%20fill%3D%22%2316233a%22%2F%3E%20%3Ccircle%20cx%3D%22230%22%20cy%3D%2250%22%20r%3D%2232%22%20fill%3D%22%231e2f4d%22%2F%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%22240%22%20r%3D%2242%22%20fill%3D%22%23121c30%22%2F%3E%20%3Cpath%20d%3D%22M70%20162%20L70%20120%20Q70%2050%20140%2050%20Q210%2050%20210%20120%20L210%20162%22%20fill%3D%22none%22%20stroke%3D%22%23dbe5f2%22%20stroke-width%3D%2214%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cline%20x1%3D%2270%22%20y1%3D%22152%22%20x2%3D%2270%22%20y2%3D%22178%22%20stroke%3D%22%2393a7c4%22%20stroke-width%3D%228%22%2F%3E%20%3Cline%20x1%3D%22210%22%20y1%3D%22152%22%20x2%3D%22210%22%20y2%3D%22178%22%20stroke%3D%22%2393a7c4%22%20stroke-width%3D%228%22%2F%3E%20%3Crect%20x%3D%2246%22%20y%3D%22168%22%20width%3D%2248%22%20height%3D%2266%22%20rx%3D%2220%22%20fill%3D%22%23dbe5f2%22%2F%3E%20%3Crect%20x%3D%22186%22%20y%3D%22168%22%20width%3D%2248%22%20height%3D%2266%22%20rx%3D%2220%22%20fill%3D%22%23dbe5f2%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%22178%22%20width%3D%2224%22%20height%3D%2246%22%20rx%3D%2212%22%20fill%3D%22%2393a7c4%22%2F%3E%20%3Crect%20x%3D%22198%22%20y%3D%22178%22%20width%3D%2224%22%20height%3D%2246%22%20rx%3D%2212%22%20fill%3D%22%2393a7c4%22%2F%3E%20%3C%2Fsvg%3E" width="140" alt="Studio Headphones MK II" style="display:block; width:140px; max-width:100%; height:auto;" />
                   </td>
                   <td valign="middle" width="70%" style="padding:16px 16px 16px 4px;">
                     <h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:15.5px; color:#16233a;">Studio Headphones MK II</h2>
@@ -1142,6 +1126,11 @@
           <tr>
             <td style="height:5px; line-height:5px; font-size:0; background-color:#a06b2c;">&nbsp;</td>
           </tr>
+          <tr>
+            <td style="padding:0;">
+              <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22250%22%20viewBox%3D%220%200%20600%20250%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22250%22%20fill%3D%22%23eee9dd%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22158%22%20r%3D%2266%22%20fill%3D%22%23d9a05b%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22158%22%20r%3D%2266%22%20fill%3D%22none%22%20stroke%3D%22%23a06b2c%22%20stroke-width%3D%223%22%2F%3E%20%3Cg%20stroke%3D%22%23a06b2c%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22176%22%20y1%3D%2266%22%20x2%3D%22176%22%20y2%3D%2248%22%2F%3E%20%3Cline%20x1%3D%22224%22%20y1%3D%2284%22%20x2%3D%22238%22%20y2%3D%2270%22%2F%3E%20%3Cline%20x1%3D%22128%22%20y1%3D%2284%22%20x2%3D%22114%22%20y2%3D%2270%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M370%2078%20q9%20-9%2018%200%20M398%2092%20q8%20-8%2016%200%20M348%20100%20q7%20-7%2014%200%22%20stroke%3D%22%231c1b18%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M0%20202%20Q100%20140%20220%20190%20Q330%20234%20420%20192%20Q510%20152%20600%20182%20L600%20250%20L0%20250%20Z%22%20fill%3D%22%231c1b18%22%2F%3E%20%3Cpath%20d%3D%22M0%20222%20Q140%20180%20300%20214%20Q450%20244%20600%20212%20L600%20250%20L0%20250%20Z%22%20fill%3D%22%233d3a33%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Morning sun over quiet hills" style="display:block; width:100%; max-width:600px; height:auto;" />
+            </td>
+          </tr>
           <tr>
             <td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
               <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>
@@ -1253,6 +1242,7 @@
           </tr>
           <tr>
             <td align="center" style="padding:34px 36px 8px;">
+              <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;" />
               <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>
               <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>
               <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",

package/src/core/editor-core.js

@@ -580,7 +580,7 @@ export class EditorCore {
    * dragging through uniformly-formatted text rebuilds nothing at all.
    */
   formatFingerprint(b) {
-    let s = b.id + '|' + this.currentTag() + '|' + (b.props.size || 16) + '|' + (this.state.linkDraft ? 1 : 0) + '|';
+    let s = b.id + '|' + this.currentTag() + '|' + this.selSize(b) + '|' + (this.state.linkDraft ? 1 : 0) + '|';
     for (const cmd of ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList']) {
       let on = false;
       try { on = document.queryCommandState(cmd); } catch { /* ignore */ }
@@ -622,6 +622,13 @@ export class EditorCore {
   };
 
   size(b, delta) {
+    // A non-collapsed selection inside a rich text block means the user is
+    // sizing a *run*, not the block -- every neighbouring control (bold,
+    // color, highlight) is selection-scoped, so a ± that rewrote the whole
+    // block's prop here read as broken. Only `text` can keep the resulting
+    // spans: a heading folds back through `textContent` (syncEdit), which
+    // would silently drop them, so it stays block-level.
+    if (b.type === 'text' && this.sizeSelection(b, delta)) return;
     // Uncommitted inline formatting is folded into props by `setProp` below
     // (`onFoldLiveEdit`), not here. This used to do its own fold, as a second
     // commit: that read `editEl.innerHTML` unconditionally, so a second click
@@ -639,6 +646,114 @@ export class EditorCore {
     this.setProp(b.id, 'size', Math.max(lo, Math.min(hi, cur + delta)));
   }
 
+  /** Nearest inline px font-size walking up from `node` to the edited block's wrapper -- null when no run declares one (the block prop then owns the size). */
+  inlineSizeAt(node) {
+    let n = node && node.nodeType === 1 ? node : (node ? node.parentElement : null);
+    while (n && n !== this.editEl) {
+      const m = /^([\d.]+)px$/.exec((n.style && n.style.fontSize) || '');
+      if (m) return parseFloat(m[1]);
+      n = n.parentElement;
+    }
+    return null;
+  }
+
+  /** What the ± readout should show: the inline size at the selection when the caret sits inside a sized run, else the block's own size. Also part of `formatFingerprint`, so moving the caret across differently-sized runs refreshes the toolbar. */
+  selSize(b) {
+    const live = this.find(this.state.doc, b.id).block || b;
+    const base = Number(live.props.size) || 16;
+    if (b.type !== 'text' || this.state.editing !== b.id || !this.editEl) return base;
+    const sel = this.getSelection();
+    const node = sel && sel.rangeCount && this.editEl.contains(sel.anchorNode)
+      ? sel.anchorNode
+      : (this.savedRange && this.editEl.contains(this.savedRange.startContainer) ? this.savedRange.startContainer : null);
+    const inline = node ? this.inlineSizeAt(node) : null;
+    return inline == null ? base : Math.round(inline);
+  }
+
+  /**
+   * Sizes just the selected run(s) of text by wrapping each selected text node
+   * in a `font-size` span (or restepping the span a previous click made --
+   * repeated ± must not nest one span per click). Wrapping happens at the text
+   * node, the innermost level, so the new size always outranks any inline size
+   * an imported ancestor carries. The change lives in the contenteditable like
+   * bold/italic do and folds into props through the same blur/commit path.
+   *
+   * Returns false when the click is not selection-scoped -- no live edit, a
+   * bare caret, or a selection covering the whole block. The last keeps
+   * select-all + ± behaving as the block-level master scale it always was
+   * (`syncRichContent` then *scales* mixed sizes instead of flattening them,
+   * and the saved `size` prop stays truthful).
+   */
+  sizeSelection(b, delta) {
+    const root = this.editEl;
+    if (!root || !root.isConnected || this.state.editing !== b.id) return false;
+    const sel = this.getSelection();
+    // Same fallback discipline as `exec`: the live selection wins when it is
+    // inside the edited block; `savedRange` covers focus stolen by a control.
+    let src = sel && sel.rangeCount && root.contains(sel.anchorNode) && root.contains(sel.focusNode) ? sel.getRangeAt(0) : null;
+    if (!src && this.savedRange && root.contains(this.savedRange.startContainer) && root.contains(this.savedRange.endContainer)) src = this.savedRange;
+    if (!src || src.collapsed) return false;
+    const range = src.cloneRange();
+    const total = root.textContent.length;
+    if (charOffset(root, range.startContainer, range.startOffset) === 0
+      && charOffset(root, range.endContainer, range.endOffset) === total) return false;
+
+    const [lo, hi] = SIZE_SPAN.text;
+    const live = this.find(this.state.doc, b.id).block || b;
+    const cur = this.inlineSizeAt(range.startContainer) || Number(live.props.size) || 16;
+    const next = Math.max(lo, Math.min(hi, Math.round(cur) + delta));
+
+    // Split the boundary text nodes so every text node intersecting the range
+    // is *fully* inside it; order matters when both ends share one node.
+    const endC = range.endContainer;
+    if (endC.nodeType === 3 && range.endOffset < endC.nodeValue.length) endC.splitText(range.endOffset);
+    const startC = range.startContainer;
+    if (startC.nodeType === 3 && range.startOffset > 0) {
+      const tail = startC.splitText(range.startOffset);
+      range.setStart(tail, 0);
+      if (endC === startC) range.setEnd(tail, tail.nodeValue.length);
+    }
+    const s = charOffset(root, range.startContainer, range.startOffset);
+    const e = charOffset(root, range.endContainer, range.endOffset);
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const hits = [];
+    let pos = 0; let tn;
+    while ((tn = walker.nextNode())) {
+      const len = tn.nodeValue.length;
+      if (len && pos >= s && pos + len <= e) hits.push(tn);
+      pos += len;
+      if (pos >= e) break;
+    }
+    // Something non-text was selected (an image, say): still handled -- the
+    // click must not fall through and resize the whole block.
+    if (!hits.length) return true;
+    const wraps = hits.map((node) => {
+      const parent = node.parentElement;
+      if (parent && parent !== root && parent.tagName === 'SPAN' && parent.childNodes.length === 1) {
+        parent.style.fontSize = next + 'px';
+        return parent;
+      }
+      const span = document.createElement('span');
+      span.style.fontSize = next + 'px';
+      node.replaceWith(span);
+      span.appendChild(node);
+      return span;
+    });
+    // Reselect the runs so the next ± click steps from here, and cache the
+    // range the way `exec` does for controls that steal focus. Boundaries go
+    // *inside* the first/last wrap (each holds exactly one text node), so the
+    // selection anchor sits under the new span and `selSize` reads it for the
+    // toolbar readout.
+    const first = wraps[0].firstChild;
+    const last = wraps[wraps.length - 1].lastChild;
+    const r2 = document.createRange();
+    r2.setStart(first, 0);
+    r2.setEnd(last, last.nodeValue.length);
+    if (sel) { sel.removeAllRanges(); sel.addRange(r2); }
+    this.savedRange = r2.cloneRange();
+    return true;
+  }
+
   hasCountdown() { return this.state.doc.rows.some((r) => r.cols.some((c) => c.blocks.some((b) => b.type === 'countdown'))); }
 
   persist(doc, assets, chrome) {

package/src/core/i18n/ar.js

@@ -204,7 +204,6 @@ export const AR = {
   'rte.highlightColor': 'لون التمييز',
   'rte.removeHighlight': 'إزالة التمييز',
   'rte.clearFormatting': 'مسح التنسيق',
-  'action.downloadPng': 'تنزيل PNG',
   'action.screenshot': 'لقطة شاشة',
   'action.screenshotHint': 'معاينة القالب كاملاً كصورة، ثم تنزيله',
   'toast.pngSaved': 'تم تنزيل لقطة الشاشة',
@@ -221,6 +220,8 @@ export const AR = {
   'story.pause': 'إيقاف مؤقت',
   'story.replay': 'إعادة التشغيل',
   'story.copy': 'نسخ',
+  'story.download': 'تنزيل {fmt}',
+  'story.format': 'صيغة الصورة — PNG بلا فقدان، وJPG وWebP ملفات أصغر',
   'story.meta': '{w}×{h} · شاشة {i} من {n}',
   'footer.poweredBy': 'مدعوم من SELISE Blocks © 2026',
 };

package/src/core/i18n/bg.js

@@ -181,7 +181,6 @@ export const BG = {
   'rte.highlightColor': 'Цвят на маркиране',
   'rte.removeHighlight': 'Премахване на маркирането',
   'rte.clearFormatting': 'Изчистване на форматирането',
-  'action.downloadPng': 'Изтегляне на PNG',
   'action.screenshot': 'Екранна снимка',
   'action.screenshotHint': 'Прегледайте целия шаблон като изображение и го изтеглете',
   'toast.pngSaved': 'Екранната снимка е изтеглена',
@@ -198,6 +197,8 @@ export const BG = {
   'story.pause': 'Пауза',
   'story.replay': 'Отначало',
   'story.copy': 'Копиране',
+  'story.download': 'Изтегляне на {fmt}',
+  'story.format': 'Формат на изображението — PNG е без загуби, JPG и WebP са по-малки файлове',
   'story.meta': '{w}×{h} · екран {i} от {n}',
   'footer.poweredBy': 'С технологията на SELISE Blocks © 2026',
 };

package/src/core/i18n/bn.js

@@ -203,7 +203,6 @@ export const BN = {
   'rte.highlightColor': 'হাইলাইট রং',
   'rte.removeHighlight': 'হাইলাইট সরান',
   'rte.clearFormatting': 'ফরম্যাটিং মুছুন',
-  'action.downloadPng': 'PNG ডাউনলোড',
   'action.screenshot': 'স্ক্রিনশট',
   'action.screenshotHint': 'পুরো টেমপ্লেট ছবি হিসেবে দেখুন, তারপর ডাউনলোড করুন',
   'toast.pngSaved': 'স্ক্রিনশট ডাউনলোড হয়েছে',
@@ -220,6 +219,8 @@ export const BN = {
   'story.pause': 'থামান',
   'story.replay': 'আবার চালান',
   'story.copy': 'কপি',
+  'story.download': '{fmt} ডাউনলোড',
+  'story.format': 'ছবির ফরম্যাট — PNG লসলেস, JPG ও WebP ফাইল ছোট',
   'story.meta': '{w}×{h} · স্ক্রিন {i} / {n}',
   'footer.poweredBy': 'SELISE Blocks দ্বারা পরিচালিত © 2026',
 };

package/src/core/i18n/ca.js

@@ -181,7 +181,6 @@ export const CA = {
   'rte.highlightColor': 'Color de ressaltat',
   'rte.removeHighlight': 'Treu el ressaltat',
   'rte.clearFormatting': 'Neteja el format',
-  'action.downloadPng': 'Baixa el PNG',
   'action.screenshot': 'Captura',
   'action.screenshotHint': 'Previsualitza tota la plantilla com a imatge i baixa-la',
   'toast.pngSaved': 'Captura baixada',
@@ -198,6 +197,8 @@ export const CA = {
   'story.pause': 'Pausa',
   'story.replay': 'Torna a reproduir',
   'story.copy': 'Copia',
+  'story.download': 'Baixa el {fmt}',
+  'story.format': 'Format de la imatge — el PNG és sense pèrdues; JPG i WebP són fitxers més petits',
   'story.meta': '{w}×{h} · pantalla {i} de {n}',
   'footer.poweredBy': 'Amb la tecnologia de SELISE Blocks © 2026',
 };

package/src/core/i18n/cs.js

@@ -181,7 +181,6 @@ export const CS = {
   'rte.highlightColor': 'Barva zvýraznění',
   'rte.removeHighlight': 'Odebrat zvýraznění',
   'rte.clearFormatting': 'Zrušit formátování',
-  'action.downloadPng': 'Stáhnout PNG',
   'action.screenshot': 'Snímek',
   'action.screenshotHint': 'Zobrazit celou šablonu jako obrázek a stáhnout ji',
   'toast.pngSaved': 'Snímek stažen',
@@ -198,6 +197,8 @@ export const CS = {
   'story.pause': 'Pozastavit',
   'story.replay': 'Přehrát znovu',
   'story.copy': 'Kopírovat',
+  'story.download': 'Stáhnout {fmt}',
+  'story.format': 'Formát obrázku — PNG je bezeztrátový, JPG a WebP jsou menší soubory',
   'story.meta': '{w}×{h} · obrazovka {i} z {n}',
   'footer.poweredBy': 'Běží na SELISE Blocks © 2026',
 };

package/src/core/i18n/da.js

@@ -181,7 +181,6 @@ export const DA = {
   'rte.highlightColor': 'Fremhævningsfarve',
   'rte.removeHighlight': 'Fjern fremhævning',
   'rte.clearFormatting': 'Ryd formatering',
-  'action.downloadPng': 'Hent PNG',
   'action.screenshot': 'Skærmbillede',
   'action.screenshotHint': 'Se hele skabelonen som et billede, og hent det',
   'toast.pngSaved': 'Skærmbillede hentet',
@@ -198,6 +197,8 @@ export const DA = {
   'story.pause': 'Pause',
   'story.replay': 'Afspil igen',
   'story.copy': 'Kopiér',
+  'story.download': 'Hent {fmt}',
+  'story.format': 'Billedformat — PNG er tabsfrit, JPG og WebP er mindre filer',
   'story.meta': '{w}×{h} · skærm {i} af {n}',
   'footer.poweredBy': 'Drevet af SELISE Blocks © 2026',
 };

package/src/core/i18n/de-CH.js

@@ -181,7 +181,6 @@ export const DE_CH = {
   'rte.highlightColor': 'Markierungsfarbe',
   'rte.removeHighlight': 'Markierung entfernen',
   'rte.clearFormatting': 'Formatierung entfernen',
-  'action.downloadPng': 'PNG herunterladen',
   'action.screenshot': 'Screenshot',
   'action.screenshotHint': 'Die ganze Vorlage als Bild ansehen und herunterladen',
   'toast.pngSaved': 'Screenshot heruntergeladen',
@@ -198,6 +197,8 @@ export const DE_CH = {
   'story.pause': 'Pause',
   'story.replay': 'Nochmals abspielen',
   'story.copy': 'Kopieren',
+  'story.download': '{fmt} herunterladen',
+  'story.format': 'Bildformat — PNG ist verlustfrei, JPG und WebP sind kleinere Dateien',
   'story.meta': '{w}×{h} · Ansicht {i} von {n}',
   'footer.poweredBy': 'Bereitgestellt von SELISE Blocks © 2026',
 };

package/src/core/i18n/de.js

@@ -181,7 +181,6 @@ export const DE = {
   'rte.highlightColor': 'Markierungsfarbe',
   'rte.removeHighlight': 'Markierung entfernen',
   'rte.clearFormatting': 'Formatierung entfernen',
-  'action.downloadPng': 'PNG herunterladen',
   'action.screenshot': 'Screenshot',
   'action.screenshotHint': 'Die gesamte Vorlage als Bild ansehen und herunterladen',
   'toast.pngSaved': 'Screenshot heruntergeladen',
@@ -198,6 +197,8 @@ export const DE = {
   'story.pause': 'Pause',
   'story.replay': 'Erneut abspielen',
   'story.copy': 'Kopieren',
+  'story.download': '{fmt} herunterladen',
+  'story.format': 'Bildformat — PNG ist verlustfrei, JPG und WebP sind kleinere Dateien',
   'story.meta': '{w}×{h} · Ansicht {i} von {n}',
   'footer.poweredBy': 'Bereitgestellt von SELISE Blocks © 2026',
 };

package/src/core/i18n/dz.js

@@ -206,7 +206,6 @@ export const DZ = {
   'rte.highlightColor': 'གསལ་སྟོན་ཚོས་གཞི',
   'rte.removeHighlight': 'གསལ་སྟོན་རྩ་བསྐྲད',
   'rte.clearFormatting': 'རྣམ་གཞག་བསུབ',
-  'action.downloadPng': 'PNG ཕབ་ལེན',
   'action.screenshot': 'བརྙན་ཤེལ་པར',
   'action.screenshotHint': 'ཊེམ་པེལེཊ་ཧྲིལ་བུ་པར་བཟུམ་སྦེ་བལྟ་ཞིནམ་ལས་ཕབ་ལེན་འབད',
   'toast.pngSaved': 'བརྙན་ཤེལ་པར་ཕབ་ལེན་བྱུང',
@@ -223,6 +222,8 @@ export const DZ = {
   'story.pause': 'འཕྲལ་བཀག',
   'story.replay': 'སླར་གཏང',
   'story.copy': 'འདྲ་བཤུས',
+  'story.download': '{fmt} ཕབ་ལེན',
+  'story.format': 'པར་གྱི་རྣམ་གཞག — PNG ཉམས་ཆག་མེད། JPG དང་ WebP ཡིག་སྣོད་ཆུང་ཀུ་ཨིན',
   'story.meta': '{w}×{h} · གསལ་གཞི {i}/{n}',
   'footer.poweredBy': 'SELISE Blocks གིས་མཁོ་སྤྲོད © 2026',
 };

package/src/core/i18n/el.js

@@ -181,7 +181,6 @@ export const EL = {
   'rte.highlightColor': 'Χρώμα επισήμανσης',
   'rte.removeHighlight': 'Αφαίρεση επισήμανσης',
   'rte.clearFormatting': 'Καθαρισμός μορφοποίησης',
-  'action.downloadPng': 'Λήψη PNG',
   'action.screenshot': 'Στιγμιότυπο',
   'action.screenshotHint': 'Δείτε όλο το πρότυπο ως εικόνα και κατεβάστε το',
   'toast.pngSaved': 'Το στιγμιότυπο κατέβηκε',
@@ -198,6 +197,8 @@ export const EL = {
   'story.pause': 'Παύση',
   'story.replay': 'Επανάληψη',
   'story.copy': 'Αντιγραφή',
+  'story.download': 'Λήψη {fmt}',
+  'story.format': 'Μορφή εικόνας — το PNG είναι χωρίς απώλειες, τα JPG και WebP είναι μικρότερα αρχεία',
   'story.meta': '{w}×{h} · οθόνη {i} από {n}',
   'footer.poweredBy': 'Με την υποστήριξη του SELISE Blocks © 2026',
 };

package/src/core/i18n/en.js

@@ -238,7 +238,6 @@ export const EN = {
   'rte.clearFormatting': 'Clear formatting',
 
   // Screenshot export (export modal / element `screenshotPng()`)
-  'action.downloadPng': 'Download PNG',
   'action.screenshot': 'Screenshot',
   'action.screenshotHint': 'Preview the full template as an image, then download it',
   'toast.pngSaved': 'Screenshot downloaded',
@@ -257,6 +256,8 @@ export const EN = {
   'story.pause': 'Pause',
   'story.replay': 'Replay',
   'story.copy': 'Copy',
+  'story.download': 'Download {fmt}',
+  'story.format': 'Image format — PNG is lossless, JPG and WebP are smaller files',
   'story.meta': '{w}×{h} · screen {i} of {n}',
 
   // Footer strip (core/footer.js). One string, so a translator localizes

package/src/core/i18n/es.js

@@ -181,7 +181,6 @@ export const ES = {
   'rte.highlightColor': 'Color de resaltado',
   'rte.removeHighlight': 'Quitar resaltado',
   'rte.clearFormatting': 'Borrar formato',
-  'action.downloadPng': 'Descargar PNG',
   'action.screenshot': 'Captura',
   'action.screenshotHint': 'Ver toda la plantilla como imagen y descargarla',
   'toast.pngSaved': 'Captura descargada',
@@ -198,6 +197,8 @@ export const ES = {
   'story.pause': 'Pausar',
   'story.replay': 'Repetir',
   'story.copy': 'Copiar',
+  'story.download': 'Descargar {fmt}',
+  'story.format': 'Formato de imagen — PNG no tiene pérdidas; JPG y WebP son archivos más pequeños',
   'story.meta': '{w}×{h} · pantalla {i} de {n}',
   'footer.poweredBy': 'Con la tecnología de SELISE Blocks © 2026',
 };

package/src/core/i18n/et.js

@@ -181,7 +181,6 @@ export const ET = {
   'rte.highlightColor': 'Esiletõstu värv',
   'rte.removeHighlight': 'Eemalda esiletõst',
   'rte.clearFormatting': 'Eemalda vorming',
-  'action.downloadPng': 'Laadi PNG alla',
   'action.screenshot': 'Kuvatõmmis',
   'action.screenshotHint': 'Vaata kogu malli pildina ja laadi see alla',
   'toast.pngSaved': 'Kuvatõmmis laaditi alla',
@@ -198,6 +197,8 @@ export const ET = {
   'story.pause': 'Peata',
   'story.replay': 'Esita uuesti',
   'story.copy': 'Kopeeri',
+  'story.download': 'Laadi {fmt} alla',
+  'story.format': 'Pildivorming — PNG on kadudeta, JPG ja WebP on väiksemad failid',
   'story.meta': '{w}×{h} · vaade {i}/{n}',
   'footer.poweredBy': 'Töötab SELISE Blocks © 2026 põhjal',
 };

package/src/core/i18n/fi.js

@@ -181,7 +181,6 @@ export const FI = {
   'rte.highlightColor': 'Korostusväri',
   'rte.removeHighlight': 'Poista korostus',
   'rte.clearFormatting': 'Poista muotoilut',
-  'action.downloadPng': 'Lataa PNG',
   'action.screenshot': 'Kuvakaappaus',
   'action.screenshotHint': 'Katso koko pohja kuvana ja lataa se',
   'toast.pngSaved': 'Kuvakaappaus ladattiin',
@@ -198,6 +197,8 @@ export const FI = {
   'story.pause': 'Keskeytä',
   'story.replay': 'Toista uudelleen',
   'story.copy': 'Kopioi',
+  'story.download': 'Lataa {fmt}',
+  'story.format': 'Kuvamuoto — PNG on häviötön, JPG ja WebP ovat pienempiä tiedostoja',
   'story.meta': '{w}×{h} · näkymä {i}/{n}',
   'footer.poweredBy': 'Taustalla SELISE Blocks © 2026',
 };