dsh-hyperframes 0.9.1 → 0.9.3

package/skills/product-launch-video/scripts/lib/tokens.mjs

@@ -1,218 +0,0 @@
-// tokens.mjs — shared brand-token parsing + semantic role mapping for frame.md /
-// FRAME.md. Used by build-frame.mjs (remix a preset onto brand tokens) and
-// captions.mjs (derive caption colors from frame.md). One mapping → frames and
-// captions stay consistent. Pure node.
-
-// Collect `key: value` pairs under the top-level `colors:` block (until dedent).
-export function parseColors(md) {
-  const out = [];
-  let inBlock = false;
-  for (const line of md.split(/\r?\n/)) {
-    if (/^colors:\s*$/.test(line)) {
-      inBlock = true;
-      continue;
-    }
-    if (!inBlock) continue;
-    if (/^\S/.test(line)) break; // dedent to a top-level key → end of block
-    const m = line.match(
-      /^\s+([\w-]+):\s*(?:"([^"]+)"|'([^']+)'|(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|[^#\s][^#\n]*?))\s*(?:#.*)?$/,
-    );
-    if (m) out.push([m[1], (m[2] ?? m[3] ?? m[4]).trim()]);
-  }
-  return out;
-}
-
-// relative luminance of a #rrggbb (null for non-hex like rgba()).
-export function lum(v) {
-  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
-  if (!m) return null;
-  const n = parseInt(m[1], 16);
-  return 0.2126 * ((n >> 16) & 255) + 0.7152 * ((n >> 8) & 255) + 0.0722 * (n & 255);
-}
-
-// chroma (max−min channel) of a #rrggbb — a cheap "how colorful" proxy; −1 for non-hex.
-export function chroma(v) {
-  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(v).trim());
-  if (!m) return -1;
-  const n = parseInt(m[1], 16);
-  const r = (n >> 16) & 255,
-    g = (n >> 8) & 255,
-    b = n & 255;
-  return Math.max(r, g, b) - Math.min(r, g, b);
-}
-
-// Browser user-agent default colors for links / visited links. These leak into a
-// capture from any UNSTYLED <a> and are NOT brand colors — but being pure & saturated
-// they beat a real accent on chroma alone. Never let one become the accent.
-export const UA_DEFAULT_COLORS = new Set(
-  ["#0000EE", "#0000FF", "#0000CC", "#1A0DAB", "#551A8B", "#EE0000"].map((c) => c.toUpperCase()),
-);
-
-export const ICON_FONT_PATTERN =
-  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather\s*icons|(?:icon|glyph).*font|font.*(?:icon|glyph)|^vidaxlfont$/i;
-
-export function isIconFont(name) {
-  return ICON_FONT_PATTERN.test(String(name));
-}
-
-// Semantic STATUS roles (green "positive", red "negative"/"error", amber "warning" …). Their HUE
-// carries the meaning, so they are never a brand ACCENT — a status red is frequently the most
-// chromatic color in a palette (e.g. #dc2626 chroma 182 beats a deep-blue accent #1E40AF chroma
-// 145) and would otherwise win a pure chroma ranking, painting captions/highlights the error red.
-// build-frame.mjs uses this same key set to protect status colors during the preset→brand remix.
-export const STATUS_ROLE_KEY =
-  /(?:^|[-_])(?:positive|negative|success|error|warning|danger|good|bad|up|down|info|neutral|alert|caution|critical)(?:[-_]|$)/i;
-
-// Pick the brand ACCENT — never by raw chroma alone, never a UA-default link color.
-// Priority:
-//   1) with capture colorStats → the colorful color that RECURS across the UI. The brand
-//      accent shows up in MANY roles (link text + icon + button + badge), whereas a one-off
-//      CTA fill appears in just one. So rank chromatic (chroma>40) candidates by role
-//      diversity first, then total prevalence, then interactive use, then chroma. This keeps
-//      a pervasive brand color (e.g. an indigo used everywhere) ahead of a single bright
-//      button fill (e.g. a lime used once) — the old "top interactiveBg" rule picked the
-//      latter. Requiring interactiveBg>0 is dropped so a text/icon-only accent can still win.
-//   2) no stats → most chromatic color AFTER removing UA defaults + `exclude`.
-// A stray default link color (e.g. #0000EE) can win under neither path.
-export function pickAccent(stats, colors, exclude = []) {
-  const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
-  const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
-  // Prominence rank from the (frequency-ordered) `colors` palette: index 0 = most used.
-  // A saturated color sitting at the TAIL is almost always a one-off (a single CTA fill),
-  // not the brand accent — capture colorStats counts are too sparse to tell these apart
-  // (e.g. Linear's indigo and a lime CTA both register count≈1), but palette ORDER does.
-  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
-  const prom = (h) => (rank.has(String(h).toUpperCase()) ? rank.get(String(h).toUpperCase()) : 1e9);
-  if (Array.isArray(stats) && stats.length) {
-    const roles = (s) =>
-      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
-      ((s.textCount || 0) > 0 ? 1 : 0) +
-      ((s.bgCount || 0) > 0 ? 1 : 0);
-    const a = stats
-      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40)
-      .sort(
-        (x, y) =>
-          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
-          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
-          (y.count || 0) - (x.count || 0) ||
-          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
-          chroma(y.hex) - chroma(x.hex),
-      );
-    if (a.length) return a[0].hex;
-  }
-  const c = (colors ?? [])
-    .map(String)
-    .filter(ok)
-    .sort((x, y) => chroma(y) - chroma(x));
-  return c[0];
-}
-
-// Derive brand roles from rich capture colorStats (areaBg / interactiveBg / textCount /
-// maxArea) — by semantic FUNCTION, not luminance/chroma proxies. Returns null when stats
-// are unusable, so the caller can fall back. canvas = the color painting the most real
-// background area (the page ground, dark or light); ink = the dominant text color that
-// actually contrasts with the canvas; accent via pickAccent.
-export function brandRolesFromStats(stats, colorsInOrder) {
-  if (!Array.isArray(stats) || !stats.length) return null;
-  const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
-  if (!v.length) return null;
-  const canvas = [...v].sort(
-    (a, b) =>
-      (b.areaBg || 0) - (a.areaBg || 0) ||
-      (b.maxArea || 0) - (a.maxArea || 0) ||
-      (b.bgCount || 0) - (a.bgCount || 0),
-  )[0]?.hex;
-  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
-  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
-  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
-  if (!canvas || !accent) return null;
-  const cl = lum(canvas) ?? 0;
-  const ink =
-    [...v]
-      .filter((s) => s.hex !== canvas && s.hex !== accent)
-      .sort((a, b) => (b.textCount || 0) - (a.textCount || 0))
-      .find((s) => Math.abs((lum(s.hex) ?? 0) - cl) > 64)?.hex ??
-    (cl > 128 ? "#000000" : "#FFFFFF");
-  const accent2 =
-    pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas, ink, accent]) ?? accent;
-  return { ink, canvas, accent, accent2 };
-}
-
-// Map a list of [key, value] colors to semantic roles. ink = a dark/ink-named
-// color (else darkest); canvas = a paper/cream/white-named color (else lightest);
-// accents = whatever's left, ranked by chroma (the loudest color is almost always
-// the brand accent) — UA-default link colors AND semantic status colors (positive/
-// negative/error…) excluded so neither a stray <a> color nor a status red ever wins.
-// For an unkeyed brand list, pass synthetic keys — name matching simply no-ops and it
-// falls back to luminance/chroma, which is what we want. NOTE: when capture colorStats
-// exist, prefer brandRolesFromStats() — it picks by function, not these proxies.
-export function semanticColors(colors) {
-  if (!colors.length) return {};
-  const named = (re) => colors.find(([k]) => re.test(k));
-  const hexes = colors.filter(([, v]) => lum(v) != null);
-  const byLum = [...hexes].sort((a, b) => (lum(a[1]) ?? 1e9) - (lum(b[1]) ?? 1e9));
-  const pick = (m, fallback) => (m ? m[1] : fallback ? fallback[1] : undefined);
-  // "ink" must be a whole word-segment so "soft-pink"/"pink" don't match it.
-  const ink = pick(
-    named(/(?:^|[-_])ink(?:[-_]|$)|black|charcoal|^text(?:-dark)?$|outline|noir/i),
-    byLum[0] ?? colors[0],
-  );
-  const canvas = pick(
-    named(/cream|paper|canvas|white|bg|ground|surface|base|sand|parchment|off-?white|bone/i),
-    byLum[byLum.length - 1] ?? colors[colors.length - 1],
-  );
-  const accents = colors
-    .filter(
-      ([k, v]) =>
-        v !== ink &&
-        v !== canvas &&
-        !UA_DEFAULT_COLORS.has(String(v).toUpperCase()) &&
-        !STATUS_ROLE_KEY.test(k), // a status red/green carries meaning by hue — never an accent
-    )
-    .sort((a, b) => chroma(b[1]) - chroma(a[1]))
-    .map(([, v]) => v);
-  return { ink, canvas, accent: accents[0] ?? ink, accent2: accents[1] ?? accents[0] ?? ink };
-}
-
-// Collect role→fontFamily under the top-level `typography:` block; pick a display
-// + body family from the usual role names. Returns quoted families (or null).
-export function parseFonts(md) {
-  const roles = {};
-  let inBlock = false;
-  for (const line of md.split(/\r?\n/)) {
-    if (/^typography:\s*$/.test(line)) {
-      inBlock = true;
-      continue;
-    }
-    if (!inBlock) continue;
-    if (/^\S/.test(line)) break;
-    const m = line.match(/^\s+([\w-]+):\s*\{[^}]*fontFamily:\s*"([^"]+)"/);
-    if (m) roles[m[1]] = m[2];
-  }
-  const q = (s) => (s ? `"${s}"` : null);
-  const body = roles.body ?? roles.subtitle ?? Object.values(roles)[0];
-  const display =
-    roles.display ??
-    roles.headline ??
-    roles["card-headline"] ??
-    roles["section-headline"] ??
-    roles["quote-display"] ??
-    roles.h1 ??
-    roles.h2 ??
-    roles.title ??
-    roles.hero ??
-    body;
-  // the monospace / chrome family (code, tags, ticks, page numbers) — so the remix can
-  // route a captured brand mono (Berkeley Mono, JetBrains Mono…) onto this role instead
-  // of the reading body. null when the preset has no distinct mono role.
-  const mono =
-    roles.mono ??
-    roles["mono-tag"] ??
-    roles["mono-chrome"] ??
-    roles["mono-tick"] ??
-    roles.code ??
-    roles.data ??
-    roles.pagenum ??
-    null;
-  return { display: q(display), body: q(body), mono: q(mono) };
-}

package/skills/product-launch-video/scripts/lib/tokens.test.mjs

@@ -1,57 +0,0 @@
-import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import test from "node:test";
-import { fileURLToPath } from "node:url";
-import { brandRolesFromStats, ICON_FONT_PATTERN, isIconFont } from "./tokens.mjs";
-import { brandRolesFromStats as facelessBrandRolesFromStats } from "../../../faceless-explainer/scripts/lib/tokens.mjs";
-import { brandRolesFromStats as prBrandRolesFromStats } from "../../../pr-to-video/scripts/lib/tokens.mjs";
-
-const scriptsDir = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..");
-
-test("recognizes brand-specific icon font names", () => {
-  assert.equal(isIconFont("vidaXLfont"), true);
-  assert.equal(isIconFont("BrandGlyphFont"), true);
-  assert.equal(isIconFont("Poppins"), false);
-  assert.equal(isIconFont("HelveticaFont"), false);
-  assert.equal(isIconFont("Airbnb Cereal Font"), false);
-  assert.equal(isIconFont("SF Pro Text Font"), false);
-  assert.equal(isIconFont("Uber Move Font"), false);
-  assert.equal(isIconFont("Circular Std font"), false);
-  assert.equal(isIconFont("brand-font"), false);
-});
-
-test("keeps sibling skill icon-font classifiers aligned", () => {
-  for (const skill of ["faceless-explainer", "pr-to-video"]) {
-    const source = readFileSync(join(scriptsDir, skill, "scripts", "build-frame.mjs"), "utf8");
-    assert.match(
-      source,
-      new RegExp(String.raw`ICON_FONT_PATTERN\s*=\s*${escapeRegExp(ICON_FONT_PATTERN)}`),
-    );
-  }
-});
-
-function escapeRegExp(value) {
-  return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-test("preserves a prominent second accent used outside interactive backgrounds", () => {
-  const colors = ["#FFFFFF", "#2D1238", "#F3E62B", "#111111"];
-  const stats = [
-    { hex: "#FFFFFF", areaBg: 1000, maxArea: 1000 },
-    { hex: "#2D1238", textCount: 4, interactiveBg: 3 },
-    { hex: "#F3E62B", textCount: 3, interactiveBg: 0 },
-    { hex: "#111111", textCount: 20 },
-  ];
-
-  assert.deepEqual(brandRolesFromStats(stats, colors), {
-    canvas: "#FFFFFF",
-    ink: "#111111",
-    accent: "#F3E62B",
-    accent2: "#2D1238",
-  });
-
-  for (const sibling of [facelessBrandRolesFromStats, prBrandRolesFromStats]) {
-    assert.deepEqual(sibling(stats, colors), brandRolesFromStats(stats, colors));
-  }
-});

package/skills/product-launch-video/scripts/lib/transition-registry.mjs

@@ -1,38 +0,0 @@
-// transition-registry.mjs — loader for this skill's vendored transition registry
-// (./transitions.json). The registry is the curated Tier-B subset (transform /
-// opacity / filter on the two frame clip wrappers `#el-<id>`, no overlay DOM) +
-// each type's GSAP template. Vendored into the skill so it ships standalone; the
-// recipes originate from the shared catalog skills/hyperframes-animation/
-// transitions/ (css-*.md) — keep them in step if those shared recipes change.
-
-import { readFileSync } from "node:fs";
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const here = dirname(fileURLToPath(import.meta.url));
-export const DEFAULT_REGISTRY_PATH = resolve(here, "./transitions.json");
-
-let _cache = null;
-
-export function loadTransitionRegistry(registryPath = DEFAULT_REGISTRY_PATH) {
-  if (_cache && _cache.path === registryPath) return _cache.data;
-  let data;
-  try {
-    data = JSON.parse(readFileSync(registryPath, "utf8"));
-  } catch (e) {
-    throw new Error(`transition registry not loadable at ${registryPath}: ${e.message}`);
-  }
-  if (!Array.isArray(data.transitions) || data.transitions.length === 0) {
-    throw new Error(`transition registry ${registryPath} has no transitions[]`);
-  }
-  _cache = { path: registryPath, data };
-  return data;
-}
-
-// Convenience: a Map name -> transition record.
-export function transitionsByName(registryPath = DEFAULT_REGISTRY_PATH) {
-  const data = loadTransitionRegistry(registryPath);
-  const map = new Map();
-  for (const t of data.transitions) map.set(t.name, t);
-  return map;
-}

package/skills/product-launch-video/scripts/lib/transitions.json

@@ -1,71 +0,0 @@
-{
-  "_comment": "Vendored transition registry for the product-launch workflow — the curated Tier-B subset (transform/opacity/filter on the two frame clip wrappers #el-<id>, no overlay DOM, no per-frame cooperation). Each type carries its GSAP template; the transitions.mjs injector stamps it onto window.__timelines[\"main\"]. Recipes originate from the shared catalog skills/hyperframes-animation/transitions/ (css-*.md) — keep in step if those change. Token placeholders the injector substitutes: __OLD__ (#el-<from>), __NEW__ (#el-<to>), __T__ (overlap-start s), __DUR__ (this boundary's duration), __DX__/__DXIN__ (horizontal travel + incoming offset), __DY__/__DYIN__ (vertical).",
-  "transitions": [
-    {
-      "name": "crossfade",
-      "energy": "any",
-      "default_duration_s": 0.5,
-      "directions": [],
-      "source": "css-dissolve.md",
-      "gsap_template": [
-        "tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
-        "tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
-      ]
-    },
-    {
-      "name": "blur-crossfade",
-      "energy": "calm",
-      "default_duration_s": 0.6,
-      "directions": [],
-      "source": "css-dissolve.md",
-      "note": "Default when the two frames' #root backgrounds differ a lot — the blur masks the background-color clash a plain crossfade would expose.",
-      "gsap_template": [
-        "tl.to(__OLD__, { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: __DUR__, ease: \"power2.inOut\" }, __T__);",
-        "tl.fromTo(__NEW__, { filter: \"blur(10px)\", scale: 0.97, opacity: 0 }, { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: __DUR__, ease: \"power2.inOut\" }, __T__);"
-      ]
-    },
-    {
-      "name": "push-slide",
-      "energy": "medium",
-      "default_duration_s": 0.5,
-      "directions": ["LEFT", "RIGHT", "UP", "DOWN"],
-      "default_direction": "LEFT",
-      "source": "css-push.md",
-      "note": "Directional. The injector picks __DX__/__DY__ from the direction and emits the horizontal OR vertical pair (not both).",
-      "gsap_template_horizontal": [
-        "tl.to(__OLD__, { x: __DX__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
-        "tl.fromTo(__NEW__, { x: __DXIN__, opacity: 1 }, { x: 0, opacity: 1, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
-      ],
-      "gsap_template_vertical": [
-        "tl.to(__OLD__, { y: __DY__, duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
-        "tl.fromTo(__NEW__, { y: __DYIN__, opacity: 1 }, { y: 0, opacity: 1, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
-      ]
-    },
-    {
-      "name": "zoom-through",
-      "energy": "high",
-      "default_duration_s": 0.4,
-      "directions": [],
-      "source": "css-scale.md",
-      "gsap_template": [
-        "tl.to(__OLD__, { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: __DUR__, ease: \"power3.in\" }, __T__);",
-        "tl.fromTo(__NEW__, { scale: 0.5, opacity: 0, filter: \"blur(8px)\" }, { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: __DUR__, ease: \"power3.out\" }, __T__);"
-      ]
-    },
-    {
-      "name": "squeeze",
-      "energy": "medium",
-      "default_duration_s": 0.4,
-      "directions": [],
-      "source": "css-push.md",
-      "note": "Old compresses to a vertical line on the left edge; new expands from the right edge. Incoming starts off (scaleX 0) so its higher-track stacking is harmless.",
-      "gsap_template": [
-        "tl.to(__OLD__, { scaleX: 0, transformOrigin: \"left center\", duration: __DUR__, ease: \"power3.inOut\" }, __T__);",
-        "tl.fromTo(__NEW__, { scaleX: 0, transformOrigin: \"right center\", opacity: 1 }, { scaleX: 1, transformOrigin: \"right center\", opacity: 1, duration: __DUR__, ease: \"power3.inOut\" }, __T__);"
-      ]
-    }
-  ],
-  "default_high_energy": "zoom-through",
-  "default_calm": "blur-crossfade",
-  "max_duration_s": 2.0
-}

package/skills/product-launch-video/scripts/media-contract.test.mjs

@@ -1,200 +0,0 @@
-import { test } from "node:test";
-import assert from "node:assert/strict";
-import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
-import { tmpdir } from "node:os";
-import { spawnSync } from "node:child_process";
-
-const skillDir = join(dirname(fileURLToPath(import.meta.url)), "..");
-
-test("frame worker documents the approved video-hoist contract", () => {
-  const instructions = readFileSync(join(skillDir, "sub-agents", "frame-worker.md"), "utf8");
-
-  assert.match(instructions, /data-frame-video="approved"/);
-  assert.match(instructions, /assemble-index\.mjs.*hoists it to the host root/i);
-  assert.match(instructions, /Audio remains orchestrator-owned/i);
-});
-
-test("assemble hoists an approved timed frame video to the host root", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-"));
-  mkdirSync(join(project, "compositions"));
-  const framePath = join(project, "compositions", "frame-1.html");
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1 — Demo\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    framePath,
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="0" data-frame-video-y="0" data-frame-video-width="1920" data-frame-video-height="1080" src="https://cdn.example/clip.mp4" poster="poster.png" preload="auto" muted playsinline loop style="background:url(https://evil.example/x)" nonce="unsafe" onerror="alert(1)" srcdoc="<script>alert(2)</script>" data-start="0.25" data-duration="1.5" data-media-start="12.75" data-track-index="7"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-  assert.equal(result.status, 0, result.stderr);
-  const index = readFileSync(join(project, "index.html"), "utf8");
-  const frame = readFileSync(framePath, "utf8");
-  assert.match(index, /data-start="0\.25"/);
-  assert.match(index, /data-duration="1\.5"/);
-  assert.match(index, /data-media-start="12\.75"/);
-  assert.match(index, /data-track-index="1007"/);
-  assert.match(index, /src="https:\/\/cdn\.example\/clip\.mp4"/);
-  assert.match(index, /poster="poster\.png"/);
-  assert.match(index, /preload="auto"/);
-  assert.match(index, /\smuted(?:\s|>)/);
-  assert.match(index, /\splaysinline(?:\s|>)/);
-  assert.match(index, /\sloop(?:\s|>)/);
-  assert.doesNotMatch(index, /onerror=/i);
-  assert.doesNotMatch(index, /srcdoc=/i);
-  assert.doesNotMatch(index, /nonce=/i);
-  assert.match(
-    index,
-    /style="position:absolute;left:0px;top:0px;width:1920px;height:1080px;object-fit:cover"/,
-  );
-  assert.doesNotMatch(frame, /<video\b/i);
-});
-
-test("assemble preserves approved-video geometry through sanitized host CSS", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-"));
-  mkdirSync(join(project, "compositions"));
-  const framePath = join(project, "compositions", "frame-1.html");
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    framePath,
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video class="clip approved-demo" data-frame-video="approved" data-frame-video-x="120" data-frame-video-y="240" data-frame-video-width="960" data-frame-video-height="540" data-frame-video-fit="cover" src="clip.mp4" style="position:fixed;background:url(https://evil.example/x)" nonce="unsafe" onerror="alert(1)" srcdoc="<script>alert(2)</script>" data-start="0" data-duration="1" data-track-index="7"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-
-  assert.equal(result.status, 0, result.stderr);
-  const index = readFileSync(join(project, "index.html"), "utf8");
-  assert.match(
-    index,
-    /style="position:absolute;left:120px;top:240px;width:960px;height:540px;object-fit:cover"/,
-  );
-  assert.doesNotMatch(index, /approved-demo/);
-  assert.doesNotMatch(index, /evil\.example/);
-  assert.doesNotMatch(index, /position:fixed/);
-  assert.doesNotMatch(index, /data-frame-video-(?:x|y|width|height|fit)=/);
-  assert.doesNotMatch(index, /onerror=|srcdoc=|nonce=/i);
-  assert.doesNotMatch(readFileSync(framePath, "utf8"), /<video\b/i);
-});
-
-test("rejects partial or unsafe approved-video layout geometry", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-invalid-"));
-  mkdirSync(join(project, "compositions"));
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    join(project, "compositions", "frame-1.html"),
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="0" data-frame-video-y="0" data-frame-video-width="calc(100% + 1px)" data-frame-video-height="1080" data-frame-video-fit="cover" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-
-  assert.notEqual(result.status, 0);
-  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
-  assert.equal(existsSync(join(project, "index.html")), false);
-});
-
-test("rejects an approved video without mandatory layout geometry", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-missing-"));
-  mkdirSync(join(project, "compositions"));
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    join(project, "compositions", "frame-1.html"),
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-
-  assert.notEqual(result.status, 0);
-  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
-  assert.equal(existsSync(join(project, "index.html")), false);
-});
-
-test("rejects empty approved-video layout coordinates", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-layout-empty-"));
-  mkdirSync(join(project, "compositions"));
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    join(project, "compositions", "frame-1.html"),
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" data-frame-video-x="" data-frame-video-y="0" data-frame-video-width="1920" data-frame-video-height="1080" src="clip.mp4" data-start="0" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-
-  assert.notEqual(result.status, 0);
-  assert.match(result.stderr, /approved frame video layout.*finite numeric/i);
-  assert.equal(existsSync(join(project, "index.html")), false);
-});
-
-test("rejects an approved video with missing admission timing", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-missing-"));
-  mkdirSync(join(project, "compositions"));
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    join(project, "compositions", "frame-1.html"),
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"><video data-frame-video="approved" src="clip.mp4" data-duration="1" data-track-index="0"></video></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline();</script></body></html>`,
-  );
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-  assert.notEqual(result.status, 0);
-  assert.match(result.stderr, /must declare quoted data-start/i);
-});
-
-test("does not hoist declarations hidden in comments or scripts", () => {
-  const project = mkdtempSync(join(tmpdir(), "hf-frame-video-hidden-"));
-  mkdirSync(join(project, "compositions"));
-  writeFileSync(
-    join(project, "STORYBOARD.md"),
-    "---\nformat: 16:9\n---\n\n## Frame 1\n- status: built\n- duration: 2s\n- src: compositions/frame-1.html\n",
-  );
-  writeFileSync(
-    join(project, "compositions", "frame-1.html"),
-    `<html><body><div id="root" data-composition-id="frame-1" data-width="1920" data-height="1080"></div><script>window.__timelines = {}; window.__timelines["frame-1"] = gsap.timeline(); const s = '<video data-frame-video="approved" data-start="0" data-duration="1" data-track-index="1"></video>';</script><!-- <video data-frame-video="approved" data-start="0" data-duration="1" data-track-index="2"></video> --></body></html>`,
-  );
-  const result = spawnSync(
-    process.execPath,
-    [join(skillDir, "scripts", "assemble-index.mjs"), "--hyperframes", project],
-    { encoding: "utf8" },
-  );
-  assert.equal(result.status, 0, result.stderr);
-  assert.doesNotMatch(readFileSync(join(project, "index.html"), "utf8"), /data-track-index="1001"/);
-});

package/skills/product-launch-video/scripts/stage-assets.mjs

@@ -1,39 +0,0 @@
-#!/usr/bin/env node
-// stage-assets.mjs — copy each frame's named asset_candidates from capture/ into
-// assets/ so Step 5 frame workers reference real files and the live preview
-// (Step 3 / Step 6) shows them. Runs at Step 4 close, once visual design is
-// locked. assemble-index.mjs re-runs the same staging idempotently as a backstop.
-//
-// Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>.
-// Writes: assets/<basename> for each named, found asset.
-// Exit 0 always once the storyboard parses — a missing asset is a non-fatal
-// anomaly (the frame would 404 it), not a contract break.
-
-import { existsSync, readFileSync } from "node:fs";
-import { join, resolve } from "node:path";
-import { parseStoryboard } from "./lib/storyboard.mjs";
-import { stageAssets } from "./lib/assets.mjs";
-
-const argv = process.argv.slice(2);
-const flag = (name, def) => {
-  const i = argv.indexOf(`--${name}`);
-  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
-};
-function die(msg) {
-  console.error(`✗ stage-assets.mjs: ${msg}`);
-  process.exit(1);
-}
-
-const hyperframesDir = resolve(flag("hyperframes", "."));
-const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
-
-if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
-const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
-
-const { staged, wanted, anomalies } = stageAssets({ hyperframesDir, frames: manifest.frames });
-
-console.log(`✓ staged ${staged}/${wanted.size} asset(s) into assets/`);
-if (anomalies.length) {
-  console.log(`\nanomalies (non-fatal):`);
-  for (const a of anomalies) console.log(`  - ${a}`);
-}