refactor(skills): move product-launch / pr-to-video / faceless-explainer onto the script-driven architecture (#1635)

* refactor(product-launch-video): restructure onto script-driven architecture

Move product-launch-video onto the shared script-driven authoring flow:
build-frame remixes a hyperframes-creative preset onto brand tokens, audio
routes through the shared hyperframes-media engine, per-preset caption skins,
and every frame is authored as a directed shot. Removes the old bespoke
scripts (captions/validate/prep/hoist/…) in favour of the shared lib.

assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard
(reject an empty or markup-less scene file at assembly, before emitting
data-composition-src, and re-dispatch) carried onto the restructured reader.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(pr-to-video): restructure onto script-driven architecture

Move pr-to-video onto the shared script-driven authoring flow: ingest.mjs
folds the gh PR artifacts into the synthetic capture package the shared
backend (build-frame / captions / assemble-index) reads, add the mechanism
beat, route audio through hyperframes-media, and remix a hyperframes-creative
preset onto brand tokens via the shared lib.

- Fix skill name: pr-to-video-refactor -> pr-to-video (match directory).
- Drop a stale faceless-explainer-refactor reference in an ingest.mjs comment.
- assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(faceless-explainer): restructure onto script-driven architecture

Move faceless-explainer onto the shared script-driven authoring flow:
every visual is invented (typography / abstract graphics / diagram / data-viz)
and authored through the shared backend (build-frame remixes a
hyperframes-creative preset onto tokens, audio via hyperframes-media,
assemble-index builds the standalone index.html) using the shared lib.

- Fix skill name: faceless-explainer-refactor -> faceless-explainer (match directory).
- assemble-index.mjs keeps upstream #1629's blank/partial scene-file guard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(skills): refresh test-skills-fresh.sh workflow roster

Update the install-and-verify harness to the current surface: 10 workflows
(adds website-to-video, embedded-captions, graphic-overlays, slideshow;
drops the removed footage-recut) and refreshed example prompts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* style(product-launch-video): oxfmt storyboard.mjs

Run oxfmt over lib/storyboard.mjs — formatting only, no logic change.
Fixes the Format / Preflight CI check.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* test(studio): import commitGsapPositionFromDrag from its actual module

The function was split out into gsapDragPositionCommit.ts in #1605, but the
test kept importing it from ./gsapDragCommit, which no longer exports it —
yielding 'is not a function' at runtime. Import from the correct module.

Inherited main breakage (same fix as #1631); fixes the Test CI check on this
branch independently of merge order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(hyperframes): refine router skill metadata tags

Update the entry router's metadata tags (video / animation / router focus);
oxfmt collapses the now-shorter metadata to a single line.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): tighten caption comment-strip + document audio --only merge

Review follow-ups (#1635):

- captions.mjs (x3): the HTML-comment strip used a single global replace, which
  CodeQL flags as incomplete multi-character sanitization (a nested/partial pair
  can re-form a marker the single pass misses). Strip in a fixpoint loop instead.
  Input is preset-library content, not user-controlled, so this is lint-
  cleanliness, not XSS defense.
- audio.mjs (x3): document that fetch-sfx (--only sfx) MERGES into the neutral
  audio_engine_meta.json sidecar — the engine reads prev and recomputes only the
  sfx section, so voices/bgm from the generate pass are preserved (review Q).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): remove existsSync->write TOCTOU in workflow scripts

Clears the 9 js/file-system-race CodeQL alerts (captions/audio/transitions x3).
Each was an existsSync precheck followed by a later write of the same path:

- captions.mjs: caption-overrides shim -> atomic writeFileSync({ flag: 'wx' }).
- audio.mjs (sync-durations) + transitions.mjs (inject): drop the existsSync
  precheck and read directly, surfacing the same friendly error from a try/catch
  on readFileSync — no check->write gap.

Behavior is unchanged (same error messages); these are local single-process
deterministic scripts so the race was never a real risk, but this clears the gate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(skills): paint root composition ground color in assemble-index

Per-frame roots carry data-start/data-duration and get clip-gated against the
global timeline at render, so only the first frame's window overlaps global 0 —
a frame's own full-bleed background can't serve as the video ground, and every
frame after the first renders on the bare body color (black). Paint the ground
on the always-present root composition using the project's frame.md canvas color
(the same role the caption skin maps to --cap-canvas); fall back to the body
letterbox color when frame.md is absent or has no resolvable ground.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(hyperframes): drop router-tag edit (moved to the foundation PR)

The entry SKILL.md is rewritten wholesale by the frame-presets/media foundation
PR (#1632); editing it here too guaranteed a merge conflict. Restore this file
to main and let the router-tag tweak live with the rewrite in #1632, so the two
PRs no longer both touch it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
WaterrrForever
2026-06-22 22:49:42 +08:00
committed by GitHub
co-authored by Claude Opus 4.8
parent d0f0ec29e7
commit 1967901b57
630 changed files with 8846 additions and 87665 deletions
+274 -527
View File
@@ -1,573 +1,320 @@
#!/usr/bin/env node
// transitions.mjs — merges three former Phase-4c scripts behind one subcommand dispatcher.
// transitions.mjs — inter-frame transition injector + verifier for product-launch.
//
// inject ← inject-transitions.mjs (Tier-B/Tier-A wrapper overlap + GSAP stamp)
// verify ← verify-transitions.mjs (deterministic gate over injector output)
// check-bridge ← check-bridge-continuity.mjs (Step-6 preflight gate for Tier-A bridges)
// inject — read STORYBOARD frame order + each frame's transition_in, overlap
// the frame clip wrappers in index.html, and stamp the GSAP template.
// verify — deterministic gate over the injector's output.
//
// Each subcommand reads its args from process.argv AFTER the subcommand token
// (i.e. process.argv.slice(3)). Original per-subcommand usage:
// node transitions.mjs inject --group-spec ./group_spec.json --hyperframes .
// node transitions.mjs verify --group-spec ./group_spec.json --index ./index.html
// node transitions.mjs check-bridge --hyperframes . --group-spec ./group_spec.json
// transition_in (written by story-design on the INCOMING frame) names a registry
// type directly: crossfade | blur-crossfade | push-slide | zoom-through | squeeze,
// optionally "<type> <DIR>" / "<type> <N>s" (e.g. "push-slide LEFT", "crossfade
// 0.4s"). `cut` / `none` / empty ⇒ hard cut (no overlap, no stamp).
//
// Mechanics — EXTEND-OUTGOING-ONLY (keeps voice/SFX/captions synced; their timing
// is keyed to the original frame start). At boundary i→i+1 (type = the incoming
// frame's transition_in): extend ONLY the outgoing wrapper's data-duration by
// `dur` so it holds its final frame across the window; do NOT move any data-start;
// the incoming — already present from the cut on a higher track — fades/pushes in
// over it. Then 0/1-ping-pong ALL frame clips' data-track-index (adjacent
// overlapping wrappers never share a track — lint timeline_track_too_dense) and
// stamp the token-substituted GSAP template into __timelines["main"] at T =
// incoming start. captions(2)/voice(10)/bgm(11)/sfx(20+) are never touched.
//
// node transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
// node transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
import { existsSync, readFileSync, writeFileSync } from "node:fs";
import { join, resolve } from "node:path";
import { transitionsByName } from "./lib/transition-registry.mjs";
import { readDims } from "./lib/dimensions.mjs";
import { parseStoryboard } from "./lib/storyboard.mjs";
import { parseFormat } from "./lib/dimensions.mjs";
import { loadTransitionRegistry, transitionsByName } from "./lib/transition-registry.mjs";
// ===========================================================================
// inject ← inject-transitions.mjs
async function runInject(argv) {
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(`✗ inject-transitions.mjs: ${msg}`);
process.exit(1);
}
const groupSpecPath = resolve(flag("group-spec", "./group_spec.json"));
const hyperframesDir = resolve(flag("hyperframes", "."));
const indexPath = join(hyperframesDir, "index.html");
if (!existsSync(groupSpecPath)) die(`group_spec.json not found at ${groupSpecPath}`);
if (!existsSync(indexPath))
die(`index.html not found at ${indexPath} — run assemble-index.mjs first`);
let spec;
try {
spec = JSON.parse(readFileSync(groupSpecPath, "utf8"));
} catch (e) {
die(`group_spec.json parse: ${e.message}`);
}
// Slide transitions push a wrapper fully off-canvas, so the travel distance is
// the canvas dimension along the slide axis (read from group_spec; landscape
// default for pre-dims specs).
const { width: CANVAS_W, height: CANVAS_H } = readDims(spec);
const transitions = Array.isArray(spec.transitions) ? spec.transitions : [];
const rawInjectable = transitions.filter((t) => t.tier === "b" || t.tier === "a");
let html = readFileSync(indexPath, "utf8");
if (rawInjectable.length === 0) {
console.log(`✓ inject-transitions: 0 transitions to inject — index.html unchanged`);
process.exit(0);
}
let txByName;
try {
txByName = transitionsByName();
} catch (e) {
die(`transition registry: ${e.message}`);
}
// The authoritative VISUAL clip id set. Captions / voice / bgm / sfx also use
// id="el-…" or data-composition-src, but they are not visual scene clips and
// must not join the ping-pong transition track assignment.
const visualIds = new Set();
if (Array.isArray(spec.visual_clips) && spec.visual_clips.length > 0) {
for (const v of spec.visual_clips) if (v?.id) visualIds.add(v.id);
} else {
for (const g of spec.groups || []) for (const sid of g.scene_ids || []) visualIds.add(sid);
}
if (visualIds.size === 0) die(`group_spec has no visual clips — cannot identify wrappers`);
const sceneToVisual = spec.scene_to_visual || {};
const normalizeClipId = (id) => (visualIds.has(id) ? id : sceneToVisual[id] || id);
// ---------- parse VISUAL clip wrappers out of index.html ----------
// assemble-index emits each scene clip as a stable multi-line block:
// <div\n id="el-<sid>"\n data-composition-id=...\n data-composition-src=...\n
// data-start="X"\n data-duration="Y"\n data-track-index="0"\n ...></div>
// We only keep clips whose id is a known visual clip — captions (el-captions)
// and audio (el-<sid>-voice) are excluded. Play order comes from data-start ascending.
const clipRe = /<div\s+id="el-([A-Za-z0-9_]+)"([\s\S]*?)><\/div>/g;
const clips = new Map(); // visual_id -> { sid, start, duration, track, block }
let cm;
while ((cm = clipRe.exec(html)) !== null) {
const sid = cm[1];
if (!visualIds.has(sid)) continue; // skip captions / voice / bgm / sfx
const block = cm[0];
const attrs = cm[2];
const num = (re) => {
const m = attrs.match(re);
return m ? Number(m[1]) : null;
};
const start = num(/data-start="([\d.]+)"/);
const duration = num(/data-duration="([\d.]+)"/);
const track = num(/data-track-index="(\d+)"/);
if (start == null || duration == null) {
die(
`scene clip #el-${sid} missing data-start/data-duration — assemble-index output malformed`,
);
}
clips.set(sid, { sid, start, duration, track: track ?? 0, block });
}
if (clips.size === 0)
die(`no visual clip wrappers found in index.html for ids: ${[...visualIds].join(", ")}`);
// Completeness guard against assemble-index emit drift. Every "HF-SCENE-CLIP <id>"
// marker (emitted by assemble-index.mjs immediately before each visual clip <div>)
// whose id is a known visual clip MUST have been parsed by clipRe above. If the
// <div id="el-<id>"> emit shape changes and the regex stops matching, this fails
// loudly here instead of silently dropping a clip from the ping-pong track
// reassignment below (which would surface much later as overlapping_clips_same_track).
// Older index.html without the marker → markerIds empty → no-op (backward compatible).
// Keep the marker string in lockstep with assemble-index.mjs.
const markerIds = [...html.matchAll(/<!--\s*HF-SCENE-CLIP\s+([A-Za-z0-9_]+)\b/g)]
.map((m) => m[1])
.filter((id) => visualIds.has(id));
const missedIds = markerIds.filter((id) => !clips.has(id));
if (missedIds.length)
die(
`visual-clip parse drift: assemble-index marked ${markerIds.length} visual clip(s) but the parser missed ${missedIds.join(", ")} — the <div id="el-<id>"> emit format changed; resync transitions.mjs with assemble-index.mjs`,
);
// ---------- apply overlaps ----------
const gsapLines = [];
const applied = [];
const skippedInternal = [];
for (const raw of rawInjectable) {
const t = { ...raw, from: normalizeClipId(raw.from), to: normalizeClipId(raw.to) };
if (t.from === t.to) {
skippedInternal.push(raw);
continue;
}
const fromClip = clips.get(t.from);
const toClip = clips.get(t.to);
if (!fromClip || !toClip) {
die(
`transition ${t.from}${t.to}: clip wrapper(s) not in index.html (from=${!!fromClip}, to=${!!toClip})`,
);
}
const dur = Number(t.duration_s) || 0.5;
// EXTEND-OUTGOING-ONLY overlap. The transition plays in [cut, cut + dur], where
// `cut` is the incoming scene's start (= the outgoing scene's natural end, since
// scenes tile). We extend ONLY the outgoing wrapper by `dur` so it lingers (held
// final frame) across the window while the incoming — already present from `cut`
// on the higher track — fades/pushes IN over it. We do NOT move any scene's
// data-start, so voice/SFX/caption timing (all keyed to the original start_s)
// stays perfectly in sync. Overlap window == tween window == `dur`. No dead frames.
const T = Number(toClip.start.toFixed(3)); // cut = incoming start
fromClip.duration = Number((fromClip.duration + dur).toFixed(3));
gsapLines.push(...buildGsap(t, dur, T));
applied.push({ ...t, T, durApplied: dur });
}
// ---------- mandatory 0/1 ping-pong track reassignment ----------
// Walk scene clips in play order (start asc, stable by sid) and alternate track 0/1.
// Overlapping neighbors always land on different tracks; non-adjacent clips reuse a
// track but never overlap, so overlapping_clips_same_track stays clean.
const ordered = [...clips.values()].sort((a, b) =>
a.start !== b.start ? a.start - b.start : a.sid.localeCompare(b.sid),
);
ordered.forEach((c, i) => {
c.track = i % 2;
});
// ---------- rewrite each clip block in html ----------
for (const c of clips.values()) {
let nb = c.block
.replace(/data-start="[\d.]+"/, `data-start="${c.start}"`)
.replace(/data-duration="[\d.]+"/, `data-duration="${c.duration}"`)
.replace(/data-track-index="\d+"/, `data-track-index="${c.track}"`);
if (nb === c.block && c.block.includes(`data-track-index`)) {
// attrs unchanged is fine; only fail if the block had no track attr to rewrite
}
html = html.replace(c.block, nb);
}
// ---------- inject GSAP after the master timeline creation ----------
// assemble-index emits: window.__timelines["main"] = gsap.timeline({ paused: true });
const masterAnchor = 'window.__timelines["main"] = gsap.timeline({ paused: true });';
if (!html.includes(masterAnchor)) {
die(`master timeline anchor not found in index.html — expected: ${masterAnchor}`);
}
const block = [
masterAnchor,
" // ── scene transitions (injected by inject-transitions.mjs) ──",
' (function () { var tl = window.__timelines["main"];',
...gsapLines.map((l) => " " + l),
" })();",
].join("\n");
html = html.replace(masterAnchor, block);
writeFileSync(indexPath, html);
// ---------- summary ----------
const nB = applied.filter((a) => a.tier === "b").length;
const nA = applied.filter((a) => a.tier === "a").length;
console.log(
`✓ inject-transitions: ${applied.length} transition(s) stamped into index.html (tier-b ${nB}, tier-a ${nA})`,
);
if (skippedInternal.length) {
console.log(` skipped ${skippedInternal.length} intra-visual transition(s)`);
}
for (const a of applied) {
const dir = a.direction ? ` ${a.direction}` : "";
const tag = a.tier === "a" ? ` [Tier-A bridge:${a.bridge_id || "?"}]` : "";
console.log(
` ${a.from}${a.to}: ${a.type}${dir} ${a.durApplied}s @ T=${a.T}s${tag} (from ext +${a.durApplied}s, to start→${a.T})`,
);
}
const trackSummary = [...clips.values()]
.sort((a, b) => a.start - b.start)
.map((c) => `${c.sid}[t${c.track} ${c.start}${Number((c.start + c.duration).toFixed(3))}]`)
.join(" ");
console.log(` tracks: ${trackSummary}`);
// ===========================================================================
// build the GSAP lines for one transition.
function buildGsap(t, dur, T) {
const OLD = `"#el-${t.from}"`;
const NEW = `"#el-${t.to}"`;
// Tier A: the worker authored the morph INSIDE the two scenes (outgoing tweens the
// bridge element to a handoff pose; incoming starts there, holds for the seam, then
// continues). The harness only crossfades the WRAPPERS so bg/title swap while the
// aligned bridge element reads as one continuous element. No registry template.
if (t.tier === "a") {
return [
`tl.to(${OLD}, { opacity: 0, duration: ${dur}, ease: "power1.inOut" }, ${T});`,
`tl.fromTo(${NEW}, { opacity: 0 }, { opacity: 1, duration: ${dur}, ease: "power1.inOut" }, ${T});`,
];
}
const rec = txByName.get(t.type);
if (!rec) die(`transition ${t.from}${t.to}: type "${t.type}" not in registry`);
// pick template: directional types have horizontal/vertical variants
let template;
let extra = {};
if (rec.directions && rec.directions.length > 0) {
const dir = (t.direction || rec.default_direction || rec.directions[0]).toUpperCase();
const vertical = dir === "UP" || dir === "DOWN";
template = vertical ? rec.gsap_template_vertical : rec.gsap_template_horizontal;
if (!template)
die(`transition ${t.type}: missing ${vertical ? "vertical" : "horizontal"} template`);
if (vertical) {
const dy = dir === "UP" ? -CANVAS_H : CANVAS_H;
extra.__DY__ = String(dy);
extra.__DYIN__ = String(-dy); // incoming enters from the opposite edge
} else {
const dx = dir === "LEFT" ? -CANVAS_W : CANVAS_W;
extra.__DX__ = String(dx);
extra.__DXIN__ = String(-dx);
}
} else {
template = rec.gsap_template;
if (!template) die(`transition ${t.type}: missing gsap_template`);
}
const subs = {
__OLD__: OLD,
__NEW__: NEW,
__T__: String(T),
__DUR__: String(dur),
...extra,
};
return template.map((line) => {
let out = line;
for (const [k, v] of Object.entries(subs)) out = out.split(k).join(v);
return out;
});
const flag = (argv, name, def) => {
const i = argv.indexOf(`--${name}`);
return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
};
const NO_TRANSITION = new Set(["cut", "none", ""]);
const r3 = (x) => Number(x.toFixed(3));
// transition_in → { type, direction?, dur? } | null (hard cut).
function parseTransitionIn(raw) {
const s = (raw ?? "").trim();
if (NO_TRANSITION.has(s.toLowerCase())) return null;
const parts = s.split(/\s+/);
const spec = { type: parts[0].toLowerCase() };
for (const p of parts.slice(1)) {
const m = p.match(/^(\d+(?:\.\d+)?)s?$/);
if (m) spec.dur = Number(m[1]);
else spec.direction = p.toUpperCase();
}
return spec;
}
// ===========================================================================
// verify ← verify-transitions.mjs
async function runVerify(argv) {
const flag = (name, def) => {
const i = argv.indexOf(`--${name}`);
return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
};
const groupSpecPath = resolve(flag("group-spec", "./group_spec.json"));
const indexPath = resolve(flag("index", "./index.html"));
const fail = [];
function bail(msg) {
console.error(`✗ verify-transitions.mjs: ${msg}`);
process.exit(1);
// Mounted STORYBOARD frames present in index.html, in document order: { id, frame }.
function mountedFramesInOrder(manifest, html) {
const out = [];
for (const f of manifest.frames) {
if (!f.src) continue;
const id = f.src
.split("/")
.pop()
.replace(/\.html?$/i, "");
if (html.includes(`id="el-${id}"`)) out.push({ id, frame: f });
}
return out;
}
if (!existsSync(groupSpecPath)) bail(`group_spec.json not found at ${groupSpecPath}`);
if (!existsSync(indexPath)) bail(`index.html not found at ${indexPath}`);
let spec;
try {
spec = JSON.parse(readFileSync(groupSpecPath, "utf8"));
} catch (e) {
bail(`group_spec.json parse: ${e.message}`);
}
const transitions = Array.isArray(spec.transitions) ? spec.transitions : [];
const rawInjectable = transitions.filter((t) => t.tier === "b" || t.tier === "a");
// Authoritative VISUAL clip id set (same as the injector) — captions/voice/bgm/sfx
// are excluded from the visual track-overlap invariant.
const visualIds = new Set();
if (Array.isArray(spec.visual_clips) && spec.visual_clips.length > 0) {
for (const v of spec.visual_clips) if (v?.id) visualIds.add(v.id);
} else {
for (const g of spec.groups || []) for (const sid of g.scene_ids || []) visualIds.add(sid);
}
const sceneToVisual = spec.scene_to_visual || {};
const normalizeClipId = (id) => (visualIds.has(id) ? id : sceneToVisual[id] || id);
const injectable = rawInjectable
.map((t) => ({ ...t, from: normalizeClipId(t.from), to: normalizeClipId(t.to) }))
.filter((t) => t.from !== t.to);
const html = readFileSync(indexPath, "utf8");
// ---------- parse VISUAL clip wrappers (only known visual ids) ----------
const clipRe = /<div\s+id="el-([A-Za-z0-9_]+)"([\s\S]*?)><\/div>/g;
// Frame clip wrappers parsed out of index.html (ids carry hyphens; excludes
// el-captions and audio by keying off the known frame-id set). The id is matched
// from anywhere in the tag's attribute list — never assume it is the first attribute
// (the index assembler emits data-hf-id before id, so an id-first regex finds nothing
// and inject crashes on the empty clip map).
function parseFrameClips(html, frameIds) {
const clipRe = /<div\b([^>]*)><\/div>/g;
const clips = new Map();
let cm;
while ((cm = clipRe.exec(html)) !== null) {
if (!visualIds.has(cm[1])) continue; // skip captions / voice / bgm / sfx
const attrs = cm[2];
let m;
while ((m = clipRe.exec(html)) !== null) {
const attrs = m[1];
const idm = attrs.match(/\bid="el-([A-Za-z0-9_-]+)"/);
if (!idm || !frameIds.has(idm[1])) continue;
const num = (re) => {
const m = attrs.match(re);
return m ? Number(m[1]) : null;
const x = attrs.match(re);
return x ? Number(x[1]) : null;
};
clips.set(cm[1], {
sid: cm[1],
clips.set(idm[1], {
id: idm[1],
block: m[0],
start: num(/data-start="([\d.]+)"/),
duration: num(/data-duration="([\d.]+)"/),
track: num(/data-track-index="(\d+)"/) ?? 0,
});
}
return clips;
}
const EPS = 0.011; // ms-rounding tolerance (prep rounds to 3 dp)
// Resolve a transition_in spec to a registry record (calm default on unknown).
function resolveRecord(spec, byName, reg, warn) {
let rec = byName.get(spec.type);
if (!rec) {
rec = byName.get(reg.default_calm);
warn(`transition_in "${spec.type}" not in registry — using ${reg.default_calm}`);
}
return rec;
}
function resolveDur(spec, rec, reg) {
let dur = spec.dur ?? rec.default_duration_s ?? 0.5;
return Math.min(dur, reg.max_duration_s ?? 2.0);
}
// GSAP lines for one transition record (token substitution).
function buildGsap(rec, fromId, toId, dur, T, direction, canvasW, canvasH, die) {
const subs = {
__OLD__: `"#el-${fromId}"`,
__NEW__: `"#el-${toId}"`,
__T__: String(T),
__DUR__: String(dur),
};
let template;
if (rec.directions && rec.directions.length > 0) {
const dir = (direction || rec.default_direction || rec.directions[0]).toUpperCase();
const vertical = dir === "UP" || dir === "DOWN";
template = vertical ? rec.gsap_template_vertical : rec.gsap_template_horizontal;
if (!template)
die(`transition ${rec.name}: missing ${vertical ? "vertical" : "horizontal"} template`);
if (vertical) {
const dy = dir === "UP" ? -canvasH : canvasH;
subs.__DY__ = String(dy);
subs.__DYIN__ = String(-dy);
} else {
const dx = dir === "LEFT" ? -canvasW : canvasW;
subs.__DX__ = String(dx);
subs.__DXIN__ = String(-dx);
}
} else {
template = rec.gsap_template;
if (!template) die(`transition ${rec.name}: missing gsap_template`);
}
return template.map((line) => {
let out = line;
for (const [k, v] of Object.entries(subs)) out = out.split(k).join(v);
return out;
});
}
function runInject(argv) {
const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
const indexPath = join(hyperframesDir, "index.html");
const die = (msg) => {
console.error(`✗ transitions inject: ${msg}`);
process.exit(1);
};
if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
const { width: CW, height: CH } = parseFormat(manifest.globals.format);
const reg = loadTransitionRegistry();
const byName = transitionsByName();
// Read directly and handle ENOENT here, rather than an existsSync precheck —
// the check→write pair (write-back below) is a TOCTOU race CodeQL flags.
let html = "";
try {
html = readFileSync(indexPath, "utf8");
} catch {
die(`index.html not found at ${indexPath} — run assemble-index.mjs first`);
}
const order = mountedFramesInOrder(manifest, html);
if (order.length === 0) die("no frame clips found in index.html");
const frameIds = new Set(order.map((x) => x.id));
const clips = parseFrameClips(html, frameIds);
const gsapLines = [];
const applied = [];
for (let i = 1; i < order.length; i++) {
const spec = parseTransitionIn(order[i].frame.transitionIn);
if (!spec) continue; // hard cut
const incoming = clips.get(order[i].id);
const outgoing = clips.get(order[i - 1].id);
const rec = resolveRecord(spec, byName, reg, (m) =>
console.error(` ! frame ${order[i].id}: ${m}`),
);
const dur = resolveDur(spec, rec, reg);
const T = r3(incoming.start); // cut = incoming start (frames tile)
outgoing.duration = r3(outgoing.duration + dur); // extend outgoing only
gsapLines.push(
...buildGsap(rec, outgoing.id, incoming.id, dur, T, spec.direction, CW, CH, die),
);
applied.push({ from: outgoing.id, to: incoming.id, type: rec.name, dur, T });
}
if (applied.length === 0) {
console.log(`✓ transitions inject: 0 transitions (all cuts) — index.html unchanged`);
return;
}
// 0/1 ping-pong all frame clips in play order.
const ordered = [...clips.values()].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
ordered.forEach((c, i) => {
c.track = i % 2;
});
// rewrite each clip block: start unchanged; duration possibly extended; track ping-ponged.
for (const c of clips.values()) {
const nb = c.block
.replace(/data-duration="[\d.]+"/, `data-duration="${c.duration}"`)
.replace(/data-track-index="\d+"/, `data-track-index="${c.track}"`);
html = html.replace(c.block, nb);
}
// stamp the GSAP after the master timeline anchor.
const anchor = 'window.__timelines["main"] = gsap.timeline({ paused: true });';
if (!html.includes(anchor)) die("master timeline anchor not found in index.html");
// The transition tweens alone leave window.__timelines["main"] spanning only the
// last transition (e.g. 24.7s), shorter than the real composition. The Studio
// reads main.duration() as its master duration and parses clips against it, so a
// short master collapses its timeline (clips dropped, duration wrong, blank stage)
// — the render engine is unaffected (it trusts the root data-duration attr). Stamp
// a full-span anchor so main.duration() == composition total. Mirrors the
// `tl.to({}, { duration })` anchor captions.html already uses.
const rootDurMatch = html.match(/data-composition-id="main"[^>]*?data-duration="([\d.]+)"/);
const totalDur = rootDurMatch ? Number(rootDurMatch[1]) : null;
const block = [
anchor,
" // ── frame transitions (injected by transitions.mjs) ──",
' (function () { var tl = window.__timelines["main"];',
...gsapLines.map((l) => " " + l),
...(totalDur
? [
` tl.to({}, { duration: ${totalDur} }, 0); // full-span anchor — main.duration() == composition total (Studio master duration)`,
]
: []),
" })();",
].join("\n");
html = html.replace(anchor, block);
writeFileSync(indexPath, html);
console.log(`✓ transitions inject: ${applied.length} transition(s) stamped into index.html`);
for (const a of applied) console.log(` ${a.from}${a.to}: ${a.type} ${a.dur}s @ T=${a.T}s`);
const tracks = ordered
.map((c) => `${c.id}[t${c.track} ${c.start}${r3(c.start + c.duration)}]`)
.join(" ");
console.log(` tracks: ${tracks}`);
}
function runVerify(argv) {
const hyperframesDir = resolve(flag(argv, "hyperframes", "."));
const storyboardPath = resolve(flag(argv, "storyboard", join(hyperframesDir, "STORYBOARD.md")));
const indexPath = resolve(flag(argv, "index", join(hyperframesDir, "index.html")));
const bail = (msg) => {
console.error(`✗ transitions verify: ${msg}`);
process.exit(1);
};
if (!existsSync(storyboardPath)) bail("STORYBOARD.md not found");
if (!existsSync(indexPath)) bail("index.html not found");
const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
const html = readFileSync(indexPath, "utf8");
const order = mountedFramesInOrder(manifest, html);
const frameIds = new Set(order.map((x) => x.id));
const clips = parseFrameClips(html, frameIds);
const EPS = 0.011;
const overlaps = (a, b) =>
a.start < b.start + b.duration - EPS && b.start < a.start + a.duration - EPS;
const fail = [];
// ---------- (4) GLOBAL no-same-track-overlap ----------
// (4) global no same-track overlap (the lint invariant).
const all = [...clips.values()];
for (let i = 0; i < all.length; i++) {
for (let i = 0; i < all.length; i++)
for (let j = i + 1; j < all.length; j++) {
const a = all[i];
const b = all[j];
if (a.track === b.track && overlaps(a, b)) {
fail.push(
`same-track overlap: ${a.sid}[t${a.track} ${a.start}${(a.start + a.duration).toFixed(3)}] ` +
`and ${b.sid}[t${b.track} ${b.start}${(b.start + b.duration).toFixed(3)}] — lint would reject this`,
);
}
if (a.track === b.track && overlaps(a, b))
fail.push(`same-track overlap: ${a.id}[t${a.track}] & ${b.id}[t${b.track}]`);
}
}
// ---------- per-transition (1)(2)(3) ----------
// Isolate the injected transition block so the tween-reference check only looks there.
const blockMatch = html.match(/scene transitions \(injected[\s\S]*?\}\)\(\);/);
const txBlock = blockMatch ? blockMatch[0] : "";
if (injectable.length > 0 && !txBlock) {
fail.push(
`group_spec has ${injectable.length} transition(s) but no injected transition block in index.html`,
);
}
const bm = html.match(/frame transitions \(injected[\s\S]*?\}\)\(\);/);
const txBlock = bm ? bm[0] : "";
for (const t of injectable) {
const from = clips.get(t.from);
const to = clips.get(t.to);
if (!from || !to) {
fail.push(`transition ${t.from}${t.to}: wrapper(s) missing (from=${!!from}, to=${!!to})`);
let expected = 0;
for (let i = 1; i < order.length; i++) {
const spec = parseTransitionIn(order[i].frame.transitionIn);
if (!spec) continue;
expected++;
const to = clips.get(order[i].id);
const from = clips.get(order[i - 1].id);
if (!to || !from) {
fail.push(`boundary ${order[i - 1].id}${order[i].id}: wrapper missing`);
continue;
}
// (1) tween references both ids
if (!txBlock.includes(`"#el-${t.from}"`) || !txBlock.includes(`"#el-${t.to}"`)) {
fail.push(
`transition ${t.from}${t.to}: injected block does not reference both #el-${t.from} and #el-${t.to}`,
);
}
// (2) overlap ≈ duration_s (extend-outgoing-only: fromEnd - toStart ≈ dur)
const fromEnd = from.start + from.duration;
const overlapAmt = Number((fromEnd - to.start).toFixed(3));
const dur = Number(t.duration_s) || 0.5;
if (Math.abs(overlapAmt - dur) > EPS) {
fail.push(
`transition ${t.from}${t.to}: overlap ${overlapAmt}s ≠ duration ${dur}s ` +
`(from end ${fromEnd.toFixed(3)}, to start ${to.start})`,
);
}
// (3) overlapping wrappers on different tracks
if (from.track === to.track) {
fail.push(`transition ${t.from}${t.to}: both wrappers on track ${from.track} — must differ`);
}
if (!txBlock.includes(`"#el-${from.id}"`) || !txBlock.includes(`"#el-${to.id}"`))
fail.push(`boundary ${from.id}${to.id}: injected block does not reference both ids`);
const overlapAmt = r3(from.start + from.duration - to.start);
if (overlapAmt <= 0) fail.push(`boundary ${from.id}${to.id}: no overlap (${overlapAmt}s)`);
if (from.track === to.track)
fail.push(`boundary ${from.id}${to.id}: both on track ${from.track}`);
}
if (expected > 0 && !txBlock)
fail.push(`${expected} transition(s) expected but no injected block found`);
// ---------- report ----------
if (fail.length) {
console.error(`verify-transitions: ${fail.length} invariant failure(s):`);
console.error(`✗ transitions verify: ${fail.length} failure(s):`);
for (const f of fail) console.error(` - ${f}`);
process.exit(1);
}
console.log(
`verify-transitions: ${injectable.length} transition(s) verified ` +
`(overlap==duration, cross-track, both ids referenced, no same-track overlap)`,
`✓ transitions verify: ${expected} transition(s) verified (cross-track, overlap>0, both ids referenced, no same-track overlap)`,
);
}
// ===========================================================================
// check-bridge ← check-bridge-continuity.mjs
async function runCheckBridge(argv) {
const flag = (name, def) => {
const i = argv.indexOf(`--${name}`);
return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
};
const hyperframesDir = resolve(flag("hyperframes", "."));
const groupSpecPath = resolve(flag("group-spec", "./group_spec.json"));
const compositionsDir = join(hyperframesDir, "compositions");
const outPath = join(hyperframesDir, "bridge_check.json");
if (!existsSync(groupSpecPath)) {
console.error(`✗ check-bridge-continuity: group_spec.json not found at ${groupSpecPath}`);
process.exit(1);
}
let spec;
try {
spec = JSON.parse(readFileSync(groupSpecPath, "utf8"));
} catch (e) {
console.error(`✗ check-bridge-continuity: group_spec.json parse: ${e.message}`);
process.exit(1);
}
const bridges = (Array.isArray(spec.transitions) ? spec.transitions : []).filter(
(t) => t.tier === "a",
);
if (bridges.length === 0) {
console.log(`✓ check-bridge-continuity: 0 tier-a bridges — nothing to check`);
writeFileSync(outPath, JSON.stringify({ bridges: [], ok: true }, null, 2) + "\n");
process.exit(0);
}
const fatals = [];
const warnings = [];
const rows = [];
function readScene(sid) {
const p = join(compositionsDir, `${sid}.html`);
if (!existsSync(p)) {
fatals.push(`${sid}: compositions/${sid}.html missing — worker did not produce it`);
return null;
}
return readFileSync(p, "utf8");
}
// Find the element carrying data-bridge-id="<id>" and return its opening tag + class list.
function findBridgeEl(html, bridgeId) {
const re = new RegExp(`<[a-zA-Z][^>]*\\bdata-bridge-id=["']${bridgeId}["'][^>]*>`, "g");
const matches = html.match(re) || [];
return matches;
}
// Static-hidden check on the opening tag's inline style.
function inlineHidden(tag) {
const styleM = tag.match(/style=["']([^"']*)["']/i);
if (!styleM) return false;
const s = styleM[1].toLowerCase();
return (
/display\s*:\s*none/.test(s) ||
/visibility\s*:\s*hidden/.test(s) ||
/opacity\s*:\s*0(\.0+)?\s*(;|$)/.test(s)
);
}
for (const b of bridges) {
const id = b.bridge_id;
const row = { from: b.from, to: b.to, bridge_id: id, ok: true, notes: [] };
if (!id) {
fatals.push(
`${b.from}${b.to}: tier-a transition has no bridge_id (prep should have caught this)`,
);
row.ok = false;
rows.push(row);
continue;
}
for (const [sid, role] of [
[b.from, "from"],
[b.to, "to"],
]) {
const html = readScene(sid);
if (html == null) {
row.ok = false;
continue;
}
const tags = findBridgeEl(html, id);
if (tags.length === 0) {
fatals.push(
`${sid} (${role}): no element with data-bridge-id="${id}" — the shared bridge element is missing. ` +
`Both bridged scenes must contain <... data-bridge-id="${id}" ...>.`,
);
row.ok = false;
continue;
}
if (tags.length > 1) {
fatals.push(
`${sid} (${role}): ${tags.length} elements carry data-bridge-id="${id}" — must be exactly one`,
);
row.ok = false;
continue;
}
if (inlineHidden(tags[0])) {
fatals.push(
`${sid} (${role}): the bridge element data-bridge-id="${id}" has a static display:none/visibility:hidden/opacity:0 — it would be invisible at the seam. Make it visible (GSAP can still animate it in/out).`,
);
row.ok = false;
}
row.notes.push(`${role}=${sid}:found`);
}
rows.push(row);
}
writeFileSync(
outPath,
JSON.stringify({ bridges: rows, ok: fatals.length === 0, warnings }, null, 2) + "\n",
);
if (fatals.length) {
console.error(`✗ check-bridge-continuity: ${fatals.length} fatal(s):`);
for (const f of fatals) console.error(` - ${f}`);
console.error(
` → re-dispatch the worker(s) owning the affected scene(s); both bridged scenes must carry the same data-bridge-id.`,
);
process.exit(1);
}
console.log(
`✓ check-bridge-continuity: ${bridges.length} tier-a bridge(s) verified (element present + visible in both scenes)`,
);
for (const r of rows) console.log(` ${r.from}${r.to}: bridge="${r.bridge_id}" ✓`);
if (warnings.length) for (const w of warnings) console.log(`${w}`);
}
// ===========================================================================
// dispatcher
const sub = process.argv[2];
const rest = process.argv.slice(3);
switch (sub) {
case "inject":
await runInject(rest);
break;
case "verify":
await runVerify(rest);
break;
case "check-bridge":
await runCheckBridge(rest);
break;
default:
console.error("usage: node transitions.mjs <inject|verify|check-bridge> [args...]");
process.exit(2);
if (sub === "inject") runInject(rest);
else if (sub === "verify") runVerify(rest);
else {
console.error("usage: node transitions.mjs <inject|verify> [args...]");
process.exit(2);
}