@wervt/nuxt 0.2.15 → 0.3.0

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/index.d.ts

@@ -4,9 +4,11 @@ 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 { seedTable } from "./seed.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 { Tool, ToolRoute, defineTool, defineToolRoute } 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 ToolRoute, type WervtUser, createEvlogError, defineTask, defineTool, defineToolRoute, log, proxyShape, renderEmail, seedTable, sendMail, useDb, useLogger, useSafeValidatedBody, useSafeValidatedParams, useSafeValidatedQuery, useValidatedBody, useValidatedParams, useValidatedQuery, useWervtUser, vh };