react-email-locale-lab 0.3.0 → 0.4.0

package/README.md

@@ -10,27 +10,41 @@ During local development, the library renders a React Email template and generat
 
 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.
 
-## Install
+## Quick start
 
 ```bash
 pnpm add -D react-email-locale-lab
 ```
 
-The package supports React and React DOM 18 or 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',
-  watchPaths: ['src/emails'],
+  sourceUpdates: viteSourceUpdates(import.meta.hot, { watchPaths: ['src/emails'] }),
   sourceLocale: { code: 'en', label: 'English' },
   locales: [{ code: 'de', label: 'Deutsch' }],
   provider: browserTranslatorProvider(),
@@ -39,28 +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',
-  watchPaths: ['src/emails'],
+  sourceUpdates: viteSourceUpdates(import.meta.hot, { watchPaths: ['src/emails'] }),
   sourceLocale: { code: 'en', label: 'English' },
   locales: [
     { code: 'de', label: 'Deutsch' },
@@ -85,28 +104,36 @@ templates: {
 
 Set `props` on the template entry to override `PreviewProps`. A custom `render` function remains available for templates that need bespoke setup.
 
-## Template locations and source watching
+### Template requirements
 
-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 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.
 
-Use `watchPaths` to select the directories that should trigger preview regeneration during Vite development. Each entry is matched as a path fragment:
+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
-export default defineEmailLab({
-  watchPaths: [
-    'src/domains/billing/notifications',
-    'src/shared/message-templates',
-    'packages/transactional-mail',
-  ],
-  templates: {
-    invoice: { name: 'Invoice', component: InvoiceEmail },
-    welcome: { name: 'Welcome', component: WelcomeEmail },
+templates: {
+  welcome: {
+    name: 'Welcome',
+    render: () => <WelcomeEmail />,
   },
-  // sourceLocale, locales and provider...
-});
+}
+```
+
+## 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'],
+}),
 ```
 
-When `watchPaths` is omitted, the lab reloads for changes to JavaScript and TypeScript modules anywhere in the Vite application. In a larger codebase, configure it to avoid regenerating previews for unrelated source changes.
+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
 
@@ -132,9 +159,11 @@ 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
 

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,12 +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;
-    watchPaths?: string[];
+    sourceUpdates?: SourceUpdates;
 };
 export declare const defineEmailLab: (config: EmailLabConfig) => EmailLabConfig;

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,159 +1,183 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import { createElement as I, useMemo as A, useState as L, 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) => {
-  const t = [], a = e.createTreeWalker(e.body, NodeFilter.SHOW_TEXT);
-  let n = a.nextNode();
-  for (; n; ) {
-    const s = n, r = s.parentElement, l = s.data.trim();
-    if (r && !["STYLE", "SCRIPT"].includes(r.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}`;
+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 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 = a.nextNode();
+    s = r.nextNode();
   }
-  for (const s of e.body.querySelectorAll("*"))
-    for (const r of k) {
-      const l = s.getAttribute(r)?.trim();
-      l && $(l) && t.push({ value: l, apply: (o) => s.setAttribute(r, 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, a, n) => {
-  if (a === t) return e;
-  const s = new DOMParser().parseFromString(e, "text/html");
-  s.documentElement.lang = a;
-  const r = j(s), l = await n(r.map((o) => o.value));
-  return r.forEach((o, u) => o.apply(l[u] ?? o.value)), `<!doctype html>${s.documentElement.outerHTML}`;
+}, q = async (e, t, r, s) => {
+  if (r === t) return e;
+  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), a = await crypto.subtle.digest("SHA-256", t);
-  return Array.from(new Uint8Array(a).slice(0, 6), (n) => n.toString(16).padStart(2, "0")).join("");
-}, O = (e) => {
+  const t = new TextEncoder().encode(e), r = await crypto.subtle.digest("SHA-256", t);
+  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: a, 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
     ] })
   ] }),
   /* @__PURE__ */ d("div", { className: "revision", children: [
     "source ",
-    a || "…",
+    r || "…",
     " · preview ",
     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, N = (e, t, a) => {
-  const n = F(a), r = (e.pathname.startsWith(`${n}/`) ? decodeURIComponent(e.pathname.slice(n.length + 1)) : void 0) || e.searchParams.get("template") || void 0;
-  return r && t.includes(r) ? r : t[0];
-}, C = (e, t = 3) => e.searchParams.get("langs")?.split(",").filter(Boolean).slice(0, t) ?? [], B = (e, t, a) => {
-  const n = new URL(e);
-  return n.pathname = `${F(a)}/${encodeURIComponent(t)}`, n.searchParams.delete("template"), n;
-}, q = (e, t) => {
-  const a = new URL(e);
-  return t.length ? a.searchParams.set("langs", t.join(",")) : a.searchParams.delete("langs"), a;
-}, R = 3, D = (e) => {
-  const t = A(() => Object.keys(e.templates), [e.templates]), [a, n] = L(() => N(new URL(window.location.href), t, e.routeBasePath)), [s, r] = L(() => C(new URL(window.location.href), R)), [l, o] = L({}), [u, w] = L(""), [g, y] = L(0), b = e.templates[a] ?? e.templates[t[0]], h = A(() => `<!doctype html>${M(z(b))}`, [b]), P = e.locales.filter((i) => s.includes(i.code)), S = [e.sourceLocale, ...P];
-  return T(() => {
-    const i = N(new URL(window.location.href), t, e.routeBasePath);
-    window.history.replaceState({}, "", B(new URL(window.location.href), i, e.routeBasePath));
-    const v = () => {
-      n(N(new URL(window.location.href), t, e.routeBasePath)), r(C(new URL(window.location.href), R));
+  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];
+}, 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;
+}, 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(() => () => {
-  }, [e.watchPaths]), 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(S.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: S,
-    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: a,
-    sourceHtml: h,
+    selectedTemplateId: r,
+    sourceHtml: p,
     sourceRevision: u,
     templateIds: t,
-    toggleLocale: (i) => {
-      const v = s.includes(i) ? s.filter((m) => m !== i) : [...s, i].slice(0, R);
-      r(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);
+}, re = ({ config: e }) => {
+  const t = J(e);
   return /* @__PURE__ */ d("main", { className: "email-lab", children: [
     /* @__PURE__ */ d("header", { className: "topbar", children: [
       /* @__PURE__ */ d("div", { className: "topbar-copy", children: [
         /* @__PURE__ */ d("div", { className: "brand", children: [
-          /* @__PURE__ */ c("span", { className: "brand-mark" }),
-          /* @__PURE__ */ c("p", { className: "eyebrow", children: "React Email Locale Lab" })
+          /* @__PURE__ */ i("span", { className: "brand-mark" }),
+          /* @__PURE__ */ i("p", { className: "eyebrow", children: "React Email Locale Lab" })
         ] }),
-        /* @__PURE__ */ c("h1", { children: "See every language while you build." })
+        /* @__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: (a) => t.selectTemplate(a.target.value), children: t.templateIds.map((a) => /* @__PURE__ */ c("option", { value: a, children: e.templates[a].name }, a)) })
+          /* @__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: ",
@@ -163,88 +187,109 @@ 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((a) => /* @__PURE__ */ d(
+      /* @__PURE__ */ i("div", { className: "locale-options", children: e.locales.map((r) => /* @__PURE__ */ d(
         "button",
         {
-          className: t.activeLocaleCodes.includes(a.code) ? "locale-active" : "",
-          disabled: !t.activeLocaleCodes.includes(a.code) && t.activeLocaleCodes.length >= 3,
-          onClick: () => t.toggleLocale(a.code),
+          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", {}),
-            a.label
+            /* @__PURE__ */ i("i", {}),
+            r.label
           ]
         },
-        a.code
+        r.code
       )) })
     ] }),
     /* @__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((a) => /* @__PURE__ */ c(
-      _,
+    /* @__PURE__ */ i("section", { className: "grid", children: t.previewLocales.map((r) => /* @__PURE__ */ i(
+      G,
       {
-        locale: a,
-        preview: t.previews[a.code] ?? { html: t.sourceHtml, status: "stale" },
+        locale: r,
+        preview: t.previews[r.code] ?? { html: t.sourceHtml, status: "stale" },
         sourceRevision: t.sourceRevision,
         onRefresh: t.refreshPreviews
       },
-      a.code
+      r.code
     )) })
   ] });
-}, K = () => {
-  const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), n = async (r, l) => {
-    const o = a.get(r) ?? 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);
-    a.set(r, g), await o.catch(() => {
+    r.set(a, v), await c.catch(() => {
     });
     try {
-      return await l();
+      return await o();
     } finally {
-      u(), a.get(r) === g && a.delete(r);
+      u(), r.get(a) === v && r.delete(a);
     }
-  }, s = async (r, 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 = `${r}:${l}`;
-    let u = e.get(o);
+    const c = `${a}:${o}`;
+    let u = e.get(c);
     if (!u) {
-      if (await window.Translator.availability({ sourceLanguage: r, targetLanguage: l }) === "unavailable") throw new Error(`The browser cannot translate ${r} → ${l}.`);
-      u = window.Translator.create({ sourceLanguage: r, 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: r, sourceLocale: l, targetLocale: o }) {
-      if (r.length === 0) return [];
-      const u = await s(l, o), w = `${l}:${o}`;
-      return n(w, async () => {
-        const g = [];
-        for (const y of r) {
-          const b = `${w}:${y}`;
-          let h = t.get(b);
-          h || (h = await u.translate(y), t.set(b, h)), g.push(h);
+    async translate({ texts: a, sourceLocale: o, targetLocale: c }) {
+      if (a.length === 0) return [];
+      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/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.3.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"],