framefields 2.14.0 → 2.16.0

package/dist/preview-Dm912wly.mjs

@@ -0,0 +1,1037 @@
+import { q as inputStore } from "./dist-XqlFM2a8.mjs";
+import { t as encodeStereoWav } from "./audio-DS9Jg2ls.mjs";
+import { s as HeadlessMediaRenderer } from "./renderer-tvYj306A.mjs";
+import { h as openAssetLocator } from "./dist-f1zkl69f.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).
+*
+* The page around them (`buildPage`) is its own small bundle: the Lit UI in
+* `ui/`, shipped prebuilt in `dist/preview-page`, or built on first use.
+*
+* 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";
+/** URL prefix the server serves the page's script and styles under. */
+const PAGE_URL = "/@framefields/ui";
+/** 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
+	};
+}
+/**
+* Builds the preview page into `outDir`: `index.html`, and `main.js` and
+* `main.css` from the UI's sources (Lit included; nothing else of the page
+* reaches a project's code). `dev` keeps it readable, with a source map.
+*/
+async function buildPage(outDir, { dev = false } = {}) {
+	const { build } = await import("esbuild");
+	const ui = path.join(HERE, "ui");
+	await fs.promises.rm(outDir, {
+		recursive: true,
+		force: true
+	});
+	await build({
+		...BROWSER,
+		entryPoints: { main: path.join(ui, "main.ts") },
+		outdir: outDir,
+		minify: !dev,
+		sourcemap: dev ? "inline" : false,
+		conditions: ["browser", "import"],
+		plugins: [{
+			name: "framefields-page",
+			setup(b) {
+				b.onResolve({ filter: /^(node:|@framefields\/)/ }, (args) => ({ errors: [{ text: `the preview page may not import ${args.path} (from ${args.importer})` }] }));
+			}
+		}]
+	});
+	await fs.promises.copyFile(path.join(ui, "index.html"), path.join(outDir, "index.html"));
+}
+/**
+* A prebuilt folder shipped beside a compiled bundle (`dist/<name>`), 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 prebuiltDir(here, name, marker) {
+	return [here, path.join(here, "..")].map((base) => path.join(base, name)).find((dir) => fs.existsSync(path.join(dir, marker)));
+}
+/** The prebuilt engine shipped beside a compiled bundle, if there is one. */
+function prebuiltEngineDir(here) {
+	return prebuiltDir(here, "preview-engine", "player.mjs");
+}
+const builds = /* @__PURE__ */ new Map();
+/**
+* `name` prebuilt in the package's dist or, running from source (where HERE
+* is src/preview, so the lookup misses), built once per process into a
+* temporary folder, so edits show without a package build.
+*/
+function prebuiltOrBuild(prebuilt, name, build) {
+	if (prebuilt) return Promise.resolve(prebuilt);
+	let pending = builds.get(name);
+	if (!pending) {
+		const dir = path.join(os.tmpdir(), `framefields-${name}-${process.pid}`);
+		pending = build(dir).then(() => dir);
+		builds.set(name, pending);
+		pending.catch(() => builds.delete(name));
+	}
+	return pending;
+}
+/** The browser engine to serve. */
+function engineDir() {
+	return prebuiltOrBuild(prebuiltEngineDir(HERE), "preview-engine", buildEngine);
+}
+/** The preview page to serve. */
+function pageDir() {
+	return prebuiltOrBuild(prebuiltDir(HERE, "preview-page", "main.js"), "preview-page", (dir) => buildPage(dir, { dev: true }));
+}
+/** 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/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/embed-protocol.ts
+/**
+* The preview page's message channel with an app that embeds it in a frame
+* (protocol 1). The page talks only when embedded, with
+* `window.parent.postMessage(message, "*")`, and takes commands only from
+* `window.parent`. Every message has a `type` starting `framefields-preview:`.
+*
+* Page → parent: `ready` once the first frame shows; `state` on play, pause,
+* each finished seek, and up to 4 times a second while playing; `build`
+* around a rebuild (and `error` when a build or a frame fails); `reply` to
+* each command. Parent → page: `command`, answered by a `reply` with its `id`.
+*
+* The page also seeks when its address fragment changes (`#t=12.5`,
+* `#frame=375`), without a reload; `seekByHash` in `ready` says so.
+*/
+const PREVIEW_PROTOCOL = 1;
+const COMMANDS = new Set([
+	"seek",
+	"seekFrame",
+	"play",
+	"pause",
+	"state"
+]);
+/** The command in a message from the parent, or null when it isn't a well-formed one. */
+function readPreviewCommand(data) {
+	if (typeof data !== "object" || data === null) return null;
+	const m = data;
+	if (m.type !== "framefields-preview:command" || typeof m.id !== "string") return null;
+	if (typeof m.command !== "string" || !COMMANDS.has(m.command)) return null;
+	if (m.command === "seek" && !Number.isFinite(m.time)) return null;
+	if (m.command === "seekFrame" && !Number.isFinite(m.frame)) return null;
+	return m;
+}
+
+//#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(() => {});
+	const page = pageDir();
+	page.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 === "/") {
+				await sendFile(req, res, path.join(await page, "index.html"), true);
+				return;
+			}
+			if (req.method === "GET" && url$1.pathname === "/meta") {
+				sendJson(res, 200, {
+					...meta,
+					audio
+				});
+				return;
+			}
+			for (const [prefix, dir] of [[ENGINE_URL, engine], [PAGE_URL, page]]) {
+				if (req.method !== "GET" || !url$1.pathname.startsWith(`${prefix}/`)) continue;
+				const root = await dir;
+				const file = path.resolve(root, `.${url$1.pathname.slice(prefix.length)}`);
+				if (isInside(root, file) && await isFile(file)) await sendFile(req, res, file, prefix === PAGE_URL);
+				else 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",
+	".html": "text/html; charset=utf-8",
+	".css": "text/css; charset=utf-8",
+	".map": "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, noStore = false) {
+	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": noStore ? "no-store" : "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 { PREVIEW_PROTOCOL as n, readPreviewCommand as r, startPreview as t };
+//# sourceMappingURL=preview-Dm912wly.mjs.map