@react-email/preview-server 5.0.0-canary.1 → 5.0.0-canary.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-email/preview-server
 
+## 5.0.0-canary.3
+
+### Minor Changes
+
+- 95c7417: Dark mode switcher emulating email client color inversion
+
+## 5.0.0-canary.2
+
+### Patch Changes
+
+- 1b3176e: fallback to not text coloring for Node.js < 20
+
 ## 5.0.0-canary.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "5.0.0-canary.1",
+  "version": "5.0.0-canary.3",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "dependencies": {
@@ -14,6 +14,7 @@
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.2.8",
     "@react-email/tailwind": "2.0.0-canary.1",
@@ -24,6 +25,7 @@
     "@types/webpack": "5.28.5",
     "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
+    "colorjs.io": "0.5.2",
     "esbuild": "0.25.10",
     "framer-motion": "12.23.22",
     "json5": "2.2.3",
@@ -61,7 +63,7 @@
     "autoprefixer": "10.4.21",
     "tailwindcss": "3.4.0",
     "typescript": "5.8.3",
-    "@react-email/components": "1.0.0-canary.1"
+    "@react-email/components": "1.0.0-canary.2"
   },
   "license": "MIT",
   "repository": {

package/src/actions/render-email-by-path.tsx

@@ -2,7 +2,6 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import { styleText } from 'node:util';
 import logSymbols from 'log-symbols';
 import ora, { type Ora } from 'ora';
 import {
@@ -15,6 +14,7 @@ import { convertStackWithSourceMap } from '../utils/convert-stack-with-sourcemap
 import { createJsxRuntime } from '../utils/create-jsx-runtime';
 import { getEmailComponent } from '../utils/get-email-component';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
+import { styleText } from '../utils/style-text';
 import type { ErrorObject } from '../utils/types/error-object';
 
 export interface RenderedEmailMetadata {

package/src/app/preview/[...slug]/email-frame.tsx

@@ -0,0 +1,306 @@
+import { Slot } from '@radix-ui/react-slot';
+import Color from 'colorjs.io';
+import type { ComponentProps } from 'react';
+
+function* walkDom(element: Element): Generator<Element> {
+  if (element.children.length > 0) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children.item(i)!;
+      yield child;
+      yield* walkDom(child);
+    }
+  }
+}
+
+function invertColor(colorString: string, mode: 'foreground' | 'background') {
+  try {
+    const color = new Color(colorString).to('lch');
+
+    if (mode === 'background') {
+      // Keeps the same lightness if it's already dark. If it's bright inverts the lightness
+      // - This is a characteristic from Outlook iOS
+      // - Parcel does something very similar
+      //
+      // The 0.75 factor ensures that, even if the lightness is 100%, the final inverted is going to be 25%
+      // - This is a characteristic from Apple Mail
+      //
+      // The two extra 50 terms are so that the lightness inversion doesn't become a step function
+      if (color.lch.l! >= 50) {
+        color.lch.l = 50 - (color.lch.l! - 50) * 0.75;
+      }
+    } else if (mode === 'foreground') {
+      // The same as what's done for background, but inverts the check for brightness.
+      // If the color is already bright, then it keeps the same. If the color is dark, then it inverts the brightness
+      if (color.lch.l! < 50) {
+        color.lch.l = 50 - (color.lch.l! - 50) * 0.75;
+      }
+    }
+
+    // While not exactly, I've found that email clients generally tend to reduce the chrome by 20%.
+    // Apple Mail specifically reduces by exactly 20%, so we're closer to Apple Mail in this sense as well.
+    color.lch.c! *= 0.8;
+
+    return color.toString();
+  } catch (exception) {
+    console.error(`couldn't invert color ${colorString}`, exception);
+    return colorString;
+  }
+}
+
+const colorRegex = () =>
+  /#[0-9a-f]{3,4}|#[0-9a-f]{6,8}|(rgb|rgba|hsl|hsv|oklab|oklch|lab|lch|hwb)\s*\(.*?\)/gi;
+const namedColors = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  transparent: 'rgba(0,0,0,0)',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32',
+};
+const namedColorRegex = new RegExp(
+  `${Object.keys(namedColors).join('|')}`,
+  'gi',
+);
+
+function applyColorInversion(iframe: HTMLIFrameElement) {
+  const { contentDocument, contentWindow } = iframe;
+  if (!contentDocument || !contentWindow) return;
+
+  if (!contentDocument.body.style.color) {
+    contentDocument.body.style.color = 'rgb(0, 0, 0)';
+  }
+
+  for (const element of walkDom(contentDocument.documentElement)) {
+    if (
+      element instanceof
+      (contentWindow as unknown as typeof globalThis).HTMLElement
+    ) {
+      if (element.style.color) {
+        element.style.color = element.style.color
+          .replaceAll(colorRegex(), (color) => invertColor(color, 'foreground'))
+          .replaceAll(namedColorRegex, (namedColor) =>
+            invertColor(namedColors[namedColor], 'foreground'),
+          );
+        namedColorRegex.lastIndex = 0;
+      }
+      if (element.style.background) {
+        element.style.background = element.style.background
+          .replaceAll(colorRegex(), (color) => invertColor(color, 'background'))
+          .replaceAll(namedColorRegex, (namedColor) =>
+            invertColor(namedColors[namedColor], 'foreground'),
+          );
+        namedColorRegex.lastIndex = 0;
+      }
+      if (element.style.backgroundColor) {
+        element.style.backgroundColor = element.style.backgroundColor
+          .replaceAll(colorRegex(), (color) => invertColor(color, 'background'))
+          .replaceAll(namedColorRegex, (namedColor) =>
+            invertColor(namedColors[namedColor], 'foreground'),
+          );
+        namedColorRegex.lastIndex = 0;
+      }
+      if (element.style.borderColor) {
+        element.style.borderColor = element.style.borderColor
+          .replaceAll(colorRegex(), (color) => invertColor(color, 'background'))
+          .replaceAll(namedColorRegex, (namedColor) =>
+            invertColor(namedColors[namedColor], 'foreground'),
+          );
+        namedColorRegex.lastIndex = 0;
+      }
+      if (element.style.border) {
+        element.style.border = element.style.border
+          .replaceAll(colorRegex(), (color) => invertColor(color, 'background'))
+          .replaceAll(namedColorRegex, (namedColor) =>
+            invertColor(namedColors[namedColor], 'foreground'),
+          );
+        namedColorRegex.lastIndex = 0;
+      }
+    }
+  }
+}
+
+interface EmailFrameProps extends ComponentProps<'iframe'> {
+  markup: string;
+  width: number;
+  height: number;
+  darkMode: boolean;
+}
+
+export function EmailFrame({
+  markup,
+  width,
+  height,
+  darkMode,
+  ...rest
+}: EmailFrameProps) {
+  return (
+    <Slot
+      ref={(iframe: HTMLIFrameElement) => {
+        if (!iframe) return;
+
+        if (darkMode) {
+          applyColorInversion(iframe);
+        }
+      }}
+    >
+      <iframe
+        srcDoc={markup}
+        width={width}
+        height={height}
+        onLoad={(event) => {
+          if (darkMode) {
+            const iframe = event.currentTarget;
+            applyColorInversion(iframe);
+          }
+        }}
+        {...rest}
+        // This key makes sure that the iframe itself remounts to the DOM when theme changes, so
+        // that the color changes in dark mode can be easily undone when switching to light mode.
+        key={darkMode ? 'iframe-inverted-colors' : 'iframe-normal-colors'}
+      />
+    </Slot>
+  );
+}

package/src/app/preview/[...slug]/preview.tsx

@@ -15,10 +15,12 @@ import { Send } from '../../../components/send';
 import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { EmulatedDarkModeToggle } from '../../../components/topbar/emulated-dark-mode-toggle';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { usePreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { cn } from '../../../utils';
+import { EmailFrame } from './email-frame';
 import { ErrorOverlay } from './error-overlay';
 
 interface PreviewProps extends React.ComponentProps<'div'> {
@@ -32,9 +34,20 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const isDarkModeEnabled = searchParams.get('dark') !== null;
   const activeView = searchParams.get('view') ?? 'preview';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
+  const handleDarkModeChange = (enabled: boolean) => {
+    const params = new URLSearchParams(searchParams);
+    if (enabled) {
+      params.set('dark', '');
+    } else {
+      params.delete('dark');
+    }
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
@@ -83,26 +96,32 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   return (
     <>
       <Topbar emailTitle={emailTitle}>
-        {activeView === 'preview' && (
-          <ViewSizeControls
-            setViewHeight={(height) => {
-              setHeight(height);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            setViewWidth={(width) => {
-              setWidth(width);
-              flushSync(() => {
-                handleSaveViewSize();
-              });
-            }}
-            viewHeight={height}
-            viewWidth={width}
-            minWidth={minWidth}
-            minHeight={minHeight}
-          />
-        )}
+        {activeView === 'preview' ? (
+          <>
+            <ViewSizeControls
+              setViewHeight={(height) => {
+                setHeight(height);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              setViewWidth={(width) => {
+                setWidth(width);
+                flushSync(() => {
+                  handleSaveViewSize();
+                });
+              }}
+              viewHeight={height}
+              viewWidth={width}
+              minWidth={minWidth}
+              minHeight={minHeight}
+            />
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
+            />
+          </>
+        ) : null}
         <ActiveViewToggleGroup
           activeView={activeView}
           setActiveView={handleViewChange}
@@ -165,19 +184,18 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 }}
                 width={width}
               >
-                <iframe
+                <EmailFrame
                   className="max-h-full rounded-lg bg-white [color-scheme:auto]"
+                  darkMode={isDarkModeEnabled}
+                  markup={renderedEmailMetadata.markup}
+                  width={width}
+                  height={height}
+                  title={emailTitle}
                   ref={(iframe) => {
-                    if (iframe) {
-                      return makeIframeDocumentBubbleEvents(iframe);
-                    }
-                  }}
-                  srcDoc={renderedEmailMetadata.markup}
-                  style={{
-                    width: `${width}px`,
-                    height: `${height}px`,
+                    if (!iframe) return;
+
+                    return makeIframeDocumentBubbleEvents(iframe);
                   }}
-                  title={emailTitle}
                 />
               </ResizableWrapper>
             )}

package/src/components/icons/icon-base.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-export type IconElement = React.ElementRef<'svg'>;
-export type RootProps = React.ComponentPropsWithoutRef<'svg'>;
+export type IconElement = React.ComponentRef<'svg'>;
+export type RootProps = React.ComponentProps<'svg'>;
 
 export interface IconProps extends RootProps {
   size?: number;

package/src/components/icons/icon-moon.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconMoon = ({ ...props }: IconProps) => (
+  <IconBase {...props}>
+    <path
+      fill="currentColor"
+      d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+    />
+  </IconBase>
+);
+
+IconMoon.displayName = 'IconMoon';

package/src/components/icons/icon-sun.tsx

@@ -0,0 +1,13 @@
+import type { IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconSun = ({ ...props }: IconProps) => (
+  <IconBase {...props}>
+    <path
+      fill="currentColor"
+      d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+    />
+  </IconBase>
+);
+
+IconSun.displayName = 'IconSun';

package/src/components/topbar/emulated-dark-mode-toggle.tsx

@@ -0,0 +1,36 @@
+import * as Toggle from '@radix-ui/react-toggle';
+import { cn } from '../../utils';
+import { IconMoon } from '../icons/icon-moon';
+import { Tooltip } from '../tooltip';
+
+interface EmulatedDarkModeToggleProps {
+  enabled: boolean;
+  onChange: (enabled: boolean) => unknown;
+}
+
+export const EmulatedDarkModeToggle = ({
+  enabled,
+  onChange,
+}: EmulatedDarkModeToggleProps) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Toggle.Root
+          value="dark"
+          className={cn(
+            'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
+            'text-slate-11 hover:text-slate-12 aria-pressed:text-slate-12 aria-pressed:bg-slate-4',
+          )}
+          pressed={enabled}
+          onPressedChange={() => onChange(!enabled)}
+        >
+          <IconMoon />
+        </Toggle.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        When enabled, inverts colors in the preview emulating what email clients
+        do in dark mode.
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/utils/style-text.ts

@@ -0,0 +1,11 @@
+/**
+ * Centralized fallback for Node versions (<20.12.0) without util.styleText.
+ * Returns the original text when styleText is unavailable.
+ */
+import * as nodeUtil from 'node:util';
+
+type StyleTextFunction = (style: string, text: string) => string;
+
+export const styleText: StyleTextFunction = (nodeUtil as any).styleText
+  ? (nodeUtil as any).styleText
+  : (_: string, text: string) => text;

package/.next/server/chunks/571.js

@@ -1 +0,0 @@
-exports.id=571,exports.ids=[571],exports.modules={8332:(a,b,c)=>{"use strict";c.r(b),c.d(b,{getEmailsDirectoryMetadata:()=>i});var d=c(73024),e=c.n(d),f=c(76760),g=c.n(f);let h=async a=>{let b;try{b=await e().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=g().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let f=/\bexport\s+default\b/gm.test(d),h=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return f||h||i},i=async(a,b=!1,c=!1,d=a)=>{if(!e().existsSync(a))return;let f=await e().promises.readdir(a,{withFileTypes:!0}),j=await Promise.all(f.map(b=>h(g().join(a,b.name)))),k=f.filter((a,b)=>j[b]).map(a=>b?a.name:a.name.replace(g().extname(a.name),"")),l=await Promise.all(f.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>i(g().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:g().relative(d,a),directoryName:a.split(g().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:g().join(b.directoryName,a.directoryName)}}return b})(m):m}},18695:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>l,J:()=>k});var d=c(6362),e=c(2179),f=c(14298);let g=(0,f.createServerReference)("7fa099a1c109e1aac584dd082e37860081313b0947",f.callServer,void 0,f.findSourceMapURL,"getEmailsDirectoryMetadataAction");var h=c(70985),i=c(39520);let j=(0,e.createContext)(void 0),k=()=>{let a=(0,e.useContext)(j);if(void 0===a)throw Error("Cannot call `useEmails` outside of an `EmailsContext` provider.");return a},l=a=>{let[b,c]=(0,e.useState)(a.initialEmailsDirectoryMetadata);return h.Hf||h.m4||(0,i.a)(async()=>{let b=await g(a.initialEmailsDirectoryMetadata.absolutePath);if(b)c(b);else throw Error("Hot reloading: unable to find the emails directory to update the sidebar")}),(0,d.jsx)(j.Provider,{value:{emailsDirectoryMetadata:b},children:a.children})}},25880:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,36100,23)),Promise.resolve().then(c.t.bind(c,99455,23)),Promise.resolve().then(c.t.bind(c,26835,23)),Promise.resolve().then(c.t.bind(c,36726,23)),Promise.resolve().then(c.t.bind(c,33666,23)),Promise.resolve().then(c.t.bind(c,23670,23)),Promise.resolve().then(c.t.bind(c,30006,23)),Promise.resolve().then(c.t.bind(c,41971,23)),Promise.resolve().then(c.t.bind(c,40614,23))},27378:(a,b,c)=>{Promise.resolve().then(c.bind(c,90948))},35191:()=>{},35608:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,5058,23)),Promise.resolve().then(c.t.bind(c,35621,23)),Promise.resolve().then(c.t.bind(c,44325,23)),Promise.resolve().then(c.t.bind(c,20908,23)),Promise.resolve().then(c.t.bind(c,83572,23)),Promise.resolve().then(c.t.bind(c,25928,23)),Promise.resolve().then(c.t.bind(c,57920,23)),Promise.resolve().then(c.t.bind(c,2761,23)),Promise.resolve().then(c.bind(c,98400))},36616:(a,b,c)=>{"use strict";c.r(b),c.d(b,{"7fa099a1c109e1aac584dd082e37860081313b0947":()=>l});var d=c(90466);c(69300);var e=c(73024),f=c.n(e),g=c(76760),h=c.n(g);let i=async a=>{let b;try{b=await f().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=h().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let e=/\bexport\s+default\b/gm.test(d),g=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return e||g||i},j=async(a,b=!1,c=!1,d=a)=>{if(!f().existsSync(a))return;let e=await f().promises.readdir(a,{withFileTypes:!0}),g=await Promise.all(e.map(b=>i(h().join(a,b.name)))),k=e.filter((a,b)=>g[b]).map(a=>b?a.name:a.name.replace(h().extname(a.name),"")),l=await Promise.all(e.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>j(h().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:h().relative(d,a),directoryName:a.split(h().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:h().join(b.directoryName,a.directoryName)}}return b})(m):m};var k=c(18012);let l=async(a,b=!1,c=!1,d=a)=>j(a,b,c,d);(0,k.D)([l]),(0,d.A)(l,"7fa099a1c109e1aac584dd082e37860081313b0947",null)},39520:(a,b,c)=>{"use strict";c.d(b,{a:()=>f});var d=c(2179),e=c(80095);let f=a=>{let b=(0,d.useRef)(null);(0,d.useEffect)(()=>{b.current||(b.current=(0,e.io)());let c=b.current;return c.on("reload",b=>{console.debug("Reloading..."),a(b)}),()=>{c.off()}},[a])}},50938:(a,b,c)=>{Promise.resolve().then(c.bind(c,18695))},54208:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>n,dynamic:()=>m,metadata:()=>l});var d=c(51064);c(35191);var e=c(90948),f=c(8332),g=c(88155),h=c(84858),i=c.n(h),j=c(54629),k=c.n(j);let l={title:"React Email"},m="force-dynamic";async function n({children:a}){let b=await (0,f.getEmailsDirectoryMetadata)(g.Z8);if(void 0===b)throw Error(`Could not find the emails directory specified under ${g.Z8}!`);return(0,d.jsx)("html",{className:`${i().variable} ${k().variable} font-sans`,lang:"en",children:(0,d.jsx)("body",{className:"relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12",children:(0,d.jsx)("div",{className:"bg-gradient-to-t from-slate-3 flex flex-col",children:(0,d.jsx)(e.EmailsProvider,{initialEmailsDirectoryMetadata:b,children:a})})})})}},70985:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>d,m4:()=>e}),process.env.USER_PROJECT_LOCATION,process.env.PREVIEW_SERVER_LOCATION,process.env.EMAILS_DIR_ABSOLUTE_PATH;let d="true"===process.env.NEXT_PUBLIC_IS_BUILDING,e="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},72112:()=>{},86944:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>e});var d=c(89993);let e=async a=>[{type:"image/x-icon",sizes:"16x16",url:(0,d.fillMetadataSegment)(".",await a.params,"favicon.ico")+""}]},88155:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>g,Z8:()=>f,m4:()=>h,n_:()=>e,w5:()=>d});let d=process.env.USER_PROJECT_LOCATION,e=process.env.PREVIEW_SERVER_LOCATION,f=process.env.EMAILS_DIR_ABSOLUTE_PATH,g="true"===process.env.NEXT_PUBLIC_IS_BUILDING,h="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},90948:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>e});var d=c(9756);(0,d.registerClientReference)(function(){throw Error("Attempted to call useEmails() from the server but useEmails is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","useEmails");let e=(0,d.registerClientReference)(function(){throw Error("Attempted to call EmailsProvider() from the server but EmailsProvider is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","EmailsProvider")},92665:()=>{}};