react-email-locale-lab 0.2.0 → 0.4.0

package/README.md

@@ -1,31 +1,50 @@
 # React Email Locale Lab
 
-React Email Locale Lab is a proof of concept for previewing React Email templates in multiple languages while editing them.
+React Email Locale Lab is a development utility for previewing [React Email](https://react.email/) templates in multiple languages while editing them.
 
-The idea came from an internal need I encountered while working at one of the companies in my career. We needed a faster way to understand how email templates behaved across languages, especially when translated text changed the size, spacing or structure of a layout.
+[Live demo](https://react-email-locale-lab-integration.vercel.app/) · [Integration example](https://github.com/hducati/react-email-locale-lab-integration-example)
 
-This project exists to test the technical and product viability of that workflow.
+I developed this library after encountering this need while working at an organization that used React Email templates in multiple languages. The templates were usually created first in English, but we also needed to understand how the same layout behaved in languages such as German and Russian, where translated text could change line wrapping, spacing and element dimensions.
 
-## Install
+During local development, the library renders a React Email template and generates on-demand previews for the selected languages. When the source template changes, Vite refreshes it and the selected previews are generated again, allowing the versions to be inspected side by side in near real time.
+
+The generated translations are intended only for visual inspection of the templates. The library does not replace the localization workflow or the reviewed translations used by the application.
+
+## Quick start
 
 ```bash
 pnpm add -D react-email-locale-lab
 ```
 
-The package expects React 19 and React DOM 19 as peer dependencies.
+The package supports React and React DOM 18 or 19 and does not require Vite. The following quick start uses Vite as an optional development host:
 
-Create a configuration in the consuming project:
+```bash
+pnpm add -D vite
+```
+
+```html
+<!-- email-lab/index.html -->
+<div id="root"></div>
+<script type="module" src="/main.tsx"></script>
+```
 
 ```tsx
+// email-lab/main.tsx
+/// <reference types="vite/client" />
+
+import { createRoot } from 'react-dom/client';
 import {
   browserTranslatorProvider,
   defineEmailLab,
   EmailLabApp,
 } from 'react-email-locale-lab';
+import { viteSourceUpdates } from 'react-email-locale-lab/vite';
 import 'react-email-locale-lab/styles.css';
+import { WelcomeEmail } from '../src/emails/welcome';
 
 const config = defineEmailLab({
   routeBasePath: '/preview',
+  sourceUpdates: viteSourceUpdates(import.meta.hot, { watchPaths: ['src/emails'] }),
   sourceLocale: { code: 'en', label: 'English' },
   locales: [{ code: 'de', label: 'Deutsch' }],
   provider: browserTranslatorProvider(),
@@ -34,27 +53,33 @@ const config = defineEmailLab({
   },
 });
 
-export const App = () => <EmailLabApp config={config} />;
+createRoot(document.getElementById('root')!).render(<EmailLabApp config={config} />);
 ```
 
-Import `react-email-locale-lab/styles.css` once in the consuming application. During local development of this repository, `pnpm pack` can be used to create an installable tarball before publishing to npm.
+Add a script and start the lab:
 
-## Run
+```json
+{
+  "scripts": {
+    "email:lab": "vite email-lab --port 4174"
+  }
+}
+```
 
 ```bash
-pnpm install
-pnpm dev
+pnpm email:lab
 ```
 
-Open `http://localhost:4173/preview/welcome`, select up to three languages, then edit `src/emails/welcome.tsx`. Vite refreshes the source and the selected locale cards transition through `stale → translating → ready`.
+Open `http://localhost:4174/preview/welcome`, select up to three languages, then edit the template. Vite refreshes the selected previews automatically.
 
 ## Configuration interface
 
-`src/email-lab.config.tsx` defines only the source locale, available target locales, templates, and translation provider. There are no manually maintained translations. The user selects zero to three languages in the UI; translation is not initialized during app startup.
+The lab configuration defines only the source locale, available target locales, templates, and translation provider. There are no manually maintained translations. The user selects zero to three languages in the UI; translation is not initialized during app startup.
 
 ```tsx
 export default defineEmailLab({
   routeBasePath: '/preview',
+  sourceUpdates: viteSourceUpdates(import.meta.hot, { watchPaths: ['src/emails'] }),
   sourceLocale: { code: 'en', label: 'English' },
   locales: [
     { code: 'de', label: 'Deutsch' },
@@ -79,6 +104,37 @@ templates: {
 
 Set `props` on the template entry to override `PreviewProps`. A custom `render` function remains available for templates that need bespoke setup.
 
+### Template requirements
+
+The lab renders templates synchronously to static HTML. Prefer presentation-only email components whose output is determined by props. Pass preview data through `PreviewProps` or `props`; fetch production data before rendering the email.
+
+Data fetching in `useEffect`, async/Server Components, application routes and components that require missing providers may not render as expected. Use `render` to add synchronous providers or wrappers:
+
+```tsx
+templates: {
+  welcome: {
+    name: 'Welcome',
+    render: () => <WelcomeEmail />,
+  },
+}
+```
+
+## Template locations and source updates
+
+Templates can be imported from anywhere in the consuming project. They do not need to live in `src/emails` or follow a specific folder structure.
+
+The core library is bundler-agnostic. Without `sourceUpdates`, previews still work and can be regenerated manually. Vite users can opt into HMR updates and restrict them to path fragments:
+
+```tsx
+import { viteSourceUpdates } from 'react-email-locale-lab/vite';
+
+sourceUpdates: viteSourceUpdates(import.meta.hot, {
+  watchPaths: ['src/message-templates', 'packages/notifications'],
+}),
+```
+
+Omit `watchPaths` to react to any JavaScript or TypeScript module update. Other tools can implement the small `SourceUpdates` subscription interface and pass it through `sourceUpdates`.
+
 ## Template routes
 
 Every configured template has a stable preview route:
@@ -103,10 +159,12 @@ nl no pl pt ro ru sk sl sv ta te th tr uk vi zh zh-Hant
 
 The list is provider-specific and may change. The provider checks every source/target pair with `Translator.availability()` at runtime. Chrome's API currently runs on desktop, downloads language packs on demand and is unavailable on mobile. See the [official Translator API language list](https://developer.chrome.com/docs/ai/translator-api#supported-languages).
 
-The provider receives extracted text nodes and translatable attributes (`alt`, `title`, `aria-label`). When source copy changes, every target preview is marked stale and new or changed messages are automatically translated again. Unchanged messages are reused from the in-memory cache.
+The provider receives extracted text nodes and translatable attributes (`alt`, `title`, `aria-label`). When source copy changes, every target preview is marked stale and new or changed messages are automatically translated again. Unchanged messages are reused from the session cache.
+
+The included provider uses the browser's built-in Translator API. Language packs are lazy-loaded per selected pair, and translated messages are cached by source text and locale in session storage so unchanged copy is reused across Vite reloads. The source template does not leave the browser. In a browser without this API, the preview reports an actionable error instead of downloading a large JavaScript model or freezing startup.
 
-The included provider uses the browser's built-in Translator API. Language packs are lazy-loaded per selected pair, and translated messages are cached by source text and locale. The source template does not leave the browser. In a browser without this API, the preview reports an actionable error instead of downloading a large JavaScript model or freezing startup.
+Translated previews set both the BCP 47 `lang` attribute and the corresponding `dir` attribute on the rendered document. Right-to-left locales such as Arabic and Hebrew therefore render with `dir="rtl"`; other target locales explicitly use `dir="ltr"`.
 
 ## Current scope
 
-React Email Locale Lab is currently a POC for validating the developer experience, not a production localization system. It automatically translates rendered text for preview only. Future iterations may protect placeholders, expose language-pack progress and offer an explicitly configured server provider for teams whose browsers do not support on-device translation.
+React Email Locale Lab is currently a development-time proof of concept. It automatically translates rendered React Email content for visual preview only; it is not a production localization system or a replacement for testing in real email clients. Future iterations may protect placeholders, improve RTL coverage, expose language-pack progress and support additional translation providers.

package/dist/adapters/vite.d.ts

@@ -0,0 +1,14 @@
+import type { SourceUpdates } from '../core/types';
+type ViteUpdatePayload = {
+    updates: Array<{
+        path: string;
+    }>;
+};
+type ViteHotContext = {
+    on: (event: 'vite:afterUpdate', listener: (payload: ViteUpdatePayload) => void) => void;
+    off: (event: 'vite:afterUpdate', listener: (payload: ViteUpdatePayload) => void) => void;
+};
+export declare const viteSourceUpdates: (hot: ViteHotContext | undefined, options?: {
+    watchPaths?: string[];
+}) => SourceUpdates;
+export {};

package/dist/core/html.d.ts

@@ -1,3 +1,4 @@
+export declare const directionForLocale: (locale: string) => "ltr" | "rtl";
 export type MessageSlot = {
     value: string;
     apply: (translated: string) => void;

package/dist/core/types.d.ts

@@ -27,11 +27,15 @@ export type TranslationProvider = {
     name: string;
     translate: (request: TranslationRequest) => Promise<string[]>;
 };
+export type SourceUpdates = {
+    subscribe: (onUpdate: () => void) => () => void;
+};
 export type EmailLabConfig = {
     sourceLocale: Locale;
     locales: Locale[];
     templates: Record<string, EmailTemplate>;
     provider: TranslationProvider;
     routeBasePath?: string;
+    sourceUpdates?: SourceUpdates;
 };
 export declare const defineEmailLab: (config: EmailLabConfig) => EmailLabConfig;

package/dist/core/watch.d.ts

@@ -0,0 +1 @@
+export declare const shouldReloadForUpdates: (updatePaths: string[], watchPaths?: string[]) => boolean;

package/dist/index.d.ts

@@ -2,4 +2,4 @@ import './styles.css';
 export { EmailLabApp } from './App';
 export { browserTranslatorProvider } from './core/browser-translator-provider';
 export { defineEmailLab } from './core/types';
-export type { EmailLabConfig, EmailTemplate, Locale, TranslationProvider, TranslationRequest, } from './core/types';
+export type { EmailLabConfig, EmailTemplate, Locale, SourceUpdates, TranslationProvider, TranslationRequest, } from './core/types';

package/dist/index.js

@@ -1,47 +1,67 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import { createElement as I, useMemo as A, useState as b, useEffect as T } from "react";
-import { renderToStaticMarkup as M } from "react-dom/server";
-const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").test(e), j = (e) => {
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { createElement as B, useMemo as R, useState as L, useEffect as S } from "react";
+import { renderToStaticMarkup as F } from "react-dom/server";
+const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
+  "ar",
+  "arc",
+  "ckb",
+  "dv",
+  "fa",
+  "he",
+  "khw",
+  "ks",
+  "ku",
+  "nqo",
+  "ps",
+  "sd",
+  "syr",
+  "ug",
+  "ur",
+  "yi"
+]), H = /* @__PURE__ */ new Set(["adlm", "arab", "hebr", "mand", "nkoo", "rohg", "samr", "syrc", "thaa"]), j = (e) => {
+  const t = e.trim().split(/[-_]/), r = t[0].toLowerCase(), s = t.findIndex((o, c) => c > 0 && /^[a-z0-9]$/i.test(o)), a = t.slice(1, s === -1 ? void 0 : s).find((o) => /^[a-z]{4}$/i.test(o));
+  return a ? H.has(a.toLowerCase()) ? "rtl" : "ltr" : O.has(r) ? "rtl" : "ltr";
+}, C = (e) => new RegExp("\\p{L}", "u").test(e), z = (e) => {
   const t = [], r = e.createTreeWalker(e.body, NodeFilter.SHOW_TEXT);
-  let n = r.nextNode();
-  for (; n; ) {
-    const s = n, a = s.parentElement, l = s.data.trim();
-    if (a && !["STYLE", "SCRIPT"].includes(a.tagName) && $(l)) {
-      const o = s.data.match(/^\s*/)?.[0] ?? "", u = s.data.match(/\s*$/)?.[0] ?? "";
-      t.push({ value: l, apply: (w) => {
-        s.data = `${o}${w}${u}`;
+  let s = r.nextNode();
+  for (; s; ) {
+    const n = s, a = n.parentElement, o = n.data.trim();
+    if (a && !["STYLE", "SCRIPT"].includes(a.tagName) && C(o)) {
+      const c = n.data.match(/^\s*/)?.[0] ?? "", u = n.data.match(/\s*$/)?.[0] ?? "";
+      t.push({ value: o, apply: (w) => {
+        n.data = `${c}${w}${u}`;
       } });
     }
-    n = r.nextNode();
+    s = r.nextNode();
   }
-  for (const s of e.body.querySelectorAll("*"))
-    for (const a of k) {
-      const l = s.getAttribute(a)?.trim();
-      l && $(l) && t.push({ value: l, apply: (o) => s.setAttribute(a, o) });
+  for (const n of e.body.querySelectorAll("*"))
+    for (const a of _) {
+      const o = n.getAttribute(a)?.trim();
+      o && C(o) && t.push({ value: o, apply: (c) => n.setAttribute(a, c) });
     }
   return t;
-}, H = async (e, t, r, n) => {
+}, q = async (e, t, r, s) => {
   if (r === t) return e;
-  const s = new DOMParser().parseFromString(e, "text/html");
-  s.documentElement.lang = r;
-  const a = j(s), l = await n(a.map((o) => o.value));
-  return a.forEach((o, u) => o.apply(l[u] ?? o.value)), `<!doctype html>${s.documentElement.outerHTML}`;
+  const n = new DOMParser().parseFromString(e, "text/html");
+  n.documentElement.lang = r, n.documentElement.dir = j(r);
+  const a = z(n), o = await s(a.map((c) => c.value));
+  return a.forEach((c, u) => c.apply(o[u] ?? c.value)), `<!doctype html>${n.documentElement.outerHTML}`;
 }, U = async (e) => {
   const t = new TextEncoder().encode(e), r = await crypto.subtle.digest("SHA-256", t);
-  return Array.from(new Uint8Array(r).slice(0, 6), (n) => n.toString(16).padStart(2, "0")).join("");
-}, O = (e) => {
+  return Array.from(new Uint8Array(r).slice(0, 6), (s) => s.toString(16).padStart(2, "0")).join("");
+}, D = (e) => {
   const t = new DOMParser().parseFromString(e, "text/html");
   return Array.from(t.body.querySelectorAll("[style]")).find(
-    (s) => s.style.display === "none" && s.textContent?.trim()
+    (n) => n.style.display === "none" && n.textContent?.trim()
   )?.textContent?.replace(/[\u00A0\u200B-\u200F\u202A-\u202E\u2066-\u2069\uFEFF]/g, "").trim() || void 0;
-}, _ = ({ locale: e, preview: t, sourceRevision: r, onRefresh: n }) => /* @__PURE__ */ d("article", { className: "preview-card", children: [
+}, G = ({ locale: e, preview: t, sourceRevision: r, onRefresh: s }) => /* @__PURE__ */ d("article", { className: "preview-card", children: [
   /* @__PURE__ */ d("header", { className: "preview-header", children: [
     /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ c("strong", { children: e.label }),
-      /* @__PURE__ */ c("span", { children: e.code })
+      /* @__PURE__ */ i("strong", { children: e.label }),
+      /* @__PURE__ */ i("span", { children: e.code })
     ] }),
     /* @__PURE__ */ d("div", { className: `status status-${t.status}`, children: [
-      /* @__PURE__ */ c("i", {}),
+      /* @__PURE__ */ i("i", {}),
       t.status
     ] })
   ] }),
@@ -52,105 +72,112 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
     t.revision ?? "pending"
   ] }),
   /* @__PURE__ */ d("div", { className: "preheader", children: [
-    /* @__PURE__ */ c("span", { children: "Preheader" }),
-    /* @__PURE__ */ c("strong", { children: O(t.html) ?? "Not set" })
+    /* @__PURE__ */ i("span", { children: "Preheader" }),
+    /* @__PURE__ */ i("strong", { children: D(t.html) ?? "Not set" })
   ] }),
-  /* @__PURE__ */ c("iframe", { title: `${e.label} preview`, srcDoc: t.html, sandbox: "allow-popups allow-popups-to-escape-sandbox" }),
-  t.error && /* @__PURE__ */ c("div", { className: "preview-error", children: t.error }),
-  t.status !== "source" && /* @__PURE__ */ c("button", { className: "refresh", onClick: n, children: "Regenerate translation" })
-] }), z = (e) => {
+  /* @__PURE__ */ i("iframe", { title: `${e.label} preview`, srcDoc: t.html, sandbox: "allow-popups allow-popups-to-escape-sandbox" }),
+  t.error && /* @__PURE__ */ i("div", { className: "preview-error", children: t.error }),
+  t.status !== "source" && /* @__PURE__ */ i("button", { className: "refresh", onClick: s, children: "Regenerate translation" })
+] }), W = (e) => {
   if ("render" in e && e.render) return e.render();
   const t = e.props ?? e.component.PreviewProps ?? {};
-  return I(e.component, t);
-}, x = "/preview", F = (e = x) => `/${e}`.replace(/\/+/g, "/").replace(/\/$/, "") || x, R = (e, t, r) => {
-  const n = F(r), a = (e.pathname.startsWith(`${n}/`) ? decodeURIComponent(e.pathname.slice(n.length + 1)) : void 0) || e.searchParams.get("template") || void 0;
+  return B(e.component, t);
+}, $ = "/preview", k = (e = $) => `/${e}`.replace(/\/+/g, "/").replace(/\/$/, "") || $, E = (e, t, r) => {
+  const s = k(r), a = (e.pathname.startsWith(`${s}/`) ? decodeURIComponent(e.pathname.slice(s.length + 1)) : void 0) || e.searchParams.get("template") || void 0;
   return a && t.includes(a) ? a : t[0];
-}, C = (e, t = 3) => e.searchParams.get("langs")?.split(",").filter(Boolean).slice(0, t) ?? [], B = (e, t, r) => {
-  const n = new URL(e);
-  return n.pathname = `${F(r)}/${encodeURIComponent(t)}`, n.searchParams.delete("template"), n;
-}, q = (e, t) => {
+}, x = (e, t = 3) => e.searchParams.get("langs")?.split(",").filter(Boolean).slice(0, t) ?? [], I = (e, t, r) => {
+  const s = new URL(e);
+  return s.pathname = `${k(r)}/${encodeURIComponent(t)}`, s.searchParams.delete("template"), s;
+}, V = (e, t) => {
   const r = new URL(e);
   return t.length ? r.searchParams.set("langs", t.join(",")) : r.searchParams.delete("langs"), r;
-}, S = 3, D = (e) => {
-  const t = A(() => Object.keys(e.templates), [e.templates]), [r, n] = b(() => R(new URL(window.location.href), t, e.routeBasePath)), [s, a] = b(() => C(new URL(window.location.href), S)), [l, o] = b({}), [u, w] = b(""), [g, y] = b(0), L = e.templates[r] ?? e.templates[t[0]], h = A(() => `<!doctype html>${M(z(L))}`, [L]), P = e.locales.filter((i) => s.includes(i.code)), N = [e.sourceLocale, ...P];
-  return T(() => {
-    const i = R(new URL(window.location.href), t, e.routeBasePath);
-    window.history.replaceState({}, "", B(new URL(window.location.href), i, e.routeBasePath));
-    const v = () => {
-      n(R(new URL(window.location.href), t, e.routeBasePath)), a(C(new URL(window.location.href), S));
+}, N = 3, J = (e) => {
+  const t = R(() => Object.keys(e.templates), [e.templates]), [r, s] = L(() => E(new URL(window.location.href), t, e.routeBasePath)), [n, a] = L(() => x(new URL(window.location.href), N)), [o, c] = L({}), [u, w] = L(""), [v, b] = L(0), f = e.templates[r] ?? e.templates[t[0]], p = R(
+    () => `<!doctype html>${F(W(f))}`,
+    [f, v]
+  ), g = e.locales.filter((l) => n.includes(l.code)), A = [e.sourceLocale, ...g];
+  return S(() => {
+    const l = E(new URL(window.location.href), t, e.routeBasePath);
+    window.history.replaceState({}, "", I(new URL(window.location.href), l, e.routeBasePath));
+    const y = () => {
+      s(E(new URL(window.location.href), t, e.routeBasePath)), a(x(new URL(window.location.href), N));
     };
-    return window.addEventListener("popstate", v), () => window.removeEventListener("popstate", v);
-  }, [e.routeBasePath, t]), T(() => () => {
-  }, []), T(() => {
-    let i = !1;
-    return U(h).then((v) => {
-      i || w(v);
+    return window.addEventListener("popstate", y), () => window.removeEventListener("popstate", y);
+  }, [e.routeBasePath, t]), S(() => e.sourceUpdates?.subscribe(() => {
+    b((l) => l + 1);
+  }), [e.sourceUpdates]), S(() => {
+    let l = !1;
+    return U(p).then((y) => {
+      l || w(y);
     }), () => {
-      i = !0;
+      l = !0;
     };
-  }, [h]), T(() => {
-    let i = !1;
-    return o((m) => Object.fromEntries(N.map((p) => [
-      p.code,
-      p.code === e.sourceLocale.code ? { html: h, status: "source" } : { html: m[p.code]?.html ?? h, status: "stale", revision: m[p.code]?.revision }
+  }, [p]), S(() => {
+    let l = !1;
+    return c((h) => Object.fromEntries(A.map((m) => [
+      m.code,
+      m.code === e.sourceLocale.code ? { html: p, status: "source" } : { html: h[m.code]?.html ?? p, status: "stale", revision: h[m.code]?.revision }
     ]))), (async () => {
-      for (const m of P) {
-        if (i) return;
-        o((p) => ({
-          ...p,
-          [m.code]: { ...p[m.code], status: "translating", error: void 0 }
+      for (const h of g) {
+        if (l) return;
+        c((m) => ({
+          ...m,
+          [h.code]: { ...m[h.code], status: "translating", error: void 0 }
         }));
         try {
-          const p = await H(h, e.sourceLocale.code, m.code, (E) => e.provider.translate({
-            texts: E,
+          const m = await q(p, e.sourceLocale.code, h.code, (P) => e.provider.translate({
+            texts: P,
             sourceLocale: e.sourceLocale.translationCode ?? e.sourceLocale.code,
-            targetLocale: m.translationCode ?? m.code
-          })), f = await U(h);
-          i || o((E) => ({ ...E, [m.code]: { html: p, status: "ready", revision: f } }));
-        } catch (p) {
-          i || o((f) => ({
-            ...f,
-            [m.code]: {
-              ...f[m.code],
+            targetLocale: h.translationCode ?? h.code
+          })), T = await U(p);
+          l || c((P) => ({ ...P, [h.code]: { html: m, status: "ready", revision: T } }));
+        } catch (m) {
+          l || c((T) => ({
+            ...T,
+            [h.code]: {
+              ...T[h.code],
               status: "error",
-              error: p instanceof Error ? p.message : String(p)
+              error: m instanceof Error ? m.message : String(m)
             }
           }));
         }
       }
     })(), () => {
-      i = !0;
+      l = !0;
     };
-  }, [h, g, s.join(",")]), {
-    activeLocaleCodes: s,
-    activeLocales: P,
-    previewLocales: N,
-    previews: l,
-    refreshPreviews: () => y((i) => i + 1),
-    selectTemplate: (i) => {
-      n(i), window.history.pushState({}, "", B(new URL(window.location.href), i, e.routeBasePath));
+  }, [p, v, n.join(",")]), {
+    activeLocaleCodes: n,
+    activeLocales: g,
+    previewLocales: A,
+    previews: o,
+    refreshPreviews: () => b((l) => l + 1),
+    selectTemplate: (l) => {
+      s(l), window.history.pushState({}, "", I(new URL(window.location.href), l, e.routeBasePath));
     },
     selectedTemplateId: r,
-    sourceHtml: h,
+    sourceHtml: p,
     sourceRevision: u,
     templateIds: t,
-    toggleLocale: (i) => {
-      const v = s.includes(i) ? s.filter((m) => m !== i) : [...s, i].slice(0, S);
-      a(v), window.history.replaceState({}, "", q(new URL(window.location.href), v));
+    toggleLocale: (l) => {
+      const y = n.includes(l) ? n.filter((h) => h !== l) : [...n, l].slice(0, N);
+      a(y), window.history.replaceState({}, "", V(new URL(window.location.href), y));
     }
   };
-}, J = ({ config: e }) => {
-  const t = D(e);
-  return /* @__PURE__ */ d("main", { children: [
+}, re = ({ config: e }) => {
+  const t = J(e);
+  return /* @__PURE__ */ d("main", { className: "email-lab", children: [
     /* @__PURE__ */ d("header", { className: "topbar", children: [
-      /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ c("p", { className: "eyebrow", children: "React Email Locale Lab" }),
-        /* @__PURE__ */ c("h1", { children: "See every language while you build." })
+      /* @__PURE__ */ d("div", { className: "topbar-copy", children: [
+        /* @__PURE__ */ d("div", { className: "brand", children: [
+          /* @__PURE__ */ i("span", { className: "brand-mark" }),
+          /* @__PURE__ */ i("p", { className: "eyebrow", children: "React Email Locale Lab" })
+        ] }),
+        /* @__PURE__ */ i("h1", { children: "See every language while you build." })
       ] }),
       /* @__PURE__ */ d("div", { className: "controls", children: [
         /* @__PURE__ */ d("label", { children: [
           "Template",
-          /* @__PURE__ */ c("select", { value: t.selectedTemplateId, onChange: (r) => t.selectTemplate(r.target.value), children: t.templateIds.map((r) => /* @__PURE__ */ c("option", { value: r, children: e.templates[r].name }, r)) })
+          /* @__PURE__ */ i("select", { value: t.selectedTemplateId, onChange: (r) => t.selectTemplate(r.target.value), children: t.templateIds.map((r) => /* @__PURE__ */ i("option", { value: r, children: e.templates[r].name }, r)) })
         ] }),
         /* @__PURE__ */ d("span", { className: "provider", children: [
           "Provider: ",
@@ -160,17 +187,17 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
     ] }),
     /* @__PURE__ */ d("section", { className: "locale-picker", children: [
       /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ c("strong", { children: "Preview languages" }),
-        /* @__PURE__ */ c("span", { children: "Select up to three. Language packs load only when selected." })
+        /* @__PURE__ */ i("strong", { children: "Preview languages" }),
+        /* @__PURE__ */ i("span", { children: "Select up to three. Language packs load only when selected." })
       ] }),
-      /* @__PURE__ */ c("div", { className: "locale-options", children: e.locales.map((r) => /* @__PURE__ */ d(
+      /* @__PURE__ */ i("div", { className: "locale-options", children: e.locales.map((r) => /* @__PURE__ */ d(
         "button",
         {
           className: t.activeLocaleCodes.includes(r.code) ? "locale-active" : "",
           disabled: !t.activeLocaleCodes.includes(r.code) && t.activeLocaleCodes.length >= 3,
           onClick: () => t.toggleLocale(r.code),
           children: [
-            /* @__PURE__ */ c("i", {}),
+            /* @__PURE__ */ i("i", {}),
             r.label
           ]
         },
@@ -178,15 +205,15 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
       )) })
     ] }),
     /* @__PURE__ */ d("section", { className: "notice", children: [
-      /* @__PURE__ */ c("span", { className: "live-dot" }),
+      /* @__PURE__ */ i("span", { className: "live-dot" }),
       "Watching source changes through Vite HMR."
     ] }),
     t.activeLocales.length === 0 && /* @__PURE__ */ d("section", { className: "empty-state", children: [
-      /* @__PURE__ */ c("strong", { children: "Select a language to generate a preview." }),
-      /* @__PURE__ */ c("span", { children: "The source template renders immediately; translation starts only on demand." })
+      /* @__PURE__ */ i("strong", { children: "Select a language to generate a preview." }),
+      /* @__PURE__ */ i("span", { children: "The source template renders immediately; translation starts only on demand." })
     ] }),
-    /* @__PURE__ */ c("section", { className: "grid", children: t.previewLocales.map((r) => /* @__PURE__ */ c(
-      _,
+    /* @__PURE__ */ i("section", { className: "grid", children: t.previewLocales.map((r) => /* @__PURE__ */ i(
+      G,
       {
         locale: r,
         preview: t.previews[r.code] ?? { html: t.sourceHtml, status: "stale" },
@@ -196,52 +223,73 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
       r.code
     )) })
   ] });
-}, K = () => {
-  const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), n = async (a, l) => {
-    const o = r.get(a) ?? Promise.resolve();
+}, M = "react-email-locale-lab:translations:v1", Y = () => {
+  try {
+    const e = window.sessionStorage?.getItem(M);
+    if (!e) return /* @__PURE__ */ new Map();
+    const t = JSON.parse(e);
+    return Array.isArray(t) ? new Map(t.filter(
+      (r) => Array.isArray(r) && r.length === 2 && r.every((s) => typeof s == "string")
+    )) : /* @__PURE__ */ new Map();
+  } catch {
+    return /* @__PURE__ */ new Map();
+  }
+}, K = (e) => {
+  try {
+    window.sessionStorage?.setItem(M, JSON.stringify([...e]));
+  } catch {
+  }
+}, ae = () => {
+  const e = /* @__PURE__ */ new Map(), t = Y(), r = /* @__PURE__ */ new Map(), s = async (a, o) => {
+    const c = r.get(a) ?? Promise.resolve();
     let u = () => {
     };
-    const w = new Promise((y) => {
-      u = y;
-    }), g = o.catch(() => {
+    const w = new Promise((b) => {
+      u = b;
+    }), v = c.catch(() => {
     }).then(() => w);
-    r.set(a, g), await o.catch(() => {
+    r.set(a, v), await c.catch(() => {
     });
     try {
-      return await l();
+      return await o();
     } finally {
-      u(), r.get(a) === g && r.delete(a);
+      u(), r.get(a) === v && r.delete(a);
     }
-  }, s = async (a, l) => {
+  }, n = async (a, o) => {
     if (!window.Translator)
       throw new Error("This browser does not support the built-in Translator API. Use a current Chrome build or configure a remote provider.");
-    const o = `${a}:${l}`;
-    let u = e.get(o);
+    const c = `${a}:${o}`;
+    let u = e.get(c);
     if (!u) {
-      if (await window.Translator.availability({ sourceLanguage: a, targetLanguage: l }) === "unavailable") throw new Error(`The browser cannot translate ${a} → ${l}.`);
-      u = window.Translator.create({ sourceLanguage: a, targetLanguage: l }), e.set(o, u);
+      if (await window.Translator.availability({ sourceLanguage: a, targetLanguage: o }) === "unavailable") throw new Error(`The browser cannot translate ${a} → ${o}.`);
+      u = window.Translator.create({ sourceLanguage: a, targetLanguage: o }), e.set(c, u);
     }
     return u;
   };
   return {
     name: "Browser Translator · on-device",
-    async translate({ texts: a, sourceLocale: l, targetLocale: o }) {
+    async translate({ texts: a, sourceLocale: o, targetLocale: c }) {
       if (a.length === 0) return [];
-      const u = await s(l, o), w = `${l}:${o}`;
-      return n(w, async () => {
-        const g = [];
-        for (const y of a) {
-          const L = `${w}:${y}`;
-          let h = t.get(L);
-          h || (h = await u.translate(y), t.set(L, h)), g.push(h);
+      const u = await n(o, c), w = `${o}:${c}`;
+      return s(w, async () => {
+        const v = [];
+        let b = !1;
+        try {
+          for (const f of a) {
+            const p = `${w}:${f}`;
+            let g = t.get(p);
+            g || (g = await u.translate(f), t.set(p, g), b = !0), v.push(g);
+          }
+          return v;
+        } finally {
+          b && K(t);
         }
-        return g;
       });
     }
   };
-}, Q = (e) => e;
+}, se = (e) => e;
 export {
-  J as EmailLabApp,
-  K as browserTranslatorProvider,
-  Q as defineEmailLab
+  re as EmailLabApp,
+  ae as browserTranslatorProvider,
+  se as defineEmailLab
 };

package/dist/styles.css

@@ -1 +1 @@
-:root{color:#182033;background:#f4f5f9;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,select{font:inherit}main{margin:0 auto;max-width:1640px;padding:42px clamp(18px,4vw,64px) 70px}.topbar{align-items:end;display:flex;justify-content:space-between;gap:32px}.eyebrow{color:#615ee8;font-size:12px;font-weight:800;letter-spacing:.12em;margin:0 0 8px;text-transform:uppercase}h1{font-size:clamp(30px,4vw,50px);letter-spacing:-.045em;line-height:1;margin:0}.controls{align-items:end;display:flex;gap:12px}label{color:#72788a;display:grid;font-size:12px;font-weight:700;gap:6px}select{background:#fff;border:1px solid #dfe1e8;border-radius:10px;color:#182033;min-width:210px;padding:11px 36px 11px 12px}.provider{background:#e8e7ff;border-radius:999px;color:#514dcf;font-size:12px;font-weight:700;padding:10px 13px}.notice{align-items:center;background:#fff;border:1px solid #e2e4ea;border-radius:12px;display:flex;font-size:13px;margin:30px 0 20px;padding:13px 16px}.locale-picker{align-items:center;background:#fff;border:1px solid #e2e4ea;border-radius:14px;display:flex;justify-content:space-between;margin-top:30px;padding:16px}.locale-picker strong,.locale-picker span{display:block}.locale-picker strong{font-size:13px}.locale-picker span{color:#8c91a0;font-size:11px;margin-top:3px}.locale-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.locale-options button{align-items:center;background:#f6f7fa;border:1px solid #e2e4ea;border-radius:999px;color:#686e7e;cursor:pointer;display:flex;font-size:12px;font-weight:700;gap:7px;padding:8px 11px}.locale-options button i{border:1px solid #b7bbc7;border-radius:50%;height:8px;width:8px}.locale-options button.locale-active{background:#e8e7ff;border-color:#c7c5ff;color:#514dcf}.locale-options button.locale-active i{background:#615ee8;border-color:#615ee8}.locale-options button:disabled{cursor:not-allowed;opacity:.4}.notice code{background:#f0f1f5;border-radius:5px;margin-left:4px;padding:2px 5px}.live-dot{animation:pulse 1.7s infinite;background:#16a56d;border-radius:50%;height:8px;margin-right:10px;width:8px}.grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.preview-card{background:#fff;border:1px solid #dfe1e8;border-radius:16px;box-shadow:0 8px 28px #1b233a0d;overflow:hidden;position:relative}.preview-header{align-items:center;border-bottom:1px solid #eceef3;display:flex;justify-content:space-between;padding:15px 17px 12px}.preview-header strong{display:block;font-size:14px}.preview-header span{color:#979cab;font-size:11px}.status{align-items:center;border-radius:999px;display:flex;font-size:11px;font-weight:800;gap:6px;padding:5px 9px;text-transform:uppercase}.status i{background:currentColor;border-radius:50%;height:6px;width:6px}.status-source,.status-ready{background:#e6f7ef;color:#168659}.status-stale{background:#fff2d7;color:#b17100}.status-translating{background:#e8e7ff;color:#5753d6}.status-translating i{animation:pulse .8s infinite}.status-error{background:#ffe8e8;color:#c53c3c}.revision{background:#fafbfc;color:#9ba0ad;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;padding:7px 17px}.preheader{align-items:baseline;border-bottom:1px solid #eceef3;display:flex;gap:9px;padding:10px 17px}.preheader span{color:#979cab;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.preheader strong{color:#4f5565;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}iframe{background:#edf0f7;border:0;display:block;height:590px;width:100%}.refresh{background:#fff;border:1px solid #dfe1e8;border-radius:8px;bottom:12px;color:#595f70;cursor:pointer;font-size:11px;font-weight:700;padding:7px 10px;position:absolute;right:12px}.refresh:hover{border-color:#615ee8;color:#514dcf}.preview-error{background:#fff2f2;border-top:1px solid #ffd5d5;bottom:0;color:#a63333;font-size:12px;left:0;padding:11px 130px 11px 14px;position:absolute;right:0}.empty-state{align-items:center;background:#fff;border:1px dashed #cfd2dc;border-radius:16px;display:flex;flex-direction:column;justify-content:center;min-height:220px;text-align:center}.empty-state span{color:#8b90a0;font-size:13px;margin-top:7px}@keyframes pulse{50%{opacity:.3;transform:scale(.82)}}@media(max-width:900px){.grid{grid-template-columns:1fr}.topbar,.locale-picker{align-items:start;flex-direction:column}.controls{align-items:stretch;flex-direction:column;width:100%}.locale-options{justify-content:flex-start}}
+.email-lab{--lab-bg: #050505;--lab-panel: #0a0a0a;--lab-panel-raised: #111111;--lab-border: #262626;--lab-border-strong: #3a3a3a;--lab-text: #ededed;--lab-muted: #8f8f8f;--lab-dim: #666666;--lab-accent: #ffffff;--lab-success: #45d483;--lab-warning: #f5a524;--lab-error: #ff6369;background:radial-gradient(circle at 50% -18%,rgba(255,255,255,.09),transparent 30rem),var(--lab-bg);color-scheme:dark;color:var(--lab-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;min-height:100vh;padding:40px clamp(18px,3vw,56px) 72px}.email-lab,.email-lab *{box-sizing:border-box}.email-lab button,.email-lab select{font:inherit}.email-lab .topbar{align-items:end;display:flex;gap:32px;justify-content:space-between;margin:0 auto;max-width:2200px}.email-lab .topbar-copy{max-width:760px}.email-lab .brand{align-items:center;display:flex;gap:9px;margin-bottom:14px}.email-lab .brand-mark{border-bottom:8px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;display:block;filter:drop-shadow(0 0 10px rgba(255,255,255,.35));height:0;width:0}.email-lab .eyebrow{color:#b8b8b8;font-size:12px;font-weight:600;letter-spacing:.08em;margin:0;text-transform:uppercase}.email-lab h1{font-size:clamp(32px,4vw,58px);font-weight:560;letter-spacing:-.055em;line-height:.98;margin:0;text-wrap:balance}.email-lab .controls{align-items:end;display:flex;flex:0 0 auto;gap:10px}.email-lab label{color:var(--lab-muted);display:grid;font-size:11px;font-weight:550;gap:7px}.email-lab select{background:#0d0d0d;border:1px solid var(--lab-border);border-radius:7px;color:var(--lab-text);min-width:220px;outline:none;padding:10px 34px 10px 12px;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.email-lab select:hover,.email-lab select:focus-visible{background:#121212;border-color:var(--lab-border-strong);box-shadow:0 0 0 3px #ffffff0d}.email-lab .provider{background:#111;border:1px solid var(--lab-border);border-radius:999px;color:#b5b5b5;font-size:11px;font-weight:550;padding:10px 13px;white-space:nowrap}.email-lab .locale-picker,.email-lab .notice,.email-lab .grid,.email-lab .empty-state{margin-left:auto;margin-right:auto;max-width:2200px}.email-lab .locale-picker{align-items:start;background:#0c0c0ce0;border:1px solid var(--lab-border);border-radius:10px;display:grid;gap:24px;grid-template-columns:minmax(180px,.3fr) minmax(0,1fr);margin-top:34px;padding:16px}.email-lab .locale-picker strong,.email-lab .locale-picker span{display:block}.email-lab .locale-picker strong{font-size:13px;font-weight:580}.email-lab .locale-picker span{color:var(--lab-muted);font-size:11px;line-height:1.45;margin-top:4px}.email-lab .locale-options{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-height:118px;overflow:auto;padding:1px 3px 3px 1px;scrollbar-color:#333 transparent;scrollbar-width:thin}.email-lab .locale-options button{align-items:center;background:#111;border:1px solid var(--lab-border);border-radius:6px;color:#a8a8a8;cursor:pointer;display:flex;font-size:11px;font-weight:550;gap:7px;padding:7px 10px;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.email-lab .locale-options button:hover:not(:disabled){background:#181818;border-color:#444;color:#fff;transform:translateY(-1px)}.email-lab .locale-options button i{border:1px solid #555;border-radius:50%;height:7px;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;width:7px}.email-lab .locale-options button.locale-active{background:#f2f2f2;border-color:#fff;color:#0a0a0a}.email-lab .locale-options button.locale-active i{background:#0a0a0a;border-color:#0a0a0a;box-shadow:0 0 0 2px #0000001f}.email-lab .locale-options button:disabled{cursor:not-allowed;opacity:.35}.email-lab .notice{align-items:center;border-bottom:1px solid var(--lab-border);color:var(--lab-muted);display:flex;font-size:11px;margin-bottom:18px;padding:14px 2px}.email-lab .live-dot{animation:lab-pulse 1.8s ease-in-out infinite;background:var(--lab-success);border-radius:50%;box-shadow:0 0 10px #45d4838c;height:7px;margin-right:9px;width:7px}.email-lab .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,410px),1fr))}.email-lab .preview-card{animation:lab-enter .32s ease both;background:var(--lab-panel);border:1px solid var(--lab-border);border-radius:10px;box-shadow:0 16px 50px #0000003d;min-width:0;overflow:hidden;position:relative;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.email-lab .preview-card:hover{border-color:#393939;box-shadow:0 20px 65px #00000057;transform:translateY(-2px)}.email-lab .preview-header{align-items:center;border-bottom:1px solid var(--lab-border);display:flex;justify-content:space-between;padding:13px 14px 11px}.email-lab .preview-header strong{display:block;font-size:13px;font-weight:580}.email-lab .preview-header span{color:var(--lab-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.email-lab .status{align-items:center;border:1px solid currentColor;border-radius:999px;display:flex;font-size:9px;font-weight:650;gap:6px;letter-spacing:.045em;opacity:.88;padding:4px 7px;text-transform:uppercase}.email-lab .status i{background:currentColor;border-radius:50%;height:5px;width:5px}.email-lab .status-source,.email-lab .status-ready{color:var(--lab-success)}.email-lab .status-stale{color:var(--lab-warning)}.email-lab .status-translating{color:#8da4ff}.email-lab .status-error{color:var(--lab-error)}.email-lab .status-translating i{animation:lab-pulse .8s ease-in-out infinite}.email-lab .revision{background:#080808;border-bottom:1px solid #1b1b1b;color:#5f5f5f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;padding:7px 14px}.email-lab .preheader{align-items:baseline;border-bottom:1px solid var(--lab-border);display:flex;gap:9px;min-width:0;padding:9px 14px}.email-lab .preheader span{color:#666;flex:0 0 auto;font-size:9px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}.email-lab .preheader strong{color:#aaa;font-size:11px;font-weight:480;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-lab iframe{background:#e9e9e9;border:0;display:block;height:620px;width:100%}.email-lab .refresh{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0a0ae0;border:1px solid #3a3a3a;border-radius:6px;bottom:11px;color:#d3d3d3;cursor:pointer;font-size:10px;font-weight:580;padding:7px 9px;position:absolute;right:11px;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.email-lab .refresh:hover{background:#fff;border-color:#fff;color:#000}.email-lab .preview-error{background:#23080af5;border-top:1px solid #5c2227;bottom:0;color:#ff969a;font-size:11px;left:0;line-height:1.45;padding:11px 128px 11px 13px;position:absolute;right:0}.email-lab .empty-state{align-items:center;background:linear-gradient(180deg,#0d0d0d,#080808);border:1px dashed #303030;border-radius:10px;display:flex;flex-direction:column;justify-content:center;min-height:230px;text-align:center}.email-lab .empty-state strong{font-size:14px;font-weight:580}.email-lab .empty-state span{color:var(--lab-muted);font-size:12px;margin-top:7px}@keyframes lab-pulse{50%{opacity:.35;transform:scale(.82)}}@keyframes lab-enter{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.email-lab .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:2050px){.email-lab .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px){.email-lab{padding-top:26px}.email-lab .topbar{align-items:start;flex-direction:column}.email-lab .controls{align-items:stretch;flex-direction:column;width:100%}.email-lab select{width:100%}.email-lab .locale-picker{grid-template-columns:1fr}.email-lab .locale-options{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.email-lab *,.email-lab *:before,.email-lab *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

package/dist/vite.js

@@ -0,0 +1,18 @@
+const c = /\.[cm]?[jt]sx?(?:\?|$)/, n = (e) => e.replaceAll("\\", "/").replace(/^\.\//, ""), p = (e, r) => {
+  const s = e.map(n), t = r?.map(n).filter(Boolean);
+  return t?.length ? s.some(
+    (a) => t.some((o) => a.includes(o))
+  ) : s.some((a) => c.test(a));
+}, l = (e, r = {}) => ({
+  subscribe(s) {
+    if (!e) return () => {
+    };
+    const t = (a) => {
+      p(a.updates.map((o) => o.path), r.watchPaths) && s();
+    };
+    return e.on("vite:afterUpdate", t), () => e.off("vite:afterUpdate", t);
+  }
+});
+export {
+  l as viteSourceUpdates
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-locale-lab",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Real-time multi-language previews for React Email templates.",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,6 +15,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./vite": {
+      "types": "./dist/adapters/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "sideEffects": ["./dist/styles.css"],