@lupinum/nuxt-email 1.0.0-beta.3 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 1.0.0-beta.5
+
+### Patch Changes
+
+- [#63](https://github.com/lupinum-dev/nuxt-email/pull/63) [`8ceae4a`](https://github.com/lupinum-dev/nuxt-email/commit/8ceae4a7cf9439962e03f01ceb50bffa0b8fdd0f) Thanks [@Mat4m0](https://github.com/Mat4m0)! - Fix conditional and child utility styles with the current Tailwind compiler, and fail instead of dropping unsupported conditions.
+  
+  `ETailwind` keeps media-query, pseudo-class, child (`*:`, `**:`) and arbitrary selector variants such as `[:where(&)]:` with their conditions. Supported wrappers around a utility are `@media` and `@supports` (`@layer` is ignored). A utility inside any other at-rule now throws, for example `@container` variants (`@sm:`) or custom CSS in the `ETailwind` `utility` prop that wraps a class in `@scope` or `@container`. It throws `Unable to render Tailwind CSS: @<name> rules are not supported.` Before, the condition was dropped silently and the style applied everywhere.
+  
+  Migration: remove `@container` variants (`@sm:`, `@md:` and so on) from email templates, and move custom CSS in the `ETailwind` `utility` prop out of `@container`, `@scope` and other unsupported at-rules, or rewrite the condition with `@media` or `@supports`.
+
+## v1.0.0-beta.4
+
+[compare changes](https://github.com/lupinum-dev/nuxt-email/compare/v1.0.0-beta.3...v1.0.0-beta.4)
+
+### 🚀 Enhancements
+
+- **docs:** Ship versioned package guidance ([#55](https://github.com/lupinum-dev/nuxt-email/pull/55))
+
+### 🩹 Fixes
+
+- **deps:** Clear workspace advisories and update Vitest ([#54](https://github.com/lupinum-dev/nuxt-email/pull/54))
+
+### ❤️ Contributors
+
+- Matthias Amon
+
 ## v1.0.0-beta.3
 
 [compare changes](https://github.com/lupinum-dev/nuxt-email/compare/v1.0.0-beta.2...v1.0.0-beta.3)

package/README.md

@@ -20,12 +20,12 @@
   <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-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://discord.lupinum.com"><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]
-> [`1.0.0-beta.2`](https://www.npmjs.com/package/@lupinum/nuxt-email/v/1.0.0-beta.2) is published on npm's `next` tag. The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1; the full eight-client checklist and an external transactional beta still block stable `1.0.0`. The unscoped `nuxt-email` package on npm is unrelated to this project.
+> The 1.0.0 beta is published on npm's [`next` tag](https://www.npmjs.com/package/@lupinum/nuxt-email?activeTab=versions). The [three-client beta smoke test](https://github.com/lupinum-dev/nuxt-email/blob/main/docs/release/client-qa-checklist.md#100-beta1-smoke-test) passed against beta.1; the full eight-client checklist and an external transactional beta still block stable `1.0.0`. The unscoped `nuxt-email` package on npm is unrelated to this project.
 
 ## Why use Nuxt Email?
 
@@ -113,20 +113,52 @@ export default defineEventHandler(async () => {
 
 The template name and props are generated from the Vue file. Invalid names and props fail during type checking. Use a sibling fixture to inspect it in `/__email`, then [pass the rendered result to your provider](https://nuxt-email.lupinum.com/docs/guides/sending-email).
 
-## Discord
+Questions? Ask in the [Lupinum OSS Discord](https://discord.lupinum.com).
 
-Join the Lupinum OSS community to discuss Nuxt Email, ask questions, and share
-what you build.
+## Agent setup
 
-<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>
+`@lupinum/nuxt-email` ships its documentation inside the package for coding
+agents such as Claude Code, Codex and Cursor. The pages match the installed
+version, so an agent does not follow the website for a different version.
+
+To set it up, give your coding agent this task:
+
+```text
+Set up @lupinum/nuxt-email for coding agents as described under "Agent setup" in its README.
+```
+
+### Steps for the agent
+
+1. Find `node_modules/@lupinum/nuxt-email/dist/agent/AGENTS.md`. Look in the
+   directory of the project that depends on `@lupinum/nuxt-email` first, then
+   in its parent directories up to the repository root (workspaces can hoist
+   packages). Read it; it lists the documentation pages.
+2. Add the section below to the project's agent instructions: `AGENTS.md`, or
+   `CLAUDE.md` if the project has only that file. If it has neither, create
+   `AGENTS.md`. Write the path relative to the repository root, through
+   `node_modules/@lupinum/nuxt-email` (for example
+   `apps/web/node_modules/@lupinum/nuxt-email/...` in a workspace). Never write
+   a resolved path such as `node_modules/.pnpm/...`: it contains the version and
+   breaks after an upgrade. If a section for `@lupinum/nuxt-email` already
+   exists, leave it as it is.
+
+   Use the path you found in place of the sample path:
+
+   ```md
+   ## @lupinum/nuxt-email
+
+   Before you change code that uses @lupinum/nuxt-email, read
+   `node_modules/@lupinum/nuxt-email/dist/agent/AGENTS.md` and the pages it
+   lists. They document the installed version. Prefer them over what you
+   remember about this package and over the website.
+   ```
+
+3. Do not copy the documentation into the project and do not install a skill.
+   The section points into the installed package, so it stays correct after
+   every upgrade or downgrade.
+
+If the file does not exist, the installed version has no packaged
+documentation. Read the package README and its TypeScript types instead.
 
 ## Email components
 
@@ -196,7 +228,7 @@ See the [changelog](CHANGELOG.md) for released changes.
 
 ## Contributing and development
 
-Read the [contribution guide](https://github.com/lupinum-dev/nuxt-email/blob/main/CONTRIBUTING.md) before you open a pull request. Run the normal handoff gate before you submit a change:
+Read the [contribution guide](https://github.com/lupinum-dev/nuxt-email/blob/main/.github/CONTRIBUTING.md) before you open a pull request. Run the normal handoff gate before you submit a change:
 
 ```bash
 corepack enable
@@ -204,11 +236,11 @@ pnpm install --frozen-lockfile
 pnpm verify
 ```
 
-Maintainers use the protected workflow in [MAINTAINING.md](https://github.com/lupinum-dev/nuxt-email/blob/main/MAINTAINING.md) for releases.
+Maintainers use the protected workflow in [Lupinum OSS](https://oss.lupinum.com/docs/releasing) for releases.
 
 ## Support and security
 
-Open a [GitHub issue](https://github.com/lupinum-dev/nuxt-email/issues) for bugs and focused proposals. Join the [Lupinum OSS Discord](https://discord.gg/RPH6SeA36N) for project discussion.
+Open a [GitHub issue](https://github.com/lupinum-dev/nuxt-email/issues) for bugs and focused proposals. Join the [Lupinum OSS Discord](https://discord.lupinum.com) for project discussion.
 
 Use the [private security process](https://github.com/lupinum-dev/nuxt-email/security/policy) to report a vulnerability. Do not report a vulnerability in a public issue.
 

package/THIRD_PARTY_NOTICES

@@ -2,12 +2,12 @@ React Email
 ===========
 
 Nuxt Email contains Vue adaptations of selected compatibility algorithms and
-markup strategies from React Email 6.9.0, pinned at source commit
-6eb428924c4c2774228a07cbec1977ad8898f143. The adapted surface covers button
+markup strategies from React Email 6.11.0, pinned at source commit
+15419ff1f4cd0e32ed2c15a4a9182cc47a200a60. The adapted surface covers button
 padding and Outlook spacing, text margin expansion, table padding placement,
 hidden preview text, the font-face declaration, inline code rendering, Markdown
 rendering, and Tailwind class inlining. The pinned upstream source is available at
-https://github.com/resend/react-email/tree/6eb428924c4c2774228a07cbec1977ad8898f143.
+https://github.com/resend/react-email/tree/15419ff1f4cd0e32ed2c15a4a9182cc47a200a60.
 
 Copyright 2024 Plus Five Five, Inc
 
@@ -44,7 +44,7 @@ whose text is reproduced once below.
 - css-tree 3.2.1 — CSS parsing and generation in the Tailwind inlining engine.
   Copyright (C) 2016-2026 by Roman Dvornov
 
-- tailwindcss 4.1.18 — utility compilation used by ETailwind; its stylesheet CSS
+- tailwindcss 4.3.3 — utility compilation used by ETailwind; its stylesheet CSS
   is also vendored byte-for-byte into the engine.
   Copyright (c) Tailwind Labs, Inc.
 

package/dist/agent/AGENTS.md

@@ -0,0 +1,43 @@
+# @lupinum/nuxt-email 1.0.0-beta.5 documentation
+
+These pages document the installed version 1.0.0-beta.5. Prefer them over what you
+remember about this package and over the website, which may describe another version.
+Read the pages that match the task before you write code. If they do not answer a question,
+the user can ask in the Lupinum OSS Discord: https://discord.lupinum.com
+
+> Typed transactional email for Nuxt, with email-safe Tailwind v4.
+
+## When to use
+
+Use this site to author and render transactional email with Nuxt Email.
+
+## Documentation
+
+- [Introduction](./pages/docs/getting-started.md): What Nuxt Email is, why its output is trustworthy, and how it is compared with a fixed React Email version.
+- [Choose the right tool](./pages/docs/getting-started/choose-a-tool.md): Compare Nuxt Email with the closest Vue, Nuxt, standalone, and React email workflows.
+- [Installation](./pages/docs/getting-started/installation.md): Add @lupinum/nuxt-email to a supported Nuxt application and optionally configure syntax highlighting.
+- [Your first email](./pages/docs/getting-started/first-email.md): Write a Vue email template under app/emails/, add a typed preview fixture, and understand template naming.
+- [Render from Nitro](./pages/docs/getting-started/render-from-nitro.md): Call the typed, server-only renderEmail auto-import and pass its html and text to your provider SDK.
+- [Overview](./pages/docs/components.md): The built-in E-prefixed components, optional ECodeBlock, and their shared safety rules.
+- [Structure](./pages/docs/components/structure.md): EHtml, EHead, EBody, EPreview, and EFont — the document shell, head, body, inbox preview text, and font declarations.
+- [Layout](./pages/docs/components/layout.md): EContainer, ESection, ERow, and EColumn — presentation-table primitives for stable email layouts.
+- [Content](./pages/docs/components/content.md): EText, EHeading, ELink, EImg, EHr, and EButton for visible email content.
+- [Code](./pages/docs/components/code.md): Compatibility-safe inline code and opt-in syntax-highlighted blocks.
+- [Markdown](./pages/docs/components/markdown.md): EMarkdown renders Markdown to email-safe HTML with inline styles and per-element overrides.
+- [Tailwind](./pages/docs/components/tailwind.md): ETailwind compiles Tailwind v4 utilities into email-safe inline styles and head rules during server rendering.
+- [Guides](./pages/docs/guides.md): Task-focused guides for authoring, previewing, testing, and sending transactional email.
+- [Preview workflow](./pages/docs/guides/preview-workflow.md): Use the development-only /__email preview, add fixtures, and monitor exact rendered size without treating it as a client guarantee.
+- [Sending email](./pages/docs/guides/sending-email.md): Hand Nuxt Email output to a provider SDK or a local Mailpit SMTP server.
+- [Using Tailwind](./pages/docs/guides/tailwind.md): How ETailwind inlines utilities, how nested-component classes are reached, and the exact documented limitations.
+- [Subject lines](./pages/docs/guides/subject-lines.md): Compute a subject line from the same typed props with defineEmail, and read it back from the render result.
+- [Plain text](./pages/docs/guides/plain-text.md): How the plain-text fallback is produced from the rendered HTML, what it excludes, and how to control table output.
+- [Testing your emails](./pages/docs/guides/testing-your-emails.md): Render templates and assert on their output in unit tests with the @lupinum/nuxt-email/testing utilities.
+- [Client compatibility and proofs](./pages/docs/guides/client-compatibility.md): What is automatically proven, and the manual email-client QA checklist that closes the remaining gap.
+- [Render outside Nitro](./pages/docs/guides/standalone-rendering.md): Compile the same Vue templates for a Node backend without booting Nuxt.
+- [Reference](./pages/docs/reference.md): The precise contracts — renderEmail, module behavior, error types, conformance, and migration.
+- [renderEmail](./pages/docs/reference/render-email.md): The one public render API — its signature, deterministic result shape, plain-text contract, and security boundary.
+- [defineEmail](./pages/docs/reference/define-email.md): Declare a template subject or authored plain-text alternative from script setup.
+- [Module behavior](./pages/docs/reference/module.md): What the module registers, its fixed conventions, and the opt-in codeBlock configuration.
+- [Error types](./pages/docs/reference/errors.md): Public error classes, their stable fields, common symptoms, and recovery steps.
+- [Conformance and divergences](./pages/docs/reference/conformance.md): How compatibility is measured against React Email, the current pass numbers, and every intentional divergence.
+- [Migration from React Email](./pages/docs/reference/migration.md): Translate JSX templates, props, and rendering calls to Nuxt Email's Vue single-file components and generated server API.

package/dist/agent/pages/docs/components/code.md

@@ -0,0 +1,68 @@
+---
+title: "Code"
+description: "Compatibility-safe inline code and opt-in syntax-highlighted blocks."
+url: "https://nuxt-email.lupinum.com/docs/components/code"
+route: "/docs/components/code"
+locale: "en"
+section: "Documentation"
+collection: "docs"
+source: "ginko-content"
+---
+
+# Code
+
+> Compatibility-safe inline code and opt-in syntax-highlighted blocks.
+
+## ECodeInline
+
+`ECodeInline` renders inline code inside a text flow. Place it inside `EText` (or another text element). It accepts safe HTML attributes and forwards them, plus `style`, to both emitted elements.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). | — | — |
+
+It renders three siblings: a `<style>` with the `Orange.fr` webmail compatibility rule, a visible `<code>` element, and a hidden copy `<span>` (`display:none`). The hidden compatibility copy is excluded from plain-text conversion, so recipients receive the code once.
+
+```vue
+<EText>
+  Run <ECodeInline class="inline-code">pnpm install</ECodeInline> to begin.
+</EText>
+```
+
+## ECodeBlock
+
+`ECodeBlock` is available only when `codeBlock` is configured on the Nuxt module. It uses the Shiki syntax highlighter and renders escaped tokens with inline theme colors. The language list is a closed build-time allowlist. Only configured languages and the grammars they import are bundled. A different runtime `language` value throws and lists the enabled languages.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `code` | `string` | — | Yes |
+| `language` | Configured language union | — | Yes |
+| `lineNumbers` | `boolean` | `false` | No |
+| `fontFamily` | `string` | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` | No |
+
+Code is escaped before rendering. The language is typed from the configured allowlist and checked again at runtime. Line numbers are decorative and excluded from plain text.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@lupinum/nuxt-email'],
+  nuxtEmail: {
+    codeBlock: {
+      languages: ['typescript', 'bash'],
+      theme: 'github-dark',
+    },
+  },
+})
+```
+
+```vue
+<ECodeBlock
+  :code="source"
+  language="typescript"
+  line-numbers
+  style="border-radius:8px;padding:16px"
+/>
+```
+
+The configured theme produces concrete inline colors; there is no stylesheet or browser runtime. Author styles are also inline for email-client compatibility. Theme selection is build-time because email clients do not reliably support the CSS-variable approach used for responsive light/dark Shiki themes.
+
+Without `codeBlock`, the component is unregistered and Shiki performs no module-setup or production-bundle work. Use the generated `#nuxt-email/testing` binding when testing templates that contain `ECodeBlock`.

package/dist/agent/pages/docs/components/content.md

@@ -0,0 +1,111 @@
+---
+title: "Content"
+description: "EText, EHeading, ELink, EImg, EHr, and EButton for visible email content."
+url: "https://nuxt-email.lupinum.com/docs/components/content"
+route: "/docs/components/content"
+locale: "en"
+section: "Documentation"
+collection: "docs"
+source: "ginko-content"
+---
+
+# Content
+
+> EText, EHeading, ELink, EImg, EHr, and EButton for visible email content.
+
+These components carry the visible content of an email. Layout-sensitive components provide email-safe defaults. `ELink` is visually neutral.
+
+## EText
+
+`EText` renders a `<p>` with `font-size: 14px`, `line-height: 24px`, and `16px` top and bottom margins. Author styles override these defaults.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). | — | — |
+
+```vue
+<EText :style="{ color: '#334155' }">Your workspace is ready.</EText>
+```
+
+## EHeading
+
+`EHeading` renders a heading element. An unsupported tag fails during rendering.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `h1` | No |
+
+It also accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares).
+
+```vue
+<EHeading as="h2">Account ready</EHeading>
+```
+
+## ELink
+
+`ELink` renders a visually neutral anchor. It adds no color or text decoration.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `href` | `string` | — | Yes |
+| `target` | Safe native anchor target | `_blank` | No |
+
+`href` must be non-empty. The value is escaped, but its URL scheme is not validated. Set visual styles explicitly and validate application-controlled URLs.
+
+```vue
+<ELink href="https://example.com/account" style="color:#2563eb">Open account</ELink>
+```
+
+## EImg
+
+`EImg` renders an image with block display and no border, outline, or text decoration.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `src` | `string` | — | Yes |
+| `alt` | `string` | — | Yes |
+
+`src` must be non-empty. Use `alt=""` for a decorative image. The URL is serialized but never fetched. Safe image attributes such as `width` and `height` are accepted.
+
+```vue
+<EImg src="https://example.com/logo.png" alt="Example" width="120" height="32" />
+```
+
+## EHr
+
+`EHr` renders a full-width horizontal rule with a transparent border and a `1px solid #eaeaea` top border. Author styles override individual defaults.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). | — | — |
+
+```vue
+<EHr :style="{ borderTopColor: '#cbd5e1' }" />
+```
+
+## EButton
+
+`EButton` renders an anchor with conditional Outlook spacer markup. The spacer keeps its padding usable in Outlook for Windows.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `href` | `string` | — | Yes |
+| `target` | Safe native anchor target | `_blank` | No |
+| `style` | Vue style value | Email-safe anchor defaults | No |
+
+The default style uses `line-height: 100%`, no text decoration, inline-block display, and `max-width: 100%`. It also sets the Outlook-specific `mso-padding-alt` property to `0px`. Author styles override these values.
+
+Padding accepts finite non-negative numbers or `px`, `em`, `rem`, and `%` values. Shorthand accepts one to four values. Invalid units, negative or non-finite values, and output large enough to inflate the message fail during rendering.
+
+```vue
+<EButton
+  href="https://example.com/activate"
+  :style="{ backgroundColor: '#0f5132', color: '#fff', padding: '12px 20px' }"
+>
+  Activate account
+</EButton>
+```
+
+<card title="Client notes" icon="lucide:mail">
+Remote images are often blocked, so always provide useful alternative text. Outlook for Windows ignores CSS padding on inline anchors; `EButton` supplies conditional spacer markup for that client. Verify both behaviors during [manual QA](/raw/docs/guides/client-compatibility.md).
+</card>

package/dist/agent/pages/docs/components/layout.md

@@ -0,0 +1,89 @@
+---
+title: "Layout"
+description: "EContainer, ESection, ERow, and EColumn — presentation-table primitives for stable email layouts."
+url: "https://nuxt-email.lupinum.com/docs/components/layout"
+route: "/docs/components/layout"
+locale: "en"
+section: "Documentation"
+collection: "docs"
+source: "ginko-content"
+---
+
+# Layout
+
+> EContainer, ESection, ERow, and EColumn — presentation-table primitives for stable email layouts.
+
+These components use presentation tables for email-client compatibility.
+
+## EContainer
+
+`EContainer` renders a centered presentation table for bounded content. It defaults to `align="center"`, `width="100%"`, and a maximum width of `37.5em`. Its fixed attributes are `border="0"`, `cellpadding="0"`, `cellspacing="0"`, and `role="presentation"`.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts safe table attributes except the fixed attributes above. | — | — |
+
+```vue
+<EContainer :style="{ maxWidth: '600px' }">Content</EContainer>
+```
+
+## ESection
+
+`ESection` renders a full-width presentation table with one inner cell.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts safe table attributes except `border`, `cellpadding`, `cellspacing`, and `role`. | — | — |
+
+```vue
+<ESection :style="{ padding: '16px' }">Content</ESection>
+```
+
+## ERow
+
+`ERow` renders a full-width presentation table whose row receives its default slot. Put `EColumn` components directly in the slot.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts safe table attributes except `border`, `cellpadding`, `cellspacing`, and `role`. | — | — |
+
+```vue
+<ERow><EColumn>Content</EColumn></ERow>
+```
+
+## EColumn
+
+`EColumn` renders a `<td>` cell. It has no default width and adds no synthetic React marker.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts safe cell attributes such as `width`, `colspan`, alignment, and `style`. | — | — |
+
+```vue
+<EColumn width="50%">Left</EColumn>
+```
+
+## Padding placement
+
+`EContainer`, `ESection`, and `ERow` move physical padding known at render time to a `<td>`. This includes author styles and non-variant Tailwind utilities. Responsive and pseudo-class utilities remain CSS rules because they have no single inline value. Put responsive padding on an inner `EColumn` and verify the target clients.
+
+`ERow` adds its padding wrapper only when physical padding exists. Logical padding properties remain on the table.
+
+## Fixed presentation attributes
+
+`EContainer`, `ESection`, and `ERow` reject overrides for `border`, `cellpadding`, `cellspacing`, and `role`, including alternate casing. Use `style` when you need a visual border. This deliberate [divergence](/raw/docs/reference/conformance.md) prevents silently broken layout semantics.
+
+```vue
+<EContainer :style="{ maxWidth: '600px', padding: '24px' }">
+  <ESection :style="{ padding: '16px 20px' }">
+    <ERow>
+      <EColumn width="50%">Left</EColumn>
+      <EColumn width="50%">Right</EColumn>
+    </ERow>
+  </ESection>
+</EContainer>
+```
+
+<card title="Client note: Outlook columns" icon="lucide:columns-3">
+Columns remain table cells in Outlook for Windows. Give them explicit widths and verify narrow layouts in your [client QA](/raw/docs/guides/client-compatibility.md).
+</card>

package/dist/agent/pages/docs/components/markdown.md

@@ -0,0 +1,49 @@
+---
+title: "Markdown"
+description: "EMarkdown renders Markdown to email-safe HTML with inline styles and per-element overrides."
+url: "https://nuxt-email.lupinum.com/docs/components/markdown"
+route: "/docs/components/markdown"
+locale: "en"
+section: "Documentation"
+collection: "docs"
+source: "ginko-content"
+---
+
+# Markdown
+
+> EMarkdown renders Markdown to email-safe HTML with inline styles and per-element overrides.
+
+## EMarkdown
+
+`EMarkdown` renders Markdown to email-safe HTML with inline styles. It is useful when content comes from a content management system (CMS) rather than Vue markup.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `source` | `string` | Text-only default slot | No |
+| `markdownCustomStyles` | Per-element style map | Built-in email-safe styles | No |
+
+When `source` is a string, it takes precedence over the default slot. Custom styles merge over the defaults.
+
+Raw HTML is rejected, including HTML comments. Links and images accept relative URLs plus `http`, `https`, `mailto`, `tel`, and `cid`; other schemes are rejected after HTML-entity and control-character normalization. HTML-looking text inside code spans and fences is escaped. This keeps Markdown from becoming an implicit raw-HTML escape hatch.
+
+The rendered container accepts Vue's normal `class`, `style`, and safe HTML attributes. Use ordinary string, object, or array `style` values; include CSS units explicitly for dimensional values such as padding.
+
+The default slot must contain **text only**; an element child throws a `TypeError` rather than being silently stringified. Links render with `target="_blank"`, and tables render with `role="presentation"`.
+
+```vue
+<EMarkdown source="# Title\n\nA paragraph with a [link](https://example.com)." />
+```
+
+With overrides:
+
+```vue
+<EMarkdown
+  :source="body"
+  :markdown-custom-styles="{ h1: { color: '#0f172a' }, a: { color: '#2563eb' } }"
+  :style="{ padding: '0 24px' }"
+/>
+```
+
+<card title="Divergence: no data-id marker" icon="lucide:git-compare">
+Unlike React Email, the container omits the `data-id="react-email-markdown"` marker (the same no-data-id divergence as `EColumn`). No Vue behavior consumes the marker. See the [conformance report](/raw/docs/reference/conformance.md).
+</card>

package/dist/agent/pages/docs/components/structure.md

@@ -0,0 +1,122 @@
+---
+title: "Structure"
+description: "EHtml, EHead, EBody, EPreview, and EFont — the document shell, head, body, inbox preview text, and font declarations."
+url: "https://nuxt-email.lupinum.com/docs/components/structure"
+route: "/docs/components/structure"
+locale: "en"
+section: "Documentation"
+collection: "docs"
+source: "ginko-content"
+---
+
+# Structure
+
+> EHtml, EHead, EBody, EPreview, and EFont — the document shell, head, body, inbox preview text, and font declarations.
+
+These components form the email document shell. Every render must contain exactly one `<html>` root and one `<body>`.
+
+## EHtml
+
+`EHtml` renders the required document root.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `lang` | `string` | — | Yes |
+| `dir` | Safe native `dir` value | `ltr` | No |
+
+`lang` must be a non-empty string. `EHtml` also accepts the [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares).
+
+```vue
+<EHtml lang="en"><EBody>Content</EBody></EHtml>
+```
+
+## EHead
+
+`EHead` renders `<head>`. It inserts the UTF-8 content-type and Apple message-reformatting meta tags before its default slot. Put `<title>`, `EFont`, and other email head content in that slot.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). | — | — |
+
+```vue
+<EHead><title>Order confirmed</title></EHead>
+```
+
+## EBody
+
+`EBody` renders `<body>` and a full-width presentation table. Author styles apply to the inner cell. Background values mirror to `<body>`, where supplied margin and padding reset properties become zero.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `lang` | Safe native `lang` value | `en` | No |
+| `dir` | Safe native `dir` value | `ltr` | No |
+
+`EBody` accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). Its language and direction do not inherit from `EHtml`; set both wrappers when the email uses another language or right-to-left text.
+
+```vue
+<EBody :style="{ backgroundColor: '#f5f5f5' }">Content</EBody>
+```
+
+```vue
+<EHtml lang="ar" dir="rtl">
+  <EHead>
+    <title>تم تأكيد الطلب</title>
+  </EHead>
+  <EBody lang="ar" dir="rtl">
+    <EText>تم تأكيد طلبك.</EText>
+  </EBody>
+</EHtml>
+```
+
+### Localization and right-to-left text
+
+Keep localization in application code. Either create one literal template per locale, such as `welcome/en` and `welcome/ar`, or pass already-resolved strings through typed props. Do not call application-context internationalization composables inside an email template. Email templates render in an isolated server application.
+
+Set matching `lang` and `dir` values on both `EHtml` and `EBody`, as shown above. The wrappers do not inherit these values from one another.
+
+## EPreview
+
+`EPreview` renders hidden inbox-preview text from a text-only default slot.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| — | No component-specific props; accepts [shared safe native attributes](/raw/docs/components.md#rules-every-component-shares). | — | — |
+
+Preview text is safely truncated at 200 UTF-16 code units. Compatibility filler is added when the text is shorter. Author styles cannot make the preview visible, and the preview is excluded from derived plain text.
+
+```vue
+<EPreview>Your order is confirmed.</EPreview>
+```
+
+Use an explicit `<title>` inside `EHead`. `EPreview` does not generate or move a title into the head. This is an [intentional divergence](/raw/docs/reference/conformance.md).
+
+## EFont
+
+`EFont` declares an `@font-face` and a document-wide default font. Place it inside `EHead`.
+
+| Prop | Type | Default | Required |
+| --- | --- | --- | --- |
+| `fontFamily` | `string` | — | Yes |
+| `fallbackFontFamily` | `FontFallback \| readonly [FontFallback, ...FontFallback[]]` | — | Yes |
+| `webFont` | `{ url: string, format: FontFormat }` | — | No |
+| `fontStyle` | `'normal' \| 'italic' \| 'oblique'` | `normal` | No |
+| `fontWeight` | `number \| 'normal' \| 'bold' \| 'bolder' \| 'lighter'` | `400` | No |
+
+Supported fallbacks are `Arial`, `Helvetica`, `Verdana`, `Georgia`, `Times New Roman`, `serif`, `sans-serif`, `monospace`, `cursive`, and `fantasy`. Numeric weights must be from 1 through 1000. Web-font formats are `woff`, `woff2`, `truetype`, `opentype`, `embedded-opentype`, and `svg`.
+
+`EFont` emits one `<style>` with the font-face rule and a global font stack. Outlook uses the first fallback through its specific `mso-font-alt` property. Invalid or empty values fail during rendering.
+
+```vue
+<EHead>
+  <EFont
+    font-family="Roboto"
+    :fallback-font-family="['Verdana', 'sans-serif']"
+    :web-font="{ url: 'https://fonts.example.com/roboto.woff2', format: 'woff2' }"
+    :font-weight="700"
+  />
+</EHead>
+```
+
+<card title="Client note" icon="lucide:mail">
+Only some clients honor web fonts. Choose a fallback stack that resembles the primary font and verify it in the clients you support.
+</card>