@learncard/email-templates 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Learning Economy Foundation <sdk@learningeconomy.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+# @learncard/email-templates
+
+Git-managed, tenant-branded email and SMS templates for LearnCard services.
+
+Built with [react-email](https://react.email/) so templates are composable React components with full type safety, local preview, and PR-based review.
+
+## Architecture
+
+```
+src/
+  branding.ts                 — TenantBranding type, defaults, resolveBranding()
+  render.ts                   — renderEmail(templateId, branding, data) → { html, text, subject }
+  sms.ts                      — renderSms(templateId, branding, data) → string
+  tenant-registry.ts          — server-side tenant resolution from request headers
+  index.ts                    — barrel export
+
+  components/
+    Layout.tsx                — shared email wrapper (header, footer, branding)
+    EmailButton.tsx           — branded CTA button
+    CodeBlock.tsx             — verification code / recovery key display
+    IssuerLogo.tsx            — issuer logo with fallback
+    LinkFallback.tsx          — "copy and paste this link" fallback text
+
+  templates/
+    verification-code.tsx     — 3 variants: login, recovery-email, embed-verification
+    email-verification.tsx    — link-based email verification (CTA button)
+    inbox-claim.tsx           — credential claim notification
+    endorsement-request.tsx   — endorsement request
+    guardian-approval.tsx     — minor account approval request
+    account-approved.tsx      — account approved confirmation
+    recovery-key.tsx          — recovery key delivery
+    guardian-credential-approval.tsx  — guardian approve/decline a credential
+    credential-awaiting-guardian.tsx  — student: credential pending guardian
+    guardian-approved-claim.tsx       — student: guardian approved credential
+    guardian-rejected-credential.tsx  — student: guardian rejected credential
+    guardian-email-otp.tsx            — guardian OTP verification
+
+  previews/
+    _fixtures.tsx             — shared branding presets and scenario divider
+    inbox-claim-scenarios.tsx
+    verification-code-scenarios.tsx
+    endorsement-request-scenarios.tsx
+    guardian-approval-scenarios.tsx
+    guardian-credential-scenarios.tsx
+    account-approved-scenarios.tsx
+    recovery-key-scenarios.tsx
+
+  __tests__/
+    render.test.ts            — smoke, content, branding, subject, and edge-case tests
+    sms.test.ts               — SMS rendering tests
+    tenant-registry.test.ts   — tenant resolution unit tests
+```
+
+## Usage
+
+```typescript
+import { renderEmail, renderSms, resolveBranding } from '@learncard/email-templates';
+
+// Render a branded email
+const { html, text, subject } = await renderEmail('inbox-claim', tenantBranding, {
+    claimUrl: 'https://vetpass.app/claim/abc123',
+    credential: { name: 'Service Badge' },
+    issuer: { name: 'VA Medical Center' },
+});
+
+// Render a branded SMS
+const smsBody = renderSms('inbox-claim', tenantBranding, {
+    claimUrl: 'https://vetpass.app/claim/abc123',
+    credential: { name: 'Service Badge', type: 'Achievement' },
+    issuer: { name: 'VA Medical Center' },
+});
+```
+
+## Template IDs
+
+| Template ID                       | Service       | Purpose                              |
+| --------------------------------- | ------------- | ------------------------------------ |
+| `login-verification-code`         | lca-api       | Login OTP code                       |
+| `recovery-email-code`             | lca-api       | Recovery email verification          |
+| `embed-email-verification`        | brain-service | Embed SDK email verification         |
+| `contact-method-verification`     | brain-service | Link-based email verification        |
+| `inbox-claim`                     | brain-service | Credential claim notification        |
+| `endorsement-request`             | lca-api       | Endorsement request                  |
+| `guardian-approval`               | brain-service | Guardian approval for minor accounts |
+| `account-approved`                | brain-service | Account approved notification        |
+| `recovery-key`                    | lca-api       | Recovery key delivery                |
+| `credential-awaiting-guardian`    | brain-service | Student: credential pending guardian |
+| `guardian-credential-approval`    | brain-service | Guardian: approve/decline credential |
+| `guardian-approved-claim`         | brain-service | Student: guardian approved credential|
+| `guardian-rejected-credential`    | brain-service | Student: guardian rejected credential|
+| `guardian-email-otp`              | brain-service | Guardian OTP verification            |
+
+Legacy Postmark aliases (`universal-inbox-claim`, `contact-method-verification-1`, `account-approved-email`, `recovery-key-backup`, `recovery-email-verification`, `universal-inbox-claim-1`) are also supported and map to the corresponding template above.
+
+## Tenant Branding
+
+Every field in `TenantBranding` is optional when calling `renderEmail` / `renderSms` — missing fields fall back to LearnCard defaults.
+
+```typescript
+interface TenantBranding {
+    brandName: string;        // e.g. "VetPass"
+    logoUrl: string;          // hosted logo image URL
+    logoAlt: string;          // logo alt text
+    primaryColor: string;     // hex, e.g. "#1B5E20"
+    primaryTextColor: string; // hex, e.g. "#ffffff"
+    supportEmail: string;     // footer support email
+    websiteUrl: string;       // footer website link
+    appUrl: string;           // base app URL for CTA links
+    fromDomain: string;       // email from domain
+    copyrightHolder: string;  // footer copyright name
+}
+```
+
+Branding values are sourced from the tenant config's `email` section (see `tenantEmailConfigSchema` in `packages/learn-card-base/src/config/tenantConfigSchema.ts`).
+
+## Tenant Resolution
+
+`tenant-registry.ts` provides server-side tenant resolution from HTTP request headers:
+
+1. **`X-Tenant-Id` header** — explicit tenant (native apps, informed clients)
+2. **`Origin` / `Referer` header** — hostname mapping (web apps)
+3. **`DEFAULT_TENANT_ID` env var** — per-tenant deploys, cron jobs
+4. **Fallback** — `'learncard'`
+
+```typescript
+import { resolveTenantFromRequest } from '@learncard/email-templates';
+
+const tenant = resolveTenantFromRequest(req.headers);
+// { id: 'vetpass', emailBranding: { brandName: 'VetPass', ... }, resolvedVia: 'origin' }
+```
+
+## Integration
+
+Both `brain-service` and `lca-api` PostmarkAdapters:
+
+1. Check if the template ID maps to a known local template
+2. If yes → render locally with tenant branding, send as raw HTML via Postmark
+3. If rendering fails → fall back to Postmark's template engine (legacy path)
+
+This makes migration gradual and backward-compatible. Call sites that don't pass `branding` get LearnCard defaults.
+
+## Adding a New Template
+
+1. Create `src/templates/my-template.tsx` — export the component + a `getMyTemplateSubject()` function
+2. Define the data interface in `src/render.ts` and add it to `TemplateDataMap`
+3. Add a case to `buildElement()` in `src/render.ts`
+4. Export from `src/templates/index.ts` and `src/index.ts`
+5. Map the old template ID to the new one in the service's PostmarkAdapter (`LOCAL_TEMPLATE_MAP`)
+6. Add test fixtures and assertions to `src/__tests__/render.test.ts`
+7. Run `pnpm --filter @learncard/email-templates test` and `typecheck` to verify
+
+## Previewing Templates
+
+The package includes a built-in dev server powered by [react-email](https://react.email/):
+
+```bash
+pnpm --filter @learncard/email-templates dev
+```
+
+This starts a hot-reloading UI at **http://localhost:3333** where you can:
+
+- Browse all templates in a sidebar
+- See a live preview with sample data
+- Toggle between HTML, plain text, and source views
+- Copy the rendered HTML for testing in email clients
+
+Each template file has a `default` export with realistic sample data used for previews. Multi-scenario previews in `src/previews/` show templates with different branding and data combinations.
+
+## Testing
+
+Tests use [Vitest](https://vitest.dev/) and cover:
+
+- **Smoke tests** — every template ID renders without throwing (default, custom, and empty branding)
+- **Content assertions** — dynamic values (URLs, codes, names) appear in rendered HTML
+- **Branding tests** — custom branding flows through to output (colors, brand name, URLs)
+- **Subject line tests** — correct subjects, alias parity
+- **Plain text tests** — no HTML tags in plain text output
+- **Edge cases** — minimal data, missing optional fields
+- **SMS tests** — `renderSms` output strings with branding
+- **Tenant resolution** — header priority, origin mapping, env fallback, registration helpers
+
+## Scripts
+
+```bash
+pnpm --filter @learncard/email-templates dev          # Preview templates in browser
+pnpm --filter @learncard/email-templates typecheck    # Type check
+pnpm --filter @learncard/email-templates test         # Run tests (vitest run)
+pnpm --filter @learncard/email-templates test:watch   # Run tests in watch mode
+```

package/dist/branding.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Tenant branding for email and SMS templates.
+ *
+ * Values are typically sourced from the tenant config's `email` section.
+ * Every field has a sensible LearnCard default so templates always render,
+ * even if the caller provides a partial (or empty) branding object.
+ */
+export interface TenantBranding {
+    /** Display name shown in email headers, subject lines, and SMS. */
+    brandName: string;
+    /** Full URL to a hosted logo image (PNG/SVG, ideally 200×50 or similar). */
+    logoUrl: string;
+    /** Alt text for the logo image. */
+    logoAlt: string;
+    /** Primary brand color (hex). Used for CTA buttons and accents. */
+    primaryColor: string;
+    /** Text color on primary buttons. */
+    primaryTextColor: string;
+    /** Support / reply-to email address shown in footers. */
+    supportEmail: string;
+    /** Marketing website URL shown in footers. */
+    websiteUrl: string;
+    /** Base app URL for constructing links (e.g. "https://learncard.app"). */
+    appUrl: string;
+    /** Email domain for the From address (e.g. "learncard.com"). */
+    fromDomain: string;
+    /** Copyright holder name for the footer. */
+    copyrightHolder: string;
+}
+export declare const DEFAULT_BRANDING: TenantBranding;
+/**
+ * Merge partial branding with defaults.
+ * Any missing field falls back to the LearnCard default.
+ */
+export declare const resolveBranding: (partial?: Partial<TenantBranding>) => TenantBranding;
+//# sourceMappingURL=branding.d.ts.map

package/dist/branding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"branding.d.ts","sourceRoot":"","sources":["../src/branding.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,cAAc;IAC3B,mEAAmE;IACnE,SAAS,EAAE,MAAM,CAAC;IAElB,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAEhB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAEhB,mEAAmE;IACnE,YAAY,EAAE,MAAM,CAAC;IAErB,qCAAqC;IACrC,gBAAgB,EAAE,MAAM,CAAC;IAEzB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IAErB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IAEnB,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IAEf,gEAAgE;IAChE,UAAU,EAAE,MAAM,CAAC;IAEnB,4CAA4C;IAC5C,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,cAW9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,aAAc,OAAO,CAAC,cAAc,CAAC,KAAG,cAGlE,CAAC"}

package/dist/branding.js

@@ -0,0 +1,28 @@
+/**
+ * Tenant branding for email and SMS templates.
+ *
+ * Values are typically sourced from the tenant config's `email` section.
+ * Every field has a sensible LearnCard default so templates always render,
+ * even if the caller provides a partial (or empty) branding object.
+ */
+export const DEFAULT_BRANDING = {
+    brandName: 'LearnCard',
+    logoUrl: 'https://learncard.app/assets/icon/icon.png',
+    logoAlt: 'LearnCard',
+    primaryColor: '#6366f1',
+    primaryTextColor: '#ffffff',
+    supportEmail: 'support@learningeconomy.io',
+    websiteUrl: 'https://www.learncard.com',
+    appUrl: 'https://learncard.app',
+    fromDomain: 'learncard.com',
+    copyrightHolder: 'Learning Economy Foundation',
+};
+/**
+ * Merge partial branding with defaults.
+ * Any missing field falls back to the LearnCard default.
+ */
+export const resolveBranding = (partial) => ({
+    ...DEFAULT_BRANDING,
+    ...partial,
+});
+//# sourceMappingURL=branding.js.map

package/dist/branding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"branding.js","sourceRoot":"","sources":["../src/branding.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAkCH,MAAM,CAAC,MAAM,gBAAgB,GAAmB;IAC5C,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,4CAA4C;IACrD,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,SAAS;IACvB,gBAAgB,EAAE,SAAS;IAC3B,YAAY,EAAE,4BAA4B;IAC1C,UAAU,EAAE,2BAA2B;IACvC,MAAM,EAAE,uBAAuB;IAC/B,UAAU,EAAE,eAAe;IAC3B,eAAe,EAAE,6BAA6B;CACjD,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAiC,EAAkB,EAAE,CAAC,CAAC;IACnF,GAAG,gBAAgB;IACnB,GAAG,OAAO;CACb,CAAC,CAAC"}

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,16 @@
+/**
+ * CodeBlock — displays a verification code or recovery key prominently.
+ *
+ * Used by verification-code and recovery-key templates.
+ */
+import * as React from 'react';
+interface CodeBlockProps {
+    code: string;
+    /** Optional label above the code (e.g. "Your verification code"). */
+    label?: string;
+    /** 'code' (default) for short 6-digit codes, 'key' for long recovery keys. */
+    variant?: 'code' | 'key';
+}
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export {};
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/components/CodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/components/CodeBlock.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM9C,CAAC"}

package/dist/components/CodeBlock.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CodeBlock — displays a verification code or recovery key prominently.
+ *
+ * Used by verification-code and recovery-key templates.
+ */
+import { Section, Text } from '@react-email/components';
+export const CodeBlock = ({ code, label, variant = 'code' }) => (_jsxs(Section, { style: wrapper, children: [label && _jsx(Text, { style: labelStyle, children: label }), _jsx(Text, { style: variant === 'key' ? keyStyle : codeStyle, children: code })] }));
+const wrapper = {
+    backgroundColor: '#f9fafb',
+    border: '1px solid #e5e7eb',
+    borderRadius: 8,
+    padding: '16px 24px',
+    margin: '0 0 24px',
+    textAlign: 'center',
+};
+const labelStyle = {
+    fontSize: 12,
+    fontWeight: 600,
+    color: '#6b7280',
+    margin: '0 0 8px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+};
+const codeStyle = {
+    fontSize: 32,
+    fontWeight: 700,
+    color: '#111827',
+    letterSpacing: 6,
+    margin: 0,
+    fontFamily: "'Courier New', Courier, monospace",
+};
+const keyStyle = {
+    fontSize: 13,
+    fontWeight: 400,
+    color: '#111827',
+    lineHeight: '20px',
+    margin: 0,
+    fontFamily: "'Courier New', Courier, monospace",
+    wordBreak: 'break-all',
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../src/components/CodeBlock.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAWxD,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CACtF,MAAC,OAAO,IAAC,KAAK,EAAE,OAAO,aAClB,KAAK,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,YAAG,KAAK,GAAQ,EAEjD,KAAC,IAAI,IAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAAG,IAAI,GAAQ,IAC9D,CACb,CAAC;AAEF,MAAM,OAAO,GAAwB;IACjC,eAAe,EAAE,SAAS;IAC1B,MAAM,EAAE,mBAAmB;IAC3B,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;IAClB,SAAS,EAAE,QAAiB;CAC/B,CAAC;AAEF,MAAM,UAAU,GAAwB;IACpC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,aAAa,EAAE,WAAoB;IACnC,aAAa,EAAE,QAAQ;CAC1B,CAAC;AAEF,MAAM,SAAS,GAAwB;IACnC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,mCAAmC;CAClD,CAAC;AAEF,MAAM,QAAQ,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,mCAAmC;IAC/C,SAAS,EAAE,WAAoB;CAClC,CAAC"}

package/dist/components/EmailButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * EmailButton — branded CTA button for emails.
+ *
+ * Renders as an anchor tag with inline styles for maximum email client compatibility.
+ */
+import * as React from 'react';
+import type { TenantBranding } from '../branding';
+interface EmailButtonProps {
+    href: string;
+    branding: TenantBranding;
+    children: React.ReactNode;
+}
+export declare const EmailButton: React.FC<EmailButtonProps>;
+export {};
+//# sourceMappingURL=EmailButton.d.ts.map

package/dist/components/EmailButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailButton.d.ts","sourceRoot":"","sources":["../../src/components/EmailButton.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkBlD,CAAC"}

package/dist/components/EmailButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * EmailButton — branded CTA button for emails.
+ *
+ * Renders as an anchor tag with inline styles for maximum email client compatibility.
+ */
+import { Button } from '@react-email/components';
+export const EmailButton = ({ href, branding, children }) => (_jsx(Button, { href: href, style: {
+        backgroundColor: branding.primaryColor,
+        color: branding.primaryTextColor,
+        borderRadius: 4,
+        fontSize: 16,
+        fontWeight: 600,
+        textDecoration: 'none',
+        textAlign: 'center',
+        display: 'inline-block',
+        padding: '16px 24px',
+        lineHeight: '1',
+    }, children: children }));
+//# sourceMappingURL=EmailButton.js.map

package/dist/components/EmailButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailButton.js","sourceRoot":"","sources":["../../src/components/EmailButton.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAWjD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACrF,KAAC,MAAM,IACH,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,eAAe,EAAE,QAAQ,CAAC,YAAY;QACtC,KAAK,EAAE,QAAQ,CAAC,gBAAgB;QAChC,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE,QAAiB;QAC5B,OAAO,EAAE,cAAc;QACvB,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,GAAG;KAClB,YAEA,QAAQ,GACJ,CACZ,CAAC"}

package/dist/components/IssuerLogo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * IssuerLogo — circular avatar for the credential issuer.
+ *
+ * Mirrors the 80×80 circular logo used in the original Postmark templates.
+ * Only renders when `logoUrl` is provided; otherwise renders nothing.
+ */
+import * as React from 'react';
+interface IssuerLogoProps {
+    logoUrl?: string;
+    alt?: string;
+}
+export declare const IssuerLogo: React.FC<IssuerLogoProps>;
+export {};
+//# sourceMappingURL=IssuerLogo.d.ts.map

package/dist/components/IssuerLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssuerLogo.d.ts","sourceRoot":"","sources":["../../src/components/IssuerLogo.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,eAAe;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAchD,CAAC"}

package/dist/components/IssuerLogo.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * IssuerLogo — circular avatar for the credential issuer.
+ *
+ * Mirrors the 80×80 circular logo used in the original Postmark templates.
+ * Only renders when `logoUrl` is provided; otherwise renders nothing.
+ */
+import { Img, Section } from '@react-email/components';
+export const IssuerLogo = ({ logoUrl, alt }) => {
+    if (!logoUrl)
+        return null;
+    return (_jsx(Section, { style: wrapper, children: _jsx(Img, { src: logoUrl, alt: alt ?? 'Issuer logo', width: 80, height: 80, style: avatar }) }));
+};
+const wrapper = {
+    textAlign: 'center',
+    margin: '0 0 24px',
+};
+const avatar = {
+    borderRadius: '50%',
+    display: 'inline-block',
+    objectFit: 'cover',
+};
+//# sourceMappingURL=IssuerLogo.js.map

package/dist/components/IssuerLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssuerLogo.js","sourceRoot":"","sources":["../../src/components/IssuerLogo.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQvD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IACtE,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,YACnB,KAAC,GAAG,IACA,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,GAAG,IAAI,aAAa,EACzB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,MAAM,GACf,GACI,CACb,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,OAAO,GAAwB;IACjC,SAAS,EAAE,QAAiB;IAC5B,MAAM,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,MAAM,GAAwB;IAChC,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,SAAS,EAAE,OAAO;CACrB,CAAC"}

package/dist/components/Layout.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TenantLayout — shared email wrapper with branded header + footer.
+ *
+ * Every email template wraps its content in this layout so branding
+ * is consistent across all tenant emails.
+ */
+import * as React from 'react';
+import type { TenantBranding } from '../branding';
+interface LayoutProps {
+    branding: TenantBranding;
+    preview: string;
+    children: React.ReactNode;
+    /** Show the brand icon at the top of the card. Defaults to true.
+     *  Set to false when the template already has an IssuerLogo. */
+    showHeaderLogo?: boolean;
+}
+export declare const Layout: React.FC<LayoutProps>;
+export {};
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAaH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,UAAU,WAAW;IACjB,QAAQ,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;oEACgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2DxC,CAAC"}

package/dist/components/Layout.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TenantLayout — shared email wrapper with branded header + footer.
+ *
+ * Every email template wraps its content in this layout so branding
+ * is consistent across all tenant emails.
+ */
+import { Html, Head, Body, Container, Section, Img, Text, Link, Preview, } from '@react-email/components';
+export const Layout = ({ branding, preview, children, showHeaderLogo = true }) => (_jsxs(Html, { lang: "en", children: [_jsx(Head, {}), _jsx(Preview, { children: preview }), _jsxs(Body, { style: body, children: [_jsx("div", { style: topSpacer, children: "\u00A0" }), _jsx(Container, { style: wordmarkContainer, children: _jsx(Text, { style: wordmark, children: _jsx(Link, { href: branding.websiteUrl, style: wordmarkLink, children: branding.brandName.toUpperCase() }) }) }), _jsxs(Container, { style: container, children: [showHeaderLogo && (_jsx(Section, { style: headerLogo, children: _jsx(Img, { src: branding.logoUrl, alt: branding.logoAlt, width: 80, height: 80, style: logoImg }) })), _jsx(Section, { style: showHeaderLogo ? contentAfterLogo : content, children: children })] }), _jsxs(Container, { style: footerContainer, children: [_jsxs(Text, { style: footerDisclaimer, children: ["You received this email because someone requested to add this email to their ", branding.brandName, " account. Please ignore this email if this was not you."] }), _jsxs(Text, { style: footerCopyright, children: [branding.copyrightHolder, " \u00A9 ", new Date().getFullYear()] }), _jsx(Text, { style: footerLinks, children: _jsx(Link, { href: `mailto:${branding.supportEmail}`, style: footerLink, children: "Contact Support" }) })] })] })] }));
+// ---------------------------------------------------------------------------
+// Styles (inline for email compatibility)
+// ---------------------------------------------------------------------------
+const body = {
+    backgroundColor: '#f3f4f6',
+    fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    margin: 0,
+    padding: 0,
+};
+const topSpacer = {
+    height: 56,
+    lineHeight: '56px',
+    fontSize: 1,
+};
+const wordmarkContainer = {
+    maxWidth: 560,
+    margin: '0 auto',
+    padding: '0 40px',
+    textAlign: 'center',
+};
+const wordmark = {
+    fontSize: 13,
+    fontWeight: 600,
+    letterSpacing: 4,
+    color: '#52597A',
+    margin: '0 0 32px',
+    padding: '8px 0 0',
+};
+const wordmarkLink = {
+    color: '#52597A',
+    textDecoration: 'none',
+};
+const container = {
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    margin: '0 auto',
+    maxWidth: 600,
+    padding: 0,
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+};
+const headerLogo = {
+    padding: '48px 48px 0',
+    textAlign: 'center',
+};
+const logoImg = {
+    borderRadius: 10,
+    display: 'inline-block',
+};
+const content = {
+    padding: '48px 48px 48px',
+};
+const contentAfterLogo = {
+    padding: '24px 48px 48px',
+};
+const footerContainer = {
+    maxWidth: 560,
+    margin: '0 auto',
+    padding: '32px 40px 40px',
+    textAlign: 'center',
+};
+const footerDisclaimer = {
+    fontSize: 12,
+    color: '#6b7280',
+    lineHeight: '18px',
+    margin: '0 0 16px',
+    textAlign: 'center',
+};
+const footerCopyright = {
+    fontSize: 12,
+    color: '#6b7280',
+    lineHeight: '18px',
+    margin: '0 0 8px',
+    textAlign: 'center',
+};
+const footerLinks = {
+    fontSize: 12,
+    color: '#6b7280',
+    lineHeight: '18px',
+    margin: 0,
+    textAlign: 'center',
+};
+const footerLink = {
+    color: '#6b7280',
+    textDecoration: 'underline',
+};
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"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"}

package/dist/components/LinkFallback.d.ts

@@ -0,0 +1,12 @@
+/**
+ * LinkFallback — "copy and paste this link" fallback below CTA buttons.
+ *
+ * Mirrors the fallback link pattern used in the original Postmark templates.
+ */
+import * as React from 'react';
+interface LinkFallbackProps {
+    href: string;
+}
+export declare const LinkFallback: React.FC<LinkFallbackProps>;
+export {};
+//# sourceMappingURL=LinkFallback.d.ts.map

package/dist/components/LinkFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkFallback.d.ts","sourceRoot":"","sources":["../../src/components/LinkFallback.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,iBAAiB;IACvB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAYpD,CAAC"}

package/dist/components/LinkFallback.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LinkFallback — "copy and paste this link" fallback below CTA buttons.
+ *
+ * Mirrors the fallback link pattern used in the original Postmark templates.
+ */
+import { Text, Link, Hr } from '@react-email/components';
+export const LinkFallback = ({ href }) => (_jsxs(_Fragment, { children: [_jsx(Hr, { style: divider }), _jsx(Text, { style: hint, children: "If you have trouble with the button above, copy and paste this link into your browser:" }), _jsx(Text, { style: linkText, children: _jsx(Link, { href: href, style: link, children: href }) })] }));
+const divider = {
+    borderColor: '#e5e7eb',
+    margin: '24px 0 16px',
+};
+const hint = {
+    fontSize: 12,
+    color: '#6b7280',
+    lineHeight: '18px',
+    margin: '0 0 4px',
+};
+const linkText = {
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: '0 0 4px',
+    wordBreak: 'break-all',
+};
+const link = {
+    color: '#6366f1',
+    textDecoration: 'none',
+};
+//# sourceMappingURL=LinkFallback.js.map

package/dist/components/LinkFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkFallback.js","sourceRoot":"","sources":["../../src/components/LinkFallback.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAC;AAOzD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACnE,8BACI,KAAC,EAAE,IAAC,KAAK,EAAE,OAAO,GAAI,EAEtB,KAAC,IAAI,IAAC,KAAK,EAAE,IAAI,uGAEV,EAEP,KAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,YACjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,YAAG,IAAI,GAAQ,GACzC,IACR,CACN,CAAC;AAEF,MAAM,OAAO,GAAwB;IACjC,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,IAAI,GAAwB;IAC9B,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAwB;IAClC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,WAAoB;CAClC,CAAC;AAEF,MAAM,IAAI,GAAwB;IAC9B,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,MAAM;CACzB,CAAC"}