@wervt/nuxt 0.2.15 → 0.2.16

package/dist/module.js

@@ -1,5 +1,6 @@
 import { resolveAppName, setupDev } from "./dev.js";
-import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, addTypeTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, useLogger } from "nuxt/kit";
+import { findShapeRoutes, shapeRoutesTypes } from "./shapes.js";
+import { addImports, addPlugin, addServerHandler, addServerPlugin, addServerTemplate, addTypeTemplate, createResolver, defineNuxtModule, getNuxtVersion, hasNuxtModule, installModule, updateTemplates, useLogger } from "nuxt/kit";
 import { existsSync } from "node:fs";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
 import { builtinModules, createRequire } from "node:module";
@@ -298,6 +299,15 @@ var module_default = defineNuxtModule({
 				mode: "client"
 			});
 		}
+		const shapesDir = join(nuxt.options.serverDir, "api/shapes");
+		const shapeTypes = addTypeTemplate({
+			filename: "types/wervt-shapes.d.ts",
+			getContents: async () => shapeRoutesTypes(await findShapeRoutes(shapesDir), join(nuxt.options.buildDir, "types"), resolver.resolve("./runtime/shared/shape"))
+		});
+		if (nuxt.options.dev) nuxt.hook("builder:watch", async (event, path) => {
+			const file = relative(shapesDir, resolve(nuxt.options.srcDir, path));
+			if ((event === "add" || event === "unlink") && !file.startsWith("..")) await updateTemplates({ filter: (template) => template.filename === shapeTypes.filename });
+		});
 		nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
 		addImports([
 			{

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

@@ -1,26 +1,34 @@
 import { Row } from "@electric-sql/client";
+import { Ref, ShallowRef } from "vue";
 //#region src/runtime/app/useShape.d.ts
+declare global {
+  /**
+   * Shape routes and their rows, generated from `server/api/shapes/` (`.nuxt/types/wervt-shapes.d.ts`).
+   */
+  interface WervtShapeRoutes {}
+}
 export interface UseShapeOptions {
   /** Payload key. Defaults to the path. */
   key?: string;
   /** Keep the shape live on the client. Defaults to true. */
   live?: boolean;
 }
+type ShapeResult<T> = Promise<ShapeRefs<T>> & ShapeRefs<T>;
+interface ShapeRefs<T> {
+  data: ShallowRef<T[]>;
+  error: Ref<unknown>;
+  isLive: Ref<boolean>;
+}
 /**
  * Live rows of an Electric shape served by one of the app's shape routes
  * (see `proxyShape`). The snapshot is loaded during SSR and sent in the payload;
  * the client resumes the stream from the snapshot's offset, so rows are not
- * fetched twice.
+ * fetched twice. Timestamps arrive as Dates, like Drizzle reads them.
+ *
+ * The row type comes from the route when it passes a Drizzle table to `proxyShape`.
  *
- * @example const { data: todos } = await useShape<Todo>('/api/shapes/todos')
+ * @example const { data: todos } = await useShape('/api/shapes/todos')
  */
-export declare function useShape<T extends Row<unknown>>(path: string, options?: UseShapeOptions): Promise<{
-  data: import("vue").ShallowRef<T[], T[]>;
-  error: import("vue").Ref<unknown, unknown>;
-  isLive: import("vue").Ref<boolean, boolean>;
-}> & {
-  data: import("vue").ShallowRef<T[], T[]>;
-  error: import("vue").Ref<unknown, unknown>;
-  isLive: import("vue").Ref<boolean, boolean>;
-};
+export declare function useShape<P extends keyof WervtShapeRoutes>(path: P, options?: UseShapeOptions): ShapeResult<WervtShapeRoutes[P]>;
+export declare function useShape<T extends Row<unknown>>(path: string, options?: UseShapeOptions): ShapeResult<T>;
 //#endregion

package/dist/runtime/app/useShape.js

@@ -1,15 +1,8 @@
+import { shapeParser } from "../shared/shape.js";
 import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
 import { getCurrentScope, onScopeDispose, ref, shallowRef } from "vue";
 import { onNuxtReady, useAsyncData, useRequestEvent, useRequestFetch } from "#app";
 //#region src/runtime/app/useShape.ts
-/**
-* Live rows of an Electric shape served by one of the app's shape routes
-* (see `proxyShape`). The snapshot is loaded during SSR and sent in the payload;
-* the client resumes the stream from the snapshot's offset, so rows are not
-* fetched twice.
-*
-* @example const { data: todos } = await useShape<Todo>('/api/shapes/todos')
-*/
 function useShape(path, options = {}) {
 	const fetchClient = import.meta.server ? inProcessFetch() : void 0;
 	const asyncData = useAsyncData(options.key ?? `wervt-shape:${path}`, () => loadSnapshot(path, fetchClient));
@@ -40,6 +33,7 @@ function useShape(path, options = {}) {
 				url: absolute(path),
 				offset: snapshot?.offset,
 				handle: snapshot?.handle,
+				parser: shapeParser,
 				signal: controller.signal,
 				onError: (e) => {
 					error.value = e;
@@ -64,6 +58,7 @@ async function loadSnapshot(path, fetchClient) {
 		url: absolute(path),
 		subscribe: false,
 		fetchClient,
+		parser: shapeParser,
 		onError: (e) => fail(e)
 	});
 	await new Promise((resolve, reject) => {

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

@@ -1,4 +1,4 @@
-import { InjectionKey } from "vue";
+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>;
@@ -6,19 +6,31 @@ export declare const emailTheme: {
   page: string;
   card: string;
   border: string;
+  rule: string;
   text: string;
   highlighted: string;
   muted: string;
   dimmed: string;
+  accent: string;
+  accentSoft: string;
+  accentBorder: string;
+  band: string;
+  bandText: string;
+  bandDimmed: string;
   button: string;
   buttonText: string;
   codeBackground: string;
   radius: string;
   font: string;
   mono: string;
+  /** Where the logo images live. PNG, because Gmail and Outlook don't show SVG. */
+  assets: string;
+  site: string;
+  docs: string;
 };
 /**
- * The whole email: document, preheader, card and footer. Put it at the root of every template.
+ * The whole email: document, preheader, header with the logo, body and footer. Put it at the
+ * root of every template.
  *
  * ```vue
  * <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
@@ -30,7 +42,7 @@ export declare const WervtEmail: import("vue").DefineComponent<import("vue").Ext
     type: StringConstructor;
     required: true;
   };
-  /** Shown above the card and in the footer, e.g. the app's name. */
+  /** The app that sends the mail, shown in the header and the footer. */
   app: {
     type: StringConstructor;
     default: string;
@@ -40,11 +52,16 @@ export declare const WervtEmail: import("vue").DefineComponent<import("vue").Ext
     type: StringConstructor;
     default: string;
   };
-  /** Replaces the footer line ("Sent by <app> on wervt."). */
+  /** Replaces the footer's "Sent by <app> via wervt" line. */
   footer: {
     type: StringConstructor;
     default: string;
   };
+  /** Why the recipient got this mail, shown small in the footer. */
+  reason: {
+    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<{
@@ -53,7 +70,7 @@ export declare const WervtEmail: import("vue").DefineComponent<import("vue").Ext
     type: StringConstructor;
     required: true;
   };
-  /** Shown above the card and in the footer, e.g. the app's name. */
+  /** The app that sends the mail, shown in the header and the footer. */
   app: {
     type: StringConstructor;
     default: string;
@@ -63,19 +80,39 @@ export declare const WervtEmail: import("vue").DefineComponent<import("vue").Ext
     type: StringConstructor;
     default: string;
   };
-  /** Replaces the footer line ("Sent by <app> on wervt."). */
+  /** Replaces the footer's "Sent by <app> via wervt" line. */
   footer: {
     type: StringConstructor;
     default: string;
   };
+  /** Why the recipient got this mail, shown small in the footer. */
+  reason: {
+    type: StringConstructor;
+    default: string;
+  };
 }>> & Readonly<{}>, {
   app: string;
   preview: string;
   footer: string;
+  reason: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export declare const EmailHeading: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare const EmailHeading: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** A short label above the heading, in the landing page's mono eyebrow style. */
+  eyebrow: {
+    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<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}> | null)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** A short label above the heading, in the landing page's mono eyebrow style. */
+  eyebrow: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  eyebrow: string;
+}, {}, {}, {}, 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>;
@@ -102,6 +139,11 @@ export declare const EmailButton: import("vue").DefineComponent<import("vue").Ex
     type: StringConstructor;
     required: true;
   };
+  /** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+  color: {
+    type: PropType<'primary' | 'neutral'>;
+    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<{
@@ -109,13 +151,25 @@ export declare const EmailButton: import("vue").DefineComponent<import("vue").Ex
     type: StringConstructor;
     required: true;
   };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  /** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+  color: {
+    type: PropType<'primary' | 'neutral'>;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  color: "neutral" | "primary";
+}, {}, {}, {}, 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;
   };
+  /** A small line under the code, e.g. when it expires. */
+  caption: {
+    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<{
@@ -123,7 +177,14 @@ export declare const EmailCode: import("vue").DefineComponent<import("vue").Extr
     type: StringConstructor;
     required: true;
   };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  /** A small line under the code, e.g. when it expires. */
+  caption: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  caption: string;
+}, {}, {}, {}, 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>;

package/dist/runtime/email/components.js

@@ -5,21 +5,58 @@ const SUBJECT_KEY = Symbol("wervt-email-subject");
 const emailTheme = {
 	page: "#fafafa",
 	card: "#ffffff",
-	border: "#ebebeb",
-	text: "#171717",
+	border: "#e5e5e5",
+	rule: "#d4d4d4",
+	text: "#262626",
 	highlighted: "#0a0a0a",
 	muted: "#666666",
 	dimmed: "#8f8f8f",
-	button: "#171717",
+	accent: "#2f5bff",
+	accentSoft: "#eef2ff",
+	accentBorder: "#d6defe",
+	band: "#0a0b0f",
+	bandText: "#d4d7de",
+	bandDimmed: "#6b7080",
+	button: "#2f5bff",
 	buttonText: "#ffffff",
-	codeBackground: "#f2f2f2",
-	radius: "6px",
+	codeBackground: "#f6f8ff",
+	radius: "8px",
 	font: "Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-	mono: "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+	mono: "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	/** Where the logo images live. PNG, because Gmail and Outlook don't show SVG. */
+	assets: "https://wervt.app/email",
+	site: "https://wervt.app",
+	docs: "https://wervt.app/getting-started/introduction"
 };
 const t = emailTheme;
+const darkStyles = `
+:root { color-scheme: light dark; supported-color-schemes: light dark; }
+@media (prefers-color-scheme: dark) {
+  .wv-page { background: #0a0a0a !important; }
+  .wv-card { background: #111113 !important; }
+  .wv-foot { background: #0a0a0a !important; }
+  .wv-frame { border-color: #262626 !important; }
+  .wv-line { background: #262626 !important; }
+  .wv-mark { background: #6b6b6b !important; }
+  .wv-sep { color: #404040 !important; }
+  .wv-text { color: #e5e5e5 !important; }
+  .wv-strong { color: #fafafa !important; }
+  .wv-muted { color: #a1a1a1 !important; }
+  .wv-accent { color: #7c9bff !important; }
+  .wv-code { background: #151a2e !important; border-color: #26304f !important; color: #fafafa !important; }
+}
+[data-ogsc] .wv-text { color: #e5e5e5 !important; }
+[data-ogsc] .wv-strong { color: #fafafa !important; }
+[data-ogsc] .wv-muted { color: #a1a1a1 !important; }
+@media only screen and (max-width: 480px) {
+  .wv-pad { padding-left: 24px !important; padding-right: 24px !important; }
+  .wv-hero { font-size: 22px !important; line-height: 30px !important; }
+  .wv-codetext { font-size: 28px !important; letter-spacing: 6px !important; }
+}
+`;
 /**
-* The whole email: document, preheader, card and footer. Put it at the root of every template.
+* The whole email: document, preheader, header with the logo, body and footer. Put it at the
+* root of every template.
 *
 * ```vue
 * <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
@@ -33,7 +70,7 @@ const WervtEmail = defineComponent({
 			type: String,
 			required: true
 		},
-		/** Shown above the card and in the footer, e.g. the app's name. */
+		/** The app that sends the mail, shown in the header and the footer. */
 		app: {
 			type: String,
 			default: "wervt"
@@ -43,10 +80,15 @@ const WervtEmail = defineComponent({
 			type: String,
 			default: ""
 		},
-		/** Replaces the footer line ("Sent by <app> on wervt."). */
+		/** Replaces the footer's "Sent by <app> via wervt" line. */
 		footer: {
 			type: String,
 			default: ""
+		},
+		/** Why the recipient got this mail, shown small in the footer. */
+		reason: {
+			type: String,
+			default: ""
 		}
 	},
 	setup(props, { slots }) {
@@ -59,22 +101,26 @@ const WervtEmail = defineComponent({
 			}),
 			h("meta", {
 				name: "color-scheme",
-				content: "light"
+				content: "light dark"
 			}),
 			h("meta", {
 				name: "supported-color-schemes",
-				content: "light"
+				content: "light dark"
 			}),
 			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", {
+				href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"
+			}),
+			h("style", { innerHTML: darkStyles })
+		]), h("body", {
+			class: "wv-page",
+			style: {
+				margin: 0,
+				padding: 0,
+				background: t.page
+			}
+		}, [props.preview ? h("div", {
 			class: "wervt-preheader",
 			style: {
 				display: "none",
@@ -88,75 +134,333 @@ const WervtEmail = defineComponent({
 			}
 		}, props.preview) : null, table({
 			width: "100%",
+			class: "wv-page",
 			style: { background: t.page }
 		}, [h("tr", [h("td", {
 			align: "center",
-			style: { padding: "40px 16px" }
+			style: { padding: "0 12px" }
 		}, table({
 			width: "100%",
-			style: { maxWidth: "560px" }
+			style: { maxWidth: "600px" }
 		}, [
-			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: {
+			stub(),
+			rule(true, none, {
+				color: t.band,
+				image: `url('${t.assets}/header.png') right top / 600px 100px no-repeat`
+			}),
+			framed(header(props.app), { padding: 0 }),
+			framed(accentLine(), { padding: 0 }),
+			framed(slots.default?.(), {
+				class: "wv-card wv-pad",
 				background: t.card,
-				border: `1px solid ${t.border}`,
-				borderRadius: t.radius,
-				padding: "32px",
+				padding: "36px 40px 20px",
 				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.`))])
+			}),
+			rule(true, {
+				color: t.card,
+				class: "wv-card"
+			}, {
+				color: t.page,
+				class: "wv-foot"
+			}),
+			framed(footer(props), {
+				class: "wv-foot wv-pad",
+				background: t.page,
+				padding: "24px 40px 28px"
+			}),
+			rule(false, {
+				color: t.page,
+				class: "wv-foot"
+			}, none),
+			stub()
 		]))])])])]);
 	}
 });
-const EmailHeading = defineComponent({
-	name: "EmailHeading",
-	setup(_, { slots }) {
-		return () => h("h1", { style: {
-			margin: "0 0 16px",
+/** The dark band on top: the lockup over the dot grid, the sending app on the right. */
+function header(app) {
+	return table({
+		width: "100%",
+		bgcolor: t.band,
+		background: `${t.assets}/header.png`,
+		style: { background: `${t.band} url('${t.assets}/header.png') right -4px / 600px 100px no-repeat` }
+	}, [h("tr", [h("td", {
+		class: "wv-pad wervt-skip-text",
+		style: {
+			padding: "30px 40px",
+			verticalAlign: "middle"
+		}
+	}, h("a", {
+		href: t.site,
+		style: {
+			textDecoration: "none",
+			color: "#fafafa"
+		}
+	}, h("img", {
+		src: `${t.assets}/lockup-on-dark.png`,
+		width: 116,
+		height: 32,
+		alt: "wervt",
+		style: {
+			display: "block",
+			width: "116px",
+			height: "32px",
+			border: 0,
+			outline: "none",
 			fontFamily: t.font,
-			fontSize: "20px",
-			lineHeight: "28px",
+			fontSize: "24px",
+			lineHeight: "32px",
 			fontWeight: 600,
-			color: t.highlighted
-		} }, slots.default?.());
+			letterSpacing: "-0.5px",
+			color: "#fafafa"
+		}
+	}))), app === "wervt" ? null : h("td", {
+		class: "wv-pad wervt-skip-text",
+		align: "right",
+		style: {
+			padding: "30px 40px",
+			verticalAlign: "middle"
+		}
+	}, table({ align: "right" }, [h("tr", [h("td", { style: {
+		border: "1px solid #2a2e38",
+		borderRadius: "999px",
+		background: "#12141b",
+		padding: "5px 12px",
+		fontFamily: t.mono,
+		fontSize: "12px",
+		lineHeight: "16px",
+		color: t.bandText,
+		whiteSpace: "nowrap"
+	} }, [h("span", { style: { color: "#5885ff" } }, "●"), `\u00A0\u00A0${app}`])])]))])]);
+}
+/** The landing page's headline gradient, as a hairline under the header. */
+function accentLine() {
+	return table({ width: "100%" }, [h("tr", [h("td", {
+		height: 2,
+		bgcolor: t.accent,
+		style: {
+			height: "2px",
+			fontSize: 0,
+			lineHeight: 0,
+			background: `${t.accent} linear-gradient(90deg, #60a5fa, ${t.accent} 45%, #a78bfa)`
+		}
+	})])]);
+}
+function footer(props) {
+	const sentBy = props.footer || (props.app === "wervt" ? "Sent by wervt" : `Sent by ${props.app} via wervt`);
+	const small = {
+		fontFamily: t.font,
+		fontSize: "12px",
+		lineHeight: "18px"
+	};
+	const link = {
+		color: t.muted,
+		textDecoration: "none"
+	};
+	return table({ width: "100%" }, [h("tr", [h("td", {
+		width: 40,
+		style: {
+			width: "40px",
+			verticalAlign: "top",
+			paddingTop: "2px"
+		}
+	}, h("img", {
+		src: `${t.assets}/mark-tile.png`,
+		width: 28,
+		height: 28,
+		alt: "",
+		style: {
+			display: "block",
+			width: "28px",
+			height: "28px",
+			border: 0,
+			borderRadius: "7px"
+		}
+	})), h("td", { style: { verticalAlign: "top" } }, [
+		h("p", {
+			class: "wv-strong",
+			style: {
+				...small,
+				margin: 0,
+				fontSize: "13px",
+				fontWeight: 500,
+				color: t.highlighted
+			}
+		}, sentBy),
+		props.reason ? h("p", {
+			class: "wv-muted",
+			style: {
+				...small,
+				margin: "4px 0 0",
+				color: t.muted
+			}
+		}, props.reason) : null,
+		h("p", {
+			class: "wv-muted",
+			style: {
+				...small,
+				margin: "10px 0 0",
+				fontFamily: t.mono,
+				fontSize: "11px",
+				color: t.dimmed
+			}
+		}, [
+			h("a", {
+				href: t.site,
+				class: "wv-muted",
+				style: link
+			}, "wervt.app"),
+			separator(),
+			h("a", {
+				href: t.docs,
+				class: "wv-muted",
+				style: link
+			}, "Docs")
+		])
+	])])]);
+}
+function separator() {
+	return h("span", {
+		class: "wv-sep",
+		style: { color: t.rule }
+	}, "\xA0\xA0/\xA0\xA0");
+}
+/** A row inside the frame: the hairlines run down both sides, like the landing page's sections. */
+function framed(children, style) {
+	const { class: className, ...rest } = style;
+	return h("tr", [h("td", { style: { padding: "0 4px" } }, table({ width: "100%" }, [h("tr", [h("td", {
+		class: ["wv-frame", className],
+		style: {
+			borderLeft: `1px solid ${t.border}`,
+			borderRight: `1px solid ${t.border}`,
+			...rest
+		}
+	}, children)])]))]);
+}
+/** The frame's sides fading out above and below, so it reads as part of a larger sheet. */
+function stub() {
+	return framed(h("div", { style: {
+		height: "28px",
+		lineHeight: "28px",
+		fontSize: 0
+	} }, "\xA0"), { padding: 0 });
+}
+const none = { color: "transparent" };
+/**
+* A horizontal rule across the frame, drawn as a 9px-high grid so the "+" marks can sit where it
+* crosses the sides. `above` and `below` paint the frame's inside around the line, so the
+* sections it separates start right at the line instead of 4px off.
+*/
+function rule(crosshairs, above, below) {
+	const mark = {
+		color: t.dimmed,
+		class: "wv-mark"
+	};
+	const line = {
+		color: t.border,
+		class: "wv-line"
+	};
+	const side = crosshairs ? mark : line;
+	const cell = (fill, width, height, colspan) => h("td", {
+		width,
+		height,
+		colspan,
+		bgcolor: fill === none ? void 0 : fill.color,
+		class: fill.class,
+		style: {
+			width: width === void 0 ? void 0 : `${width}px`,
+			height: `${height}px`,
+			fontSize: 0,
+			lineHeight: 0,
+			background: fill.image ? `${fill.color} ${fill.image}` : fill.color
+		}
+	});
+	const row = (fill, height) => h("tr", [
+		cell(none, 4, height),
+		cell(side, 1, height),
+		cell(fill, void 0, height, 3),
+		cell(side, 1, height),
+		cell(none, 4, height)
+	]);
+	const arm = crosshairs ? mark : line;
+	const crossing = h("tr", [
+		cell(crosshairs ? mark : none, 4, 1),
+		cell(side, 1, 1),
+		cell(arm, 4, 1),
+		cell(line, void 0, 1),
+		cell(arm, 4, 1),
+		cell(side, 1, 1),
+		cell(crosshairs ? mark : none, 4, 1)
+	]);
+	return h("tr", [h("td", table({ width: "100%" }, [
+		row(above, 4),
+		crossing,
+		row(below, 4)
+	]))]);
+}
+const EmailHeading = defineComponent({
+	name: "EmailHeading",
+	props: { 
+	/** A short label above the heading, in the landing page's mono eyebrow style. */
+eyebrow: {
+		type: String,
+		default: ""
+	} },
+	setup(props, { slots }) {
+		return () => [props.eyebrow ? h("p", {
+			class: "wv-accent",
+			style: {
+				margin: "0 0 10px",
+				fontFamily: t.mono,
+				fontSize: "12px",
+				lineHeight: "16px",
+				letterSpacing: "0.5px",
+				textTransform: "uppercase",
+				color: t.accent
+			}
+		}, props.eyebrow) : null, h("h1", {
+			class: "wv-strong wv-hero",
+			style: {
+				margin: "0 0 16px",
+				fontFamily: t.font,
+				fontSize: "26px",
+				lineHeight: "34px",
+				fontWeight: 600,
+				letterSpacing: "-0.6px",
+				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?.());
+		return () => h("p", {
+			class: "wv-text",
+			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?.());
+		return () => h("p", {
+			class: "wv-muted",
+			style: {
+				margin: "0 0 16px",
+				fontFamily: t.font,
+				fontSize: "13px",
+				lineHeight: "20px",
+				color: t.muted
+			}
+		}, slots.default?.());
 	}
 });
 const EmailLink = defineComponent({
@@ -168,8 +472,9 @@ const EmailLink = defineComponent({
 	setup(props, { slots }) {
 		return () => h("a", {
 			href: props.href,
+			class: "wv-accent",
 			style: {
-				color: t.highlighted,
+				color: t.accent,
 				textDecoration: "underline"
 			}
 		}, slots.default?.() ?? props.href);
@@ -178,64 +483,106 @@ const EmailLink = defineComponent({
 /** 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
-	} },
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+		/** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+		color: {
+			type: String,
+			default: "primary"
+		}
+	},
 	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?.()))])]);
+		return () => {
+			const background = props.color === "neutral" ? "#171717" : t.button;
+			return table({ style: { margin: "8px 0 24px" } }, [h("tr", [h("td", {
+				bgcolor: background,
+				style: {
+					background,
+					borderRadius: t.radius
+				}
+			}, h("a", {
+				href: props.href,
+				style: {
+					display: "inline-block",
+					padding: "12px 22px",
+					border: `1px solid ${background}`,
+					fontFamily: t.font,
+					fontSize: "14px",
+					fontWeight: 500,
+					lineHeight: "20px",
+					color: t.buttonText,
+					textDecoration: "none",
+					borderRadius: t.radius
+				}
+			}, [slots.default?.(), h("span", { class: "wervt-skip-text" }, "\xA0\xA0→")]))])]);
+		};
 	}
 });
 /** A one-time code, large and spaced so it reads (and copies) easily. */
 const EmailCode = defineComponent({
 	name: "EmailCode",
-	props: { code: {
-		type: String,
-		required: true
-	} },
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		/** A small line under the code, e.g. when it expires. */
+		caption: {
+			type: String,
+			default: ""
+		}
+	},
 	setup(props) {
 		return () => table({
 			width: "100%",
 			style: { margin: "8px 0 24px" }
 		}, [h("tr", [h("td", {
 			align: "center",
+			bgcolor: t.codeBackground,
+			class: "wv-code",
 			style: {
 				background: t.codeBackground,
-				borderRadius: t.radius,
-				padding: "16px",
+				border: `1px solid ${t.accentBorder}`,
+				borderRadius: "10px",
+				padding: props.caption ? "22px 16px 16px" : "22px 16px"
+			}
+		}, [h("div", {
+			class: "wv-strong wv-codetext",
+			style: {
 				fontFamily: t.mono,
-				fontSize: "30px",
+				fontSize: "36px",
+				lineHeight: "44px",
 				fontWeight: 600,
-				letterSpacing: "8px",
+				letterSpacing: "10px",
+				paddingLeft: "10px",
 				color: t.highlighted
 			}
-		}, props.code)])]);
+		}, props.code), props.caption ? h("div", {
+			class: "wv-muted",
+			style: {
+				marginTop: "8px",
+				fontFamily: t.mono,
+				fontSize: "12px",
+				lineHeight: "16px",
+				color: t.muted
+			}
+		}, props.caption) : null])])]);
 	}
 });
 const EmailDivider = defineComponent({
 	name: "EmailDivider",
 	setup() {
-		return () => h("hr", { style: {
-			border: "none",
-			borderTop: `1px solid ${t.border}`,
-			margin: "24px 0"
-		} });
+		return () => h("hr", {
+			class: "wv-frame",
+			style: {
+				border: "none",
+				borderTop: `1px solid ${t.border}`,
+				margin: "24px 0"
+			}
+		});
 	}
 });
 function table(attrs, children) {

package/dist/runtime/email/render.js

@@ -29,6 +29,10 @@ function toText(html) {
 				selector: ".wervt-preheader",
 				format: "skip"
 			},
+			{
+				selector: ".wervt-skip-text",
+				format: "skip"
+			},
 			{
 				selector: "title",
 				format: "skip"

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

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

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

@@ -4,9 +4,10 @@ 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 { ShapeResponse } from "../shared/shape.js";
+import { ShapeOptions, ShapeRow, 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 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 };
+export { type EmailProps, type McpTokenContext, type RenderedEmail, type SafeResult, type SendMailOptions, type ShapeOptions, type ShapeResponse, type ShapeRow, 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/shape.d.ts

@@ -1,19 +1,26 @@
+import { ShapeResponse } from "../shared/shape.js";
 import { RequestEvent } from "nuxt/server";
+import { InferSelectModel, Table } from "drizzle-orm";
 //#region src/runtime/server/shape.d.ts
-export interface ShapeOptions {
-  /** Table name without schema. */
-  table: string;
+export interface ShapeOptions<T extends Table | string = Table | string> {
+  /**
+   * The Drizzle table (`todos` from `server/db/schema`), or its name without schema. With the
+   * table, `useShape` knows the row type from the route.
+   */
+  table: T;
   /** SQL where clause. Use `$1`, `$2`, … placeholders with `params` for values. */
   where?: string;
   /** Values for the `$n` placeholders in `where`. */
   params?: (string | number | boolean)[];
-  columns?: string[];
+  columns?: (T extends Table ? keyof InferSelectModel<T> & string : string)[];
 }
+/** The rows a shape of `T` streams: the table's select model, or untyped for a table name. */
+export type ShapeRow<T extends Table | string> = T extends Table ? InferSelectModel<T> : Record<string, unknown>;
 /**
  * Serves an Electric shape from a route. Do auth checks before calling it.
  *
  * In production the request goes through the wervt runtime gateway, which pins the
  * table to this app's schema. In dev it goes to Electric directly (ELECTRIC_URL).
  */
-export declare function proxyShape(event: RequestEvent, { table, where, params, columns }: ShapeOptions): Promise<Response>;
+export declare function proxyShape<T extends Table | string>(event: RequestEvent, { table: tableOrName, where, params, columns }: ShapeOptions<T>): Promise<ShapeResponse<ShapeRow<T>>>;
 //#endregion

package/dist/runtime/server/shape.js

@@ -1,3 +1,4 @@
+import { getTableName, isTable } from "drizzle-orm";
 //#region src/runtime/server/shape.ts
 const CLIENT_PARAMS = [
 	"offset",
@@ -14,7 +15,8 @@ const CLIENT_PARAMS = [
 * In production the request goes through the wervt runtime gateway, which pins the
 * table to this app's schema. In dev it goes to Electric directly (ELECTRIC_URL).
 */
-async function proxyShape(event, { table, where, params, columns }) {
+async function proxyShape(event, { table: tableOrName, where, params, columns }) {
+	const table = isTable(tableOrName) ? getTableName(tableOrName) : tableOrName;
 	const runtime = process.env.WERVT_RUNTIME_URL;
 	const url = runtime ? new URL("/_wervt/electric/v1/shape", runtime) : new URL("/v1/shape", process.env.ELECTRIC_URL ?? "http://localhost:3000");
 	const query = new URL(event.req.url).searchParams;

package/dist/runtime/shared/shape.d.ts

@@ -0,0 +1,18 @@
+//#region src/runtime/shared/shape.d.ts
+declare const shapeRow: unique symbol;
+export type ShapeResponse<Row> = Response & {
+  readonly [shapeRow]?: Row;
+};
+/** The row type of a shape route's handler, `never` if it doesn't serve a typed shape. */
+export type ShapeRowOf<Handler> = Handler extends ((...args: never[]) => infer Result) ? Awaited<Result> extends ShapeResponse<infer Row> ? Row : never : never;
+/**
+ * Postgres text of a `timestamp`/`timestamptz` as a Date, like Drizzle's default `mode: 'date'`
+ * reads it. Drizzle stores `timestamp` without time zone as UTC, so it's read as UTC too.
+ */
+export declare function parseTimestamp(value: string): Date;
+/** Electric parsers for the types Drizzle reads differently from Electric's defaults. */
+export declare const shapeParser: {
+  timestamp: typeof parseTimestamp;
+  timestamptz: typeof parseTimestamp;
+};
+//#endregion

package/dist/runtime/shared/shape.js

@@ -0,0 +1,16 @@
+//#region src/runtime/shared/shape.ts
+/**
+* Postgres text of a `timestamp`/`timestamptz` as a Date, like Drizzle's default `mode: 'date'`
+* reads it. Drizzle stores `timestamp` without time zone as UTC, so it's read as UTC too.
+*/
+function parseTimestamp(value) {
+	const iso = value.replace(" ", "T").replace(/([+-]\d{2})$/, "$1:00");
+	return new Date(/(Z|[+-]\d{2}:\d{2})$/.test(iso) ? iso : `${iso}Z`);
+}
+/** Electric parsers for the types Drizzle reads differently from Electric's defaults. */
+const shapeParser = {
+	timestamp: parseTimestamp,
+	timestamptz: parseTimestamp
+};
+//#endregion
+export { parseTimestamp, shapeParser };

package/dist/shapes.js

@@ -0,0 +1,67 @@
+import { readdir } from "node:fs/promises";
+import { extname, join, relative, sep } from "node:path";
+//#region src/shapes.ts
+const ROUTE_EXTENSIONS = /* @__PURE__ */ new Set([
+	".ts",
+	".mts",
+	".js",
+	".mjs"
+]);
+/** The GET routes among `files` (relative to `server/api/shapes`), as Nitro would serve them. */
+function shapeRoutes(files, base = "/api/shapes") {
+	const routes = [];
+	for (const file of files.toSorted((a, b) => a.localeCompare(b))) {
+		const ext = extname(file);
+		if (!ROUTE_EXTENSIONS.has(ext) || file.endsWith(`.d${ext}`)) continue;
+		const parts = file.slice(0, -ext.length).split(sep).join("/").split("/");
+		const last = parts.pop();
+		const method = last.match(/\.(get|post|put|patch|delete|head|options)$/)?.[1];
+		if (method && method !== "get") continue;
+		const name = method ? last.slice(0, -method.length - 1) : last;
+		if (name !== "index") parts.push(name);
+		let dynamic = false;
+		const segments = parts.map((segment) => {
+			if (!/^\[.+\]$/.test(segment)) return segment;
+			dynamic = true;
+			return "${string}";
+		});
+		routes.push({
+			route: [base, ...segments].join("/"),
+			dynamic,
+			file
+		});
+	}
+	return routes;
+}
+async function findShapeRoutes(dir) {
+	return shapeRoutes(await readdir(dir, { recursive: true }).catch(() => [])).map((entry) => ({
+		...entry,
+		file: join(dir, entry.file)
+	}));
+}
+/** The `.d.ts` declaring `WervtShapeRoutes`; paths are made relative to `typesDir`. */
+function shapeRoutesTypes(routes, typesDir, shapeTypes) {
+	const importPath = (file) => {
+		const path = relative(typesDir, file).split(sep).join("/");
+		const ext = extname(path);
+		const withoutExt = ext ? path.slice(0, -ext.length) : path;
+		return withoutExt.startsWith(".") ? withoutExt : `./${withoutExt}`;
+	};
+	const entries = routes.map(({ route, dynamic, file }) => {
+		return `    ${dynamic ? `[path: \`${route}\`]` : JSON.stringify(route)}: ShapeRowOf<typeof import(${JSON.stringify(importPath(file))}).default>`;
+	});
+	return [
+		`import type { ShapeRowOf } from ${JSON.stringify(importPath(shapeTypes))}`,
+		"",
+		"declare global {",
+		"  interface WervtShapeRoutes {",
+		...entries,
+		"  }",
+		"}",
+		"",
+		"export {}",
+		""
+	].join("\n");
+}
+//#endregion
+export { findShapeRoutes, shapeRoutes, shapeRoutesTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wervt/nuxt",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Nuxt module for apps hosted on wervt: database, live data, MCP and runtime setup.",
   "keywords": [
     "drizzle",