react-email-locale-lab 0.2.0 → 0.3.0

package/README.md

@@ -1,10 +1,14 @@
 # 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.
+
+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.
 
 ## Install
 
@@ -12,7 +16,7 @@ This project exists to test the technical and product viability of that workflow
 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 as peer dependencies.
 
 Create a configuration in the consuming project:
 
@@ -26,6 +30,7 @@ import 'react-email-locale-lab/styles.css';
 
 const config = defineEmailLab({
   routeBasePath: '/preview',
+  watchPaths: ['src/emails'],
   sourceLocale: { code: 'en', label: 'English' },
   locales: [{ code: 'de', label: 'Deutsch' }],
   provider: browserTranslatorProvider(),
@@ -55,6 +60,7 @@ Open `http://localhost:4173/preview/welcome`, select up to three languages, then
 ```tsx
 export default defineEmailLab({
   routeBasePath: '/preview',
+  watchPaths: ['src/emails'],
   sourceLocale: { code: 'en', label: 'English' },
   locales: [
     { code: 'de', label: 'Deutsch' },
@@ -79,6 +85,29 @@ 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
+
+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.
+
+Use `watchPaths` to select the directories that should trigger preview regeneration during Vite development. Each entry is matched as a path fragment:
+
+```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 },
+  },
+  // sourceLocale, locales and provider...
+});
+```
+
+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.
+
 ## Template routes
 
 Every configured template has a stable preview route:
@@ -109,4 +138,4 @@ The included provider uses the browser's built-in Translator API. Language packs
 
 ## 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/core/types.d.ts

@@ -33,5 +33,6 @@ export type EmailLabConfig = {
     templates: Record<string, EmailTemplate>;
     provider: TranslationProvider;
     routeBasePath?: string;
+    watchPaths?: string[];
 };
 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.js

@@ -1,40 +1,40 @@
 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 { 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 = [], r = e.createTreeWalker(e.body, NodeFilter.SHOW_TEXT);
-  let n = r.nextNode();
+  const t = [], a = e.createTreeWalker(e.body, NodeFilter.SHOW_TEXT);
+  let n = a.nextNode();
   for (; n; ) {
-    const s = n, a = s.parentElement, l = s.data.trim();
-    if (a && !["STYLE", "SCRIPT"].includes(a.tagName) && $(l)) {
+    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}`;
       } });
     }
-    n = r.nextNode();
+    n = a.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 r of k) {
+      const l = s.getAttribute(r)?.trim();
+      l && $(l) && t.push({ value: l, apply: (o) => s.setAttribute(r, o) });
     }
   return t;
-}, H = async (e, t, r, n) => {
-  if (r === t) return e;
+}, H = async (e, t, a, n) => {
+  if (a === 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}`;
+  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}`;
 }, 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("");
+  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 DOMParser().parseFromString(e, "text/html");
   return Array.from(t.body.querySelectorAll("[style]")).find(
     (s) => s.style.display === "none" && s.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: [
+}, _ = ({ locale: e, preview: t, sourceRevision: a, onRefresh: n }) => /* @__PURE__ */ d("article", { className: "preview-card", children: [
   /* @__PURE__ */ d("header", { className: "preview-header", children: [
     /* @__PURE__ */ d("div", { children: [
       /* @__PURE__ */ c("strong", { children: e.label }),
@@ -47,7 +47,7 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
   ] }),
   /* @__PURE__ */ d("div", { className: "revision", children: [
     "source ",
-    r || "…",
+    a || "…",
     " · preview ",
     t.revision ?? "pending"
   ] }),
@@ -62,26 +62,26 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
   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 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) => {
+}, 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(r)}/${encodeURIComponent(t)}`, n.searchParams.delete("template"), n;
+  return n.pathname = `${F(a)}/${encodeURIComponent(t)}`, n.searchParams.delete("template"), n;
 }, q = (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];
+  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 = R(new URL(window.location.href), t, e.routeBasePath);
+    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(R(new URL(window.location.href), t, e.routeBasePath)), a(C(new URL(window.location.href), S));
+      n(N(new URL(window.location.href), t, e.routeBasePath)), r(C(new URL(window.location.href), R));
     };
     return window.addEventListener("popstate", v), () => window.removeEventListener("popstate", v);
   }, [e.routeBasePath, t]), T(() => () => {
-  }, []), T(() => {
+  }, [e.watchPaths]), T(() => {
     let i = !1;
     return U(h).then((v) => {
       i || w(v);
@@ -90,7 +90,7 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
     };
   }, [h]), T(() => {
     let i = !1;
-    return o((m) => Object.fromEntries(N.map((p) => [
+    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 }
     ]))), (async () => {
@@ -124,33 +124,36 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
   }, [h, g, s.join(",")]), {
     activeLocaleCodes: s,
     activeLocales: P,
-    previewLocales: N,
+    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));
     },
-    selectedTemplateId: r,
+    selectedTemplateId: a,
     sourceHtml: h,
     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));
+      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));
     }
   };
 }, J = ({ config: e }) => {
   const t = D(e);
-  return /* @__PURE__ */ d("main", { children: [
+  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__ */ 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__ */ c("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__ */ 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__ */ d("span", { className: "provider", children: [
           "Provider: ",
@@ -163,18 +166,18 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
         /* @__PURE__ */ c("strong", { children: "Preview languages" }),
         /* @__PURE__ */ c("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__ */ c("div", { className: "locale-options", children: e.locales.map((a) => /* @__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),
+          className: t.activeLocaleCodes.includes(a.code) ? "locale-active" : "",
+          disabled: !t.activeLocaleCodes.includes(a.code) && t.activeLocaleCodes.length >= 3,
+          onClick: () => t.toggleLocale(a.code),
           children: [
             /* @__PURE__ */ c("i", {}),
-            r.label
+            a.label
           ]
         },
-        r.code
+        a.code
       )) })
     ] }),
     /* @__PURE__ */ d("section", { className: "notice", children: [
@@ -185,55 +188,55 @@ const k = ["alt", "title", "aria-label"], $ = (e) => new RegExp("\\p{L}", "u").t
       /* @__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__ */ c("section", { className: "grid", children: t.previewLocales.map((r) => /* @__PURE__ */ c(
+    /* @__PURE__ */ c("section", { className: "grid", children: t.previewLocales.map((a) => /* @__PURE__ */ c(
       _,
       {
-        locale: r,
-        preview: t.previews[r.code] ?? { html: t.sourceHtml, status: "stale" },
+        locale: a,
+        preview: t.previews[a.code] ?? { html: t.sourceHtml, status: "stale" },
         sourceRevision: t.sourceRevision,
         onRefresh: t.refreshPreviews
       },
-      r.code
+      a.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();
+  const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), n = async (r, l) => {
+    const o = a.get(r) ?? Promise.resolve();
     let u = () => {
     };
     const w = new Promise((y) => {
       u = y;
     }), g = o.catch(() => {
     }).then(() => w);
-    r.set(a, g), await o.catch(() => {
+    a.set(r, g), await o.catch(() => {
     });
     try {
       return await l();
     } finally {
-      u(), r.get(a) === g && r.delete(a);
+      u(), a.get(r) === g && a.delete(r);
     }
-  }, s = async (a, l) => {
+  }, s = async (r, l) => {
     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}`;
+    const o = `${r}:${l}`;
     let u = e.get(o);
     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: 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);
     }
     return u;
   };
   return {
     name: "Browser Translator · on-device",
-    async translate({ texts: a, sourceLocale: l, targetLocale: o }) {
-      if (a.length === 0) return [];
+    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 a) {
-          const L = `${w}:${y}`;
-          let h = t.get(L);
-          h || (h = await u.translate(y), t.set(L, h)), g.push(h);
+        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);
         }
         return g;
       });

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-locale-lab",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Real-time multi-language previews for React Email templates.",
   "type": "module",
   "main": "./dist/index.js",