@lupinum/nuxt-email 0.1.0 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## v1.0.0-beta.1
+
+Status: certified beta candidate. Feature development is frozen until stable `1.0.0`; manual email-client QA and the external transactional beta remain pending.
+
+### Added
+
+- Added synchronous `subject` and authored plain-text `text` metadata to `defineEmail`, including prop-derived functions. Authored text takes precedence over automatic HTML-to-text derivation.
+- Added the type-only `EmailComponentProps<Component>` helper for deterministic, component-checked preview fixtures.
+- Added a baseURL-aware Nuxt DevTools shortcut to the existing development-only `/__email` preview.
+- Added direct Resend and local Nodemailer/Mailpit sending recipes while keeping all delivery behavior application-owned.
+
+### Changed
+
+- Rebuilt Tailwind v4 nested-selector and nested `@media`/`@supports` handling so declarations and rules preserve source order, media ranges are downleveled, and unhandled nesting fails instead of emitting raw `&` CSS.
+- Limited emitted keyframes to animations referenced by the current render. Animation remains best-effort progressive enhancement because email-client support is limited.
+- Made `EHtml.lang` a required, non-empty value. `dir` still defaults to `ltr`.
+- Made `ELink` visually neutral by removing its built-in color and underline. `target="_blank"` remains the default and can be overridden.
+- Renamed `EmailRenderError.componentName` to `templateName` and kept the original error as `cause`.
+- Limited module-driven registry rebuilds to structural template and fixture changes; ordinary edits continue through Nitro's normal watcher.
+
+### Breaking changes from v0.1.1
+
+- Every `EHtml` now requires an explicit non-empty `lang`.
+- `ELink` no longer supplies color or text-decoration styles. Add those styles explicitly where required.
+- Read `EmailRenderError.templateName` instead of `componentName`; there is no compatibility alias.
+- `defineEmail` rejects an empty object and invalid or asynchronous metadata values. Provide at least one synchronous `subject` or `text` value.
+
+## v0.1.1
+
+[Compare changes](https://github.com/lupinum-dev/nuxt-email/compare/e45025a...v0.1.1)
+
+### Changed
+
+- Isolated the package-preview watcher test from the normal unit-test process. This change prevents an open watcher from delaying test completion. ([#9](https://github.com/lupinum-dev/nuxt-email/pull/9))
+
+### Release reliability
+
+- Added exact-byte recovery for a first package version that was published from a certified artifact before npm trusted publishing was available. The workflow rejects different package bytes and requires explicit bootstrap authorization. ([#8](https://github.com/lupinum-dev/nuxt-email/pull/8), [#10](https://github.com/lupinum-dev/nuxt-email/pull/10), [#11](https://github.com/lupinum-dev/nuxt-email/pull/11))
+- Made package previews reliable after a cold start on Windows. ([#12](https://github.com/lupinum-dev/nuxt-email/pull/12))
+- Corrected missing-tag handling and artifact checksum verification in the protected release workflow. ([#13](https://github.com/lupinum-dev/nuxt-email/pull/13), [#14](https://github.com/lupinum-dev/nuxt-email/pull/14))
+
+### Compatibility
+
+- The runtime files are unchanged from `0.1.0`. This patch aligns the published package metadata with the current certified source and establishes the normal trusted-publishing path for later releases.
+
 ## v0.1.0
 
 Status: pre-1.0 candidate. The package identity is `@lupinum/nuxt-email`; the unscoped npm package is unrelated. Manual email-client QA and external beta evidence remain release gates.

package/README.md

@@ -1,19 +1,31 @@
 <p align="center">
-  <img src="docs/public/favicon.svg" width="128" alt="Nuxt Email icon">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="docs/public/icon-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="docs/public/icon-light.svg">
+    <img src="docs/public/icon-light.svg" width="128" alt="Nuxt Email icon">
+  </picture>
 </p>
 
-<h1 align="center">Nuxt Email</h1>
+<h1 align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="docs/public/wordmark-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="docs/public/wordmark-light.svg">
+    <img src="docs/public/wordmark-light.svg" width="256" alt="Nuxt Email">
+  </picture>
+</h1>
 
 <p align="center">Write typed transactional email as Vue components and render it directly in Nuxt.</p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@lupinum/nuxt-email"><img src="https://img.shields.io/npm/v/@lupinum/nuxt-email?label=npm" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@lupinum/nuxt-email"><img src="https://img.shields.io/npm/v/@lupinum/nuxt-email?color=00DC82" alt="npm version"></a>
   <a href="https://github.com/lupinum-dev/nuxt-email/actions/workflows/ci.yml"><img src="https://github.com/lupinum-dev/nuxt-email/actions/workflows/ci.yml/badge.svg" alt="CI status"></a>
-  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT license"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-00DC82" alt="MIT license"></a>
+  <a href="https://discord.gg/RPH6SeA36N"><img src="https://img.shields.io/badge/Discord-18181B?logo=discord" alt="Discord"></a>
+  <a href="https://deepwiki.com/lupinum-dev/nuxt-email"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a>
 </p>
 
 > [!WARNING]
-> The first scoped release is in preparation. Public APIs can change before version 1.0. The unscoped `nuxt-email` package on npm is unrelated to this project.
+> Nuxt Email is in the `1.0.0-beta.1` contract freeze. Review the changelog before each upgrade. Manual inbox QA and the external beta are still pending. The unscoped `nuxt-email` package on npm is unrelated to this project.
 
 ## Why use Nuxt Email?
 
@@ -90,6 +102,21 @@ export default defineEventHandler(async () => {
 
 The template name and props are generated from the Vue file. Invalid names and props fail during type checking.
 
+## Discord
+
+Join the Lupinum OSS community to discuss Nuxt Email, ask questions, and share
+what you build.
+
+<p align="center">
+  <a href="https://discord.gg/RPH6SeA36N">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="docs/public/discord-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="docs/public/discord-light.svg">
+      <img src="docs/public/discord-light.svg" width="500" alt="Join the Lupinum OSS Discord">
+    </picture>
+  </a>
+</p>
+
 ## Email components
 
 Nuxt Email registers 18 server components for document structure, table layout, text, images, links, Outlook-safe buttons, Markdown, inline code, fonts, previews, and Tailwind.
@@ -114,6 +141,16 @@ Run the Nuxt application and open `/__email`. The development-only page shows th
 
 Add one sibling fixture file for deterministic sample props. Preview routes and fixtures are excluded from production builds.
 
+```ts
+import type { EmailComponentProps } from '@lupinum/nuxt-email'
+import type WelcomeEmail from './welcome.vue'
+
+export default {
+  firstName: 'Ada',
+  activationUrl: 'https://example.com/activate',
+} satisfies EmailComponentProps<typeof WelcomeEmail>
+```
+
 ## Testing
 
 Render a Vue email without starting Nuxt:
@@ -138,14 +175,14 @@ Complete the [manual client QA checklist](https://github.com/lupinum-dev/nuxt-em
 
 ## Package exports
 
-- `@lupinum/nuxt-email` provides the Nuxt module and the `RenderedEmail` type.
+- `@lupinum/nuxt-email` provides the Nuxt module plus the `RenderedEmail` and `EmailComponentProps` types.
 - `@lupinum/nuxt-email/define-email` provides typed template metadata.
 - `@lupinum/nuxt-email/testing` provides standalone component rendering.
 - `@lupinum/nuxt-email/errors` provides supported runtime error classes.
 
 ## Documentation
 
-Read the [Nuxt Email documentation](https://nuxt-email.lupinum.com/docs). It contains the [installation guide](https://nuxt-email.lupinum.com/docs/getting-started/installation), [component reference](https://nuxt-email.lupinum.com/docs/components), [testing guide](https://nuxt-email.lupinum.com/docs/guides/testing-your-emails), and [preview guide](https://nuxt-email.lupinum.com/docs/guides/preview-workflow).
+Read the [Nuxt Email documentation](https://nuxt-email.lupinum.com/docs). It contains the [installation guide](https://nuxt-email.lupinum.com/docs/getting-started/installation), [component reference](https://nuxt-email.lupinum.com/docs/components), [preview guide](https://nuxt-email.lupinum.com/docs/guides/preview-workflow), [testing guide](https://nuxt-email.lupinum.com/docs/guides/testing-your-emails), and [sending guide](https://nuxt-email.lupinum.com/docs/guides/sending-email).
 
 See the [changelog](CHANGELOG.md) for released changes.
 

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-export { RenderedEmail } from '../dist/runtime/render/types.js';
+export { EmailComponentProps, RenderedEmail } from '../dist/runtime/render/types.js';
 
 interface CodeBlockOptions {
     languages: readonly string[];

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.5.1 <5"
   },
-  "version": "0.1.0",
+  "version": "1.0.0-beta.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -140,14 +140,9 @@ ${entries.join("\n")}
 }>
 
 export type EmailTemplateName = keyof typeof emailTemplates
-type _EmailComponent = abstract new (...args: never[]) => { $props: object }
-type _DeclaredEmailProps<Component extends _EmailComponent> = Omit<
-  InstanceType<Component>['$props'],
-  keyof import('vue').PublicProps
->
-type _EmailProps<Component extends _EmailComponent> = keyof _DeclaredEmailProps<Component> extends never
+type _EmailProps<Component> = keyof import(${importPath(typePaths.renderedEmail)}).EmailComponentProps<Component> extends never
   ? Record<string, never>
-  : _DeclaredEmailProps<Component>
+  : import(${importPath(typePaths.renderedEmail)}).EmailComponentProps<Component>
 
 export type EmailTemplateProps = {
   [Name in EmailTemplateName]: _EmailProps<Awaited<ReturnType<(typeof emailTemplates)[Name]['component']>>['default']>
@@ -160,6 +155,34 @@ export function renderEmail<Name extends EmailTemplateName>(
 `;
 }
 
+function configureEmailTypeProject(tsConfig, emailDirectory, registryId, registryPath) {
+  const normalizedDirectory = emailDirectory.replaceAll("\\", "/");
+  const include = tsConfig.include ??= [];
+  const emailTypeGlob = `${normalizedDirectory}/**/*.vue`;
+  if (!include.includes(emailTypeGlob)) {
+    include.push(emailTypeGlob);
+  }
+  const exclude = tsConfig.exclude ??= [];
+  const emailComponentTypeGlob = `${normalizedDirectory}/components/**/*.vue`;
+  if (!exclude.includes(emailComponentTypeGlob)) {
+    exclude.push(emailComponentTypeGlob);
+  }
+  const paths = (tsConfig.compilerOptions ??= {}).paths ??= {};
+  paths[registryId] = [registryPath];
+  return paths;
+}
+function previewURL(baseURL) {
+  return `${baseURL.endsWith("/") ? baseURL : `${baseURL}/`}__email`;
+}
+function relativeEmailPath(emailDirectory, path, roots) {
+  const candidates = isAbsolute(path) ? [path] : roots.map((root) => resolve(root, path));
+  for (const candidate of candidates) {
+    const relativePath = relative(emailDirectory, candidate).replaceAll("\\", "/");
+    if (relativePath !== ".." && !relativePath.startsWith("../") && !isAbsolute(relativePath)) {
+      return relativePath;
+    }
+  }
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "@lupinum/nuxt-email",
@@ -205,6 +228,9 @@ const module$1 = defineNuxtModule({
       write: true,
       getContents: () => generateEmailTypes(templates, registryTypePaths)
     }, { nitro: true });
+    nuxt.hook("prepare:types", ({ tsConfig: tsConfig2 }) => {
+      configureEmailTypeProject(tsConfig2, emailDirectory, registryId, typeTemplate.dst);
+    });
     addServerImports([
       {
         name: "renderEmail",
@@ -220,6 +246,17 @@ const module$1 = defineNuxtModule({
       });
     }
     if (nuxt.options.dev) {
+      nuxt.hook("devtools:customTabs", (tabs) => {
+        tabs.push({
+          name: "nuxt-email",
+          title: "Nuxt Email",
+          icon: "i-lucide-mail",
+          view: {
+            type: "iframe",
+            src: previewURL(nuxt.options.app.baseURL)
+          }
+        });
+      });
       addServerHandler({
         route: "/__email",
         method: "get",
@@ -250,21 +287,21 @@ const module$1 = defineNuxtModule({
     let registryUpdates = Promise.resolve();
     nuxt.hook("builder:watch", (event, path) => {
       const structureChanged = ["add", "unlink", "addDir", "unlinkDir"].includes(event);
-      if (event !== "change" && !structureChanged) {
+      if (!structureChanged) {
         return;
       }
-      const absolutePath = isAbsolute(path) ? path : resolve(nuxt.options.srcDir, path);
-      const relativePath = relative(emailDirectory, absolutePath).replaceAll("\\", "/");
-      if (relativePath === ".." || relativePath.startsWith("../") || isAbsolute(relativePath)) {
+      const relativePath = relativeEmailPath(emailDirectory, path, [
+        nuxt.options.rootDir,
+        nuxt.options.srcDir
+      ]);
+      if (relativePath === void 0) {
         return;
       }
       const update = async () => {
-        if (structureChanged) {
-          templates = await loadTemplates();
-          await updateTemplates({
-            filter: (template) => template.filename === typeTemplate.filename
-          });
-        }
+        templates = await loadTemplates();
+        await updateTemplates({
+          filter: (template) => template.filename === typeTemplate.filename
+        });
         await reloadRegistry();
       };
       const queuedUpdate = registryUpdates.then(update, update);
@@ -287,9 +324,7 @@ const module$1 = defineNuxtModule({
     }
     const typescript = nitro.typescript ??= {};
     const tsConfig = typescript.tsConfig ??= {};
-    const compilerOptions = tsConfig.compilerOptions ??= {};
-    const paths = compilerOptions.paths ??= {};
-    paths[registryId] = [typeTemplate.dst];
+    const paths = configureEmailTypeProject(tsConfig, emailDirectory, registryId, typeTemplate.dst);
     paths["#nuxt-email/testing"] = [renderEmailComponentPath];
     nitro.rollupConfig ??= {};
     const existingPlugins = nitro.rollupConfig.plugins;

package/dist/runtime/components/EHtml.d.ts

@@ -1,4 +1,6 @@
 import type { DefineComponent, HTMLAttributes } from 'vue';
 import type { SafeEmailAttributes } from './attributes.js';
-export type EHtmlProps = SafeEmailAttributes<HTMLAttributes>;
+export type EHtmlProps = Omit<SafeEmailAttributes<HTMLAttributes>, 'lang'> & {
+    lang: string;
+};
 export declare const EHtml: DefineComponent<EHtmlProps>;

package/dist/runtime/components/EHtml.js

@@ -3,10 +3,20 @@ import { assertSafeEmailAttributes } from "./attributes.js";
 export const EHtml = defineComponent({
   name: "EHtml",
   inheritAttrs: false,
-  setup(_props, { attrs, slots }) {
+  props: {
+    lang: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, { attrs, slots }) {
     return () => {
       assertSafeEmailAttributes("EHtml", attrs);
-      const { dir = "ltr", lang = "en", ...attributes } = attrs;
+      const { dir = "ltr", ...attributes } = attrs;
+      const { lang } = props;
+      if (typeof lang !== "string" || lang.trim().length === 0) {
+        throw new TypeError("EHtml lang must be a non-empty string");
+      }
       return h("html", {
         ...attributes,
         dir,

package/dist/runtime/components/ELink.js

@@ -1,11 +1,6 @@
 import { defineComponent, h, inject } from "vue";
 import { resolveNestedTailwindStyle, TAILWIND_NESTED_KEY } from "../tailwind/nested.js";
 import { assertSafeEmailAttributes } from "./attributes.js";
-import { mergeEmailStyles } from "./style.js";
-const DEFAULT_LINK_STYLE = {
-  color: "#067df7",
-  textDecorationLine: "none"
-};
 export const ELink = defineComponent({
   name: "ELink",
   inheritAttrs: false,
@@ -27,7 +22,7 @@ export const ELink = defineComponent({
       return h("a", {
         ...attributes,
         href: props.href,
-        style: mergeEmailStyles(DEFAULT_LINK_STYLE, effectiveStyle),
+        ...effectiveStyle === void 0 || effectiveStyle === null ? {} : { style: effectiveStyle },
         target: attrs.target ?? "_blank"
       }, slots.default?.());
     };

package/dist/runtime/dev-preview/render.get.d.ts

@@ -1,3 +1,28 @@
 export declare const PREVIEW_RENDER_CSP: string;
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+interface SerializedPreviewError {
+    name: string;
+    message: string;
+    stack?: string;
+    templateName?: string;
+    requestedName?: string;
+    knownNames?: readonly string[];
+    cause?: SerializedPreviewError;
+}
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<string | {
+    bytes: any;
+    html: string;
+    text: string;
+    subject?: string;
+    name: string;
+    statusCode?: undefined;
+    statusMessage?: undefined;
+    data?: undefined;
+} | {
+    statusCode: number;
+    statusMessage: string;
+    data: {
+        templateName: string | undefined;
+        error: SerializedPreviewError;
+    };
+}>>;
 export default _default;

package/dist/runtime/dev-preview/render.get.js

@@ -45,8 +45,8 @@ function serializeError(error, seen = /* @__PURE__ */ new Set()) {
   if (error.stack) {
     serialized.stack = error.stack;
   }
-  if ("componentName" in error && typeof error.componentName === "string") {
-    serialized.componentName = error.componentName;
+  if ("templateName" in error && typeof error.templateName === "string") {
+    serialized.templateName = error.templateName;
   }
   if ("requestedName" in error && typeof error.requestedName === "string") {
     serialized.requestedName = error.requestedName;

package/dist/runtime/render/define-email.d.ts

@@ -2,12 +2,18 @@ import type { TailwindRegion } from '../tailwind/nested.js';
 /**
  * Options declared by an email template via {@link defineEmail}.
  *
- * `subject` is a zero-argument closure over the template's real `defineProps()`
- * value and returns the computed subject line.
+ * String values are constant metadata. Functions are zero-argument closures
+ * over the template's real `defineProps()` value and run synchronously after
+ * the HTML render completes.
  */
-export interface DefineEmailOptions {
-    subject: () => string;
-}
+export type EmailMetadataValue = string | (() => string);
+export type DefineEmailOptions = {
+    subject: EmailMetadataValue;
+    text?: EmailMetadataValue;
+} | {
+    subject?: EmailMetadataValue;
+    text: EmailMetadataValue;
+};
 declare const EMAIL_RENDER_BRAND: unique symbol;
 /**
  * Per-render registry created by the renderer. A fresh instance is created for
@@ -16,7 +22,10 @@ declare const EMAIL_RENDER_BRAND: unique symbol;
  */
 export interface EmailRenderContext {
     readonly [EMAIL_RENDER_BRAND]: true;
-    subject?: () => string;
+    metadata?: {
+        subject?: () => string;
+        text?: () => string;
+    };
     /**
      * Tailwind regions registered by `<ETailwind>` boundaries during render, in
      * registration order. Consumed by the post-render pass to complete each head
@@ -44,10 +53,10 @@ export declare function getEmailRenderContext(): EmailRenderContext | undefined;
  */
 export declare function runWithEmailRenderContext<T>(context: EmailRenderContext, fn: () => T): T;
 /**
- * Declare email metadata (currently the subject) from an email template's
- * `<script setup>`. The zero-argument subject closure captures the template's
- * real `defineProps()` value, so there is no separate generic that can lie about
- * the template contract. The computed value surfaces as `subject`.
+ * Declare subject and/or authored plain text from an email template's
+ * `<script setup>`. A zero-argument closure captures the template's real
+ * `defineProps()` value, so there is no separate generic that can lie about the
+ * template contract.
  *
  * Must run during an email render; calling it elsewhere throws
  * {@link DefineEmailOutsideRenderError}.

package/dist/runtime/render/define-email.js

@@ -30,11 +30,28 @@ export function defineEmail(options) {
   if (!isEmailRenderContext(context)) {
     throw new DefineEmailOutsideRenderError();
   }
-  if (context.subject !== void 0) {
+  if (context.metadata) {
     throw new DuplicateEmailDefinitionError();
   }
-  if (!options || typeof options.subject !== "function") {
-    throw new TypeError("defineEmail() subject must be a function returning a string.");
+  if (!options || typeof options !== "object") {
+    throw new TypeError("defineEmail() requires subject or text metadata.");
   }
-  context.subject = options.subject;
+  const keys = Object.keys(options);
+  const unsupportedKeys = keys.filter((key) => key !== "subject" && key !== "text");
+  if (unsupportedKeys.length > 0) {
+    throw new TypeError(`defineEmail() received unsupported metadata: ${unsupportedKeys.sort().join(", ")}.`);
+  }
+  if (options.subject === void 0 && options.text === void 0) {
+    throw new TypeError("defineEmail() requires subject or text metadata.");
+  }
+  const toFactory = (name, value) => {
+    if (value === void 0) return void 0;
+    if (typeof value === "string") return () => value;
+    if (typeof value === "function") return value;
+    throw new TypeError(`defineEmail() ${name} must be a string or a function returning a string.`);
+  };
+  context.metadata = {
+    subject: toFactory("subject", options.subject),
+    text: toFactory("text", options.text)
+  };
 }

package/dist/runtime/render/errors.d.ts

@@ -1,4 +1,4 @@
 export declare class EmailRenderError extends Error {
-    readonly componentName: string;
-    constructor(componentName: string, cause: unknown);
+    readonly templateName: string;
+    constructor(templateName: string, cause: unknown);
 }

package/dist/runtime/render/errors.js

@@ -1,8 +1,8 @@
 export class EmailRenderError extends Error {
-  componentName;
-  constructor(componentName, cause) {
-    super(`Failed to render email component ${componentName}`, { cause });
+  templateName;
+  constructor(templateName, cause) {
+    super(`Failed to render email template ${templateName}`, { cause });
     this.name = "EmailRenderError";
-    this.componentName = componentName;
+    this.templateName = templateName;
   }
 }

package/dist/runtime/render/render-email-component.d.ts

@@ -1,13 +1,10 @@
-import type { Component, FunctionalComponent, PublicProps } from 'vue';
+import type { Component } from 'vue';
 import type { EmailComponentRegistry } from './render-component.js';
-import type { RenderedEmail } from './types.js';
-type DeclaredComponentProps<ComponentType extends Component> = ComponentType extends abstract new (...args: infer _Arguments) => infer Instance ? Instance extends {
-    $props: infer Props;
-} ? Omit<Props, keyof PublicProps> : Record<string, unknown> : ComponentType extends FunctionalComponent<infer Props> ? Props : Record<string, unknown>;
+import type { EmailComponentProps, RenderedEmail } from './types.js';
 type RequiredPropKeys<Props> = {
     [Key in keyof Props]-?: Record<never, never> extends Pick<Props, Key> ? never : Key;
 }[keyof Props];
-type RenderEmailComponentArguments<ComponentType extends Component> = keyof DeclaredComponentProps<ComponentType> extends never ? [props?: Record<string, never>] : RequiredPropKeys<DeclaredComponentProps<ComponentType>> extends never ? [props?: DeclaredComponentProps<ComponentType>] : [props: DeclaredComponentProps<ComponentType>];
+type RenderEmailComponentArguments<ComponentType extends Component> = keyof EmailComponentProps<ComponentType> extends never ? [props?: Record<string, never>] : RequiredPropKeys<EmailComponentProps<ComponentType>> extends never ? [props?: EmailComponentProps<ComponentType>] : [props: EmailComponentProps<ComponentType>];
 export interface RenderEmailComponent {
     <ComponentType extends Component>(component: ComponentType, ...args: RenderEmailComponentArguments<ComponentType>): Promise<RenderedEmail>;
 }

package/dist/runtime/render/render-email-component.js

@@ -4,7 +4,7 @@ import { assertCompleteEmailDocument } from "./document.js";
 import { EmailRenderError } from "./errors.js";
 import { renderPlainText } from "./plain-text.js";
 import { renderComponentToHtml } from "./render-component.js";
-function componentName(component) {
+function templateName(component) {
   if (typeof component === "object" && component !== null || typeof component === "function") {
     if ("name" in component && typeof component.name === "string" && component.name.length > 0) {
       return component.name;
@@ -22,24 +22,24 @@ export function createRenderEmailComponent(componentRegistry) {
       const context = createEmailRenderContext();
       const html = await renderComponentToHtml(component, props, context, componentRegistry);
       assertCompleteEmailDocument(html);
-      const subjectFactory = context.subject;
-      if (subjectFactory === void 0) {
-        return {
-          html,
-          text: renderPlainText(html)
-        };
-      }
-      const subject = subjectFactory();
-      if (typeof subject !== "string") {
-        throw new TypeError(`defineEmail() subject must return a string; received ${typeof subject}`);
-      }
-      return {
+      const resolveMetadata = (name, factory) => {
+        if (!factory) return void 0;
+        const value = factory();
+        if (typeof value !== "string") {
+          throw new TypeError(`defineEmail() ${name} must return a string; received ${typeof value}`);
+        }
+        return value;
+      };
+      const subject = resolveMetadata("subject", context.metadata?.subject);
+      const text = resolveMetadata("text", context.metadata?.text) ?? renderPlainText(html);
+      const result = {
         html,
-        text: renderPlainText(html),
-        subject
+        text
       };
+      if (subject !== void 0) result.subject = subject;
+      return result;
     } catch (error) {
-      throw new EmailRenderError(componentName(component), error);
+      throw new EmailRenderError(templateName(component), error);
     }
   };
 }

package/dist/runtime/render/types.d.ts

@@ -1,3 +1,9 @@
+import type { FunctionalComponent, PublicProps } from 'vue';
+type VueListenerProp = `on${Capitalize<string>}`;
+type EmailAuthoringProps<Props> = string extends keyof Props ? Props : Omit<Props, keyof PublicProps | VueListenerProp>;
+export type EmailComponentProps<ComponentType> = ComponentType extends abstract new (...args: never[]) => {
+    $props: infer Props;
+} ? EmailAuthoringProps<Props> : ComponentType extends FunctionalComponent<infer Props> ? EmailAuthoringProps<Props> : never;
 export interface RenderedEmail {
     html: string;
     text: string;
@@ -7,3 +13,4 @@ export interface RenderedEmail {
      */
     subject?: string;
 }
+export {};

package/dist/runtime/tailwind/engine/css/downlevel-for-email-clients.d.ts

@@ -1,41 +1,12 @@
 /**
- * Downlevels modern CSS features that email clients don't support,
- * operating on a css-tree StyleSheet AST.
- *
- * 1. CSS Nesting: unnests @media rules from inside selectors
- *    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
- *    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
- *
- * 2. Media Queries Level 4 range syntax → legacy min-width/max-width
- *    `(width>=40rem)` → `(min-width:40rem)`
- *
- * Gmail, Outlook, Yahoo, and most email clients don't support either feature.
- * See: https://www.caniemail.com/features/css-at-media/
- *      https://www.caniemail.com/features/css-nesting/
+ * Downlevel the modern CSS emitted by Tailwind to shapes that email clients
+ * can parse. The transform is deliberately strict: leaving one nested rule in
+ * the output is worse than failing the render with an actionable error.
  */
 import { type StyleSheet } from 'css-tree';
 /**
- * css-tree 3.x introduced new AST node types for query-related at-rules that
- * `@types/css-tree` (still on 2.x at the time of writing) doesn't expose.
- * Augmenting the module here lets the rest of this file work with strong
- * types instead of scattering `as` casts everywhere.
- *
- * - `FeatureRange` is what the parser emits for Media Queries Level 4 range
- *   syntax: `(width >= 40rem)`.
- * - `Feature` is the legacy form (`(min-width: 40rem)`) we construct as the
- *   downleveled output.
- *
- * Note: we cannot extend the `CssNode` union itself (it's a `type` alias, not
- * an interface), so two narrow casts remain in this file:
- *   1. Widening `node` inside `walk()` so we can narrow against
- *      `FeatureRange.type` (`CssNode` doesn't list `'FeatureRange'`).
- *   2. Assigning a constructed `Feature` back to `ListItem<CssNode>.data`.
- *
- * Both are flagged inline and reference back to this block.
- *
- * See:
- *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/FeatureRange.js
- *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/Feature.js
+ * css-tree 3.x parses media range syntax, but the currently published type
+ * package does not expose the corresponding nodes yet.
  */
 declare module 'css-tree' {
     interface FeatureRange extends CssNodeCommon {
@@ -55,9 +26,8 @@ declare module 'css-tree' {
     }
 }
 /**
- * Unnest @media at-rules from inside regular rules, and downlevel
- * range media query syntax to legacy min-width/max-width.
- *
+ * Recursively flatten selector nesting and nested @media/@supports rules,
+ * then convert media range syntax such as `(width >= 40rem)` to `min-width`.
  * Mutates the stylesheet in place.
  */
 export declare function downlevelForEmailClients(styleSheet: StyleSheet): void;

package/dist/runtime/tailwind/engine/css/downlevel-for-email-clients.js

@@ -1,75 +1,171 @@
 import {
   clone,
+  generate,
   List,
+  parse,
   walk
 } from "css-tree";
 export function downlevelForEmailClients(styleSheet) {
-  unnestMediaQueries(styleSheet);
+  styleSheet.children = flattenStyleSheet(styleSheet);
   downlevelRangeMediaQueries(styleSheet);
+  walk(styleSheet, (node) => {
+    if (node.type === "NestingSelector") {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: an unsupported nesting selector remained after downleveling."
+      );
+    }
+  });
 }
-function unnestMediaQueries(styleSheet) {
-  const transforms = [];
-  walk(styleSheet, {
-    visit: "Rule",
-    enter(rule, item, list) {
-      if (!rule.block || !item) return;
-      const nestedAtrules = [];
-      const remainingChildren = [];
-      rule.block.children.forEach((child) => {
-        if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) {
-          nestedAtrules.push(child);
-        } else {
-          remainingChildren.push(child);
-        }
-      });
-      if (nestedAtrules.length > 0) {
-        transforms.push({
-          parentRule: rule,
-          parentItem: item,
-          parentList: list,
-          nestedAtrules,
-          remainingChildren
-        });
-      }
+function flattenStyleSheet(styleSheet) {
+  const output = new List();
+  styleSheet.children.forEach((node) => {
+    if (node.type === "Rule") {
+      flattenRule(node, null, [], output);
+      return;
+    }
+    if (node.type === "Atrule" && isConditionalAtrule(node)) {
+      flattenConditionalAtrule(node, null, [], output);
+      return;
     }
+    output.appendData(clone(node));
   });
-  for (let i = transforms.length - 1; i >= 0; i--) {
-    const {
-      parentRule,
-      parentItem,
-      parentList,
-      nestedAtrules,
-      remainingChildren
-    } = transforms[i];
-    const replacements = new List();
-    if (remainingChildren.length > 0) {
-      parentRule.block.children = new List().fromArray(
-        remainingChildren
+  return output;
+}
+function flattenRule(rule, parentSelectors, wrappers, output) {
+  const selectors = resolveSelectors(rule, parentSelectors);
+  flattenBlock(rule.block.children, selectors, wrappers, output);
+}
+function flattenBlock(children, selectors, wrappers, output) {
+  let declarations = new List();
+  const flushDeclarations = () => {
+    if (declarations.isEmpty) return;
+    if (!selectors) {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: declarations were found outside a selector."
       );
-      replacements.appendData(parentRule);
     }
-    for (const atrule of nestedAtrules) {
-      const wrappedRule = {
-        type: "Rule",
-        prelude: clone(parentRule.prelude),
-        block: {
-          type: "Block",
-          children: atrule.block ? atrule.block.children : new List()
-        }
-      };
-      const newAtrule = {
-        type: "Atrule",
-        name: atrule.name,
-        prelude: atrule.prelude,
-        block: {
-          type: "Block",
-          children: new List().fromArray([wrappedRule])
-        }
-      };
-      replacements.appendData(newAtrule);
+    appendWrappedRule(selectors, declarations, wrappers, output);
+    declarations = new List();
+  };
+  children.forEach((node) => {
+    if (node.type === "Raw") {
+      throw new TypeError(
+        `Unable to render Tailwind CSS: an unparsed nested CSS shape was encountered (${node.value}).`
+      );
+    }
+    if (node.type === "Rule") {
+      flushDeclarations();
+      flattenRule(node, selectors, wrappers, output);
+      return;
+    }
+    if (node.type === "Atrule") {
+      flushDeclarations();
+      if (!isConditionalAtrule(node)) {
+        throw new TypeError(
+          `Unable to render Tailwind CSS: nested @${node.name} rules are not supported.`
+        );
+      }
+      flattenConditionalAtrule(node, selectors, wrappers, output);
+      return;
     }
-    parentList.replace(parentItem, replacements);
+    declarations.appendData(clone(node));
+  });
+  flushDeclarations();
+}
+function flattenConditionalAtrule(atrule, selectors, wrappers, output) {
+  if (!atrule.block) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: @${atrule.name} has no rule block.`
+    );
+  }
+  flattenBlock(
+    atrule.block.children,
+    selectors,
+    [
+      ...wrappers,
+      { name: atrule.name, prelude: clonePrelude(atrule.prelude) }
+    ],
+    output
+  );
+}
+function appendWrappedRule(selectors, declarations, wrappers, output) {
+  let node = {
+    type: "Rule",
+    prelude: clone(selectors),
+    block: { type: "Block", children: declarations }
+  };
+  for (let index = wrappers.length - 1; index >= 0; index--) {
+    const wrapper = wrappers[index];
+    node = {
+      type: "Atrule",
+      name: wrapper.name,
+      prelude: clonePrelude(wrapper.prelude),
+      block: {
+        type: "Block",
+        children: new List().fromArray([node])
+      }
+    };
+  }
+  output.appendData(node);
+}
+function resolveSelectors(rule, parentSelectors) {
+  if (rule.prelude.type !== "SelectorList") {
+    throw new TypeError(
+      "Unable to render Tailwind CSS: raw selectors cannot be downleveled safely."
+    );
+  }
+  if (!parentSelectors) {
+    assertNoNestingSelector(rule.prelude);
+    return clone(rule.prelude);
   }
+  const resolved = new List();
+  const nestedSelectors = rule.prelude;
+  parentSelectors.children.forEach((parentNode) => {
+    const parent = parentNode;
+    nestedSelectors.children.forEach((nestedNode) => {
+      const nested = nestedNode;
+      if (containsNestingSelector(nested)) {
+        const selector = clone(nested);
+        walk(selector, {
+          enter(node, item, list) {
+            if (node.type === "NestingSelector") {
+              list.replace(item, clone(parent).children);
+            }
+          }
+        });
+        resolved.appendData(selector);
+      } else {
+        const selector = parse(
+          `${generate(parent)} ${generate(nested)}`,
+          { context: "selector" }
+        );
+        resolved.appendData(selector);
+      }
+    });
+  });
+  return { type: "SelectorList", children: resolved };
+}
+function containsNestingSelector(selector) {
+  let found = false;
+  walk(selector, (node) => {
+    if (node.type === "NestingSelector") found = true;
+  });
+  return found;
+}
+function assertNoNestingSelector(selectors) {
+  walk(selectors, (node) => {
+    if (node.type === "NestingSelector") {
+      throw new TypeError(
+        "Unable to render Tailwind CSS: a top-level nesting selector has no parent selector."
+      );
+    }
+  });
+}
+function isConditionalAtrule(atrule) {
+  return atrule.name === "media" || atrule.name === "supports";
+}
+function clonePrelude(prelude) {
+  return prelude ? clone(prelude) : null;
 }
 function downlevelRangeMediaQueries(styleSheet) {
   const replacements = [];
@@ -77,10 +173,7 @@ function downlevelRangeMediaQueries(styleSheet) {
     enter(originalNode, item) {
       const node = originalNode;
       if (item && node.type === "FeatureRange") {
-        const replacement = downlevelFeatureRange(node);
-        if (replacement) {
-          replacements.push({ item, replacement });
-        }
+        replacements.push({ item, replacement: downlevelFeatureRange(node) });
       }
     }
   });
@@ -89,19 +182,40 @@ function downlevelRangeMediaQueries(styleSheet) {
   }
 }
 function downlevelFeatureRange(range) {
-  if (range.left.type !== "Identifier") return null;
-  let prefix;
-  if (range.leftComparison === ">=" || range.leftComparison === ">") {
-    prefix = "min-";
-  } else if (range.leftComparison === "<=" || range.leftComparison === "<") {
-    prefix = "max-";
+  const source = generate(range);
+  if (range.rightComparison !== null || range.right !== null) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported two-sided media range ${source}.`
+    );
+  }
+  let name;
+  let value;
+  let direct;
+  if (range.left.type === "Identifier") {
+    name = range.left.name;
+    value = range.middle;
+    direct = true;
+  } else if (range.middle.type === "Identifier") {
+    name = range.middle.name;
+    value = range.left;
+    direct = false;
   } else {
-    return null;
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported media range ${source}.`
+    );
+  }
+  const comparison = range.leftComparison;
+  const minimum = direct ? comparison === ">=" || comparison === ">" : comparison === "<=" || comparison === "<";
+  const maximum = direct ? comparison === "<=" || comparison === "<" : comparison === ">=" || comparison === ">";
+  if (!minimum && !maximum) {
+    throw new TypeError(
+      `Unable to render Tailwind CSS: unsupported media range ${source}.`
+    );
   }
   return {
     type: "Feature",
     kind: "media",
-    name: `${prefix}${range.left.name}`,
-    value: range.middle
+    name: `${minimum ? "min-" : "max-"}${name}`,
+    value
   };
 }

package/dist/runtime/tailwind/engine/css/extract-rules-per-class.d.ts

@@ -2,5 +2,7 @@ import { type CssNode, type Rule } from 'css-tree';
 export interface ExtractedRules {
     inlinable: Map<string, Rule[]>;
     nonInlinable: Map<string, Rule[]>;
+    /** Canonical non-inlinable rules, once each and in stylesheet order. */
+    orderedNonInlinable: Rule[];
 }
 export declare function extractRulesPerClass(root: CssNode, classes: string[]): ExtractedRules;

package/dist/runtime/tailwind/engine/css/extract-rules-per-class.js

@@ -5,6 +5,7 @@ export function extractRulesPerClass(root, classes) {
   const classSet = new Set(classes);
   const inlinableRules = /* @__PURE__ */ new Map();
   const nonInlinableRules = /* @__PURE__ */ new Map();
+  const orderedNonInlinableRules = [];
   const appendRule = (map, className, rule) => {
     const existing = map.get(className);
     if (existing) {
@@ -35,8 +36,10 @@ export function extractRulesPerClass(root, classes) {
         }
       } else {
         const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
+        let includesRequestedClass = false;
         for (const className of selectorClasses) {
           if (!classSet.has(className)) continue;
+          includesRequestedClass = true;
           if (inlinablePart) {
             appendRule(inlinableRules, className, inlinablePart);
           }
@@ -44,11 +47,15 @@ export function extractRulesPerClass(root, classes) {
             appendRule(nonInlinableRules, className, nonInlinablePart);
           }
         }
+        if (includesRequestedClass && nonInlinablePart) {
+          orderedNonInlinableRules.push(nonInlinablePart);
+        }
       }
     }
   });
   return {
     inlinable: inlinableRules,
-    nonInlinable: nonInlinableRules
+    nonInlinable: nonInlinableRules,
+    orderedNonInlinable: orderedNonInlinableRules
   };
 }

package/dist/runtime/tailwind/engine/index.d.ts

@@ -30,12 +30,12 @@ export interface ComputedStyles {
      */
     residualClassMap: Map<string, string>;
     /**
-     * Original (unsanitized) names of every class that produced a non-inlinable
-     * rule, in stylesheet-emission order — the exact list React Email interpolates
-     * into its no-`<head>` error (`Array.from(nonInlinableRules.keys())`,
-     * tailwind.tsx). This order (breakpoint/variant emission order) differs from the
-     * authored class order, so it cannot be reconstructed from {@link residualClassMap}
-     * and must be carried canonically.
+     * Original (unsanitized) names of classes that need the generated `<head>`
+     * CSS: non-inlinable rules and animation declarations with referenced
+     * keyframes. Non-inlinable rules keep stylesheet-emission order; animation-only
+     * classes follow in authored order. This list drives the missing-`<head>` error
+     * and cannot be reconstructed from {@link residualClassMap}, because an
+     * animation declaration itself can still be inlined.
      */
     nonInlinableClassNames: string[];
 }

package/dist/runtime/tailwind/engine/index.js

@@ -1,4 +1,9 @@
-import { generate, List } from "css-tree";
+import {
+  clone,
+  generate,
+  List,
+  walk
+} from "css-tree";
 import { downlevelForEmailClients } from "./css/downlevel-for-email-clients.js";
 import { extractRulesPerClass } from "./css/extract-rules-per-class.js";
 import { getCustomProperties } from "./css/get-custom-properties.js";
@@ -7,6 +12,35 @@ import { sanitizeClassName } from "./compatibility/sanitize-class-name.js";
 import { sanitizeNonInlinableRules } from "./css/sanitize-non-inlinable-rules.js";
 import { sanitizeStyleSheet } from "./sanitize-stylesheet.js";
 import { setupTailwind } from "./setup-tailwind.js";
+function collectKeyframesDefinitions(styleSheet) {
+  const definitions = [];
+  styleSheet.children.forEach((node) => {
+    if (node.type === "Atrule" && (node.name === "keyframes" || node.name === "-webkit-keyframes") && node.prelude) {
+      definitions.push({ name: generate(node.prelude).trim(), node });
+    }
+  });
+  return definitions;
+}
+function collectReferencedKeyframes(rulesByClass, knownNames) {
+  const references = /* @__PURE__ */ new Map();
+  for (const [className, rules] of rulesByClass) {
+    const classReferences = /* @__PURE__ */ new Set();
+    for (const rule of rules) {
+      walk(rule, {
+        visit: "Declaration",
+        enter(declaration) {
+          if (declaration.property !== "animation" && declaration.property !== "animation-name") return;
+          walk(declaration.value, (node) => {
+            const name = node.type === "Identifier" ? node.name : node.type === "String" ? node.value : null;
+            if (name && knownNames.has(name)) classReferences.add(name);
+          });
+        }
+      });
+    }
+    if (classReferences.size > 0) references.set(className, classReferences);
+  }
+  return references;
+}
 export async function createTailwindEngine(options = {}) {
   const { config, theme, utility } = options;
   const tailwindSetup = await setupTailwind({
@@ -17,17 +51,42 @@ export async function createTailwindEngine(options = {}) {
     tailwindSetup.addUtilities(classNames);
     const styleSheet = tailwindSetup.getStyleSheet();
     sanitizeStyleSheet(styleSheet);
-    const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classNames);
+    const {
+      inlinable: inlinableRules,
+      nonInlinable: nonInlinableRules,
+      orderedNonInlinable
+    } = extractRulesPerClass(styleSheet, classNames);
     const customProperties = getCustomProperties(styleSheet);
+    const keyframesDefinitions = collectKeyframesDefinitions(styleSheet);
+    const knownKeyframeNames = new Set(
+      keyframesDefinitions.map((definition) => definition.name)
+    );
+    const animationReferences = /* @__PURE__ */ new Map();
+    for (const rules of [inlinableRules, nonInlinableRules]) {
+      for (const [className, names] of collectReferencedKeyframes(
+        rules,
+        knownKeyframeNames
+      )) {
+        const existing = animationReferences.get(className) ?? /* @__PURE__ */ new Set();
+        for (const name of names) existing.add(name);
+        animationReferences.set(className, existing);
+      }
+    }
+    const referencedKeyframeNames = new Set(
+      Array.from(animationReferences.values()).flatMap((names) => [...names])
+    );
     const nonInlineStyles = {
       type: "StyleSheet",
-      children: new List().fromArray(
-        Array.from(nonInlinableRules.values()).flat()
-      )
+      children: new List().fromArray(orderedNonInlinable)
     };
     sanitizeNonInlinableRules(nonInlineStyles);
+    for (const definition of keyframesDefinitions) {
+      if (referencedKeyframeNames.has(definition.name)) {
+        nonInlineStyles.children.appendData(clone(definition.node));
+      }
+    }
     downlevelForEmailClients(nonInlineStyles);
-    const nonInlinableCss = nonInlinableRules.size > 0 ? generate(nonInlineStyles) : "";
+    const nonInlinableCss = nonInlineStyles.children.isEmpty ? "" : generate(nonInlineStyles);
     const inlinable = /* @__PURE__ */ new Map();
     for (const [className, rules] of inlinableRules) {
       inlinable.set(className, makeInlineStylesFor(rules, customProperties));
@@ -41,11 +100,15 @@ export async function createTailwindEngine(options = {}) {
         residualClassMap.set(className, className);
       }
     }
+    const nonInlinableClassNames = new Set(nonInlinableRules.keys());
+    for (const className of classNames) {
+      if (animationReferences.has(className) && !nonInlinableRules.has(className)) nonInlinableClassNames.add(className);
+    }
     return {
       inlinable,
       nonInlinableCss,
       residualClassMap,
-      nonInlinableClassNames: Array.from(nonInlinableRules.keys())
+      nonInlinableClassNames: [...nonInlinableClassNames]
     };
   };
   return { computeStyles };

package/dist/runtime/tailwind/post-render.js

@@ -63,12 +63,7 @@ function rewriteOpenTag(openTag, newClass, newStyle) {
   }
   return tag;
 }
-function inlinePlainElements(fragment, region) {
-  const hits = collectElements(fragment);
-  for (const hit of hits) {
-    region.classNames.push(...classTokens(hit.classValue));
-  }
-  const computed = region.engine.computeStyles(region.classNames);
+function inlinePlainElements(fragment, hits, computed) {
   const edits = [];
   for (const hit of hits) {
     const tokens = classTokens(hit.classValue);
@@ -131,8 +126,12 @@ function processRegion(html, region) {
   if (startIndex === -1 || endIndex === -1) return html;
   const fragmentStart = startIndex + startComment.length;
   const fragment = html.slice(fragmentStart, endIndex);
-  const inlined = inlinePlainElements(fragment, region);
+  const hits = collectElements(fragment);
+  for (const hit of hits) {
+    region.classNames.push(...classTokens(hit.classValue));
+  }
   const computed = region.engine.computeStyles(region.classNames);
+  const inlined = inlinePlainElements(fragment, hits, computed);
   if (inlined.includes(region.placeholder)) {
     const completed = inlined.replace(region.placeholder, computed.nonInlinableCss);
     return html.slice(0, startIndex) + completed + html.slice(endIndex + endComment.length);

package/dist/types.d.mts

@@ -1,4 +1,4 @@
-export { type RenderedEmail } from '../dist/runtime/render/types.js'
+export { type EmailComponentProps, type RenderedEmail } from '../dist/runtime/render/types.js'
 
 export { default } from './module.mjs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lupinum/nuxt-email",
-  "version": "0.1.0",
+  "version": "1.0.0-beta.1",
   "description": "Typed transactional email for Nuxt with email-safe Tailwind v4",
   "keywords": [
     "email",
@@ -92,7 +92,8 @@
     "typescript": "~5.9.3",
     "vitest": "^4.1.8",
     "vue": "3.5.40",
-    "vue-tsc": "^3.3.3"
+    "vue-tsc": "^3.3.3",
+    "yaml": "2.9.0"
   },
   "scripts": {
     "changelog": "changelogen --no-output",
@@ -105,7 +106,8 @@
     "oracle:check": "node --import tsx test/conformance/tooling/generate-react-oracle.ts --check",
     "oracle:write": "node --import tsx test/conformance/tooling/generate-react-oracle.ts --write",
     "performance:measure": "node --expose-gc --import tsx test/performance/measure.ts",
-    "docs:build": "nuxt-module-build prepare && pnpm prepack && pnpm --dir docs build",
+    "docs:build": "pnpm docs:theme && nuxt-module-build prepare && pnpm prepack && pnpm --dir docs build",
+    "docs:theme": "node scripts/check-docs-theme.mjs",
     "proofs:generate": "node --import tsx scripts/proofs/generate.ts",
     "proofs:send": "node --import tsx scripts/proofs/send.ts",
     "repo:check": "node scripts/check-repository-policy.mjs",
@@ -113,7 +115,8 @@
     "release:prepare": "changelogen --bump --clean --hideAuthorEmail",
     "release:artifact": "pnpm release:verify --output .release/lupinum-nuxt-email.tgz && node scripts/write-release-manifest.mjs",
     "lint": "eslint .",
-    "test": "vitest run",
+    "test": "vitest run --exclude test/preview.test.ts && pnpm test:preview",
+    "test:preview": "vitest run test/preview.test.ts",
     "test:conformance": "vitest run test/conformance",
     "test:watch": "vitest watch",
     "test:types": "pnpm dev:prepare && nuxt prepare test/fixtures/basic && nuxt prepare test/fixtures/code-block && nuxt prepare test/fixtures/preview && vue-tsc --noEmit && vue-tsc --noEmit -p test/fixtures/basic/.nuxt/tsconfig.server.json && vue-tsc --noEmit -p test/fixtures/code-block/.nuxt/tsconfig.server.json && vue-tsc --noEmit -p test/fixtures/preview/.nuxt/tsconfig.server.json && cd playground && vue-tsc --noEmit",