framefields 2.13.1 → 2.15.0

package/dist/preview-lHH8Tv4j.mjs

@@ -1,2446 +0,0 @@
-import { z as inputStore } from "./dist-DtPPPsZV.mjs";
-import { t as encodeStereoWav } from "./audio-DS9Jg2ls.mjs";
-import { s as HeadlessMediaRenderer } from "./renderer-CO4NGvAh.mjs";
-import { h as openAssetLocator } from "./dist-CiTgmfUw.mjs";
-import { createRequire, isBuiltin } from "node:module";
-import fs from "node:fs";
-import path from "node:path";
-import { createHash, randomUUID } from "node:crypto";
-import os from "node:os";
-import { fileURLToPath, pathToFileURL } from "node:url";
-import { spawn } from "node:child_process";
-import http from "node:http";
-
-//#region src/preview/bundle.ts
-/**
-* The preview page runs the project's composition code and renders it with
-* WebGPU. Two bundles make that work:
-*
-*  - The engine (`buildEngine`): framefields and its browser player, built once
-*    for the browser. Published packages ship it in `dist/preview-engine`;
-*    running from source, it is built on first use.
-*  - The project (`bundleProject`): only the user's own files, built on each
-*    preview. Its `framefields` imports point at the engine's files, so the
-*    composition and the player share one engine (signals, clock, caches).
-*
-* Node APIs that compositions use at build time are shimmed: `path`, `url`,
-* `os`, `import.meta.url` (each file keeps its own `file://` URL), and `fs`
-* reads, which fetch the file from the preview server. Absolute file paths
-* double as URLs there, so assets referenced by path load unchanged.
-* Node-only packages become stubs that throw when used.
-*/
-const HERE = path.dirname(fileURLToPath(import.meta.url));
-const META_URL = [
-	"import",
-	"meta",
-	"url"
-].join(".");
-const require = createRequire(import.meta.url);
-/** URL prefix the server serves the engine's files under. */
-const ENGINE_URL = "/@framefields/engine";
-/** Public entry points a composition may import, and their sources. */
-const ENTRIES = {
-	framefields: "index.ts",
-	"framefields/effects": "effects/index.ts",
-	"framefields/audio": "audio/index.ts",
-	"framefields/signals": "signals/index.ts",
-	"framefields/fonts": "fonts/index.ts",
-	"framefields/components": "components/index.ts"
-};
-/** Node built-ins with a browser version (shim file names); others are stubbed. */
-const SHIMS = {
-	path: "path",
-	"path/posix": "path",
-	url: "url",
-	os: "os",
-	fs: "fs",
-	"fs/promises": "fs-promises",
-	module: "module"
-};
-/** Packages that only work in Node; the browser never needs them to draw. */
-const NODE_ONLY = new Set([
-	"sharp",
-	"skia-canvas",
-	"node-av",
-	"onnxruntime-node",
-	"@resvg/resvg-js",
-	"@napi-rs/webcodecs",
-	"@mediabunny/server",
-	"@mediabunny/mp3-encoder",
-	"webgpu",
-	"pino",
-	"pino-pretty",
-	"dotenv",
-	"esbuild",
-	"@framefields/renderer",
-	"framefields/renderer",
-	"framefields/preview"
-]);
-const STUB = `
-const stub = () => new Proxy(function () {}, {
-	get: (_t, k) => (k === "__esModule" ? true : k === Symbol.toPrimitive ? () => "" : stub()),
-	apply: () => stub(),
-	construct: () => stub(),
-});
-module.exports = stub();
-`;
-/**
-* Builds framefields for the browser into `outDir`: one module per public entry,
-* the player and the shims, with shared code split into chunks (node renderers
-* load only when a composition uses them).
-*/
-async function buildEngine(outDir) {
-	const { build } = await import("esbuild");
-	const src = path.resolve(HERE, "..");
-	const shims = path.join(HERE, "shims");
-	const entryPoints = { player: path.join(HERE, "player.ts") };
-	for (const [spec, file] of Object.entries(ENTRIES)) entryPoints[engineName(spec)] = path.join(src, file);
-	for (const name of new Set(Object.values(SHIMS))) entryPoints[`shims/${name}`] = path.join(shims, `${name}.ts`);
-	await fs.promises.rm(outDir, {
-		recursive: true,
-		force: true
-	});
-	await build({
-		...BROWSER,
-		entryPoints,
-		outdir: outDir,
-		outExtension: { ".js": ".mjs" },
-		splitting: true,
-		minify: true,
-		conditions: [
-			"development",
-			"browser",
-			"import"
-		],
-		define: {
-			"process.env.NODE_ENV": "\"production\"",
-			global: "globalThis"
-		},
-		inject: [path.join(shims, "process.ts")],
-		plugins: [{
-			name: "framefields-engine",
-			setup(b) {
-				b.onResolve({ filter: /^framefields-preview:renderers$/ }, () => ({ path: builtinRenderersModule() }));
-				resolveNode(b, (name) => ({ path: path.join(shims, `${name}.ts`) }));
-			}
-		}]
-	});
-}
-/** Bundles the module that builds the composition, and what it imports. */
-async function bundleProject(options) {
-	const { build } = await import("esbuild");
-	const entry = path.resolve(options.entry);
-	const fromEngine = (file) => ({
-		path: `${ENGINE_URL}/${file}.mjs`,
-		external: true
-	});
-	const settings = {
-		modelsDir: options.modelsDir,
-		ortBase: options.ortBase
-	};
-	const result = await build({
-		...BROWSER,
-		entryPoints: ["framefields-preview:entry"],
-		write: false,
-		metafile: true,
-		sourcemap: "inline",
-		plugins: [{
-			name: "framefields-project",
-			setup(b) {
-				b.onResolve({ filter: /^framefields-preview:entry$/ }, () => ({
-					path: "entry",
-					namespace: "framefields-preview"
-				}));
-				b.onLoad({
-					filter: /.*/,
-					namespace: "framefields-preview"
-				}, () => ({
-					contents: [
-						`import { startAudioMixer, startPlayer } from ${JSON.stringify(`${ENGINE_URL}/player.mjs`)};`,
-						`import * as mod from ${JSON.stringify(entry)};`,
-						`if (typeof document === "undefined") startAudioMixer(mod, ${JSON.stringify(options.exportName)});`,
-						`else startPlayer(mod, ${JSON.stringify(options.exportName)}, ${JSON.stringify(settings)});`
-					].join("\n"),
-					resolveDir: path.dirname(entry),
-					loader: "js"
-				}));
-				b.onResolve({ filter: /^\/@framefields\/engine\// }, (args) => ({
-					path: args.path,
-					external: true
-				}));
-				b.onResolve({ filter: /^framefields(\/|$)/ }, (args) => ENTRIES[args.path] ? fromEngine(engineName(args.path)) : void 0);
-				resolveNode(b, (name) => fromEngine(`shims/${name}`));
-				rewriteMetaUrl(b);
-			}
-		}]
-	});
-	const inputs = Object.keys(result.metafile?.inputs ?? {}).filter((p) => !p.includes(":") && !p.includes("node_modules")).map((p) => path.resolve(p));
-	return {
-		code: result.outputFiles[0].text,
-		inputs
-	};
-}
-let engineBuild;
-/**
-* The prebuilt engine shipped beside a compiled bundle, if there is one. The
-* bundle lands either at the package's dist root or beside dist/preview,
-* depending on how the bundler splits it, so both are checked.
-*/
-function prebuiltEngineDir(here) {
-	return [here, path.join(here, "..")].map((base) => path.join(base, "preview-engine")).find((dir) => fs.existsSync(path.join(dir, "player.mjs")));
-}
-/**
-* The engine to serve: prebuilt in the package's dist, or, running from
-* source, built once per process (so engine edits show without a rebuild).
-*/
-function engineDir() {
-	const prebuilt = prebuiltEngineDir(HERE);
-	if (prebuilt) return Promise.resolve(prebuilt);
-	engineBuild ??= (async () => {
-		const dir = path.join(os.tmpdir(), `framefields-preview-engine-${process.pid}`);
-		await buildEngine(dir);
-		return dir;
-	})();
-	engineBuild.catch(() => {
-		engineBuild = void 0;
-	});
-	return engineBuild;
-}
-/** Where vision models are cached, as `@framefields/vision` resolves it. */
-function visionModelsDir() {
-	return process.env.FRAMEFIELDS_MODELS_DIR ? path.resolve(process.env.FRAMEFIELDS_MODELS_DIR) : path.join(os.homedir(), ".cache", "framefields", "models");
-}
-const ORT_WEB_VERSION = "1.30.0";
-/**
-* onnxruntime-web, for vision effects: the project's own install when it has
-* one (served from disk), otherwise a pinned CDN build. Loaded only when a
-* vision effect runs, so framefields doesn't ship its WebAssembly.
-*/
-function onnxRuntimeWeb(fromDir) {
-	for (const from of [fromDir, HERE]) try {
-		const main = createRequire(path.join(from, "noop.js")).resolve("onnxruntime-web");
-		const dir = path.dirname(main);
-		return {
-			base: `/@fs${dir}/`,
-			dir
-		};
-	} catch {}
-	return { base: `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WEB_VERSION}/dist/` };
-}
-const BROWSER = {
-	bundle: true,
-	format: "esm",
-	platform: "browser",
-	target: "es2022",
-	mainFields: [
-		"browser",
-		"module",
-		"main"
-	],
-	logLevel: "silent"
-};
-function engineName(spec) {
-	return spec === "framefields" ? "framefields" : spec.slice(12);
-}
-/** Node built-ins to shims, the rest of Node to stubs. */
-function resolveNode(b, shim) {
-	b.onResolve({ filter: /^(node:)?[a-z_/]+$/ }, (args) => {
-		const name = args.path.replace(/^node:/, "");
-		if (SHIMS[name]) return shim(SHIMS[name]);
-		if (args.path.startsWith("node:") || isBuiltin(name)) return {
-			path: name,
-			namespace: "framefields-stub"
-		};
-	});
-	b.onResolve({ filter: /.*/ }, (args) => {
-		const pkg = packageName(args.path);
-		if (pkg && (NODE_ONLY.has(pkg) || NODE_ONLY.has(args.path))) return {
-			path: args.path,
-			namespace: "framefields-stub"
-		};
-	});
-	b.onLoad({
-		filter: /.*/,
-		namespace: "framefields-stub"
-	}, () => ({
-		contents: STUB,
-		loader: "js"
-	}));
-}
-/** Each project file keeps its own URL, as `fileURLToPath(import.meta.url)` expects. */
-function rewriteMetaUrl(b) {
-	b.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, async (args) => {
-		if (args.path.includes(`${path.sep}node_modules${path.sep}`)) return void 0;
-		const source = await fs.promises.readFile(args.path, "utf8");
-		if (!source.includes(META_URL)) return void 0;
-		return {
-			contents: `const __framefieldsFileUrl = ${JSON.stringify(pathToFileURL(args.path).href)};\n${source.replaceAll(META_URL, "__framefieldsFileUrl")}`,
-			loader: loaderFor(args.path)
-		};
-	});
-}
-/** The generated list of node renderers (needed only to build the engine). */
-function builtinRenderersModule() {
-	const dist = require.resolve("@framefields/renderer");
-	const file = path.join(path.dirname(dist), "..", "src", "generated", "node-renderers.ts");
-	if (!fs.existsSync(file)) throw new Error(`[framefields] node renderer list not found at ${file}`);
-	return file;
-}
-function packageName(spec) {
-	if (spec.startsWith(".") || spec.startsWith("/")) return void 0;
-	const parts = spec.split("/");
-	return spec.startsWith("@") ? parts.slice(0, 2).join("/") : parts[0];
-}
-function loaderFor(file) {
-	if (file.endsWith(".tsx")) return "tsx";
-	if (file.endsWith(".jsx")) return "jsx";
-	return /\.[cm]?ts$/.test(file) ? "ts" : "js";
-}
-
-//#endregion
-//#region src/preview/notes.ts
-/**
-* Notes the user pins on the preview: a moment, a spot (or an area) on the
-* frame, and what should change there. They are kept as files so whoever
-* edits the film (a person, or an agent) can read them: `notes.json`, plus the
-* frame with the spot marked as `note-<id>.jpg`. The folder ignores itself in
-* git. `notes.json` is read on every change, so it can be edited by hand
-* (marking a note done, say) while the preview runs.
-*/
-var NoteStore = class {
-	file;
-	constructor(dir) {
-		this.dir = dir;
-		this.file = path.join(dir, "notes.json");
-	}
-	async list() {
-		try {
-			const notes = JSON.parse(await fs.promises.readFile(this.file, "utf8"));
-			return Array.isArray(notes) ? notes : [];
-		} catch {
-			return [];
-		}
-	}
-	async add(input) {
-		const notes = await this.list();
-		const id = notes.reduce((max, n) => Math.max(max, n.id), 0) + 1;
-		const note = {
-			id,
-			frame: Math.max(0, Math.round(Number(input.frame) || 0)),
-			time: round(Number(input.time) || 0, 3),
-			x: round(clamp01(input.x), 4),
-			y: round(clamp01(input.y), 4),
-			...input.w !== void 0 && input.h !== void 0 && {
-				w: round(clamp01(input.w), 4),
-				h: round(clamp01(input.h), 4)
-			},
-			text: String(input.text ?? "").trim(),
-			done: false,
-			created: (/* @__PURE__ */ new Date()).toISOString()
-		};
-		await this.ensureDir();
-		const jpeg = /^data:image\/jpeg;base64,(.+)$/.exec(input.image ?? "");
-		if (jpeg) {
-			note.image = path.join(this.dir, `note-${id}.jpg`);
-			await fs.promises.writeFile(note.image, Buffer.from(jpeg[1], "base64"));
-		}
-		await this.save([...notes, note]);
-		return note;
-	}
-	async update(id, patch) {
-		const notes = await this.list();
-		const note = notes.find((n) => n.id === id);
-		if (!note) return void 0;
-		if (typeof patch.done === "boolean") note.done = patch.done;
-		if (typeof patch.text === "string" && patch.text.trim()) note.text = patch.text.trim();
-		await this.save(notes);
-		return note;
-	}
-	async remove(id) {
-		const notes = await this.list();
-		const note = notes.find((n) => n.id === id);
-		if (!note) return void 0;
-		if (note.image) await fs.promises.rm(note.image, { force: true });
-		await this.save(notes.filter((n) => n !== note));
-		return note;
-	}
-	async save(notes) {
-		await this.ensureDir();
-		const tmp = `${this.file}.${process.pid}.tmp`;
-		await fs.promises.writeFile(tmp, `${JSON.stringify(notes, null, "	")}\n`);
-		await fs.promises.rename(tmp, this.file);
-	}
-	async ensureDir() {
-		await fs.promises.mkdir(this.dir, { recursive: true });
-		const ignore = path.join(path.dirname(this.dir), ".gitignore");
-		if (!fs.existsSync(ignore)) await fs.promises.writeFile(ignore, "*\n");
-	}
-};
-/** One line for a terminal (or an agent reading one). */
-function describeNote(note, fps) {
-	const pct = (v) => `${Math.round(v * 100)}%`;
-	const where = note.w !== void 0 && note.h !== void 0 ? `area ${pct(note.x)},${pct(note.y)} to ${pct(note.x + note.w)},${pct(note.y + note.h)}` : `spot ${pct(note.x)},${pct(note.y)}`;
-	return `note ${note.id} at ${timecode(note.frame, fps)} (frame ${note.frame}), ${where}: ${note.text}`;
-}
-function timecode(frame, fps) {
-	const s = frame / fps;
-	const m = Math.floor(s / 60);
-	return `${m}:${(s - m * 60).toFixed(2).padStart(5, "0")}`;
-}
-function clamp01(v) {
-	const n = Number(v);
-	return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0;
-}
-function round(v, digits) {
-	return Number(v.toFixed(digits));
-}
-
-//#endregion
-//#region src/preview/page.ts
-/**
-* Single-file preview UI served by `startPreview`. No framework, no build step.
-* The page script avoids template literals so it can live inside this one.
-*/
-const previewPage = `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>framefields preview</title>
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cg fill=%22none%22 stroke=%22%233B82F6%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M184 56H86q-30 0-30 30v98M328 56h98q30 0 30 30v98M184 456H86q-30 0-30-30v-98M328 456h98q30 0 30-30v-98%22 stroke-width=%2234%22/%3E%3Cpath d=%22M176 182v148m0-148c0 74 60 74 100 74%22 stroke-width=%2228%22/%3E%3C/g%3E%3Cg fill=%22%233B82F6%22%3E%3Ccircle cx=%22176%22 cy=%22172%22 r=%2232%22/%3E%3Ccircle cx=%22176%22 cy=%22340%22 r=%2232%22/%3E%3Cpath d=%22M284 200l78 56-78 56z%22 stroke=%22%233B82F6%22 stroke-width=%2234%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #0e0f11; --surface: #16171a; --surface-2: #1d1e22; --surface-3: #26282d;
-    --line: #2a2c31; --line-2: #3a3c43;
-    --ink: #ededf0; --ink-2: #a6a8b0; --ink-3: #74777f;
-    --stage: #060607;
-    --primary-bg: #ededf0; --primary-ink: #0e0f11;
-    --brand: #3b82f6; --focus: #5eaefc; --ok: #4fbf7a; --bad: #f27d8d;
-    --wave: #4b4e57;
-    --radius: 10px;
-    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-    color-scheme: dark;
-  }
-  @media (prefers-color-scheme: light) {
-    :root {
-      --bg: #f5f5f6; --surface: #ffffff; --surface-2: #f0f0f2; --surface-3: #e6e6e9;
-      --line: #e2e2e6; --line-2: #cfcfd5;
-      --ink: #15161a; --ink-2: #53555d; --ink-3: #85878f;
-      --stage: #0b0b0c;
-      --primary-bg: #15161a; --primary-ink: #ffffff;
-      --brand: #2563eb; --focus: #1c74cc; --ok: #23874a; --bad: #cf4057;
-      --wave: #c2c3ca;
-      color-scheme: light;
-    }
-  }
-  * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); }
-  body {
-    display: flex; flex-direction: column; height: 100dvh;
-    font: 13.5px/1.45 var(--font); -webkit-font-smoothing: antialiased;
-    font-feature-settings: "cv11", "ss03";
-  }
-  button, input { font: inherit; color: inherit; }
-  button { cursor: pointer; }
-  button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-  .tnum { font-variant-numeric: tabular-nums; }
-  .grow { flex: 1; }
-  .spinner {
-    width: 12px; height: 12px; border-radius: 50%; flex: none;
-    border: 1.5px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
-
-  /* ── Top bar ── */
-  .top { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; height: 50px; border-bottom: 1px solid var(--line); min-width: 0; }
-  .logo { width: 22px; height: 22px; flex: none; color: var(--brand); }
-  .sep { width: 1px; height: 18px; background: var(--line-2); flex: none; margin: 0 2px; }
-  .top h1 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .spec { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
-  @media (max-width: 640px) { .spec { display: none; } }
-  .chip {
-    display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; white-space: nowrap;
-    border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 12px; background: var(--surface);
-  }
-  .chip[data-state="ready"] .dot { color: var(--ok); }
-  .chip[data-state="none"] .dot, .chip[data-state="offline"] .dot { color: var(--ink-3); }
-  .chip[data-state="error"] { color: var(--bad); }
-
-  /* ── Player: one screen, no page scroll; the picture takes the space left ── */
-  .player {
-    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
-    width: 100%; max-width: 1600px; margin: 0 auto; padding: 16px 20px 20px;
-  }
-  @media (max-width: 640px) { .player { padding: 12px; } }
-  .stage-wrap { flex: 1 1 0; min-height: 96px; container-type: size; display: grid; place-items: center; }
-  .stage {
-    position: relative; background: var(--stage); border-radius: var(--radius); overflow: hidden;
-    box-shadow: 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none;
-    aspect-ratio: var(--ar, 16 / 9); width: min(100cqw, calc(100cqh * var(--ar-n, 1.7778)));
-  }
-  .stage canvas { display: block; width: 100%; height: 100%; }
-  .stage-msg {
-    position: absolute; inset: 0; display: none; place-items: center; padding: 24px; text-align: center;
-    color: #fff; background: rgb(0 0 0 / .72); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow: auto;
-  }
-  .stage-msg.on { display: grid; }
-  /* Buffering: a centred spinning arc over the picture, like YouTube's. It
-     fades in after a beat so brief waits don't flash it. */
-  .buffering {
-    position: absolute; left: 50%; top: 50%; width: clamp(36px, 9cqmin, 64px); aspect-ratio: 1;
-    transform: translate(-50%, -50%); pointer-events: none; opacity: 0; visibility: hidden;
-    transition: opacity .15s, visibility 0s .15s; filter: drop-shadow(0 0 3px rgb(0 0 0 / .45));
-  }
-  .buffering.on { opacity: 1; visibility: visible; transition: opacity .2s .25s, visibility 0s .25s; }
-  .buffering svg { width: 100%; height: 100%; animation: yt-rotate 1.4s linear infinite; }
-  .buffering circle {
-    fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round;
-    stroke-dasharray: 1 150; stroke-dashoffset: 0; animation: yt-dash 1.4s ease-in-out infinite;
-  }
-  @keyframes yt-rotate { to { transform: rotate(360deg); } }
-  @keyframes yt-dash {
-    0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
-    50% { stroke-dasharray: 90 150; stroke-dashoffset: -35; }
-    100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }
-  }
-  @media (prefers-reduced-motion: reduce) { .buffering circle, .play-btn .spin circle { animation: none; stroke-dasharray: 70 150; } }
-
-  /* ── Transport ── */
-  .transport { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 6px; }
-  .icon-btn {
-    width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px;
-    border: 0; background: transparent; color: var(--ink-2); flex: none;
-  }
-  .icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-  .icon-btn:disabled { opacity: .35; cursor: default; }
-  .icon-btn svg { width: 16px; height: 16px; }
-  .play-btn {
-    width: 36px; height: 36px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; flex: none;
-    background: var(--primary-bg); color: var(--primary-ink); margin: 0 2px;
-  }
-  .play-btn:hover:not(:disabled) { filter: brightness(.9); }
-  .play-btn:disabled { opacity: .4; cursor: default; }
-  .play-btn svg { width: 14px; height: 14px; }
-  .play-btn .spin { display: none; width: 20px; height: 20px; animation: yt-rotate 1.4s linear infinite; }
-  .play-btn .spin circle {
-    fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round;
-    stroke-dasharray: 1 150; animation: yt-dash 1.4s ease-in-out infinite;
-  }
-  .play-btn.loading .spin { display: block; }
-  .play-btn.loading svg:not(.spin) { display: none !important; }
-  .timecode { display: flex; align-items: baseline; gap: 5px; margin-left: 8px; font-size: 13px; white-space: nowrap; }
-  .timecode .dim { color: var(--ink-3); }
-  .timecode .frame { color: var(--ink-3); font-size: 11.5px; margin-left: 6px; }
-  .fps { margin-left: 10px; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
-  input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 72px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 8px 0 0; }
-  input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
-  input[type="range"].slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
-  input[type="range"].slider:disabled { opacity: .35; }
-
-  /* ── Timeline ── */
-  .timeline {
-    flex: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
-    padding: 0 14px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer;
-  }
-  .tl-inner { position: relative; }
-  .ruler { position: relative; height: 22px; border-bottom: 1px solid var(--line); }
-  .tick { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--line-2); }
-  .tick.major { height: 8px; background: var(--ink-3); }
-  .tick span { position: absolute; bottom: 9px; left: 4px; font-size: 10.5px; line-height: 1; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
-  .wave-lane { position: relative; height: 48px; }
-  @media (max-height: 600px) { .wave-lane { height: 30px; } }
-  .wave-lane canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
-  .wave-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
-  .wave-state.shimmer {
-    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 100%);
-    background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
-  }
-  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
-  .playhead { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; z-index: 3; }
-  .playhead::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--ink); }
-  .playhead::after { content: ""; position: absolute; top: 0; left: -5px; width: 10px; height: 11px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
-  .hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); display: none; pointer-events: none; }
-  .hover-time {
-    position: absolute; top: -28px; transform: translateX(-50%); display: none; pointer-events: none;
-    font-size: 11px; line-height: 1; background: var(--surface-3); color: var(--ink); padding: 5px 7px; border-radius: 5px;
-    white-space: nowrap; z-index: 4; font-variant-numeric: tabular-nums;
-  }
-  /* ── Notes: pinned to a spot (or an area) and a moment ── */
-  .stage.can-note { cursor: crosshair; }
-  .overlay { position: absolute; inset: 0; pointer-events: none; }
-  .pin {
-    position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%;
-    display: grid; place-items: center; pointer-events: auto; cursor: pointer;
-    background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
-    border: 2px solid #fff; box-shadow: 0 1px 5px rgb(0 0 0 / .55); transition: transform .12s;
-  }
-  .pin:hover, .pin.active { transform: scale(1.18); }
-  .pin.done { background: #6b6e76; }
-  .pin.draft { animation: pin-pulse 1.5s ease-out infinite; }
-  .pin svg { width: 11px; height: 11px; }
-  @keyframes pin-pulse {
-    from { box-shadow: 0 0 0 0 rgb(59 130 246 / .6), 0 1px 5px rgb(0 0 0 / .55); }
-    to { box-shadow: 0 0 0 14px rgb(59 130 246 / 0), 0 1px 5px rgb(0 0 0 / .55); }
-  }
-  .area {
-    position: absolute; border: 1.5px solid var(--brand); border-radius: 3px;
-    background: rgb(59 130 246 / .12); box-shadow: 0 0 0 1px rgb(0 0 0 / .35);
-  }
-  .area.done { border-color: #9a9da5; background: rgb(255 255 255 / .05); }
-  .marquee { position: absolute; display: none; border: 1.5px dashed #fff; background: rgb(59 130 246 / .16); border-radius: 3px; pointer-events: none; }
-  .stage-hint, .toast {
-    position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
-    padding: 6px 11px; border-radius: 999px; font-size: 12px; color: #fff; background: rgb(0 0 0 / .62);
-    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s;
-  }
-  .stage-hint { top: 12px; }
-  .stage.can-note.hint:hover .stage-hint { opacity: 1; }
-  .toast { bottom: 14px; }
-  .toast.on { opacity: 1; }
-
-  .pop {
-    position: fixed; z-index: 20; width: 280px; display: none; padding: 10px 10px 8px;
-    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
-    box-shadow: 0 12px 32px rgb(0 0 0 / .35);
-  }
-  .pop.on { display: block; }
-  .pop-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
-  .badge {
-    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; flex: none;
-    background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 600;
-  }
-  .badge.done { background: var(--ink-3); }
-  .pop textarea {
-    display: block; width: 100%; min-height: 54px; max-height: 180px; resize: none; padding: 2px 2px 0;
-    border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; line-height: 1.45;
-  }
-  .pop textarea::placeholder { color: var(--ink-3); }
-  .pop-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 2px; max-height: 200px; overflow: auto; }
-  .pop-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
-  .pop-foot .err { color: var(--bad); }
-  .btn {
-    height: 26px; padding: 0 10px; border-radius: 7px; border: 0; font-size: 12px; font-weight: 500;
-    display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ink-2); white-space: nowrap;
-  }
-  .btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
-  .btn.primary { background: var(--primary-bg); color: var(--primary-ink); }
-  .btn.primary:hover:not(:disabled) { background: var(--primary-bg); filter: brightness(.9); }
-  .btn.danger:hover:not(:disabled) { color: var(--bad); }
-  .btn:disabled { opacity: .4; cursor: default; }
-  .btn svg { width: 13px; height: 13px; }
-  .x-btn { width: 22px; height: 22px; padding: 0; justify-content: center; margin-right: -4px; }
-
-  .transport { position: relative; }
-  .notes-btn { height: 32px; padding: 0 9px 0 8px; margin-right: 6px; font-size: 12.5px; }
-  .notes-btn svg { width: 15px; height: 15px; }
-  .notes-btn .badge { background: var(--surface-3); color: var(--ink-2); }
-  .notes-btn .badge.open { background: var(--brand); color: #fff; }
-  .notes-panel {
-    position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 15; width: min(360px, calc(100vw - 24px));
-    max-height: min(440px, 62vh); display: none; flex-direction: column; overflow: hidden;
-    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .35);
-  }
-  .notes-panel.on { display: flex; }
-  .np-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
-  .np-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
-  .np-list { overflow: auto; padding: 4px; }
-  .np-empty { padding: 22px 18px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
-  .np-foot { flex: none; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; overflow-wrap: anywhere; }
-  .note-row {
-    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 8px 8px 10px;
-    border-radius: 8px; cursor: pointer;
-  }
-  .note-row:hover { background: var(--surface-2); }
-  .note-row .badge { margin-top: 1px; }
-  .note-row .when { font-size: 11.5px; color: var(--ink-3); }
-  .note-row .text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
-  .note-row.done .text { color: var(--ink-3); text-decoration: line-through; }
-  .check {
-    width: 20px; height: 20px; border-radius: 50%; padding: 0; display: grid; place-items: center; margin-top: 1px;
-    border: 1.5px solid var(--line-2); background: transparent; color: transparent;
-  }
-  .check:hover { border-color: var(--ok); color: var(--ok); }
-  .check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
-  .check svg { width: 11px; height: 11px; }
-
-  .note-marks { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; pointer-events: none; z-index: 2; }
-  .note-mark {
-    position: absolute; top: 5px; width: 14px; height: 14px; margin-left: -7px; padding: 0; border: 0; border-radius: 50%;
-    display: grid; place-items: center; pointer-events: auto; cursor: pointer;
-    background: var(--brand); color: #fff; font-size: 8.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface);
-  }
-  .note-mark::after { content: ""; position: absolute; top: 14px; left: 6.5px; width: 1px; height: 30px; background: var(--brand); opacity: .45; }
-  .note-mark.done { background: var(--ink-3); }
-  .note-mark.stacked::after { display: none; }
-  .note-mark.done::after { background: var(--ink-3); }
-  .note-mark:hover { transform: scale(1.2); }
-</style>
-</head>
-<body>
-<header class="top">
-  <svg class="logo" viewBox="0 0 512 512" aria-label="framefields" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round"><path d="M184 56H86q-30 0-30 30v98M328 56h98q30 0 30 30v98M184 456H86q-30 0-30-30v-98M328 456h98q30 0 30-30v-98" stroke-width="34" stroke-linejoin="round"/><path d="M176 182v148m0-148c0 74 60 74 100 74" stroke-width="28"/></g><g fill="currentColor"><circle cx="176" cy="172" r="32"/><circle cx="176" cy="340" r="32"/><path d="M284 200l78 56-78 56z" stroke="currentColor" stroke-width="34" stroke-linejoin="round"/></g></svg>
-  <span class="sep" aria-hidden="true"></span>
-  <h1 id="title">framefields preview</h1>
-  <span class="grow"></span>
-  <span class="spec tnum" id="spec"></span>
-  <span class="chip" id="chip" data-state="mixing" role="status" aria-live="polite"><span class="spinner"></span><span>Mixing audio</span></span>
-</header>
-
-<main class="player" aria-label="Player">
-  <div class="stage-wrap">
-    <div class="stage" id="stage">
-      <canvas id="canvas" aria-label="Rendered frame"></canvas>
-      <div class="stage-msg" id="stageMsg" role="alert"></div>
-      <div class="overlay" id="pins"></div>
-      <div class="marquee" id="marquee"></div>
-      <div class="stage-hint" id="stageHint">Click to pin a note · drag to mark an area</div>
-      <div class="toast" id="toast" role="status" aria-live="polite"></div>
-      <div class="buffering" id="buffering" role="status" aria-label="Loading"><svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"/></svg></div>
-    </div>
-  </div>
-
-  <div class="transport">
-    <button class="icon-btn" id="prev" title="Previous frame" aria-label="Previous frame">
-      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M3 3h1.6v10H3zM13 3.6v8.8a.6.6 0 0 1-.92.5L5.8 8.5a.6.6 0 0 1 0-1l6.28-4.4a.6.6 0 0 1 .92.5z"/></svg>
-    </button>
-    <button class="play-btn" id="play" title="Play" aria-label="Play" disabled>
-      <svg id="playIcon" viewBox="0 0 16 16" fill="currentColor"><path d="M4.5 2.9v10.2a.7.7 0 0 0 1.06.6l8.1-5.1a.7.7 0 0 0 0-1.2l-8.1-5.1a.7.7 0 0 0-1.06.6z"/></svg>
-      <svg class="spin" viewBox="0 0 50 50" aria-hidden="true"><circle cx="25" cy="25" r="18"/></svg>
-      <svg id="pauseIcon" viewBox="0 0 16 16" fill="currentColor" style="display:none"><rect x="3.5" y="2.5" width="3.2" height="11" rx=".8"/><rect x="9.3" y="2.5" width="3.2" height="11" rx=".8"/></svg>
-    </button>
-    <button class="icon-btn" id="next" title="Next frame" aria-label="Next frame">
-      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.4 3H13v10h-1.6zM3 3.6v8.8a.6.6 0 0 0 .92.5l6.28-4.4a.6.6 0 0 0 0-1L3.92 3.1A.6.6 0 0 0 3 3.6z"/></svg>
-    </button>
-    <div class="timecode tnum">
-      <span id="tcNow">0:00.00</span><span class="dim">/</span><span class="dim" id="tcDur">0:00.00</span>
-      <span class="frame" id="tcFrame">frame 0</span>
-    </div>
-    <span class="fps tnum" id="fps" role="status" hidden></span>
-    <span class="grow"></span>
-    <button class="btn notes-btn" id="notesBtn" title="Notes" aria-haspopup="dialog" aria-expanded="false" hidden>
-      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M3 2.75h10a1.25 1.25 0 0 1 1.25 1.25v6.5A1.25 1.25 0 0 1 13 11.75H7.5L4.5 14v-2.25H3A1.25 1.25 0 0 1 1.75 10.5V4A1.25 1.25 0 0 1 3 2.75z"/></svg>
-      Notes <span class="badge" id="notesCount">0</span>
-    </button>
-    <div class="notes-panel" id="notesPanel" role="dialog" aria-label="Notes">
-      <div class="np-head">
-        <h2>Notes</h2><span class="grow"></span>
-        <button class="btn" id="notesCopy" title="Copy the open notes, to paste into a chat">
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="5.25" y="5.25" width="8" height="8" rx="1.5"/><path d="M10.75 3.5V3.25a1.5 1.5 0 0 0-1.5-1.5h-5.5a1.5 1.5 0 0 0-1.5 1.5v5.5a1.5 1.5 0 0 0 1.5 1.5H4"/></svg>
-          <span id="notesCopyLabel">Copy</span>
-        </button>
-        <button class="btn x-btn" id="notesClose" title="Close" aria-label="Close"><svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
-      </div>
-      <div class="np-list" id="notesList"></div>
-      <div class="np-foot" id="notesFoot"></div>
-    </div>
-    <button class="icon-btn" id="mute" title="Mute" aria-label="Mute" disabled>
-      <svg id="volIcon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6h2.2L8 3.2v9.6L4.7 10H2.5z" fill="currentColor" stroke="none"/><path d="M10.6 5.6a3.4 3.4 0 0 1 0 4.8M12.4 3.9a5.8 5.8 0 0 1 0 8.2"/></svg>
-      <svg id="muteIcon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" style="display:none"><path d="M2.5 6h2.2L8 3.2v9.6L4.7 10H2.5z" fill="currentColor" stroke="none"/><path d="M10.5 6l3.5 4M14 6l-3.5 4"/></svg>
-    </button>
-    <input class="slider" type="range" id="volume" min="0" max="1" step="0.01" value="0.9" aria-label="Volume" disabled>
-  </div>
-
-  <div class="timeline" id="timeline" aria-label="Timeline">
-    <div class="tl-inner" id="tlInner">
-      <div class="ruler" id="ruler"></div>
-      <div class="note-marks" id="noteMarks"></div>
-      <div class="wave-lane">
-        <canvas id="wave"></canvas>
-        <div class="wave-state shimmer" id="waveState"><span class="spinner"></span>Mixing audio</div>
-      </div>
-      <div class="hover-line" id="hoverLine"></div>
-      <div class="hover-time" id="hoverTime"></div>
-      <div class="playhead" id="playhead"></div>
-    </div>
-  </div>
-</main>
-
-<div class="pop" id="pop" role="dialog" aria-label="Note"></div>
-
-<script>
-(function () {
-  var $ = function (id) { return document.getElementById(id); };
-  var stage = $("stage"), timeline = $("timeline"), tlInner = $("tlInner");
-
-  var meta = null, session = null, frame = 0, shown = -1, playing = false, playToken = 0;
-  var player = null;
-
-  // ── Helpers ──
-  function fmt(f) {
-    var s = f / meta.fps, m = Math.floor(s / 60);
-    return m + ":" + (s - m * 60).toFixed(2).padStart(5, "0");
-  }
-  function last() { return meta.frameCount - 1; }
-  function clampFrame(f) { return Math.max(0, Math.min(last(), Math.round(f))); }
-  function pct(f) { return meta.frameCount > 1 ? (f / last()) * 100 : 0; }
-  function el(tag, cls, text) {
-    var e = document.createElement(tag);
-    if (cls) e.className = cls;
-    if (text != null) e.textContent = text;
-    return e;
-  }
-  function sleep(ms) { return new Promise(function (r) { setTimeout(r, ms); }); }
-
-  // ── Reporting: errors and the engine's warnings go to the preview's
-  // terminal too, so whoever runs it sees them without opening this tab.
-  // Once each; frame numbers aside, playback repeats the same one per frame ──
-  var reportedKeys = new Set();
-  function errText(x) {
-    if (x && x.message) return x.stack && x.stack.indexOf(x.message) >= 0 ? x.stack.split("\\n").slice(0, 4).join("\\n") : x.message;
-    return typeof x === "string" ? x : String(x);
-  }
-  function report(level, parts) {
-    var text = parts.map(errText).join(" ").trim(), key = level + text.replace(/\\d+/g, "#");
-    if (!text || reportedKeys.has(key) || reportedKeys.size > 100) return;
-    reportedKeys.add(key);
-    fetch("/@framefields/log", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ level: level, message: text.slice(0, 4000) }),
-      keepalive: true
-    }).catch(function () {});
-  }
-  ["error", "warn"].forEach(function (name) {
-    var original = console[name].bind(console);
-    console[name] = function () {
-      original.apply(null, arguments);
-      var args = Array.prototype.slice.call(arguments);
-      // Errors from anywhere; warnings only from the engine (fonts, renderers).
-      if (name === "error" || (typeof args[0] === "string" && args[0].indexOf("[framefields]") === 0)) {
-        report(name === "error" ? "error" : "warning", args);
-      }
-    };
-  });
-
-  // ── Frames: drawn in this tab by the composition's own code ──
-  function setTime(f) {
-    frame = f;
-    $("tcNow").textContent = fmt(f);
-    $("tcFrame").textContent = "frame " + f;
-    $("playhead").style.left = pct(f) + "%";
-    if (!playing && notesOn) renderPins();
-  }
-  function show(f) {
-    setTime(f);
-    if (!player) return Promise.resolve();
-    $("buffering").classList.add("on");
-    // Calls made while a frame draws collapse to the latest.
-    return player.render(f).then(function (drawn) {
-      shown = drawn;
-      if (!stalled) $("buffering").classList.remove("on");
-    });
-  }
-  function seek(f) {
-    stop();
-    var done = show(clampFrame(f));
-    keepPosition();
-    scheduleWarm();
-    return done;
-  }
-
-  // ── Position in the address: #t=12.5 opens there, and a reload (the next
-  // preview taking over) comes back to the same moment ──
-  function startFrame() {
-    var m = /[#&]t=([\\d.]+)/.exec(location.hash), n = /[#&]frame=(\\d+)/.exec(location.hash);
-    if (m) return clampFrame(Number(m[1]) * meta.fps);
-    if (n) return clampFrame(Number(n[1]));
-    return 0;
-  }
-  function keepPosition() {
-    var at = frame > 0 ? "#t=" + Number((frame / meta.fps).toFixed(3)) : location.pathname;
-    try { history.replaceState(null, "", at); } catch (e) {}
-  }
-
-  // ── Analysing ahead: while paused, frames after the playhead are drawn
-  // off-screen so vision results are cached before they play ──
-  var warmTimer = null, warmToken = 0, warmed = new Set();
-  function scheduleWarm() {
-    clearTimeout(warmTimer);
-    warmToken++;
-    if (!player || !player.hasVision || playing) return;
-    warmTimer = setTimeout(warmAhead, 1000);
-  }
-  async function warmAhead() {
-    var token = ++warmToken;
-    var end = Math.min(last(), frame + Math.round(meta.fps * 20));
-    for (var f = frame + 1; f <= end && token === warmToken && !playing; f++) {
-      if (warmed.has(f)) continue;
-      if (!(await player.warm(f))) { scheduleWarm(); return; }
-      warmed.add(f);
-      await sleep(0);
-    }
-  }
-  function showError(err) {
-    report("error", [err]);
-    pageState = "error";
-    $("buffering").classList.remove("on");
-    $("stageMsg").textContent = String((err && err.message) || err);
-    $("stageMsg").classList.add("on");
-  }
-
-  // ── Audio ──
-  var audio = { mode: "browser", state: "mixing", error: "", buffer: null, peaks: null, ctx: null, gain: null, src: null, muted: false, volume: 0.9 };
-  var AUDIO_LABEL = { mixing: "Mixing audio", loading: "Loading audio", ready: "Audio ready", none: "No audio", error: "Audio failed" };
-  var offline = false;
-
-  function renderChip() {
-    var chip = $("chip"), state, label, busy;
-    if (offline) { state = "offline"; label = "Preview stopped"; busy = false; }
-    else { state = audio.state; label = AUDIO_LABEL[audio.state]; busy = state === "mixing" || state === "loading"; }
-    chip.dataset.state = state;
-    chip.title = offline ? "The preview command isn't running. This tab reconnects when it starts again." : audio.error || "";
-    chip.replaceChildren(el("span", busy ? "spinner" : "dot"), el("span", null, label));
-  }
-  function setAudioStatus(state, error) {
-    audio.state = state;
-    audio.error = error || "";
-    var busy = state === "mixing" || state === "loading", ws = $("waveState");
-    ws.classList.toggle("shimmer", busy);
-    ws.style.display = state === "ready" ? "none" : "flex";
-    ws.replaceChildren();
-    if (busy) ws.append(el("span", "spinner"));
-    ws.append(document.createTextNode(state === "none" ? "No audio in this composition" : state === "error" ? "Audio could not be mixed" : AUDIO_LABEL[state]));
-    var usable = state === "ready" && (!!audio.buffer || !!stream);
-    $("mute").disabled = !usable;
-    $("volume").disabled = !usable;
-    renderChip();
-    drawWave();
-  }
-  function ensureAudioContext() {
-    if (audio.ctx) return;
-    var Ctx = window.AudioContext || window.webkitAudioContext;
-    audio.ctx = new Ctx();
-    audio.gain = audio.ctx.createGain();
-    audio.gain.connect(audio.ctx.destination);
-    applyVolume();
-  }
-  // ── Soundtrack, streamed. The page mixes it with the export's mixer in
-  // BLOCK_SEC blocks: the ones at the playhead first, as it plays, the rest
-  // in the background (which draws the waveform and finds the film's loudest
-  // sample for the master gain). Blocks play back to back on the
-  // AudioContext clock. Sources stream straight from where they live, pinned
-  // assets from their bucket. The mixing runs in a worker with its own GPU
-  // device, so it never holds up drawing; if the worker can't, the page mixes,
-  // and if that fails too, the server does. ──
-  var BLOCK_SEC = 2, AHEAD_SEC = 4, KEEP_BLOCKS = 64, PEAK_BINS = 1200, SILENT = 0.001;
-  var stream = null, playback = null;
-  function filmSec() { return meta.frameCount / meta.fps; }
-  // The project's bundle, loaded as a worker, runs the mixer instead of a player.
-  function mixerWorker() {
-    var worker;
-    try { worker = new Worker("/@framefields/player.js", { type: "module" }); } catch (e) { return null; }
-    var calls = new Map(), next = 0, failed = null;
-    var fail = function (err) {
-      failed = failed || err;
-      calls.forEach(function (c) { c.reject(failed); });
-      calls.clear();
-    };
-    var ready = new Promise(function (resolve, reject) {
-      worker.onmessage = function (e) {
-        var d = e.data;
-        if ("ready" in d) { if (d.ready) resolve(); else { reject(new Error(d.error)); fail(new Error(d.error)); } return; }
-        var call = calls.get(d.id);
-        if (!call) return;
-        calls.delete(d.id);
-        if (d.error) call.reject(new Error(d.error)); else call.resolve(d.mix);
-      };
-      worker.onerror = function (e) {
-        var err = new Error(e.message || "the mixing worker failed");
-        reject(err);
-        fail(err);
-      };
-    });
-    return {
-      mix: function (range, chain) {
-        return ready.then(function () {
-          if (failed) throw failed;
-          return new Promise(function (resolve, reject) {
-            var id = ++next;
-            calls.set(id, { resolve: resolve, reject: reject });
-            worker.postMessage({ id: id, range: range, chain: chain });
-          });
-        });
-      },
-      stop: function () { worker.terminate(); fail(new Error("stopped")); }
-    };
-  }
-  function beginStream(p) {
-    if (stream && stream.worker) stream.worker.stop();
-    stopClock();
-    audio.buffer = null;
-    audio.peaks = new Array(PEAK_BINS).fill(0);
-    stream = { player: p, worker: mixerWorker(), blocks: new Map(), order: [], pending: new Map(), queue: [], busy: false,
-      seen: new Set(), peak: 0, gain: 1, fill: 0, filling: false, total: Math.max(1, Math.ceil(filmSec() / BLOCK_SEC)) };
-    ensureAudioContext();
-    setAudioStatus("mixing");
-    var s = stream;
-    streamBlock(s, Math.floor(frame / meta.fps / BLOCK_SEC), true).then(function () {
-      if (stream === s && audio.state === "mixing") setAudioStatus("ready");
-    }, function () {});
-  }
-  // Blocks mix on two chains, each continuing its own effect state from the
-  // block before: "fill" runs through the film from its start, so its blocks
-  // are exactly the export's; "play" starts at a seek with a lead-in and
-  // carries on from there. An exact block is never replaced by a lead-in one.
-  function streamBlock(s, i, urgent) {
-    var have = s.blocks.get(i);
-    if (have) return Promise.resolve(have);
-    var waiting = s.pending.get(i);
-    if (waiting) {
-      if (urgent) promote(s, i);
-      return waiting;
-    }
-    waiting = enqueue(s, i, i === s.fill ? "fill" : "play", urgent, true);
-    pumpStream(s);
-    return waiting;
-  }
-  function enqueue(s, i, chain, urgent, own) {
-    if (chain === "fill") s.filling = true;
-    var waiting = new Promise(function (resolve, reject) {
-      var job = { i: i, chain: chain, own: own, resolve: resolve, reject: reject };
-      if (urgent) s.queue.unshift(job); else s.queue.push(job);
-    });
-    if (own) s.pending.set(i, waiting);
-    else waiting.catch(function () {});
-    return waiting;
-  }
-  function promote(s, i) {
-    var at = s.queue.findIndex(function (j) { return j.i === i; });
-    if (at > 0) s.queue.unshift(s.queue.splice(at, 1)[0]);
-  }
-  function pumpStream(s) {
-    if (s.busy || stream !== s) return;
-    if (!s.queue.length) { fillStream(s); if (!s.queue.length) return; }
-    s.busy = true;
-    var job = s.queue.shift();
-    var range = { startSec: job.i * BLOCK_SEC, endSec: Math.min(filmSec(), (job.i + 1) * BLOCK_SEC) };
-    mixBlock(s, range, job.chain).then(function (mix) {
-      if (stream === s) keepBlock(s, job.i, { left: mix.left, right: mix.right, sampleRate: mix.sampleRate, exact: mix.exact }, mix.peak);
-      if (job.chain === "fill") { s.fill = job.i + 1; s.filling = false; }
-      job.resolve(s.blocks.get(job.i));
-    }, function (err) {
-      if (job.chain === "fill") s.filling = false;
-      job.reject(err);
-      streamFailed(s, err);
-    }).then(function () {
-      if (job.own) s.pending.delete(job.i);
-      s.busy = false;
-      pumpStream(s);
-    });
-  }
-  // In the worker; on the page itself once the worker has failed.
-  function mixBlock(s, range, chain) {
-    if (!s.worker) return s.player.mixAudio(range, chain);
-    return s.worker.mix(range, chain).catch(function (err) {
-      if (s.worker) {
-        console.warn("The soundtrack's mixing worker failed, so the page mixes it:", err);
-        s.worker.stop();
-        s.worker = null;
-      }
-      return s.player.mixAudio(range, chain);
-    });
-  }
-  // Idle: the fill chain mixes its next block, every block in order, so
-  // its effect state runs on unbroken from the film's start.
-  function fillStream(s) {
-    if (s.filling || s.fill >= s.total) return;
-    enqueue(s, s.fill, "fill", false, !s.pending.has(s.fill));
-  }
-  function keepBlock(s, i, block, peak) {
-    var had = s.blocks.get(i);
-    if (!had || !had.exact || block.exact) {
-      s.blocks.set(i, block);
-      s.order.push(i);
-      while (s.order.length > KEEP_BLOCKS) s.blocks.delete(s.order.shift());
-    }
-    if (s.seen.has(i)) return;
-    s.seen.add(i);
-    s.peak = Math.max(s.peak, peak);
-    var dur = filmSec(), from = Math.floor((i * BLOCK_SEC / dur) * PEAK_BINS);
-    var to = Math.min(PEAK_BINS, Math.ceil((Math.min(dur, (i + 1) * BLOCK_SEC) / dur) * PEAK_BINS));
-    var perBin = (dur / PEAK_BINS) * block.sampleRate, origin = i * BLOCK_SEC * block.sampleRate;
-    for (var b = from; b < to; b++) {
-      var lo = Math.max(0, Math.floor(b * perBin - origin)), hi = Math.min(block.left.length, Math.floor((b + 1) * perBin - origin));
-      var m = audio.peaks[b];
-      for (var k = lo; k < hi; k++) m = Math.max(m, Math.abs(block.left[k]), Math.abs(block.right[k]));
-      audio.peaks[b] = Math.min(1, m);
-    }
-    drawWave();
-    if (s.seen.size < s.total) return;
-    // The whole film is mixed: master as the export does, or say it's silent.
-    s.gain = s.peak > 0.95 ? 0.92 / s.peak : 1;
-    if (s.peak < SILENT) setAudioStatus("none");
-  }
-  function streamFailed(s, err) {
-    if (stream !== s) return;
-    if (s.worker) s.worker.stop();
-    stream = null;
-    stopClock();
-    console.warn("Mixing the soundtrack in the browser failed, so the preview server mixes it:", err);
-    audio.mode = "server";
-    setAudioStatus("mixing");
-    fetch("/audio/mix", { method: "POST" }).catch(function () {});
-  }
-  // The master stage on a block: the film's gain, then the export's soft limiter.
-  function mastered(channel, gain) {
-    var out = new Float32Array(channel.length);
-    for (var k = 0; k < channel.length; k++) {
-      var v = Math.tanh(channel[k] * gain);
-      out[k] = v === v ? v : 0;
-    }
-    return out;
-  }
-  function startStream(f0) {
-    var s = stream, ctx = audio.ctx;
-    ctx.resume();
-    var pb = { t0: f0 / meta.fps, startAt: ctx.currentTime + 0.08, next: Math.floor(f0 / meta.fps / BLOCK_SEC), sources: [], timer: 0 };
-    playback = pb;
-    function tick() {
-      if (playback !== pb || stream !== s) return;
-      var now = ctx.currentTime - pb.startAt + pb.t0;
-      while (pb.next < s.total && pb.next * BLOCK_SEC < now + AHEAD_SEC) {
-        var have = s.blocks.get(pb.next);
-        if (!have) { streamBlock(s, pb.next, true).then(tick, function () {}); return; }
-        scheduleBlock(pb, pb.next, have, s.gain);
-        pb.next++;
-      }
-    }
-    pb.timer = setInterval(tick, 250);
-    tick();
-    return function () { return Math.max(0, ctx.currentTime - pb.startAt); };
-  }
-  // Block i starts at film second i * BLOCK_SEC: on the clock, that is
-  // startAt + (i * BLOCK_SEC - t0). A block that comes late starts part way
-  // in, so sound and picture stay on the same clock.
-  function scheduleBlock(pb, i, block, gain) {
-    var ctx = audio.ctx, buf = ctx.createBuffer(2, block.left.length, block.sampleRate);
-    buf.copyToChannel(mastered(block.left, gain), 0);
-    buf.copyToChannel(mastered(block.right, gain), 1);
-    var src = ctx.createBufferSource();
-    src.buffer = buf;
-    src.connect(audio.gain);
-    var when = pb.startAt + (i * BLOCK_SEC - pb.t0), at = Math.max(when, ctx.currentTime + 0.02), offset = at - when;
-    if (offset >= buf.duration) return;
-    src.start(at, offset);
-    pb.sources.push(src);
-    src.onended = function () { pb.sources = pb.sources.filter(function (x) { return x !== src; }); };
-  }
-  function stopStream() {
-    var pb = playback;
-    playback = null;
-    if (!pb) return;
-    clearInterval(pb.timer);
-    pb.sources.forEach(function (src) { try { src.stop(); } catch (e) {} src.disconnect(); });
-  }
-  function loadAudio(status) {
-    if (status && status.state === "browser") {
-      audio.mode = "browser";
-      setAudioStatus("mixing");
-      if (player) beginStream(player);
-      return;
-    }
-    stopClock();
-    audio.buffer = null;
-    audio.peaks = null;
-    if (!status || status.state !== "ready") { setAudioStatus(status ? status.state : "none", status && status.error); return; }
-    audio.peaks = status.peaks;
-    setAudioStatus("loading");
-    ensureAudioContext();
-    fetch("/audio")
-      .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.arrayBuffer(); })
-      .then(function (data) { return audio.ctx.decodeAudioData(data); })
-      .then(function (buf) { audio.buffer = buf; setAudioStatus("ready"); })
-      .catch(function (err) { setAudioStatus("error", String((err && err.message) || err)); });
-  }
-  function applyVolume() {
-    if (audio.gain) audio.gain.gain.value = audio.muted ? 0 : audio.volume;
-    $("volIcon").style.display = audio.muted ? "none" : "";
-    $("muteIcon").style.display = audio.muted ? "" : "none";
-    $("mute").title = audio.muted ? "Unmute" : "Mute";
-    $("mute").setAttribute("aria-label", audio.muted ? "Unmute" : "Mute");
-  }
-  // The clock for real-time playback: the soundtrack when there is one,
-  // otherwise the wall clock. Audio as master keeps picture and sound in sync.
-  function startClock(f0) {
-    if (stream && audio.ctx && audio.state === "ready") return startStream(f0);
-    if (audio.buffer && audio.ctx) {
-      audio.ctx.resume();
-      var src = audio.ctx.createBufferSource();
-      src.buffer = audio.buffer;
-      src.connect(audio.gain);
-      var startAt = audio.ctx.currentTime + 0.06, offset = f0 / meta.fps;
-      if (offset < audio.buffer.duration) src.start(startAt, offset);
-      audio.src = src;
-      return function () { return Math.max(0, audio.ctx.currentTime - startAt); };
-    }
-    var t0 = performance.now();
-    return function () { return (performance.now() - t0) / 1000; };
-  }
-  function stopClock() {
-    stopStream();
-    if (!audio.src) return;
-    try { audio.src.stop(); } catch (e) {}
-    audio.src.disconnect();
-    audio.src = null;
-  }
-
-  // ── Playback ──
-  var stalled = false;
-  // Waiting on frames mid-playback: the play button and the picture both spin.
-  function setStalled(on) {
-    stalled = on;
-    $("play").classList.toggle("loading", on);
-    $("buffering").classList.toggle("on", on);
-  }
-  function setPlayingUi(on) {
-    $("playIcon").style.display = on ? "none" : "";
-    $("pauseIcon").style.display = on ? "" : "none";
-    $("play").title = on ? "Pause" : "Play";
-    $("play").setAttribute("aria-label", on ? "Pause" : "Play");
-  }
-  function play() {
-    if (playing || !player) return;
-    playing = true;
-    clearTimeout(warmTimer);
-    warmToken++;
-    var token = ++playToken;
-    var alive = function () { return playing && token === playToken; };
-    setPlayingUi(true);
-    if (openId != null) closePop();
-    if (draft && !draft.text.trim()) cancelDraft();
-    if (notesOn) renderPins();
-    if (frame >= last()) frame = 0;
-    playFrames(alive).finally(function () { if (token === playToken && playing) pause(); });
-  }
-  function stop() {
-    playing = false;
-    stopClock();
-    setStalled(false);
-    setPlayingUi(false);
-    meter.stop();
-    renderFps();
-  }
-
-  // ── Frame rate reached: distinct frames shown per second while playing,
-  // over the last 2 s, stalls included. The film's own rate is in meta ──
-  var meter = (function () {
-    var started = null, lastFrame = null, samples = [], lastFps = null;
-    function read() {
-      if (started === null) return { state: "paused", fps: lastFps };
-      var now = performance.now(), elapsed = Math.min(2000, now - started);
-      samples = samples.filter(function (t) { return t > now - 2000; });
-      if (elapsed < 1000) return { state: "measuring", fps: null };
-      // Counting whole frames in the window can overshoot the film's rate.
-      return { state: "playing", fps: Math.min(meta ? meta.fps : Infinity, (samples.length * 1000) / elapsed) };
-    }
-    return {
-      read: read,
-      start: function () { started = performance.now(); lastFrame = null; samples = []; },
-      stop: function () {
-        if (started === null) return;
-        // A playback too short to measure leaves no rate, not an older one.
-        var r = read();
-        lastFps = r.state === "playing" ? r.fps : null;
-        started = null;
-        samples = [];
-      },
-      record: function (f) {
-        if (started === null || f === lastFrame) return;
-        lastFrame = f;
-        samples.push(performance.now());
-      }
-    };
-  })();
-  function renderFps() {
-    var r = meter.read(), out = $("fps");
-    out.hidden = r.state === "paused" && r.fps === null;
-    if (out.hidden) return;
-    out.textContent = r.state === "measuring" ? "… fps" : r.fps.toFixed(1) + " fps";
-    out.title = (r.state === "paused" ? "Frame rate the last playback reached" : "Frame rate playback reaches") + (meta ? "; the film runs at " + meta.fps + " fps" : "");
-  }
-  setInterval(function () { if (playing) renderFps(); }, 500);
-  // Pausing settles on exactly the frame the timecode shows.
-  function pause() { stop(); keepPosition(); show(frame).then(scheduleWarm); }
-  function togglePlay() { playing ? pause() : play(); }
-
-  // Real time: nothing is rendered ahead. Each turn draws the frame due on
-  // the clock straight to the screen, and frames that drawing missed are
-  // skipped. Playback starts at once and the sound keeps its speed; a device
-  // that can't keep up shows fewer frames, and the frame rate says how many.
-  async function playFrames(alive) {
-    meter.start();
-    renderFps();
-    // Sound starts with picture: wait for the block at the playhead.
-    if (stream && audio.state !== "none") {
-      setStalled(true);
-      await streamBlock(stream, Math.floor(frame / meta.fps / BLOCK_SEC), true).catch(function () {});
-      if (!alive()) return;
-      setStalled(false);
-      if (stream && audio.state === "mixing") setAudioStatus("ready");
-    }
-    // A soundtrack still downloading would start late: wait for it.
-    if (audio.state === "loading") {
-      setStalled(true);
-      while (alive() && audio.state === "loading") await sleep(50);
-      // A newer playback may be waiting too: only this one's own stall ends here.
-      if (!alive()) return;
-      setStalled(false);
-    }
-    var f0 = frame, clock = startClock(f0), presented = -1;
-    while (alive()) {
-      var due = Math.min(last(), f0 + Math.floor(clock() * meta.fps));
-      if (due === presented) { await sleep(4); continue; }
-      setTime(due);
-      // Each frame is drawn once; caching it would cost a texture and a copy per frame.
-      var drawn = await player.render(due, { cache: false });
-      if (!alive()) return;
-      presented = shown = drawn;
-      meter.record(drawn);
-      if (drawn >= last()) return;
-    }
-  }
-
-  // ── Timeline ──
-  function frameAtX(clientX) {
-    var r = tlInner.getBoundingClientRect();
-    return clampFrame(Math.min(1, Math.max(0, (clientX - r.left) / r.width)) * last());
-  }
-  function renderRuler() {
-    var ruler = $("ruler"), width = tlInner.clientWidth || 800, dur = last() / meta.fps;
-    ruler.replaceChildren();
-    if (dur <= 0) return;
-    var steps = [0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
-    var major = steps.find(function (s) { return (s / dur) * width >= 80; }) || 1200, minor = major / 5;
-    for (var i = 0; i * minor <= dur + 1e-6; i++) {
-      var t = i * minor, isMajor = i % 5 === 0, x = (t / dur) * width;
-      var tick = el("div", "tick" + (isMajor ? " major" : ""));
-      tick.style.left = (t / dur) * 100 + "%";
-      if (isMajor && x < width - 34) {
-        var m = Math.floor(t / 60), s = Math.round((t - m * 60) * 10) / 10;
-        tick.append(el("span", null, m + ":" + (s < 10 ? "0" : "") + s));
-      }
-      ruler.append(tick);
-    }
-  }
-  function drawWave() {
-    var canvas = $("wave"), dpr = window.devicePixelRatio || 1;
-    var w = canvas.clientWidth, h = canvas.clientHeight;
-    canvas.width = Math.round(w * dpr);
-    canvas.height = Math.round(h * dpr);
-    var ctx = canvas.getContext("2d");
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, w, h);
-    var peaks = audio.peaks;
-    if (!peaks || !peaks.length || !meta) return;
-    var videoSec = Math.max(1e-6, last() / meta.fps);
-    var audioSec = audio.buffer ? audio.buffer.duration : videoSec;
-    var spanPx = Math.min(1, audioSec / videoSec) * w, mid = h / 2;
-    ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue("--wave").trim();
-    for (var x = 0; x < spanPx; x += 3) {
-      var v = Math.max(peaks[Math.floor((x / spanPx) * peaks.length)] || 0, 0.015);
-      var bh = Math.max(1, Math.sqrt(v) * (h - 8));
-      ctx.fillRect(x, mid - bh / 2, 2, bh);
-    }
-  }
-
-  var dragging = false;
-  timeline.addEventListener("pointerdown", function (e) {
-    if (!meta || e.button !== 0) return;
-    timeline.setPointerCapture(e.pointerId);
-    dragging = true;
-    seek(frameAtX(e.clientX));
-  });
-  timeline.addEventListener("pointermove", function (e) {
-    if (!meta) return;
-    var f = frameAtX(e.clientX), r = tlInner.getBoundingClientRect();
-    var x = Math.min(r.width, Math.max(0, e.clientX - r.left));
-    $("hoverLine").style.display = "block";
-    $("hoverLine").style.left = x + "px";
-    $("hoverTime").style.display = "block";
-    $("hoverTime").style.left = x + "px";
-    $("hoverTime").textContent = fmt(f);
-    if (dragging && f !== frame) seek(f);
-  });
-  timeline.addEventListener("pointerleave", function () {
-    $("hoverLine").style.display = "none";
-    $("hoverTime").style.display = "none";
-  });
-  timeline.addEventListener("pointerup", function () { dragging = false; });
-  timeline.addEventListener("pointercancel", function () { dragging = false; });
-
-  // ── Notes: pause, click the picture (or drag an area) and say what should
-  // change. Each is saved with its moment, its spot and a picture of the
-  // frame with the spot marked, for whoever edits the film ──
-  var notes = [], notesOn = false, draft = null, openId = null, saving = false, press = null;
-  var pop = $("pop"), pins = $("pins"), NL = String.fromCharCode(10);
-  var ICON_CHECK = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg>';
-  var ICON_X = '<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
-
-  function pct1(v) { return Math.round(v * 100) + "%"; }
-  function whereText(n) {
-    return n.w != null ? "area " + pct1(n.x) + "," + pct1(n.y) + " to " + pct1(n.x + n.w) + "," + pct1(n.y + n.h) : "spot " + pct1(n.x) + "," + pct1(n.y);
-  }
-  function noteById(id) { return notes.find(function (n) { return n.id === id; }); }
-  function openCount() { return notes.filter(function (n) { return !n.done; }).length; }
-
-  function renderNotes() {
-    renderPins();
-    renderMarks();
-    renderList();
-    var open = openCount(), count = $("notesCount");
-    count.textContent = String(open || notes.length);
-    count.classList.toggle("open", open > 0);
-    $("notesBtn").title = open + " open of " + notes.length;
-  }
-  function renderPins() {
-    if (!meta) return;
-    stage.classList.toggle("can-note", notesOn && !!player && !playing);
-    stage.classList.toggle("hint", notes.length === 0 && !draft);
-    pins.replaceChildren();
-    if (playing) return;
-    var here = notes.filter(function (n) { return n.frame === frame; });
-    if (draft && draft.frame === frame) here.push(draft);
-    here.forEach(function (n) {
-      if (n.w != null) {
-        var a = el("div", "area" + (n.done ? " done" : ""));
-        a.style.left = n.x * 100 + "%"; a.style.top = n.y * 100 + "%";
-        a.style.width = n.w * 100 + "%"; a.style.height = n.h * 100 + "%";
-        pins.append(a);
-      }
-      var pin = el("button", "pin" + (n.done ? " done" : "") + (n === draft ? " draft" : "") + (n.id === openId ? " active" : ""));
-      pin.style.left = n.x * 100 + "%"; pin.style.top = n.y * 100 + "%";
-      if (n === draft) { pin.setAttribute("aria-label", "New note"); }
-      else {
-        if (n.done) pin.innerHTML = ICON_CHECK; else pin.textContent = String(n.id);
-        pin.title = n.text;
-        pin.setAttribute("aria-label", "Note " + n.id);
-        pin.addEventListener("click", function (e) { e.stopPropagation(); openCard(n.id); });
-      }
-      pins.append(pin);
-    });
-  }
-  function renderMarks() {
-    var marks = $("noteMarks");
-    marks.replaceChildren();
-    if (!meta) return;
-    // Notes close together stack, up to three high.
-    var width = tlInner.clientWidth || 800, lanes = [];
-    notes.slice().sort(function (a, b) { return a.frame - b.frame || a.id - b.id; }).forEach(function (n) {
-      var x = (pct(n.frame) / 100) * width, lane = lanes.findIndex(function (end) { return x - end >= 16; });
-      if (lane < 0) lane = lanes.length < 3 ? lanes.length : 2;
-      lanes[lane] = x;
-      var m = el("button", "note-mark" + (n.done ? " done" : "") + (lane ? " stacked" : ""), String(n.id));
-      m.style.left = pct(n.frame) + "%";
-      m.style.top = 4 + lane * 15 + "px";
-      m.title = n.id + " · " + fmt(n.frame) + " · " + n.text;
-      m.addEventListener("pointerdown", function (e) { e.stopPropagation(); });
-      m.addEventListener("click", function (e) { e.stopPropagation(); goToNote(n.id); });
-      marks.append(m);
-    });
-  }
-  function renderList() {
-    var list = $("notesList");
-    list.replaceChildren();
-    $("notesCopy").disabled = openCount() === 0;
-    if (!notes.length) {
-      list.append(el("div", "np-empty", "Pause and click the picture to pin a note to that spot and moment. Drag to mark an area."));
-    }
-    notes.slice().sort(function (a, b) { return a.frame - b.frame || a.id - b.id; }).forEach(function (n) {
-      var row = el("div", "note-row" + (n.done ? " done" : ""));
-      var body = el("div");
-      body.append(el("div", "when tnum", fmt(n.frame) + " · frame " + n.frame), el("div", "text", n.text));
-      var check = el("button", "check" + (n.done ? " on" : ""));
-      check.innerHTML = ICON_CHECK;
-      check.title = n.done ? "Reopen" : "Mark done";
-      check.setAttribute("aria-label", check.title);
-      check.addEventListener("click", function (e) { e.stopPropagation(); setDone(n.id, !n.done); });
-      row.append(el("span", "badge" + (n.done ? " done" : ""), String(n.id)), body, check);
-      row.addEventListener("click", function () { goToNote(n.id); });
-      list.append(row);
-    });
-    var dir = meta && meta.notesDir ? meta.notesDir.split("/").slice(-2).join("/") : "";
-    $("notesFoot").textContent = "Saved in " + dir + " with a picture of each spot. Ask your agent to go through them.";
-  }
-
-  function notesRequest(body) {
-    return fetch("/@framefields/notes", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) })
-      .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); });
-  }
-  function upsert(note) {
-    var i = notes.findIndex(function (n) { return n.id === note.id; });
-    if (i >= 0) notes[i] = note; else notes.push(note);
-    renderNotes();
-  }
-  function setDone(id, done) {
-    notesRequest({ op: "update", id: id, done: done }).then(function (n) {
-      upsert(n);
-      if (openId === id) openCard(id);
-    }, function () { toast("Couldn't save. Is the preview running?"); });
-  }
-  function removeNote(id) {
-    notesRequest({ op: "remove", id: id }).then(function () {
-      notes = notes.filter(function (n) { return n.id !== id; });
-      closePop();
-      renderNotes();
-    }, function () { toast("Couldn't delete. Is the preview running?"); });
-  }
-  function goToNote(id) {
-    var n = noteById(id);
-    if (!n) return;
-    $("notesPanel").classList.remove("on");
-    $("notesBtn").setAttribute("aria-expanded", "false");
-    seek(n.frame).then(function () { openCard(id); });
-  }
-
-  var toastTimer = null;
-  function toast(text) {
-    var t = $("toast");
-    t.textContent = text;
-    t.classList.add("on");
-    clearTimeout(toastTimer);
-    toastTimer = setTimeout(function () { t.classList.remove("on"); }, 2200);
-  }
-
-  // ── Placing a note on the picture ──
-  function fracAt(e) {
-    var r = stage.getBoundingClientRect();
-    return { x: Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)), y: Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)), r: r };
-  }
-  stage.addEventListener("pointerdown", function (e) {
-    if (e.button !== 0 || !player || e.target.closest(".pin")) return;
-    if (playing) { pause(); return; }
-    if (!notesOn) return;
-    if (draft && pop.querySelector("textarea") && pop.querySelector("textarea").value.trim()) {
-      pop.querySelector("textarea").focus();
-      return;
-    }
-    cancelDraft();
-    var p = fracAt(e);
-    press = { x: p.x, y: p.y, cx: e.clientX, cy: e.clientY, area: null };
-    stage.setPointerCapture(e.pointerId);
-    e.preventDefault();
-  });
-  stage.addEventListener("pointermove", function (e) {
-    if (!press) return;
-    var p = fracAt(e);
-    if (!press.area && Math.hypot(e.clientX - press.cx, e.clientY - press.cy) < 6) return;
-    press.area = { x: Math.min(press.x, p.x), y: Math.min(press.y, p.y), w: Math.abs(p.x - press.x), h: Math.abs(p.y - press.y) };
-    var m = $("marquee");
-    m.style.display = "block";
-    m.style.left = press.area.x * 100 + "%"; m.style.top = press.area.y * 100 + "%";
-    m.style.width = press.area.w * 100 + "%"; m.style.height = press.area.h * 100 + "%";
-  });
-  function endPress() {
-    if (!press) return;
-    var a = press.area;
-    $("marquee").style.display = "none";
-    draft = a && a.w > 0.01 && a.h > 0.01
-      ? { frame: frame, x: a.x, y: a.y, w: a.w, h: a.h, text: "" }
-      : { frame: frame, x: press.x, y: press.y, text: "" };
-    press = null;
-    openComposer();
-  }
-  stage.addEventListener("pointerup", endPress);
-  stage.addEventListener("pointercancel", function () { press = null; $("marquee").style.display = "none"; });
-
-  // ── The popover: writing a note, or reading one ──
-  var popAnchor = null;
-  function placePop() {
-    if (!popAnchor || !pop.classList.contains("on")) return;
-    var r = stage.getBoundingClientRect(), n = popAnchor;
-    var ax = r.left + (n.x + (n.w || 0)) * r.width, ay = r.top + (n.y + (n.h || 0)) * r.height;
-    var w = pop.offsetWidth, h = pop.offsetHeight, gap = 16;
-    var left = ax + gap + w <= innerWidth - 8 ? ax + gap : ax - gap - w - (n.w || 0) * r.width;
-    var top = ay + gap + h <= innerHeight - 8 ? ay + gap / 2 : ay - h - gap / 2 - (n.h || 0) * r.height;
-    pop.style.left = Math.max(8, Math.min(innerWidth - w - 8, left)) + "px";
-    pop.style.top = Math.max(8, Math.min(innerHeight - h - 8, top)) + "px";
-  }
-  function showPop(anchor) {
-    popAnchor = anchor;
-    pop.classList.add("on");
-    placePop();
-  }
-  function closePop() {
-    pop.classList.remove("on");
-    pop.replaceChildren();
-    popAnchor = null;
-    openId = null;
-    renderPins();
-  }
-  function cancelDraft() {
-    if (!draft) return;
-    draft = null;
-    closePop();
-  }
-  function openComposer() {
-    openId = null;
-    var head = el("div", "pop-head");
-    head.append(el("span", "badge", "+"), el("span", "tnum", fmt(draft.frame) + " · " + (draft.w != null ? "area" : "spot")));
-    var ta = document.createElement("textarea");
-    ta.placeholder = "What should change here?";
-    ta.rows = 2;
-    ta.setAttribute("aria-label", "Note");
-    var foot = el("div", "pop-foot"), status = el("span", "grow", "Enter to add");
-    var cancel = el("button", "btn", "Cancel"), add = el("button", "btn primary", "Add note");
-    add.disabled = true;
-    foot.append(status, cancel, add);
-    pop.replaceChildren(head, ta, foot);
-    ta.addEventListener("input", function () {
-      draft.text = ta.value;
-      add.disabled = !ta.value.trim() || saving;
-      ta.style.height = "auto";
-      ta.style.height = Math.min(180, ta.scrollHeight) + "px";
-      placePop();
-    });
-    ta.addEventListener("keydown", function (e) {
-      if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); saveDraft(ta, add, status); }
-      if (e.key === "Escape") { e.preventDefault(); cancelDraft(); }
-    });
-    cancel.addEventListener("click", cancelDraft);
-    add.addEventListener("click", function () { saveDraft(ta, add, status); });
-    renderPins();
-    showPop(draft);
-    ta.focus();
-  }
-  async function saveDraft(ta, add, status) {
-    var d = draft, text = ta.value.trim();
-    if (!d || !text || saving) return;
-    saving = true;
-    ta.readOnly = true;
-    add.disabled = true;
-    status.className = "grow";
-    status.textContent = "Saving…";
-    try {
-      var image = null;
-      try { image = await capture(d); } catch (err) { report("warning", ["[framefields] no picture for the note:", err]); }
-      var note = await notesRequest({ op: "add", note: { frame: d.frame, time: d.frame / meta.fps, x: d.x, y: d.y, w: d.w, h: d.h, text: text, image: image } });
-      if (draft === d) draft = null;
-      closePop();
-      upsert(note);
-      toast("Note " + note.id + " saved");
-    } catch (err) {
-      status.className = "grow err";
-      status.textContent = "Couldn't save. Is the preview running?";
-      ta.readOnly = false;
-      add.disabled = false;
-    } finally {
-      saving = false;
-    }
-  }
-  // The frame with the spot marked, small enough to read at a glance.
-  async function capture(d) {
-    var bmp = await player.snapshot(d.frame);
-    var scale = Math.min(1, 1600 / bmp.width), w = Math.round(bmp.width * scale), h = Math.round(bmp.height * scale);
-    var c = document.createElement("canvas");
-    c.width = w; c.height = h;
-    var g = c.getContext("2d");
-    g.drawImage(bmp, 0, 0, w, h);
-    bmp.close();
-    var lw = Math.max(3, w / 400);
-    function mark(draw) {
-      // Dark, white, then blue: it reads on any picture.
-      g.lineWidth = lw + 5; g.strokeStyle = "rgba(0,0,0,0.5)"; draw();
-      g.lineWidth = lw + 2.5; g.strokeStyle = "#fff"; draw();
-      g.lineWidth = lw; g.strokeStyle = "#3b82f6"; draw();
-    }
-    if (d.w != null) {
-      mark(function () { g.strokeRect(d.x * w, d.y * h, d.w * w, d.h * h); });
-    } else {
-      var rad = Math.max(16, w / 40);
-      mark(function () { g.beginPath(); g.arc(d.x * w, d.y * h, rad, 0, Math.PI * 2); g.stroke(); });
-      g.fillStyle = "#3b82f6";
-      g.beginPath(); g.arc(d.x * w, d.y * h, lw, 0, Math.PI * 2); g.fill();
-    }
-    return c.toDataURL("image/jpeg", 0.88);
-  }
-  function openCard(id) {
-    var n = noteById(id);
-    if (!n) return;
-    if (draft) cancelDraft();
-    openId = id;
-    var head = el("div", "pop-head");
-    var close = el("button", "btn x-btn");
-    close.innerHTML = ICON_X;
-    close.title = "Close";
-    close.setAttribute("aria-label", "Close");
-    close.addEventListener("click", closePop);
-    head.append(el("span", "badge" + (n.done ? " done" : ""), String(n.id)), el("span", "tnum grow", fmt(n.frame) + " · frame " + n.frame), close);
-    var foot = el("div", "pop-foot");
-    var done = el("button", "btn");
-    done.innerHTML = ICON_CHECK;
-    done.append(document.createTextNode(n.done ? "Reopen" : "Mark done"));
-    done.addEventListener("click", function () { setDone(n.id, !n.done); });
-    var del = el("button", "btn danger", "Delete");
-    del.addEventListener("click", function () { removeNote(n.id); });
-    foot.append(done, el("span", "grow"), del);
-    pop.replaceChildren(head, el("div", "pop-text", n.text), foot);
-    renderPins();
-    showPop(n);
-  }
-
-  document.addEventListener("pointerdown", function (e) {
-    if (pop.classList.contains("on") && !pop.contains(e.target) && !stage.contains(e.target) && !e.target.closest(".note-mark, .note-row")) {
-      if (openId != null) closePop();
-      else if (draft && !draft.text.trim()) cancelDraft();
-    }
-    var panel = $("notesPanel");
-    if (panel.classList.contains("on") && !panel.contains(e.target) && !$("notesBtn").contains(e.target)) {
-      panel.classList.remove("on");
-      $("notesBtn").setAttribute("aria-expanded", "false");
-    }
-  });
-  document.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
-    if (openId != null) closePop();
-    $("notesPanel").classList.remove("on");
-    $("notesBtn").setAttribute("aria-expanded", "false");
-  });
-  window.addEventListener("resize", placePop);
-  new ResizeObserver(placePop).observe(stage);
-
-  $("notesBtn").addEventListener("click", function () {
-    var on = $("notesPanel").classList.toggle("on");
-    $("notesBtn").setAttribute("aria-expanded", String(on));
-  });
-  $("notesClose").addEventListener("click", function () {
-    $("notesPanel").classList.remove("on");
-    $("notesBtn").setAttribute("aria-expanded", "false");
-  });
-  // The open notes as text, for a chat that can't read the notes folder.
-  $("notesCopy").addEventListener("click", function () {
-    var lines = ["Notes on the preview of " + JSON.stringify(meta.title) + ":"];
-    notes.filter(function (n) { return !n.done; }).sort(function (a, b) { return a.frame - b.frame; }).forEach(function (n) {
-      lines.push("- Note " + n.id + " at " + fmt(n.frame) + " (frame " + n.frame + "), " + whereText(n) + ": " + n.text + (n.image ? " [picture: " + n.image + "]" : ""));
-    });
-    var text = lines.join(NL), label = $("notesCopyLabel");
-    var done = function () { label.textContent = "Copied"; setTimeout(function () { label.textContent = "Copy"; }, 1600); };
-    (navigator.clipboard ? navigator.clipboard.writeText(text) : Promise.reject()).then(done, function () {
-      var t = document.createElement("textarea");
-      t.value = text;
-      document.body.append(t);
-      t.select();
-      try { document.execCommand("copy"); done(); } catch (e) {}
-      t.remove();
-    });
-  });
-
-  function loadNotes() {
-    if (!notesOn) return;
-    fetch("/@framefields/notes").then(function (r) { return r.json(); }).then(function (list) {
-      notes = Array.isArray(list) ? list : [];
-      renderNotes();
-    }, function () {});
-  }
-
-  // ── Wiring ──
-  $("play").addEventListener("click", togglePlay);
-  $("prev").addEventListener("click", function () { seek(frame - 1); });
-  $("next").addEventListener("click", function () { seek(frame + 1); });
-  $("mute").addEventListener("click", function () { audio.muted = !audio.muted; applyVolume(); });
-  $("volume").addEventListener("input", function (e) { audio.volume = Number(e.target.value); audio.muted = audio.volume === 0; applyVolume(); });
-
-  // A hidden tab's timers are throttled, so playback would stutter: pause.
-  document.addEventListener("visibilitychange", function () {
-    if (document.hidden && playing) pause();
-  });
-
-  // ── For scripts and agents driving the page: seek, play, and read the
-  // state instead of clicking at coordinates ──
-  var pageState = "loading";
-  window.framefieldsPreview = {
-    /** Shows the frame at a time in seconds; resolves once it is drawn. */
-    seek: function (sec) { return ready().then(function () { return seek(Number(sec) * meta.fps); }); },
-    /** Shows a frame by number; resolves once it is drawn. */
-    seekFrame: function (f) { return ready().then(function () { return seek(f); }); },
-    play: function () { return ready().then(play); },
-    /** Notes pinned on the page, as saved in notes.json. */
-    notes: function () { return notes.slice(); },
-    pause: function () { if (playing) pause(); },
-    /** Where the preview is: loading, ready or error, and what it shows. */
-    state: function () {
-      var rate = meter.read().fps;
-      return {
-        state: pageState,
-        error: pageState === "error" ? $("stageMsg").textContent : null,
-        frame: frame,
-        time: meta ? Number((frame / meta.fps).toFixed(3)) : 0,
-        playing: playing,
-        buffering: stalled,
-        audio: audio.state,
-        // Soundtrack blocks mixed in this page so far, of the film's.
-        audioMixed: stream ? { blocks: stream.seen.size, of: stream.total, exact: Array.from(stream.blocks.values()).filter(function (b) { return b.exact; }).length } : null,
-        // Where the soundtrack mixes: "worker" (off the page's thread), "page", or "server".
-        audioMixer: stream ? (stream.worker ? "worker" : "page") : audio.mode === "server" ? "server" : null,
-        connected: !offline,
-        // Frames shown per second over the last 2 s of playback (the last
-        // playback's while paused), and how long the last frame took to draw.
-        playbackFps: rate == null ? null : Number(rate.toFixed(1)),
-        renderMs: player ? Math.round(player.lastRenderMs) : null,
-        meta: meta && { title: meta.title, width: meta.width, height: meta.height, fps: meta.fps, frameCount: meta.frameCount, duration: Number((last() / meta.fps).toFixed(3)) }
-      };
-    }
-  };
-  var readyWaiters = [];
-  function ready() {
-    if (player) return Promise.resolve();
-    if (pageState === "error") return Promise.reject(new Error($("stageMsg").textContent));
-    return new Promise(function (resolve, reject) { readyWaiters.push([resolve, reject]); });
-  }
-  function settleReady(err) {
-    readyWaiters.splice(0).forEach(function (w) { err ? w[1](err) : w[0](); });
-  }
-
-  function applyMeta(m) {
-    meta = m;
-    document.title = m.title + " · preview";
-    $("title").textContent = m.title;
-    $("spec").textContent = m.width + "×" + m.height + " · " + m.fps + " fps · " + fmt(last());
-    $("tcDur").textContent = fmt(last());
-    stage.style.setProperty("--ar", m.width + " / " + m.height);
-    stage.style.setProperty("--ar-n", String(m.width / m.height));
-    renderRuler();
-  }
-
-  new ResizeObserver(function () {
-    if (!meta) return;
-    renderRuler();
-    drawWave();
-    renderMarks();
-  }).observe(tlInner);
-
-  // When the preview command ends the event stream drops and the browser keeps
-  // retrying. The next preview of this project (same port) says hello with a
-  // new session, and this tab reloads into it.
-  var events = new EventSource("/events");
-  events.addEventListener("hello", function (e) {
-    var s = JSON.parse(e.data).session;
-    if (session && s !== session) { location.reload(); return; }
-    offline = false;
-    renderChip();
-  });
-  events.addEventListener("error", function () {
-    if (!meta) return;
-    if (playing) { stop(); keepPosition(); }
-    offline = true;
-    renderChip();
-  });
-  events.addEventListener("notes", function (e) {
-    notes = JSON.parse(e.data);
-    if (openId != null && !noteById(openId)) closePop();
-    renderNotes();
-  });
-  events.addEventListener("audio", function (e) {
-    if (meta) loadAudio(JSON.parse(e.data));
-  });
-
-  fetch("/meta").then(function (r) { return r.json(); }).then(function (m) {
-    session = m.session;
-    applyMeta(m);
-    notesOn = !!m.notesDir;
-    $("notesBtn").hidden = !notesOn;
-    loadNotes();
-    loadAudio(m.audio);
-    setTime(startFrame());
-    $("buffering").classList.add("on");
-    whenPlayer();
-  });
-
-  // The composition's bundle (loaded below) announces its player.
-  function whenPlayer() {
-    if (!window.framefieldsPlayer) return;
-    window.framefieldsPlayer.then(function (p) {
-      player = p;
-      if (audio.mode === "browser") beginStream(p);
-      $("play").disabled = false;
-      show(frame).then(function () {
-        pageState = "ready";
-        renderPins();
-        document.documentElement.dataset.preview = "ready";
-        settleReady();
-        scheduleWarm();
-      });
-    }, function (err) {
-      showError(err);
-      document.documentElement.dataset.preview = "error";
-      settleReady(err instanceof Error ? err : new Error(String(err)));
-    });
-  }
-  window.addEventListener("framefields:player", function () { if (meta) whenPlayer(); });
-  window.addEventListener("error", function (e) {
-    if (!player) showError(e.error || e.message);
-    else report("error", [e.error || e.message]);
-  });
-  window.addEventListener("unhandledrejection", function (e) { report("error", [e.reason]); });
-})();
-<\/script>
-<script type="module" src="/@framefields/player.js"><\/script>
-</body>
-</html>
-`;
-
-//#endregion
-//#region src/preview/peaks.ts
-/** Waveform peaks of a stereo mix: the loudest sample of either channel per bin, 0–1. */
-function computePeaks(left, right, bins) {
-	const peaks = new Array(bins).fill(0);
-	if (left.length === 0) return peaks;
-	const per = left.length / bins;
-	for (let b = 0; b < bins; b++) {
-		const start = Math.floor(b * per);
-		const end = Math.min(left.length, Math.floor((b + 1) * per));
-		let max = 0;
-		for (let i = start; i < end; i++) {
-			const v = Math.max(Math.abs(left[i] ?? 0), Math.abs(right[i] ?? 0));
-			if (v > max) max = v;
-		}
-		peaks[b] = Math.min(1, max);
-	}
-	return peaks;
-}
-/** Bins the page's waveform draws. */
-const PEAK_BINS = 1200;
-/** A mix counts as silent below this peak. */
-const SILENT_PEAK = .001;
-
-//#endregion
-//#region src/preview/index.ts
-/** Requests carrying this header come from another preview process, not a page. */
-const TAKEOVER_HEADER = "x-framefields-preview";
-const PLAYER_PATH = "/@framefields/player.js";
-/**
-* Serves a localhost player for a composition. The page loads the
-* composition's own code, bundled with the engine, and renders its frames
-* with WebGPU in the browser, like the editor's player; nothing is streamed.
-* The server provides the bundle, the project's files, and the soundtrack,
-* which it mixes with the export engine.
-*
-* The server runs until its tab closes or `close()`. Starting another preview
-* on the same port (the default for a project) stops this one, and open tabs
-* reload into it.
-*/
-async function startPreview(source, options = {}) {
-	const entry = source.entry instanceof URL || String(source.entry).startsWith("file:") ? fileURLToPath(source.entry) : path.resolve(String(source.entry));
-	const exportName = source.export ?? "default";
-	const modelsDir = visionModelsDir();
-	const ort = onnxRuntimeWeb(path.dirname(entry));
-	const roots = [
-		...options.root === void 0 ? [repoRoot(path.dirname(entry))] : Array.isArray(options.root) ? options.root : [options.root],
-		modelsDir,
-		ort.dir
-	].filter((r) => !!r).map((r) => path.resolve(r));
-	const sseClients = /* @__PURE__ */ new Set();
-	const idleCloseMs = options.idleCloseMs ?? 5e3;
-	let idleTimer;
-	const title = options.title ?? "framefields preview";
-	const session = randomUUID();
-	const log = options.log === false ? () => {} : options.log ?? ((line) => console.error(line));
-	const say = (line) => log(`[framefields preview] ${line}`);
-	const reported = /* @__PURE__ */ new Set();
-	let pageOpened = false;
-	const notes = options.notesDir === false ? void 0 : new NoteStore(path.resolve(options.notesDir ?? path.join(process.cwd(), ".framefields", "preview-notes")));
-	let noteQueue = Promise.resolve();
-	const assets = await openAssetLocator(path.dirname(entry)).catch((err) => {
-		say(`pinned assets are off: ${err.message}`);
-	});
-	if (assets) inputStore.setMissingMediaResolver((file) => assets.url(file));
-	const unreadable = /* @__PURE__ */ new Set();
-	const target = await loadTarget(entry, exportName);
-	const meta = await resolveMeta(target, title, session, notes?.dir ?? null);
-	let bundle;
-	const playerBundle = () => {
-		if (!bundle) {
-			const built = bundleProject({
-				entry,
-				exportName,
-				modelsDir,
-				ortBase: ort.base
-			}).then((b) => b.code);
-			bundle = built;
-			built.catch((err) => {
-				say(`could not build ${path.relative(process.cwd(), entry)}:\n${errorText(err)}`);
-				if (bundle === built) bundle = void 0;
-			});
-		}
-		return bundle;
-	};
-	const engine = engineDir();
-	engine.catch(() => {});
-	let audio = { state: options.audio === false ? "none" : "browser" };
-	let audioWav;
-	function broadcast(event, data) {
-		for (const client of sseClients) client.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
-	}
-	function setAudio(next) {
-		audio = next;
-		broadcast("audio", audio);
-	}
-	function startAudio() {
-		if (audio.state !== "mixing") return;
-		if (!target.toVirtualMediaAsync && !target.toVirtualMedia) {
-			setAudio({ state: "none" });
-			return;
-		}
-		const renderer = options.renderer ?? new HeadlessMediaRenderer();
-		(async () => {
-			const vm = target.toVirtualMediaAsync ? await target.toVirtualMediaAsync() : target.toVirtualMedia();
-			await target.prepareMediaTime?.();
-			return renderer.renderAudio(vm, { fps: meta.fps });
-		})().then(({ channels, sampleRate }) => {
-			const left = channels[0] ?? new Float32Array(0);
-			const right = channels[1] ?? left;
-			const peaks = computePeaks(left, right, PEAK_BINS);
-			if (left.length === 0 || Math.max(...peaks) < SILENT_PEAK) {
-				setAudio({ state: "none" });
-				return;
-			}
-			audioWav = encodeStereoWav([left, right], { sampleRate });
-			setAudio({
-				state: "ready",
-				durationSec: left.length / sampleRate,
-				peaks: peaks.map((p) => Math.round(p * 1e3) / 1e3)
-			});
-		}, (err) => {
-			setAudio({
-				state: "error",
-				error: err instanceof Error ? err.message : String(err)
-			});
-		});
-	}
-	let resolveClosed;
-	const closed = new Promise((r) => {
-		resolveClosed = r;
-	});
-	let closing;
-	function close(reason = "closed") {
-		closing ??= new Promise((resolve$1) => {
-			clearTimeout(idleTimer);
-			if (reason === "idle") say("stopped: its tab was closed");
-			if (reason === "replaced") say("stopped: a newer preview took over");
-			for (const client of sseClients) client.end();
-			sseClients.clear();
-			if (assets) inputStore.setMissingMediaResolver();
-			server.close(() => {
-				resolve$1();
-				resolveClosed(reason);
-			});
-			server.closeAllConnections();
-		});
-		return closing;
-	}
-	const server = http.createServer(async (req, res) => {
-		const url$1 = new URL(req.url ?? "/", "http://localhost");
-		res.setHeader("cross-origin-opener-policy", "same-origin");
-		res.setHeader("cross-origin-embedder-policy", "credentialless");
-		try {
-			if (req.method === "GET" && url$1.pathname === "/") {
-				res.writeHead(200, {
-					"content-type": "text/html; charset=utf-8",
-					"cache-control": "no-store"
-				});
-				res.end(previewPage);
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname === "/meta") {
-				sendJson(res, 200, {
-					...meta,
-					audio
-				});
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname.startsWith(`${ENGINE_URL}/`)) {
-				const dir = await engine;
-				const file = path.resolve(dir, `.${url$1.pathname.slice(ENGINE_URL.length)}`);
-				if (isInside(dir, file) && await isFile(file)) {
-					await sendFile(req, res, file);
-					return;
-				}
-				sendJson(res, 404, { error: "not found" });
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname === PLAYER_PATH) {
-				let code;
-				try {
-					await engine;
-					code = await playerBundle();
-				} catch (err) {
-					const message = err instanceof Error ? err.message : String(err);
-					code = `throw new Error(${JSON.stringify(`Could not build the preview:\n${message}`)});`;
-				}
-				res.writeHead(200, {
-					"content-type": "text/javascript; charset=utf-8",
-					"cache-control": "no-store"
-				});
-				res.end(code);
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname === "/@framefields/stat") {
-				const file = path.resolve(url$1.searchParams.get("path") ?? "");
-				let size = -1;
-				if (roots.some((r) => isInside(r, file))) size = await fs.promises.stat(file).then((st) => st.isFile() ? st.size : -1, () => assets?.entry(file)?.size ?? -1);
-				sendJson(res, 200, {
-					exists: size >= 0,
-					size: Math.max(0, size)
-				});
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname === "/events") {
-				res.writeHead(200, {
-					"content-type": "text/event-stream",
-					"cache-control": "no-store",
-					connection: "keep-alive"
-				});
-				res.write("retry: 1000\n");
-				res.write(`event: hello\ndata: ${JSON.stringify({ session: meta.session })}\n\n`);
-				sseClients.add(res);
-				clearTimeout(idleTimer);
-				if (!pageOpened) {
-					pageOpened = true;
-					say(idleCloseMs === false ? "page opened" : `page opened; the server stops ${Number((idleCloseMs / 1e3).toFixed(1))} s after its last tab closes`);
-				}
-				onClient?.();
-				req.on("close", () => {
-					sseClients.delete(res);
-					if (sseClients.size === 0 && idleCloseMs !== false && !closing) idleTimer = setTimeout(() => {
-						if (sseClients.size === 0) close("idle");
-					}, idleCloseMs);
-				});
-				return;
-			}
-			if (req.method === "POST" && url$1.pathname === "/takeover" && req.headers[TAKEOVER_HEADER] === "1") {
-				sendJson(res, 200, { ok: true });
-				setImmediate(() => void close("replaced"));
-				return;
-			}
-			if (req.method === "POST" && url$1.pathname === "/@framefields/log" && req.headers["content-type"] === "application/json") {
-				const body = await readBody(req, 16 * 1024);
-				const { message, level } = JSON.parse(body);
-				const text = String(message ?? "").trim();
-				if (text && !reported.has(text) && reported.size < 200) {
-					reported.add(text);
-					say(`${level === "warning" ? "warning" : "error"} in the page: ${text}`);
-				}
-				res.writeHead(204).end();
-				return;
-			}
-			if (notes && url$1.pathname === "/@framefields/notes") {
-				if (req.method === "GET") {
-					sendJson(res, 200, await notes.list());
-					return;
-				}
-				if (req.method === "POST" && req.headers["content-type"] === "application/json") {
-					const body = JSON.parse(await readBody(req, 16 * 1024 * 1024));
-					const change = noteQueue.then(() => changeNote(notes, body, meta.fps, say));
-					noteQueue = change.catch(() => {});
-					const note = await change;
-					broadcast("notes", await notes.list());
-					sendJson(res, note ? 200 : 404, note ?? { error: "no such note" });
-					return;
-				}
-			}
-			if (req.method === "POST" && url$1.pathname === "/audio/mix") {
-				if (audio.state === "browser" || audio.state === "error") {
-					audio = { state: "mixing" };
-					startAudio();
-				}
-				sendJson(res, 202, audio);
-				return;
-			}
-			if (req.method === "GET" && url$1.pathname === "/audio") {
-				if (audio.state !== "ready" || !audioWav) {
-					sendJson(res, 404, { error: `audio is ${audio.state}` });
-					return;
-				}
-				res.writeHead(200, {
-					"content-type": "audio/wav",
-					"content-length": audioWav.length,
-					"cache-control": "no-store"
-				});
-				res.end(audioWav);
-				return;
-			}
-			const fontMatch = /^\/assets\/fonts\/([^/]+)$/.exec(url$1.pathname);
-			if (fontMatch && (req.method === "GET" || req.method === "HEAD")) {
-				const file = path.join(process.cwd(), "assets", "fonts", decodeURIComponent(fontMatch[1]));
-				if (await isFile(file)) {
-					await sendFile(req, res, file);
-					return;
-				}
-			}
-			if (req.method === "GET" || req.method === "HEAD") {
-				const file = path.resolve(decodeURIComponent(url$1.pathname.replace(/^\/@fs(?=\/)/, "")));
-				if (roots.some((r) => isInside(r, file)) && await isFile(file)) {
-					await sendFile(req, res, file);
-					return;
-				}
-				if (assets && await redirectToBucket(res, assets, file, unreadable, say)) return;
-			}
-			sendJson(res, 404, { error: "not found" });
-		} catch (err) {
-			if (!res.headersSent) sendJson(res, 500, { error: err instanceof Error ? err.message : String(err) });
-			else res.end();
-		}
-	});
-	let onClient;
-	const host = options.host ?? "127.0.0.1";
-	const port = options.port ?? stablePort();
-	const listen = (p) => new Promise((resolve$1, reject) => {
-		const fail = (err) => {
-			server.off("listening", ok);
-			reject(err);
-		};
-		const ok = () => {
-			server.off("error", fail);
-			resolve$1();
-		};
-		server.once("error", fail);
-		server.once("listening", ok);
-		server.listen(p, host);
-	});
-	try {
-		await listen(port);
-	} catch (err) {
-		if (err.code !== "EADDRINUSE") throw err;
-		if (await requestTakeover(host, port)) await listen(port).catch(() => listen(0));
-		else if (options.port === void 0) await listen(0);
-		else throw err;
-	}
-	const { port: actualPort } = server.address();
-	const url = `http://${host.includes(":") ? `[${host}]` : host}:${actualPort}/`;
-	playerBundle().catch(() => {});
-	if (options.open === true) {
-		const reconnected = await new Promise((resolve$1) => {
-			const timer = setTimeout(() => resolve$1(false), 2e3);
-			onClient = () => {
-				clearTimeout(timer);
-				resolve$1(true);
-			};
-			if (sseClients.size > 0) onClient();
-		});
-		onClient = void 0;
-		if (!reconnected) openBrowser(url);
-	}
-	return {
-		url,
-		closed,
-		close: () => close()
-	};
-}
-async function loadTarget(entry, exportName) {
-	const exported = (await import(pathToFileURL(entry).href))[exportName];
-	if (exported === void 0) throw new Error(`[framefields] ${entry} has no export named "${exportName}" to preview.`);
-	return typeof exported === "function" ? await exported() : exported;
-}
-/**
-* The project holding `dir`: the nearest `.git`, else the nearest
-* `package.json`, else `dir` itself. A repo wins over a nested package, so a
-* monorepo's shared assets stay reachable.
-*/
-function repoRoot(dir) {
-	let project;
-	for (let d = dir;; d = path.dirname(d)) {
-		if (fs.existsSync(path.join(d, ".git"))) return d;
-		if (!project && fs.existsSync(path.join(d, "package.json"))) project = d;
-		if (path.dirname(d) === d) return project ?? dir;
-	}
-}
-/** Applies one change from the page and says what it was. */
-async function changeNote(notes, body, fps, say) {
-	if (body.op === "add" && body.note && String(body.note.text).trim()) {
-		const note = await notes.add(body.note);
-		const files = [note.image && `frame with the spot marked: ${note.image}`, `all notes: ${notes.file}`];
-		say(`${describeNote(note, fps)}\n  ${files.filter(Boolean).join(" · ")}`);
-		return note;
-	}
-	const id = Number(body.id);
-	if (body.op === "update") {
-		const note = await notes.update(id, body);
-		if (note && typeof body.done === "boolean") say(`note ${id} marked ${note.done ? "done" : "open"}`);
-		return note;
-	}
-	if (body.op === "remove") {
-		const note = await notes.remove(id);
-		if (note) say(`note ${id} deleted`);
-		return note;
-	}
-}
-function errorText(err) {
-	return err instanceof Error ? err.message : String(err);
-}
-function readBody(req, limit) {
-	return new Promise((resolve$1, reject) => {
-		let body = "";
-		req.setEncoding("utf8");
-		req.on("data", (chunk) => {
-			body += chunk;
-			if (body.length > limit) {
-				reject(/* @__PURE__ */ new Error("request body too large"));
-				req.destroy();
-			}
-		});
-		req.on("end", () => resolve$1(body));
-		req.on("error", reject);
-	});
-}
-function isInside(root, file) {
-	const rel = path.relative(root, file);
-	return !!rel && !rel.startsWith("..") && !path.isAbsolute(rel);
-}
-async function isFile(file) {
-	try {
-		return (await fs.promises.stat(file)).isFile();
-	} catch {
-		return false;
-	}
-}
-const CONTENT_TYPES = {
-	".png": "image/png",
-	".jpg": "image/jpeg",
-	".jpeg": "image/jpeg",
-	".webp": "image/webp",
-	".gif": "image/gif",
-	".svg": "image/svg+xml",
-	".mp4": "video/mp4",
-	".mov": "video/quicktime",
-	".webm": "video/webm",
-	".mp3": "audio/mpeg",
-	".wav": "audio/wav",
-	".m4a": "audio/mp4",
-	".ogg": "audio/ogg",
-	".ttf": "font/ttf",
-	".otf": "font/otf",
-	".woff": "font/woff",
-	".woff2": "font/woff2",
-	".json": "application/json",
-	".js": "text/javascript; charset=utf-8",
-	".mjs": "text/javascript; charset=utf-8",
-	".wasm": "application/wasm",
-	".onnx": "application/octet-stream",
-	".srt": "text/plain; charset=utf-8",
-	".txt": "text/plain; charset=utf-8"
-};
-/**
-* Sends the page to the bucket for a pinned asset that isn't on disk. The
-* bucket must allow this page's origin (CORS): the engine reads media with
-* `fetch`. True when it answered.
-*/
-async function redirectToBucket(res, assets, file, unreadable, say) {
-	if (!assets.entry(file)) return false;
-	const url = await assets.url(file);
-	if (url) {
-		res.writeHead(302, {
-			location: url,
-			"cache-control": "no-store"
-		});
-		res.end();
-		return true;
-	}
-	const rel = path.relative(assets.root, file);
-	if (!unreadable.has(rel)) {
-		unreadable.add(rel);
-		say(`${rel} is pinned on a private remote and there are no keys here: set its FRAMEFIELDS_STORAGE_* keys, give the remote a publicUrl, or \`npx framefields assets pull\``);
-	}
-	return false;
-}
-/** Serves a file, with byte ranges so video can seek without loading it whole. */
-async function sendFile(req, res, file) {
-	const { size } = await fs.promises.stat(file);
-	const type = CONTENT_TYPES[path.extname(file).toLowerCase()] ?? "application/octet-stream";
-	const range = /^bytes=(\d*)-(\d*)$/.exec(req.headers.range ?? "");
-	let start = 0;
-	let end = size - 1;
-	if (range && (range[1] || range[2])) {
-		if (range[1]) {
-			start = Number(range[1]);
-			if (range[2]) end = Math.min(end, Number(range[2]));
-		} else start = Math.max(0, size - Number(range[2]));
-		if (start > end || start >= size) {
-			res.writeHead(416, { "content-range": `bytes */${size}` });
-			res.end();
-			return;
-		}
-	}
-	res.writeHead(range ? 206 : 200, {
-		"content-type": type,
-		"content-length": end - start + 1,
-		"accept-ranges": "bytes",
-		"cache-control": "no-cache",
-		...range && { "content-range": `bytes ${start}-${end}/${size}` }
-	});
-	if (req.method === "HEAD") {
-		res.end();
-		return;
-	}
-	fs.createReadStream(file, {
-		start,
-		end
-	}).pipe(res);
-}
-async function resolveMeta(target, title, session, notesDir) {
-	const fps = target.fps ?? 24;
-	const durationMs = target.durationMs ?? await target.computeDuration?.() ?? 5e3;
-	return {
-		session,
-		notesDir,
-		title,
-		fps,
-		frameCount: Math.max(1, Math.round(durationMs / 1e3 * fps)),
-		width: target.width ?? 1920,
-		height: target.height ?? 1080
-	};
-}
-/** Same project, same port: 41000–41899, from the working directory. */
-function stablePort() {
-	return 41e3 + createHash("sha1").update(process.cwd()).digest().readUInt16BE(0) % 900;
-}
-/** Asks a preview already on `port` to shut down; false if something else is there. */
-async function requestTakeover(host, port) {
-	const ok = await new Promise((resolve$1) => {
-		const req = http.request({
-			host,
-			port,
-			method: "POST",
-			path: "/takeover",
-			agent: false,
-			headers: { [TAKEOVER_HEADER]: "1" },
-			timeout: 1500
-		}, (res) => {
-			res.resume();
-			resolve$1(res.statusCode === 200);
-		});
-		req.on("timeout", () => req.destroy());
-		req.on("error", () => resolve$1(false));
-		req.end();
-	});
-	if (ok) await new Promise((r) => setTimeout(r, 150));
-	return ok;
-}
-/** Max absolute amplitude of both channels per bin, 0..1. */
-function sendJson(res, status, body) {
-	res.writeHead(status, {
-		"content-type": "application/json",
-		"cache-control": "no-store"
-	});
-	res.end(JSON.stringify(body));
-}
-function openBrowser(url) {
-	const [cmd, args] = process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", [
-		"/c",
-		"start",
-		"",
-		url
-	]] : ["xdg-open", [url]];
-	try {
-		spawn(cmd, args, {
-			stdio: "ignore",
-			detached: true
-		}).on("error", () => {}).unref();
-	} catch {}
-}
-
-//#endregion
-export { startPreview as t };
-//# sourceMappingURL=preview-lHH8Tv4j.mjs.map