@wervt/nuxt 0.2.13 → 0.2.15

package/README.md

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
 - `useWervtUser()`: the signed-in wervt user, on the server and in the app.
 - `useValidatedBody()` / `useValidatedQuery()` / `useValidatedParams()`: valibot validation.
 - `useWervtTrack()`: custom events for wervt's cookieless analytics (page views are counted automatically).
+- `wervt: { feedback: { key } }` and `useWervtFeedback()`: the kontor feedback widget, reports go into a kontor project's triage.
 - `defineTool()` (server): tools in `server/tools/` that browser agents call through WebMCP, and
   MCP clients (Claude Code, Cursor, …) at `/mcp`, signed in through wervt's OAuth login.
 - `nuxt dev` starts against the local wervt stack (Postgres, Electric) and a dev user.

package/dist/module.d.ts

@@ -30,6 +30,28 @@ export interface ModuleOptions {
    * counted by the runtime either way.
    */
   analytics?: boolean;
+  /**
+   * The kontor feedback widget: a "Feedback" button that reports issues into a kontor project's
+   * triage, as the signed-in wervt user when the app's URL is an allowed origin of the key.
+   * With `true`, the key comes from `wervt env <app> --set NUXT_PUBLIC_WERVT_FEEDBACK_KEY=pk_…`
+   * (it can override a configured key the same way).
+   */
+  feedback?: FeedbackOptions | boolean;
+}
+export interface FeedbackOptions {
+  /** Public intake key of the kontor project (Project settings → Intake keys). */
+  key?: string;
+  /** The kontor instance. Defaults to https://kontor.wervt.app. */
+  url?: string;
+  /** Widget language. Defaults to the browser's. */
+  lang?: 'de' | 'en';
+  /** `none` hides the floating button; open the form with `useWervtFeedback().open()`. */
+  position?: 'bottom-right' | 'bottom-left' | 'none';
+  label?: string;
+  /** Accent color (any CSS color). */
+  color?: string;
+  /** Also load it in `nuxt dev`. Off by default: localhost usually isn't an allowed origin. */
+  dev?: boolean;
 }
 export interface McpOptions {
   /** Server name clients show. Defaults to the app name. */

package/dist/module.js

@@ -1,5 +1,5 @@
 import { resolveAppName, setupDev } from "./dev.js";
-import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, useLogger } from "nuxt/kit";
+import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, addTypeTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, useLogger } from "nuxt/kit";
 import { existsSync } from "node:fs";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
 import { builtinModules, createRequire } from "node:module";
@@ -228,6 +228,21 @@ var module_default = defineNuxtModule({
 			const app = await resolveAppName(nuxt.options.rootDir, options.app);
 			await setupDev(nuxt, app, options.dev ?? {}, { storage: useAblage });
 		}
+		addTypeTemplate({
+			filename: "types/wervt-email.d.ts",
+			getContents: () => "declare module '*.vue' {\n  import type { DefineComponent } from 'vue'\n  const component: DefineComponent<Record<string, unknown>>\n  export default component\n}\n"
+		}, { nitro: true });
+		if (nuxt.options.dev) {
+			const templates = await findEmailTemplates([join(nuxt.options.srcDir, "emails"), join(nuxt.options.rootDir, "emails")]);
+			addServerTemplate({
+				filename: "#wervt/emails",
+				getContents: () => `export const templates = {\n${templates.map(({ name, path }) => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(path)}),`).join("\n")}\n}\n`
+			});
+			for (const route of ["/_wervt/emails", "/_wervt/emails/**"]) addServerHandler({
+				route,
+				handler: resolver.resolve("./runtime/server/email-preview")
+			});
+		}
 		if (nuxt.options.dev) for (const route of ["/_wervt/login", "/_wervt/logout"]) addServerHandler({
 			route,
 			handler: resolver.resolve("./runtime/server/dev-auth")
@@ -265,6 +280,24 @@ var module_default = defineNuxtModule({
 				mode: "client"
 			});
 		}
+		const feedbackOptions = options.feedback === true ? {} : options.feedback;
+		if (feedbackOptions && (feedbackOptions.dev || !nuxt.options.dev)) {
+			const { dev: _, ...feedback } = feedbackOptions;
+			const config = nuxt.options.runtimeConfig.public;
+			config.wervt = {
+				...config.wervt,
+				feedback: {
+					key: "",
+					url: "https://kontor.wervt.app",
+					...feedback,
+					app: await resolveAppName(nuxt.options.rootDir, options.app)
+				}
+			};
+			addPlugin({
+				src: resolver.resolve("./runtime/app/plugins/feedback.client"),
+				mode: "client"
+			});
+		}
 		nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
 		addImports([
 			{
@@ -290,6 +323,10 @@ var module_default = defineNuxtModule({
 			{
 				name: "useWervtUpdate",
 				from: resolver.resolve("./runtime/app/useWervtUpdate")
+			},
+			{
+				name: "useWervtFeedback",
+				from: resolver.resolve("./runtime/app/useWervtFeedback")
 			}
 		]);
 	}
@@ -302,6 +339,17 @@ const TOOL_EXTENSIONS = /* @__PURE__ */ new Set([
 ]);
 const TOOL_NAME_RE = /^[\w.-]{1,128}$/;
 /** The tools in `server/tools/`: `todos/add.ts` is `todos.add`, like Nitro names tasks. */
+async function findEmailTemplates(dirs) {
+	const templates = /* @__PURE__ */ new Map();
+	for (const dir of new Set(dirs)) {
+		if (!existsSync(dir)) continue;
+		for (const file of await readdir(dir)) if (extname(file) === ".vue") templates.set(file.slice(0, -4), join(dir, file));
+	}
+	return [...templates].map(([name, path]) => ({
+		name,
+		path
+	}));
+}
 async function findTools(dir) {
 	const files = await readdir(dir, { recursive: true }).catch(() => []);
 	const tools = [];

package/dist/provision.d.ts

@@ -28,6 +28,18 @@ export declare function appDatabaseUrl({ app, adminUrl, secret }: ProvisionOptio
  * only connect to the wervt database.
  */
 export declare function provisionDatabase(options: ProvisionOptions): Promise<void>;
+/** The role PgBouncer signs in with to look up app roles' password hashes (`auth_query`). */
+export declare const POOLER_ROLE = "pgbouncer";
+/**
+ * Prepares Postgres for PgBouncer in front of the app isolates: a login role for PgBouncer and
+ * `pgbouncer.get_auth()`, which hands out the SCRAM hashes of app roles (`app_*`) only, never
+ * those of the superuser or other roles. App passwords are derived, not stored anywhere
+ * PgBouncer could read them, so it has to ask Postgres.
+ */
+export declare function setupPooler({ adminUrl, password }: {
+  adminUrl: string;
+  password: string;
+}): Promise<void>;
 /** Drops the app's schema (all its data) and role. */
 export declare function dropDatabase({ app, adminUrl }: Pick<ProvisionOptions, 'app' | 'adminUrl'>): Promise<void>;
 //#endregion

package/dist/provision.js

@@ -108,6 +108,40 @@ async function claimSchema(admin, role) {
      where n.nspname = ${role} and p.proowner <> ${role}::regrole`;
 	for (const { kind, name } of objects) await admin.unsafe(`alter ${kind} ${name} owner to "${role}"`);
 }
+/** The role PgBouncer signs in with to look up app roles' password hashes (`auth_query`). */
+const POOLER_ROLE = "pgbouncer";
+/**
+* Prepares Postgres for PgBouncer in front of the app isolates: a login role for PgBouncer and
+* `pgbouncer.get_auth()`, which hands out the SCRAM hashes of app roles (`app_*`) only, never
+* those of the superuser or other roles. App passwords are derived, not stored anywhere
+* PgBouncer could read them, so it has to ask Postgres.
+*/
+async function setupPooler({ adminUrl, password }) {
+	const database = new URL(adminUrl).pathname.slice(1);
+	const admin = postgres(adminUrl, {
+		max: 1,
+		onnotice: () => {}
+	});
+	try {
+		const [row] = await admin`select exists(select 1 from pg_roles where rolname = ${POOLER_ROLE})`;
+		await admin.unsafe(`${row?.exists ? "alter" : "create"} role "${POOLER_ROLE}" login password '${password.replaceAll("'", "''")}'`);
+		await admin.unsafe(`grant connect on database "${database}" to "${POOLER_ROLE}"`);
+		await admin.unsafe(`create schema if not exists "${POOLER_ROLE}"`);
+		await admin.unsafe(`revoke all on schema "${POOLER_ROLE}" from public`);
+		await admin.unsafe(`grant usage on schema "${POOLER_ROLE}" to "${POOLER_ROLE}"`);
+		await admin.unsafe(`
+      create or replace function "${POOLER_ROLE}".get_auth(p_usename text)
+      returns table(usename name, passwd text)
+      language sql security definer set search_path = pg_catalog as $$
+        select usename, passwd from pg_shadow
+         where usename = p_usename and usename like 'app_%' and not usesuper
+      $$`);
+		await admin.unsafe(`revoke all on function "${POOLER_ROLE}".get_auth(text) from public`);
+		await admin.unsafe(`grant execute on function "${POOLER_ROLE}".get_auth(text) to "${POOLER_ROLE}"`);
+	} finally {
+		await admin.end();
+	}
+}
 /** Drops the app's schema (all its data) and role. */
 async function dropDatabase({ app, adminUrl }) {
 	const role = dbRole(app);
@@ -129,4 +163,4 @@ async function dropDatabase({ app, adminUrl }) {
 	}
 }
 //#endregion
-export { StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, provisionDatabase, storageCredentials };
+export { POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, provisionDatabase, setupPooler, storageCredentials };

package/dist/runtime/app/plugins/feedback.client.d.ts

@@ -0,0 +1,4 @@
+//#region src/runtime/app/plugins/feedback.client.d.ts
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+//#endregion
+export { _default as default };

package/dist/runtime/app/plugins/feedback.client.js

@@ -0,0 +1,32 @@
+import { pendingFeedbackContext } from "../useWervtFeedback.js";
+import { defineNuxtPlugin, onNuxtReady, useRuntimeConfig } from "#app";
+//#region src/runtime/app/plugins/feedback.client.ts
+var feedback_client_default = defineNuxtPlugin({
+	name: "wervt:feedback",
+	setup() {
+		const config = useRuntimeConfig();
+		const feedback = config.public.wervt?.feedback;
+		if (!feedback?.key) return;
+		onNuxtReady(() => {
+			const script = document.createElement("script");
+			script.src = `${feedback.url.replace(/\/$/, "")}/widget.js`;
+			script.async = true;
+			script.dataset.key = feedback.key;
+			for (const name of [
+				"lang",
+				"position",
+				"label",
+				"color"
+			]) if (feedback[name]) script.dataset[name] = feedback[name];
+			script.dataset.context = JSON.stringify({
+				app: feedback.app,
+				release: config.app.buildId,
+				...pendingFeedbackContext
+			});
+			script.addEventListener("load", () => window.kontor?.setContext(pendingFeedbackContext));
+			document.head.appendChild(script);
+		});
+	}
+});
+//#endregion
+export { feedback_client_default as default };

package/dist/runtime/app/useWervtFeedback.d.ts

@@ -0,0 +1,24 @@
+//#region src/runtime/app/useWervtFeedback.d.ts
+interface KontorWidget {
+  open(): void;
+  close(): void;
+  setContext(values: Record<string, unknown>): void;
+}
+declare global {
+  interface Window {
+    kontor?: KontorWidget;
+  }
+}
+export declare const pendingFeedbackContext: Record<string, unknown>;
+/**
+ * Controls the feedback widget (`wervt: { feedback: { key } }`): open it from your own button,
+ * or add context to every report, e.g. what the user was looking at.
+ *
+ * @example useWervtFeedback().setContext({ room: room.id })
+ */
+export declare function useWervtFeedback(): {
+  open: () => void | undefined;
+  close: () => void | undefined;
+  setContext(values: Record<string, unknown>): void;
+};
+//#endregion

package/dist/runtime/app/useWervtFeedback.js

@@ -0,0 +1,21 @@
+//#region src/runtime/app/useWervtFeedback.ts
+const pendingFeedbackContext = {};
+/**
+* Controls the feedback widget (`wervt: { feedback: { key } }`): open it from your own button,
+* or add context to every report, e.g. what the user was looking at.
+*
+* @example useWervtFeedback().setContext({ room: room.id })
+*/
+function useWervtFeedback() {
+	const widget = () => import.meta.client ? window.kontor : void 0;
+	return {
+		open: () => widget()?.open(),
+		close: () => widget()?.close(),
+		setContext(values) {
+			Object.assign(pendingFeedbackContext, values);
+			widget()?.setContext(values);
+		}
+	};
+}
+//#endregion
+export { pendingFeedbackContext, useWervtFeedback };

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

@@ -0,0 +1,130 @@
+import { InjectionKey } from "vue";
+//#region src/runtime/email/components.d.ts
+/** The template's subject, handed to renderEmail() while rendering. */
+export declare const SUBJECT_KEY: InjectionKey<(subject: string) => void>;
+export declare const emailTheme: {
+  page: string;
+  card: string;
+  border: string;
+  text: string;
+  highlighted: string;
+  muted: string;
+  dimmed: string;
+  button: string;
+  buttonText: string;
+  codeBackground: string;
+  radius: string;
+  font: string;
+  mono: string;
+};
+/**
+ * The whole email: document, preheader, card and footer. Put it at the root of every template.
+ *
+ * ```vue
+ * <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
+ * ```
+ */
+export declare const WervtEmail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The email's subject line. */
+  subject: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Shown above the card and in the footer, e.g. the app's name. */
+  app: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The preview line inboxes show after the subject. */
+  preview: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Replaces the footer line ("Sent by <app> on wervt."). */
+  footer: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The email's subject line. */
+  subject: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Shown above the card and in the footer, e.g. the app's name. */
+  app: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The preview line inboxes show after the subject. */
+  preview: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Replaces the footer line ("Sent by <app> on wervt."). */
+  footer: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  app: string;
+  preview: string;
+  footer: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailHeading: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailText: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Secondary text: hints, "ignore this if …". */
+export declare const EmailMuted: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A call to action. Bulletproof: a table cell carries the background, so Outlook shows it too. */
+export declare const EmailButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  href: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A one-time code, large and spaced so it reads (and copies) easily. */
+export declare const EmailCode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  code: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  code: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EmailDivider: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion

package/dist/runtime/email/components.js

@@ -0,0 +1,255 @@
+import { defineComponent, h, inject } from "vue";
+//#region src/runtime/email/components.ts
+/** The template's subject, handed to renderEmail() while rendering. */
+const SUBJECT_KEY = Symbol("wervt-email-subject");
+const emailTheme = {
+	page: "#fafafa",
+	card: "#ffffff",
+	border: "#ebebeb",
+	text: "#171717",
+	highlighted: "#0a0a0a",
+	muted: "#666666",
+	dimmed: "#8f8f8f",
+	button: "#171717",
+	buttonText: "#ffffff",
+	codeBackground: "#f2f2f2",
+	radius: "6px",
+	font: "Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+	mono: "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+};
+const t = emailTheme;
+/**
+* The whole email: document, preheader, card and footer. Put it at the root of every template.
+*
+* ```vue
+* <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
+* ```
+*/
+const WervtEmail = defineComponent({
+	name: "WervtEmail",
+	props: {
+		/** The email's subject line. */
+		subject: {
+			type: String,
+			required: true
+		},
+		/** Shown above the card and in the footer, e.g. the app's name. */
+		app: {
+			type: String,
+			default: "wervt"
+		},
+		/** The preview line inboxes show after the subject. */
+		preview: {
+			type: String,
+			default: ""
+		},
+		/** Replaces the footer line ("Sent by <app> on wervt."). */
+		footer: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props, { slots }) {
+		inject(SUBJECT_KEY, void 0)?.(props.subject);
+		return () => h("html", { lang: "en" }, [h("head", [
+			h("meta", { charset: "utf-8" }),
+			h("meta", {
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			}),
+			h("meta", {
+				name: "color-scheme",
+				content: "light"
+			}),
+			h("meta", {
+				name: "supported-color-schemes",
+				content: "light"
+			}),
+			h("title", props.subject),
+			h("link", {
+				rel: "stylesheet",
+				href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
+			})
+		]), h("body", { style: {
+			margin: 0,
+			padding: 0,
+			background: t.page
+		} }, [props.preview ? h("div", {
+			class: "wervt-preheader",
+			style: {
+				display: "none",
+				overflow: "hidden",
+				maxHeight: 0,
+				maxWidth: 0,
+				opacity: 0,
+				lineHeight: "1px",
+				fontSize: "1px",
+				color: t.page
+			}
+		}, props.preview) : null, table({
+			width: "100%",
+			style: { background: t.page }
+		}, [h("tr", [h("td", {
+			align: "center",
+			style: { padding: "40px 16px" }
+		}, table({
+			width: "100%",
+			style: { maxWidth: "560px" }
+		}, [
+			h("tr", [h("td", { style: {
+				padding: "0 4px 16px",
+				fontFamily: t.font,
+				fontSize: "14px",
+				fontWeight: 600,
+				color: t.highlighted
+			} }, props.app)]),
+			h("tr", [h("td", { style: {
+				background: t.card,
+				border: `1px solid ${t.border}`,
+				borderRadius: t.radius,
+				padding: "32px",
+				fontFamily: t.font,
+				color: t.text
+			} }, slots.default?.())]),
+			h("tr", [h("td", { style: {
+				padding: "16px 4px 0",
+				fontFamily: t.font,
+				fontSize: "12px",
+				lineHeight: "18px",
+				color: t.dimmed
+			} }, props.footer || (props.app === "wervt" ? "Sent by wervt." : `Sent by ${props.app} on wervt.`))])
+		]))])])])]);
+	}
+});
+const EmailHeading = defineComponent({
+	name: "EmailHeading",
+	setup(_, { slots }) {
+		return () => h("h1", { style: {
+			margin: "0 0 16px",
+			fontFamily: t.font,
+			fontSize: "20px",
+			lineHeight: "28px",
+			fontWeight: 600,
+			color: t.highlighted
+		} }, slots.default?.());
+	}
+});
+const EmailText = defineComponent({
+	name: "EmailText",
+	setup(_, { slots }) {
+		return () => h("p", { style: {
+			margin: "0 0 16px",
+			fontFamily: t.font,
+			fontSize: "15px",
+			lineHeight: "24px",
+			color: t.text
+		} }, slots.default?.());
+	}
+});
+/** Secondary text: hints, "ignore this if …". */
+const EmailMuted = defineComponent({
+	name: "EmailMuted",
+	setup(_, { slots }) {
+		return () => h("p", { style: {
+			margin: "0 0 16px",
+			fontFamily: t.font,
+			fontSize: "13px",
+			lineHeight: "20px",
+			color: t.muted
+		} }, slots.default?.());
+	}
+});
+const EmailLink = defineComponent({
+	name: "EmailLink",
+	props: { href: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => h("a", {
+			href: props.href,
+			style: {
+				color: t.highlighted,
+				textDecoration: "underline"
+			}
+		}, slots.default?.() ?? props.href);
+	}
+});
+/** A call to action. Bulletproof: a table cell carries the background, so Outlook shows it too. */
+const EmailButton = defineComponent({
+	name: "EmailButton",
+	props: { href: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => table({ style: { margin: "8px 0 24px" } }, [h("tr", [h("td", { style: {
+			background: t.button,
+			borderRadius: t.radius
+		} }, h("a", {
+			href: props.href,
+			style: {
+				display: "inline-block",
+				padding: "10px 18px",
+				fontFamily: t.font,
+				fontSize: "14px",
+				fontWeight: 500,
+				lineHeight: "20px",
+				color: t.buttonText,
+				textDecoration: "none",
+				borderRadius: t.radius
+			}
+		}, slots.default?.()))])]);
+	}
+});
+/** A one-time code, large and spaced so it reads (and copies) easily. */
+const EmailCode = defineComponent({
+	name: "EmailCode",
+	props: { code: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		return () => table({
+			width: "100%",
+			style: { margin: "8px 0 24px" }
+		}, [h("tr", [h("td", {
+			align: "center",
+			style: {
+				background: t.codeBackground,
+				borderRadius: t.radius,
+				padding: "16px",
+				fontFamily: t.mono,
+				fontSize: "30px",
+				fontWeight: 600,
+				letterSpacing: "8px",
+				color: t.highlighted
+			}
+		}, props.code)])]);
+	}
+});
+const EmailDivider = defineComponent({
+	name: "EmailDivider",
+	setup() {
+		return () => h("hr", { style: {
+			border: "none",
+			borderTop: `1px solid ${t.border}`,
+			margin: "24px 0"
+		} });
+	}
+});
+function table(attrs, children) {
+	return h("table", {
+		role: "presentation",
+		cellpadding: 0,
+		cellspacing: 0,
+		border: 0,
+		...attrs,
+		style: {
+			borderCollapse: "collapse",
+			...attrs.style
+		}
+	}, children);
+}
+//#endregion
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, SUBJECT_KEY, WervtEmail, emailTheme };

package/dist/runtime/email/index.d.ts

@@ -0,0 +1,3 @@
+import { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme } from "./components.js";
+import { EmailProps, RenderedEmail, renderEmail } from "./render.js";
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, type EmailProps, EmailText, type RenderedEmail, WervtEmail, emailTheme, renderEmail };

package/dist/runtime/email/index.js

@@ -0,0 +1,3 @@
+import { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme } from "./components.js";
+import { renderEmail } from "./render.js";
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme, renderEmail };

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

@@ -0,0 +1,17 @@
+import { Component } from "vue";
+//#region src/runtime/email/render.d.ts
+export interface RenderedEmail {
+  subject: string;
+  html: string;
+  text: string;
+}
+/** The props a component declares, so templates are called with the right data. */
+export type EmailProps<T> = T extends (new () => {
+  $props: infer P;
+}) ? Omit<P, `on${string}`> : never;
+/**
+ * Renders an email template (a component with `<WervtEmail>` at its root) to HTML, a plain-text
+ * part and its subject.
+ */
+export declare function renderEmail<T extends Component>(template: T, props?: EmailProps<T>): Promise<RenderedEmail>;
+//#endregion

package/dist/runtime/email/render.js

@@ -0,0 +1,64 @@
+import { SUBJECT_KEY } from "./components.js";
+import { createSSRApp } from "vue";
+import { convert } from "html-to-text";
+import { renderToString } from "vue/server-renderer";
+//#region src/runtime/email/render.ts
+const DOCTYPE = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
+/**
+* Renders an email template (a component with `<WervtEmail>` at its root) to HTML, a plain-text
+* part and its subject.
+*/
+async function renderEmail(template, props) {
+	let subject = "";
+	const app = createSSRApp(template, props);
+	app.provide(SUBJECT_KEY, (value) => subject = value);
+	const body = (await renderToString(app)).replace(/<!--[\s\S]*?-->/g, "");
+	if (!subject) throw new Error("Email templates need <WervtEmail subject=\"…\"> at their root");
+	const html = `${DOCTYPE}${body}`;
+	return {
+		subject,
+		html,
+		text: toText(html)
+	};
+}
+function toText(html) {
+	return convert(html, {
+		wordwrap: 78,
+		selectors: [
+			{
+				selector: ".wervt-preheader",
+				format: "skip"
+			},
+			{
+				selector: "title",
+				format: "skip"
+			},
+			{
+				selector: "img",
+				format: "skip"
+			},
+			{
+				selector: "h1",
+				options: { uppercase: false }
+			},
+			{
+				selector: "a",
+				options: { hideLinkHrefIfSameAsText: true }
+			},
+			{
+				selector: "table",
+				format: "block"
+			},
+			{
+				selector: "tr",
+				format: "block"
+			},
+			{
+				selector: "td",
+				format: "block"
+			}
+		]
+	}).trim();
+}
+//#endregion
+export { renderEmail };

package/dist/runtime/server/boot.d.ts

@@ -3,8 +3,8 @@ declare const _default: import("nuxt/server").EventHandler<{
   error: string;
   ok?: undefined;
 } | {
-  ok: boolean;
   error?: undefined;
+  ok: boolean;
 }>;
 //#endregion
 export { _default as default };

package/dist/runtime/server/email-preview.d.ts

@@ -0,0 +1,4 @@
+//#region src/runtime/server/email-preview.d.ts
+declare const _default: import("nuxt/server").EventHandler<Promise<Response>>;
+//#endregion
+export { _default as default };

package/dist/runtime/server/email-preview.js

@@ -0,0 +1,30 @@
+import { renderEmail } from "../email/render.js";
+import { createError, defineEventHandler, getQuery } from "nuxt/server";
+import { templates } from "#wervt/emails";
+//#region src/runtime/server/email-preview.ts
+const list = templates;
+const page = (body) => new Response(`<!doctype html><meta charset="utf-8"><title>Emails</title><body style="font:15px/1.6 system-ui;margin:40px">${body}</body>`, { headers: { "content-type": "text/html; charset=utf-8" } });
+const escape = (value) => value.replace(/[&<>"]/g, (c) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;"
+})[c]);
+var email_preview_default = defineEventHandler(async (event) => {
+	const name = decodeURIComponent(new URL(event.req.url).pathname.replace(/^\/_wervt\/emails\/?/, ""));
+	if (!name) {
+		const names = Object.keys(list);
+		return page(names.length ? `<h1>Email templates</h1><ul>${names.map((n) => `<li><a href="/_wervt/emails/${n}">${escape(n)}</a> · <a href="/_wervt/emails/${n}?text">text</a></li>`).join("")}</ul>` : "<h1>No email templates</h1><p>Add <code>emails/*.vue</code> and restart <code>nuxt dev</code>.</p>");
+	}
+	const load = list[name];
+	if (!load) throw createError({
+		status: 404,
+		message: `No email template "${name}"`
+	});
+	const template = await load();
+	const mail = await renderEmail(template.default, template.previewProps);
+	if ("text" in getQuery(event)) return new Response(`Subject: ${mail.subject}\n\n${mail.text}\n`, { headers: { "content-type": "text/plain; charset=utf-8" } });
+	return new Response(mail.html, { headers: { "content-type": "text/html; charset=utf-8" } });
+});
+//#endregion
+export { email_preview_default as default };

package/dist/runtime/server/index.d.ts

@@ -1,10 +1,12 @@
 import { WervtUser } from "../shared/user.js";
+import { EmailProps, RenderedEmail, renderEmail } from "../email/render.js";
 import { useDb } from "./db.js";
 import { createEvlogError, log, useLogger } from "./logger.js";
+import { SendMailOptions, sendMail } from "./mail.js";
 import { McpTokenContext } from "./mcp-auth.js";
 import { ShapeOptions, proxyShape } from "./shape.js";
 import { Task, TaskEvent, TaskResult, defineTask } from "./tasks.js";
 import { SafeResult, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, vh } from "./validate.js";
 import { Tool, defineTool } from "./tools.js";
 import { useWervtUser } from "./user.js";
-export { type McpTokenContext, type SafeResult, type ShapeOptions, type Task, type TaskEvent, type TaskResult, type Tool, type WervtUser, createEvlogError, defineTask, defineTool, log, proxyShape, useDb, useLogger, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, useWervtUser, vh };
+export { type EmailProps, type McpTokenContext, type RenderedEmail, type SafeResult, type SendMailOptions, type ShapeOptions, type Task, type TaskEvent, type TaskResult, type Tool, type WervtUser, createEvlogError, defineTask, defineTool, log, proxyShape, renderEmail, sendMail, useDb, useLogger, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, useWervtUser, vh };

package/dist/runtime/server/index.js

@@ -1,8 +1,10 @@
+import { renderEmail } from "../email/render.js";
 import { useDb } from "./db.js";
 import { createEvlogError, log, useLogger } from "./logger.js";
+import { sendMail } from "./mail.js";
 import { proxyShape } from "./shape.js";
 import { defineTask } from "./tasks.js";
 import { defineTool } from "./tools.js";
 import { useWervtUser } from "./user.js";
 import { useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, vh } from "./validate.js";
-export { createEvlogError, defineTask, defineTool, log, proxyShape, useDb, useLogger, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, useWervtUser, vh };
+export { createEvlogError, defineTask, defineTool, log, proxyShape, renderEmail, sendMail, useDb, useLogger, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, useWervtUser, vh };

package/dist/runtime/server/mail.d.ts

@@ -0,0 +1,23 @@
+import { EmailProps } from "../email/render.js";
+import { Component } from "vue";
+//#region src/runtime/server/mail.d.ts
+export interface SendMailOptions<T extends Component> {
+  /** One recipient. */
+  to: string;
+  /** A template from `emails/` (a component with `<WervtEmail>` at its root). */
+  template: T;
+  props?: EmailProps<T>;
+  /** Where replies go. The sender is always `<app> <mail@wervt.app>`. */
+  replyTo?: string;
+}
+/**
+ * Renders a template and sends it through wervt. Throws on failure, with the status the platform
+ * answered: 400 (invalid mail), 429 (the app's or the recipient's hourly limit), 502/503.
+ *
+ * In `nuxt dev` nothing is sent: the mail is printed to the terminal, and `/_wervt/emails`
+ * previews the templates.
+ */
+export declare function sendMail<T extends Component>(options: SendMailOptions<T>): Promise<{
+  id: string;
+}>;
+//#endregion

package/dist/runtime/server/mail.js

@@ -0,0 +1,43 @@
+import { renderEmail } from "../email/render.js";
+import { createError } from "nuxt/server";
+//#region src/runtime/server/mail.ts
+/**
+* Renders a template and sends it through wervt. Throws on failure, with the status the platform
+* answered: 400 (invalid mail), 429 (the app's or the recipient's hourly limit), 502/503.
+*
+* In `nuxt dev` nothing is sent: the mail is printed to the terminal, and `/_wervt/emails`
+* previews the templates.
+*/
+async function sendMail(options) {
+	const { subject, html, text } = await renderEmail(options.template, options.props);
+	const template = options.template.__name;
+	const runtime = process.env.WERVT_RUNTIME_URL;
+	if (!runtime) {
+		console.info(`[mail] to ${options.to}: ${subject}\n${text}`);
+		return { id: "dev" };
+	}
+	const res = await fetch(new URL("/_wervt/mail", runtime), {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			"x-wervt-app": process.env.WERVT_APP ?? "",
+			"x-wervt-token": process.env.WERVT_TOKEN ?? ""
+		},
+		body: JSON.stringify({
+			to: options.to,
+			subject,
+			html,
+			text,
+			replyTo: options.replyTo,
+			template
+		})
+	});
+	const body = await res.json().catch(() => ({}));
+	if (!res.ok) throw createError({
+		status: res.status,
+		message: body.error ?? `sending mail failed (${res.status})`
+	});
+	return { id: body.id ?? "" };
+}
+//#endregion
+export { sendMail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wervt/nuxt",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Nuxt module for apps hosted on wervt: database, live data, MCP and runtime setup.",
   "keywords": [
     "drizzle",
@@ -33,6 +33,10 @@
       "types": "./dist/runtime/server/index.d.ts",
       "default": "./dist/runtime/server/index.js"
     },
+    "./email": {
+      "types": "./dist/runtime/email/index.d.ts",
+      "default": "./dist/runtime/email/index.js"
+    },
     "./provision": {
       "types": "./dist/provision.d.ts",
       "default": "./dist/provision.js"
@@ -44,11 +48,13 @@
     "aws4fetch": "^1.0.20",
     "evlog": "^2.30.1",
     "h3-mcp": "0.2.0",
+    "html-to-text": "^9.0.5",
     "jose": "^6.2.12",
     "postgres": "^3.4.9",
     "valibot": "^1.5.0"
   },
   "devDependencies": {
+    "@types/html-to-text": "^9.0.4",
     "drizzle-orm": "1.0.0-rc.4",
     "h3": "2.0.2",
     "nitro": "3.0.260903-beta",