@vennyx/mila-react-template 0.1.0

package/dist/button.d.ts

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+export interface MilaButtonFixedProps {
+    href: string;
+    label: string;
+    /** px. Default 240 -- comfortable for a single short CTA phrase in
+     * either locale; pass a wider value for longer Turkish labels rather
+     * than switching to MilaButtonFluid, when Outlook rounded corners still
+     * matter for that specific template. */
+    width?: number;
+    /** px. Default 48. */
+    height?: number;
+    color?: string;
+    textColor?: string;
+}
+/**
+ * A real, VML-rounded-corner, fixed-width bulletproof button for Outlook
+ * Desktop (2007-2021+, Word rendering engine). Verified directly from
+ * react-email@6.7.0's own source that its built-in `Button` component does
+ * NOT emit VML at all (it uses a different, non-VML MSO font-width-spacer
+ * padding technique instead -- see MilaButtonFluid below) -- so this
+ * component is fully hand-written, not a wrapper around react-email's own
+ * Button.
+ *
+ * Rendered as one `dangerouslySetInnerHTML` string rather than nested JSX:
+ * the entire markup is 100% static structure with a handful of interpolated
+ * values (href/label/dimensions/colors), and the two "and everyone else"
+ * variants (`<!--[if !mso]><!-- -->` wrapping a real `<a>`) fight React's
+ * JSX model for no benefit here -- a single literal template string is
+ * simpler and more directly inspectable against the exact bulletproof
+ * pattern research verified, with zero risk of JSX/comment-escaping
+ * surprises.
+ *
+ * See docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 and
+ * the research doc's §1 for the exact source pattern this mirrors
+ * (Litmus/dev.to/Campaign Monitor -- v:roundrect, not v:rect, since
+ * v:roundrect supports the `arcsize` attribute for rounded corners).
+ */
+export declare function MilaButtonFixed({ href, label, width, height, color, textColor }: MilaButtonFixedProps): React.JSX.Element;
+export interface MilaButtonFluidProps {
+    href: string;
+    label: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A fluid-width button whose padding survives Outlook Desktop via
+ * react-email's own built-in MSO font-width-spacer hack (verified directly
+ * from its source: `Button` computes `mso-font-width`/`mso-text-raise`
+ * conditional-comment spacer `<i>` tags from the `padding` style prop) --
+ * no VML, so no rounded corners in Outlook Desktop specifically (square
+ * corners there only; every other client gets the real `border-radius`).
+ * Use this variant where a bilingual label's length varies too much
+ * between locales for a fixed width to look right in both (Turkish CTA
+ * strings routinely run longer than their English equivalents).
+ */
+export declare function MilaButtonFluid({ href, label, style }: MilaButtonFluidProps): React.JSX.Element;

package/dist/button.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from 'react-email';
+import { colors, fontStack } from './tokens.js';
+function escapeHtmlText(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * A real, VML-rounded-corner, fixed-width bulletproof button for Outlook
+ * Desktop (2007-2021+, Word rendering engine). Verified directly from
+ * react-email@6.7.0's own source that its built-in `Button` component does
+ * NOT emit VML at all (it uses a different, non-VML MSO font-width-spacer
+ * padding technique instead -- see MilaButtonFluid below) -- so this
+ * component is fully hand-written, not a wrapper around react-email's own
+ * Button.
+ *
+ * Rendered as one `dangerouslySetInnerHTML` string rather than nested JSX:
+ * the entire markup is 100% static structure with a handful of interpolated
+ * values (href/label/dimensions/colors), and the two "and everyone else"
+ * variants (`<!--[if !mso]><!-- -->` wrapping a real `<a>`) fight React's
+ * JSX model for no benefit here -- a single literal template string is
+ * simpler and more directly inspectable against the exact bulletproof
+ * pattern research verified, with zero risk of JSX/comment-escaping
+ * surprises.
+ *
+ * See docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 and
+ * the research doc's §1 for the exact source pattern this mirrors
+ * (Litmus/dev.to/Campaign Monitor -- v:roundrect, not v:rect, since
+ * v:roundrect supports the `arcsize` attribute for rounded corners).
+ */
+export function MilaButtonFixed({ href, label, width = 240, height = 48, color = colors.accent, textColor = colors.buttonText }) {
+    // Deliberately never wired to `.mila-accent-bg`: a CTA button's brand
+    // accent color is a fixed constant in both light and dark mode, not
+    // something that should fade into the surrounding background.
+    const safeLabel = escapeHtmlText(label);
+    const safeHref = escapeHtmlText(href);
+    const safeColor = escapeHtmlText(color);
+    const safeTextColor = escapeHtmlText(textColor);
+    const html = `<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
+  <tr>
+    <td align="center">
+      <!--[if mso]>
+      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${safeHref}" style="height:${height}px;v-text-anchor:middle;width:${width}px;" arcsize="12%" fillcolor="${safeColor}" strokecolor="${safeColor}">
+        <w:anchorlock/>
+        <center style="color:${safeTextColor};font-family:${fontStack.body};font-size:16px;font-weight:bold;">${safeLabel}</center>
+      </v:roundrect>
+      <![endif]-->
+      <!--[if !mso]><!-- -->
+      <a href="${safeHref}" target="_blank" role="button" style="background-color:${safeColor};border:1px solid ${safeColor};border-radius:6px;color:${safeTextColor};display:inline-block;font-family:${fontStack.body};font-size:16px;font-weight:bold;line-height:${height}px;text-align:center;text-decoration:none;width:${width}px;-webkit-text-size-adjust:none;mso-hide:all;">${safeLabel}</a>
+      <!--<![endif]-->
+    </td>
+  </tr>
+</table>`;
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+}
+/**
+ * A fluid-width button whose padding survives Outlook Desktop via
+ * react-email's own built-in MSO font-width-spacer hack (verified directly
+ * from its source: `Button` computes `mso-font-width`/`mso-text-raise`
+ * conditional-comment spacer `<i>` tags from the `padding` style prop) --
+ * no VML, so no rounded corners in Outlook Desktop specifically (square
+ * corners there only; every other client gets the real `border-radius`).
+ * Use this variant where a bilingual label's length varies too much
+ * between locales for a fixed width to look right in both (Turkish CTA
+ * strings routinely run longer than their English equivalents).
+ */
+export function MilaButtonFluid({ href, label, style }) {
+    return (_jsx(Button, { href: href, style: {
+            backgroundColor: colors.accent,
+            color: colors.buttonText,
+            fontFamily: fontStack.body,
+            fontSize: 16,
+            fontWeight: 'bold',
+            textDecoration: 'none',
+            borderRadius: 6,
+            padding: '14px 24px',
+            ...style,
+        }, children: label }));
+}
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEhD,SAAS,cAAc,CAAC,KAAa;IACnC,OAAO,KAAK;SACT,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAC5B,CAAC;AAgBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,UAAU,EAAwB;IACnJ,sEAAsE;IACtE,oEAAoE;IACpE,8DAA8D;IAC9D,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG;;;;mHAIoG,QAAQ,mBAAmB,MAAM,iCAAiC,KAAK,iCAAiC,SAAS,kBAAkB,SAAS;;+BAEhO,aAAa,gBAAgB,SAAS,CAAC,IAAI,sCAAsC,SAAS;;;;iBAIxG,QAAQ,2DAA2D,SAAS,qBAAqB,SAAS,4BAA4B,aAAa,qCAAqC,SAAS,CAAC,IAAI,gDAAgD,MAAM,mDAAmD,KAAK,mDAAmD,SAAS;;;;SAIxX,CAAC;IACR,OAAO,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC;AAQD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAwB;IAC1E,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,MAAM;YAC9B,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,UAAU,EAAE,SAAS,CAAC,IAAI;YAC1B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,MAAM;YAClB,cAAc,EAAE,MAAM;YACtB,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,WAAW;YACpB,GAAG,KAAK;SACT,YAEA,KAAK,GACC,CACV,CAAC;AACJ,CAAC"}

package/dist/divider.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+export interface MilaDividerProps {
+    style?: React.CSSProperties;
+}
+export declare function MilaDivider({ style }: MilaDividerProps): React.JSX.Element;

package/dist/divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hr } from 'react-email';
+import { colors } from './tokens.js';
+export function MilaDivider({ style }) {
+    return _jsx(Hr, { className: "mila-border", style: { borderColor: colors.border, margin: '24px 0', ...style } });
+}
+//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../src/divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAoB;IACrD,OAAO,KAAC,EAAE,IAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAI,CAAC;AAC3G,CAAC"}

package/dist/footer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The only footer variant shipped in v1 -- deliberately excludes a postal
+ * address and an unsubscribe link. Neither is legally required for
+ * transactional mail (CAN-SPAM's own transactional-message exemption names
+ * password resets/receipts/OTPs explicitly; GDPR mandates no specific
+ * footer content at all), and an unsubscribe link on a password-reset/
+ * account-security email is itself a UX/security anti-pattern -- it
+ * implies account-security mail is something a user can opt out of. A
+ * distinct `MilaMarketingFooter` (postal address, unsubscribe, İYS
+ * consent-hook for Turkish recipients) is explicit future scope, gated
+ * behind whichever future phase adds bulk/marketing send capability --
+ * not this one. See
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §6.3/§11.
+ */
+export declare function MilaFooter(): import("react").JSX.Element;

package/dist/footer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fontStack, spacing } from './tokens.js';
+/**
+ * The only footer variant shipped in v1 -- deliberately excludes a postal
+ * address and an unsubscribe link. Neither is legally required for
+ * transactional mail (CAN-SPAM's own transactional-message exemption names
+ * password resets/receipts/OTPs explicitly; GDPR mandates no specific
+ * footer content at all), and an unsubscribe link on a password-reset/
+ * account-security email is itself a UX/security anti-pattern -- it
+ * implies account-security mail is something a user can opt out of. A
+ * distinct `MilaMarketingFooter` (postal address, unsubscribe, İYS
+ * consent-hook for Turkish recipients) is explicit future scope, gated
+ * behind whichever future phase adds bulk/marketing send capability --
+ * not this one. See
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §6.3/§11.
+ */
+export function MilaFooter() {
+    return (_jsxs("p", { className: "mila-text-muted mila-border", style: {
+            margin: 0,
+            fontFamily: fontStack.body,
+            fontSize: 12,
+            lineHeight: '18px',
+            color: colors.textMuted,
+            paddingTop: spacing.lg,
+            borderTop: `1px solid ${colors.border}`,
+        }, children: ["VENNYX YAZILIM DANI\u015EMANLIK A.\u015E. \u00B7", ' ', _jsx("a", { href: "mailto:support@mila.cx", className: "mila-text-muted", style: { color: colors.textMuted }, children: "support@mila.cx" })] }));
+}
+//# sourceMappingURL=footer.js.map

package/dist/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../src/footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,aACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,SAAS,CAAC,IAAI;YAC1B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,MAAM,CAAC,SAAS;YACvB,UAAU,EAAE,OAAO,CAAC,EAAE;YACtB,SAAS,EAAE,aAAa,MAAM,CAAC,MAAM,EAAE;SACxC,iEAEwC,GAAG,EAC5C,YAAG,IAAI,EAAC,wBAAwB,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,gCAE3F,IACF,CACL,CAAC;AACJ,CAAC"}

package/dist/head.d.ts

@@ -0,0 +1,27 @@
+export interface MilaHeadProps {
+    title?: string;
+}
+/**
+ * Every head-level requirement from
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5/§6.2 in
+ * one component, so no template can accidentally omit one. `charSet` is
+ * written using React's own special camelCase prop (NOT a literal
+ * `charset`-keyed spread) deliberately: confirmed empirically (rendering
+ * this component against the actual installed `react-email@6.7.0` /
+ * `react@19.2.7`) that React 19's real server renderer treats `<meta
+ * charSet>` and `<meta name="viewport">` as special "Hoistable" resources
+ * and unconditionally moves them to the very front of `<head>` -- ahead of
+ * every other child, and ahead of react-email's own `<Head>` wrapper's
+ * unconditionally-injected `Content-Type`/`x-apple-disable-message-
+ * reformatting` metas -- which is exactly the "first 1024 bytes" placement
+ * this component needs. Writing `charSet` as a plain string-keyed attribute
+ * instead renders correctly cosmetically (lowercase `charset=`) but silently
+ * opts OUT of that hoisting, since React's special-case only keys off the
+ * literal `charSet` prop name, which would push it several tags later in the
+ * document -- functionally worse despite looking more "correct" as source.
+ * The resulting HTML attribute name is emitted as `charSet` (capital S) --
+ * not a bug: HTML attribute names are case-insensitive to every conforming
+ * parser (including every mail client's), so `charSet="utf-8"` and
+ * `charset="utf-8"` are identical once parsed.
+ */
+export declare function MilaHead({ title }: MilaHeadProps): import("react").JSX.Element;

package/dist/head.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Head } from 'react-email';
+import { colors } from './tokens.js';
+const DARK_MODE_CSS = `
+    :root { color-scheme: light dark; supported-color-schemes: light dark; }
+    @media (prefers-color-scheme: dark) {
+      .mila-bg { background-color: ${colors.backgroundDark} !important; }
+      .mila-surface { background-color: ${colors.surfaceDark} !important; }
+      .mila-text { color: ${colors.textDark} !important; }
+      .mila-text-muted { color: ${colors.textMutedDark} !important; }
+      .mila-border { border-color: ${colors.borderDark} !important; }
+      .mila-accent-bg { background-color: ${colors.accentDark} !important; }
+    }
+  `;
+/**
+ * The Outlook DPI-correction block MUST be a raw `<!--[if mso]>...` HTML
+ * comment directly inside <head> -- JSX has no way to emit a literal,
+ * unescaped HTML comment as a sibling node (`{/* ... *\/}` is a JS comment,
+ * stripped entirely, not rendered). The pragmatic, widely-used technique
+ * (matching how react-email's own Button/Preview components inject raw
+ * MSO-only markup internally, confirmed directly from their source) is
+ * `dangerouslySetInnerHTML` on a wrapper -- email-rendering HTML parsers
+ * (Outlook's Word engine, every webmail sanitizer) are exceptionally
+ * lenient about non-standard head content, and this exact div-wrapped
+ * pattern is what real bulletproof-email templates use in production.
+ */
+function MsoOfficeDocumentSettings() {
+    return (_jsx("div", { dangerouslySetInnerHTML: {
+            __html: '<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->',
+        } }));
+}
+/**
+ * Every head-level requirement from
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5/§6.2 in
+ * one component, so no template can accidentally omit one. `charSet` is
+ * written using React's own special camelCase prop (NOT a literal
+ * `charset`-keyed spread) deliberately: confirmed empirically (rendering
+ * this component against the actual installed `react-email@6.7.0` /
+ * `react@19.2.7`) that React 19's real server renderer treats `<meta
+ * charSet>` and `<meta name="viewport">` as special "Hoistable" resources
+ * and unconditionally moves them to the very front of `<head>` -- ahead of
+ * every other child, and ahead of react-email's own `<Head>` wrapper's
+ * unconditionally-injected `Content-Type`/`x-apple-disable-message-
+ * reformatting` metas -- which is exactly the "first 1024 bytes" placement
+ * this component needs. Writing `charSet` as a plain string-keyed attribute
+ * instead renders correctly cosmetically (lowercase `charset=`) but silently
+ * opts OUT of that hoisting, since React's special-case only keys off the
+ * literal `charSet` prop name, which would push it several tags later in the
+ * document -- functionally worse despite looking more "correct" as source.
+ * The resulting HTML attribute name is emitted as `charSet` (capital S) --
+ * not a bug: HTML attribute names are case-insensitive to every conforming
+ * parser (including every mail client's), so `charSet="utf-8"` and
+ * `charset="utf-8"` are identical once parsed.
+ */
+export function MilaHead({ title }) {
+    return (_jsxs(Head, { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1, user-scalable=yes" }), _jsx("meta", { name: "format-detection", content: "telephone=no, date=no, address=no, email=no, url=no" }), _jsx("meta", { name: "x-apple-disable-message-reformatting", content: "" }), _jsx("meta", { name: "color-scheme", content: "light dark" }), _jsx("meta", { name: "supported-color-schemes", content: "light dark" }), title ? _jsx("title", { children: title }) : null, _jsx(MsoOfficeDocumentSettings, {}), _jsx("style", { dangerouslySetInnerHTML: { __html: DARK_MODE_CSS } })] }));
+}
+//# sourceMappingURL=head.js.map

package/dist/head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.js","sourceRoot":"","sources":["../src/head.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,aAAa,GAAG;;;qCAGe,MAAM,CAAC,cAAc;0CAChB,MAAM,CAAC,WAAW;4BAChC,MAAM,CAAC,QAAQ;kCACT,MAAM,CAAC,aAAa;qCACjB,MAAM,CAAC,UAAU;4CACV,MAAM,CAAC,UAAU;;GAE1D,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,SAAS,yBAAyB;IAChC,OAAO,CACL,cACE,uBAAuB,EAAE;YACvB,MAAM,EACJ,qJAAqJ;SACxJ,GACD,CACH,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAiB;IAC/C,OAAO,CACL,MAAC,IAAI,eACH,eAAM,OAAO,EAAC,OAAO,GAAG,EACxB,eAAM,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAC,SAAS,GAAG,EACtD,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,wDAAwD,GAAG,EACzF,eAAM,IAAI,EAAC,kBAAkB,EAAC,OAAO,EAAC,qDAAqD,GAAG,EAC9F,eAAM,IAAI,EAAC,sCAAsC,EAAC,OAAO,EAAC,EAAE,GAAG,EAC/D,eAAM,IAAI,EAAC,cAAc,EAAC,OAAO,EAAC,YAAY,GAAG,EACjD,eAAM,IAAI,EAAC,yBAAyB,EAAC,OAAO,EAAC,YAAY,GAAG,EAC3D,KAAK,CAAC,CAAC,CAAC,0BAAQ,KAAK,GAAS,CAAC,CAAC,CAAC,IAAI,EACtC,KAAC,yBAAyB,KAAG,EAC7B,gBAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAAI,IACxD,CACR,CAAC;AACJ,CAAC"}

package/dist/html.d.ts

@@ -0,0 +1,32 @@
+import type * as React from 'react';
+/** The two locales mila's email templates support. Deliberately NOT
+ * imported from `@mila/shared`'s own `AppLocale` type: `@vennyx/mila-react-template`
+ * is a PUBLISHED npm package, `@mila/shared` is `"private": true` and never
+ * published -- a public package's emitted `.d.ts` referencing an
+ * unpublished workspace type would break for any external installer. This
+ * is intentionally a small, self-contained duplicate. */
+export type MilaLocale = 'tr' | 'en';
+export interface MilaHtmlProps {
+    locale: MilaLocale;
+    children: React.ReactNode;
+}
+/**
+ * Wraps react-email's own `Html` and sets every `lang` signal research
+ * confirmed is independently load-bearing: `lang` (universal), a literal
+ * `xml:lang` (Outlook Desktop is documented to prioritize this namespaced
+ * form), and MilaBody below duplicates `lang` again on `<body>` since
+ * Yahoo/AOL are documented to strip the `<html>` element itself in some
+ * render paths, taking `lang` with it. `dir="ltr"` is hardcoded: mila has
+ * no RTL-language templates.
+ *
+ * React recognizes `xmlLang` as a special-cased camelCase prop that
+ * serializes to the literal `xml:lang` HTML attribute with no console
+ * warning — this is the correct, idiomatic way to set it.
+ */
+export declare function MilaHtml({ locale, children }: MilaHtmlProps): React.JSX.Element;
+export interface MilaBodyProps {
+    locale: MilaLocale;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+export declare function MilaBody({ locale, style, children }: MilaBodyProps): React.JSX.Element;

package/dist/html.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body, Html } from 'react-email';
+import { colors } from './tokens.js';
+/**
+ * Wraps react-email's own `Html` and sets every `lang` signal research
+ * confirmed is independently load-bearing: `lang` (universal), a literal
+ * `xml:lang` (Outlook Desktop is documented to prioritize this namespaced
+ * form), and MilaBody below duplicates `lang` again on `<body>` since
+ * Yahoo/AOL are documented to strip the `<html>` element itself in some
+ * render paths, taking `lang` with it. `dir="ltr"` is hardcoded: mila has
+ * no RTL-language templates.
+ *
+ * React recognizes `xmlLang` as a special-cased camelCase prop that
+ * serializes to the literal `xml:lang` HTML attribute with no console
+ * warning — this is the correct, idiomatic way to set it.
+ */
+export function MilaHtml({ locale, children }) {
+    return (_jsx(Html, { lang: locale, dir: "ltr", ...{ xmlLang: locale }, children: children }));
+}
+export function MilaBody({ locale, style, children }) {
+    return (_jsx(Body, { lang: locale, className: "mila-bg mila-text", style: {
+            margin: 0,
+            padding: 0,
+            backgroundColor: colors.background,
+            color: colors.text,
+            ...style,
+        }, children: children }));
+}
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../src/html.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAerC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAiB;IAC1D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAC,KAAK,KAAM,EAAE,OAAO,EAAE,MAAM,EAAU,YAC3D,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAiB;IACjE,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAE,MAAM,EACZ,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,CAAC;YACV,eAAe,EAAE,MAAM,CAAC,UAAU;YAClC,KAAK,EAAE,MAAM,CAAC,IAAI;YAClB,GAAG,KAAK;SACT,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './tokens.js';
+export * from './html.js';
+export * from './head.js';
+export * from './logo.js';
+export * from './layout.js';
+export * from './button.js';
+export * from './divider.js';
+export * from './otp-code.js';
+export * from './footer.js';
+export * from './render.js';
+export * from './lint.js';

package/dist/index.js

@@ -0,0 +1,12 @@
+export * from './tokens.js';
+export * from './html.js';
+export * from './head.js';
+export * from './logo.js';
+export * from './layout.js';
+export * from './button.js';
+export * from './divider.js';
+export * from './otp-code.js';
+export * from './footer.js';
+export * from './render.js';
+export * from './lint.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC"}

package/dist/layout.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import { type MilaLocale } from './html.js';
+export interface MilaEmailLayoutProps {
+    locale: MilaLocale;
+    /** The inbox-list preview snippet (subject-adjacent text). Kept under
+     * ~150 chars by convention (client-specific budgets vary and are
+     * unreliable, see the research doc's §8) -- the Preview component pads
+     * the rest with invisible characters automatically. */
+    previewText: string;
+    /** Optional <title> -- most clients ignore it, included for completeness. */
+    title?: string;
+    children: React.ReactNode;
+}
+/**
+ * The hybrid ("spongy") responsive skeleton every template renders exactly
+ * once. Outlook Desktop (Word engine) ignores CSS max-width entirely, so it
+ * gets a real, separate, fixed-600px HTML table via `<!--[if mso]>`; every
+ * other client renders a fluid `width="100%" style="max-width:600px"`
+ * table that shrinks on small screens. See
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 and the
+ * research doc's §4 for the exact pattern this mirrors.
+ */
+export declare function MilaEmailLayout({ locale, previewText, title, children }: MilaEmailLayoutProps): React.JSX.Element;

package/dist/layout.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Preview } from 'react-email';
+import { MilaBody, MilaHtml } from './html.js';
+import { MilaHead } from './head.js';
+import { MilaLogo } from './logo.js';
+import { MilaFooter } from './footer.js';
+import { containerWidth, spacing } from './tokens.js';
+/**
+ * The hybrid ("spongy") responsive skeleton every template renders exactly
+ * once. Outlook Desktop (Word engine) ignores CSS max-width entirely, so it
+ * gets a real, separate, fixed-600px HTML table via `<!--[if mso]>`; every
+ * other client renders a fluid `width="100%" style="max-width:600px"`
+ * table that shrinks on small screens. See
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 and the
+ * research doc's §4 for the exact pattern this mirrors.
+ */
+export function MilaEmailLayout({ locale, previewText, title, children }) {
+    return (_jsxs(MilaHtml, { locale: locale, children: [_jsx(MilaHead, { title: title }), _jsx(Preview, { children: previewText }), _jsxs(MilaBody, { locale: locale, children: [_jsx("div", { dangerouslySetInnerHTML: {
+                            __html: `<!--[if mso]>
+<table align="center" border="0" cellspacing="0" cellpadding="0" width="${containerWidth}">
+<tr>
+<td align="center" valign="top" width="${containerWidth}">
+<![endif]-->`,
+                        } }), _jsx(Container, { style: { maxWidth: containerWidth, width: '100%', padding: `${spacing.md}px ${spacing.sm}px` }, children: _jsx("table", { role: "presentation", width: "100%", border: 0, cellPadding: "0", cellSpacing: "0", children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { style: { paddingBottom: spacing.md }, children: _jsx(MilaLogo, { href: "https://mila.cx", alt: "mila anasayfa / homepage" }) }) }), _jsx("tr", { children: _jsx("td", { children: children }) }), _jsx("tr", { children: _jsx("td", { children: _jsx(MilaFooter, {}) }) })] }) }) }), _jsx("div", { dangerouslySetInnerHTML: { __html: `<!--[if mso]>\n</td>\n</tr>\n</table>\n<![endif]-->` } })] })] }));
+}
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AActD;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAwB;IAC5F,OAAO,CACL,MAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,aACtB,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,EAC1B,KAAC,OAAO,cAAE,WAAW,GAAW,EAChC,MAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,aACtB,cACE,uBAAuB,EAAE;4BACvB,MAAM,EAAE;0EACsD,cAAc;;yCAE/C,cAAc;aAC1C;yBACF,GACD,EACF,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,YACvG,gBAAO,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,YAChF,4BACE,uBACE,aAAI,KAAK,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,EAAE,YACtC,KAAC,QAAQ,IAAC,IAAI,EAAC,iBAAiB,EAAC,GAAG,EAAC,0BAA0B,GAAG,GAC/D,GACF,EACL,uBACE,uBAAK,QAAQ,GAAM,GAChB,EACL,uBACE,uBACE,KAAC,UAAU,KAAG,GACX,GACF,IACC,GACF,GACE,EACZ,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,qDAAqD,EAAE,GAAI,IAC1F,IACF,CACZ,CAAC;AACJ,CAAC"}

package/dist/lint.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A small, self-contained static-assertion suite against a template's
+ * final rendered HTML string -- NOT a full caniemail-backed compatibility
+ * linter (react-email's own approach, per research pass 3): proportionate
+ * to mila's six-template internal library rather than a general-purpose
+ * multi-client tool. Checks every hard rule from
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5/§10.
+ * Returns an array of human-readable violation strings; an empty array
+ * means the template is compliant.
+ */
+export declare function assertMilaEmailCompliant(html: string): string[];

package/dist/lint.js

@@ -0,0 +1,58 @@
+const SIZE_CEILING_BYTES = 40_000;
+/**
+ * A small, self-contained static-assertion suite against a template's
+ * final rendered HTML string -- NOT a full caniemail-backed compatibility
+ * linter (react-email's own approach, per research pass 3): proportionate
+ * to mila's six-template internal library rather than a general-purpose
+ * multi-client tool. Checks every hard rule from
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5/§10.
+ * Returns an array of human-readable violation strings; an empty array
+ * means the template is compliant.
+ */
+export function assertMilaEmailCompliant(html) {
+    const violations = [];
+    const headMatch = html.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
+    const headContent = headMatch?.[1] ?? '';
+    const first200OfHead = headContent.slice(0, 200);
+    if (!/charset="utf-8"/i.test(first200OfHead)) {
+        violations.push('Missing <meta charset="utf-8"> as an early child of <head> (must be within the first ~1024 bytes).');
+    }
+    if (!/name="color-scheme"/i.test(headContent)) {
+        violations.push('Missing <meta name="color-scheme" content="light dark">.');
+    }
+    if (!/name="supported-color-schemes"/i.test(headContent)) {
+        violations.push('Missing <meta name="supported-color-schemes" content="light dark">.');
+    }
+    const htmlTagMatch = html.match(/<html\b[^>]*>/i);
+    const htmlOpenTag = htmlTagMatch?.[0] ?? '';
+    if (!/(?:^|\s)lang="[a-z]{2}"/i.test(htmlOpenTag)) {
+        violations.push('Missing lang="<locale>" on the <html> element.');
+    }
+    if (!/xml:lang="[a-z]{2}"/i.test(htmlOpenTag)) {
+        violations.push('Missing xml:lang="<locale>" on the <html> element.');
+    }
+    const imgTags = html.match(/<img\b[^>]*>/gi) ?? [];
+    for (const img of imgTags) {
+        if (!/\balt="/.test(img)) {
+            violations.push(`<img> missing an alt attribute: ${img.slice(0, 80)}`);
+        }
+        if (/\bsrc="data:/.test(img)) {
+            violations.push(`<img> uses a base64 data: URI (never allowed -- always externally-hosted): ${img.slice(0, 80)}`);
+        }
+    }
+    const presentationTables = html.match(/<table\b[^>]*role="presentation"[^>]*>/gi) ?? [];
+    for (const table of presentationTables) {
+        const hasBorder = /\bborder="0"/i.test(table);
+        const hasCellPadding = /\bcellpadding="0"/i.test(table);
+        const hasCellSpacing = /\bcellspacing="0"/i.test(table);
+        if (!hasBorder || !hasCellPadding || !hasCellSpacing) {
+            violations.push(`<table role="presentation"> missing a legacy border="0"/cellpadding="0"/cellspacing="0" attribute: ${table.slice(0, 100)}`);
+        }
+    }
+    const byteSize = Buffer.byteLength(html, 'utf8');
+    if (byteSize > SIZE_CEILING_BYTES) {
+        violations.push(`Rendered HTML is ${byteSize} bytes, exceeding the 40KB (${SIZE_CEILING_BYTES} byte) size ceiling.`);
+    }
+    return violations;
+}
+//# sourceMappingURL=lint.js.map

package/dist/lint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lint.js","sourceRoot":"","sources":["../src/lint.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAElC;;;;;;;;;GASG;AACH,MAAM,UAAU,wBAAwB,CAAC,IAAY;IACnD,MAAM,UAAU,GAAa,EAAE,CAAC;IAEhC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACzC,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;QAC7C,UAAU,CAAC,IAAI,CAAC,oGAAoG,CAAC,CAAC;IACxH,CAAC;IAED,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QAC9C,UAAU,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IACD,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACzD,UAAU,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACzF,CAAC;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC5C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QAClD,UAAU,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IACD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QAC9C,UAAU,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;IACnD,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACzB,UAAU,CAAC,IAAI,CAAC,mCAAmC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;QACzE,CAAC;QACD,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YAC7B,UAAU,CAAC,IAAI,CAAC,8EAA8E,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,0CAA0C,CAAC,IAAI,EAAE,CAAC;IACxF,KAAK,MAAM,KAAK,IAAI,kBAAkB,EAAE,CAAC;QACvC,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,MAAM,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,CAAC,cAAc,EAAE,CAAC;YACrD,UAAU,CAAC,IAAI,CAAC,sGAAsG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QAC/I,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACjD,IAAI,QAAQ,GAAG,kBAAkB,EAAE,CAAC;QAClC,UAAU,CAAC,IAAI,CAAC,oBAAoB,QAAQ,+BAA+B,kBAAkB,sBAAsB,CAAC,CAAC;IACvH,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/dist/logo.d.ts

@@ -0,0 +1,27 @@
+export interface MilaLogoProps {
+    /** Wraps the mark in a link when provided (e.g. the site homepage). */
+    href?: string;
+    /** Descriptive alt text. Defaults to "mila" -- override with a fuller
+     * destination description (e.g. "mila homepage") when `href` is set,
+     * since a linked image needs to describe its destination/action for
+     * screen-reader users, not just be decorative (never alt=""). */
+    alt?: string;
+}
+/**
+ * mila's email header mark: the dove icon (a single retina PNG asset --
+ * see scripts/generate-email-logo.mjs; inline SVG is unreliable in email,
+ * see this file's own git history/plan) plus the real "mila" wordmark as
+ * live HTML text (Inter 600, -0.03em letter-spacing, matching the site's
+ * own MilaLogo component's wordmark treatment) -- never baked into the
+ * image, both for accessibility (screen readers, research §11) and so it
+ * stays crisp/never blurry regardless of zoom level.
+ *
+ * Sits on an explicit near-white background plate (`colors.background`,
+ * #FEFEFE) rather than shipping a second dark-mode-colored logo variant --
+ * the mark's own violet gradient has enough contrast against both a light
+ * and a dark surface on its own; guaranteeing the PLATE's color (rather
+ * than the mark's colors) is the more robust of the two dark-mode-logo
+ * techniques research identified, and avoids inventing new brand artwork
+ * outside this plan's engineering scope.
+ */
+export declare function MilaLogo({ href, alt }: MilaLogoProps): import("react").JSX.Element;

package/dist/logo.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Img, Link, Section } from 'react-email';
+import { colors, fontStack } from './tokens.js';
+const LOGO_URL = 'https://mila.cx/brand/email/mila-dove-email@2x.png';
+/**
+ * mila's email header mark: the dove icon (a single retina PNG asset --
+ * see scripts/generate-email-logo.mjs; inline SVG is unreliable in email,
+ * see this file's own git history/plan) plus the real "mila" wordmark as
+ * live HTML text (Inter 600, -0.03em letter-spacing, matching the site's
+ * own MilaLogo component's wordmark treatment) -- never baked into the
+ * image, both for accessibility (screen readers, research §11) and so it
+ * stays crisp/never blurry regardless of zoom level.
+ *
+ * Sits on an explicit near-white background plate (`colors.background`,
+ * #FEFEFE) rather than shipping a second dark-mode-colored logo variant --
+ * the mark's own violet gradient has enough contrast against both a light
+ * and a dark surface on its own; guaranteeing the PLATE's color (rather
+ * than the mark's colors) is the more robust of the two dark-mode-logo
+ * techniques research identified, and avoids inventing new brand artwork
+ * outside this plan's engineering scope.
+ */
+export function MilaLogo({ href, alt = 'mila' }) {
+    const mark = (_jsx(Section, { style: { backgroundColor: colors.background }, children: _jsx("table", { role: "presentation", border: 0, cellPadding: "0", cellSpacing: "0", align: "left", children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { style: { paddingRight: 8, verticalAlign: 'middle' }, children: _jsx(Img, { src: LOGO_URL, width: 32, height: 32, alt: alt, style: { display: 'block', border: '0', outline: 'none', textDecoration: 'none' } }) }), _jsx("td", { style: { verticalAlign: 'middle' }, children: _jsx("span", { style: {
+                                    fontFamily: fontStack.heading,
+                                    fontWeight: 600,
+                                    fontSize: 20,
+                                    letterSpacing: '-0.03em',
+                                    color: colors.text,
+                                }, children: "mila" }) })] }) }) }) }));
+    if (!href)
+        return mark;
+    return (_jsx(Link, { href: href, style: { textDecoration: 'none' }, children: mark }));
+}
+//# sourceMappingURL=logo.js.map

package/dist/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../src/logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYhD,MAAM,QAAQ,GAAG,oDAAoD,CAAC;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,GAAG,MAAM,EAAiB;IAC5D,MAAM,IAAI,GAAG,CAKX,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,YACpD,gBAAO,IAAI,EAAC,cAAc,EAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,KAAK,EAAC,MAAM,YAChF,0BACE,yBACE,aAAI,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,YACrD,KAAC,GAAG,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,GAAI,GACvI,EACL,aAAI,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,YACpC,eACE,KAAK,EAAE;oCACL,UAAU,EAAE,SAAS,CAAC,OAAO;oCAC7B,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;oCACZ,aAAa,EAAE,SAAS;oCACxB,KAAK,EAAE,MAAM,CAAC,IAAI;iCACnB,qBAGI,GACJ,IACF,GACC,GACF,GACA,CACX,CAAC;IAEF,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,YAChD,IAAI,GACA,CACR,CAAC;AACJ,CAAC"}

package/dist/otp-code.d.ts

@@ -0,0 +1,13 @@
+export interface MilaOtpCodeProps {
+    code: string;
+}
+/**
+ * A monospace, letter-spaced code/OTP display block for invitation and
+ * verification flows. Uses the same web-safe monospace stack fallback
+ * discipline as every other text element (Outlook Desktop falls back to
+ * Times New Roman -- monospace, unlike sans-serif body text, doesn't have
+ * an equally universal fallback story, but `ui-monospace` (Apple/Chrome's
+ * own system-mono keyword) -> SFMono-Regular -> Menlo -> Consolas ->
+ * generic monospace covers every realistic client).
+ */
+export declare function MilaOtpCode({ code }: MilaOtpCodeProps): import("react").JSX.Element;

package/dist/otp-code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Section } from 'react-email';
+import { colors, fontStack } from './tokens.js';
+/**
+ * A monospace, letter-spaced code/OTP display block for invitation and
+ * verification flows. Uses the same web-safe monospace stack fallback
+ * discipline as every other text element (Outlook Desktop falls back to
+ * Times New Roman -- monospace, unlike sans-serif body text, doesn't have
+ * an equally universal fallback story, but `ui-monospace` (Apple/Chrome's
+ * own system-mono keyword) -> SFMono-Regular -> Menlo -> Consolas ->
+ * generic monospace covers every realistic client).
+ */
+export function MilaOtpCode({ code }) {
+    return (_jsx(Section, { style: {
+            backgroundColor: colors.surface,
+            borderRadius: 8,
+            padding: '20px 24px',
+            textAlign: 'center',
+        }, children: _jsx("span", { className: "mila-text", style: {
+                fontFamily: fontStack.mono,
+                fontSize: 28,
+                fontWeight: 600,
+                letterSpacing: '0.3em',
+                color: colors.text,
+            }, children: code }) }));
+}
+//# sourceMappingURL=otp-code.js.map

package/dist/otp-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-code.js","sourceRoot":"","sources":["../src/otp-code.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAoB;IACpD,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE;YACL,eAAe,EAAE,MAAM,CAAC,OAAO;YAC/B,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,QAAQ;SACpB,YAED,eACE,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE;gBACL,UAAU,EAAE,SAAS,CAAC,IAAI;gBAC1B,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,GAAG;gBACf,aAAa,EAAE,OAAO;gBACtB,KAAK,EAAE,MAAM,CAAC,IAAI;aACnB,YAEA,IAAI,GACA,GACC,CACX,CAAC;AACJ,CAAC"}

package/dist/render.d.ts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+/**
+ * Thin wrapper over react-email's own `render()`/`toPlainText()` -- both
+ * verified directly from react-email@6.7.0's real published types/source
+ * (packages/render's `render(node, options?): Promise<string>` and
+ * `toPlainText(html, options?): string`, the latter itself wrapping
+ * `html-to-text` internally). No separate `html-to-text` dependency is
+ * declared in this package's own package.json: react-email already pulls
+ * it in transitively and re-exports the wrapper function, so depending on
+ * it again directly would just be duplicate version-pinning for no
+ * benefit.
+ *
+ * `hideLinkHrefIfSameAsText` and `img: {format: 'skip'}` match
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 rule 14
+ * / §6.5 exactly. `wordwrap: 78` is RFC 5322's own recommended soft-wrap
+ * width.
+ */
+export declare function renderMilaEmail(element: React.ReactElement): Promise<{
+    html: string;
+    text: string;
+}>;

package/dist/render.js

@@ -0,0 +1,29 @@
+import { render, toPlainText } from 'react-email';
+/**
+ * Thin wrapper over react-email's own `render()`/`toPlainText()` -- both
+ * verified directly from react-email@6.7.0's real published types/source
+ * (packages/render's `render(node, options?): Promise<string>` and
+ * `toPlainText(html, options?): string`, the latter itself wrapping
+ * `html-to-text` internally). No separate `html-to-text` dependency is
+ * declared in this package's own package.json: react-email already pulls
+ * it in transitively and re-exports the wrapper function, so depending on
+ * it again directly would just be duplicate version-pinning for no
+ * benefit.
+ *
+ * `hideLinkHrefIfSameAsText` and `img: {format: 'skip'}` match
+ * docs/superpowers/specs/2026-07-10-mila-email-engine-design.md §5 rule 14
+ * / §6.5 exactly. `wordwrap: 78` is RFC 5322's own recommended soft-wrap
+ * width.
+ */
+export async function renderMilaEmail(element) {
+    const html = await render(element);
+    const text = toPlainText(html, {
+        wordwrap: 78,
+        selectors: [
+            { selector: 'a', options: { hideLinkHrefIfSameAsText: true } },
+            { selector: 'img', format: 'skip' },
+        ],
+    });
+    return { html, text };
+}
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,OAA2B;IAC/D,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,EAAE;QAC7B,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE;YACT,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE;YAC9D,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;SACpC;KACF,CAAC,CAAC;IACH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AACxB,CAAC"}

package/dist/tokens.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Design tokens for mila's email templates. Colors are pulled directly from
+ * apps/site's/apps/panel's own Chakra `mila` color ramp
+ * (apps/site/src/lib/theme.ts) so email stays visually consistent with the
+ * rest of the product -- NOT re-derived or approximated.
+ *
+ * Near-pure (not pure) black/white values are deliberate: Apple Mail is
+ * reported (practitioner-observed, not Apple-documented) to auto-invert
+ * literal #000000/#FFFFFF more aggressively than off-black/off-white, and
+ * off-pure values also improve WCAG contrast headroom regardless of that
+ * behavior. See docs/superpowers/specs/2026-07-10-mila-email-engine-design.md
+ * §5 rule 9 and §8.
+ *
+ * The dark-mode neutrals (backgroundDark/surfaceDark/borderDark) are NOT
+ * pulled from Chakra's own default dark theme -- Chakra's runtime tokens
+ * don't exist at email-render time (email HTML can't load a CSS-in-JS
+ * runtime), so these are a deliberate, self-contained, email-only choice: a
+ * standard near-black dark surface (#121212, a widely-used dark-UI base),
+ * paired with mila.400 (the ramp's own next-lighter step from mila.600) as
+ * the dark-mode accent, since a saturated mila.600 is too dark to read
+ * clearly on a near-black background.
+ */
+export declare const colors: {
+    readonly accent: "#7c3aed";
+    readonly accentDark: "#a78bfa";
+    readonly text: "#0E0E0E";
+    readonly textMuted: "#5b5b66";
+    readonly textDark: "#FEFEFE";
+    readonly textMutedDark: "#a3a3ad";
+    readonly background: "#FEFEFE";
+    readonly backgroundDark: "#121212";
+    readonly surface: "#f5f3ff";
+    readonly surfaceDark: "#1f1a2e";
+    readonly border: "#ddd6fe";
+    readonly borderDark: "#3a3350";
+    readonly buttonText: "#FEFEFE";
+};
+/**
+ * Full web-safe fallback stack behind mila's Inter brand font. Order
+ * matters (docs/superpowers/specs/2026-07-10-mila-email-engine-design.md
+ * §5 rule 6): Inter first (only clients that load @font-face pick it up) ->
+ * -apple-system/BlinkMacSystemFont (San Francisco on Apple Mail/iOS) ->
+ * Segoe UI (effective Outlook Desktop/Windows rendering regardless of CSS)
+ * -> Roboto (Gmail's effective default) -> Helvetica/Arial/sans-serif
+ * (universal safety net -- guarantees no serif fallback anywhere, since
+ * Outlook Desktop falls back all the way to Times New Roman if the whole
+ * stack were ever ignored).
+ */
+export declare const fontStack: {
+    readonly heading: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+    readonly body: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+};
+export declare const spacing: {
+    readonly xs: 8;
+    readonly sm: 16;
+    readonly md: 24;
+    readonly lg: 32;
+    readonly xl: 48;
+};
+/** Matches react-email's own `Container` default (`maxWidth: '37.5em'` ==
+ * 600px at a 16px base) -- used by MilaEmailLayout's hybrid Outlook table. */
+export declare const containerWidth = 600;

package/dist/tokens.js

@@ -0,0 +1,64 @@
+/**
+ * Design tokens for mila's email templates. Colors are pulled directly from
+ * apps/site's/apps/panel's own Chakra `mila` color ramp
+ * (apps/site/src/lib/theme.ts) so email stays visually consistent with the
+ * rest of the product -- NOT re-derived or approximated.
+ *
+ * Near-pure (not pure) black/white values are deliberate: Apple Mail is
+ * reported (practitioner-observed, not Apple-documented) to auto-invert
+ * literal #000000/#FFFFFF more aggressively than off-black/off-white, and
+ * off-pure values also improve WCAG contrast headroom regardless of that
+ * behavior. See docs/superpowers/specs/2026-07-10-mila-email-engine-design.md
+ * §5 rule 9 and §8.
+ *
+ * The dark-mode neutrals (backgroundDark/surfaceDark/borderDark) are NOT
+ * pulled from Chakra's own default dark theme -- Chakra's runtime tokens
+ * don't exist at email-render time (email HTML can't load a CSS-in-JS
+ * runtime), so these are a deliberate, self-contained, email-only choice: a
+ * standard near-black dark surface (#121212, a widely-used dark-UI base),
+ * paired with mila.400 (the ramp's own next-lighter step from mila.600) as
+ * the dark-mode accent, since a saturated mila.600 is too dark to read
+ * clearly on a near-black background.
+ */
+export const colors = {
+    accent: '#7c3aed', // mila.600
+    accentDark: '#a78bfa', // mila.400
+    text: '#0E0E0E',
+    textMuted: '#5b5b66',
+    textDark: '#FEFEFE',
+    textMutedDark: '#a3a3ad',
+    background: '#FEFEFE',
+    backgroundDark: '#121212',
+    surface: '#f5f3ff', // mila.50
+    surfaceDark: '#1f1a2e',
+    border: '#ddd6fe', // mila.200
+    borderDark: '#3a3350',
+    buttonText: '#FEFEFE',
+};
+/**
+ * Full web-safe fallback stack behind mila's Inter brand font. Order
+ * matters (docs/superpowers/specs/2026-07-10-mila-email-engine-design.md
+ * §5 rule 6): Inter first (only clients that load @font-face pick it up) ->
+ * -apple-system/BlinkMacSystemFont (San Francisco on Apple Mail/iOS) ->
+ * Segoe UI (effective Outlook Desktop/Windows rendering regardless of CSS)
+ * -> Roboto (Gmail's effective default) -> Helvetica/Arial/sans-serif
+ * (universal safety net -- guarantees no serif fallback anywhere, since
+ * Outlook Desktop falls back all the way to Times New Roman if the whole
+ * stack were ever ignored).
+ */
+export const fontStack = {
+    heading: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
+    body: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
+    mono: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`,
+};
+export const spacing = {
+    xs: 8,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+};
+/** Matches react-email's own `Container` default (`maxWidth: '37.5em'` ==
+ * 600px at a 16px base) -- used by MilaEmailLayout's hybrid Outlook table. */
+export const containerWidth = 600;
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,SAAS,EAAE,WAAW;IAC9B,UAAU,EAAE,SAAS,EAAE,WAAW;IAClC,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,aAAa,EAAE,SAAS;IACxB,UAAU,EAAE,SAAS;IACrB,cAAc,EAAE,SAAS;IACzB,OAAO,EAAE,SAAS,EAAE,UAAU;IAC9B,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS,EAAE,WAAW;IAC9B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;CACb,CAAC;AAEX;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,8FAA8F;IACvG,IAAI,EAAE,8FAA8F;IACpG,IAAI,EAAE,0DAA0D;CACxD,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACE,CAAC;AAEX;8EAC8E;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vennyx/mila-react-template",
+  "version": "0.1.0",
+  "description": "Official React email component library for mila -- bulletproof, bilingual, brand-aware transactional email templates, built on react-email.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "test": "vitest run",
+    "generate:logo": "node scripts/generate-email-logo.mjs"
+  },
+  "dependencies": {
+    "react-email": "6.7.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "26.1.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "sharp": "0.34.5",
+    "typescript": "6.0.3",
+    "vitest": "4.1.9"
+  }
+}