npm - ima-claude - Versions diffs - 2.15.0 → 2.18.0 - Mend

ima-claude 2.15.0 → 2.18.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 (37) hide show

package/plugins/ima-claude/skills/ima-email-creator/assets/base-template.html ADDED Viewed

@@ -0,0 +1,256 @@
+<!doctype html>
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!--[if mso]>
+  <noscript><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+  <!--<![endif]-->
+  <title>{{subject}}</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none; }
+    a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; }
+    #MessageViewBody a { color: inherit; text-decoration: none; }
+    p { line-height: inherit; }
+    .desktop_hide, .desktop_hide table { mso-hide: all; display: none; max-height: 0; overflow: hidden; }
+    .image_block img + div { display: none; }
+    @media (max-width: 620px) {
+      .row-content { width: 100% !important; }
+      .stack .column { width: 100%; display: block; }
+      .mobile_hide { display: none; }
+      .desktop_hide, .desktop_hide table { display: table !important; max-height: none !important; }
+      .image_block div.fullWidth { max-width: 100% !important; }
+    }
+  </style>
+  <!--[if mso]>
+  <style>sup, sub { font-size: 100% !important; } sup { mso-text-raise: 10%; } sub { mso-text-raise: -10%; }</style>
+  <![endif]-->
+</head>
+<body class="body" style="background-color:#F2F3F5;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none;">
+  <table class="nl-container" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;">
+    <tbody><tr><td>
+      <!-- Row 1: Header -->
+      <table class="row row-1" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:10px;padding-bottom:10px;text-align:center;">
+                    <!-- image_block: IMA logo -->
+                    <div class="image_block" style="text-align:center;">
+                      <a href="https://imahealth.org/?utm_source=email&utm_medium=newsletter&utm_campaign={{utmCampaign}}" target="_blank" style="outline:none;" tabindex="-1">
+                        <img src="https://imagedelivery.net/JtZuhs_w2Ns2ySmaMNtbTw/4024a8d2-4d98-48c5-fed5-b4e3a8e4c200/xs"
+                             alt="IMA Health"
+                             width="178"
+                             style="display:block;height:auto;max-width:178.8px;border:0;margin:0 auto;">
+                      </a>
+                    </div>
+                    <!-- spacer_block: 10px -->
+                    <div class="spacer_block" style="height:10px;line-height:10px;font-size:1px;">&#8202;</div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 1 -->
+      <!-- Row 2: Content -->
+      <table class="row row-2" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:10px;padding-bottom:10px;">
+                    <!-- heading_block: main H1 -->
+                    <div class="heading_block" style="text-align:center;">
+                      <h1 style="margin:0;color:#00066F;font-family:Lato,Arial,Helvetica,sans-serif;font-size:28px;font-weight:400;letter-spacing:normal;line-height:1.2;text-align:center;mso-line-height-alt:34px;">
+                        Hi {Person.firstName}, here's your latest from IMA
+                      </h1>
+                    </div>
+                    <!-- paragraph_block: intro body text -->
+                    <div class="paragraph_block" style="padding:10px 20px;">
+                      <p style="margin:0;color:#494949;font-family:&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.2;mso-line-height-alt:19px;text-align:left;">
+                        Body copy goes here. This is the introductory paragraph for the email. Keep it concise and focused on the reader's needs.
+                      </p>
+                    </div>
+                    <!-- heading_block: section H1 (20px, weight 500, emoji prefix) -->
+                    <div class="heading_block" style="padding:10px 20px;">
+                      <h1 style="margin:0;color:#00066F;font-family:Lato,Arial,Helvetica,sans-serif;font-size:20px;font-weight:500;letter-spacing:normal;line-height:1.2;text-align:left;mso-line-height-alt:24px;">
+                        🔹 Section Heading
+                      </h1>
+                    </div>
+                    <!-- image_block: section image, linked with UTM -->
+                    <div class="image_block" style="padding:10px 20px;">
+                      <a href="https://imahealth.org/?utm_source=email&utm_medium=newsletter&utm_campaign={{utmCampaign}}" target="_blank" style="outline:none;" tabindex="-1">
+                        <img src="https://via.placeholder.com/580x300"
+                             alt=""
+                             width="580"
+                             style="display:block;height:auto;max-width:580px;border:0;border-radius:5px;">
+                      </a>
+                    </div>
+                    <!-- paragraph_block: section body copy -->
+                    <div class="paragraph_block" style="padding:10px 20px;">
+                      <p style="margin:0;color:#494949;font-family:&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.2;mso-line-height-alt:19px;text-align:left;">
+                        Section body copy goes here. Describe the content, news, or article being referenced. Keep paragraphs short and scannable.
+                      </p>
+                    </div>
+                    <!-- button_block: VML hybrid CTA -->
+                    <div class="button_block" style="padding:10px 20px;text-align:left;">
+                      <!--[if mso]>
+                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+                        href="https://imahealth.org/?utm_source=email&utm_medium=newsletter&utm_campaign={{utmCampaign}}"
+                        style="height:42px;v-text-anchor:middle;width:160px;"
+                        arcsize="9%"
+                        stroke="false"
+                        fillcolor="#00B8B8">
+                        <w:anchorlock/>
+                        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:500;">Read <b>More »</b></center>
+                      </v:roundrect>
+                      <![endif]-->
+                      <!--[if !mso]><!-->
+                      <a href="https://imahealth.org/?utm_source=email&utm_medium=newsletter&utm_campaign={{utmCampaign}}"
+                         target="_blank"
+                         style="display:inline-block;text-decoration:none;background-color:#00B8B8;border-radius:4px;color:#ffffff;font-family:Lato,Arial,Helvetica,sans-serif;font-size:16px;font-weight:500;height:42px;line-height:42px;padding:0 16px;mso-padding-alt:0;mso-text-raise:0;">
+                        Read <b>More »</b>
+                      </a>
+                      <!--<![endif]-->
+                    </div>
+                    <!-- divider_block -->
+                    <div class="divider_block" style="padding:10px 20px;">
+                      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                        <tr>
+                          <td style="border-top:1px solid #dddddd;font-size:1px;line-height:1px;">&#8202;</td>
+                        </tr>
+                      </table>
+                    </div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 2 -->
+      <!-- Row 3: Divider -->
+      <table class="row row-3" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:10px;padding-bottom:10px;">
+                    <div class="divider_block">
+                      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                        <tr>
+                          <td style="border-top:1px solid #dddddd;font-size:1px;line-height:1px;">&#8202;</td>
+                        </tr>
+                      </table>
+                    </div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 3 -->
+      <!-- Row 4: Footer -->
+      <table class="row row-4" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:10px;padding-bottom:10px;">
+                    <!-- paragraph_block: org info -->
+                    <div class="paragraph_block" style="padding:10px 20px;">
+                      <p style="margin:0;color:#919396;font-family:&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.2;mso-line-height-alt:19px;text-align:center;">
+                        IMA Health &bull; imahealth.org<br>
+                        &copy; 2026 Independent Medical Alliance. All rights reserved.
+                      </p>
+                    </div>
+                    <!-- social icons placeholder (production uses BeeFree CDN icons) -->
+                    <div class="social_block" style="padding:10px 20px;text-align:center;">
+                      <!-- BeeFree CDN social icons would be rendered here by the email builder -->
+                    </div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 4 -->
+      <!-- Row 5: Spacer -->
+      <table class="row row-5" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:0;padding-bottom:0;">
+                    <div class="spacer_block" style="height:10px;line-height:10px;font-size:1px;">&#8202;</div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 5 -->
+      <!-- Row 6: Unsubscribe -->
+      <table class="row row-6" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#F2F3F5;" align="center">
+        <tbody><tr><td>
+          <table class="row-content stack" width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;background-color:#FFFFFF;width:600px;margin:0 auto;" align="center">
+            <tbody><tr>
+              <td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0;">
+                <table class="col-pad" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;">
+                  <tr><td class="pad" style="padding-top:10px;padding-bottom:10px;">
+                    <!-- html_block: EspoCRM unsubscribe token -->
+                    <div class="html_block" style="text-align:center;">
+                      <p style="margin:0;font-family:&quot;Open Sans&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.2;mso-line-height-alt:19px;text-align:center;">
+                        <a href="{optOutLink}" style="color:#00B8B8;text-decoration:none;" target="_blank">Unsubscribe</a>
+                      </p>
+                    </div>
+                  </td></tr>
+                </table>
+              </td>
+            </tr></tbody>
+          </table>
+        </td></tr></tbody>
+      </table>
+      <!-- /Row 6 -->
+    </td></tr></tbody>
+  </table>
+</body>
+</html>

package/plugins/ima-claude/skills/ima-email-creator/references/drip-sequence.md ADDED Viewed

@@ -0,0 +1,66 @@
+# Drip Sequence Reference
+Patterns for individual drip/sequence emails. EspoCRM handles timing — this skill only produces standalone HTML.
+## What This Covers
+Individual email HTML for sequences. The sequencing logic (delays, conditions, triggers) lives in EspoCRM's BPM/Workflows — not in this skill.
+## Common Sequence Types
+| Sequence | Emails | Goal |
+|----------|--------|------|
+| Welcome | 3-5 | Onboard new member, set expectations |
+| Donor nurture | 4-6 | First donation → recurring donor |
+| Re-engagement | 2-3 | Win back inactive members |
+| Event follow-up | 2-3 | Post-webinar engagement |
+## Individual Email Patterns
+**Welcome Email 1 (Immediate)**
+- Warm, personal tone (Friendly + Supportive)
+- Confirm what they signed up for
+- Set expectations (what they'll receive, how often)
+- One clear CTA: "Complete Your Profile »" or "Explore Resources »"
+- Keep short — they just signed up, don't overwhelm
+**Welcome Email 2 (Day 2-3)**
+- Highlight one valuable resource
+- Social proof (member count, impact stats)
+- CTA: engage with specific content
+**Welcome Email 3 (Day 5-7)**
+- Deeper engagement — invite to community, events
+- Ask for feedback or preferences
+- CTA: "Join the Conversation »" or similar
+## Design Rules for Sequences
+- Each email MUST stand alone (reader may not have seen previous ones)
+- Progressive disclosure — don't front-load all information
+- Consistent header/footer across sequence
+- Vary CTA text (don't repeat "Learn More" 5 times)
+- Subject lines should work independently (no "Part 2 of 5")
+- Match production email styling: Lato headings / Open Sans body, #00B8B8 CTA color, #494949 body text, 16px body size
+## HTML Structure
+Each drip email uses the same BeeFree-style HTML structure:
+`nl-container → row → row-content → column`
+Use `assets/base-template.html` as the starting skeleton for every email.
+## EspoCRM Variables
+Use single-brace syntax: `{Person.firstName}`, `{optOutLink}`, `{accountName}`
+Do NOT use Handlebars double-brace syntax (`{{variable}}`).
+## EspoCRM Integration Note
+Each email is a separate EspoCRM Email Template. The BPM process handles:
+- Trigger conditions (signup, purchase, inactivity period)
+- Delays between emails
+- Exit conditions (unsubscribe, completed action)
+The skill outputs individual HTML files; configure sequencing in EspoCRM.

package/plugins/ima-claude/skills/ima-email-creator/references/email-css-safe.md ADDED Viewed

@@ -0,0 +1,104 @@
+# Email CSS Safety Reference
+## Safe CSS Properties
+| Property | Gmail | Outlook | Apple Mail | Notes |
+|---|---|---|---|---|
+| `color` | ✓ | ✓ | ✓ | Always inline |
+| `font-family` | ✓ | ✓ | ✓ | Include fallback stack |
+| `font-size` | ✓ | ✓ | ✓ | Use px, not rem/em |
+| `font-weight` | ✓ | ✓ | ✓ | Use numeric values (400, 700) |
+| `background-color` | ✓ | ✓ | ✓ | On `<td>`, not `<div>` for Outlook |
+| `text-align` | ✓ | ✓ | ✓ | Also use HTML `align=""` for Outlook |
+| `text-decoration` | ✓ | ✓ | ✓ | — |
+| `line-height` | ✓ | ✓ | ✓ | Unitless values safest; add `mso-line-height-alt` for Outlook |
+| `border` | ✓ | ✓ | ✓ | Shorthand works |
+| `padding` on `<td>` | ✓ | ✓ | ✓ | Use `<td>` not `<p>`/`<div>` |
+| `vertical-align` | ✓ | ✓ | ✓ | Use on `<td>` |
+| `width` | ✓ | ✓ | ✓ | Also set HTML `width=""` attribute |
+| `height` | ✓ | ✓ | ✓ | Also set HTML `height=""` attribute |
+## Partially Supported
+| Property | Issue |
+|---|---|
+| `border-radius` | Outlook ignores it entirely |
+| `max-width` | Gmail app (Android) ignores; use `width` on table instead |
+| `margin` | Outlook collapses margins unpredictably; avoid on block elements |
+| `padding` on `<p>`/`<div>` | Outlook unreliable; wrap in `<td>` instead |
+| `background-image` | Outlook (Word engine) ignores CSS background images |
+## Never Use in Email
+| Property | Reason |
+|---|---|
+| `position` | Broken across all clients |
+| `float` | Outlook ignores; use tables |
+| `display: flex` / `grid` | Not supported in Outlook or Gmail app |
+| `box-shadow` | Stripped by most clients |
+| `opacity` | Inconsistent; prefer solid colors |
+| `calc()` | Not supported |
+| CSS variables (`--var`) | Not supported |
+| `@media` queries | Gmail app strips; limit use |
+## Layout Rules
+- Tables ONLY for layout — Outlook uses the Word rendering engine, not a browser
+- `role="presentation"` on all layout tables
+- Always set `cellpadding="0" cellspacing="0" border="0"` explicitly
+- Use HTML `width` attributes on `<table>` and `<td>` (not just CSS) for Outlook
+- 600px max width for email body
+- Use `align="center"` on wrapper table, not CSS margin auto
+## Typography
+**Google Fonts import** (wrap in MSO conditional so Outlook skips it):
+```html
+<!--[if !mso]><!-->
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans:wght@400" rel="stylesheet">
+<!--<![endif]-->
+```
+| Element | Primary | Fallback Stack |
+|---|---|---|
+| Headings | Lato | Arial, Helvetica, sans-serif |
+| Body / Footer | Open Sans | "Helvetica Neue", Helvetica, Arial, sans-serif |
+| Monospace | Courier New | Courier, monospace |
+**Font sizes (production):**
+| Element | Size | Weight | Line-height | Outlook `mso-line-height-alt` |
+|---|---|---|---|---|
+| Main H1 | 28px | 700 | 1.2 | 34px |
+| Section H1 | 20px | 700 | 1.2 | 24px |
+| Body | 16px | 400 | 1.2 | 19px |
+| Button | 16px | 700 | — | — |
+## CSS Reset
+```css
+* { box-sizing: border-box; }
+body { margin: 0; padding: 0; }
+a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; }
+#MessageViewBody a { color: inherit; text-decoration: none; }
+p { line-height: inherit; }
+```
+## Image Rules
+- Always: absolute URLs (`https://`), explicit `width` + `height` attributes, `display:block`, meaningful `alt` text
+- Standard content images: `border-radius: 5px`
+- Never: CSS `background-image` (Outlook won't render), rely on images for critical content
+- Retina: serve 2x images with 1x `width`/`height` attributes
+- Max image width: match container (typically 600px or less)
+## Color Accessibility
+| Color | Use | Ratio | Status |
+|---|---|---|---|
+| Body text `#494949` (Gravel) | Body/footer text | 7.7:1 | ✓ WCAG AA |
+| Headings `#00066F` (Trustworthy Indigo) | H1/H2 on white | >10:1 | ✓ WCAG AAA |
+| `#007BB4` (Accessible Teal) | Links, small CTA | 4.6:1 | ✓ WCAG AA |
+| `#00B8B8` (Aquatic Pulse) | Large text/buttons only | 3.0:1 | ✗ Body text; use 18px+ or bold 16px+ |
+Minimum 4.5:1 for body text (WCAG AA). Use `#00B8B8` only on large text or solid-fill buttons where background provides contrast.

package/plugins/ima-claude/skills/ima-email-creator/references/espocrm-compat.md ADDED Viewed

@@ -0,0 +1,58 @@
+# EspoCRM Email Template Compatibility
+## What EspoCRM Strips
+| Tag / Attribute | Notes |
+|---|---|
+| `<html>`, `<head>`, `<body>` | Document-level structure removed |
+| `<style>` blocks | Stripped by prep script; inline CSS only is the guarantee |
+| `<script>`, `<iframe>`, `<embed>`, `<object>` | Security-stripped |
+| Event handlers (`onclick`, `onload`, etc.) | Stripped |
+| `data-*` attributes | May be stripped |
+Responsive `@media` queries in `<style>` blocks are lost after EspoCRM prep. This is expected — EspoCRM renders in its own container.
+## What Survives
+- Table-based layouts with inline `style=""` attributes
+- `<img>` with inline styles and HTML attributes (`width`, `height`, `alt`)
+- `<a>` links
+- Standard block/inline elements: `div`, `span`, `p`, `h1–h6`, `ul`, `ol`, `li`, `br`, `hr`
+## The Body→Div Transform
+The key transform is simple: `espocrm-prep.py` extracts `<body>` content and wraps it in a `<div>`. The `<head>` style block, Google Fonts import, and MSO conditionals are all stripped.
+```bash
+python3 scripts/espocrm-prep.py input.html --out output.html
+```
+## Source View Paste Workflow
+1. Generate email HTML (or receive from BeeFree/external tool)
+2. Run `espocrm-prep.py` — this extracts `<body>` content and wraps in `<div>`. The `<head>` style block, Google Fonts import, and MSO conditionals are all stripped.
+3. In EspoCRM: Email Template → Edit → switch to Source View (`< >` icon)
+4. Paste the prepared HTML
+5. **NEVER switch back to WYSIWYG** — it will corrupt the HTML
+6. Save directly from source view
+## EspoCRM Template Variables
+EspoCRM uses **single-brace** syntax (NOT Handlebars double-brace):
+| Variable | Usage | Email Types |
+|----------|-------|-------------|
+| `{Person.firstName}` | First name greeting | Newsletters |
+| `{Person.name}` | Full name greeting | Campaigns, fundraising |
+| `{optOutLink}` | Unsubscribe link | ALL emails (footer) |
+The `{optOutLink}` renders as a clickable link. Style the container:
+```html
+<div style="text-align: center; color: #00B8B8;">{optOutLink}</div>
+```
+## Tips
+- Build HTML externally, paste into source view as a single operation
+- Test by sending a test email to yourself before mass send
+- If HTML looks broken after saving, it was round-tripped through WYSIWYG — rebuild from source

package/plugins/ima-claude/skills/ima-email-creator/references/newsletter-layout.md ADDED Viewed

@@ -0,0 +1,127 @@
+# Newsletter Layout Reference
+HTML structure patterns for newsletters, campaigns, fundraising, and webinar promo emails. IMA-branded.
+## Common Structure (BeeFree DOM)
+```
+body (background: #F2F3F5)
+  └── nl-container table (100% width, role="presentation")
+      └── row table (100% width, center-aligned)
+          └── row-content stack table (600px, margin: 0 auto, background: #FFFFFF)
+              └── column column-1 td (100%)
+                  └── col-pad td (padding)
+                      └── [content block tables]
+```
+Content block class names: `image_block`, `heading_block`, `paragraph_block`, `button_block`, `divider_block`, `list_block`, `html_block`, `social_block`
+## Preheader Pattern
+```html
+<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
+  Preview text here (50-100 chars for inbox)
+</div>
+```
+## CTA Button Pattern (VML hybrid, Outlook-safe)
+```html
+<a href="URL" target="_blank" style="color: #ffffff; text-decoration: none;">
+  <!--[if mso]>
+  <v:roundrect style="height:42px;width:122px;v-text-anchor:middle;" arcsize="10%" fillcolor="#00B8B8">
+    <v:stroke dashstyle="Solid" weight="0px" color="#00B8B8"/>
+    <w:anchorlock/>
+    <v:textbox inset="0px,0px,0px,0px">
+      <center style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:16px">
+  <![endif]-->
+  <span class="button" style="background-color:#00B8B8;border-radius:4px;color:#ffffff;display:inline-block;font-family:Lato,Arial,Helvetica,sans-serif;font-size:16px;font-weight:500;text-align:center;word-break:keep-all;">
+    <span class="btn-pad" style="padding:5px 10px;display:block;">
+      <span style="word-break:break-word;line-height:32px;">Read <strong>More »</strong></span>
+    </span>
+  </span>
+  <!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
+</a>
+```
+Note: VML width varies per button text. CTA text uses `»` (raquo) chevron. "More" is bold.
+## Section Divider Pattern
+```html
+<table class="divider_block" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
+  <tr>
+    <td class="divider_inner" style="border-top:1px solid #dddddd;font-size:1px;line-height:1px;">&#8202;</td>
+  </tr>
+</table>
+```
+Note: Uses `&#8202;` (hair space), not `&nbsp;`.
+## Content Block Repeating Pattern
+```
+heading_block (h1, 20px emoji + title, color:#00066F, font: Lato, Arial, Helvetica, sans-serif)
+  → image_block (580px, border-radius 5px, linked)
+  → paragraph_block (16px body text, color #494949, font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif)
+  → button_block (VML hybrid CTA)
+  → divider_block (#dddddd)
+```
+## Colors & Fonts
+Colors — CTA: `#00B8B8` | Body text: `#494949` | Outer background: `#F2F3F5` | Inner container: `#FFFFFF` | Dividers: `#dddddd` | Footer: `#919396` | H1: `#00066F`
+Fonts — Headings: `Lato, Arial, Helvetica, sans-serif` | Body: `"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`
+## UTM Tracking
+ALL links must include UTM params:
+`?utm_term=YYYY-MM-DD&utm_medium=email&utm_source=bulk-mailer&utm_content=slug&utm_campaign=type`
+## EspoCRM Variables
+Single-brace syntax: `{Person.firstName}`, `{Person.name}`, `{optOutLink}`
+## Newsletter Layout
+1. **Preheader** — preview text
+2. **Header** — IMA logo (horizontal lockup, 200px min width)
+3. **Opening hook** — `{Person.firstName}` greeting, 2-3 sentences, personality-forward
+4. **Quick Links** — emoji + title list (3-6 items)
+5. **Content sections** (3-6) — emoji header, 2-3 sentence summary, "Read More »" CTA
+6. **Support footer** — "PLEASE SUPPORT HONEST MEDICINE" + donate CTA
+7. **Standard footer** — disclaimer, `{optOutLink}`, address
+## Fundraising / Campaign Layout
+1. **Preheader**
+2. **Header** with logo
+3. **Emotional headline** (h1)
+4. **Donate CTA above fold** — "💙 Match My Gift Today »" (or "💙 Please Donate »")
+5. **Salutation** — "Dear {Person.name}"
+6. **Problem/solution narrative** — 2-3 paragraphs
+7. **Pull quote** from named leader
+8. **"Why Your Support Matters"** — 3-4 bullets
+9. **"Your Gift Powers What's Next"** — 4 bullets with specific dollar amounts
+10. **Signoff** with full credentials + P.S. with deadline + repeat CTA
+11. **Footer**
+Note: If match campaign, repeat "EVERY DOLLAR DOUBLED" 2-3 times.
+## Webinar / Resource Promo Layout
+1. **Preheader** → **Header**
+2. **"Watch Now!" header** (h1) + hook headline
+3. **Context** — 3-4 sentences with tension
+4. **"In this episode, you'll learn:"** — 3 surprising bullets
+5. **Expert attribution** — name, credentials, affiliation
+6. **"👉 Watch Now »" / "Download Now »"** CTA → **Footer**
+## Journal / Institutional Layout
+Static only — no template variables. Institutional tone. CTAs: "Submit a Paper »" / "Get Tickets »"
+1. **Preheader** → **Header** → **Headline + subhead**
+2. **Content sections** — article summaries or event details
+3. **CTA block** → **Footer**