@wervt/nuxt 0.3.3 → 0.3.5

package/dist/dev.d.ts

@@ -1,6 +1,5 @@
 import { WervtRole } from "./runtime/shared/user.js";
 import "nuxt/schema";
-//#region src/dev.d.ts
 export interface DevOptions {
   /** Superuser URL of the local wervt Postgres. */
   adminUrl?: string;
@@ -29,5 +28,4 @@ export interface DevOptions {
     accounts?: Record<string, string>;
     role?: WervtRole;
   };
-}
-//#endregion
+}

package/dist/dev.js

@@ -1,11 +1,11 @@
 import { createStorage } from "./storage.js";
-import { appDatabaseUrl, dbRole, provisionDatabase, storageCredentials } from "./provision.js";
+import { appDatabaseUrl, dbRole, migrateAs, provisionDatabase, storageCredentials } from "./provision.js";
 import { SEED_TASK, runDevSeed } from "./seed.js";
 import { useLogger } from "nuxt/kit";
 import { existsSync, watch } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
-//#region src/dev.ts
+// src/dev.ts
 const DEFAULTS = {
 	adminUrl: "postgres://postgres:postgres@localhost:5432/wervt",
 	dbSecret: "dev-secret",
@@ -22,6 +22,7 @@ const logger = useLogger("wervt");
 * points the dev server at the app's database and Electric.
 */
 async function setupDev(nuxt, app, options, features = {}) {
+	forgetOwnEnv(nuxt.options.rootDir);
 	const config = {
 		adminUrl: process.env.WERVT_PG_ADMIN_URL ?? options.adminUrl ?? DEFAULTS.adminUrl,
 		dbSecret: process.env.WERVT_DB_SECRET ?? options.dbSecret ?? DEFAULTS.dbSecret,
@@ -43,13 +44,18 @@ async function setupDev(nuxt, app, options, features = {}) {
 		secret: config.dbSecret,
 		migrationsFolder
 	};
+	const given = process.env.DATABASE_URL && process.env.WERVT_DB_SCHEMA ? {
+		url: process.env.DATABASE_URL,
+		schema: process.env.WERVT_DB_SCHEMA
+	} : void 0;
+	const database = given?.schema ?? dbRole(app);
 	let serverUrl;
 	let seedPending = false;
 	const seed = async () => {
 		if (!seedPending || !serverUrl) return;
 		seedPending = false;
 		try {
-			if ((await runDevSeed(serverUrl)).status === "seeded") logger.success(`Seeded \`${dbRole(app)}\` (${SEED_TASK})`);
+			if ((await runDevSeed(serverUrl)).status === "seeded") logger.success(`Seeded \`${database}\` (${SEED_TASK})`);
 		} catch (e) {
 			logger.warn(`\`${SEED_TASK}\` failed:`, e instanceof Error ? e.message : e);
 		}
@@ -60,21 +66,29 @@ async function setupDev(nuxt, app, options, features = {}) {
 	});
 	const migrate = async () => {
 		try {
-			const { fresh } = await provisionDatabase(provision);
-			logger.success(`Database \`${dbRole(app)}\` is up to date`);
+			const { fresh } = given ? await migrateAs({
+				...given,
+				migrationsFolder
+			}) : await provisionDatabase(provision);
+			logger.success(`Database \`${database}\` is up to date`);
 			if (fresh && options.seed !== false) {
 				seedPending = true;
 				seed();
 			}
 		} catch (e) {
-			logger.warn(`Could not migrate \`${dbRole(app)}\`. Is the wervt stack running (docker compose up -d)?`, e instanceof Error ? e.message : e);
+			logger.warn(given ? `Could not migrate \`${database}\`.` : `Could not migrate \`${database}\`. Is the wervt stack running (docker compose up -d)?`, e instanceof Error ? e.message : e);
 		}
 	};
 	await migrate();
-	process.env.DATABASE_URL ??= await appDatabaseUrl(provision);
-	process.env.WERVT_DB_SCHEMA ??= dbRole(app);
-	process.env.ELECTRIC_URL ??= config.electricUrl;
-	process.env.ELECTRIC_SECRET ??= config.electricSecret;
+	const own = {
+		DATABASE_URL: await appDatabaseUrl(provision),
+		WERVT_DB_SCHEMA: dbRole(app),
+		ELECTRIC_URL: config.electricUrl,
+		ELECTRIC_SECRET: config.electricSecret
+	};
+	const set = Object.fromEntries(Object.entries(own).filter(([key]) => process.env[key] === void 0));
+	Object.assign(process.env, set);
+	process.env[OWN_ENV] = JSON.stringify(set);
 	let timer;
 	const watcher = watch(migrationsFolder, { recursive: true }, (_event, file) => {
 		if (!file?.endsWith(".sql")) return;
@@ -86,6 +100,15 @@ async function setupDev(nuxt, app, options, features = {}) {
 	});
 	nuxt.hook("close", () => watcher.close());
 }
+const OWN_ENV = "WERVT_DEV_OWN_ENV";
+function forgetOwnEnv(rootDir) {
+	const own = process.env[OWN_ENV];
+	if (!own) return;
+	for (const [key, value] of Object.entries(JSON.parse(own))) if (process.env[key] === value) delete process.env[key];
+	delete process.env[OWN_ENV];
+	const file = join(rootDir, ".env");
+	if (existsSync(file)) process.loadEnvFile(file);
+}
 /** The app's bucket in the local Garage, and WERVT_S3_* for ablage, like in production. */
 async function setupStorage(app, secret, options) {
 	const s3Url = process.env.WERVT_S3_URL ?? options.s3Url ?? DEFAULTS.s3Url;
@@ -118,5 +141,4 @@ async function resolveAppName(rootDir, name) {
 	}
 	return name.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "");
 }
-//#endregion
 export { resolveAppName, setupDev };

package/dist/env-types.js

@@ -1,4 +1,4 @@
-//#region src/env-types.ts
+// 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 {
@@ -10,5 +10,4 @@ const PROCESS_ENV_TYPES = `declare namespace NodeJS {
 }
 declare var process: NodeJS.Process
 `;
-//#endregion
 export { PROCESS_ENV_TYPES };

package/dist/icons.js

@@ -1,5 +1,5 @@
 import { dependencyNames } from "./og-image.js";
-//#region src/icons.ts
+// 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";
@@ -27,5 +27,4 @@ function iconWarning(sources, nuxtUi) {
 	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/loading.js

@@ -0,0 +1,30 @@
+import { WERVT_MARK } from "./runtime/shared/mark.js";
+// src/loading.ts
+const previewLoadingTemplate = () => `<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Einen Moment …</title>
+<style>
+  :root { color-scheme: light dark; --fg: #0a0a0b; --muted: #6b6b70; --bg: #fafaf9; --a: #2f5bff; }
+  @media (prefers-color-scheme: dark) { :root { --fg: #fafaf9; --muted: #a1a1a6; --bg: #0a0a0b; --a: #5885ff; } }
+  html, body { height: 100%; margin: 0; }
+  body { display: grid; place-content: center; justify-items: center; gap: 1rem; background: var(--bg);
+    color: var(--fg); font: 500 1rem/1.4 system-ui, -apple-system, sans-serif; text-align: center; }
+  svg { width: 3rem; height: 3rem; color: var(--fg); animation: pulse 1.6s ease-in-out infinite; }
+  p { margin: 0; color: var(--muted); }
+  @keyframes pulse { 50% { opacity: .45; transform: scale(.94); } }
+  @media (prefers-reduced-motion: reduce) { svg { animation: none; } }
+</style>
+</head>
+<body>
+${WERVT_MARK}
+<p id="m">Einen Moment, die App wird gerade aktualisiert …</p>
+<script>
+  if (!navigator.language.toLowerCase().startsWith('de'))
+    document.getElementById('m').textContent = 'One moment, the app is being updated …'
+<\/script>
+</body>
+</html>`;
+export { previewLoadingTemplate };

package/dist/module.d.ts

@@ -1,6 +1,5 @@
 import { DevOptions } from "./dev.js";
 import { PreviewOptions } from "./preview.js";
-//#region src/module.d.ts
 export interface ModuleOptions {
   /** App name on wervt. Defaults to the package.json name. */
   app?: string;
@@ -82,5 +81,4 @@ export interface TasksManifest {
   timezone?: string;
 }
 declare const _default: import("nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
-//#endregion
 export { _default as default };

package/dist/module.js

@@ -1,5 +1,6 @@
 import { SEED_TASK, unscheduleSeed } from "./seed.js";
 import { resolveAppName, setupDev } from "./dev.js";
+import { setupStudioPreview } from "./studio-preview.js";
 import { PROCESS_ENV_TYPES } from "./env-types.js";
 import { dependencyNames, ogImageDefaults, ogImageWarning } from "./og-image.js";
 import { iconDefaults, iconSources, iconWarning } from "./icons.js";
@@ -12,7 +13,7 @@ import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
 import { builtinModules, createRequire } from "node:module";
 import { dirname, extname, join, relative, resolve, sep } from "node:path";
 import evlog from "evlog/nuxt";
-//#region src/module.ts
+// src/module.ts
 const CONTENT_DATABASE = {
 	type: "postgres",
 	url: "{{DATABASE_URL}}"
@@ -275,6 +276,7 @@ var module_default = defineNuxtModule({
 		if (nuxt.options.dev && nitroMajor >= 3) {
 			if (!hasPackage(nuxt.options.rootDir, "vue")) logger.warn("`vue` is not a dependency of this app, so `nuxt dev` fails with \"module is not defined\". Run `pnpm add vue`.");
 		}
+		if (nuxt.options.dev && process.env.WERVT_PREVIEW) setupStudioPreview(nuxt);
 		if (nuxt.options.dev && !nuxt.options._prepare) {
 			const app = await resolveAppName(nuxt.options.rootDir, options.app);
 			await setupDev(nuxt, app, options.dev ?? {}, { storage: useAblage });
@@ -535,5 +537,4 @@ function exceptRuntime(pattern) {
 	if (pattern.source.startsWith("^")) return pattern;
 	return new RegExp(`^(?![\\s\\S]*[\\\\/]@wervt[\\\\/]nuxt[\\\\/]src[\\\\/]runtime[\\\\/])[\\s\\S]*?(?:${pattern.source})`, pattern.flags);
 }
-//#endregion
 export { module_default as default };

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

@@ -1,6 +1,6 @@
 import { tasks } from "#nitro/virtual/tasks";
 import { HTTPError } from "h3";
-//#region ../../node_modules/.pnpm/nitro@3.0.260903-beta/node_modules/nitro/dist/runtime/internal/task.mjs
+// ../../node_modules/.pnpm/nitro@3.0.260903-beta/node_modules/nitro/dist/runtime/internal/task.mjs
 const __runningTasks__ = {};
 async function runTask(name, { payload = {}, context = {} } = {}) {
 	if (__runningTasks__[name]) return __runningTasks__[name];
@@ -25,5 +25,4 @@ async function runTask(name, { payload = {}, context = {} } = {}) {
 		delete __runningTasks__[name];
 	}
 }
-//#endregion
 export { runTask };

package/dist/og-image.js

@@ -1,6 +1,6 @@
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
-//#region src/og-image.ts
+// 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(() => "{}"));
@@ -35,5 +35,4 @@ function ogImageWarning(dependencies) {
 	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/preview.d.ts

@@ -1,4 +1,3 @@
-//#region src/preview.d.ts
 export interface PreviewOptions {
   /** Defaults to the app's `app.head.title`. */
   title?: string;
@@ -10,5 +9,4 @@ export interface PreviewOptions {
   icon?: string;
   /** Defaults to the app's `theme-color` meta tag. */
   themeColor?: string;
-}
-//#endregion
+}

package/dist/preview.js

@@ -1,4 +1,4 @@
-//#region src/preview.ts
+// src/preview.ts
 /**
 * What the runtime shows. Without `preview`, only the app's name and icon: for some private apps
 * the title alone says too much, so the rest of the head is only used once the app opts in.
@@ -35,5 +35,4 @@ function localFiles(manifest) {
 	if (!manifest) return [];
 	return [manifest.image, manifest.icon].filter((path) => !!path && path.startsWith("/") && !path.startsWith("//"));
 }
-//#endregion
 export { localFiles, previewManifest };

package/dist/provision.d.ts

@@ -1,5 +1,4 @@
 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-]+`. */
   app: string;
@@ -49,6 +48,18 @@ export declare function appDatabaseUrl({ app, adminUrl, secret }: ProvisionOptio
 export declare function provisionDatabase(options: ProvisionOptions): Promise<{
   fresh: boolean;
 }>;
+/**
+ * Runs the Drizzle migrations as the app's own role, into its schema. The role needs CREATE on
+ * the database while this runs (see `provisionDatabase`). `fresh` is true when no migration had
+ * been applied before.
+ */
+export declare function migrateAs({ url, schema, migrationsFolder }: {
+  url: string;
+  schema: string;
+  migrationsFolder: string;
+}): Promise<{
+  fresh: boolean;
+}>;
 /** The role PgBouncer signs in with to look up app roles' password hashes (`auth_query`). */
 export declare const POOLER_ROLE = "pgbouncer";
 /**
@@ -63,5 +74,4 @@ export declare function setupPooler({ adminUrl, password }: {
 }): Promise<void>;
 /** Drops the app's schema (all its data) and role. */
 export declare function dropDatabase({ app, adminUrl }: Pick<ProvisionOptions, 'app' | 'adminUrl'>): Promise<void>;
-//#endregion
 export { MAX_KEY_BYTES, type ObjectDetails, type ObjectListing, StorageError, type StorageOptions, type StorageQuota, type StorageUsage, type StoredObject, createStorage };

package/dist/provision.js

@@ -2,7 +2,7 @@ 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
+// src/provision.ts
 const DEFAULT_ROLE_TIMEOUTS = {
 	statement: "30s",
 	idleInTransaction: "60s"
@@ -110,35 +110,50 @@ async function provisionDatabase(options) {
 		await admin.unsafe(`grant connect on database "${database}" to "${role}"`);
 		await admin.unsafe(`revoke all on schema public from public`);
 		if (!migrationsFolder) return { fresh: false };
-		const table = `"${role}"."__drizzle_migrations"`;
-		const [state] = await admin`
-      select to_regclass(${table}) is not null as exists`;
-		let fresh = !state?.exists;
-		if (!fresh) {
-			const [row] = await admin.unsafe(`select exists(select 1 from ${table}) as applied`);
-			fresh = !row?.applied;
-		}
 		await admin.unsafe(`grant create on database "${database}" to "${role}"`);
-		const client = postgres(await appDatabaseUrl(options), {
-			max: 1,
-			onnotice: () => {}
-		});
 		try {
-			await client.unsafe("set statement_timeout = 0; set idle_in_transaction_session_timeout = 0");
-			await migrate(drizzle({ client }), {
-				migrationsFolder,
-				migrationsSchema: role
+			return await migrateAs({
+				url: await appDatabaseUrl(options),
+				schema: role,
+				migrationsFolder
 			});
 		} finally {
-			await client.end();
 			await admin.unsafe(`revoke create on database "${database}" from "${role}"`);
 		}
-		return { fresh };
 	} finally {
 		await admin.end();
 	}
 }
 /**
+* Runs the Drizzle migrations as the app's own role, into its schema. The role needs CREATE on
+* the database while this runs (see `provisionDatabase`). `fresh` is true when no migration had
+* been applied before.
+*/
+async function migrateAs({ url, schema, migrationsFolder }) {
+	const client = postgres(url, {
+		max: 1,
+		onnotice: () => {}
+	});
+	try {
+		const table = `"${schema}"."__drizzle_migrations"`;
+		const [state] = await client`
+      select to_regclass(${table}) is not null as exists`;
+		let fresh = !state?.exists;
+		if (!fresh) {
+			const [row] = await client.unsafe(`select exists(select 1 from ${table}) as applied`);
+			fresh = !row?.applied;
+		}
+		await client.unsafe("set statement_timeout = 0; set idle_in_transaction_session_timeout = 0");
+		await migrate(drizzle({ client }), {
+			migrationsFolder,
+			migrationsSchema: schema
+		});
+		return { fresh };
+	} finally {
+		await client.end();
+	}
+}
+/**
 * Gives the role its schema and everything in it back. A dump restored with `--no-owner`
 * (Coolify's backups) leaves all of it owned by the restoring superuser.
 */
@@ -220,5 +235,4 @@ async function dropDatabase({ app, adminUrl }) {
 		await admin.end();
 	}
 }
-//#endregion
-export { DEFAULT_ROLE_TIMEOUTS, MAX_KEY_BYTES, POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, parseDuration, provisionDatabase, setRoleTimeouts, setupPooler, storageCredentials };
+export { DEFAULT_ROLE_TIMEOUTS, MAX_KEY_BYTES, POOLER_ROLE, StorageError, appDatabaseUrl, createStorage, dbPassword, dbRole, dropDatabase, hmac, migrateAs, parseDuration, provisionDatabase, setRoleTimeouts, setupPooler, storageCredentials };

package/dist/route-tools.js

@@ -1,6 +1,6 @@
 import { readFile, readdir } from "node:fs/promises";
 import { extname, join, sep } from "node:path";
-//#region src/route-tools.ts
+// src/route-tools.ts
 const EXTENSIONS = /* @__PURE__ */ new Set([
 	".ts",
 	".js",
@@ -40,5 +40,4 @@ async function findRouteTools(dir, prefix = []) {
 	}
 	return found;
 }
-//#endregion
 export { findRouteTools, routeToolName };

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

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

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin, useRouter, useRuntimeConfig } from "#app";
-//#region src/runtime/app/plugins/analytics.client.ts
+// src/runtime/app/plugins/analytics.client.ts
 var analytics_client_default = defineNuxtPlugin({
 	name: "wervt:analytics",
 	setup() {
@@ -12,5 +12,4 @@ var analytics_client_default = defineNuxtPlugin({
 		});
 	}
 });
-//#endregion
 export { analytics_client_default as default };

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

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

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

@@ -1,6 +1,6 @@
 import { pendingFeedbackContext } from "../useWervtFeedback.js";
 import { defineNuxtPlugin, onNuxtReady, useRuntimeConfig } from "#app";
-//#region src/runtime/app/plugins/feedback.client.ts
+// src/runtime/app/plugins/feedback.client.ts
 var feedback_client_default = defineNuxtPlugin({
 	name: "wervt:feedback",
 	setup() {
@@ -28,5 +28,4 @@ var feedback_client_default = defineNuxtPlugin({
 		});
 	}
 });
-//#endregion
 export { feedback_client_default as default };

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

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

@@ -1,5 +1,4 @@
 import { Message, Offset, Row } from "@electric-sql/client";
-//#region src/runtime/app/snapshot.d.ts
 export interface ShapeSnapshot<T> {
   rows: [string, T][];
   offset: Offset;
@@ -13,5 +12,4 @@ export interface ShapeSnapshot<T> {
 /** 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
+export declare function applyMessages<T extends Row<unknown>>(rows: Map<string, T>, messages: Message<T>[]): boolean;

package/dist/runtime/app/snapshot.js

@@ -1,6 +1,6 @@
 import { shapeParser } from "../shared/shape.js";
 import { ShapeStream, isChangeMessage, isControlMessage } from "@electric-sql/client";
-//#region src/runtime/app/snapshot.ts
+// 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();
@@ -60,5 +60,4 @@ function applyMessages(rows, messages) {
 	}
 	return changed;
 }
-//#endregion
 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`).
@@ -50,5 +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 {};