test(producer): add variables-prod regression for the variables stack (PR 5/5) (#604)

## What

End-to-end Docker regression test that exercises the **full variables chain** shipped in PRs #600-#603. Closes the loop between unit-tested seams and the actual rendered output.

This is **PR 5 of 5**, the regression cap. Stacked on `feat/get-variables-skills` (PR #603).

## Why

PRs 1-4 ship unit tests that cover the seams independently:
- Engine: \`evaluateOnNewDocument\` injection (mocked Puppeteer)
- Helper: \`getVariables()\` merge (jsdom)
- CLI: \`parseVariablesArg\` validation (pure function)
- Loader: \`__hfVariablesByComp\` population (jsdom)
- Validator: \`validateVariables\` type-checking (pure)

But none of those check that the chain actually works front-to-back inside the production Chrome+ffmpeg+harness combo. A type signature change on \`CaptureOptions.variables\`, a regression in \`evaluateOnNewDocument\` ordering, a bug in the runtime helper's attribute parsing — any of those could pass unit tests and silently render the wrong text. This regression catches it.

## How

**Fixture** (\`packages/producer/tests/variables-prod/\`):
- \`src/index.html\` — composition with three declared variables (\`title\`, \`subtitle\`, \`bgColor\`) read via \`window.__hyperframes.getVariables()\` and rendered as positioned text on a colored background. **No animation** — keeps the regression frame-stable so it isolates "did the variables flow through?" from motion concerns.
- \`meta.json\` — tags \`[\"variables\", \"composition\"]\` (runs in the existing fast shard's tag filter, no workflow YAML changes needed). \`renderConfig.variables\` provides override values that the baseline reflects (\"Override Title\", \"Override subtitle\", \`#0a3d62\`). **If variables don't propagate**, the rendered frame shows declared defaults (\"Default Title\", black) — visibly different from the baseline, so PSNR fails on dozens of frames.
- \`output/output.mp4\` — Docker-generated baseline per the project's CLAUDE.md golden-baseline rule. Host renders drift across Chrome/font versions and would fail PSNR even on green code.
- \`src/silence.wav\` — copied from \`missing-host-comp-id\`'s silence track to satisfy the audio-correlation check.

**Harness change** (\`packages/producer/src/regression-harness.ts\`):
- \`TestMetadata.renderConfig\` gains an optional \`variables: Record<string, unknown>\` field, validated as a JSON object (not array, not null) in the \`meta.json\` validator.
- The \`createRenderJob\` call site forwards \`renderConfig.variables\` to \`RenderConfig.variables\`, which the engine already consumes via \`evaluateOnNewDocument\` (PR #600).

## Test plan

- [x] **\`docker:test variables-prod\` PASSED** — 100/100 visual checkpoints, audio correlation 1.000.
- [x] **Defeated the bug it's meant to catch** — generated a baseline against an old image (without the harness change) and confirmed it shows defaults. After the harness change + image rebuild, the baseline correctly shows overrides.
- [x] **CI auto-includes** — fast shard's \`--exclude-tags slow,render-compat,hdr\` lets \`[variables, composition]\` through. No \`.github/workflows/regression.yml\` edits needed.

## Backwards compatibility

Additive. Existing fixtures don't set \`renderConfig.variables\` and behave identically. The harness validator only fires on the new field if it's present.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: jrusso1020

packages/producer/src/regression-harness.ts

@@ -36,6 +36,14 @@ type TestMetadata = {
     workers?: number; // Optional: auto-calculates if omitted
     /** Force HDR in the harness; omitted/false preserves historical SDR-only test behavior. */
     hdr?: boolean;
+    /**
+     * Render-time variable overrides, equivalent to `hyperframes render
+     * --variables '<json>'`. Injected as `window.__hfVariables` before any
+     * page script runs so the runtime helper `getVariables()` returns the
+     * merged result of declared defaults (`data-composition-variables`)
+     * and these overrides. Omit when the test doesn't exercise variables.
+     */
+    variables?: Record<string, unknown>;
   };
 };
 
@@ -160,6 +168,12 @@ function validateMetadata(meta: unknown): TestMetadata {
   if (rc.hdr !== undefined && typeof rc.hdr !== "boolean") {
     throw new Error("meta.json: 'renderConfig.hdr' must be a boolean (or omit for false)");
   }
+  if (
+    rc.variables !== undefined &&
+    (rc.variables === null || typeof rc.variables !== "object" || Array.isArray(rc.variables))
+  ) {
+    throw new Error("meta.json: 'renderConfig.variables' must be a JSON object (or omitted)");
+  }
 
   return m as TestMetadata;
 }
@@ -601,6 +615,7 @@ async function runTestSuite(
       useGpu: false,
       debug: false,
       hdrMode: suite.meta.renderConfig.hdr ? "force-hdr" : "force-sdr",
+      variables: suite.meta.renderConfig.variables,
     });
 
     await executeRenderJob(job, tempSrcDir, renderedOutputPath);

packages/producer/tests/variables-prod/meta.json

@@ -0,0 +1,17 @@
+{
+  "name": "Variables Prod",
+  "description": "End-to-end regression for the variables system. Composition declares title/subtitle/bgColor in data-composition-variables and reads them via window.__hyperframes.getVariables(). renderConfig.variables provides overrides that flow CLI → producer → engine evaluateOnNewDocument → window.__hfVariables → helper merge → DOM text → rendered pixels. If any link in that chain breaks, the rendered text/background diverges from the baseline and PSNR fails.",
+  "tags": ["variables", "composition"],
+  "minPsnr": 30,
+  "maxFrameFailures": 0,
+  "minAudioCorrelation": 0.9,
+  "maxAudioLagWindows": 120,
+  "renderConfig": {
+    "fps": 24,
+    "variables": {
+      "title": "Override Title",
+      "subtitle": "Override subtitle",
+      "bgColor": "#0a3d62"
+    }
+  }
+}

packages/producer/tests/variables-prod/output/compiled.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be9a5689e27272b191fa566843e45f88f728b36f677a3db49f89e9193627a667
+size 117111

packages/producer/tests/variables-prod/output/output.mp4

@@ -0,0 +1,96 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"title","type":"string","label":"Title","default":"Default Title"},
+    {"id":"subtitle","type":"string","label":"Subtitle","default":"Default subtitle"},
+    {"id":"bgColor","type":"color","label":"Background","default":"#0b0b0d"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #0b0b0d;
+        font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
+      }
+      [data-composition-id="main"] {
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+      .title {
+        position: absolute;
+        top: 380px;
+        left: 0;
+        right: 0;
+        font-size: 140px;
+        font-weight: 700;
+        color: #ffffff;
+        text-align: center;
+        line-height: 1;
+      }
+      .subtitle {
+        position: absolute;
+        top: 600px;
+        left: 0;
+        right: 0;
+        font-size: 56px;
+        color: #9aa0a6;
+        text-align: center;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="3"
+      data-width="1920"
+      data-height="1080"
+    >
+      <audio
+        id="silence-track"
+        src="silence.wav"
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+      ></audio>
+      <h1 id="title-el" class="title clip" data-start="0" data-duration="3"></h1>
+      <p id="subtitle-el" class="subtitle clip" data-start="0" data-duration="3"></p>
+    </div>
+
+    <script>
+      // Render-time values: declared defaults from data-composition-variables
+      // merged with overrides from meta.json's renderConfig.variables (which
+      // arrive via window.__hfVariables, injected by the engine).
+      const vars = window.__hyperframes.getVariables();
+      document.body.style.background = vars.bgColor;
+      document.getElementById("title-el").textContent = vars.title;
+      document.getElementById("subtitle-el").textContent = vars.subtitle;
+
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // Static placement — no animation. Keeps the regression frame-stable
+      // and isolates "did the variables flow through?" from motion concerns.
+      tl.to({}, { duration: 3 });
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>