@octanejs/email 0.0.1

package/LICENSE.react-email

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

package/README.md

@@ -0,0 +1,32 @@
+# @octanejs/email
+
+Email-safe components from [React Email](https://github.com/resend/react-email), ported to Octane.
+
+## Installation
+
+```sh
+npm install @octanejs/email
+pnpm add @octanejs/email
+```
+
+```tsrx
+import { Button, Html, render } from '@octanejs/email';
+
+function Email(props: { url: string }) @{
+	<Html><Button href={props.url}>Open</Button></Html>
+}
+
+const html = await render(Email, { url: 'https://example.com' });
+```
+
+The renderer accepts an Octane component and props because Octane server rendering uses component entry points. It returns XHTML Transitional email markup with no hydration markers.
+
+Included primitives: `Body`, `Button`, `CodeInline`, `Column`, `Container`, `Font`, `Head`, `Heading`, `Hr`, `Html`, `Img`, `Link`, `Preview`, `Row`, `Section`, and `Text`.
+
+Rich email authoring includes `Markdown`, Prism-powered `CodeBlock`, and `Tailwind`. Tailwind utilities are applied after static rendering, so classes inside ordinary nested `.tsrx` components are inlined correctly; responsive and pseudo rules are emitted into the document head.
+
+Use `<Preview text="Inbox preview" />` and `<Markdown children={"# Hello"} />`. Octane's natural JSX children are render blocks, so text-inspecting components use explicit string props.
+
+Template export and development tooling lives in `@octanejs/email-cli`.
+
+Ported from React Email 6.9.2 at `ffe605819782b31d7f946e30f938b1b63e6b239c` (MIT).

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@octanejs/email",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "octane": {
+    "sourceEnvironment": "node"
+  },
+  "description": "React Email's email-safe component primitives and static renderer for Octane.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/email"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE.react-email"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@types/css-tree": "2.3.10",
+    "@types/prismjs": "1.26.6",
+    "css-tree": "3.2.1",
+    "marked": "^15.0.12",
+    "prismjs": "^1.30.0",
+    "tailwindcss": "4.3.3"
+  },
+  "peerDependencies": {
+    "octane": "0.1.50"
+  },
+  "devDependencies": {
+    "@react-email/components": "1.0.12",
+    "@react-email/render": "2.0.6",
+    "@tsrx/react": "^0.2.61",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "vitest": "^4.1.10",
+    "octane": "0.1.50"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/button-utils.ts

@@ -0,0 +1,73 @@
+import type { EmailStyle } from './types.ts';
+
+type PaddingValue = string | number | undefined;
+
+function toPixels(value: PaddingValue): number {
+	if (!value) return 0;
+	if (typeof value === 'number') return value;
+
+	const match = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (!match) return 0;
+
+	const amount = Number.parseFloat(match[1]!);
+	switch (match[2]) {
+		case 'em':
+		case 'rem':
+			return amount * 16;
+		case '%':
+			return (amount / 100) * 600;
+		default:
+			return amount;
+	}
+}
+
+function expandPadding(value: PaddingValue): PaddingValue[] {
+	if (typeof value === 'number') return [value, value, value, value];
+	if (typeof value !== 'string') return [];
+
+	const values = value.trim().split(/\s+/);
+	switch (values.length) {
+		case 1:
+			return [values[0], values[0], values[0], values[0]];
+		case 2:
+			return [values[0], values[1], values[0], values[1]];
+		case 3:
+			return [values[0], values[1], values[2], values[1]];
+		case 4:
+			return values;
+		default:
+			return [];
+	}
+}
+
+export function parseButtonPadding(style: EmailStyle) {
+	const expanded = expandPadding(style.padding as PaddingValue);
+	const values: PaddingValue[] = [
+		(style.paddingTop as PaddingValue) ?? expanded[0],
+		(style.paddingRight as PaddingValue) ?? expanded[1],
+		(style.paddingBottom as PaddingValue) ?? expanded[2],
+		(style.paddingLeft as PaddingValue) ?? expanded[3],
+	];
+	return values.map((value) => (value === undefined ? undefined : toPixels(value))) as [
+		number | undefined,
+		number | undefined,
+		number | undefined,
+		number | undefined,
+	];
+}
+
+export function computeOutlookSpacing(expectedWidth: number) {
+	if (expectedWidth === 0) return [0, 0] as const;
+
+	let spaceCount = 0;
+	let fontWidth = Number.POSITIVE_INFINITY;
+	while (fontWidth > 5) {
+		spaceCount++;
+		fontWidth = expectedWidth / spaceCount / 2;
+	}
+	return [fontWidth, spaceCount] as const;
+}
+
+export function pixelsToPoints(value: number | undefined) {
+	return value === undefined || Number.isNaN(value) ? undefined : (value * 3) / 4;
+}

package/src/components.tsrx

@@ -0,0 +1,368 @@
+import type { OctaneNode } from 'octane';
+import type { EmailElementProps, EmailStyle } from './types.ts';
+import { computeOutlookSpacing, parseButtonPadding, pixelsToPoints } from './button-utils.ts';
+import { computeMargins, splitPadding, withMargins } from './utils.ts';
+
+function withRef<T>(ref: ((element: T | null) => void) | { current: T | null } | null | undefined) {
+	return ref === undefined ? {} : { ref };
+}
+
+export type BodyProps = EmailElementProps<HTMLBodyElement>;
+export function Body({ children, style = {}, ref, ...props }: BodyProps) @{
+	const reset: EmailStyle = {
+		background: style.background,
+		backgroundColor: style.backgroundColor,
+	};
+	for (const key of [
+		'margin',
+		'marginTop',
+		'marginRight',
+		'marginBottom',
+		'marginLeft',
+		'padding',
+		'paddingTop',
+		'paddingRight',
+		'paddingBottom',
+		'paddingLeft',
+	]) {
+		if ((style as Record<string, unknown>)[key] !== undefined) (reset as Record<
+			string,
+			unknown
+		>)[key] = 0;
+	}
+	<body
+		{...props}
+		{...withRef(ref)}
+		dir={props.dir as string | undefined ?? 'ltr'}
+		lang={props.lang as string | undefined ?? 'en'}
+		style={reset}
+	>
+		<table
+			border={0}
+			width="100%"
+			cellPadding="0"
+			cellSpacing="0"
+			role="presentation"
+			align="center"
+		>
+			<tbody>
+				<tr>
+					<td
+						dir={props.dir as string | undefined ?? 'ltr'}
+						lang={props.lang as string | undefined ?? 'en'}
+						style={style}
+					>{children}</td>
+				</tr>
+			</tbody>
+		</table>
+	</body>
+}
+
+export type HtmlProps = EmailElementProps<HTMLHtmlElement> & { lang?: string; dir?: string };
+export function Html({ children, lang = 'en', dir = 'ltr', ref, ...props }: HtmlProps) @{
+	<html {...props} {...withRef(ref)} dir={dir} lang={lang}>{children}</html>
+}
+
+export type HeadProps = EmailElementProps<HTMLHeadElement>;
+export function Head({ children }: HeadProps) @{
+	<>
+		<meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
+		<meta name="x-apple-disable-message-reformatting" />
+		{/* Octane forbids authored <head>; render() extracts this temporary carrier. */}
+		<body data-octane-email-head="head">{children}</body>
+	</>
+}
+
+export type ContainerProps = EmailElementProps<HTMLTableElement>;
+export function Container({ children, style = {}, ref, ...props }: ContainerProps) @{
+	const [cellStyle, tableStyle] = splitPadding(style);
+	<table
+		align="center"
+		width="100%"
+		{...props}
+		{...withRef(ref)}
+		border={0}
+		cellPadding="0"
+		cellSpacing="0"
+		role="presentation"
+		style={{ maxWidth: '37.5em', ...tableStyle }}
+	>
+		<tbody>
+			<tr style={{ width: '100%' }}>
+				<td style={cellStyle}>{children}</td>
+			</tr>
+		</tbody>
+	</table>
+}
+
+export type SectionProps = EmailElementProps<HTMLTableElement>;
+export function Section({ children, style = {}, ref, ...props }: SectionProps) @{
+	const [cellStyle, tableStyle] = splitPadding(style);
+	<table
+		align="center"
+		width="100%"
+		border={0}
+		cellPadding="0"
+		cellSpacing="0"
+		role="presentation"
+		{...props}
+		{...withRef(ref)}
+		style={tableStyle}
+	>
+		<tbody>
+			<tr>
+				<td style={cellStyle}>{children}</td>
+			</tr>
+		</tbody>
+	</table>
+}
+
+export type RowProps = EmailElementProps<HTMLTableElement>;
+export function Row({ children, style, ref, ...props }: RowProps) @{
+	<table
+		align="center"
+		width="100%"
+		border={0}
+		cellPadding="0"
+		cellSpacing="0"
+		role="presentation"
+		{...props}
+		{...withRef(ref)}
+		style={style}
+	>
+		<tbody style={{ width: '100%' }}>
+			<tr style={{ width: '100%' }}>{children}</tr>
+		</tbody>
+	</table>
+}
+
+export type ColumnProps = EmailElementProps<HTMLTableCellElement>;
+export function Column({ children, style, ref, ...props }: ColumnProps) @{
+	<td {...props} {...withRef(ref)} data-id="__react-email-column" style={style}>{children}</td>
+}
+
+export type TextProps = EmailElementProps<HTMLParagraphElement>;
+export function Text({ style = {}, ref, ...props }: TextProps) @{
+	const defaults: EmailStyle = {};
+	if (style.marginTop === undefined) defaults.marginTop = '16px';
+	if (style.marginBottom === undefined) defaults.marginBottom = '16px';
+	const margins = computeMargins({ ...defaults, ...style });
+	<p
+		{...props}
+		{...withRef(ref)}
+		style={{ fontSize: '14px', lineHeight: '24px', ...style, ...margins }}
+	/>
+}
+
+export type LinkProps = EmailElementProps<HTMLAnchorElement> & { href?: string; target?: string };
+export function Link({ children, target = '_blank', style, ref, ...props }: LinkProps) @{
+	<a
+		{...props}
+		{...withRef(ref)}
+		style={{ color: '#067df7', textDecorationLine: 'none', ...style }}
+		target={target}
+	>{children}</a>
+}
+
+export type ImgProps =
+	EmailElementProps<HTMLImageElement> & {
+		alt?: string;
+		src?: string;
+		width?: string | number;
+		height?: string | number;
+	};
+export function Img({ alt = '', src, width, height, style, ref, ...props }: ImgProps) @{
+	<img
+		{...props}
+		{...withRef(ref)}
+		alt={alt}
+		height={height}
+		src={src}
+		style={{ display: 'block', outline: 'none', border: 'none', textDecoration: 'none', ...style }}
+		width={width}
+	/>
+}
+
+export type HrProps = EmailElementProps<HTMLHRElement>;
+export function Hr({ style, ref, ...props }: HrProps) @{
+	<hr
+		{...props}
+		{...withRef(ref)}
+		style={{
+			width: '100%',
+			border: 'none',
+			borderColor: 'transparent',
+			borderTop: '1px solid #eaeaea',
+			...style,
+		}}
+	/>
+}
+
+export type HeadingProps =
+	EmailElementProps<HTMLHeadingElement> & {
+		as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+		m?: string | number;
+		mx?: string | number;
+		my?: string | number;
+		mt?: string | number;
+		mr?: string | number;
+		mb?: string | number;
+		ml?: string | number;
+	};
+export function Heading({
+	as: Tag = 'h1',
+	children,
+	style,
+	ref,
+	m,
+	mx,
+	my,
+	mt,
+	mr,
+	mb,
+	ml,
+	...props
+}: HeadingProps) @{
+	<Tag
+		{...props}
+		{...withRef(ref)}
+		style={{ ...withMargins({ m, mx, my, mt, mr, mb, ml }), ...style }}
+	>{children}</Tag>
+}
+
+export interface FontProps {
+	fontFamily: string;
+	fallbackFontFamily: string | string[];
+	webFont?: {
+		url: string;
+		format: 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
+	};
+	fontStyle?: string;
+	fontWeight?: string | number;
+}
+export function Font({
+	fontFamily,
+	fallbackFontFamily,
+	webFont,
+	fontStyle = 'normal',
+	fontWeight = 400,
+}: FontProps) @{
+	const fallbacks = Array.isArray(fallbackFontFamily) ? fallbackFontFamily : [fallbackFontFamily];
+	const source = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : '';
+	const css = `\n    @font-face {\n      font-family: '${fontFamily}';\n      font-style: ${fontStyle};\n      font-weight: ${fontWeight};\n      mso-font-alt: '${fallbacks[0]}';\n      ${source}\n    }\n\n    * {\n      font-family: '${fontFamily}', ${fallbacks.join(
+		', ',
+	)};\n    }\n  `;
+	// A dynamic host keeps email CSS global instead of entering Octane's scoped-style pipeline.
+	const Style = 'style';
+	<Style dangerouslySetInnerHTML={{ __html: css }} />
+}
+
+const PREVIEW_MAX_LENGTH = 200;
+const WHITE_SPACE = ' ‌​‍‎‏';
+export type PreviewProps =
+	Readonly<Omit<EmailElementProps<HTMLDivElement>, 'children'>> & Readonly<{
+		text?: string;
+		children?: string | string[];
+		useTitleTag?: boolean;
+	}>;
+export function Preview({
+	text: explicitText,
+	children = '',
+	useTitleTag = true,
+	ref,
+	...props
+}: PreviewProps) @{
+	const childText =
+		Array.isArray(children)
+			? children.join('')
+			: typeof children === 'string'
+				? children
+				: '';
+	const text = (explicitText ?? childText).substring(0, PREVIEW_MAX_LENGTH);
+	<>
+		@if (useTitleTag) {
+			<title>{text}</title>
+		}
+		<div
+			style={{
+				display: 'none',
+				overflow: 'hidden',
+				lineHeight: '1px',
+				opacity: 0,
+				maxHeight: 0,
+				maxWidth: 0,
+			}}
+			data-skip-in-text={true}
+			{...props}
+			{...withRef(ref)}
+		>
+			{text}
+			@if (text.length < PREVIEW_MAX_LENGTH) {
+				<div>{WHITE_SPACE.repeat(PREVIEW_MAX_LENGTH - text.length)}</div>
+			}
+		</div>
+	</>
+}
+
+export type CodeInlineProps = EmailElementProps<HTMLElement>;
+export function CodeInline({ children, style, ref, ...props }: CodeInlineProps) @{
+	<code
+		{...props}
+		{...withRef(ref)}
+		style={{
+			display: 'inline',
+			background: 'rgba(135,131,120,0.15)',
+			padding: '2px 4px',
+			borderRadius: '4px',
+			...style,
+		}}
+	>{children}</code>
+}
+
+export type ButtonProps = EmailElementProps<HTMLAnchorElement> & { href?: string; target?: string };
+export function Button({ children, style = {}, target = '_blank', ref, ...props }: ButtonProps) @{
+	const [paddingTop, paddingRight, paddingBottom, paddingLeft] = parseButtonPadding(style);
+	const textRaise = pixelsToPoints((paddingTop ?? 0) + (paddingBottom ?? 0));
+	const [leftFontWidth, leftSpaceCount] = computeOutlookSpacing(paddingLeft ?? 0);
+	const [rightFontWidth, rightSpaceCount] = computeOutlookSpacing(paddingRight ?? 0);
+	const buttonStyle: EmailStyle = {
+		lineHeight: '100%',
+		textDecoration: 'none',
+		display: 'inline-block',
+		maxWidth: '100%',
+		msoPaddingAlt: '0px',
+		...style,
+		paddingTop,
+		paddingRight,
+		paddingBottom,
+		paddingLeft,
+	};
+	const labelStyle: EmailStyle = {
+		maxWidth: '100%',
+		display: 'inline-block',
+		lineHeight: '120%',
+		msoPaddingAlt: '0px',
+		msoTextRaise: pixelsToPoints(paddingBottom),
+	};
+	<a {...props} {...withRef(ref)} style={buttonStyle} target={target}>
+		<span
+			dangerouslySetInnerHTML={{
+				__html: `<!--[if mso]><i style="mso-font-width:${
+					leftFontWidth * 100
+				}%;mso-text-raise:${textRaise}px" hidden>${'&#8202;'.repeat(
+					leftSpaceCount,
+				)}</i><![endif]-->`,
+			}}
+		/>
+		<span style={labelStyle}>{children}</span>
+		<span
+			dangerouslySetInnerHTML={{
+				__html: `<!--[if mso]><i style="mso-font-width:${
+					rightFontWidth * 100
+				}%" hidden>${'&#8202;'.repeat(rightSpaceCount)}&#8203;</i><![endif]-->`,
+			}}
+		/>
+	</a>
+}
+
+export type { OctaneNode };

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './components.tsrx';
+export * from './rich-content.tsrx';
+export * from './render.ts';
+export * from './tailwind/index.ts';
+export type { MarkdownStyles } from './markdown.ts';
+export type { EmailElementProps, EmailStyle } from './types.ts';