creator-editing-studio 1.3.5 → 1.3.7

package/template/STYLE.md

@@ -1,179 +1,179 @@
-<!-- This is YOUR style guide, and it starts deliberately half-empty.
-
-     Parts 1 to 6 are craft standards: things that hold for any brand, most of them
-     measured rather than argued. Leave them alone until you have a reason not to, and
-     your edits will come out clean rather than random.
-
-     Parts 7 and 8 are yours and begin blank. Every time you approve or reject something,
-     write it down there. That is the half that makes edits look like YOURS instead of
-     merely competent, and it is the half nobody can hand you. -->
-
-# House style
-
-What every edit must look, move and sound like. `CLAUDE.md` says *how* to build; this
-file says *what it must come out like*.
-
-When this file and a reference disagree, this file wins unless you say otherwise.
-
----
-
-## 1. Your identity
-
-Everything visual comes from `src/design/tokens.ts`. That file is the single source of
-your typeface, your colours, your spacing and your type scale — change it there and every
-video changes with it. Never hard-code a colour or a font family into a composition.
-
-- **Type:** one display typeface. Heavy weights for headlines, numbers and hero words;
-  medium for labels and pointers.
-- **Colour:** one accent, plus ink and a light ground. Resist a second accent — two
-  accents read as a template, one reads as a brand.
-- On footage: accent text, with a soft glow so it survives a busy frame.
-- On a light ground: ink text, with the accent used only to mark the word that matters.
-
-## 2. Type scale
-
-Sizes are a starting ladder, not a law. What matters is that you keep to *a* ladder.
-
-| Role | 16:9 (1920x1080) | 9:16 (1080x1920) | Notes |
-|---|---|---|---|
-| Hero word | 200–320px | 130–220px | One on screen at a time, never two |
-| Headline | ~116px | ~100px | Tight tracking, around -0.03em |
-| Big number | ~170px | ~150px | Tabular digits while a counter runs |
-| Label / eyebrow | ~40px | ~32px | Uppercase, open tracking, ~0.14em |
-| Pointer / list item | ~42px | ~36px | |
-| Captions | 46px | 42px | Crisp white, bold, soft dark shadow |
-
-**If a word needs to be bigger than the ladder to feel important, the layout is wrong,
-not the size.** Oversized type is the most common way an edit starts looking amateur.
-
-## 3. Layout
-
-- **The speaker stays full screen by default.** Rounded cards and frames around a talking
-  head make the edit look assembled rather than shot. A card is fine as a *transition*,
-  not as a container.
-- Put text in the clear space the shot already gives you: sky, a wall, out-of-focus
-  background. Check where the head lands on every cut before committing a position.
-- Captions live in one consistent zone per layout, over a dark area. They hide while the
-  same words are on screen as a graphic, and never linger into the next scene.
-- Graphics are built from type, numbers, real screenshots and real footage. Decorative
-  shapes that mean nothing age badly and read as filler.
-
-## 4. Motion
-
-- The motion laws in `CLAUDE.md`, always. Eased, motion-blurred, nothing pops into place.
-- **Zoom through jump cuts.** A small push on the cut hides the join; a hard snap exposes it.
-- **Hard cuts only as a deliberate burst** — a few beats of solid colour synced to the
-  words, then back to smooth. Everything else morphs from one state to the next.
-- Cover anything off-camera — reading, looking away, a fumble — with a graphic or a cut.
-- Counters start at zero and only go up. No grey placeholder digits.
-- Vary your shot lengths. Cutting everything to the same duration is the clearest sign
-  an edit was made by a machine rather than by someone making decisions.
-
-## 5. Sound (half the reel)
-
-- **The voice is never processed.** No reverb, no heavy compression, no "enhancement".
-- Sound effects are short — whooshes 0.4–0.8s, hits 0.3–0.6s — faded, and placed in the
-  gaps between words rather than under them.
-- Every new visual gets its own fitting sound. Reusing a sound that belonged to a
-  different look is the audio version of a template.
-- **Subtle beats loud.** Big cinematic impacts on text almost always read as too much.
-- Hand over voice and SFX stems plus a timecoded cue sheet with every delivery.
-
-## 6. Colour, film looks and presets
-
-**Most of a look comes from the shoot, not the grade.** Golden hour or one good window,
-light behind or beside the subject, background well behind the subject, white balance
-fixed rather than auto. Automated grading is a starting point and only when the footage's
-light already resembles the reference — on mismatched light it will look wrong, and you
-should trust your eye over any automatic match.
-
-| Transition | When |
-|---|---|
-| whipPan | Between unrelated shots. Never twice in a row. |
-| push | Moving forward through a list or a sequence. |
-| maskWipe | A calm reveal. Pairs with a soft sound. |
-| colourFlip | A burst on a phrase. Two or three, then back to smooth. |
-| matchCut | Only when both shots share a shape or a direction. |
-| dip | Changing subject without drama. |
-
-| Caption look | When |
-|---|---|
-| clean | Default. Works over almost anything. |
-| block | Busy or bright footage, where white alone gets lost. |
-| highlight | Keeps the eye on the word being spoken. |
-| pop | Fast edits. Not over heavy motion. |
-
-| Film look | When |
-|---|---|
-| none | Graphics, screen recordings, anything where text is the subject. |
-| clean | Default for a talking head. Enough grain to stop flat areas banding. |
-| film | B-roll and travel. The one to reach for first. |
-| super8 | Memory and nostalgia moments only. Never a whole video. |
-| cinema | A held, wide, quiet shot. |
-
-**Three things here were measured, not guessed. Do not quietly undo them:**
-
-- Grain composites **normally**, not with `overlay`. On flat cream or flat ink there are
-  no midtones, and overlay grain measures 0.000 stddev — the layer does nothing at all.
-- Grain is paid for in black level — blacks lift measurably at medium strength. Raise it
-  per shot when a nostalgia moment is worth milkier blacks; never raise the default.
-- Halation blooms **highlights only**. The plate is crushed to black before it is blurred
-  and screened back. Without that crush, a bright frame blooms end to end and the blacks
-  go brown.
-
-Speed ramps are eased, never a hard speed switch. Below 0.4x needs 50fps or higher source
-footage — you cannot rescue slow motion that was not shot for it.
-
----
-
-## 7. Where these defaults end and you begin
-
-The sections above are **defaults**: a starting point tuned so that a video made on day one,
-before you have told the system anything, comes out clean rather than embarrassing. Captions
-sit at a readable size with a measured shadow, cuts are eased, grain is restrained, the voice
-is untouched.
-
-Defaults are also the reason an edit can come out *anonymous*. They are what everybody gets.
-Three things move an edit from the default toward yours, in increasing order of power:
-
-**1. Your tokens.** `src/design/tokens.ts` carries your typeface, your colours, your scale.
-This makes an edit *yours to look at* immediately.
-
-**2. Your references.** Saved moments from edits you admire, each with a timecode and a note
-on what you like about that exact moment. These are read before the plan for every video, and
-they beat the defaults wherever the two disagree — a default is a guess that suits everyone,
-a reference is a fact about you.
-
-Roughly: **none** gives you clean and forgettable. **Three** is enough to spot a pattern.
-**Seven or eight** is enough to tell a preference from a coincidence, and it is where edits
-start looking authored.
-
-**3. This file, as it fills up.** Sections 8 and 9 are the part no default can supply and no
-competitor can copy, because they are a record of decisions only you have made. Every entry
-narrows the next edit toward what you actually want.
-
-Nothing here learns on its own. It gets better because the brief gets richer — so the ten
-minutes spent writing down why you rejected something is the highest-return ten minutes
-available to you.
-
----
-
-## 8. Approved (your effects library)
-
-<!-- Empty on purpose. When something works, write it down here: what it is, and where
-     you approved it. Next time you can ask for it by name instead of describing it
-     again, and every future video inherits the decision. -->
-
-| Beat | What it is | Where you approved it |
-|---|---|---|
-| | | |
-
-## 9. Rejected (don't do these again)
-
-<!-- This table is worth more than the one above. A list of things you have ruled out is
-     the fastest way to stop an edit drifting back toward generic, because it removes
-     options rather than adding them. Add a line every time you say "not that". -->
-
-| What | Why | Where |
-|---|---|---|
-| | | |
+<!-- This is YOUR style guide, and it starts deliberately half-empty.
+
+     Parts 1 to 6 are craft standards: things that hold for any brand, most of them
+     measured rather than argued. Leave them alone until you have a reason not to, and
+     your edits will come out clean rather than random.
+
+     Parts 7 and 8 are yours and begin blank. Every time you approve or reject something,
+     write it down there. That is the half that makes edits look like YOURS instead of
+     merely competent, and it is the half nobody can hand you. -->
+
+# House style
+
+What every edit must look, move and sound like. `CLAUDE.md` says *how* to build; this
+file says *what it must come out like*.
+
+When this file and a reference disagree, this file wins unless you say otherwise.
+
+---
+
+## 1. Your identity
+
+Everything visual comes from `src/design/tokens.ts`. That file is the single source of
+your typeface, your colours, your spacing and your type scale — change it there and every
+video changes with it. Never hard-code a colour or a font family into a composition.
+
+- **Type:** one display typeface. Heavy weights for headlines, numbers and hero words;
+  medium for labels and pointers.
+- **Colour:** one accent, plus ink and a light ground. Resist a second accent — two
+  accents read as a template, one reads as a brand.
+- On footage: accent text, with a soft glow so it survives a busy frame.
+- On a light ground: ink text, with the accent used only to mark the word that matters.
+
+## 2. Type scale
+
+Sizes are a starting ladder, not a law. What matters is that you keep to *a* ladder.
+
+| Role | 16:9 (1920x1080) | 9:16 (1080x1920) | Notes |
+|---|---|---|---|
+| Hero word | 200–320px | 130–220px | One on screen at a time, never two |
+| Headline | ~116px | ~100px | Tight tracking, around -0.03em |
+| Big number | ~170px | ~150px | Tabular digits while a counter runs |
+| Label / eyebrow | ~40px | ~32px | Uppercase, open tracking, ~0.14em |
+| Pointer / list item | ~42px | ~36px | |
+| Captions | 46px | 42px | Crisp white, bold, soft dark shadow |
+
+**If a word needs to be bigger than the ladder to feel important, the layout is wrong,
+not the size.** Oversized type is the most common way an edit starts looking amateur.
+
+## 3. Layout
+
+- **The speaker stays full screen by default.** Rounded cards and frames around a talking
+  head make the edit look assembled rather than shot. A card is fine as a *transition*,
+  not as a container.
+- Put text in the clear space the shot already gives you: sky, a wall, out-of-focus
+  background. Check where the head lands on every cut before committing a position.
+- Captions live in one consistent zone per layout, over a dark area. They hide while the
+  same words are on screen as a graphic, and never linger into the next scene.
+- Graphics are built from type, numbers, real screenshots and real footage. Decorative
+  shapes that mean nothing age badly and read as filler.
+
+## 4. Motion
+
+- The motion laws in `CLAUDE.md`, always. Eased, motion-blurred, nothing pops into place.
+- **Zoom through jump cuts.** A small push on the cut hides the join; a hard snap exposes it.
+- **Hard cuts only as a deliberate burst** — a few beats of solid colour synced to the
+  words, then back to smooth. Everything else morphs from one state to the next.
+- Cover anything off-camera — reading, looking away, a fumble — with a graphic or a cut.
+- Counters start at zero and only go up. No grey placeholder digits.
+- Vary your shot lengths. Cutting everything to the same duration is the clearest sign
+  an edit was made by a machine rather than by someone making decisions.
+
+## 5. Sound (half the reel)
+
+- **The voice is never processed.** No reverb, no heavy compression, no "enhancement".
+- Sound effects are short — whooshes 0.4–0.8s, hits 0.3–0.6s — faded, and placed in the
+  gaps between words rather than under them.
+- Every new visual gets its own fitting sound. Reusing a sound that belonged to a
+  different look is the audio version of a template.
+- **Subtle beats loud.** Big cinematic impacts on text almost always read as too much.
+- Hand over voice and SFX stems plus a timecoded cue sheet with every delivery.
+
+## 6. Colour, film looks and presets
+
+**Most of a look comes from the shoot, not the grade.** Golden hour or one good window,
+light behind or beside the subject, background well behind the subject, white balance
+fixed rather than auto. Automated grading is a starting point and only when the footage's
+light already resembles the reference — on mismatched light it will look wrong, and you
+should trust your eye over any automatic match.
+
+| Transition | When |
+|---|---|
+| whipPan | Between unrelated shots. Never twice in a row. |
+| push | Moving forward through a list or a sequence. |
+| maskWipe | A calm reveal. Pairs with a soft sound. |
+| colourFlip | A burst on a phrase. Two or three, then back to smooth. |
+| matchCut | Only when both shots share a shape or a direction. |
+| dip | Changing subject without drama. |
+
+| Caption look | When |
+|---|---|
+| clean | Default. Works over almost anything. |
+| block | Busy or bright footage, where white alone gets lost. |
+| highlight | Keeps the eye on the word being spoken. |
+| pop | Fast edits. Not over heavy motion. |
+
+| Film look | When |
+|---|---|
+| none | Graphics, screen recordings, anything where text is the subject. |
+| clean | Default for a talking head. Enough grain to stop flat areas banding. |
+| film | B-roll and travel. The one to reach for first. |
+| super8 | Memory and nostalgia moments only. Never a whole video. |
+| cinema | A held, wide, quiet shot. |
+
+**Three things here were measured, not guessed. Do not quietly undo them:**
+
+- Grain composites **normally**, not with `overlay`. On flat cream or flat ink there are
+  no midtones, and overlay grain measures 0.000 stddev — the layer does nothing at all.
+- Grain is paid for in black level — blacks lift measurably at medium strength. Raise it
+  per shot when a nostalgia moment is worth milkier blacks; never raise the default.
+- Halation blooms **highlights only**. The plate is crushed to black before it is blurred
+  and screened back. Without that crush, a bright frame blooms end to end and the blacks
+  go brown.
+
+Speed ramps are eased, never a hard speed switch. Below 0.4x needs 50fps or higher source
+footage — you cannot rescue slow motion that was not shot for it.
+
+---
+
+## 7. Where these defaults end and you begin
+
+The sections above are **defaults**: a starting point tuned so that a video made on day one,
+before you have told the system anything, comes out clean rather than embarrassing. Captions
+sit at a readable size with a measured shadow, cuts are eased, grain is restrained, the voice
+is untouched.
+
+Defaults are also the reason an edit can come out *anonymous*. They are what everybody gets.
+Three things move an edit from the default toward yours, in increasing order of power:
+
+**1. Your tokens.** `src/design/tokens.ts` carries your typeface, your colours, your scale.
+This makes an edit *yours to look at* immediately.
+
+**2. Your references.** Saved moments from edits you admire, each with a timecode and a note
+on what you like about that exact moment. These are read before the plan for every video, and
+they beat the defaults wherever the two disagree — a default is a guess that suits everyone,
+a reference is a fact about you.
+
+Roughly: **none** gives you clean and forgettable. **Three** is enough to spot a pattern.
+**Seven or eight** is enough to tell a preference from a coincidence, and it is where edits
+start looking authored.
+
+**3. This file, as it fills up.** Sections 8 and 9 are the part no default can supply and no
+competitor can copy, because they are a record of decisions only you have made. Every entry
+narrows the next edit toward what you actually want.
+
+Nothing here learns on its own. It gets better because the brief gets richer — so the ten
+minutes spent writing down why you rejected something is the highest-return ten minutes
+available to you.
+
+---
+
+## 8. Approved (your effects library)
+
+<!-- Empty on purpose. When something works, write it down here: what it is, and where
+     you approved it. Next time you can ask for it by name instead of describing it
+     again, and every future video inherits the decision. -->
+
+| Beat | What it is | Where you approved it |
+|---|---|---|
+| | | |
+
+## 9. Rejected (don't do these again)
+
+<!-- This table is worth more than the one above. A list of things you have ruled out is
+     the fastest way to stop an edit drifting back toward generic, because it removes
+     options rather than adding them. Add a line every time you say "not that". -->
+
+| What | Why | Where |
+|---|---|---|
+| | | |

package/template/package.json

@@ -17,6 +17,7 @@
     "stills": "node scripts/stills.mjs",
     "refs": "node scripts/refs.mjs",
     "refstyle": "node scripts/refstyle.mjs",
+    "refmotion": "node scripts/refmotion.mjs",
     "beats": "node scripts/beats.mjs",
     "sync": "node scripts/sync-audio.mjs",
     "ramp": "node scripts/ramp.mjs",
@@ -25,16 +26,20 @@
     "sound": "node scripts/sounddesign.mjs"
   },
   "dependencies": {
-    "ffmpeg-static": "5.3.0",
-    "ffprobe-static": "3.1.0",
+    "@modelcontextprotocol/ext-apps": "1.7.5",
+    "@modelcontextprotocol/sdk": "1.32.1",
     "@remotion/cli": "4.0.525",
     "@remotion/fonts": "4.0.525",
     "@remotion/google-fonts": "4.0.525",
     "@remotion/media-utils": "4.0.525",
     "@remotion/motion-blur": "4.0.525",
+    "esbuild": "0.28.1",
+    "ffmpeg-static": "5.3.0",
+    "ffprobe-static": "3.1.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "remotion": "4.0.525"
+    "remotion": "4.0.525",
+    "zod": "4.5.4"
   },
   "devDependencies": {
     "@types/react": "19.3.0",

package/template/preview/README.md

@@ -0,0 +1,34 @@
+# Live preview
+
+The edit plays inside the chat, from its code. Nothing is rendered until you press **Render final video**.
+
+- **The video** on the left; **every beat** on the right with its timestamp.
+- **Instant controls under each beat** change the video on the spot — no chat, no waiting:
+  Size − / +, Move ↑ ↓, Timing Earlier / Later, Sound − / + / Mute, Icon, **Follow head** (the text rides
+  with the speaker's head — motion tracking), Reset.
+- **Save** writes all your adjustments in one go; **Render final video** saves them and renders, and tells
+  you how long the render will take first.
+- **"Something else? Describe it for Claude"** under a beat is for new ideas. It goes into the chat, Claude
+  makes the change, and the updated preview opens below. 📎 attaches a reference image (the app puts it in
+  your chat box — press Send).
+- **Undo last change** puts the edit back exactly as it was before the last change.
+
+Claude opens the preview by itself once you approve a plan. You never need to ask for it.
+
+## How it is switched on
+
+Setup registers it once (Claude Code: `claude mcp add live-preview --scope user -- node "<studio>/preview/server.mjs"`;
+Codex: `codex mcp add live-preview -- node "<studio>/preview/server.mjs"`). Apps load these when a chat starts,
+so it works from the next chat after setup.
+
+## For Claude
+
+- Open it with `preview_edit({video: "<folder in src/videos>"})` right after the plan is approved, and again
+  after every change you make. `preview_undo` restores the previous version.
+- Each video needs `src/videos/<video>/preview.tsx` exporting `Comp` (the edit + its voice as
+  `<Audio src={staticFile('__stems/voice.mp3')} />`, taking `tweaks` and passing them to the edit), `META`,
+  `BEATS` (one per plan row: name, time, beat, says, from, to, icons?, follow?) and `TWEAKS` (saved tweaks,
+  the tweaks.json path, icons, limits, trackFile?). The edit applies tweaks with `TweaksProvider` / `Tweaked`
+  from `src/lib/tweaks.tsx` — full-screen cards that hide cut joins never go inside a moving `Tweaked`.
+- The player cannot call this server or the computer (the app blocks it): everything it shows is packed into
+  the page when it opens, and it talks only by sending chat messages.

package/template/preview/lib.mjs

@@ -0,0 +1,177 @@
+/**
+ * What the live preview needs from a video, worked out once and used by both halves:
+ *   server.mjs   — the local preview server (our machine, reads files directly)
+ *   publish.mjs  — sends the same things to the online preview, so it works in any chat with no restart
+ *
+ * For a video it finds: the preview module (Comp, META, BEATS), every file the edit reads with
+ * staticFile() as a small preview copy, and the edit compiled to one script.
+ */
+import {spawnSync} from 'node:child_process';
+import {createHash} from 'node:crypto';
+import {createRequire} from 'node:module';
+import {existsSync, mkdirSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {dirname, extname, join, resolve} from 'node:path';
+import {fileURLToPath, pathToFileURL} from 'node:url';
+
+export const HERE = dirname(fileURLToPath(import.meta.url));
+export const STUDIO = resolve(HERE, '..');
+export const PUBLIC = join(STUDIO, 'assets');
+export const SRC = join(STUDIO, 'src');
+const CACHE = join(HERE, '.cache');
+mkdirSync(CACHE, {recursive: true});
+
+const require = createRequire(join(STUDIO, 'package.json'));
+const esbuild = require('esbuild');
+const {FFMPEG} = await import(pathToFileURL(join(STUDIO, 'scripts', 'lib', 'media.mjs')).href);
+
+/* ----------------------------------------------------------------------------- which video */
+
+/**
+ * Everything the preview needs to know about one video, read from its own folder:
+ * src/videos/<name>/preview.tsx, the *Edit.tsx beside it, the asset folders its code mentions, its stems.
+ */
+export function configFor(name) {
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(name ?? '')) throw new Error(`"${name}" is not a video name (lowercase letters, digits, dashes)`);
+  const code = join(SRC, 'videos', name);
+  if (!existsSync(join(code, 'preview.tsx'))) {
+    throw new Error(
+      `No src/videos/${name}/preview.tsx. Write it first: export Comp (the edit + its voice as <Audio src={staticFile('__stems/voice.mp3')} />), META and BEATS — copy src/videos/noufal/preview.tsx.`,
+    );
+  }
+  const source = readdirSync(code)
+    .filter((f) => /\.(tsx?|json)$/.test(f))
+    .map((f) => readFileSync(join(code, f), 'utf8'))
+    .join('\n');
+  const folders = new Set(['fonts']);
+  // Only the fonts this edit names — the studio has many, and each one is ~1 MB in the page.
+  const fonts = [...new Set([...source.matchAll(/fonts\/([\w.-]+\.(?:ttf|otf|woff2?))/g)].map((m) => m[1]))];
+  // The whole folder path up to the file name — cutouts live a level deeper (cutouts/<shot>/f123.png).
+  for (const m of source.matchAll(new RegExp(`projects/${name}/((?:[\\w-]+/)+)`, 'g'))) folders.add(`projects/${name}/${m[1].replace(/\/$/, '')}`);
+  for (const f of folders) if (!existsSync(join(PUBLIC, f))) folders.delete(f);
+
+  const stems = {};
+  if (existsSync(join(STUDIO, 'work', name, 'voice.wav'))) stems.voice = `work/${name}/voice.wav`;
+  const out = join(STUDIO, 'out', name);
+  if (existsSync(out))
+    for (const f of readdirSync(out)) {
+      const m = f.match(/^stem-(\w+)\.wav$/);
+      if (m) stems[m[1]] = `out/${name}/${f}`;
+    }
+
+  // The edit is the file named *Edit.tsx; its composition id is that name (as registered in Root.tsx).
+  const editFile = readdirSync(code).find((f) => /Edit\.tsx$/.test(f));
+  return {
+    project: name,
+    preview: `src/videos/${name}/preview.tsx`,
+    edit: `src/videos/${name}/${editFile ?? 'preview.tsx'}`,
+    composition: editFile?.replace(/\.tsx$/, '') ?? null,
+    assets: [...folders],
+    fonts,
+    stems,
+  };
+}
+
+/* ----------------------------------------------------------------------------- the footage */
+
+/** Every file the edit asks for by name (staticFile), plus the stems. Keys are the names the edit uses. */
+function assetList(c) {
+  const files = {};
+  const addDir = (rel) => {
+    const dir = join(PUBLIC, rel);
+    if (!existsSync(dir)) return;
+    for (const f of readdirSync(dir)) {
+      if (rel === 'fonts' && c.fonts && !c.fonts.includes(f)) continue;
+      if (statSync(join(dir, f)).isFile()) files[`${rel}/${f}`] = join(dir, f);
+    }
+  };
+  for (const d of c.assets) addDir(d);
+  for (const [k, f] of Object.entries(c.stems ?? {})) if (existsSync(join(STUDIO, f))) files[`__stems/${k}.mp3`] = join(STUDIO, f);
+  return Object.fromEntries(Object.entries(files).filter(([k]) => /\.(mp4|mov|png|jpe?g|webp|svg|ttf|woff2?|mp3)$/i.test(k)));
+}
+
+/**
+ * Preview copies: small enough to travel inside the player page, good enough to judge the edit in a chat-
+ * sized player. Anything fits a 540px box on its longest side. The final render always uses the originals.
+ */
+const FIT = "scale='if(gt(iw,ih),min(540,iw),-2)':'if(gt(iw,ih),-2,min(540,ih))'";
+const PROXY = {
+  video: ['-vf', FIT, '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '31', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
+  image: ['-vf', FIT, '-c:v', 'libwebp', '-quality', '72'],
+  audio: ['-vn', '-ac', '2', '-ar', '44100', '-c:a', 'libmp3lame', '-b:a', '128k'],
+};
+const MIME = {'.mp4': 'video/mp4', '.webp': 'image/webp', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.woff': 'font/woff', '.woff2': 'font/woff2', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png'};
+
+function proxyOf(name, original) {
+  const st = statSync(original);
+  // The settings are part of the key, so changing them makes new copies instead of reusing old ones.
+  const key = createHash('sha1').update(`${original}:${st.size}:${st.mtimeMs}:${JSON.stringify(PROXY)}`).digest('hex').slice(0, 16);
+  const ext = extname(name).toLowerCase();
+  const kind = /\.(mp4|mov)$/.test(ext) ? 'video' : /\.(png|jpe?g)$/.test(ext) ? 'image' : ext === '.mp3' ? 'audio' : null;
+  if (!kind) return {file: original, mime: MIME[ext] ?? 'application/octet-stream'};
+  const outExt = kind === 'video' ? '.mp4' : kind === 'image' ? '.webp' : '.mp3';
+  const out = join(CACHE, `${key}${outExt}`);
+  if (!existsSync(out)) {
+    const r = spawnSync(FFMPEG, ['-y', '-v', 'error', '-i', original, ...PROXY[kind], out], {encoding: 'utf8'});
+    if (r.status !== 0) throw new Error(`could not make a preview copy of ${name}: ${r.stderr}`);
+  }
+  return {file: out, mime: MIME[outExt]};
+}
+
+/** [{name, file, mime, size, hash}] — hash is of the preview copy, so unchanged files are never re-sent. */
+export function buildManifest(c) {
+  return Object.entries(assetList(c)).map(([name, original]) => {
+    const p = proxyOf(name, original);
+    const hash = createHash('sha256').update(readFileSync(p.file)).digest('hex').slice(0, 32);
+    return {name, file: p.file, mime: p.mime, size: statSync(p.file).size, hash};
+  });
+}
+
+/* ----------------------------------------------------------------------------- the edit, compiled */
+
+/**
+ * The edit runs inside the player, so it must use the player's own React and Remotion — two copies
+ * would break every hook. Those imports become reads of window.__shared.
+ */
+const SHARED = ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'remotion'];
+const sharedPlugin = {
+  name: 'shared',
+  setup(b) {
+    b.onResolve({filter: new RegExp(`^(${SHARED.map((s) => s.replace('/', '\\/')).join('|')})$`)}, (a) => ({path: a.path, namespace: 'shared'}));
+    b.onLoad({filter: /.*/, namespace: 'shared'}, (a) => {
+      const keys = Object.keys(require(a.path)).filter((k) => /^[A-Za-z_$][\w$]*$/.test(k) && k !== 'default');
+      return {
+        contents: `const m = window.__shared[${JSON.stringify(a.path)}];\nexport default m;\n${keys.map((k) => `export const ${k} = m.${k};`).join('\n')}`,
+        loader: 'js',
+      };
+    });
+  },
+};
+
+const common = {bundle: true, jsx: 'automatic', logLevel: 'silent', loader: {'.png': 'dataurl', '.svg': 'dataurl'}};
+
+/** The edit as one script that sets window.__lpComp. Throws with a readable message if it doesn't compile. */
+export async function compileEdit(c) {
+  try {
+    const r = await esbuild.build({...common, entryPoints: [join(STUDIO, c.preview)], format: 'iife', globalName: '__lpComp', write: false, plugins: [sharedPlugin], define: {'process.env.NODE_ENV': '"development"'}});
+    return r.outputFiles[0].text;
+  } catch (e) {
+    throw new Error((e.errors ?? []).map((x) => `${x.location?.file ?? ''}:${x.location?.line ?? ''} ${x.text}`).join('\n') || String(e));
+  }
+}
+
+/**
+ * The player page. Customers get it pre-built (player.html, made when the studio ships), so they need none of
+ * the player's build tools; in the source studio it is built from ui/app.tsx.
+ */
+export async function playerHtml() {
+  const built = join(HERE, 'player.html');
+  if (existsSync(built) && !existsSync(join(HERE, 'ui', 'app.tsx'))) return readFileSync(built, 'utf8');
+  return buildUi();
+}
+
+export async function buildUi() {
+  const r = await esbuild.build({...common, entryPoints: [join(HERE, 'ui', 'app.tsx')], format: 'iife', write: false, minify: true, define: {'process.env.NODE_ENV': '"production"'}});
+  const js = r.outputFiles[0].text;
+  return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>
+<body><div id="root"></div><script>${js.replace(/<\/script>/g, '<\\/script>')}</script></body></html>`;
+}