{
  "aliases": [
    "email-template",
    "email-tokens",
    "blade-email",
    "html-email"
  ],
  "code": "// ───────────────────────────────────────────────────────────────────────\n// WHY a separate export: an email is rendered by Blade/Twig/MJML and by clients that strip\n// <style>, ignore CSS custom properties and block remote images. So NEITHER the React components\n// NOR @godxjp/ui/tokens are reachable — every value must be a LITERAL inline style.\n// @godxjp/ui/email is that bridge. It is React-free and dependency-free, and every value is\n// DERIVED from src/tokens/ (HSL→hex at module load), so it can never drift from the web palette.\n//\n// ❌ style=\"background:#0077c7\"                 // hand-copied hex → drifts the first re-theme\n// ❌ style=\"padding: var(--space-8)\"            // no email client resolves var()\n// ❌ style=\"width: 30rem\"                       // rem is unreliable; use literal px\n// ❌ <img src=\"https://cdn…/logo.png\">          // blocked by default in most clients\n// ❌ an emerald pill with no internal glyph     // that is the INCOMPLETE mark\n// ✅ every value from the token export + the embedded brand mark below\n\nimport {\n  EMAIL_BRAND_MARK,\n  EMAIL_COLORS,\n  EMAIL_CTA,\n  EMAIL_FOOTER,\n  EMAIL_MOBILE,\n  EMAIL_SHELL,\n  EMAIL_TYPOGRAPHY,\n  emailBrandMarkSvg,\n  emailInlineStyle,\n} from \"@godxjp/ui/email\";\n\nconst c = EMAIL_COLORS;\n\n// 1) THE 480px SHELL — a table, not a div: Outlook's Word renderer has no flex/grid.\nconst page = emailInlineStyle({ padding: EMAIL_SHELL.pagePadding, backgroundColor: c.background });\nconst card = emailInlineStyle({\n  width: EMAIL_SHELL.width,               // \"480px\" — EMAIL_SHELL.widthPx (480) for width=\"480\"\n  maxWidth: \"100%\",\n  backgroundColor: c.surface,             // ← --card\n  border: `${EMAIL_SHELL.borderWidth} solid ${c.border}`,\n  borderRadius: EMAIL_SHELL.radius,\n});\nconst body = emailInlineStyle({\n  padding: EMAIL_SHELL.padding,           // content column = EMAIL_SHELL.contentWidth (416px)\n  fontFamily: EMAIL_TYPOGRAPHY.fontFamily,\n  fontSize: EMAIL_TYPOGRAPHY.bodyFontSize,\n  lineHeight: EMAIL_TYPOGRAPHY.bodyLineHeight,\n  color: c.foreground,\n});\n\n// 2) THE BRAND MARK — emerald capsule + internal glyph, embedded, zero network fetch.\n//    EMAIL_BRAND_MARK.svg        inline <svg>            (Apple Mail, iOS, Thunderbird)\n//    EMAIL_BRAND_MARK.dataUri    data: URL for <img src> (no request)\n//    EMAIL_BRAND_MARK.tableHtml  <table> fallback        (renders everywhere)\n//    The header is a LOCKUP: mark (22px) + EMAIL_BRAND_MARK.gap + the wordmark at\n//    EMAIL_BRAND_MARK.wordmarkFontSize/wordmarkFontWeight. The mark is DECORATIVE there —\n//    emailBrandMarkSvg({ label: \"\" }) — so the wordmark carries the name and it is announced once.\nconst mark = emailBrandMarkSvg({ label: \"\" });\n\n// 3) THE CTA — line-height EQUALS height, so the label centres with no flexbox.\nconst ctaCell = emailInlineStyle({\n  height: EMAIL_CTA.height,               // 36px — the canonical box (mirrors --control-height-lg)\n  borderRadius: EMAIL_CTA.radius,\n  backgroundColor: c.primary,\n});\nconst ctaLink = emailInlineStyle({\n  display: \"inline-block\",\n  padding: `0 ${EMAIL_CTA.paddingX}`,\n  lineHeight: EMAIL_CTA.lineHeight,\n  fontSize: EMAIL_CTA.fontSize,\n  fontWeight: EMAIL_CTA.fontWeight,\n  color: c.primaryForeground,\n  textDecoration: \"none\",\n});\n\n// 4) LEGAL FOOTER — quiet type over a hairline; links separated by a fixed-width spacer span\n//    (margins between inline links are dropped by several clients).\nconst footer = emailInlineStyle({\n  borderTop: `${EMAIL_FOOTER.borderWidth} solid ${c.border}`,\n  paddingTop: EMAIL_FOOTER.paddingTop,\n  fontSize: EMAIL_FOOTER.fontSize,\n  lineHeight: EMAIL_FOOTER.lineHeight,\n  color: c.mutedForeground,\n});\nconst linkSpacer = emailInlineStyle({ display: \"inline-block\", width: EMAIL_FOOTER.linkGap });\n\nexport const html = `\n<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n  <tr><td align=\"center\" style=\"${page}\">\n    <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"\n           width=\"${EMAIL_SHELL.widthPx}\" class=\"email-card\" style=\"${card}\">\n      <tr><td class=\"email-body\" style=\"${body}\">\n        ${mark}\n        <h1 class=\"email-heading\">Your subject line</h1>\n        <p>Your body copy.</p>\n        <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n          <tr><td class=\"email-cta\" align=\"center\" style=\"${ctaCell}\">\n            <a class=\"email-cta-link\" href=\"https://your.app/action\" style=\"${ctaLink}\">Continue</a>\n          </td></tr>\n        </table>\n        <table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n          <tr><td style=\"${footer}\">\n            <p>This mailbox is not monitored.</p>\n            <p><a href=\"#\">Help</a><span style=\"${linkSpacer}\">&#8203;</span><a href=\"#\">Privacy</a></p>\n          </td></tr>\n        </table>\n      </td></tr>\n    </table>\n  </td></tr>\n</table>`;\n\n// 5) MOBILE REFLOW — progressive enhancement ONLY. Every rule below has an inline equivalent\n//    above, so a client that strips <style> still renders the desktop layout, never a broken one.\nexport const mediaQuery = `\n@media (max-width: ${EMAIL_MOBILE.maxWidth}) {\n  .email-card { width: ${EMAIL_MOBILE.width} !important; }\n  .email-body { padding: ${EMAIL_MOBILE.padding} !important; }\n  .email-heading { font-size: ${EMAIL_MOBILE.headingFontSize} !important; }\n  .email-cta, .email-cta-link { width: ${EMAIL_MOBILE.ctaWidth} !important; }\n}`;\n\n// 6) BLADE / TWIG / any non-JS engine — dump the same values once in the build step:\n//    node --input-type=module -e 'import(\"@godxjp/ui/email\").then(m => process.stdout.write(m.EMAIL_TOKENS_JSON))' > resources/design/email-tokens.json\n//    then read the JSON from PHP. Same numbers, same source, no copy-paste.",
  "name": "transactional-email",
  "tagline": "Build a transactional HTML email (Blade/Twig/MJML/React) from @godxjp/ui/email — literal hex + px derived from the web tokens, the canonical GoDX brand mark, a bulletproof CTA, legal footer and mobile reflow. NEVER hand-copy hex or hand-draw the logo in a mail template.",
  "tags": [
    "email",
    "transactional",
    "blade",
    "laravel",
    "tokens",
    "brand",
    "mark",
    "mjml",
    "cta"
  ]
}