@nxgt/mail-presets 0.1.0

package/docs/troubleshooting.md

@@ -0,0 +1,395 @@
+# Troubleshooting `@nxgt/mail-presets`
+
+Each entry is headed by the message you see. Search this page for the words of
+your message. Near the end, a trap that fails no build, and a section for
+contributors to this package.
+
+How the messages are shaped:
+
+- **A wiring mistake is a `TypeError` starting `presets:`**, thrown by the
+  `presets()` call in `maizzle.config.ts` when the config loads, so
+  `maizzle build` and `maizzle serve` stop before any template is built. Fix
+  the call.
+- **The other failures come from the packages the presets are built with.**
+  `@nxgt/mail-i18n` prints `i18n: …`, and a missing `ui()` shows first as
+  Vue's `Failed to resolve component` warnings.
+  Most of them mean one of the three lines that wire the presets is missing:
+  `ui()`, a catalogue in `catalogues`, or the templates in `templates`. This
+  page covers the ones the presets cause. The rest are in
+  [`@nxgt/mail-i18n`'s troubleshooting](https://github.com/softistx/nxgt-mail/blob/develop/packages/mail-i18n/docs/troubleshooting.md)
+  and
+  [`@nxgt/mail-ui`'s](https://github.com/softistx/nxgt-mail/blob/develop/packages/mail-ui/docs/troubleshooting.md).
+
+Every fix below ends in the same config, which builds every preset in `en`
+and `fr`:
+
+```ts
+// maizzle.config.ts
+import { defineMailConfig } from '@nxgt/mail-config';
+import { i18n } from '@nxgt/mail-i18n';
+import { presets } from '@nxgt/mail-presets';
+import { ui, uiCatalogues } from '@nxgt/mail-ui';
+
+const mails = presets();   // or presets({ only: ['verify-email', 'reset-password'] })
+
+export default defineMailConfig({
+  plugins: [
+    ui({ brand: { name: 'Acme', url: 'https://acme.example' } }),
+    i18n({
+      locales: ['en', 'fr'],
+      catalogues: [uiCatalogues, mails.catalogues],
+      templates: [mails.templates],
+    }),
+  ],
+});
+```
+
+The samples below use the locales `en` and `fr`, the preset `verify-email`,
+and the brand `Acme`.
+
+## Index
+
+**Wiring**: when `maizzle.config.ts` loads
+- [`presets: options must be an object, as { only: ['verify-email'] }`](#presets-options-must-be-an-object-as--only-verify-email-)
+- [`presets: only must list at least one preset, as ['verify-email']`](#presets-only-must-list-at-least-one-preset-as-verify-email)
+- [`presets: only holds something that is not a preset — name one of verify-email, reset-password, …`](#presets-only-holds-something-that-is-not-a-preset--name-one-of-verify-email-reset-password-password-changed-email-changed-sign-in-code-magic-link-new-sign-in-welcome-invitation)
+- [`presets: only holds the same preset twice`](#presets-only-holds-the-same-preset-twice)
+- [`i18n: templates must be a list of template folders, as [{ dir: '/abs/path/emails' }] — emails, when given, names at least one, each once`](#i18n-templates-must-be-a-list-of-template-folders-as--dir-abspathemails---emails-when-given-names-at-least-one-each-once)
+- [`i18n: templates[0] and templates[1] both have welcome.vue — keep one with emails: [...], or write the project's own in its folder`](#i18n-templates0-and-templates1-both-have-welcomevue--keep-one-with-emails--or-write-the-projects-own-in-its-folder)
+- [`i18n: de: presets.linkFallback is missing — en, the fallback locale, has it`](#i18n-de-presetslinkfallback-is-missing--en-the-fallback-locale-has-it)
+- [`i18n: fr: verifyEmail.body uses {brand}, which en does not declare`](#i18n-fr-verifyemailbody-uses-brand-which-en-does-not-declare)
+
+**Build**: while `maizzle build` renders
+- [`i18n: en: verify-email calls t('common.footer.why'), which is not a key of the catalogues`](#i18n-en-verify-email-calls-tcommonfooterwhy-which-is-not-a-key-of-the-catalogues)
+- [`i18n: en: verify-email calls t('verifyEmail.preheader'), which is not a key of the catalogues`](#i18n-en-verify-email-calls-tverifyemailpreheader-which-is-not-a-key-of-the-catalogues)
+- [`TypeError: Cannot read properties of undefined (reading 'name')`](#typeerror-cannot-read-properties-of-undefined-reading-name)
+- [`i18n: en/new-sign-in.html is empty — a tag of its template resolved to no component; list the plugin that brings it, as ui()`](#i18n-ennew-sign-inhtml-is-empty--a-tag-of-its-template-resolved-to-no-component-list-the-plugin-that-brings-it-as-ui)
+- [`i18n: en: verify-email passes {brand} to verifyEmail.body, which does not use it`](#i18n-en-verify-email-passes-brand-to-verifyemailbody-which-does-not-use-it)
+
+**Traps: a build that succeeds and is wrong**
+- [A bug in `@nxgt/mail-presets` itself](#a-bug-in-nxgtmail-presets-itself)
+
+**Contributing to this package**
+- [``samples/ is what the build writes — run `bun run samples` after a change``](#samples-is-what-the-build-writes--run-bun-run-samples-after-a-change)
+
+---
+
+## Wiring
+
+### `presets: options must be an object, as { only: ['verify-email'] }`
+
+**When:** loading `maizzle.config.ts`, when `presets` is called with the list
+of names directly (`presets(['welcome'])`), a string (`presets('welcome')`),
+`null`, or another value that is not an object.
+**Why:** `presets` takes one optional object. Its one option, `only`, names
+the presets to build. Call it with nothing to build every preset.
+**Fix:**
+
+```ts
+import { presets } from '@nxgt/mail-presets';
+
+const mails = presets({ only: ['welcome'] });   // not presets(['welcome']), not presets('welcome')
+```
+
+### `presets: only must list at least one preset, as ['verify-email']`
+
+**When:** loading `maizzle.config.ts`, when `only` is an empty list or a
+single name rather than a list (`only: 'welcome'`).
+**Why:** `only` keeps the presets it names and no other, so an empty list
+would build none of them.
+**Fix:** pass a list, or leave `only` out to build every preset:
+
+```ts
+presets({ only: ['welcome'] });   // not only: 'welcome', not only: []
+presets();                        // every preset
+```
+
+### `presets: only holds something that is not a preset — name one of verify-email, reset-password, password-changed, email-changed, sign-in-code, magic-link, new-sign-in, welcome, invitation`
+
+**When:** loading `maizzle.config.ts`, when `only` names an e-mail the
+package does not ship. Common causes are a typo, a name in camelCase
+(`'verifyEmail'`), a name with `.vue`, or a name of your own template such as
+`'sign-in'`.
+**Why:** `only` names the package's templates, by the name of their file and
+of their built file (`dist/en/verify-email.html`). The message lists them.
+TypeScript refuses such a name too, where the config is type-checked.
+**Fix:**
+
+```ts
+import { PRESETS, presets } from '@nxgt/mail-presets';
+
+presets({ only: ['verify-email', 'sign-in-code'] });   // not 'verifyEmail', not 'sign-in'
+console.log(PRESETS);                                   // every name
+```
+
+An e-mail of your own goes in the project's `emails/`, not in `only`.
+
+### `presets: only holds the same preset twice`
+
+**When:** loading `maizzle.config.ts`, when `only` names a preset twice. This
+usually happens when a list is joined from two others.
+**Why:** each preset is built once. A name given twice is a mistake in the
+list that builds it.
+**Fix:**
+
+```ts
+presets({ only: [...new Set([...authMails, ...accountMails])] });
+```
+
+### `i18n: templates must be a list of template folders, as [{ dir: '/abs/path/emails' }] — emails, when given, names at least one, each once`
+
+**When:** loading `maizzle.config.ts`, most often when the presets' templates
+are passed alone instead of in a list: `templates: mails.templates`.
+**Why:** `@nxgt/mail-i18n` takes a list of template folders, so that several
+packages can each ship templates. `presets()` answers one folder.
+**Fix:** wrap it in a list, even when there is one:
+
+```ts
+i18n({
+  locales: ['en', 'fr'],
+  catalogues: [uiCatalogues, mails.catalogues],
+  templates: [mails.templates],   // not templates: mails.templates
+});
+```
+
+### `i18n: templates[0] and templates[1] both have welcome.vue — keep one with emails: [...], or write the project's own in its folder`
+
+**When:** loading `maizzle.config.ts`, when `templates` lists the presets'
+folder twice with a preset in common. This usually happens when `presets()`
+is called twice, once for each group of e-mails, the two `only` lists share a
+preset or one call has no `only`, and both answers are listed.
+**Why:** each e-mail is built once. Two entries that ship the same e-mail
+leave no obvious one to build, so `@nxgt/mail-i18n` refuses to pick.
+**Fix:** call `presets()` once, with every preset you build:
+
+```ts
+const mails = presets({ only: ['verify-email', 'reset-password', 'welcome'] });
+
+i18n({
+  locales: ['en', 'fr'],
+  catalogues: [uiCatalogues, mails.catalogues],
+  templates: [mails.templates],   // not [authMails.templates, accountMails.templates]
+});
+```
+
+To replace a preset with your own, write `emails/welcome.vue` in the project.
+It wins over the preset, and this error does not apply to it.
+
+### `i18n: de: presets.linkFallback is missing — en, the fallback locale, has it`
+
+The message names your locale. The key starts `presets.` or with a preset's
+key (`verifyEmail.`, `signInCode.`, …), or `common.` when the `common` keys
+are missing as well (`i18n: de: common.footer.ignore is missing — …`).
+
+**When:** loading `maizzle.config.ts`, when the project builds a locale other
+than `en` and `fr`, such as `locales: ['en', 'de']`.
+**Why:** the presets' messages ship in `en` and `fr` only, and so do
+`@nxgt/mail-ui`'s `common` messages. Every locale must have every key of the
+fallback locale.
+**Fix:** write the missing messages in the project's own catalogue:
+
+```jsonc
+// locales/de.json
+{
+  "common": { "greeting": "Hallo {name},", "footer": { "why": "…", "ignore": "…" } },
+  "presets": { "linkFallback": "…", "notYou": "…" },
+  "verifyEmail": { "subject": "…", "preheader": "…", "title": "…", "body": "…", "action": "…" }
+}
+```
+
+The keys to write are the ones in `presetCatalogues.en` and
+`uiCatalogues.en`. With `only`, write just the `presets` group and the groups
+of the presets kept, as `presets({ only }).catalogues.en` shows:
+
+```ts
+import { presets } from '@nxgt/mail-presets';
+
+console.log(JSON.stringify(presets({ only: ['verify-email'] }).catalogues.en, null, 2));
+```
+
+### `i18n: fr: verifyEmail.body uses {brand}, which en does not declare`
+
+The message names a locale the project did not override, a preset's key, and
+an argument of the preset's message.
+
+**When:** loading `maizzle.config.ts`, after the project overrides a preset's
+message in `locales/en.json` with other arguments than the preset's, as
+`"body": "Confirm your address for {company}."` in place of the preset's
+`{brand}`.
+**Why:** a project's message replaces the preset's in that locale only. The
+other locale keeps the preset's text, and every locale must use only the
+arguments that the fallback locale declares.
+**Fix:** keep the preset's arguments in the override. They are the ones in
+the preset's own message:
+
+```ts
+import { presetCatalogues } from '@nxgt/mail-presets';
+
+console.log(presetCatalogues.en.verifyEmail);   // body: '… your {brand} account.'
+```
+
+```jsonc
+// locales/en.json
+{ "verifyEmail": { "body": "Confirm your address to start using {brand}." } }
+```
+
+When both locales are overridden with a new argument, as `{company}` in `en`
+and in `fr`, the build stops later, on
+`i18n: en: verify-email calls t('verifyEmail.body') without {company}`: the
+preset's template passes `brand`, not `company`. To add an argument, write
+the project's own template in `emails/verify-email.vue`, which replaces the
+preset's.
+
+---
+
+## Build
+
+These fail while `maizzle build` renders a template. The build stops, and the
+line to read starts `Error:` or `TypeError:`, after Vue's warnings and a stack
+trace. Maizzle builds the locales in no set order, so the locale in the
+message is `en` in one run and `fr` in the next.
+
+### `i18n: en: verify-email calls t('common.footer.why'), which is not a key of the catalogues`
+
+The message names a preset, and the key starts `common.`.
+
+**When:** `maizzle build`, on the first preset, when `catalogues` holds the
+presets' messages but not `uiCatalogues`.
+**Why:** a preset's layout and greeting use `@nxgt/mail-ui`'s shared
+`common.*` messages, which ship in `uiCatalogues`. `presets().catalogues`
+holds only the presets' own messages.
+**Fix:** pass both, `uiCatalogues` first:
+
+```ts
+i18n({
+  locales: ['en', 'fr'],
+  catalogues: [uiCatalogues, mails.catalogues],   // not [mails.catalogues]
+  templates: [mails.templates],
+});
+```
+
+### `i18n: en: verify-email calls t('verifyEmail.preheader'), which is not a key of the catalogues`
+
+The message names a preset, and the key starts with that preset's key
+(`verifyEmail.`, `signInCode.`, …) or `presets.`.
+
+**When:** `maizzle build`, on the first preset, when `templates` holds the
+presets' templates but `catalogues` does not hold their messages.
+**Why:** `presets()` answers the templates and their messages separately,
+because `@nxgt/mail-i18n` takes each in its own option. Passing one without
+the other builds templates that have no text.
+**Fix:** pass `mails.catalogues` with `mails.templates`, from the same
+`presets()` call:
+
+```ts
+const mails = presets({ only: ['verify-email'] });
+
+i18n({
+  locales: ['en', 'fr'],
+  catalogues: [uiCatalogues, mails.catalogues],
+  templates: [mails.templates],
+});
+```
+
+When `only` differs between two `presets()` calls, the catalogues of one lack
+the messages of the templates of the other. Call it once.
+
+### `TypeError: Cannot read properties of undefined (reading 'name')`
+
+It follows `[Vue warn]: Failed to resolve component: NxLayout` (and
+`NxTypography`, `NxButton`, …) and
+`[Vue warn]: Property "brand" was accessed during render but is not defined on instance.`
+
+**When:** `maizzle build`, on the first preset, when `ui()` is not in the
+plugins. That includes a project that registers `@nxgt/mail-ui`'s components
+itself, with `COMPONENTS_DIR` in `components.source`, instead of calling
+`ui()`.
+**Why:** the presets are built with `@nxgt/mail-ui`'s components and read
+the brand that `ui()` gives every template (`brand.name`). Maizzle resolves
+no component in a template under `node_modules`, where the presets are
+installed; `ui()` does it for them. Without `ui()`, the components do not
+resolve and `brand` is undefined.
+**Fix:** add `ui()`, with your brand, and remove any `components.source`
+entry that points at `COMPONENTS_DIR`:
+
+```ts
+export default defineMailConfig({
+  plugins: [
+    ui({ brand: { name: 'Acme', url: 'https://acme.example' } }),
+    i18n({ /* … */ }),
+  ],
+});
+```
+
+### `i18n: en/new-sign-in.html is empty — a tag of its template resolved to no component; list the plugin that brings it, as ui()`
+
+It follows `[Vue warn]: Failed to resolve component: NxLayout` (and
+`NxTypography`, `NxButton`, …).
+
+**When:** `maizzle build`, after the templates, when `ui()` is not in the
+plugins and the presets built read no brand, as with
+`presets({ only: ['new-sign-in'] })`. The other presets stop earlier, on the
+`TypeError` above.
+**Why:** without `ui()`, the presets' components do not resolve, and Vue
+renders a component it cannot resolve as nothing. The e-mail would go out
+blank.
+**Fix:** add `ui()`, as above.
+
+### `i18n: en: verify-email passes {brand} to verifyEmail.body, which does not use it`
+
+**When:** `maizzle build`, on that preset, after the project overrides one of
+its messages in every locale with a text that leaves out an argument the
+preset's template passes, as `"body": "Confirm your address."` in
+`locales/en.json` and `"body": "Confirmez votre adresse."` in
+`locales/fr.json`.
+**Why:** a template passes exactly the arguments its message uses, and one
+more is refused: the message and the template disagree. The preset's
+template still passes `brand`.
+**Fix:** keep the argument in the override, or write the project's own
+template in `emails/verify-email.vue`, which replaces the preset's:
+
+```jsonc
+// locales/en.json
+{ "verifyEmail": { "body": "Confirm your address to start using {brand}." } }
+```
+
+When only `en` leaves the argument out, the build stops earlier, when the
+config loads, on `i18n: fr: verifyEmail.body uses {brand}, which en does not
+declare`.
+
+---
+
+## Traps: a build that succeeds and is wrong
+
+### A bug in `@nxgt/mail-presets` itself
+
+A preset that fails to build with the config at the top of this page, or a
+text that differs between `en` and `fr` in meaning, is a bug in this package.
+The same goes for a built e-mail that differs from its sample in `samples/`
+for the same brand and theme. Open an issue on
+[`softistx/nxgt-mail`](https://github.com/softistx/nxgt-mail/issues) with the
+message, the package version, the Maizzle version, and your
+`maizzle.config.ts`. Never include a real address or link.
+
+---
+
+## Contributing to this package
+
+### ``samples/ is what the build writes — run `bun run samples` after a change``
+
+**When:** `bun test` in `packages/mail-presets`, after a change to a template
+in `emails/`, a message in `src/locales/`, or anything that changes the
+built HTML, including a change to `@nxgt/mail-ui`'s components or theme. The
+diff shows the old text as expected and the new text as received.
+**Why:** `samples/` holds each preset as the test fixture builds it, and
+the spec compares a fresh build with it, file by file. The samples must stay
+what the package builds.
+**Fix:** rebuild them, check the diff, and commit it with the change:
+
+```sh
+cd packages/mail-presets
+bun run samples      # builds test/fixture, copies its HTML to samples/, rewrites samples/README.md
+git diff samples/
+```
+
+Never edit `samples/` by hand.

package/emails/email-changed.vue

@@ -0,0 +1,14 @@
+<template>
+  <NxLayout :preheader="t('emailChanged.preheader')">
+    <NxTypography variant="headline-small">{{ t('emailChanged.title') }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxTypography>{{ t('emailChanged.body', { brand: brand.name, newEmail: placeholder('newEmail') }) }}</NxTypography>
+    <NxAlert variant="warning" :description="t('presets.notYou')" />
+    <NxButton :href="placeholder('link')">{{ t('emailChanged.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+  </NxLayout>
+</template>

package/emails/invitation.vue

@@ -0,0 +1,12 @@
+<template>
+  <NxLayout :preheader="t('invitation.preheader', { organization: placeholder('organization'), brand: brand.name })">
+    <NxTypography variant="headline-small">{{ t('invitation.title', { organization: placeholder('organization') }) }}</NxTypography>
+    <NxTypography>{{ t('invitation.body', { inviter: placeholder('inviter'), organization: placeholder('organization'), brand: brand.name }) }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('invitation.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+  </NxLayout>
+</template>

package/emails/magic-link.vue

@@ -0,0 +1,13 @@
+<template>
+  <NxLayout :preheader="t('magicLink.preheader')">
+    <NxTypography variant="headline-small">{{ t('magicLink.title', { brand: brand.name }) }}</NxTypography>
+    <NxTypography>{{ t('magicLink.body') }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('magicLink.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+    <NxTypography variant="caption">{{ t('common.footer.ignore') }}</NxTypography>
+  </NxLayout>
+</template>

package/emails/new-sign-in.vue

@@ -0,0 +1,21 @@
+<template>
+  <NxLayout :preheader="t('newSignIn.preheader')">
+    <NxTypography variant="headline-small">{{ t('newSignIn.title') }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxBanner tone="warning" :title="t('newSignIn.banner')" />
+    <NxSummaryData
+      :data="[
+        { label: t('newSignIn.device'), value: placeholder('device') },
+        { label: t('newSignIn.location'), value: placeholder('location') },
+        { label: t('newSignIn.time'), value: placeholder('time') },
+      ]"
+    />
+    <NxTypography>{{ t('newSignIn.body') }} {{ t('presets.notYou') }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('newSignIn.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+  </NxLayout>
+</template>

package/emails/password-changed.vue

@@ -0,0 +1,14 @@
+<template>
+  <NxLayout :preheader="t('passwordChanged.preheader')">
+    <NxTypography variant="headline-small">{{ t('passwordChanged.title') }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxTypography>{{ t('passwordChanged.body', { brand: brand.name }) }}</NxTypography>
+    <NxAlert variant="warning" :description="t('presets.notYou')" />
+    <NxButton :href="placeholder('link')">{{ t('passwordChanged.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+  </NxLayout>
+</template>

package/emails/reset-password.vue

@@ -0,0 +1,14 @@
+<template>
+  <NxLayout :preheader="t('resetPassword.preheader')">
+    <NxTypography variant="headline-small">{{ t('resetPassword.title') }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxTypography>{{ t('resetPassword.body', { brand: brand.name }) }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('resetPassword.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+    <NxTypography variant="caption">{{ t('common.footer.ignore') }}</NxTypography>
+  </NxLayout>
+</template>

package/emails/sign-in-code.vue

@@ -0,0 +1,8 @@
+<template>
+  <NxLayout :preheader="t('signInCode.preheader')">
+    <NxTypography variant="headline-small">{{ t('signInCode.title') }}</NxTypography>
+    <NxTypography>{{ t('signInCode.body', { brand: brand.name }) }}</NxTypography>
+    <NxCode>{{ placeholder('code') }}</NxCode>
+    <NxTypography variant="caption">{{ t('signInCode.ignore') }}</NxTypography>
+  </NxLayout>
+</template>

package/emails/verify-email.vue

@@ -0,0 +1,14 @@
+<template>
+  <NxLayout :preheader="t('verifyEmail.preheader')">
+    <NxTypography variant="headline-small">{{ t('verifyEmail.title') }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxTypography>{{ t('verifyEmail.body', { brand: brand.name }) }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('verifyEmail.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+    <NxTypography variant="caption">{{ t('common.footer.ignore') }}</NxTypography>
+  </NxLayout>
+</template>

package/emails/welcome.vue

@@ -0,0 +1,13 @@
+<template>
+  <NxLayout :preheader="t('welcome.preheader')">
+    <NxTypography variant="headline-small">{{ t('welcome.title', { brand: brand.name }) }}</NxTypography>
+    <NxTypography>{{ t('common.greeting', { name: placeholder('name') }) }}</NxTypography>
+    <NxTypography>{{ t('welcome.body') }}</NxTypography>
+    <NxButton :href="placeholder('link')">{{ t('welcome.action') }}</NxButton>
+    <Spacer class="h-6" />
+    <NxTypography variant="body-small" class="text-muted-foreground">
+      {{ t('presets.linkFallback') }}
+      <NxLink :href="placeholder('link')">{{ placeholder('link') }}</NxLink>
+    </NxTypography>
+  </NxLayout>
+</template>

package/package.json

@@ -0,0 +1,68 @@
+{
+	"name": "@nxgt/mail-presets",
+	"version": "0.1.0",
+	"description": "Ready transactional e-mails for a Maizzle project built with @nxgt/mail-ui and @nxgt/mail-i18n — verify-email, reset-password, sign-in-code, magic-link, new-sign-in, welcome, invitation… in en and fr — with their built HTML as samples.",
+	"license": "MIT",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"emails",
+		"docs",
+		"README.md",
+		"package.json",
+		"LICENSE"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"keywords": [
+		"email",
+		"maizzle",
+		"templates",
+		"transactional",
+		"i18n",
+		"vue"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/softistx/nxgt-mail.git",
+		"directory": "packages/mail-presets"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public"
+	},
+	"scripts": {
+		"build": "bun run ../../build.ts",
+		"test": "bun test src",
+		"typecheck": "tsc --noEmit && bun run typecheck:templates",
+		"typecheck:templates": "bun run prepare:templates && cd test/fixture && vue-tsc -p tsconfig.json",
+		"prepare:templates": "cd test/fixture && maizzle prepare",
+		"samples": "bun run scripts/samples.ts"
+	},
+	"devDependencies": {
+		"@maizzle/framework": "6.1.7",
+		"@maizzle/tailwindcss": "1.5.6",
+		"@nxgt/mail": "0.1.0",
+		"@nxgt/mail-config": "0.1.0",
+		"@nxgt/mail-i18n": "0.1.0",
+		"@nxgt/mail-ui": "0.1.0",
+		"@types/bun": "^1.4.2",
+		"vue": "3.5.43",
+		"vue-tsc": "^3.3.11"
+	},
+	"peerDependencies": {
+		"@maizzle/framework": "^6.1.7",
+		"@nxgt/mail-i18n": "^0.1.0",
+		"@nxgt/mail-ui": "^0.1.0",
+		"typescript": "^6.0.3",
+		"vue": "^3.5.0"
+	}
+}