@matthesketh/utopia-email 0.0.5 → 0.2.0

package/dist/adapters/resend.cjs

@@ -37,16 +37,16 @@ function resendAdapter(config) {
   let client = null;
   async function getClient() {
     if (client) return client;
-    let Resend;
+    let ResendCtor;
     try {
       const mod = await import("resend");
-      Resend = mod.Resend ?? mod.default;
+      ResendCtor = mod.Resend ?? mod.default;
     } catch {
       throw new Error(
         '@matthesketh/utopia-email: "resend" package is required for the Resend adapter. Install it with: npm install resend'
       );
     }
-    client = new Resend(config.apiKey);
+    client = new ResendCtor(config.apiKey);
     return client;
   }
   return {
@@ -76,7 +76,7 @@ function resendAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/adapters/resend.d.cts

@@ -1,4 +1,5 @@
-import { e as ResendConfig, E as EmailAdapter } from '../types-C3uNsSmw.cjs';
+import { f as ResendConfig, E as EmailAdapter } from '../types-DJzgvyvE.cjs';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Create a Resend email adapter.

package/dist/adapters/resend.d.ts

@@ -1,4 +1,5 @@
-import { e as ResendConfig, E as EmailAdapter } from '../types-C3uNsSmw.js';
+import { f as ResendConfig, E as EmailAdapter } from '../types-DJzgvyvE.js';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Create a Resend email adapter.

package/dist/adapters/resend.js

@@ -3,16 +3,16 @@ function resendAdapter(config) {
   let client = null;
   async function getClient() {
     if (client) return client;
-    let Resend;
+    let ResendCtor;
     try {
       const mod = await import("resend");
-      Resend = mod.Resend ?? mod.default;
+      ResendCtor = mod.Resend ?? mod.default;
     } catch {
       throw new Error(
         '@matthesketh/utopia-email: "resend" package is required for the Resend adapter. Install it with: npm install resend'
       );
     }
-    client = new Resend(config.apiKey);
+    client = new ResendCtor(config.apiKey);
     return client;
   }
   return {
@@ -42,7 +42,7 @@ function resendAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/adapters/sendgrid.cjs

@@ -89,7 +89,7 @@ function sendgridAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/adapters/sendgrid.d.cts

@@ -1,10 +1,6 @@
-import { S as SendGridConfig, E as EmailAdapter } from '../types-C3uNsSmw.cjs';
+import { S as SendGridConfig, E as EmailAdapter } from '../types-DJzgvyvE.cjs';
+import '@matthesketh/utopia-server/ssr-runtime';
 
-/**
- * Create a SendGrid email adapter.
- *
- * Requires `@sendgrid/mail` as a peer dependency.
- */
 declare function sendgridAdapter(config: SendGridConfig): EmailAdapter;
 
 export { sendgridAdapter };

package/dist/adapters/sendgrid.d.ts

@@ -1,10 +1,6 @@
-import { S as SendGridConfig, E as EmailAdapter } from '../types-C3uNsSmw.js';
+import { S as SendGridConfig, E as EmailAdapter } from '../types-DJzgvyvE.js';
+import '@matthesketh/utopia-server/ssr-runtime';
 
-/**
- * Create a SendGrid email adapter.
- *
- * Requires `@sendgrid/mail` as a peer dependency.
- */
 declare function sendgridAdapter(config: SendGridConfig): EmailAdapter;
 
 export { sendgridAdapter };

package/dist/adapters/sendgrid.js

@@ -55,7 +55,7 @@ function sendgridAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/adapters/smtp.cjs

@@ -81,7 +81,7 @@ function smtpAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/adapters/smtp.d.cts

@@ -1,4 +1,5 @@
-import { f as SmtpConfig, E as EmailAdapter } from '../types-C3uNsSmw.cjs';
+import { g as SmtpConfig, E as EmailAdapter } from '../types-DJzgvyvE.cjs';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Create an SMTP email adapter using nodemailer.

package/dist/adapters/smtp.d.ts

@@ -1,4 +1,5 @@
-import { f as SmtpConfig, E as EmailAdapter } from '../types-C3uNsSmw.js';
+import { g as SmtpConfig, E as EmailAdapter } from '../types-DJzgvyvE.js';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Create an SMTP email adapter using nodemailer.

package/dist/adapters/smtp.js

@@ -47,7 +47,7 @@ function smtpAdapter(config) {
       } catch (err) {
         return {
           success: false,
-          error: err.message ?? String(err)
+          error: err instanceof Error ? err.message : String(err)
         };
       }
     }

package/dist/index.cjs

@@ -154,7 +154,13 @@ function selectorMatches(selector, element) {
   if (selector.includes(">")) {
     const parts2 = selector.split(/\s*>\s*/);
     const targetSelector2 = parts2[parts2.length - 1].trim();
-    if (!matchesSimpleSelector(targetSelector2, element.tag, element.classes, element.id, element.attrs)) {
+    if (!matchesSimpleSelector(
+      targetSelector2,
+      element.tag,
+      element.classes,
+      element.id,
+      element.attrs
+    )) {
       return false;
     }
     let ancestors = element.ancestors;
@@ -184,7 +190,13 @@ function selectorMatches(selector, element) {
     while (ancestorIdx >= 0) {
       const ancestor = element.ancestors[ancestorIdx];
       ancestorIdx--;
-      if (matchesSimpleSelector(ancestorSelector, ancestor.tag, ancestor.classes, ancestor.id, ancestor.attrs)) {
+      if (matchesSimpleSelector(
+        ancestorSelector,
+        ancestor.tag,
+        ancestor.classes,
+        ancestor.id,
+        ancestor.attrs
+      )) {
         found = true;
         break;
       }
@@ -323,10 +335,7 @@ function inlineCSS(html, css) {
     const originalTag = element.fullTag;
     let newTag;
     if (element.existingStyle) {
-      newTag = originalTag.replace(
-        /style="[^"]*"/,
-        `style="${mergedStyle}"`
-      );
+      newTag = originalTag.replace(/style="[^"]*"/, `style="${mergedStyle}"`);
     } else {
       const insertPos = originalTag.endsWith("/>") ? originalTag.length - 2 : originalTag.length - 1;
       newTag = originalTag.slice(0, insertPos) + ` style="${mergedStyle}"` + originalTag.slice(insertPos);
@@ -452,7 +461,10 @@ function renderEmail(component, props, options) {
     skipStyleBlock = false,
     headContent
   } = options ?? {};
-  const { html: bodyHtml, css } = (0, import_utopia_server.renderToString)(component, props);
+  const { html: bodyHtml, css } = (0, import_utopia_server.renderToString)(
+    component,
+    props
+  );
   const inlinedBody = skipInlining ? bodyHtml : inlineCSS(bodyHtml, css);
   const fullHtml = wrapEmailDocument({
     bodyHtml: inlinedBody,
@@ -473,18 +485,7 @@ function renderEmail(component, props, options) {
 function createMailer(adapter) {
   return {
     async send(options) {
-      const {
-        to,
-        from,
-        subject,
-        component,
-        props,
-        renderOptions,
-        cc,
-        bcc,
-        replyTo,
-        attachments
-      } = options;
+      const { to, from, subject, component, props, renderOptions, cc, bcc, replyTo, attachments } = options;
       const rendered = renderEmail(component, props, {
         ...renderOptions,
         subject
@@ -520,7 +521,11 @@ var EmailLayout = {
     (0, import_ssr_runtime.setAttr)(table, "cellspacing", "0");
     (0, import_ssr_runtime.setAttr)(table, "border", "0");
     (0, import_ssr_runtime.setAttr)(table, "width", String(ctx.width));
-    (0, import_ssr_runtime.setAttr)(table, "style", `max-width: ${ctx.width}px; width: 100%; margin: 0 auto; background-color: ${ctx.backgroundColor}; font-family: ${ctx.fontFamily}`);
+    (0, import_ssr_runtime.setAttr)(
+      table,
+      "style",
+      `max-width: ${ctx.width}px; width: 100%; margin: 0 auto; background-color: ${ctx.backgroundColor}; font-family: ${ctx.fontFamily}`
+    );
     const tr = (0, import_ssr_runtime.createElement)("tr");
     const td = (0, import_ssr_runtime.createElement)("td");
     (0, import_ssr_runtime.setAttr)(td, "style", "padding: 0");
@@ -552,11 +557,19 @@ var EmailButton = {
     const tr = (0, import_ssr_runtime2.createElement)("tr");
     const td = (0, import_ssr_runtime2.createElement)("td");
     (0, import_ssr_runtime2.setAttr)(td, "align", "center");
-    (0, import_ssr_runtime2.setAttr)(td, "style", `background-color: ${ctx.color}; border-radius: ${ctx.borderRadius}; padding: 12px 24px`);
+    (0, import_ssr_runtime2.setAttr)(
+      td,
+      "style",
+      `background-color: ${ctx.color}; border-radius: ${ctx.borderRadius}; padding: 12px 24px`
+    );
     const a = (0, import_ssr_runtime2.createElement)("a");
     (0, import_ssr_runtime2.setAttr)(a, "href", ctx.href);
-    (0, import_ssr_runtime2.setAttr)(a, "style", `color: ${ctx.textColor}; text-decoration: none; font-size: 16px; font-weight: bold; display: inline-block`);
-    (0, import_ssr_runtime2.appendChild)(a, (0, import_ssr_runtime2.createTextNode)(ctx.text));
+    (0, import_ssr_runtime2.setAttr)(
+      a,
+      "style",
+      `color: ${ctx.textColor}; text-decoration: none; font-size: 16px; font-weight: bold; display: inline-block`
+    );
+    (0, import_ssr_runtime2.appendChild)(a, (0, import_ssr_runtime2.createTextNode)(String(ctx.text)));
     (0, import_ssr_runtime2.appendChild)(td, a);
     (0, import_ssr_runtime2.appendChild)(tr, td);
     (0, import_ssr_runtime2.appendChild)(table, tr);
@@ -582,7 +595,11 @@ var EmailCard = {
     (0, import_ssr_runtime3.setAttr)(table, "width", "100%");
     const tr = (0, import_ssr_runtime3.createElement)("tr");
     const td = (0, import_ssr_runtime3.createElement)("td");
-    (0, import_ssr_runtime3.setAttr)(td, "style", `background-color: ${ctx.backgroundColor}; padding: ${ctx.padding}; border-radius: ${ctx.borderRadius}; border: 1px solid ${ctx.borderColor}`);
+    (0, import_ssr_runtime3.setAttr)(
+      td,
+      "style",
+      `background-color: ${ctx.backgroundColor}; padding: ${ctx.padding}; border-radius: ${ctx.borderRadius}; border: 1px solid ${ctx.borderColor}`
+    );
     if (ctx.$slots.default) {
       (0, import_ssr_runtime3.appendChild)(td, ctx.$slots.default());
     }
@@ -609,7 +626,11 @@ var EmailDivider = {
     (0, import_ssr_runtime4.setAttr)(table, "width", ctx.width);
     const tr = (0, import_ssr_runtime4.createElement)("tr");
     const td = (0, import_ssr_runtime4.createElement)("td");
-    (0, import_ssr_runtime4.setAttr)(td, "style", `border-bottom: ${ctx.height} solid ${ctx.color}; font-size: 1px; line-height: 1px; height: ${ctx.height}`);
+    (0, import_ssr_runtime4.setAttr)(
+      td,
+      "style",
+      `border-bottom: ${ctx.height} solid ${ctx.color}; font-size: 1px; line-height: 1px; height: ${ctx.height}`
+    );
     const nbsp = (0, import_ssr_runtime4.createElement)("span");
     (0, import_ssr_runtime4.setAttr)(nbsp, "style", "display: block; height: 0; overflow: hidden");
     (0, import_ssr_runtime4.appendChild)(td, nbsp);
@@ -628,7 +649,7 @@ var HEADING_SIZES = {
 };
 var EmailHeading = {
   setup: (props) => ({
-    level: Math.min(3, Math.max(1, props.level ?? 1)),
+    level: Math.min(3, Math.max(1, Number(props.level) || 1)),
     color: props.color ?? "#333333",
     align: props.align ?? "left"
   }),
@@ -636,7 +657,11 @@ var EmailHeading = {
     const tag = `h${ctx.level}`;
     const el = (0, import_ssr_runtime5.createElement)(tag);
     const fontSize = HEADING_SIZES[ctx.level] || "28px";
-    (0, import_ssr_runtime5.setAttr)(el, "style", `margin: 0 0 10px 0; font-size: ${fontSize}; line-height: 1.3; color: ${ctx.color}; text-align: ${ctx.align}`);
+    (0, import_ssr_runtime5.setAttr)(
+      el,
+      "style",
+      `margin: 0 0 10px 0; font-size: ${fontSize}; line-height: 1.3; color: ${ctx.color}; text-align: ${ctx.align}`
+    );
     if (ctx.$slots.default) {
       (0, import_ssr_runtime5.appendChild)(el, ctx.$slots.default());
     }
@@ -655,7 +680,11 @@ var EmailText = {
   }),
   render: (ctx) => {
     const p = (0, import_ssr_runtime6.createElement)("p");
-    (0, import_ssr_runtime6.setAttr)(p, "style", `margin: 0 0 16px 0; font-size: ${ctx.fontSize}; line-height: ${ctx.lineHeight}; color: ${ctx.color}; text-align: ${ctx.align}`);
+    (0, import_ssr_runtime6.setAttr)(
+      p,
+      "style",
+      `margin: 0 0 16px 0; font-size: ${ctx.fontSize}; line-height: ${ctx.lineHeight}; color: ${ctx.color}; text-align: ${ctx.align}`
+    );
     if (ctx.$slots.default) {
       (0, import_ssr_runtime6.appendChild)(p, ctx.$slots.default());
     }
@@ -711,7 +740,7 @@ var EmailColumns = {
     (0, import_ssr_runtime8.setAttr)(table, "border", "0");
     (0, import_ssr_runtime8.setAttr)(table, "width", "100%");
     const tr = (0, import_ssr_runtime8.createElement)("tr");
-    const columnCount = Math.min(4, Math.max(1, ctx.columns));
+    const columnCount = Math.min(4, Math.max(1, Number(ctx.columns) || 2));
     const widthPercent = Math.floor(100 / columnCount);
     for (let i = 0; i < columnCount; i++) {
       const td = (0, import_ssr_runtime8.createElement)("td");

package/dist/index.d.cts

@@ -1,6 +1,7 @@
-import { R as RenderEmailOptions, a as RenderEmailResult, E as EmailAdapter, M as MailerSendOptions, b as EmailResult } from './types-C3uNsSmw.cjs';
-export { c as EmailAttachment, d as EmailMessage, e as ResendConfig, S as SendGridConfig, f as SmtpConfig } from './types-C3uNsSmw.cjs';
+import { R as RenderEmailOptions, a as RenderEmailResult, E as EmailAdapter, M as MailerSendOptions, b as EmailResult, c as EmailComponentContext } from './types-DJzgvyvE.cjs';
+export { d as EmailAttachment, e as EmailMessage, f as ResendConfig, S as SendGridConfig, g as SmtpConfig } from './types-DJzgvyvE.cjs';
 import * as _matthesketh_utopia_server from '@matthesketh/utopia-server';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Render a UtopiaJS component as a complete email document.
@@ -12,7 +13,7 @@ import * as _matthesketh_utopia_server from '@matthesketh/utopia-server';
  *   4. htmlToText(fullHtml)             → plain text fallback
  *   5. Return { html, text, subject? }
  */
-declare function renderEmail(component: any, props?: Record<string, any>, options?: RenderEmailOptions): RenderEmailResult;
+declare function renderEmail(component: unknown, props?: Record<string, unknown>, options?: RenderEmailOptions): RenderEmailResult;
 
 interface Mailer {
     send(options: MailerSendOptions): Promise<EmailResult>;
@@ -49,87 +50,87 @@ declare function inlineCSS(html: string, css: string): string;
 declare function htmlToText(html: string): string;
 
 declare const EmailLayout: {
-    setup: (props: Record<string, any>) => {
-        width: any;
-        backgroundColor: any;
-        fontFamily: any;
+    setup: (props: Record<string, unknown>) => {
+        width: {};
+        backgroundColor: {};
+        fontFamily: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailButton: {
-    setup: (props: Record<string, any>) => {
-        href: any;
-        text: any;
-        color: any;
-        textColor: any;
-        borderRadius: any;
+    setup: (props: Record<string, unknown>) => {
+        href: {};
+        text: {};
+        color: {};
+        textColor: {};
+        borderRadius: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailCard: {
-    setup: (props: Record<string, any>) => {
-        backgroundColor: any;
-        padding: any;
-        borderRadius: any;
-        borderColor: any;
+    setup: (props: Record<string, unknown>) => {
+        backgroundColor: {};
+        padding: {};
+        borderRadius: {};
+        borderColor: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailDivider: {
-    setup: (props: Record<string, any>) => {
-        color: any;
-        width: any;
-        height: any;
+    setup: (props: Record<string, unknown>) => {
+        color: {};
+        width: {};
+        height: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailHeading: {
-    setup: (props: Record<string, any>) => {
+    setup: (props: Record<string, unknown>) => {
         level: number;
-        color: any;
-        align: any;
+        color: {};
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailText: {
-    setup: (props: Record<string, any>) => {
-        color: any;
-        fontSize: any;
-        lineHeight: any;
-        align: any;
+    setup: (props: Record<string, unknown>) => {
+        color: {};
+        fontSize: {};
+        lineHeight: {};
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailImage: {
-    setup: (props: Record<string, any>) => {
-        src: any;
-        alt: any;
-        width: any;
-        height: any;
-        align: any;
+    setup: (props: Record<string, unknown>) => {
+        src: {};
+        alt: {};
+        width: unknown;
+        height: unknown;
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailColumns: {
-    setup: (props: Record<string, any>) => {
-        columns: any;
-        gap: any;
+    setup: (props: Record<string, unknown>) => {
+        columns: {};
+        gap: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailSpacer: {
-    setup: (props: Record<string, any>) => {
-        height: any;
+    setup: (props: Record<string, unknown>) => {
+        height: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 export { EmailAdapter, EmailButton, EmailCard, EmailColumns, EmailDivider, EmailHeading, EmailImage, EmailLayout, EmailResult, EmailSpacer, EmailText, MailerSendOptions, RenderEmailOptions, RenderEmailResult, createMailer, htmlToText, inlineCSS, renderEmail };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { R as RenderEmailOptions, a as RenderEmailResult, E as EmailAdapter, M as MailerSendOptions, b as EmailResult } from './types-C3uNsSmw.js';
-export { c as EmailAttachment, d as EmailMessage, e as ResendConfig, S as SendGridConfig, f as SmtpConfig } from './types-C3uNsSmw.js';
+import { R as RenderEmailOptions, a as RenderEmailResult, E as EmailAdapter, M as MailerSendOptions, b as EmailResult, c as EmailComponentContext } from './types-DJzgvyvE.js';
+export { d as EmailAttachment, e as EmailMessage, f as ResendConfig, S as SendGridConfig, g as SmtpConfig } from './types-DJzgvyvE.js';
 import * as _matthesketh_utopia_server from '@matthesketh/utopia-server';
+import '@matthesketh/utopia-server/ssr-runtime';
 
 /**
  * Render a UtopiaJS component as a complete email document.
@@ -12,7 +13,7 @@ import * as _matthesketh_utopia_server from '@matthesketh/utopia-server';
  *   4. htmlToText(fullHtml)             → plain text fallback
  *   5. Return { html, text, subject? }
  */
-declare function renderEmail(component: any, props?: Record<string, any>, options?: RenderEmailOptions): RenderEmailResult;
+declare function renderEmail(component: unknown, props?: Record<string, unknown>, options?: RenderEmailOptions): RenderEmailResult;
 
 interface Mailer {
     send(options: MailerSendOptions): Promise<EmailResult>;
@@ -49,87 +50,87 @@ declare function inlineCSS(html: string, css: string): string;
 declare function htmlToText(html: string): string;
 
 declare const EmailLayout: {
-    setup: (props: Record<string, any>) => {
-        width: any;
-        backgroundColor: any;
-        fontFamily: any;
+    setup: (props: Record<string, unknown>) => {
+        width: {};
+        backgroundColor: {};
+        fontFamily: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailButton: {
-    setup: (props: Record<string, any>) => {
-        href: any;
-        text: any;
-        color: any;
-        textColor: any;
-        borderRadius: any;
+    setup: (props: Record<string, unknown>) => {
+        href: {};
+        text: {};
+        color: {};
+        textColor: {};
+        borderRadius: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailCard: {
-    setup: (props: Record<string, any>) => {
-        backgroundColor: any;
-        padding: any;
-        borderRadius: any;
-        borderColor: any;
+    setup: (props: Record<string, unknown>) => {
+        backgroundColor: {};
+        padding: {};
+        borderRadius: {};
+        borderColor: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailDivider: {
-    setup: (props: Record<string, any>) => {
-        color: any;
-        width: any;
-        height: any;
+    setup: (props: Record<string, unknown>) => {
+        color: {};
+        width: {};
+        height: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailHeading: {
-    setup: (props: Record<string, any>) => {
+    setup: (props: Record<string, unknown>) => {
         level: number;
-        color: any;
-        align: any;
+        color: {};
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailText: {
-    setup: (props: Record<string, any>) => {
-        color: any;
-        fontSize: any;
-        lineHeight: any;
-        align: any;
+    setup: (props: Record<string, unknown>) => {
+        color: {};
+        fontSize: {};
+        lineHeight: {};
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailImage: {
-    setup: (props: Record<string, any>) => {
-        src: any;
-        alt: any;
-        width: any;
-        height: any;
-        align: any;
+    setup: (props: Record<string, unknown>) => {
+        src: {};
+        alt: {};
+        width: unknown;
+        height: unknown;
+        align: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailColumns: {
-    setup: (props: Record<string, any>) => {
-        columns: any;
-        gap: any;
+    setup: (props: Record<string, unknown>) => {
+        columns: {};
+        gap: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: EmailComponentContext) => _matthesketh_utopia_server.VElement;
 };
 
 declare const EmailSpacer: {
-    setup: (props: Record<string, any>) => {
-        height: any;
+    setup: (props: Record<string, unknown>) => {
+        height: {};
     };
-    render: (ctx: any) => _matthesketh_utopia_server.VElement;
+    render: (ctx: Record<string, unknown>) => _matthesketh_utopia_server.VElement;
 };
 
 export { EmailAdapter, EmailButton, EmailCard, EmailColumns, EmailDivider, EmailHeading, EmailImage, EmailLayout, EmailResult, EmailSpacer, EmailText, MailerSendOptions, RenderEmailOptions, RenderEmailResult, createMailer, htmlToText, inlineCSS, renderEmail };

package/dist/index.js

@@ -116,7 +116,13 @@ function selectorMatches(selector, element) {
   if (selector.includes(">")) {
     const parts2 = selector.split(/\s*>\s*/);
     const targetSelector2 = parts2[parts2.length - 1].trim();
-    if (!matchesSimpleSelector(targetSelector2, element.tag, element.classes, element.id, element.attrs)) {
+    if (!matchesSimpleSelector(
+      targetSelector2,
+      element.tag,
+      element.classes,
+      element.id,
+      element.attrs
+    )) {
       return false;
     }
     let ancestors = element.ancestors;
@@ -146,7 +152,13 @@ function selectorMatches(selector, element) {
     while (ancestorIdx >= 0) {
       const ancestor = element.ancestors[ancestorIdx];
       ancestorIdx--;
-      if (matchesSimpleSelector(ancestorSelector, ancestor.tag, ancestor.classes, ancestor.id, ancestor.attrs)) {
+      if (matchesSimpleSelector(
+        ancestorSelector,
+        ancestor.tag,
+        ancestor.classes,
+        ancestor.id,
+        ancestor.attrs
+      )) {
         found = true;
         break;
       }
@@ -285,10 +297,7 @@ function inlineCSS(html, css) {
     const originalTag = element.fullTag;
     let newTag;
     if (element.existingStyle) {
-      newTag = originalTag.replace(
-        /style="[^"]*"/,
-        `style="${mergedStyle}"`
-      );
+      newTag = originalTag.replace(/style="[^"]*"/, `style="${mergedStyle}"`);
     } else {
       const insertPos = originalTag.endsWith("/>") ? originalTag.length - 2 : originalTag.length - 1;
       newTag = originalTag.slice(0, insertPos) + ` style="${mergedStyle}"` + originalTag.slice(insertPos);
@@ -414,7 +423,10 @@ function renderEmail(component, props, options) {
     skipStyleBlock = false,
     headContent
   } = options ?? {};
-  const { html: bodyHtml, css } = renderToString(component, props);
+  const { html: bodyHtml, css } = renderToString(
+    component,
+    props
+  );
   const inlinedBody = skipInlining ? bodyHtml : inlineCSS(bodyHtml, css);
   const fullHtml = wrapEmailDocument({
     bodyHtml: inlinedBody,
@@ -435,18 +447,7 @@ function renderEmail(component, props, options) {
 function createMailer(adapter) {
   return {
     async send(options) {
-      const {
-        to,
-        from,
-        subject,
-        component,
-        props,
-        renderOptions,
-        cc,
-        bcc,
-        replyTo,
-        attachments
-      } = options;
+      const { to, from, subject, component, props, renderOptions, cc, bcc, replyTo, attachments } = options;
       const rendered = renderEmail(component, props, {
         ...renderOptions,
         subject
@@ -468,11 +469,7 @@ function createMailer(adapter) {
 }
 
 // src/components/email-layout.ts
-import {
-  createElement,
-  appendChild,
-  setAttr
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement, appendChild, setAttr } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailLayout = {
   setup: (props) => ({
     width: props.width ?? 600,
@@ -486,7 +483,11 @@ var EmailLayout = {
     setAttr(table, "cellspacing", "0");
     setAttr(table, "border", "0");
     setAttr(table, "width", String(ctx.width));
-    setAttr(table, "style", `max-width: ${ctx.width}px; width: 100%; margin: 0 auto; background-color: ${ctx.backgroundColor}; font-family: ${ctx.fontFamily}`);
+    setAttr(
+      table,
+      "style",
+      `max-width: ${ctx.width}px; width: 100%; margin: 0 auto; background-color: ${ctx.backgroundColor}; font-family: ${ctx.fontFamily}`
+    );
     const tr = createElement("tr");
     const td = createElement("td");
     setAttr(td, "style", "padding: 0");
@@ -523,11 +524,19 @@ var EmailButton = {
     const tr = createElement2("tr");
     const td = createElement2("td");
     setAttr2(td, "align", "center");
-    setAttr2(td, "style", `background-color: ${ctx.color}; border-radius: ${ctx.borderRadius}; padding: 12px 24px`);
+    setAttr2(
+      td,
+      "style",
+      `background-color: ${ctx.color}; border-radius: ${ctx.borderRadius}; padding: 12px 24px`
+    );
     const a = createElement2("a");
     setAttr2(a, "href", ctx.href);
-    setAttr2(a, "style", `color: ${ctx.textColor}; text-decoration: none; font-size: 16px; font-weight: bold; display: inline-block`);
-    appendChild2(a, createTextNode(ctx.text));
+    setAttr2(
+      a,
+      "style",
+      `color: ${ctx.textColor}; text-decoration: none; font-size: 16px; font-weight: bold; display: inline-block`
+    );
+    appendChild2(a, createTextNode(String(ctx.text)));
     appendChild2(td, a);
     appendChild2(tr, td);
     appendChild2(table, tr);
@@ -536,11 +545,7 @@ var EmailButton = {
 };
 
 // src/components/email-card.ts
-import {
-  createElement as createElement3,
-  appendChild as appendChild3,
-  setAttr as setAttr3
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement3, appendChild as appendChild3, setAttr as setAttr3 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailCard = {
   setup: (props) => ({
     backgroundColor: props.backgroundColor ?? "#ffffff",
@@ -557,7 +562,11 @@ var EmailCard = {
     setAttr3(table, "width", "100%");
     const tr = createElement3("tr");
     const td = createElement3("td");
-    setAttr3(td, "style", `background-color: ${ctx.backgroundColor}; padding: ${ctx.padding}; border-radius: ${ctx.borderRadius}; border: 1px solid ${ctx.borderColor}`);
+    setAttr3(
+      td,
+      "style",
+      `background-color: ${ctx.backgroundColor}; padding: ${ctx.padding}; border-radius: ${ctx.borderRadius}; border: 1px solid ${ctx.borderColor}`
+    );
     if (ctx.$slots.default) {
       appendChild3(td, ctx.$slots.default());
     }
@@ -568,11 +577,7 @@ var EmailCard = {
 };
 
 // src/components/email-divider.ts
-import {
-  createElement as createElement4,
-  appendChild as appendChild4,
-  setAttr as setAttr4
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement4, appendChild as appendChild4, setAttr as setAttr4 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailDivider = {
   setup: (props) => ({
     color: props.color ?? "#e0e0e0",
@@ -588,7 +593,11 @@ var EmailDivider = {
     setAttr4(table, "width", ctx.width);
     const tr = createElement4("tr");
     const td = createElement4("td");
-    setAttr4(td, "style", `border-bottom: ${ctx.height} solid ${ctx.color}; font-size: 1px; line-height: 1px; height: ${ctx.height}`);
+    setAttr4(
+      td,
+      "style",
+      `border-bottom: ${ctx.height} solid ${ctx.color}; font-size: 1px; line-height: 1px; height: ${ctx.height}`
+    );
     const nbsp = createElement4("span");
     setAttr4(nbsp, "style", "display: block; height: 0; overflow: hidden");
     appendChild4(td, nbsp);
@@ -599,11 +608,7 @@ var EmailDivider = {
 };
 
 // src/components/email-heading.ts
-import {
-  createElement as createElement5,
-  appendChild as appendChild5,
-  setAttr as setAttr5
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement5, appendChild as appendChild5, setAttr as setAttr5 } from "@matthesketh/utopia-server/ssr-runtime";
 var HEADING_SIZES = {
   1: "28px",
   2: "22px",
@@ -611,7 +616,7 @@ var HEADING_SIZES = {
 };
 var EmailHeading = {
   setup: (props) => ({
-    level: Math.min(3, Math.max(1, props.level ?? 1)),
+    level: Math.min(3, Math.max(1, Number(props.level) || 1)),
     color: props.color ?? "#333333",
     align: props.align ?? "left"
   }),
@@ -619,7 +624,11 @@ var EmailHeading = {
     const tag = `h${ctx.level}`;
     const el = createElement5(tag);
     const fontSize = HEADING_SIZES[ctx.level] || "28px";
-    setAttr5(el, "style", `margin: 0 0 10px 0; font-size: ${fontSize}; line-height: 1.3; color: ${ctx.color}; text-align: ${ctx.align}`);
+    setAttr5(
+      el,
+      "style",
+      `margin: 0 0 10px 0; font-size: ${fontSize}; line-height: 1.3; color: ${ctx.color}; text-align: ${ctx.align}`
+    );
     if (ctx.$slots.default) {
       appendChild5(el, ctx.$slots.default());
     }
@@ -628,11 +637,7 @@ var EmailHeading = {
 };
 
 // src/components/email-text.ts
-import {
-  createElement as createElement6,
-  appendChild as appendChild6,
-  setAttr as setAttr6
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement6, appendChild as appendChild6, setAttr as setAttr6 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailText = {
   setup: (props) => ({
     color: props.color ?? "#333333",
@@ -642,7 +647,11 @@ var EmailText = {
   }),
   render: (ctx) => {
     const p = createElement6("p");
-    setAttr6(p, "style", `margin: 0 0 16px 0; font-size: ${ctx.fontSize}; line-height: ${ctx.lineHeight}; color: ${ctx.color}; text-align: ${ctx.align}`);
+    setAttr6(
+      p,
+      "style",
+      `margin: 0 0 16px 0; font-size: ${ctx.fontSize}; line-height: ${ctx.lineHeight}; color: ${ctx.color}; text-align: ${ctx.align}`
+    );
     if (ctx.$slots.default) {
       appendChild6(p, ctx.$slots.default());
     }
@@ -651,11 +660,7 @@ var EmailText = {
 };
 
 // src/components/email-image.ts
-import {
-  createElement as createElement7,
-  appendChild as appendChild7,
-  setAttr as setAttr7
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement7, appendChild as appendChild7, setAttr as setAttr7 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailImage = {
   setup: (props) => ({
     src: props.src ?? "",
@@ -688,11 +693,7 @@ var EmailImage = {
 };
 
 // src/components/email-columns.ts
-import {
-  createElement as createElement8,
-  appendChild as appendChild8,
-  setAttr as setAttr8
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement8, appendChild as appendChild8, setAttr as setAttr8 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailColumns = {
   setup: (props) => ({
     columns: props.columns ?? 2,
@@ -706,7 +707,7 @@ var EmailColumns = {
     setAttr8(table, "border", "0");
     setAttr8(table, "width", "100%");
     const tr = createElement8("tr");
-    const columnCount = Math.min(4, Math.max(1, ctx.columns));
+    const columnCount = Math.min(4, Math.max(1, Number(ctx.columns) || 2));
     const widthPercent = Math.floor(100 / columnCount);
     for (let i = 0; i < columnCount; i++) {
       const td = createElement8("td");
@@ -730,11 +731,7 @@ var EmailColumns = {
 };
 
 // src/components/email-spacer.ts
-import {
-  createElement as createElement9,
-  appendChild as appendChild9,
-  setAttr as setAttr9
-} from "@matthesketh/utopia-server/ssr-runtime";
+import { createElement as createElement9, appendChild as appendChild9, setAttr as setAttr9 } from "@matthesketh/utopia-server/ssr-runtime";
 var EmailSpacer = {
   setup: (props) => ({
     height: props.height ?? "20px"

package/dist/types-DJzgvyvE.d.cts

@@ -0,0 +1,83 @@
+import * as _matthesketh_utopia_server_ssr_runtime from '@matthesketh/utopia-server/ssr-runtime';
+
+/** Slot function type for email components. Returns an SSR VNode. */
+type SlotFn = () => Parameters<typeof _matthesketh_utopia_server_ssr_runtime.appendChild>[1];
+/** Context object passed to email component render functions. */
+interface EmailComponentContext extends Record<string, unknown> {
+    $slots: Record<string, SlotFn | undefined>;
+}
+interface RenderEmailOptions {
+    /** Email subject line (can also be set in MailerSendOptions). */
+    subject?: string;
+    /** Hidden preview text shown in email clients. */
+    previewText?: string;
+    /** Skip CSS inlining (keep styles in <style> block only). */
+    skipInlining?: boolean;
+    /** Skip the <style> block entirely (only inline styles). */
+    skipStyleBlock?: boolean;
+    /** Extra HTML to inject into <head>. */
+    headContent?: string;
+}
+interface RenderEmailResult {
+    /** Full email HTML document. */
+    html: string;
+    /** Plain text fallback. */
+    text: string;
+    /** Subject if provided via options. */
+    subject?: string;
+}
+interface EmailAdapter {
+    send(message: EmailMessage): Promise<EmailResult>;
+}
+interface EmailMessage {
+    to: string | string[];
+    from: string;
+    subject: string;
+    html: string;
+    text: string;
+    cc?: string | string[];
+    bcc?: string | string[];
+    replyTo?: string;
+    attachments?: EmailAttachment[];
+    headers?: Record<string, string>;
+}
+interface EmailResult {
+    success: boolean;
+    messageId?: string;
+    error?: string;
+}
+interface EmailAttachment {
+    filename: string;
+    content: string | Buffer;
+    contentType?: string;
+    encoding?: string;
+}
+interface MailerSendOptions {
+    to: string | string[];
+    from: string;
+    subject?: string;
+    component: unknown;
+    props?: Record<string, unknown>;
+    renderOptions?: RenderEmailOptions;
+    cc?: string | string[];
+    bcc?: string | string[];
+    replyTo?: string;
+    attachments?: EmailAttachment[];
+}
+interface SmtpConfig {
+    host: string;
+    port: number;
+    secure?: boolean;
+    auth?: {
+        user: string;
+        pass: string;
+    };
+}
+interface ResendConfig {
+    apiKey: string;
+}
+interface SendGridConfig {
+    apiKey: string;
+}
+
+export type { EmailAdapter as E, MailerSendOptions as M, RenderEmailOptions as R, SendGridConfig as S, RenderEmailResult as a, EmailResult as b, EmailComponentContext as c, EmailAttachment as d, EmailMessage as e, ResendConfig as f, SmtpConfig as g };

package/dist/types-DJzgvyvE.d.ts

@@ -0,0 +1,83 @@
+import * as _matthesketh_utopia_server_ssr_runtime from '@matthesketh/utopia-server/ssr-runtime';
+
+/** Slot function type for email components. Returns an SSR VNode. */
+type SlotFn = () => Parameters<typeof _matthesketh_utopia_server_ssr_runtime.appendChild>[1];
+/** Context object passed to email component render functions. */
+interface EmailComponentContext extends Record<string, unknown> {
+    $slots: Record<string, SlotFn | undefined>;
+}
+interface RenderEmailOptions {
+    /** Email subject line (can also be set in MailerSendOptions). */
+    subject?: string;
+    /** Hidden preview text shown in email clients. */
+    previewText?: string;
+    /** Skip CSS inlining (keep styles in <style> block only). */
+    skipInlining?: boolean;
+    /** Skip the <style> block entirely (only inline styles). */
+    skipStyleBlock?: boolean;
+    /** Extra HTML to inject into <head>. */
+    headContent?: string;
+}
+interface RenderEmailResult {
+    /** Full email HTML document. */
+    html: string;
+    /** Plain text fallback. */
+    text: string;
+    /** Subject if provided via options. */
+    subject?: string;
+}
+interface EmailAdapter {
+    send(message: EmailMessage): Promise<EmailResult>;
+}
+interface EmailMessage {
+    to: string | string[];
+    from: string;
+    subject: string;
+    html: string;
+    text: string;
+    cc?: string | string[];
+    bcc?: string | string[];
+    replyTo?: string;
+    attachments?: EmailAttachment[];
+    headers?: Record<string, string>;
+}
+interface EmailResult {
+    success: boolean;
+    messageId?: string;
+    error?: string;
+}
+interface EmailAttachment {
+    filename: string;
+    content: string | Buffer;
+    contentType?: string;
+    encoding?: string;
+}
+interface MailerSendOptions {
+    to: string | string[];
+    from: string;
+    subject?: string;
+    component: unknown;
+    props?: Record<string, unknown>;
+    renderOptions?: RenderEmailOptions;
+    cc?: string | string[];
+    bcc?: string | string[];
+    replyTo?: string;
+    attachments?: EmailAttachment[];
+}
+interface SmtpConfig {
+    host: string;
+    port: number;
+    secure?: boolean;
+    auth?: {
+        user: string;
+        pass: string;
+    };
+}
+interface ResendConfig {
+    apiKey: string;
+}
+interface SendGridConfig {
+    apiKey: string;
+}
+
+export type { EmailAdapter as E, MailerSendOptions as M, RenderEmailOptions as R, SendGridConfig as S, RenderEmailResult as a, EmailResult as b, EmailComponentContext as c, EmailAttachment as d, EmailMessage as e, ResendConfig as f, SmtpConfig as g };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-email",
-  "version": "0.0.5",
+  "version": "0.2.0",
   "description": "Template-based email rendering for UtopiaJS",
   "type": "module",
   "license": "MIT",
@@ -55,8 +55,8 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-server": "0.0.5",
-    "@matthesketh/utopia-core": "0.0.5"
+    "@matthesketh/utopia-core": "0.2.0",
+    "@matthesketh/utopia-server": "0.2.0"
   },
   "peerDependencies": {
     "@sendgrid/mail": "^7.0.0 || ^8.0.0",