@bitmagic/cli 0.1.64-dev.7 → 0.1.64-dev.9

package/dist/trailer/hud-raster.js

@@ -4,12 +4,20 @@
  * The harness page (`/hud-replay.html` on the running `bitmagic dev` sidecar) owns a real GameHUD,
  * so the overlay is the game's own UI rather than a reimplementation. Contract:
  *   window.__hudReplayReady === true      when the page can accept states
- *   window.__hudReplay.render(state)      synchronous; applies a replay state
+ *   window.__hudReplay.render(state, ms)  synchronous; applies a replay state,
+ *                                         `ms` seeding animation phase on the
+ *                                         source clock (older harness: ignored)
  *   window.__hudReplay.setViewport(w, h)  sizes the HUD root
+ *   window.__hudReplay.settle()           optional; resolves when fonts/images
+ *                                         the state started loading are in (or
+ *                                         a short deadline passed)
  * plus a transparent page background, so `omitBackground` yields real alpha.
  *
- * Every failure path here degrades to "no overlays" (returns null) instead of failing the trailer:
- * a UI-less video still beats no video. Chrome is the creator's installed browser
+ * Failure here degrades instead of failing the trailer: a keyframe that will
+ * not rasterize becomes a null slot (the caller holds the previous overlay over
+ * its window), and only an unusable page — navigation failed, the page died, or
+ * every single keyframe threw — degrades to "no overlays" (null). A UI-less
+ * video still beats no video. Chrome is the creator's installed browser
  * (`channel: 'chrome'`), the same one `bitmagic verify` drives — nothing is downloaded.
  */
 import * as fs from 'fs';
@@ -18,20 +26,29 @@ import { chromium } from 'playwright-core';
 import { out, warn } from './io.js';
 const NAV_TIMEOUT_MS = 20000;
 const READY_TIMEOUT_MS = 20000;
+/** Consecutive keyframe failures after which the run gives up on UI entirely. */
+const MAX_CONSECUTIVE_FAILURES = 3;
 export const CHROME_MISSING_HINT = 'Google Chrome could not be launched — install it from https://www.google.com/chrome/';
 /**
  * The state is embedded in the expression rather than passed as an argument:
  * Playwright treats a string pageFunction as a plain expression and drops the
  * arg, so an IIFE is the reliable form.
  */
-function applyStateExpression(state, width, height) {
+function applyStateExpression(state, width, height, frameTimeMs, clipIndex) {
     return ('(() => {' +
         ' const replay = window.__hudReplay;' +
         ' if (!replay || typeof replay.render !== "function") throw new Error("window.__hudReplay.render is missing");' +
         ' if (typeof replay.setViewport === "function") replay.setViewport(' +
         `${JSON.stringify(width)}, ${JSON.stringify(height)});` +
-        ` replay.render(${JSON.stringify(state)});` +
-        ' return true;' +
+        // The second and third arguments seed animation phase (source time, and
+        // the clip so the harness can tell a new clip's first keyframe from a
+        // mid-clip one); an older harness ignores them.
+        ` replay.render(${JSON.stringify(state)}, ${JSON.stringify(frameTimeMs)}, ${JSON.stringify(clipIndex)});` +
+        // settle() is awaited here rather than in a second round trip: Playwright
+        // awaits a thenable returned from a string expression, so this is one
+        // protocol call per keyframe instead of two, with identical ordering. An
+        // older harness has no settle() and simply returns true.
+        ' return typeof replay.settle === "function" ? replay.settle() : true;' +
         '})()');
 }
 /** Headless system Chrome for offscreen rasterization; null (with a warning) when it cannot start. */
@@ -47,36 +64,90 @@ export async function launchRasterBrowser(purpose) {
 export function uiPngPath(outDir, index) {
     return path.join(outDir, `ui_${String(index).padStart(4, '0')}.png`);
 }
+/**
+ * Cheap liveness probe. A crashed target or closed browser rejects every
+ * protocol call immediately, so this distinguishes "that one state was bad"
+ * from "there is no page any more".
+ */
+async function pageIsAlive(page) {
+    try {
+        await page.evaluate('1');
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Render one transparent PNG per keyframe, reusing a single browser + page.
- * Returns paths in keyframe order, or null when UI overlays must be skipped
- * (no Chrome, harness unreachable, or the harness rejected a state).
+ * Returns paths in keyframe order — a slot is null when that one keyframe
+ * failed (the caller holds the previous overlay across its window) — or null
+ * overall when UI must be skipped entirely (no Chrome, harness unreachable, the
+ * page died mid-run, or every keyframe failed).
  */
 export async function rasterizeUiKeyframes(keyframes, options) {
     if (keyframes.length === 0)
         return [];
+    // Before the browser exists: a throwing mkdir must not leak a Chrome.
+    fs.mkdirSync(options.outDir, { recursive: true });
     const browser = await launchRasterBrowser('ui');
     if (browser === null) {
         warn('ui: rendering without HUD overlays');
         return null;
     }
-    fs.mkdirSync(options.outDir, { recursive: true });
     try {
         const context = await browser.newContext({
             viewport: { width: options.width, height: options.height },
-            deviceScaleFactor: 1
+            deviceScaleFactor: options.deviceScaleFactor
         });
         const page = await context.newPage();
         await page.goto(options.harnessUrl, { waitUntil: 'domcontentloaded', timeout: NAV_TIMEOUT_MS });
         await page.waitForFunction('window.__hudReplayReady === true', undefined, { timeout: READY_TIMEOUT_MS });
         const paths = [];
+        let failed = 0;
+        let consecutiveFailures = 0;
         for (let i = 0; i < keyframes.length; i++) {
             const pngPath = uiPngPath(options.outDir, i);
-            await page.evaluate(applyStateExpression(keyframes[i].state, options.width, options.height));
-            await page.screenshot({ path: pngPath, omitBackground: true, type: 'png' });
-            paths.push(pngPath);
+            try {
+                await page.evaluate(applyStateExpression(keyframes[i].state, options.width, options.height, Math.round(keyframes[i].frameTimeMs), keyframes[i].clipIndex));
+                await page.screenshot({ path: pngPath, omitBackground: true, type: 'png' });
+                paths.push(pngPath);
+                consecutiveFailures = 0;
+            }
+            catch (err) {
+                // One bad state must not throw away the overlays already on disk.
+                failed++;
+                consecutiveFailures++;
+                warn(`ui: keyframe ${i} failed to rasterize ` +
+                    `(${err instanceof Error ? err.message : String(err)}) — holding the previous overlay`);
+                paths.push(null);
+                // A dead page fails every REMAINING keyframe too, and each null slot
+                // extends the last good overlay — which would freeze one stale HUD
+                // over the whole rest of the trailer. That is worse than no UI, so
+                // probe liveness and bail out whole rather than degrade per keyframe.
+                if (!(await pageIsAlive(page))) {
+                    warn(`ui: the replay page died after ${paths.length - failed} overlay(s) — rendering without UI ` +
+                        'rather than freezing the last one over the remaining clips');
+                    return null;
+                }
+                // A page that answers evaluate('1') but fails every screenshot (a
+                // stalled compositor, an unwritable .ui) would otherwise pay the full
+                // screenshot timeout once per remaining keyframe and then freeze the
+                // last good overlay across them — hours of waiting for a worse video.
+                if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) {
+                    warn(`ui: ${consecutiveFailures} keyframes in a row failed to rasterize — rendering without UI ` +
+                        'rather than holding one overlay over everything that follows');
+                    return null;
+                }
+            }
+        }
+        if (failed === keyframes.length) {
+            warn(`ui: every keyframe failed to rasterize against ${options.harnessUrl} — rendering without UI`);
+            return null;
         }
-        out(`ui: rasterized ${paths.length} overlay(s) at ${options.width}x${options.height} from ${options.harnessUrl}`);
+        out(`ui: rasterized ${paths.length - failed} overlay(s) at ${options.width}x${options.height}` +
+            `${options.deviceScaleFactor !== 1 ? `@${options.deviceScaleFactor.toFixed(2)}x` : ''} ` +
+            `from ${options.harnessUrl}${failed > 0 ? ` (${failed} failed, held over)` : ''}`);
         return paths;
     }
     catch (err) {
@@ -93,22 +164,4 @@ export async function rasterizeUiKeyframes(keyframes, options) {
         }
     }
 }
-/**
- * Width/height straight out of a PNG's IHDR chunk, so the filtergraph only
- * pays for a scale filter when the overlay really is the wrong size.
- */
-export function readPngSize(filePath) {
-    const header = Buffer.alloc(24);
-    const fd = fs.openSync(filePath, 'r');
-    try {
-        if (fs.readSync(fd, header, 0, 24, 0) < 24)
-            return null;
-    }
-    finally {
-        fs.closeSync(fd);
-    }
-    if (header.readUInt32BE(0) !== 0x89504e47 || header.toString('ascii', 12, 16) !== 'IHDR')
-        return null;
-    return { width: header.readUInt32BE(16), height: header.readUInt32BE(20) };
-}
 //# sourceMappingURL=hud-raster.js.map

package/dist/trailer/hud-raster.js.map

@@ -1 +1 @@
-{"version":3,"file":"hud-raster.js","sourceRoot":"","sources":["../../src/trailer/hud-raster.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hud-raster.js","sourceRoot":"","sources":["../../src/trailer/hud-raster.ts"],"names":[],"mappings":"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"}

package/dist/trailer/hud-state.d.ts

@@ -24,6 +24,8 @@ export interface HudHealthState {
     current: number;
     max: number;
     visible: boolean;
+    /** Pixel width from showHealth({width}); absent = the engine default. */
+    width?: number;
 }
 /**
  * One HUD element. Keys beyond id/type/anchor/visible are per-kind and are
@@ -52,6 +54,8 @@ export interface HudElementState {
 export interface HudToastState {
     message: string;
     variant?: string;
+    /** IGameHUD anchor; absent on recordings that predate anchor capture. */
+    anchor?: string;
 }
 export interface HudReplayState {
     version: 1;
@@ -63,7 +67,48 @@ export interface HudReplayState {
     /** Creation order (= stacking order within an anchor); removed ones dropped. */
     elements: HudElementState[];
     toasts: HudToastState[];
+    /**
+     * Game-authored head stylesheets, first-logged order, last write per id.
+     * The harness injects these before drawing — they are what turn
+     * custom-element class names into pixels.
+     *
+     * Shared between snapshots while unchanged, so treat it as frozen: never
+     * mutate the array or its entries in place.
+     */
+    stylesheets: ReadonlyArray<HudStylesheetState>;
+}
+export interface HudStylesheetState {
+    id: string;
+    css: string;
+}
+export interface RasterGeometry {
+    /** CSS-pixel viewport for the harness browser context. */
+    viewportWidth: number;
+    viewportHeight: number;
+    deviceScaleFactor: number;
 }
+/**
+ * Where to lay the HUD out for rasterization.
+ *
+ * During capture only the CANVAS is resized to the recording resolution — the
+ * DOM HUD keeps laying out against the player's window. Rastering at the
+ * recording size therefore renders every fixed-pixel HUD metric too small
+ * relative to the footage (and flips vw-clamps and media queries). With the
+ * recorded window known, raster at an ASPECT-CORRECTED viewport: the window's
+ * height (so element size relative to screen height matches what the player
+ * saw) at the recording's aspect (raw window dimensions would stretch glyphs
+ * non-uniformly under the final scale whenever the aspects differ). The
+ * deviceScaleFactor keeps the PNG at or above the recording resolution so
+ * ffmpeg only ever downscales.
+ *
+ * No recorded window → the recording resolution at 1x, bit-for-bit the old
+ * behavior.
+ */
+export declare function computeRasterGeometry(recordingWidth: number, recordingHeight: number, window?: {
+    innerWidth: number;
+    innerHeight: number;
+    devicePixelRatio: number;
+}): RasterGeometry;
 /** The engine records `frame` on a 60fps source clock. */
 export declare const DEFAULT_HUD_FPS = 60;
 /** IGameHUD.showToast's default duration. */
@@ -78,6 +123,12 @@ export declare function isBlankHudState(state: HudReplayState): boolean;
 export interface UiKeyframe {
     /** Source frame whose state this is. */
     sourceFrame: number;
+    /**
+     * `sourceFrame` as milliseconds on the SOURCE clock. The harness seeds
+     * animation phase from it, so motion stays locked to the footage through a
+     * speed ramp — output time would run it fast or slow against the frames.
+     */
+    frameTimeMs: number;
     clipIndex: number;
     /** Output-timeline seconds this overlay becomes visible. */
     outputStartSec: number;
@@ -88,17 +139,37 @@ export interface UiKeyframe {
 export interface CollectUiKeyframesOptions {
     /** Source-clock fps. Default 60. */
     fps?: number;
-    /** Ceiling on keyframes per second of OUTPUT time. Default 10. */
+    /** Ceiling on keyframes per second of OUTPUT time. Default 30. 0 disables. */
     maxPerSecond?: number;
-    /** Hard ceiling per clip. Default 240. */
+    /** Hard ceiling per clip. Defaults to what the clip's duration allows at `maxPerSecond`. */
     maxPerClip?: number;
     /** Per-clip opt-out; defaults to every clip. */
     clipEnabled?: (clipIndex: number) => boolean;
     /** Where truncation notices go. Defaults to stderr. */
     log?: (line: string) => void;
 }
-export declare const DEFAULT_MAX_KEYFRAMES_PER_SECOND = 10;
-export declare const DEFAULT_MAX_KEYFRAMES_PER_CLIP = 240;
+/**
+ * 30, not 15: measured on a real cut, the selected footage held 227 distinct
+ * HUD states across 15.3 s of output (14.8/s average, four of seven clips over
+ * 15/s), so a 15/s ceiling was discarding roughly 45% of the HUD motion the
+ * game actually rendered.
+ *
+ * ffmpeg used to be the reason for a low ceiling — one PNG input plus one
+ * serial overlay node per keyframe cost ~23 MB of RSS each and corrupted the
+ * render above ~400. The overlays now ride one densified image2 sequence whose
+ * cost is flat in keyframe count (measured 2.83 s / 0.94 GB at both 126 and
+ * 902 distinct rasters), so the remaining cost is ~25 ms of Playwright per
+ * keyframe plus its PNG on disk. 0 disables the limit entirely.
+ */
+export declare const DEFAULT_MAX_KEYFRAMES_PER_SECOND = 30;
+/**
+ * Sole per-clip ceiling, a backstop for `--ui-keyframe-rate 0`: at any real
+ * rate the limiter below admits at most rate·duration+1 keyframes per clip on
+ * its own, so nothing else can bind. A fixed 240 used to freeze the overlay
+ * after 16 s of any clip busy enough to sustain the default rate — exactly the
+ * clip a trailer is cut from. 60 s of output at 60/s.
+ */
+export declare const MAX_KEYFRAMES_PER_CLIP_CEILING = 3600;
 /**
  * Walk every enabled clip's source range and emit a keyframe wherever the
  * reduced HUD state changes.

package/dist/trailer/hud-state.js

@@ -5,7 +5,33 @@ import { warn } from './io.js';
  * reach a trailer: interactive controls the viewer can't click in a video.
  * `mute-button` is `MuteControl`'s custom element (engine/ui/MuteControl.ts).
  */
-export const CHROME_ELEMENT_IDS = new Set(['mute-button']);
+export const CHROME_ELEMENT_IDS = new Set(['mute-button', 'pause-button']);
+/**
+ * Where to lay the HUD out for rasterization.
+ *
+ * During capture only the CANVAS is resized to the recording resolution — the
+ * DOM HUD keeps laying out against the player's window. Rastering at the
+ * recording size therefore renders every fixed-pixel HUD metric too small
+ * relative to the footage (and flips vw-clamps and media queries). With the
+ * recorded window known, raster at an ASPECT-CORRECTED viewport: the window's
+ * height (so element size relative to screen height matches what the player
+ * saw) at the recording's aspect (raw window dimensions would stretch glyphs
+ * non-uniformly under the final scale whenever the aspects differ). The
+ * deviceScaleFactor keeps the PNG at or above the recording resolution so
+ * ffmpeg only ever downscales.
+ *
+ * No recorded window → the recording resolution at 1x, bit-for-bit the old
+ * behavior.
+ */
+export function computeRasterGeometry(recordingWidth, recordingHeight, window) {
+    if (window === undefined) {
+        return { viewportWidth: recordingWidth, viewportHeight: recordingHeight, deviceScaleFactor: 1 };
+    }
+    const viewportHeight = Math.max(1, Math.round(window.innerHeight));
+    const viewportWidth = Math.max(1, Math.round(viewportHeight * (recordingWidth / recordingHeight)));
+    const deviceScaleFactor = Math.max(1, recordingHeight / viewportHeight);
+    return { viewportWidth, viewportHeight, deviceScaleFactor };
+}
 // ---------------------------------------------------------------------------
 // Defaults
 // ---------------------------------------------------------------------------
@@ -47,6 +73,19 @@ function round(value) {
  * `reduceHudState`; `collectUiKeyframes` drives one instance forward across a
  * clip so a frame-by-frame walk stays linear in the op count.
  */
+/**
+ * Whether a container's recorded cssText hides it outright.
+ *
+ * Visibility has two records: the show/hide ops, and the `display` inside the
+ * cssText snapshot the recorder takes on create and on every update (a game
+ * that toggles `container.style.display` itself, as the docs' Weapon Wheel
+ * does, never logs a hide op). Neither is authoritative alone — the most
+ * recent one in frame order is, and only the reducer sees that order — so a
+ * css snapshot sets `visible` here and later show/hide ops override it.
+ */
+function cssHidesElement(css) {
+    return /(^|;)\s*display\s*:\s*none\b/i.test(css);
+}
 class HudReducer {
     ops;
     fps;
@@ -56,6 +95,12 @@ class HudReducer {
     theme = null;
     elements = [];
     toasts = [];
+    /** Insertion-ordered; a re-logged id updates in place (last write wins). */
+    stylesheets = new Map();
+    /** The emitted stylesheet array, rebuilt only when a sheet actually changes. */
+    stylesheetsEmitted = [];
+    /** Bumped with every real change to the set above; `stateKey` identifies the set by it. */
+    stylesheetsVersion = 0;
     constructor(ops, fps) {
         // Stable sort: entries recorded on the same frame keep emission order,
         // which IS the stacking order within an anchor.
@@ -73,8 +118,11 @@ class HudReducer {
         return this.elements.find((el) => el.id === id);
     }
     apply(op) {
-        // Engine chrome is part of the HUD but never part of a trailer.
-        if ('id' in op && CHROME_ELEMENT_IDS.has(op.id))
+        // Engine chrome is part of the HUD but never part of a trailer. A
+        // stylesheet op's `id` is a head <style> element's id, a different
+        // namespace from HUD element ids, so it must not be filtered here — a game
+        // sheet named after a chrome element would otherwise vanish silently.
+        if (op.op !== 'stylesheet' && 'id' in op && CHROME_ELEMENT_IDS.has(op.id))
             return;
         switch (op.op) {
             case 'create':
@@ -85,8 +133,16 @@ class HudReducer {
                 break;
             case 'custom-html': {
                 const el = this.find(op.id);
-                if (el !== undefined)
+                if (el !== undefined) {
                     el.html = op.html;
+                    // The container's own cssText rides updates too (onUpdate mutates it
+                    // as freely as the markup); absent on older recordings. Its display
+                    // is a visibility verdict of its own — see cssHidesElement.
+                    if (op.css !== undefined) {
+                        el.css = op.css;
+                        el.visible = !cssHidesElement(op.css);
+                    }
+                }
                 break;
             }
             case 'timer':
@@ -105,16 +161,24 @@ class HudReducer {
                     this.elements.splice(index, 1);
                 break;
             }
-            case 'health':
+            case 'health': {
+                const width = this.health?.width;
                 this.health = { current: op.current, max: op.max, visible: this.health?.visible ?? false };
+                if (width !== undefined)
+                    this.health.width = width;
                 break;
-            case 'health-visible':
+            }
+            case 'health-visible': {
+                const width = op.width ?? this.health?.width;
                 this.health = {
                     current: this.health?.current ?? 0,
                     max: this.health?.max ?? 100,
                     visible: op.visible
                 };
+                if (width !== undefined)
+                    this.health.width = width;
                 break;
+            }
             case 'toast': {
                 const durationMs = op.durationMs ?? DEFAULT_TOAST_MS;
                 const toast = {
@@ -124,6 +188,8 @@ class HudReducer {
                 };
                 if (op.variant !== undefined)
                     toast.variant = op.variant;
+                if (op.anchor !== undefined)
+                    toast.anchor = op.anchor;
                 this.toasts.push(toast);
                 break;
             }
@@ -133,6 +199,19 @@ class HudReducer {
             case 'theme':
                 this.theme = op.theme;
                 break;
+            case 'stylesheet': {
+                // An empty css body is a tombstone: the recorder logs it when a sheet
+                // it had captured disappears from the head, so a skin swapped by
+                // removal does not replay with both skins applied at once.
+                const removed = op.css === '';
+                if (removed ? !this.stylesheets.delete(op.id) : this.stylesheets.get(op.id) === op.css)
+                    break;
+                if (!removed)
+                    this.stylesheets.set(op.id, op.css);
+                this.stylesheetsEmitted = [...this.stylesheets].map(([id, css]) => ({ id, css }));
+                this.stylesheetsVersion++;
+                break;
+            }
             default:
                 // Forward compatibility: a newer engine may log ops we predate.
                 break;
@@ -144,11 +223,12 @@ class HudReducer {
         const existing = this.elements.findIndex((el) => el.id === id);
         if (existing >= 0)
             this.elements.splice(existing, 1);
+        const css = readString(params, 'css');
         const el = {
             id,
             type: elType,
             anchor: readString(params, 'anchor') ?? DEFAULT_ANCHOR[elType] ?? 'top-left',
-            visible: true
+            visible: css === undefined || !cssHidesElement(css)
         };
         const label = readString(params, 'label');
         const color = readString(params, 'color');
@@ -161,7 +241,6 @@ class HudReducer {
         const countDown = readBoolean(params, 'countDown');
         const format = readString(params, 'format');
         const html = readString(params, 'html');
-        const css = readString(params, 'css');
         if (label !== undefined)
             el.label = label;
         if (color !== undefined)
@@ -237,7 +316,15 @@ class HudReducer {
             elements: this.elements.map((el) => emitElement(el, frame, this.fps)),
             toasts: this.toasts
                 .filter((t) => t.startFrame <= frame)
-                .map((t) => (t.variant === undefined ? { message: t.message } : { message: t.message, variant: t.variant }))
+                .map((t) => {
+                const toast = { message: t.message };
+                if (t.variant !== undefined)
+                    toast.variant = t.variant;
+                if (t.anchor !== undefined)
+                    toast.anchor = t.anchor;
+                return toast;
+            }),
+            stylesheets: this.stylesheetsEmitted
         };
     }
 }
@@ -297,8 +384,28 @@ export function isBlankHudState(state) {
         return false;
     return !state.elements.some((el) => el.visible);
 }
-export const DEFAULT_MAX_KEYFRAMES_PER_SECOND = 10;
-export const DEFAULT_MAX_KEYFRAMES_PER_CLIP = 240;
+/**
+ * 30, not 15: measured on a real cut, the selected footage held 227 distinct
+ * HUD states across 15.3 s of output (14.8/s average, four of seven clips over
+ * 15/s), so a 15/s ceiling was discarding roughly 45% of the HUD motion the
+ * game actually rendered.
+ *
+ * ffmpeg used to be the reason for a low ceiling — one PNG input plus one
+ * serial overlay node per keyframe cost ~23 MB of RSS each and corrupted the
+ * render above ~400. The overlays now ride one densified image2 sequence whose
+ * cost is flat in keyframe count (measured 2.83 s / 0.94 GB at both 126 and
+ * 902 distinct rasters), so the remaining cost is ~25 ms of Playwright per
+ * keyframe plus its PNG on disk. 0 disables the limit entirely.
+ */
+export const DEFAULT_MAX_KEYFRAMES_PER_SECOND = 30;
+/**
+ * Sole per-clip ceiling, a backstop for `--ui-keyframe-rate 0`: at any real
+ * rate the limiter below admits at most rate·duration+1 keyframes per clip on
+ * its own, so nothing else can bind. A fixed 240 used to freeze the overlay
+ * after 16 s of any clip busy enough to sustain the default rate — exactly the
+ * clip a trailer is cut from. 60 s of output at 60/s.
+ */
+export const MAX_KEYFRAMES_PER_CLIP_CEILING = 3600;
 /**
  * Frame times are exact ratios that land just under a spacing boundary in
  * binary (frame 18 at 60fps is 0.09999999999999998s after frame 12), which
@@ -309,12 +416,19 @@ const SPACING_EPSILON = 1e-9;
  * Structural identity of a state. Timer seconds collapse to whole displayed
  * seconds (floor — where both floor- and ceil-based formatters change), so a
  * ticking clock yields ~1 keyframe per second instead of one per frame.
+ *
+ * Stylesheets are keyed by the reducer's change counter, not their bytes: the
+ * payload can run to the recorder's 128 KB budget and would otherwise be
+ * re-serialized once per source frame. Keys are only ever compared within one
+ * reducer's clip, so a per-reducer counter is exact — a set that changes and
+ * changes back emits one extra byte-identical keyframe, which is harmless.
  */
-function stateKey(state) {
-    return JSON.stringify({
-        ...state,
+function stateKey(state, stylesheetsVersion) {
+    const { stylesheets, ...rest } = state;
+    return (JSON.stringify({
+        ...rest,
         elements: state.elements.map((el) => el.seconds === undefined ? el : { ...el, seconds: Math.floor(el.seconds) })
-    });
+    }) + (stylesheets.length === 0 ? '|none' : `|s${stylesheetsVersion}`));
 }
 /**
  * Walk every enabled clip's source range and emit a keyframe wherever the
@@ -327,7 +441,6 @@ function stateKey(state) {
 export function collectUiKeyframes(ops, clips, opts = {}) {
     const fps = opts.fps ?? DEFAULT_HUD_FPS;
     const maxPerSecond = opts.maxPerSecond ?? DEFAULT_MAX_KEYFRAMES_PER_SECOND;
-    const maxPerClip = opts.maxPerClip ?? DEFAULT_MAX_KEYFRAMES_PER_CLIP;
     const clipEnabled = opts.clipEnabled ?? (() => true);
     const log = opts.log ?? warn;
     const minSpacingSec = maxPerSecond > 0 ? 1 / maxPerSecond : 0;
@@ -338,6 +451,7 @@ export function collectUiKeyframes(ops, clips, opts = {}) {
         const timing = clips[index];
         const windowEnd = exclusiveOutputEnd(clips, index);
         const reducer = new HudReducer(ops, fps);
+        const maxPerClip = opts.maxPerClip ?? MAX_KEYFRAMES_PER_CLIP_CEILING;
         const clipFrames = [];
         let lastEmittedKey = null;
         let lastEmittedSec = Number.NEGATIVE_INFINITY;
@@ -353,7 +467,7 @@ export function collectUiKeyframes(ops, clips, opts = {}) {
                 break;
             reducer.advanceTo(frame);
             const state = reducer.snapshot(frame);
-            const key = stateKey(state);
+            const key = stateKey(state, reducer.stylesheetsVersion);
             if (key === lastEmittedKey)
                 continue;
             if (clipFrames.length >= maxPerClip) {
@@ -376,6 +490,7 @@ export function collectUiKeyframes(ops, clips, opts = {}) {
                 coalesced++;
             clipFrames.push({
                 sourceFrame: frame,
+                frameTimeMs: (frame / fps) * 1000,
                 clipIndex: index,
                 outputStartSec: outputSec,
                 outputEndSec: windowEnd,