@wervt/nuxt 0.3.2 → 0.3.4

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

@@ -1,6 +1,6 @@
 import { useUpdateAvailable, useWervtUpdate } from "../useWervtUpdate.js";
 import { defineNuxtPlugin, onNuxtReady, useRuntimeConfig } from "#app";
-//#region src/runtime/app/plugins/update.client.ts
+// src/runtime/app/plugins/update.client.ts
 const INTERVAL_MS = 6e4;
 /** Focus and visibility changes come in bursts; one check covers them. */
 const MIN_GAP_MS = 1e4;
@@ -73,5 +73,4 @@ function showBanner(reload) {
 	bar.append(text, button("Reload", "background:#fafafa;color:#18181b", reload), close);
 	document.body.append(bar);
 }
-//#endregion
 export { update_client_default as default };

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

@@ -1,4 +1,2 @@
-//#region src/runtime/app/plugins/user.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/user.client.js

@@ -1,6 +1,6 @@
 import { useWervtUser } from "../useWervtUser.js";
 import { defineNuxtPlugin } from "#app";
-//#region src/runtime/app/plugins/user.client.ts
+// src/runtime/app/plugins/user.client.ts
 var user_client_default = defineNuxtPlugin({
 	name: "wervt:user",
 	async setup(nuxtApp) {
@@ -14,5 +14,4 @@ var user_client_default = defineNuxtPlugin({
 		}
 	}
 });
-//#endregion
 export { user_client_default as default };

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

@@ -1,4 +1,2 @@
-//#region src/runtime/app/plugins/webmcp.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/webmcp.client.js

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin, onNuxtReady, useRuntimeConfig } from "#app";
-//#region src/runtime/app/plugins/webmcp.client.ts
+// src/runtime/app/plugins/webmcp.client.ts
 function pageModelContext() {
 	const context = document.modelContext ?? navigator.modelContext;
 	return typeof context?.registerTool === "function" ? context : void 0;
@@ -46,5 +46,4 @@ var webmcp_client_default = defineNuxtPlugin({
 		});
 	}
 });
-//#endregion
 export { webmcp_client_default as default };

package/dist/runtime/app/preview-error.d.ts

@@ -0,0 +1,26 @@
+import { PropType } from "vue";
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  error: {
+    type: PropType<{
+      status?: number;
+      statusCode?: number;
+    }>;
+    default: () => {};
+  };
+}>, () => 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<{
+  error: {
+    type: PropType<{
+      status?: number;
+      statusCode?: number;
+    }>;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  error: {
+    status?: number;
+    statusCode?: number;
+  };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { _default as default };

package/dist/runtime/app/preview-error.js

@@ -0,0 +1,69 @@
+import { WERVT_MARK } from "../shared/mark.js";
+import { clearError, useRequestHeaders, useRequestURL, useState } from "#app";
+import { defineComponent, h } from "vue";
+// src/runtime/app/preview-error.ts
+const TEXT = {
+	de: {
+		missing: "Diese Seite gibt es noch nicht",
+		building: "Die Startseite entsteht gerade",
+		broken: "Hier hakt gerade etwas",
+		hint: "Studio sieht den Fehler und kann ihn beheben.",
+		home: "Zur Startseite",
+		reload: "Neu laden"
+	},
+	en: {
+		missing: "This page doesn’t exist yet",
+		building: "The start page is being built",
+		broken: "Something isn’t working here",
+		hint: "Studio sees the error and can fix it.",
+		home: "Go to start",
+		reload: "Reload"
+	}
+};
+const STYLE = `
+.wervt-preview-error { min-height: 100dvh; display: grid; place-content: center; justify-items: center;
+  gap: .75rem; padding: 2rem; text-align: center; font: 500 1rem/1.4 system-ui, -apple-system, sans-serif;
+  color: #0a0a0b; background: #fafaf9; --a: #2f5bff; }
+.wervt-preview-error svg { width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; }
+.wervt-preview-error h1 { margin: 0; font-size: 1.25rem; font-weight: 600; }
+.wervt-preview-error p { margin: 0; color: #6b6b70; }
+.wervt-preview-error button { margin-top: .75rem; padding: .7rem 1.4rem; border: 0; border-radius: 999px;
+  background: #0a0a0b; color: #fafaf9; font: inherit; cursor: pointer; }
+@media (prefers-color-scheme: dark) {
+  .wervt-preview-error { color: #fafaf9; background: #0a0a0b; --a: #5885ff; }
+  .wervt-preview-error p { color: #a1a1a6; }
+  .wervt-preview-error button { background: #fafaf9; color: #0a0a0b; }
+}`;
+var preview_error_default = defineComponent({
+	name: "WervtPreviewError",
+	props: { error: {
+		type: Object,
+		default: () => ({})
+	} },
+	setup(props) {
+		const lang = useState("wervt-preview-lang", () => {
+			return (import.meta.server ? useRequestHeaders(["accept-language"])["accept-language"] ?? "" : navigator.language).toLowerCase().startsWith("en") ? "en" : "de";
+		});
+		const path = useRequestURL().pathname;
+		return () => {
+			const text = TEXT[lang.value];
+			const notFound = (props.error.status ?? props.error.statusCode) === 404;
+			const building = notFound && path === "/";
+			const missing = notFound && !building;
+			return h("main", { class: "wervt-preview-error" }, [
+				h("style", STYLE),
+				h("span", {
+					innerHTML: WERVT_MARK,
+					"aria-hidden": "true"
+				}),
+				h("h1", building ? text.building : missing ? text.missing : text.broken),
+				notFound ? null : h("p", text.hint),
+				h("button", {
+					type: "button",
+					onClick: () => missing ? clearError({ redirect: "/" }) : window.location.reload()
+				}, missing ? text.home : text.reload)
+			]);
+		};
+	}
+});
+export { preview_error_default as default };

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

@@ -0,0 +1,15 @@
+import { Message, Offset, Row } from "@electric-sql/client";
+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;

package/dist/runtime/app/snapshot.js

@@ -0,0 +1,63 @@
+import { shapeParser } from "../shared/shape.js";
+import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
+// 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;
+}
+export { applyMessages, loadSnapshot };

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

@@ -1,6 +1,5 @@
-import { Row } from "@electric-sql/client";
 import { Ref, ShallowRef } from "vue";
-//#region src/runtime/app/useShape.d.ts
+import { Row } from "@electric-sql/client";
 declare global {
   /**
    * Shape routes and their rows, generated from `server/api/shapes/` (`.nuxt/types/wervt-shapes.d.ts`).
@@ -18,6 +17,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 +49,4 @@ export declare function preloadShape<P extends keyof WervtShapeRoutes>(path: P,
 export declare function preloadShape(path: string, options?: {
   key?: string;
 }): Promise<void>;
-//#endregion
+export {};

package/dist/runtime/app/useShape.js

@@ -1,20 +1,22 @@
 import { shapeParser } from "../shared/shape.js";
-import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
-import { getCurrentScope, onScopeDispose, ref, shallowRef } from "vue";
+import { applyMessages, loadSnapshot } from "./snapshot.js";
 import { onNuxtReady, useAsyncData, useRequestEvent, useRequestFetch } from "#app";
-//#region src/runtime/app/useShape.ts
+import { getCurrentScope, onScopeDispose, ref, shallowRef } from "vue";
+import { ShapeStream } from "@electric-sql/client";
+// src/runtime/app/useShape.ts
 function useShape(path, options = {}) {
 	const key = options.key ?? `wervt-shape:${path}`;
 	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
@@ -198,5 +154,4 @@ function inProcessFetch() {
 function absolute(path) {
 	return new URL(path, import.meta.client ? location.origin : "http://localhost").href;
 }
-//#endregion
 export { preloadShape, useShape };

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

@@ -1,4 +1,3 @@
-//#region src/runtime/app/useWervtFeedback.d.ts
 interface KontorWidget {
   open(): void;
   close(): void;
@@ -21,4 +20,4 @@ export declare function useWervtFeedback(): {
   close: () => void | undefined;
   setContext(values: Record<string, unknown>): void;
 };
-//#endregion
+export {};

package/dist/runtime/app/useWervtFeedback.js

@@ -1,4 +1,4 @@
-//#region src/runtime/app/useWervtFeedback.ts
+// src/runtime/app/useWervtFeedback.ts
 const pendingFeedbackContext = {};
 /**
 * Controls the feedback widget (`wervt: { feedback: { key } }`): open it from your own button,
@@ -17,5 +17,4 @@ function useWervtFeedback() {
 		}
 	};
 }
-//#endregion
 export { pendingFeedbackContext, useWervtFeedback };

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

@@ -1,9 +1,7 @@
-//#region src/runtime/app/useWervtTrack.d.ts
 /**
  * Custom events for wervt's analytics, e.g. `track('signup')` or `track('click', url)`. They
  * show up with their counts and visitors in the dashboard and `wervt stats`. Like page views
  * they are cookieless: only the event, its label and the current path are sent. Does nothing
  * in `nuxt dev`, during SSR and with `wervt.analytics: false`.
  */
-export declare function useWervtTrack(): (name: string, label?: string) => void;
-//#endregion
+export declare function useWervtTrack(): (name: string, label?: string) => void;

package/dist/runtime/app/useWervtTrack.js

@@ -1,5 +1,5 @@
 import { useRuntimeConfig } from "#app";
-//#region src/runtime/app/useWervtTrack.ts
+// src/runtime/app/useWervtTrack.ts
 /**
 * Custom events for wervt's analytics, e.g. `track('signup')` or `track('click', url)`. They
 * show up with their counts and visitors in the dashboard and `wervt stats`. Like page views
@@ -20,5 +20,4 @@ function useWervtTrack() {
 		navigator.sendBeacon?.(`${base}/_wervt/view`, new Blob([body], { type: "application/json" }));
 	};
 }
-//#endregion
 export { useWervtTrack };

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

@@ -1,4 +1,3 @@
-//#region src/runtime/app/useWervtUpdate.d.ts
 /** State behind `useWervtUpdate()`, set by the update check (`plugins/update.client`). */
 export declare const useUpdateAvailable: () => import("vue").Ref<boolean, boolean>;
 /**
@@ -9,5 +8,4 @@ export declare const useUpdateAvailable: () => import("vue").Ref<boolean, boolea
 export declare function useWervtUpdate(): {
   available: Readonly<import("vue").Ref<boolean, boolean>>;
   reload: () => void;
-};
-//#endregion
+};

package/dist/runtime/app/useWervtUpdate.js

@@ -1,6 +1,6 @@
-import { readonly } from "vue";
 import { reloadNuxtApp, useState } from "#app";
-//#region src/runtime/app/useWervtUpdate.ts
+import { readonly } from "vue";
+// src/runtime/app/useWervtUpdate.ts
 /** State behind `useWervtUpdate()`, set by the update check (`plugins/update.client`). */
 const useUpdateAvailable = () => useState("wervt-update", () => false);
 /**
@@ -17,5 +17,4 @@ function useWervtUpdate() {
 		})
 	};
 }
-//#endregion
 export { useUpdateAvailable, useWervtUpdate };

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

@@ -1,5 +1,4 @@
 import { WervtUser } from "../shared/user.js";
-//#region src/runtime/app/useWervtUser.d.ts
 /**
  * The signed-in wervt user, or `null`. Read during SSR and kept in the payload; apps without
  * SSR load it from `/_wervt/user` before they render. Public apps get one when the visitor
@@ -9,5 +8,4 @@ export declare function useWervtUser(): import("vue").Ref<WervtUser | null, Werv
 /** Sign in with wervt, then come back to `redirect` (a path in this app). */
 export declare const wervtLoginUrl: (redirect?: string) => string;
 /** Sign out of wervt (all apps), then come back to `redirect`. */
-export declare const wervtLogoutUrl: (redirect?: string) => string;
-//#endregion
+export declare const wervtLogoutUrl: (redirect?: string) => string;

package/dist/runtime/app/useWervtUser.js

@@ -1,6 +1,6 @@
 import { DEV_LOGIN_COOKIE, devUser, parseWervtUser } from "../shared/user.js";
 import { useCookie, useRequestHeaders, useState } from "#app";
-//#region src/runtime/app/useWervtUser.ts
+// src/runtime/app/useWervtUser.ts
 /**
 * The signed-in wervt user, or `null`. Read during SSR and kept in the payload; apps without
 * SSR load it from `/_wervt/user` before they render. Public apps get one when the visitor
@@ -14,5 +14,4 @@ function useWervtUser() {
 const wervtLoginUrl = (redirect = "/") => `/_wervt/login?redirect=${encodeURIComponent(redirect)}`;
 /** Sign out of wervt (all apps), then come back to `redirect`. */
 const wervtLogoutUrl = (redirect = "/") => `/_wervt/logout?redirect=${encodeURIComponent(redirect)}`;
-//#endregion
 export { useWervtUser, wervtLoginUrl, wervtLogoutUrl };

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

@@ -1,5 +1,4 @@
 import { InjectionKey, PropType } 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: {
@@ -187,5 +186,4 @@ export declare const EmailCode: import("vue").DefineComponent<import("vue").Extr
 }, {}, {}, {}, 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
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/email/components.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, inject } from "vue";
-//#region src/runtime/email/components.ts
+// src/runtime/email/components.ts
 /** The template's subject, handed to renderEmail() while rendering. */
 const SUBJECT_KEY = Symbol("wervt-email-subject");
 const emailTheme = {
@@ -598,5 +598,4 @@ function table(attrs, children) {
 		}
 	}, children);
 }
-//#endregion
 export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, SUBJECT_KEY, WervtEmail, emailTheme };

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,73 @@
+/**
+ * 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>;

package/dist/runtime/email/invite.js

@@ -0,0 +1,59 @@
+import { EmailButton, EmailHeading, EmailMuted, EmailText, WervtEmail } from "./components.js";
+import { defineComponent, h } from "vue";
+// src/runtime/email/invite.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 } })`.
+*/
+const InviteEmail = defineComponent({
+	name: "InviteEmail",
+	props: {
+		/** Who invited them, by name or email. */
+		by: {
+			type: String,
+			required: true
+		},
+		/** The app they're invited to, as people know it. */
+		app: {
+			type: String,
+			required: true
+		},
+		/** Where the button goes: the app, or a link that lets them in. */
+		url: {
+			type: String,
+			required: true
+		},
+		/** What the app is, in a sentence after "<by> invited you to <app>." */
+		message: {
+			type: String,
+			default: ""
+		},
+		/** The button's label; "Open <app>" unless set. */
+		action: {
+			type: String,
+			default: ""
+		},
+		/** A hint under the button; by default, to sign in with this address. */
+		note: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props) {
+		return () => h(WervtEmail, {
+			subject: `${props.by} invited you to ${props.app}`,
+			app: props.app,
+			preview: props.message || `Join ${props.app}`,
+			reason: `You received this email because ${props.by} invited this address.`
+		}, () => [
+			h(EmailHeading, { eyebrow: "Invitation" }, () => `You're invited to ${props.app}`),
+			h(EmailText, () => [`${props.by} invited you to ${props.app}.`, props.message].filter(Boolean).join(" ")),
+			h(EmailButton, {
+				href: props.url,
+				color: "neutral"
+			}, () => props.action || `Open ${props.app}`),
+			h(EmailMuted, () => props.note || "Sign in with this email address to get in.")
+		]);
+	}
+});
+export { InviteEmail };