fix(skills): preserve caption skin contrast states (#2486)

* fix(skills): preserve caption skin contrast states * chore(skills): refresh caption contrast manifest * fix(skills): keep caption skin ownership aligned * style(skills): format shared caption builders
2026-09-12 15:20:13 +00:00 · 2026-07-15 16:01:31 -04:00
parent 9e53c0f9b1
commit f45f762473
8 changed files with 197 additions and 72 deletions
@@ -0,0 +1,50 @@
+import assert from "node:assert/strict";
+import { readdirSync, readFileSync } from "node:fs";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { buildFromSkin } from "./captions.mjs";
+
+const presetsDir = fileURLToPath(
+  new URL("../../hyperframes-creative/frame-presets/", import.meta.url),
+);
+const skins = readdirSync(presetsDir, { withFileTypes: true })
+  .filter((entry) => entry.isDirectory())
+  .map((entry) => ({
+    name: entry.name,
+    source: readFileSync(
+      new URL(
+        `../../hyperframes-creative/frame-presets/${entry.name}/caption-skin.html`,
+        import.meta.url,
+      ),
+      "utf8",
+    ),
+  }))
+  .filter(({ source }) => source.includes(".caption-word.is-active"));
+
+for (const canvas of ["#f7f3e8", "#111827"]) {
+  for (const skin of skins) {
+    test(`${skin.name} preserves word-state rules on ${canvas}`, () => {
+      const active = skin.source.match(/\.caption-word\.is-active\s*\{[^}]*\}/s)?.[0];
+      const spoken = skin.source.match(/\.caption-word\.is-spoken\s*\{[^}]*\}/s)?.[0];
+      assert.ok(active, "skin must define an active-word rule");
+      assert.ok(spoken, "skin must define a spoken-word rule");
+
+      const output = buildFromSkin(
+        skin.source,
+        [],
+        1,
+        1920,
+        1080,
+        `:root { --cap-canvas: ${canvas}; --cap-ink: #111111; --cap-accent: #ffcc00; }`,
+        (message) => {
+          throw new Error(message);
+        },
+      );
+
+      assert.ok(output.includes(active));
+      assert.ok(output.includes(spoken));
+      assert.equal(output.match(/\.caption-word\.is-active\s*\{/g)?.length, 1);
+      assert.equal(output.match(/\.caption-word\.is-spoken\s*\{/g)?.length, 1);
+    });
+  }
+}