@wervt/nuxt 0.3.2 → 0.3.3

package/README.md

@@ -20,6 +20,8 @@ export default defineNuxtConfig({
 - `useWervtUser()`: the signed-in wervt user, on the server and in the app.
 - `useWervtAccess(event)`: invites on invite-only apps (`wervt access <app> --invite`), as the
   signed-in user.
+- `useAnthropic()` (`@wervt/nuxt/anthropic`): an Anthropic client without an API key, through the
+  app's wervt identity (`wervt identity enable <app>`); `useWorkloadIdentity()` for the raw token.
 - `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.

package/dist/dev.d.ts

@@ -1,3 +1,4 @@
+import { WervtRole } from "./runtime/shared/user.js";
 import "nuxt/schema";
 //#region src/dev.d.ts
 export interface DevOptions {
@@ -18,7 +19,7 @@ export interface DevOptions {
   seed?: boolean;
   /**
    * Who `/_wervt/login` signs in as during `nuxt dev` (there's no wervt auth locally).
-   * Defaults to a dev user with a Twitch account linked.
+   * Defaults to a dev user with a Twitch account linked. Without `role`, they're the app's owner.
    */
   user?: {
     id: string;
@@ -26,6 +27,7 @@ export interface DevOptions {
     name?: string;
     image?: string;
     accounts?: Record<string, string>;
+    role?: WervtRole;
   };
 }
 //#endregion

package/dist/env-types.js

@@ -0,0 +1,14 @@
+//#region src/env-types.ts
+/** `.nuxt/types/wervt-env.d.ts`: types for the `process.env` the isolate provides. */
+const PROCESS_ENV_TYPES = `declare namespace NodeJS {
+  interface ProcessEnv {
+    [key: string]: string | undefined
+  }
+  interface Process {
+    env: ProcessEnv
+  }
+}
+declare var process: NodeJS.Process
+`;
+//#endregion
+export { PROCESS_ENV_TYPES };

package/dist/icons.js

@@ -0,0 +1,31 @@
+import { dependencyNames } from "./og-image.js";
+//#region src/icons.ts
+const ICONIFY_JSON = "@iconify-json/";
+/** The whole Iconify set in one package; @nuxt/icon finds every collection in it. */
+const ICONIFY_ALL = "@iconify/json";
+/** Where the app's icons can come from without the Iconify API. */
+async function iconSources(rootDir) {
+	const names = await dependencyNames(rootDir);
+	return {
+		collections: names.filter((name) => name.startsWith(ICONIFY_JSON)).map((name) => name.slice(14)).toSorted(),
+		everything: names.includes(ICONIFY_ALL)
+	};
+}
+/**
+* @nuxt/icon defaults for a wervt build. Its `serverBundle: 'auto'` already resolves to the
+* locally installed collections on the Deno preset (auto-discovery also covers layers and
+* transitive deps), so only the API fallback needs changing: the isolate can't reach the Iconify
+* API, and a server request would time out for every icon of a missing collection. The browser
+* may still fall back. An app's own `icon` config wins over these.
+*/
+function iconDefaults() {
+	return { fallbackToApi: "client-only" };
+}
+/** Why icons won't render on wervt, if they won't. Nuxt UI's own icons are Lucide icons. */
+function iconWarning(sources, nuxtUi) {
+	if (sources.everything) return void 0;
+	if (nuxtUi && !sources.collections.includes("lucide")) return "Nuxt UI uses Lucide icons, but `@iconify-json/lucide` is not installed, so they won't render on wervt (the isolate can't reach the Iconify API). Run `pnpm add -D @iconify-json/lucide`, plus `@iconify-json/<name>` for every other icon collection the app uses.";
+	if (sources.collections.length === 0) return "No icon collection is installed, so icons won't render on wervt (the isolate can't reach the Iconify API). Install the collections the app uses, e.g. `pnpm add -D @iconify-json/lucide`.";
+}
+//#endregion
+export { iconDefaults, iconSources, iconWarning };

package/dist/module.js

@@ -1,5 +1,8 @@
 import { SEED_TASK, unscheduleSeed } from "./seed.js";
 import { resolveAppName, setupDev } from "./dev.js";
+import { PROCESS_ENV_TYPES } from "./env-types.js";
+import { dependencyNames, ogImageDefaults, ogImageWarning } from "./og-image.js";
+import { iconDefaults, iconSources, iconWarning } from "./icons.js";
 import { findRouteTools } from "./route-tools.js";
 import { localFiles, previewManifest } from "./preview.js";
 import { findShapeRoutes, shapeRoutesTypes, shapesManifest } from "./shapes.js";
@@ -19,6 +22,19 @@ var module_default = defineNuxtModule({
 		name: "@wervt/nuxt",
 		configKey: "wervt"
 	},
+	async moduleDependencies(nuxt) {
+		if (nuxt.options.dev) return {};
+		return {
+			"@nuxt/icon": {
+				optional: true,
+				defaults: iconDefaults()
+			},
+			"nuxt-og-image": {
+				optional: true,
+				defaults: ogImageDefaults()
+			}
+		};
+	},
 	async setup(options, nuxt) {
 		const resolver = createResolver(import.meta.url);
 		const nitro = nuxt.options.nitro;
@@ -51,6 +67,7 @@ var module_default = defineNuxtModule({
 				});
 			}
 		}
+		addServerPlugin(resolver.resolve("./runtime/server/agent-token-plugin"));
 		const useContentDatabase = !nuxt.options.dev && hasNuxtModule("@nuxt/content", nuxt);
 		if (useContentDatabase) {
 			const options = nuxt.options;
@@ -123,6 +140,16 @@ var module_default = defineNuxtModule({
 				};
 			});
 		}
+		const nuxtUi = hasNuxtModule("@nuxt/ui", nuxt);
+		if (!nuxt.options.dev && !nuxt.options._prepare && (nuxtUi || hasNuxtModule("@nuxt/icon", nuxt))) {
+			const warning = iconWarning(await iconSources(nuxt.options.rootDir), nuxtUi);
+			if (warning) logger.warn(warning);
+		}
+		nuxt.hook("modules:done", async () => {
+			if (nuxt.options.dev || nuxt.options._prepare || !hasNuxtModule("nuxt-og-image", nuxt)) return;
+			const warning = ogImageWarning(await dependencyNames(nuxt.options.rootDir));
+			if (warning) logger.warn(warning);
+		});
 		addServerHandler({
 			route: "/_wervt/boot",
 			method: "get",
@@ -256,6 +283,18 @@ var module_default = defineNuxtModule({
 			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 });
+		addTypeTemplate({
+			filename: "types/wervt-env.d.ts",
+			getContents: () => PROCESS_ENV_TYPES
+		}, { nitro: true });
+		const sourceEnv = resolver.resolve("./env.d.ts");
+		if (existsSync(sourceEnv)) addTypeTemplate({
+			filename: "types/wervt-source-env.d.ts",
+			getContents: () => `/// <reference path=${JSON.stringify(sourceEnv)} />\n`
+		}, {
+			nitro: true,
+			nuxt: true
+		});
 		if (nuxt.options.dev) {
 			const templates = await findEmailTemplates([join(nuxt.options.srcDir, "emails"), join(nuxt.options.rootDir, "emails")]);
 			addServerTemplate({

package/dist/node_modules/.pnpm/nitro@3.0.260903-beta/node_modules/nitro/dist/runtime/task.js

@@ -1,2 +1 @@
-import { runTask } from "./internal/task.js";
-export { runTask };
+export { runTask } from "./internal/task.js";

package/dist/og-image.js

@@ -0,0 +1,39 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+//#region src/og-image.ts
+/** The app's dependencies and devDependencies, by name. */
+async function dependencyNames(rootDir) {
+	const pkg = JSON.parse(await readFile(join(rootDir, "package.json"), "utf8").catch(() => "{}"));
+	return Object.keys({
+		...pkg.dependencies,
+		...pkg.devDependencies
+	});
+}
+/**
+* nuxt-og-image defaults for a wervt build. It treats the deno-server preset like Node and picks
+* the native renderers (N-API bindings, sharp, a local Chrome), which an Edge Runtime isolate
+* can't load, so OG image requests fail with a 500. The WebAssembly builds run there; without
+* sharp, images are PNG only. An app's own `ogImage` config wins over these.
+*/
+function ogImageDefaults() {
+	return { compatibility: { runtime: {
+		takumi: "wasm",
+		satori: "wasm",
+		resvg: "wasm",
+		sharp: false,
+		browser: false
+	} } };
+}
+/**
+* Why OG images won't render on wervt, if they won't. The WebAssembly package renders; the native
+* one is needed too because nuxt-og-image checks for the packages of the preset's own defaults
+* (Node for deno-server) and fails the build without them, whatever `compatibility` says.
+*/
+function ogImageWarning(dependencies) {
+	const has = (name) => dependencies.includes(name);
+	const missing = [...has("@takumi-rs/core") || has("@takumi-rs/wasm") || !has("satori") ? ["@takumi-rs/core", "@takumi-rs/wasm"] : [], ...has("satori") ? ["@resvg/resvg-js", "@resvg/resvg-wasm"] : []].filter((name) => !has(name));
+	if (missing.length === 0) return void 0;
+	return `OG images render with WebAssembly on wervt (an isolate can't load native renderers), and nuxt-og-image's build also wants the native package, but ${missing.map((name) => `\`${name}\``).join(", ")} ${missing.length > 1 ? "are" : "is"} not installed. Run \`pnpm add ${missing.join(" ")}\`.`;
+}
+//#endregion
+export { dependencyNames, ogImageDefaults, ogImageWarning };

package/dist/provision.d.ts

@@ -1,4 +1,4 @@
-import { StorageError, StorageOptions, StorageUsage, createStorage } from "./storage.js";
+import { MAX_KEY_BYTES, ObjectDetails, ObjectListing, StorageError, StorageOptions, StorageQuota, StorageUsage, StoredObject, createStorage } from "./storage.js";
 //#region src/provision.d.ts
 export interface ProvisionOptions {
   /** App name, `[a-z0-9-]+`. */
@@ -9,7 +9,24 @@ export interface ProvisionOptions {
   secret: string;
   /** Drizzle migrations folder. Skipped when undefined. */
   migrationsFolder?: string;
+  /** Timeouts for the app's role; DEFAULT_ROLE_TIMEOUTS where not given. */
+  timeouts?: Partial<RoleTimeouts>;
 }
+/** Postgres durations (`30s`, `500ms`, `2min`) for the app's role; `0` turns one off. */
+export interface RoleTimeouts {
+  /** Longest a single statement may run. */
+  statement: string;
+  /** Longest a transaction may sit idle, holding its locks and its pooled connection. */
+  idleInTransaction: string;
+}
+export declare const DEFAULT_ROLE_TIMEOUTS: RoleTimeouts;
+/** A Postgres duration as the env gives it, e.g. `WERVT_STATEMENT_TIMEOUT`; the fallback when empty. */
+export declare function parseDuration(value: string | undefined, fallback: string, name?: string): string;
+/**
+ * Sets the timeouts on an existing app role, for apps that aren't redeployed. New sessions get
+ * them; open ones keep theirs. Returns false when the app has no role.
+ */
+export declare function setRoleTimeouts({ app, adminUrl, timeouts }: Pick<ProvisionOptions, 'app' | 'adminUrl' | 'timeouts'>): Promise<boolean>;
 export declare function dbRole(app: string): string;
 export declare function hmac(secret: string, message: string): Promise<string>;
 /** The app's Garage bucket and S3 key, derived from WERVT_DB_SECRET like role passwords. */
@@ -47,4 +64,4 @@ export declare function setupPooler({ adminUrl, password }: {
 /** Drops the app's schema (all its data) and role. */
 export declare function dropDatabase({ app, adminUrl }: Pick<ProvisionOptions, 'app' | 'adminUrl'>): Promise<void>;
 //#endregion
-export { StorageError, type StorageOptions, type StorageUsage, createStorage };
+export { MAX_KEY_BYTES, type ObjectDetails, type ObjectListing, StorageError, type StorageOptions, type StorageQuota, type StorageUsage, type StoredObject, createStorage };

package/dist/provision.js

@@ -1,8 +1,53 @@
-import { StorageError, createStorage } from "./storage.js";
+import { MAX_KEY_BYTES, StorageError, createStorage } from "./storage.js";
 import { drizzle } from "drizzle-orm/postgres-js";
 import { migrate } from "drizzle-orm/postgres-js/migrator";
 import postgres from "postgres";
 //#region src/provision.ts
+const DEFAULT_ROLE_TIMEOUTS = {
+	statement: "30s",
+	idleInTransaction: "60s"
+};
+const DURATION_RE = /^\d+(?:ms|s|min|h)?$/;
+/** A Postgres duration as the env gives it, e.g. `WERVT_STATEMENT_TIMEOUT`; the fallback when empty. */
+function parseDuration(value, fallback, name = "timeout") {
+	const trimmed = value?.trim();
+	if (!trimmed) return fallback;
+	if (!DURATION_RE.test(trimmed)) throw new Error(`${name} must be a duration like 30s, 500ms or 2min (0 for none)`);
+	return trimmed;
+}
+function roleTimeouts(timeouts) {
+	const merged = {
+		...DEFAULT_ROLE_TIMEOUTS,
+		...timeouts
+	};
+	return {
+		statement: parseDuration(merged.statement, DEFAULT_ROLE_TIMEOUTS.statement),
+		idleInTransaction: parseDuration(merged.idleInTransaction, DEFAULT_ROLE_TIMEOUTS.idleInTransaction)
+	};
+}
+async function applyRoleTimeouts(admin, role, timeouts) {
+	await admin.unsafe(`alter role "${role}" set statement_timeout = '${timeouts.statement}'`);
+	await admin.unsafe(`alter role "${role}" set idle_in_transaction_session_timeout = '${timeouts.idleInTransaction}'`);
+}
+/**
+* Sets the timeouts on an existing app role, for apps that aren't redeployed. New sessions get
+* them; open ones keep theirs. Returns false when the app has no role.
+*/
+async function setRoleTimeouts({ app, adminUrl, timeouts }) {
+	const role = dbRole(app);
+	const admin = postgres(adminUrl, {
+		max: 1,
+		onnotice: () => {}
+	});
+	try {
+		const [row] = await admin`select exists(select 1 from pg_roles where rolname = ${role})`;
+		if (!row?.exists) return false;
+		await applyRoleTimeouts(admin, role, roleTimeouts(timeouts));
+		return true;
+	} finally {
+		await admin.end();
+	}
+}
 function dbRole(app) {
 	return `app_${app.replaceAll("-", "_")}`;
 }
@@ -56,6 +101,7 @@ async function provisionDatabase(options) {
 		await admin.unsafe(`create schema if not exists "${role}" authorization "${role}"`);
 		await claimSchema(admin, role);
 		await admin.unsafe(`alter role "${role}" set search_path = "${role}"`);
+		await applyRoleTimeouts(admin, role, roleTimeouts(options.timeouts));
 		for (const db of [
 			database,
 			"postgres",
@@ -78,6 +124,7 @@ async function provisionDatabase(options) {
 			onnotice: () => {}
 		});
 		try {
+			await client.unsafe("set statement_timeout = 0; set idle_in_transaction_session_timeout = 0");
 			await migrate(drizzle({ client }), {
 				migrationsFolder,
 				migrationsSchema: role
@@ -174,4 +221,4 @@ async function dropDatabase({ app, adminUrl }) {
 	}
 }
 //#endregion
-export { POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, provisionDatabase, setupPooler, storageCredentials };
+export { DEFAULT_ROLE_TIMEOUTS, MAX_KEY_BYTES, POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, parseDuration, provisionDatabase, setRoleTimeouts, setupPooler, storageCredentials };

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

@@ -0,0 +1,17 @@
+import { Message, Offset, Row } from "@electric-sql/client";
+//#region src/runtime/app/snapshot.d.ts
+export interface ShapeSnapshot<T> {
+  rows: [string, T][];
+  offset: Offset;
+  handle?: string;
+  /**
+   * The route answered 401: the shape needs a signed-in user and there is none, e.g. an anonymous
+   * visitor of a public app, or the deploy's page check. No rows, and nothing to stream.
+   */
+  unauthorized?: true;
+}
+/** The rows of the shape at `url` (absolute) as of now, without subscribing. */
+export declare function loadSnapshot<T extends Row<unknown>>(url: string, fetchClient?: typeof fetch): Promise<ShapeSnapshot<T>>;
+/** Applies Electric change messages to `rows`. Returns whether anything changed. */
+export declare function applyMessages<T extends Row<unknown>>(rows: Map<string, T>, messages: Message<T>[]): boolean;
+//#endregion

package/dist/runtime/app/snapshot.js

@@ -0,0 +1,64 @@
+import { shapeParser } from "../shared/shape.js";
+import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
+//#region src/runtime/app/snapshot.ts
+/** The rows of the shape at `url` (absolute) as of now, without subscribing. */
+async function loadSnapshot(url, fetchClient) {
+	const rows = /* @__PURE__ */ new Map();
+	let fail = () => {};
+	const stream = new ShapeStream({
+		url,
+		subscribe: false,
+		fetchClient,
+		parser: shapeParser,
+		onError: (e) => fail(e)
+	});
+	try {
+		await new Promise((resolve, reject) => {
+			fail = reject;
+			stream.subscribe((messages) => {
+				applyMessages(rows, messages);
+				if (stream.isUpToDate) resolve();
+			}, (e) => reject(e));
+		});
+	} catch (e) {
+		if (e?.status === 401) return {
+			rows: [],
+			offset: "-1",
+			unauthorized: true
+		};
+		throw e;
+	} finally {
+		stream.unsubscribeAll();
+	}
+	return {
+		rows: [...rows],
+		offset: stream.lastOffset,
+		handle: stream.shapeHandle
+	};
+}
+/** Applies Electric change messages to `rows`. Returns whether anything changed. */
+function applyMessages(rows, messages) {
+	let changed = false;
+	for (const message of messages) if (isChangeMessage(message)) {
+		const { key, value } = message;
+		switch (message.headers.operation) {
+			case "insert":
+				rows.set(key, value);
+				break;
+			case "update":
+				rows.set(key, {
+					...rows.get(key),
+					...value
+				});
+				break;
+			case "delete": rows.delete(key);
+		}
+		changed = true;
+	} else if (isControlMessage(message) && message.headers.control === "must-refetch") {
+		rows.clear();
+		changed = true;
+	}
+	return changed;
+}
+//#endregion
+export { applyMessages, loadSnapshot };

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

@@ -18,6 +18,12 @@ interface ShapeRefs<T> {
   data: ShallowRef<T[]>;
   error: Ref<unknown>;
   isLive: Ref<boolean>;
+  /**
+   * The route refused the snapshot for lack of a signed-in user (401): `data` is empty because
+   * nobody may see it, not because there are no rows. Lets public apps show "sign in" instead
+   * of an empty state.
+   */
+  unauthorized: Ref<boolean>;
 }
 /**
  * Live rows of an Electric shape served by one of the app's shape routes
@@ -44,4 +50,5 @@ export declare function preloadShape<P extends keyof WervtShapeRoutes>(path: P,
 export declare function preloadShape(path: string, options?: {
   key?: string;
 }): Promise<void>;
-//#endregion
+//#endregion
+export {};

package/dist/runtime/app/useShape.js

@@ -1,5 +1,6 @@
 import { shapeParser } from "../shared/shape.js";
-import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
+import { applyMessages, loadSnapshot } from "./snapshot.js";
+import { ShapeStream } from "@electric-sql/client";
 import { getCurrentScope, onScopeDispose, ref, shallowRef } from "vue";
 import { onNuxtReady, useAsyncData, useRequestEvent, useRequestFetch } from "#app";
 //#region src/runtime/app/useShape.ts
@@ -8,13 +9,14 @@ function useShape(path, options = {}) {
 	const fetchClient = import.meta.server ? inProcessFetch() : void 0;
 	const asyncData = useAsyncData(key, () => {
 		const live = import.meta.client ? shapes.get(key) : void 0;
-		return live?.stream ? live.settled.then(() => snapshotOf(live)) : loadSnapshot(path, fetchClient);
+		return live?.stream ? live.settled.then(() => snapshotOf(live)) : loadSnapshot(absolute(path), fetchClient);
 	});
 	const shape = import.meta.client && options.live !== false ? acquire(key, path) : (import.meta.client ? shapes.get(key) : void 0) ?? createShape(path);
 	const result = {
 		data: shape.data,
 		error: shape.error,
-		isLive: shape.isLive
+		isLive: shape.isLive,
+		unauthorized: shape.unauthorized
 	};
 	const ready = Promise.resolve(asyncData).then(() => {
 		if (!shape.stream && !shape.seeded) {
@@ -22,6 +24,7 @@ function useShape(path, options = {}) {
 			shape.data.value = [...shape.rows.values()];
 			shape.offset = asyncData.data.value?.offset;
 			shape.handle = asyncData.data.value?.handle;
+			shape.unauthorized.value = asyncData.data.value?.unauthorized ?? false;
 			shape.seeded = true;
 		}
 		const error = asyncData.error.value ?? null;
@@ -34,7 +37,7 @@ function useShape(path, options = {}) {
 	if (import.meta.client && options.live !== false) {
 		onNuxtReady(async () => {
 			await ready;
-			start(shape);
+			if (!shape.unauthorized.value) start(shape);
 		});
 		if (getCurrentScope()) onScopeDispose(() => release(key, shape, KEEP_AFTER_UNMOUNT_MS));
 	}
@@ -63,6 +66,7 @@ function createShape(path) {
 		error: ref(null),
 		isLive: ref(false),
 		seeded: false,
+		unauthorized: ref(false),
 		settled,
 		settle,
 		users: 0
@@ -118,54 +122,6 @@ function snapshotOf(shape) {
 		handle: shape.stream?.shapeHandle ?? shape.handle
 	};
 }
-async function loadSnapshot(path, fetchClient) {
-	const rows = /* @__PURE__ */ new Map();
-	let fail = () => {};
-	const stream = new ShapeStream({
-		url: absolute(path),
-		subscribe: false,
-		fetchClient,
-		parser: shapeParser,
-		onError: (e) => fail(e)
-	});
-	await new Promise((resolve, reject) => {
-		fail = reject;
-		stream.subscribe((messages) => {
-			applyMessages(rows, messages);
-			if (stream.isUpToDate) resolve();
-		}, (e) => reject(e));
-	});
-	stream.unsubscribeAll();
-	return {
-		rows: [...rows],
-		offset: stream.lastOffset,
-		handle: stream.shapeHandle
-	};
-}
-/** Applies Electric change messages to `rows`. Returns whether anything changed. */
-function applyMessages(rows, messages) {
-	let changed = false;
-	for (const message of messages) if (isChangeMessage(message)) {
-		const { key, value } = message;
-		switch (message.headers.operation) {
-			case "insert":
-				rows.set(key, value);
-				break;
-			case "update":
-				rows.set(key, {
-					...rows.get(key),
-					...value
-				});
-				break;
-			case "delete": rows.delete(key);
-		}
-		changed = true;
-	} else if (isControlMessage(message) && message.headers.control === "must-refetch") {
-		rows.clear();
-		changed = true;
-	}
-	return changed;
-}
 /**
 * During SSR, calls the shape route in-process with the request's headers (cookies, auth).
 * Nitro 2 (Nuxt 4.6) has `event.fetch`, which returns a Response; on Nitro 3 (Nuxt 5) the

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

@@ -21,4 +21,5 @@ export declare function useWervtFeedback(): {
   close: () => void | undefined;
   setContext(values: Record<string, unknown>): void;
 };
-//#endregion
+//#endregion
+export {};

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

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

package/dist/runtime/email/index.js

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

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

@@ -0,0 +1,75 @@
+//#region src/runtime/email/invite.d.ts
+/**
+ * An invitation to an app: who invited, where to go, and that signing in with this address is
+ * all it takes. Send it with `sendMail({ to, template: InviteEmail, props: { by, app, url } })`.
+ */
+export declare const InviteEmail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Who invited them, by name or email. */
+  by: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** The app they're invited to, as people know it. */
+  app: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Where the button goes: the app, or a link that lets them in. */
+  url: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** What the app is, in a sentence after "<by> invited you to <app>." */
+  message: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The button's label; "Open <app>" unless set. */
+  action: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** A hint under the button; by default, to sign in with this address. */
+  note: {
+    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<{
+  /** Who invited them, by name or email. */
+  by: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** The app they're invited to, as people know it. */
+  app: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** Where the button goes: the app, or a link that lets them in. */
+  url: {
+    type: StringConstructor;
+    required: true;
+  };
+  /** What the app is, in a sentence after "<by> invited you to <app>." */
+  message: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** The button's label; "Open <app>" unless set. */
+  action: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** A hint under the button; by default, to sign in with this address. */
+  note: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  message: string;
+  action: string;
+  note: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion