@marver-design/marver 0.3.1 → 0.5.0

package/dist/serve-D_KBK7Oy.mjs

@@ -0,0 +1,431 @@
+import { n as NAME } from "./cli.mjs";
+import { existsSync, readFileSync, readdirSync, 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;
+async 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 {}
+	let collab = null;
+	let bearerCheck = null;
+	let sessionCheck = null;
+	if (process.env.MARVER_DATA_DIR) {
+		const { collabHandler } = await import("./collab-CXy8gqoz.mjs");
+		const { appendEvents, readLog } = await import("./comments-Ba8mU600.mjs").then((n) => n.n);
+		const { dataDir } = await import("./comments-Ba8mU600.mjs").then((n) => n.n);
+		const dir = dataDir();
+		const seedDir = join(dist, "design", "comments");
+		if (existsSync(seedDir)) for (const f of readdirSync(seedDir)) {
+			if (!f.endsWith(".jsonl")) continue;
+			const board = f.slice(0, -6);
+			appendEvents(join(dir, "comments"), board, readLog(seedDir, board));
+		}
+		collab = collabHandler(dir, dist);
+		const { loadStore, createInvite, normEmail, sessionUser } = await import("./auth-B36fMCM3.mjs");
+		bearerCheck = (token) => sessionUser(dir, token);
+		sessionCheck = (req) => {
+			const tok = /(?:^|;\s*)mv_s=([\w-]+)/.exec(String(req.headers.cookie ?? ""))?.[1];
+			return tok ? sessionUser(dir, tok) : null;
+		};
+		const owner = process.env.MARVER_OWNER_EMAIL;
+		if (owner) {
+			const store = loadStore(dir);
+			if (!store.users.length && !store.invites.some((i) => i.emailNorm === normEmail(owner))) {
+				const { token } = createInvite(dir, owner);
+				console.log(`\n  owner bootstrap for ${normEmail(owner)} (single-use, 7 days):`);
+				console.log(`    in the browser:  <canvas-url>/#/i/${token}`);
+				console.log(`    from the repo:   npx ${NAME} comments connect <this-url> --invite ${token}\n`);
+			}
+		}
+	}
+	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, !!collab, "Wrong canvas password - try again");
+				});
+				return;
+			}
+			let decoded = url.pathname;
+			try {
+				decoded = decodeURIComponent(url.pathname);
+			} catch {}
+			const cosmetic = /^\/__mv\/favicon\/[\w-]+(?:\.[\w-]+)+$/.test(decoded) || /^\/__mv\/logo\.(?:svg|png)$/.test(decoded);
+			if (!authed(req) && !cosmetic && !sessionCheck?.(req)) {
+				const bearerOk = collab && url.pathname.startsWith("/__mv/api/") && (() => {
+					const tok = /^Bearer ([\w-]+)$/.exec(String(req.headers.authorization ?? ""))?.[1];
+					return !!tok && !!bearerCheck?.(tok);
+				})();
+				const preGate = collab && (req.method === "POST" && (url.pathname === "/__mv/api/auth/signin" || url.pathname === "/__mv/api/auth/claim") || req.method === "GET" && url.pathname === "/__mv/api/invite-info");
+				if (!bearerOk && !preGate) return gate(res, meta, !!collab);
+			}
+		}
+		if (collab && url.pathname.startsWith("/__mv/api/")) {
+			collab(req, res, url).then((handled) => {
+				if (!handled) {
+					res.statusCode = 404;
+					res.end("not found");
+				}
+			}).catch(() => {
+				res.statusCode = 500;
+				res.end("error");
+			});
+			return;
+		}
+		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. Three doors, one credential each (SPEC-M3 gate v2):
+*  guests pay the canvas password, members sign in with their OWN password, and an
+*  invite link (#/i/<token>) opens straight into the claim. The member and claim
+*  states exist only on collaboration canvases - a static canvas keeps one field. */
+function gate(res, meta, collabOn, 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 }
+  .card { width: 340px; padding: 24px; border-radius: 24px;
+    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) }
+  section { display: none; flex-direction: column; gap: 14px }
+  section.on { display: flex; animation: rise .24s cubic-bezier(.32, .72, .35, 1) }
+  @keyframes rise { from { opacity: 0; transform: translateY(5px) } }
+  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; width: 100%;
+    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) }
+  .stack { display: flex; flex-direction: column; gap: 10px }
+  /* spacing rhythm on the claim: description breathes before the fields, a hairline
+     divides credentials from identity, and the CTA sits clear of the name row */
+  .lead { margin-bottom: 6px }
+  .cdiv { border: 0; height: 1px; background: rgba(24, 24, 27, .09); margin: 2px 2px }
+  .ctawrap { margin-top: 8px }
+  .chip { height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px;
+    border: 1px solid transparent; background: rgba(24, 24, 27, .05);
+    display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow: hidden }
+  .chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+  .chip span { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(24, 24, 27, .4); flex: none }
+  .idrow { display: flex; align-items: center; gap: 10px }
+  .pfp { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed rgba(24, 24, 27, .3);
+    background: #fff center/cover no-repeat; color: rgba(24, 24, 27, .4); font-size: 18px; flex: none;
+    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
+    transition: border-color .15s, color .15s }
+  .pfp:hover { border-color: #0088ff; color: #0088ff }
+  .pfp.set { border-style: solid; border-color: rgba(24, 24, 27, .12); color: transparent }
+  .pfp::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0;
+    padding: 5px 10px; border-radius: 7px; background: #18181b; color: #fafafa;
+    font: 600 11px -apple-system, system-ui, sans-serif; white-space: nowrap; pointer-events: none;
+    opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s }
+  .pfp:hover::after { opacity: 1; transform: translateY(0) }
+  button.cta { height: 40px; border: 0; border-radius: 999px; background: #18181b; color: #fafafa;
+    font: 600 13px -apple-system, system-ui, sans-serif; cursor: pointer; width: 100%;
+    transition: background .18s, color .18s }
+  button.cta:hover:not(:disabled) { background: #000 }
+  button.cta:disabled { background: rgba(24, 24, 27, .35); cursor: default }
+  .ctawrap { position: relative }
+  .tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+    padding: 5px 10px; border-radius: 7px; background: #18181b; color: #fafafa;
+    font: 600 11px -apple-system, system-ui, sans-serif; white-space: nowrap; pointer-events: none;
+    animation: rise .18s cubic-bezier(.32, .72, .35, 1) }
+  .ctawrap:hover button:disabled ~ .tip { display: block }
+  .swap { text-align: center; padding-top: 2px }
+  .swap a { font: 500 12px -apple-system, system-ui, sans-serif; color: rgba(24, 24, 27, .45);
+    cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .15s }
+  .swap a:hover { color: #18181b }
+  .err { font-size: 12px; color: #b42318; padding: 0 4px }
+  .err:empty { display: none }
+  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>
+  <div class="card">
+
+    <section id="guest" class="on">
+      <form method="post" action="/__mv/auth" style="display:flex;flex-direction:column;gap:14px">
+        <header>${appMark}<h1>${esc(name)}</h1></header>
+        <p class="lead">You're one step from the canvas. This space is private - enter the canvas password to step inside.</p>
+        <div class="err">${error ? esc(error) : ""}</div>
+        <input type="password" name="password" placeholder="Canvas password" autofocus autocomplete="current-password" />
+        <input type="hidden" name="next" />
+        <div class="ctawrap">
+          <button class="cta" type="submit" disabled>Open the canvas</button>
+          <span class="tip">Enter the canvas password first</span>
+        </div>
+        ${collabOn ? "<div class=\"swap\"><span style=\"font:500 12px -apple-system,system-ui,sans-serif;color:rgba(24,24,27,.45)\">Member? <a data-go=\"member\">Sign in instead</a></span></div>" : ""}
+      </form>
+    </section>
+${collabOn ? `
+    <section id="member">
+      <header>${appMark}<h1>${esc(name)}</h1></header>
+      <p class="lead">Welcome back - sign in with your own password. Your account already covers reading.</p>
+      <div class="err" id="member-err"></div>
+      <div class="stack">
+        <input type="email" id="m-email" placeholder="Email" autocomplete="email" />
+        <input type="password" id="m-pass" placeholder="Password" autocomplete="current-password" />
+      </div>
+      <div class="ctawrap">
+        <button class="cta" id="m-go" disabled>Sign in</button>
+        <span class="tip">Fill in email and password</span>
+      </div>
+      <div class="swap"><span style="font:500 12px -apple-system,system-ui,sans-serif;color:rgba(24,24,27,.45)">Just viewing? <a data-go="guest">Enter with the canvas password</a></span></div>
+    </section>
+
+    <section id="claim">
+      <header>${appMark}<h1>${esc(name)}</h1></header>
+      <p class="lead">You're invited to comment on this canvas.<br />Pick how you'll appear - comments carry your name.</p>
+      <div class="err" id="claim-err"></div>
+      <div class="stack">
+        <div class="chip" id="c-chip" hidden><b id="c-email"></b><span>INVITED</span></div>
+        <input type="password" id="c-pass" placeholder="Choose a password" autocomplete="new-password" />
+      </div>
+      <hr class="cdiv" />
+      <div class="idrow">
+        <button class="pfp" id="c-pfp" type="button" aria-label="Select your profile picture" data-tip="Select your profile picture">+</button>
+        <input type="file" id="c-file" accept="image/*" hidden />
+        <input type="text" id="c-name" placeholder="Set a display name" autocomplete="nickname" style="flex:1" />
+      </div>
+      <div class="ctawrap">
+        <button class="cta" id="c-go" disabled>Join the canvas</button>
+        <span class="tip">Password and display name still needed</span>
+      </div>
+    </section>
+` : ""}
+  </div>
+  <script>
+  (() => {
+    const $ = (id) => document.getElementById(id)
+    const next = document.querySelector('[name=next]')
+    if (next) next.value = location.hash
+    // the guest CTA follows its field (server-side form, client-side gating)
+    const gpass = document.querySelector('#guest input[type=password]')
+    const gbtn = document.querySelector('#guest button.cta')
+    gpass.addEventListener('input', () => { gbtn.disabled = !gpass.value })
+    ${collabOn ? `
+    const show = (id) => {
+      for (const s of document.querySelectorAll('section')) s.classList.toggle('on', s.id === id)
+      const f = document.querySelector('#' + id + ' input:not([hidden])')
+      if (f) f.focus()
+    }
+    document.addEventListener('click', (e) => {
+      const go = e.target.closest('[data-go]')
+      if (go) { e.preventDefault(); show(go.dataset.go) }
+    })
+    const api = (path, body) => fetch('/__mv/api/' + path, {
+      method: body === undefined ? 'GET' : 'POST',
+      headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+      body: body === undefined ? undefined : JSON.stringify(body),
+    }).then(async (r) => ({ ok: r.ok, data: await r.json().catch(() => ({})) }))
+
+    // member sign-in: their session IS gate passage - reload keeps the deep link
+    const gate2 = (btn, fields, tipOk) => fields.forEach((f) => f.addEventListener('input', () => {
+      btn.disabled = !fields.every((x) => x.value.trim())
+    }))
+    gate2($('m-go'), [$('m-email'), $('m-pass')])
+    const signin = async () => {
+      $('m-go').disabled = true
+      const r = await api('auth/signin', { email: $('m-email').value.trim(), password: $('m-pass').value })
+      if (r.ok) return location.reload()
+      $('member-err').textContent = r.data.error || 'sign-in failed'
+      $('m-go').disabled = false
+    }
+    $('m-go').addEventListener('click', signin)
+    $('m-pass').addEventListener('keydown', (e) => e.key === 'Enter' && !$('m-go').disabled && signin())
+
+    // invite link (#/i/<token>): straight into the claim - the token IS the credential.
+    // A hash-only navigation onto an invite link never reloads the page - re-run then.
+    addEventListener('hashchange', () => { if (/^#\\/i\\//.test(location.hash)) location.reload() })
+    const inv = /^#\\/i\\/([\\w-]{8,128})$/.exec(location.hash)
+    let avatar = ''
+    if (inv) {
+      show('claim')
+      api('invite-info?token=' + encodeURIComponent(inv[1])).then((r) => {
+        if (r.ok) { $('c-email').textContent = r.data.email; $('c-chip').hidden = false }
+        else $('claim-err').textContent = r.data.error || 'this invite link is invalid'
+      })
+    }
+    // avatar: pick, downscale to 128px client-side, preview in the circle
+    $('c-pfp').addEventListener('click', () => $('c-file').click())
+    $('c-file').addEventListener('change', () => {
+      const file = $('c-file').files[0]
+      if (!file) return
+      const img = new Image()
+      img.onload = () => {
+        const s = Math.min(img.width, img.height), c = document.createElement('canvas')
+        c.width = c.height = 128
+        c.getContext('2d').drawImage(img, (img.width - s) / 2, (img.height - s) / 2, s, s, 0, 0, 128, 128)
+        avatar = c.toDataURL('image/jpeg', .85)
+        const p = $('c-pfp')
+        p.classList.add('set'); p.style.backgroundImage = 'url(' + avatar + ')'; p.textContent = ''; p.dataset.tip = 'Change your photo'
+        URL.revokeObjectURL(img.src)
+      }
+      img.src = URL.createObjectURL(file)
+    })
+    gate2($('c-go'), [$('c-pass'), $('c-name')])
+    const claim = async () => {
+      $('c-go').disabled = true
+      const r = await api('auth/claim', { token: inv ? inv[1] : '', password: $('c-pass').value, name: $('c-name').value.trim(), avatar: avatar || undefined })
+      if (r.ok) return location.href = location.pathname   // consumed invite leaves the URL
+      $('claim-err').textContent = r.data.error || 'claim failed'
+      $('c-go').disabled = false
+    }
+    $('c-go').addEventListener('click', claim)
+    $('c-name').addEventListener('keydown', (e) => e.key === 'Enter' && !$('c-go').disabled && claim())
+    ` : ""}
+  })()
+  <\/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 };

package/dist/sync-CkBk-tUk.mjs

@@ -0,0 +1,248 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { i as readLog, r as listBoards, t as appendEvents } from "./comments-Ba8mU600.mjs";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+//#region src/shared/events.ts
+/** Events the other side lacks, by id - the sync payload in either direction. */
+function diffEvents(mine, theirIds) {
+	const have = new Set(theirIds);
+	return mine.filter((e) => !have.has(e.id));
+}
+/** Replay a board's events into current thread state. Deterministic: replay order is
+*  (ts, id) so two stores holding the same event SET always derive the same state.
+*  TWO passes - creates first, then everything else - so a reply whose author's clock
+*  ran ahead of the creator's still lands instead of being dropped forever. */
+function replay(events) {
+	const ordered = [...events].sort((a, b) => a.ts - b.ts || (a.id < b.id ? -1 : 1));
+	const threads = /* @__PURE__ */ new Map();
+	for (const ev of ordered) {
+		if (ev.type !== "create") continue;
+		if (!ev.commentId || threads.has(ev.commentId)) continue;
+		threads.set(ev.commentId, {
+			id: ev.commentId,
+			board: ev.board,
+			nodeKey: ev.nodeKey,
+			frame: ev.frame,
+			anchor: ev.anchor,
+			author: ev.author,
+			body: ev.body,
+			ts: ev.ts,
+			resolved: false,
+			replies: [],
+			reactions: {}
+		});
+	}
+	for (const ev of ordered) switch (ev.type) {
+		case "reply": {
+			const t = ev.parentId ? threads.get(ev.parentId) : void 0;
+			if (!t || !ev.commentId || t.replies.some((r) => r.id === ev.commentId)) break;
+			t.replies.push({
+				id: ev.commentId,
+				author: ev.author,
+				body: ev.body,
+				ts: ev.ts
+			});
+			break;
+		}
+		case "edit": {
+			if (!ev.commentId || ev.body === void 0) break;
+			const t = threads.get(ev.commentId);
+			if (t) {
+				t.body = ev.body;
+				break;
+			}
+			for (const th of threads.values()) {
+				const r = th.replies.find((r) => r.id === ev.commentId);
+				if (r) {
+					r.body = ev.body;
+					break;
+				}
+			}
+			break;
+		}
+		case "resolve": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			if (t) {
+				t.resolved = true;
+				if (ev.addressedIn) t.addressedIn = ev.addressedIn;
+			}
+			break;
+		}
+		case "reopen": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			if (t) {
+				t.resolved = false;
+				t.addressedIn = void 0;
+			}
+			break;
+		}
+		case "react": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			const who = ev.author?.email;
+			if (!t || !who || !ev.emoji) break;
+			const users = t.reactions[ev.emoji] ??= [];
+			const at = users.indexOf(who);
+			if (at === -1) users.push(who);
+			else {
+				users.splice(at, 1);
+				if (!users.length) delete t.reactions[ev.emoji];
+			}
+			break;
+		}
+	}
+	return [...threads.values()];
+}
+//#endregion
+//#region src/server/sync.ts
+/**
+* Dev ↔ published comment sync (SPEC-M3 §2) - one merge rule, run from the dev side.
+*
+* The published serve is the canonical home; the repo's design/comments/ is the
+* mirror the agent reads. Each exchange is: pull remote events → union into local
+* files; push the local events the remote lacks (chunked - the server unions too).
+* Idempotent and retry-safe by construction, so a dropped exchange costs nothing.
+*
+* Credentials: design/.local/collab.json {url, token} written by `comments connect`.
+* The token is a server session held by the DEV PROCESS only - pages never see it.
+*/
+var sync_exports = /* @__PURE__ */ __exportAll({
+	connect: () => connect,
+	connectClaim: () => connectClaim,
+	loadCollab: () => loadCollab,
+	saveCollab: () => saveCollab,
+	syncOnce: () => syncOnce
+});
+const collabFile = (root) => join(root, "design", ".local", "collab.json");
+function loadCollab(root) {
+	try {
+		const c = JSON.parse(readFileSync(collabFile(root), "utf8"));
+		return typeof c?.url === "string" && typeof c?.token === "string" ? c : null;
+	} catch {
+		return null;
+	}
+}
+function saveCollab(root, collab) {
+	mkdirSync(join(root, "design", ".local"), { recursive: true });
+	writeFileSync(collabFile(root), JSON.stringify(collab, null, 2) + "\n", { mode: 384 });
+}
+/** One full exchange. Returns per-board counts, or throws on auth/network failure. */
+async function syncOnce(root, collab) {
+	const dir = join(root, "design", "comments");
+	const auth = { authorization: `Bearer ${collab.token}` };
+	const base = collab.url.replace(/\/+$/, "");
+	const bres = await fetch(`${base}/__mv/api/boards`, { headers: auth });
+	if (bres.status === 401) throw new Error("the connect token was rejected - run `comments connect` again");
+	if (!bres.ok) throw new Error(`published canvas answered ${bres.status} - is it up?`);
+	const { rights } = await bres.json();
+	const boards = [.../* @__PURE__ */ new Set([...Object.keys(rights), ...listBoards(dir)])];
+	const out = {};
+	const failures = [];
+	for (const board of boards) {
+		if (!(board in rights)) continue;
+		const res = await fetch(`${base}/__mv/api/comments/${board}`, { headers: auth });
+		if (!res.ok) {
+			failures.push(`${board}: pull ${res.status}`);
+			continue;
+		}
+		const { events: remote } = await res.json();
+		const pulled = appendEvents(dir, board, remote).length;
+		let pushed = 0;
+		if (rights[board] === "comment") {
+			const missing = diffEvents(readLog(dir, board), remote.map((e) => e.id));
+			for (let i = 0; i < missing.length; i += 100) {
+				const r = await fetch(`${base}/__mv/api/comments/${board}`, {
+					method: "POST",
+					headers: {
+						...auth,
+						"content-type": "application/json"
+					},
+					body: JSON.stringify({ events: missing.slice(i, i + 100) })
+				});
+				if (r.ok) pushed += (await r.json()).accepted ?? 0;
+				else failures.push(`${board}: push ${r.status} ${(await r.json().catch(() => null))?.error ?? ""}`.trim());
+			}
+		}
+		out[board] = {
+			pulled,
+			pushed
+		};
+	}
+	if (failures.length) throw new Error(`sync incomplete - ${failures.join(" · ")}`);
+	return out;
+}
+/** The account endpoints live BEHIND the canvas gate (the outer READ boundary), so
+*  connecting passes the gate first when a canvas password is set. */
+async function gateCookie(base, canvasPassword) {
+	if (!canvasPassword) return "";
+	const cookie = (await fetch(`${base}/__mv/auth`, {
+		method: "POST",
+		redirect: "manual",
+		headers: { "content-type": "application/x-www-form-urlencoded" },
+		body: `password=${encodeURIComponent(canvasPassword)}&next=`
+	})).headers.getSetCookie?.().find((c) => c.startsWith("mv_a=")) ?? "";
+	const tok = /^mv_a=([^;]+)/.exec(cookie)?.[1];
+	if (!tok) throw new Error("the canvas password was not accepted");
+	return `mv_a=${tok}`;
+}
+async function sessionFrom(res, ctx) {
+	if (!res.ok) {
+		const err = (await res.json().catch(() => null))?.error;
+		throw new Error(err ?? `${ctx} failed (${res.status})`);
+	}
+	const cookie = res.headers.getSetCookie?.().find((c) => c.startsWith("mv_s=")) ?? "";
+	const token = /^mv_s=([\w-]+)/.exec(cookie)?.[1];
+	if (!token) throw new Error("the canvas did not issue a session - is collaboration enabled on it (MARVER_DATA_DIR)?");
+	return token;
+}
+/** Sign in against a published canvas and persist the device credential. The account's
+*  identity rides along: locally-born events carry it as their author snapshot (the
+*  server validates the claim against the session - it never rewrites events). */
+async function connect(root, url, email, password, canvasPassword) {
+	const base = url.replace(/\/+$/, "");
+	const gate = await gateCookie(base, canvasPassword);
+	const res = await fetch(`${base}/__mv/api/auth/signin`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			...gate ? { cookie: gate } : {}
+		},
+		body: JSON.stringify({
+			email,
+			password
+		})
+	});
+	const token = await sessionFrom(res, "sign-in");
+	const user = (await res.clone().json().catch(() => null))?.user;
+	saveCollab(root, {
+		url: base,
+		token,
+		email: user?.email ?? email,
+		name: user?.name
+	});
+}
+/** Claim an invite from the CLI (the dev-first path - no published UI needed). */
+async function connectClaim(root, url, invite, profile, canvasPassword) {
+	const base = url.replace(/\/+$/, "");
+	const gate = await gateCookie(base, canvasPassword);
+	const res = await fetch(`${base}/__mv/api/auth/claim`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			...gate ? { cookie: gate } : {}
+		},
+		body: JSON.stringify({
+			token: invite,
+			...profile
+		})
+	});
+	const token = await sessionFrom(res, "claim");
+	const user = (await res.clone().json().catch(() => null))?.user;
+	saveCollab(root, {
+		url: base,
+		token,
+		email: user?.email,
+		name: user?.name ?? profile.name
+	});
+}
+//#endregion
+export { sync_exports as a, syncOnce as i, connectClaim as n, replay as o, loadCollab as r, connect as t };