@ctrl-ui/react 0.8.0 → 0.8.2

package/README.md

@@ -68,3 +68,4 @@ Install a peer only when you import the component that needs it.
 | `ui/phone-input` | `react-phone-number-input`, `libphonenumber-js`, `zod` |
 | `ui/resizable` | `react-resizable-panels` |
 | `chat-composer` | `prosemirror-*` |
+| `email/email`, `email/templates` | `react-email` |

package/dist/blocks/coding-agent.js

@@ -3,7 +3,9 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ChatLayout, ChatThread } from "../chat-layout.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
 //#region src/blocks/coding-agent.tsx

package/dist/blocks/file-explorer.js

@@ -3,7 +3,9 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
 import { groupFileExplorerItems, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";

package/dist/blocks/settings.js

@@ -3,7 +3,9 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group.js";
-import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
+import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
 import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";

package/dist/control-props.d.ts

@@ -23,6 +23,7 @@ type OpenChangeEventDetails = {
   trigger: Element | undefined;
 };
 type SelectionIndicator = "none" | "slide";
+type HoverIndicator = "none" | "hover";
 declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
 //#endregion
-export { ControlledChoice, ControlledMultiChoice, FormSubmitEvent, OpenChangeEventDetails, OpenChangeReason, RenderProp, SIDEBAR_COOKIE_NAME, SelectionIndicator };
+export { ControlledChoice, ControlledMultiChoice, FormSubmitEvent, HoverIndicator, OpenChangeEventDetails, OpenChangeReason, RenderProp, SIDEBAR_COOKIE_NAME, SelectionIndicator };

package/dist/email/email.d.ts

@@ -0,0 +1,28 @@
+import { EmailTheme } from "./theme.js";
+import { ReactNode } from "react";
+import { ButtonProps, HeadingProps, LinkProps, TextProps } from "react-email";
+//#region src/email/email.d.ts
+declare function EmailLayout({ theme, preview, children, head, lang, dir }: {
+  theme: EmailTheme;
+  preview: string;
+  children: ReactNode;
+  head?: ReactNode;
+  lang?: string;
+  dir?: "ltr" | "rtl";
+}): import("react").JSX.Element;
+declare const headingClasses: {
+  h1: string;
+  h2: string;
+  h3: string;
+  h4: string;
+};
+declare function EmailHeading({ as, className, ...props }: Omit<HeadingProps, "as"> & {
+  as?: keyof typeof headingClasses;
+}): import("react").JSX.Element;
+declare function EmailText({ tone, className, style, ...props }: TextProps & {
+  tone?: "default" | "muted";
+}): import("react").JSX.Element;
+declare function EmailButton({ className, ...props }: ButtonProps): import("react").JSX.Element;
+declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
+//#endregion
+export { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText };

package/dist/email/email.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Html, Link, Preview, Tailwind, Text, pixelBasedPreset } from "react-email";
+//#region src/email/email.tsx
+function tailwindTheme(theme) {
+	return {
+		presets: [pixelBasedPreset],
+		theme: { extend: {
+			colors: theme.colors,
+			borderRadius: theme.radii,
+			minHeight: { control: theme.button.height },
+			padding: {
+				"control-x": theme.button.paddingInline,
+				"control-y": theme.button.paddingBlock
+			},
+			fontFamily: {
+				body: theme.fonts.body,
+				display: theme.fonts.display
+			},
+			fontSize: {
+				...Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]])),
+				control: [theme.button.fontSize, { lineHeight: theme.button.lineHeight }]
+			}
+		} }
+	};
+}
+function EmailLayout({ theme, preview, children, head, lang = "en", dir = "ltr" }) {
+	return /* @__PURE__ */ jsx(Html, {
+		lang,
+		dir,
+		children: /* @__PURE__ */ jsxs(Tailwind, {
+			config: tailwindTheme(theme),
+			children: [/* @__PURE__ */ jsx(Head, { children: head }), /* @__PURE__ */ jsxs(Body, {
+				className: "m-0 bg-background p-4 font-body text-body text-foreground",
+				children: [/* @__PURE__ */ jsx(Preview, { children: preview }), /* @__PURE__ */ jsx(Container, {
+					className: "mx-auto w-full max-w-[600px] rounded-panel bg-card p-6 text-card-foreground",
+					children
+				})]
+			})]
+		})
+	});
+}
+const headingClasses = {
+	h1: "text-heading-1",
+	h2: "text-heading-2",
+	h3: "text-heading-3",
+	h4: "text-heading-4"
+};
+function EmailHeading({ as = "h1", className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		...props,
+		as,
+		className: `mb-4 mt-0 font-display text-card-foreground ${headingClasses[as]} ${className}`
+	});
+}
+function EmailText({ tone = "default", className = "", style, ...props }) {
+	const textColor = tone === "muted" ? "text-muted-foreground" : "text-card-foreground";
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		style: {
+			overflowWrap: "break-word",
+			...style
+		},
+		className: `mb-4 mt-0 font-body text-body ${textColor} ${className}`
+	});
+}
+function EmailButton({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		className: `box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${className}`
+	});
+}
+function EmailLink({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		className: `font-body text-primary-text underline ${className}`
+	});
+}
+//#endregion
+export { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText };

package/dist/email/length.d.ts

@@ -0,0 +1,4 @@
+//#region src/email/length.d.ts
+declare function emailLengthPixels(name: string, value: string, rootFontSize: number, allowZero?: boolean): number;
+//#endregion
+export { emailLengthPixels };

package/dist/email/length.js

@@ -0,0 +1,34 @@
+//#region src/email/length.ts
+function parseLengthQuantity(value, rootFontSize) {
+	const match = /^(-?\d*\.?\d+)(px|rem)?$/.exec(value.trim());
+	if (!match) return null;
+	return {
+		amount: Number(match[1]) * (match[2] === "rem" ? rootFontSize : 1),
+		unit: match[2] ? "px" : ""
+	};
+}
+function calculateLengthExpression(expression, rootFontSize) {
+	const match = /^\s*(-?\d*\.?\d+(?:px|rem)?)\s*([+*/-])\s*(-?\d*\.?\d+(?:px|rem)?)\s*$/.exec(expression);
+	if (!match) return null;
+	const left = parseLengthQuantity(match[1], rootFontSize);
+	const right = parseLengthQuantity(match[3], rootFontSize);
+	if (!left || !right) return null;
+	const operator = match[2];
+	if ((operator === "+" || operator === "-") && left.unit === right.unit) return `${left.amount + (operator === "+" ? right.amount : -right.amount)}${left.unit}`;
+	if (operator === "*" && !(left.unit && right.unit)) return `${left.amount * right.amount}${left.unit || right.unit}`;
+	if (operator === "/" && !right.unit && right.amount !== 0) return `${left.amount / right.amount}${left.unit}`;
+	return null;
+}
+function emailLengthPixels(name, value, rootFontSize, allowZero = false) {
+	let resolved = value;
+	for (let depth = 0; depth < 16 && resolved.includes("calc("); depth++) {
+		const simplified = resolved.replace(/calc\(([^()]*)\)/g, (original, expression) => calculateLengthExpression(expression, rootFontSize) ?? original);
+		if (simplified === resolved) break;
+		resolved = simplified;
+	}
+	const result = parseLengthQuantity(resolved, rootFontSize);
+	if (!(result && (result.unit === "px" || result.amount === 0) && Number.isFinite(result.amount) && (allowZero ? result.amount >= 0 : result.amount > 0))) throw new Error(`Email theme: ${name} must resolve to a ${allowZero ? "non-negative" : "positive"} px/rem length, received ${value}.`);
+	return result.amount;
+}
+//#endregion
+export { emailLengthPixels };

package/dist/email/templates.d.ts

@@ -0,0 +1,51 @@
+import { EmailTheme } from "./theme.js";
+//#region src/email/templates.d.ts
+type EmailBrandProps = {
+  theme: EmailTheme;
+  brand: string;
+  footer: string;
+};
+declare function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }: EmailBrandProps & {
+  inviter: string;
+  workspace: string;
+  inviteUrl: string;
+}): import("react").JSX.Element;
+declare function ProductEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, actionUrl }: EmailBrandProps & {
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+  actionUrl: string;
+}): import("react").JSX.Element;
+declare function EditorialEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, articleUrl }: EmailBrandProps & {
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+  articleUrl: string;
+}): import("react").JSX.Element;
+type EmailArticle = {
+  title: string;
+  description: string;
+  href: string;
+  imageUrl: string;
+  imageAlt: string;
+};
+declare function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }: EmailBrandProps & {
+  articles: EmailArticle[];
+  unsubscribeUrl: string;
+}): import("react").JSX.Element;
+declare function SummaryEmail({ theme, brand, footer, period, metrics, details, dashboardUrl }: EmailBrandProps & {
+  period: string;
+  metrics: {
+    label: string;
+    value: string;
+  }[];
+  details: {
+    label: string;
+    value: string;
+  }[];
+  dashboardUrl: string;
+}): import("react").JSX.Element;
+//#endregion
+export { EditorialEmail, EmailArticle, InvitationEmail, NewsletterEmail, ProductEmail, SummaryEmail };

package/dist/email/templates.js

@@ -0,0 +1,228 @@
+import { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText } from "./email.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Column, Hr, Img, Row, Section } from "react-email";
+//#region src/email/templates.tsx
+function EmailFooter({ brand, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Hr, { className: "my-6 border-0 border-t border-solid border-t-border" }),
+		/* @__PURE__ */ jsx(EmailText, {
+			tone: "muted",
+			className: "mb-1 text-caption",
+			children: brand
+		}),
+		/* @__PURE__ */ jsx(EmailText, {
+			tone: "muted",
+			className: "mb-0 text-caption",
+			children
+		})
+	] });
+}
+function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }) {
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		theme,
+		preview: `${inviter} invited you to ${workspace}`,
+		children: [
+			/* @__PURE__ */ jsx(EmailText, {
+				tone: "muted",
+				className: "mb-8 text-caption",
+				children: brand
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, { children: "A place for your next idea." }),
+			/* @__PURE__ */ jsxs(EmailText, { children: [
+				inviter,
+				" invited you to join ",
+				/* @__PURE__ */ jsx("strong", { children: workspace }),
+				". Bring your work, share a little inspiration, and make something together."
+			] }),
+			/* @__PURE__ */ jsxs(Section, {
+				className: "my-6 rounded-panel bg-muted p-5",
+				children: [/* @__PURE__ */ jsx(EmailHeading, {
+					as: "h3",
+					children: "Your team is waiting"
+				}), /* @__PURE__ */ jsx(EmailText, {
+					className: "mb-0",
+					children: "Projects, conversations, and the details that move work forward. All in one shared space."
+				})]
+			}),
+			/* @__PURE__ */ jsxs(EmailButton, {
+				href: inviteUrl,
+				children: ["Join ", workspace]
+			}),
+			/* @__PURE__ */ jsx(EmailFooter, {
+				brand,
+				children: footer
+			})
+		]
+	});
+}
+function ProductEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, actionUrl }) {
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		theme,
+		preview: title,
+		children: [
+			/* @__PURE__ */ jsxs(EmailText, {
+				tone: "muted",
+				className: "mb-6 text-caption",
+				children: [brand, " / NEW RELEASE"]
+			}),
+			/* @__PURE__ */ jsx(Img, {
+				src: imageUrl,
+				alt: imageAlt,
+				width: "552",
+				className: "mb-6 block h-auto w-full rounded-scene"
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, { children: title }),
+			/* @__PURE__ */ jsx(EmailText, { children: description }),
+			/* @__PURE__ */ jsx(EmailButton, {
+				href: actionUrl,
+				children: "Explore what’s new"
+			}),
+			/* @__PURE__ */ jsx(EmailFooter, {
+				brand,
+				children: footer
+			})
+		]
+	});
+}
+function EditorialEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, articleUrl }) {
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		theme,
+		preview: title,
+		children: [
+			/* @__PURE__ */ jsxs(EmailText, {
+				tone: "muted",
+				className: "mb-6 text-caption",
+				children: [brand, " / IN GOOD COMPANY"]
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, { children: "Fresh perspectives." }),
+			/* @__PURE__ */ jsxs(Row, { children: [/* @__PURE__ */ jsx(Column, {
+				width: "36%",
+				className: "align-top",
+				children: /* @__PURE__ */ jsx(Img, {
+					src: imageUrl,
+					alt: imageAlt,
+					width: "198",
+					className: "block h-auto w-full rounded-scene"
+				})
+			}), /* @__PURE__ */ jsxs(Column, {
+				width: "64%",
+				className: "pl-5 align-top",
+				children: [
+					/* @__PURE__ */ jsx(EmailHeading, {
+						as: "h2",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(EmailText, { children: description }),
+					/* @__PURE__ */ jsx(EmailLink, {
+						href: articleUrl,
+						children: "Read the story"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsx(EmailFooter, {
+				brand,
+				children: footer
+			})
+		]
+	});
+}
+function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }) {
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		theme,
+		preview: "A few things worth making time for.",
+		children: [
+			/* @__PURE__ */ jsxs(EmailText, {
+				tone: "muted",
+				className: "mb-6 text-caption",
+				children: [brand, " / THE WEEKLY EDIT"]
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, { children: "A little room for inspiration." }),
+			/* @__PURE__ */ jsx(EmailText, {
+				tone: "muted",
+				children: "A few things worth making time for. Stories, spaces, and ideas from our community."
+			}),
+			articles.map((article) => /* @__PURE__ */ jsxs(Section, {
+				className: "mb-6",
+				children: [
+					/* @__PURE__ */ jsx(Img, {
+						src: article.imageUrl,
+						alt: article.imageAlt,
+						width: "552",
+						className: "mb-4 block h-auto w-full rounded-scene"
+					}),
+					/* @__PURE__ */ jsx(EmailHeading, {
+						as: "h2",
+						children: article.title
+					}),
+					/* @__PURE__ */ jsx(EmailText, { children: article.description }),
+					/* @__PURE__ */ jsx(EmailLink, {
+						href: article.href,
+						children: "Read the story"
+					})
+				]
+			}, article.href)),
+			/* @__PURE__ */ jsx(EmailFooter, {
+				brand,
+				children: footer
+			}),
+			/* @__PURE__ */ jsx(EmailLink, {
+				href: unsubscribeUrl,
+				className: "text-caption",
+				children: "Unsubscribe"
+			})
+		]
+	});
+}
+function SummaryEmail({ theme, brand, footer, period, metrics, details, dashboardUrl }) {
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		theme,
+		preview: `Your team’s progress · ${period}`,
+		children: [
+			/* @__PURE__ */ jsxs(EmailText, {
+				tone: "muted",
+				className: "mb-6 text-caption",
+				children: [
+					brand,
+					" / ",
+					period
+				]
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, { children: "Good work adds up." }),
+			/* @__PURE__ */ jsx(EmailText, { children: "Here’s what your team moved forward this week." }),
+			/* @__PURE__ */ jsx(Section, {
+				className: "my-6 rounded-panel bg-muted p-4",
+				children: /* @__PURE__ */ jsx(Row, {
+					className: "table-fixed",
+					children: metrics.map((metric) => /* @__PURE__ */ jsxs(Column, {
+						className: "px-2 align-top",
+						children: [/* @__PURE__ */ jsx(EmailText, {
+							className: "mb-1 text-heading-2 font-semibold",
+							children: metric.value
+						}), /* @__PURE__ */ jsx(EmailText, {
+							tone: "muted",
+							className: "mb-0 text-caption",
+							children: metric.label
+						})]
+					}, metric.label))
+				})
+			}),
+			details.map((detail) => /* @__PURE__ */ jsxs(Row, {
+				className: "table-fixed",
+				children: [/* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(EmailText, { children: detail.label }) }), /* @__PURE__ */ jsx(Column, {
+					align: "right",
+					children: /* @__PURE__ */ jsx(EmailText, { children: detail.value })
+				})]
+			}, detail.label)),
+			/* @__PURE__ */ jsx(EmailButton, {
+				href: dashboardUrl,
+				children: "View your workspace"
+			}),
+			/* @__PURE__ */ jsx(EmailFooter, {
+				brand,
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { EditorialEmail, InvitationEmail, NewsletterEmail, ProductEmail, SummaryEmail };

package/dist/email/theme.d.ts

@@ -0,0 +1,35 @@
+//#region src/email/theme.d.ts
+declare const emailColors: readonly ["background", "foreground", "card", "card-foreground", "primary", "primary-foreground", "primary-text", "muted", "muted-foreground", "border"];
+declare const headingSizes: readonly ["heading-1", "heading-2", "heading-3", "heading-4"];
+type EmailColor = (typeof emailColors)[number];
+type EmailHeadingSize = (typeof headingSizes)[number];
+type EmailTypeStyle = {
+  fontSize: string;
+  lineHeight: string;
+  fontWeight: string;
+  letterSpacing: string;
+};
+type EmailTheme = {
+  colors: Record<EmailColor, string>;
+  fonts: {
+    body: string;
+    display: string;
+  };
+  radii: {
+    control: string;
+    panel: string;
+    scene: string;
+  };
+  button: {
+    height: string;
+    paddingInline: string;
+    paddingBlock: string;
+    fontSize: string;
+    lineHeight: string;
+  };
+  text: Record<EmailHeadingSize | "body" | "caption", EmailTypeStyle>;
+};
+declare function createEmailTheme(tokens: ReadonlyMap<string, string>, rootFontSize?: number): EmailTheme;
+declare function emailThemeFromCss(cssSources: string[], mode?: "light" | "dark", rootFontSize?: number): EmailTheme;
+//#endregion
+export { EmailTheme, createEmailTheme, emailThemeFromCss };

package/dist/email/theme.js

@@ -0,0 +1,113 @@
+import { emailLengthPixels } from "./length.js";
+import { composite, resolveColor, tokenMaps } from "../scripts/contrast-eval.js";
+//#region src/email/theme.ts
+function resolveVariables(value, tokens, chain = []) {
+	if (chain.length > 16) throw new Error(`Email theme: token chain exceeds 16 references (${chain.join(" → ")}).`);
+	return value.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*((?:[^()]|\([^()]*\))*))?\)/g, (_, name, fallback) => {
+		if (chain.includes(name)) throw new Error(`Email theme: circular reference to ${name}.`);
+		const resolved = tokens.get(name) ?? fallback;
+		if (resolved === void 0) throw new Error(`Email theme: missing ${name}.`);
+		return resolveVariables(resolved, tokens, [...chain, name]);
+	});
+}
+function tokenValue(name, tokens, fallback) {
+	const value = tokens.get(name) ?? fallback;
+	if (value === void 0) throw new Error(`Email theme: missing ${name}. Include core theme.css before the skin theme.`);
+	const resolved = resolveVariables(value, tokens, [name]).trim();
+	if (!resolved || /var\(|[;{}<>]/.test(resolved)) throw new Error(`Email theme: unsupported ${name}: ${value}.`);
+	return resolved;
+}
+function pixelSize(name, tokens, rootFontSize) {
+	return `${emailLengthPixels(name, tokenValue(name, tokens), rootFontSize)}px`;
+}
+function numericStyle(name, tokens, fallback) {
+	const value = tokenValue(name, tokens, fallback);
+	if (!/^\d*\.?\d+(px|em)?$/.test(value)) throw new Error(`Email theme: unsupported ${name}: ${value}.`);
+	return value;
+}
+function createEmailTheme(tokens, rootFontSize = 16) {
+	if (!Number.isFinite(rootFontSize) || rootFontSize <= 0) throw new Error("Email theme: rootFontSize must be a positive pixel value.");
+	function lengthPixels(name, allowZero = false) {
+		return emailLengthPixels(name, tokenValue(name, tokens), rootFontSize, allowZero);
+	}
+	const buttonHeight = lengthPixels("--control-h-md");
+	const buttonFontSize = lengthPixels("--text-body");
+	const reactEmailButtonLineHeight = buttonFontSize * 1.2;
+	const buttonPaddingBlock = Math.max(0, (buttonHeight - reactEmailButtonLineHeight) / 2);
+	function color(name) {
+		const result = resolveColor(`var(--${name})`, tokens);
+		if ("unresolved" in result) throw new Error(`Email theme: --${name}: ${result.unresolved}.`);
+		return result;
+	}
+	const background = color("background");
+	if (background.alpha !== 1) throw new Error("Email theme: --background must be opaque.");
+	const card = composite(color("card"), background);
+	const primary = composite(color("primary"), card);
+	function opaqueColor(name, surface = card) {
+		const result = composite(color(name), surface);
+		return `rgb(${Math.round(result.r)}, ${Math.round(result.g)}, ${Math.round(result.b)})`;
+	}
+	function heading(name) {
+		const spacing = tokenValue(`--text-${name}--letter-spacing`, tokens, "0");
+		if (!/^-?\d*\.?\d+(px|em)?$/.test(spacing)) throw new Error(`Email theme: unsupported ${name} letter spacing: ${spacing}.`);
+		return {
+			fontSize: pixelSize(`--text-${name}`, tokens, rootFontSize),
+			lineHeight: numericStyle(`--text-${name}--line-height`, tokens, "1.3"),
+			fontWeight: numericStyle(`--text-${name}--font-weight`, tokens, "600"),
+			letterSpacing: spacing
+		};
+	}
+	return {
+		colors: {
+			background: opaqueColor("background", background),
+			foreground: opaqueColor("foreground", background),
+			card: opaqueColor("card", background),
+			"card-foreground": opaqueColor("card-foreground"),
+			primary: opaqueColor("primary"),
+			"primary-foreground": opaqueColor("primary-foreground", primary),
+			"primary-text": opaqueColor("primary-text"),
+			muted: opaqueColor("muted"),
+			"muted-foreground": opaqueColor("muted-foreground"),
+			border: opaqueColor("border")
+		},
+		fonts: {
+			body: tokenValue("--font-body", tokens),
+			display: tokenValue("--font-display", tokens)
+		},
+		radii: {
+			control: `${lengthPixels("--radius-control", true)}px`,
+			panel: `${lengthPixels("--radius-panel", true)}px`,
+			scene: `${lengthPixels("--radius-scene", true)}px`
+		},
+		button: {
+			height: `${buttonHeight}px`,
+			paddingInline: `${lengthPixels("--padding-x", true)}px`,
+			paddingBlock: `${buttonPaddingBlock}px`,
+			fontSize: `${buttonFontSize}px`,
+			lineHeight: `${reactEmailButtonLineHeight}px`
+		},
+		text: {
+			body: {
+				fontSize: pixelSize("--text-body-lg", tokens, rootFontSize),
+				lineHeight: "1.6",
+				fontWeight: "400",
+				letterSpacing: "0"
+			},
+			caption: {
+				fontSize: pixelSize("--text-body", tokens, rootFontSize),
+				lineHeight: "1.5",
+				fontWeight: "400",
+				letterSpacing: "0"
+			},
+			"heading-1": heading("heading-1"),
+			"heading-2": heading("heading-2"),
+			"heading-3": heading("heading-3"),
+			"heading-4": heading("heading-4")
+		}
+	};
+}
+function emailThemeFromCss(cssSources, mode = "light", rootFontSize = 16) {
+	return createEmailTheme(tokenMaps(cssSources)[mode], rootFontSize);
+}
+//#endregion
+export { createEmailTheme, emailThemeFromCss };

package/dist/extensions/create-track-highlight.d.ts

@@ -1,8 +1,6 @@
 //#region src/extensions/create-track-highlight.d.ts
 type TrackHighlightOptions = {
-  /** Selector for highlightable rows, resolved within track. */
   itemSelector: string;
-  /** Selector for resting row (active/selected) used when nothing is hovered. */
   activeSelector: string;
   range?: boolean;
   followHover?: boolean;