@marver-design/marver 0.3.1 → 0.5.0

package/templates/instructions/publish.md

@@ -0,0 +1,129 @@
+# Publish - put the canvas on a URL, collaboration included
+
+Publishing is three decisions, then one build and one process. A coding agent can
+run the whole thing; nothing here needs a human at a dashboard except pasting env
+vars if the host has no CLI.
+
+## The three decisions
+
+1. **Which boards ship, with which rights** - `design/publish.json`:
+
+   ```json
+   { "boards": { "release-review": "comment", "roadmap": "read" } }
+   ```
+
+   `read` = visible to anyone past the gate. `comment` = signed-in accounts can
+   also pin threads. Boards not listed do not ship at all - their frames are not
+   even in the bundle. `marver build` FAILS without this file (default-closed);
+   `--boards a,b` overrides ad hoc (grants comment), `--all-boards` ships
+   everything loudly.
+
+2. **The canvas password** - `MARVER_PASSWORD` at serve time. This is the READ
+   boundary: one shared password for GUESTS. Members never need it - their own
+   account signs them in at the gate, and invite links skip it entirely (the
+   token is the authorization). Rotating it therefore only affects guests.
+   No env var = an open canvas.
+
+3. **Collaboration on or off** - `MARVER_DATA_DIR` at serve time. Set it to a
+   path on a PERSISTENT disk and the serve grows accounts + live comments.
+   Leave it unset for a static, comment-free canvas. Setting it to ephemeral
+   container disk is the one real deploy mistake - comments would vanish on
+   redeploy; marver fails loudly if the dir cannot be created.
+
+## The serve contract (env vars, complete list)
+
+| Var | Meaning |
+|---|---|
+| `PORT` | listen port (hosts inject this) |
+| `MARVER_PASSWORD` | canvas password (guests' read credential); unset = open |
+| `MARVER_DATA_DIR` | persistent dir for `comments/` + `auth.json`; unset = no collaboration |
+| `MARVER_OWNER_EMAIL` | prints a single-use OWNER claim link in the deploy logs on first boot |
+| `MARVER_TRUSTED_PROXY` | set to `1` behind a reverse proxy (Railway, Fly) so rate limits see real IPs |
+
+## The host contract (works on any volume-capable host)
+
+The host does two things, and the deploy config names both. **`design/.dist` is
+gitignored - it is built ON THE HOST at deploy time, never committed.**
+
+- **build command**: `<install> && npx marver build` (respects `publish.json`,
+  seeds comment logs into the bundle)
+- **start command**: `npx marver serve` (reads `PORT` + the env vars above)
+- a **persistent volume** mounted at some path, named by `MARVER_DATA_DIR`
+
+The `@marver-design/marver` dependency must resolve from the registry (a local
+`link:`/`file:` dep cannot ride to a remote host) - a normal `^0.4.0` in
+`package.json` is all it takes.
+
+## Railway quickstart
+
+Commit a `railway.json` so `railway up` knows how to build and serve:
+
+```json
+{
+  "$schema": "https://railway.com/railway.schema.json",
+  "build": { "builder": "NIXPACKS", "buildCommand": "pnpm install && npx marver build" },
+  "deploy": { "startCommand": "npx marver serve" }
+}
+```
+
+Then, once per service:
+
+```bash
+railway init                      # or `railway link` an existing service
+railway volume add --mount-path /data
+railway variables --set MARVER_PASSWORD=<pw> --set MARVER_DATA_DIR=/data \
+  --set MARVER_OWNER_EMAIL=<owner@email> --set MARVER_TRUSTED_PROXY=1
+railway up                        # uploads the repo; Railway runs build then start
+railway logs                      # ← the owner claim LINK prints here, once (see below)
+```
+
+Republishing is just `railway up` again: the server unions the seeded logs on
+boot, so collected feedback is NEVER clobbered by a new build. Run ONE instance -
+the event log is single-writer by design.
+
+## What the deployed gate offers (so you know what you're wiring)
+
+On a collaboration canvas the gate has three doors, one credential each:
+- **Guest** - the canvas password → read-only across published boards.
+- **Member** - "Sign in instead" → their own email + password → read + comment.
+  A member session IS gate passage; they never touch the shared password again.
+- **Invited** - opening an invite link → set a display name + password (+ optional
+  avatar) → account created, read + comment. The link skips the canvas password.
+
+## Wiring people up (after first deploy)
+
+`MARVER_OWNER_EMAIL` makes the first boot print an owner bootstrap in the logs:
+a browser link (`<url>/#/i/<token>`) AND the exact repo command. The token is
+single-use. Claim it from the repo so this machine can mint invites:
+
+```bash
+# 1. claim the owner account - copy the command the deploy logs printed:
+marver comments connect https://canvas.example.com --invite <token-from-logs>
+
+# 2. invite each colleague - one command, one link, no email infrastructure
+marver comments invite colleague@company.com
+#    → prints a single invite LINK (<url>/#/i/<token>). Send it over Slack/DM
+#    with the canvas password. It opens straight into the claim (name +
+#    password + optional avatar). Single-use; 7-day expiry.
+
+# 3. the loop is now closed
+marver dev                        # two-way syncs comments every 30s
+marver comments list --open       # the agent's work queue
+marver comments reply <thread> --body "..."          # answer in the loop
+marver comments resolve <thread> --addressed-in <frame>   # close with a receipt
+marver comments revoke <email>    # kills the account + its sessions, mid-flight
+```
+
+Share the canvas as `<url>/#/b/<board>` (with the canvas password), or copy-link
+on any thread for a deep link straight to it - the gate carries deep links
+through sign-in.
+
+## What lands where (so you can reason about persistence)
+
+- `design/publish.json` - the policy, git-tracked, part of the repo.
+- `<MARVER_DATA_DIR>/comments/<board>.jsonl` - the live event log, on the volume.
+- `<MARVER_DATA_DIR>/auth.json` - accounts (scrypt), sessions, invites, on the volume.
+- `design/comments/<board>.jsonl` - the dev-side mirror, git-tracked: feedback
+  has history, and the volume has an off-site replica for free.
+- `design/.local/collab.json` - THIS machine's device credential. Gitignored;
+  never commit it.

package/templates/instructions/reference/color.md

@@ -46,8 +46,29 @@ present). Focus indicators need contrast AND a clearly visible change of appeara
 Check interactive states, text over images, and BOTH themes.
 Anything conveyed by color alone also needs text, shape, icon, or position.
 
+## Content-frame families (one palette, prose + diagrams)
+
+In content frames (`Md`, `Diagram`), color-code by MEANING using the built-in family
+names - never hand-roll hex or mermaid `classDef`. The same six families work in both,
+so a sentence and the diagram beside it read as one color language:
+
+- **Prose:** `:blue[the shipper's world]`, `:orange[the carrier market]`, `:purple[the
+  driver pool]`, `:green[...]`, `:red[...]`, `:gray[...]` inside any `Md` block.
+- **Diagram nodes:** tag a node with the family - `HQ:::blue`, `Carriers:::orange`,
+  `Drivers:::purple`. No `classDef` needed; they're injected for you.
+
+Pick ONE family per concept and hold it everywhere it appears (the intro word, the
+diagram box, the section heading). That consistency is what lets a reader link the
+picture to the prose at a glance. Reserve `gray` for the neutral/background ("the platform",
+"out of scope"); use the vivid families for the actors that matter.
+
+Node text: write labels as `Head :: gloss` - marver renders the head bold on top
+with the gloss lighter and smaller below, so a box scans as label-then-detail,
+never a run-on. Just the ` :: ` token; no backticks or `**` needed.
+
 ## Verify
 
 Every color has a stable role; attention lands on the intended action; the palette
 holds across quiet, dense, error, and empty states; both themes are composed; the
-result is recognizably THIS product, not a generic colorful treatment.
+result is recognizably THIS product, not a generic colorful treatment. In content
+frames, each concept keeps ONE family across prose and diagram.

package/templates/instructions/shape.md

@@ -110,27 +110,34 @@ a quadrant for prioritization, a state diagram for lifecycle logic, a sequence
 for API choreography. The syntax reference is the Mermaid docs:
 https://mermaid.js.org/intro/ - pull the one page you need, apply, return.
 
-**Color carries meaning - and the floor is never gray-on-gray.** The marver
-theme already colors every node (accent-washed fills, accent borders, both
-modes) - a default diagram looks designed with zero effort, so never hand-set
-grays "to be safe" and never re-theme (init directives are stripped anyway).
-Where the diagram has SEMANTICS, add them with `classDef` on top:
+**Two pieces of built-in sugar make a flowchart read well with zero fiddling -
+use them, don't hand-roll their raw mermaid equivalents.**
+
+*Label hierarchy (`::`).* Write a node label as `Head :: gloss` and marver
+renders the **head bold** on top with the gloss on a lighter, smaller line
+below - no backticks, no `**`, no `<br>`. A box should scan as label-then-
+detail, so lead with the actor and let the example follow:
 
 ```
 flowchart LR
-  A[Draft] --> B{Review?} -->|approved| C[Published]
-  B -->|rejected| D[Archived]
-  classDef win fill:#34C759,stroke:#248A3D,color:#fff
-  classDef stop fill:#FF383C,stroke:#D70015,color:#fff
-  class C win
-  class D stop
+  S["Shipper :: the company that needs freight moved"]:::blue
+  C["Carrier :: the trucking company that hauls it"]:::orange
+  D["Driver :: the person behind the wheel"]:::purple
+  S --> C --> D
 ```
 
-Use the system palette (the same 12 colors the series ramp uses), a few
-classes at most, and never encode meaning in color ALONE - the label or shape
-must carry it too. Check the diagram in BOTH themes (`d`): fills flip with
-the theme, hand-set classDef colors do not, so pick values that hold on both
-grounds (the system colors do).
+*Family colors (`:::name`).* Tag a node with a built-in family and it gets a
+filled, on-brand color with a legible border in both themes - no `classDef`.
+The SAME six names work in `Md` prose (`:blue[the shipper's world]`), so a
+sentence and the diagram beside it read as one color language:
+`blue orange purple green red gray`. Pick ONE family per concept and hold it
+everywhere; reserve `gray` for the neutral/background actor. Never encode
+meaning in color ALONE - the label carries it too.
+
+The marver theme already accent-washes every default node (both modes), so a
+plain flowchart looks designed with zero effort - never hand-set grays "to be
+safe" and never re-theme (init directives are stripped anyway). Check in BOTH
+themes (`d`).
 
 ## Images and mood boards
 

package/dist/dev-C2oTKuXe.mjs

@@ -1,97 +0,0 @@
-import { n as NAME, r as PKG } from "./cli.mjs";
-import { a as loadConfig, o as detectHost } from "./manifest-DW-T52MM.mjs";
-import { n as tailwind3Css, r as tailwind4Plugin, t as marverPlugin } from "./plugin-Crp4CAma.mjs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { createLogger, createServer, searchForWorkspaceRoot } from "vite";
-import react from "@vitejs/plugin-react";
-//#region src/server/dev.ts
-/** packageDir = the installed marver package root (dist/cli.js lives one level down). */
-function packageDir() {
-	return join(dirname(fileURLToPath(import.meta.url)), "..");
-}
-async function dev(root, portFlag) {
-	const config = await loadConfig(root);
-	const host = detectHost(root);
-	const pkgDir = packageDir();
-	const clientDir = join(pkgDir, "src", "client");
-	const plugins = [react()];
-	if (host.tailwind === 4) {
-		const tw = await tailwind4Plugin(root);
-		if (tw) plugins.push(...tw);
-		else console.warn(`[marver] tailwindcss v4 detected but @tailwindcss/vite could not be loaded - utility classes WILL be missing from frames. Fix: npm i -D @tailwindcss/vite (used only by the canvas, never by your app's build).`);
-	}
-	let css;
-	if (host.tailwind === 3) css = await tailwind3Css(root) ?? void 0;
-	plugins.push(marverPlugin({
-		root,
-		clientDir,
-		config,
-		detectedThemeCss: host.themeCss
-	}));
-	const logger = createLogger("info");
-	const noise = (msg) => /Sourcemap for .*node_modules.*points to/.test(msg);
-	const warnBase = logger.warn.bind(logger);
-	const warnOnceBase = logger.warnOnce.bind(logger);
-	logger.warn = (msg, opts) => {
-		if (!noise(msg)) warnBase(msg, opts);
-	};
-	logger.warnOnce = (msg, opts) => {
-		if (!noise(msg)) warnOnceBase(msg, opts);
-	};
-	const server = await createServer({
-		configFile: false,
-		root,
-		css,
-		customLogger: logger,
-		plugins,
-		server: {
-			port: portFlag ?? config.port,
-			strictPort: false,
-			fs: { allow: [.../* @__PURE__ */ new Set([
-				root,
-				pkgDir,
-				searchForWorkspaceRoot(root)
-			])] },
-			watch: { ignored: [
-				"**/design/manifest.json",
-				"**/design/boards/**",
-				"**/design/.local/**",
-				"**/design/.dist/**",
-				"**/.next/**",
-				"**/.turbo/**",
-				"**/.vercel/**",
-				"**/.output/**",
-				"**/dist/**",
-				"**/build/**",
-				"**/out/**",
-				"**/coverage/**"
-			] }
-		},
-		resolve: {
-			dedupe: ["react", "react-dom"],
-			tsconfigPaths: true
-		},
-		optimizeDeps: {
-			exclude: [PKG],
-			include: [
-				"react",
-				"react-dom",
-				"react-dom/client",
-				"react/jsx-runtime",
-				"react/jsx-dev-runtime",
-				`${PKG} > marked`,
-				`${PKG} > mermaid`
-			],
-			entries: [join(clientDir, "frame-host", "index.html"), "design/**/*.{tsx,jsx}"]
-		},
-		logLevel: "info"
-	});
-	await server.listen();
-	const addr = server.httpServer?.address();
-	const port = typeof addr === "object" && addr ? addr.port : config.port;
-	console.log(`\n  ${NAME} canvas → http://localhost:${port}/\n`);
-	return server;
-}
-//#endregion
-export { dev };

package/dist/serve-OtA9Nlow.mjs

@@ -1,207 +0,0 @@
-import { n as NAME } from "./cli.mjs";
-import { existsSync, readFileSync, realpathSync } from "node:fs";
-import { extname, isAbsolute, join, relative, resolve } from "node:path";
-import { createHmac, randomBytes, scryptSync, timingSafeEqual } from "node:crypto";
-import { createServer } from "node:http";
-//#region src/server/serve.ts
-/**
-* `marver serve` - a zero-dependency static server for design/.dist with an optional
-* password gate (SPEC-M2 §4b). No MARVER_PASSWORD → plain static serving. With it, the
-* bundle is never sent pre-auth: every unauthenticated request gets the gate page, auth
-* is a POST compare + an HMAC-signed 30-day cookie keyed off the password itself (all
-* instances agree, nothing stored server-side).
-*/
-const MIME = {
-	".html": "text/html; charset=utf-8",
-	".js": "text/javascript",
-	".mjs": "text/javascript",
-	".css": "text/css",
-	".json": "application/json",
-	".svg": "image/svg+xml",
-	".png": "image/png",
-	".ico": "image/x-icon",
-	".webmanifest": "application/manifest+json",
-	".woff": "font/woff",
-	".woff2": "font/woff2",
-	".map": "application/json",
-	".txt": "text/plain"
-};
-const COOKIE = "mv_a";
-const MONTH = 2592e3;
-function serve(root, portFlag) {
-	const dist = join(root, "design", ".dist");
-	if (!existsSync(join(dist, "index.html"))) {
-		console.error(`[${NAME}] design/.dist not found - run \`npx ${NAME} build\` first.`);
-		process.exit(1);
-	}
-	const realDist = realpathSync(dist);
-	let meta = {
-		name: "Marver",
-		branding: true
-	};
-	try {
-		meta = {
-			...meta,
-			...JSON.parse(readFileSync(join(dist, "meta.json"), "utf8"))
-		};
-	} catch {}
-	const password = process.env.MARVER_PASSWORD ?? "";
-	const verifier = password ? scryptSync(password, "marver-gate", 32) : null;
-	const cookieKey = randomBytes(32);
-	const sign = (exp) => createHmac("sha256", cookieKey).update(`v1.${exp}`).digest("hex");
-	const authed = (req) => {
-		const m = /(?:^|;\s*)mv_a=(\d+)\.([0-9a-f]+)/.exec(String(req.headers.cookie ?? ""));
-		if (!m) return false;
-		const exp = Number(m[1]);
-		if (!Number.isFinite(exp) || exp * 1e3 < Date.now()) return false;
-		const want = Buffer.from(sign(exp)), got = Buffer.from(m[2]);
-		return want.length === got.length && timingSafeEqual(want, got);
-	};
-	const server = createServer((req, res) => {
-		const url = new URL(req.url ?? "/", "http://x");
-		if (verifier) {
-			if (req.method === "POST" && url.pathname === "/__mv/auth") {
-				let body = "";
-				req.on("data", (c) => {
-					body += c;
-					if (body.length > 1e4) req.destroy();
-				});
-				req.on("end", () => {
-					const form = new URLSearchParams(body);
-					const given = form.get("password") ?? "";
-					if (timingSafeEqual(scryptSync(given, "marver-gate", 32), verifier)) {
-						const exp = Math.floor(Date.now() / 1e3) + MONTH;
-						const secure = req.headers["x-forwarded-proto"] === "https" ? "; Secure" : "";
-						res.setHeader("set-cookie", `${COOKIE}=${exp}.${sign(exp)}; Path=/; Max-Age=${MONTH}; HttpOnly; SameSite=Lax${secure}`);
-						const next = form.get("next") ?? "";
-						res.statusCode = 303;
-						res.setHeader("location", /^#\/[\w\/?&=%.,~-]*$/.test(next) ? `/${next}` : "/");
-						return res.end();
-					}
-					return gate(res, meta, "Wrong password - try again");
-				});
-				return;
-			}
-			const cosmetic = url.pathname.startsWith("/__mv/favicon/") || /^\/__mv\/logo\.(svg|png)$/.test(url.pathname);
-			if (!authed(req) && !cosmetic) return gate(res, meta);
-		}
-		let path;
-		try {
-			path = decodeURIComponent(url.pathname);
-		} catch {
-			res.statusCode = 400;
-			return res.end("bad request");
-		}
-		if (path.endsWith("/")) path += "index.html";
-		let file = resolve(dist, path.slice(1));
-		try {
-			const real = realpathSync(file);
-			const rel = relative(realDist, real);
-			if (rel.startsWith("..") || isAbsolute(rel)) throw new Error("outside dist");
-			file = real;
-		} catch {
-			file = join(dist, "index.html");
-		}
-		if (!extname(file)) file = join(dist, "index.html");
-		try {
-			const content = readFileSync(file);
-			res.setHeader("content-type", MIME[extname(file)] ?? "application/octet-stream");
-			const cache = verifier ? "private, no-store" : file.startsWith(join(dist, "assets")) ? "public, max-age=31536000, immutable" : "no-store";
-			res.setHeader("cache-control", cache);
-			res.end(content);
-		} catch {
-			res.statusCode = 404;
-			res.end("not found");
-		}
-	});
-	const port = portFlag ?? (Number(process.env.PORT) || 4199);
-	server.on("error", (err) => {
-		if (err.code === "EADDRINUSE") {
-			console.error(`[${NAME}] port ${port} is already in use - another \`${NAME} serve\` still running? Stop it, or pass --port <n>.`);
-			process.exit(1);
-		}
-		throw err;
-	});
-	server.listen(port, () => {
-		console.log(`\n  ${NAME} serving design/.dist → http://localhost:${port}/`);
-		console.log(verifier ? "  gate: ON (MARVER_PASSWORD set)\n" : "  gate: off - set MARVER_PASSWORD to require a password\n");
-	});
-	return server;
-}
-/** The Marver logo mark (ParallelogramDuo, same as the shell's sidebar). */
-const MARK_AT = (size) => `<svg viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor" aria-hidden><path d="M239.29,59.28l-64.8,144a8,8,0,0,1-7.3,4.72H24a8,8,0,0,1-7.3-11.28l64.8-144A8,8,0,0,1,88.81,48H232A8,8,0,0,1,239.29,59.28Z" opacity=".1"/><path d="M245.43,47.31A15.94,15.94,0,0,0,232,40H88.81a16,16,0,0,0-14.59,9.43l-64.8,144A16,16,0,0,0,24,216H167.19a16,16,0,0,0,14.59-9.43l64.8-144A16,16,0,0,0,245.43,47.31ZM167.19,200H24L88.81,56H232Z"/></svg>`;
-const MARK = MARK_AT(17);
-const MARK_LG = MARK_AT(24);
-/** The gate: the canvas's own antechamber - light ground, dot grid, glass card in the
-*  shell's exact token language. The visitor is one password away from stepping in. */
-function gate(res, meta, error) {
-	const name = meta.name ? meta.name[0].toUpperCase() + meta.name.slice(1) : "Marver";
-	const appMark = meta.logo ? `<img src="${esc(meta.logo)}" alt="" width="24" height="24" />` : MARK_LG;
-	const title = meta.branding ? `${name} | Marver - Visualize your software` : name;
-	const desc = meta.branding ? `${name}, shared as a live Marver canvas - real screens and prototypes, built from the codebase. Marver is the agent-native design canvas.` : `${name} - a private design canvas.`;
-	res.statusCode = 200;
-	res.setHeader("content-type", "text/html; charset=utf-8");
-	res.setHeader("cache-control", "no-store");
-	res.end(`<!doctype html>
-<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${esc(title)}</title>
-<meta name="description" content="${esc(desc)}" />
-<meta name="robots" content="noindex" />
-<meta name="theme-color" content="#e7e9ef" />
-<meta property="og:title" content="${esc(title)}" />
-<meta property="og:description" content="${esc(desc)}" />
-${meta.branding ? "<meta property=\"og:site_name\" content=\"Marver\" />" : ""}
-<meta property="og:type" content="website" />
-<meta name="twitter:card" content="summary" />
-<link rel="icon" href="/__mv/favicon/favicon.ico" sizes="48x48" />
-<link rel="icon" type="image/png" sizes="32x32" href="/__mv/favicon/favicon-32x32.png" />
-<link rel="icon" type="image/png" sizes="16x16" href="/__mv/favicon/favicon-16x16.png" />
-<link rel="apple-touch-icon" href="/__mv/favicon/apple-touch-icon.png" />
-<style>
-  * { box-sizing: border-box; margin: 0 }
-  body { min-height: 100vh; display: flex; align-items: center; justify-content: center;
-    background-color: #e7e9ef;
-    background-image: radial-gradient(#c9cbd5 1px, transparent 1px); background-size: 20px 20px;
-    font: 500 14px -apple-system, system-ui, sans-serif; color: #18181b;
-    -webkit-font-smoothing: antialiased }
-  main { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 16px }
-  form { width: 340px; padding: 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px;
-    background: rgba(255, 255, 255, .64); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(24, 24, 27, .1);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 2px rgba(24, 24, 27, .05), 0 4px 12px -6px rgba(24, 24, 27, .12) }
-  header { display: flex; align-items: center; gap: 10px; padding: 4px 2px 4px 4px }
-  header svg, header img { color: #0088ff; flex: none; border-radius: 6px }
-  h1 { font-size: 17px; font-weight: 600; letter-spacing: -.01em }
-  p { font-size: 12.5px; line-height: 1.5; color: rgba(24, 24, 27, .66); padding: 0 4px }
-  input { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(24, 24, 27, .14);
-    background: #fff; color: #18181b; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s }
-  input::placeholder { color: rgba(24, 24, 27, .35) }
-  input:focus { border-color: #0088ff; box-shadow: 0 0 0 3px rgba(0, 136, 255, .18) }
-  button { height: 40px; border: 0; border-radius: 999px; background: #18181b; color: #fafafa;
-    font: 600 13px -apple-system, system-ui, sans-serif; cursor: pointer; transition: background .15s }
-  button:hover { background: #000 }
-  .err { font-size: 12px; color: #b42318; padding: 0 4px }
-  footer a { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px -apple-system, system-ui, sans-serif;
-    color: rgba(24, 24, 27, .55); text-decoration: none }
-  footer a > svg:first-of-type { width: 20px; height: 20px; color: #0088ff }
-  footer .md, footer .up { transition: color .15s, opacity .15s }
-  footer a:hover .md { color: #0088ff; text-decoration: underline; text-underline-offset: 3px }
-  footer .up { opacity: .45; margin-left: -3px }
-  footer a:hover .up { opacity: 1; color: #0088ff }
-</style></head>
-<body><main>
-  <form method="post" action="/__mv/auth">
-    <header>${appMark}<h1>${esc(name)}</h1></header>
-    <p>You're one step from the canvas. This space is private - enter the password to step inside.</p>
-    ${error ? `<div class="err">${esc(error)}</div>` : ""}
-    <input type="password" name="password" placeholder="Password" autofocus autocomplete="current-password" />
-    <input type="hidden" name="next" />
-    <button type="submit">Open the canvas</button>
-  </form>
-  <script>document.querySelector('[name=next]').value = location.hash<\/script>
-  ${meta.branding ? `<footer><a href="https://marver.design" target="_blank" rel="noopener">${MARK} <span>Powered by <span class="md">Marver.design</span></span> <svg class="up" viewBox="0 0 256 256" width="11" height="11" fill="currentColor" aria-hidden><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></svg></a></footer>` : ""}
-</main></body></html>`);
-}
-const esc = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
-//#endregion
-export { serve };