gitreel 0.1.0

package/dist/engine/scenes/CalloutOverlay.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Audio, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { FPS, severityColor, severityLabel, theme } from "../theme";
+export const CalloutOverlay = ({ finding }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const startFrame = Math.round(finding.atSecond * FPS);
+    const slide = spring({ frame: frame - startFrame, fps, config: { damping: 15, stiffness: 170, mass: 0.6 } });
+    if (frame < startFrame)
+        return null;
+    const color = severityColor[finding.severity];
+    return (_jsxs(_Fragment, { children: [_jsx(Sequence, { from: startFrame, name: "finding-sting", children: _jsx(Audio, { src: staticFile("sfx/sting.wav"), volume: 0.5 }) }), _jsxs("div", { style: {
+                    position: "absolute",
+                    right: 72,
+                    bottom: 64,
+                    maxWidth: 760,
+                    backgroundColor: theme.bgPanel,
+                    border: `2px solid ${color}`,
+                    borderLeft: `12px solid ${color}`,
+                    borderRadius: 16,
+                    padding: "26px 32px",
+                    boxShadow: `0 24px 70px rgba(0,0,0,0.6), 0 0 40px ${color}22`,
+                    transform: `translateY(${(1 - slide) * 120}px) rotate(${(1 - slide) * 2}deg)`,
+                    opacity: slide,
+                }, children: [_jsxs("div", { style: {
+                            fontFamily: theme.fontDisplay,
+                            fontWeight: 800,
+                            fontSize: 24,
+                            letterSpacing: 3,
+                            color,
+                            marginBottom: 10,
+                        }, children: [severityIcon(finding.severity), " ", severityLabel[finding.severity]] }), _jsx("div", { style: { fontFamily: theme.fontDisplay, fontWeight: 600, fontSize: 32, color: theme.text }, children: finding.title }), finding.detail && (_jsx("div", { style: { fontFamily: theme.fontDisplay, fontSize: 26, color: theme.textDim, marginTop: 10 }, children: finding.detail }))] })] }));
+};
+const severityIcon = (severity) => severity === "blocking" ? "🛑" : severity === "warn" ? "⚠️" : "🔍";

package/dist/engine/scenes/CodeScene.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { type LineRange } from "../code/CodeBlock";
+import type { CodeLang } from "../code/highlight";
+import { type Finding } from "./CalloutOverlay";
+export type SpotlightBeat = {
+    readonly atSecond: number;
+    readonly lines: readonly LineRange[];
+    readonly label?: string;
+};
+export type TreeLine = {
+    readonly text: string;
+    readonly depth: number;
+    readonly highlight?: boolean;
+    readonly note?: string;
+};
+export declare const CodeScene: React.FC<{
+    kicker?: string;
+    title?: string;
+    file?: string;
+    badge?: string;
+    badgeColor?: string;
+    contextTag?: boolean;
+    code: string;
+    lang?: CodeLang;
+    fontSize?: number;
+    startLineNumber?: number;
+    showLineNumbers?: boolean;
+    spotlights?: readonly SpotlightBeat[];
+    finding?: Finding;
+    highlightColor?: string;
+    tree?: readonly TreeLine[];
+    treeLabel?: string;
+}>;

package/dist/engine/scenes/CodeScene.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame } from "remotion";
+import { CodeBlock } from "../code/CodeBlock";
+import { FPS, theme } from "../theme";
+import { CalloutOverlay } from "./CalloutOverlay";
+import { FileChip, Panel, SceneShell } from "./SceneShell";
+const TreePanel = ({ label, lines }) => (_jsxs("div", { style: {
+        backgroundColor: theme.bgPanel,
+        border: `1px solid ${theme.stroke}`,
+        borderRadius: 16,
+        padding: "26px 30px",
+        flexShrink: 0,
+    }, children: [_jsx("div", { style: {
+                fontFamily: theme.fontDisplay,
+                fontWeight: 600,
+                fontSize: 21,
+                letterSpacing: 2,
+                textTransform: "uppercase",
+                color: theme.textDim,
+                marginBottom: 16,
+            }, children: label }), lines.map((line, i) => (_jsxs("div", { style: {
+                fontFamily: theme.fontMono,
+                fontSize: 23,
+                lineHeight: 1.7,
+                paddingLeft: line.depth * 26,
+                color: line.highlight ? theme.accent2 : theme.textDim,
+                fontWeight: line.highlight ? 700 : 400,
+                whiteSpace: "nowrap",
+            }, children: [line.depth > 0 && _jsx("span", { style: { opacity: 0.5 }, children: "\u2514\u2500 " }), line.text, line.highlight && _jsx("span", { children: " \u2190" }), line.note && (_jsx("span", { style: { fontFamily: theme.fontDisplay, fontSize: 19, color: theme.amber, marginLeft: 12 }, children: line.note }))] }, i)))] }));
+export const CodeScene = ({ kicker, title, file, badge, badgeColor, contextTag, code, lang, fontSize, startLineNumber, showLineNumbers, spotlights = [], finding, highlightColor, tree, treeLabel = "where this lives", }) => {
+    const frame = useCurrentFrame();
+    const second = frame / FPS;
+    const active = [...spotlights].reverse().find((beat) => second >= beat.atSecond);
+    return (_jsxs(SceneShell, { kicker: kicker, title: title, contextTag: contextTag, center: true, children: [_jsxs("div", { style: { display: "flex", gap: 36, alignItems: "center", maxWidth: "100%" }, children: [tree && _jsx(TreePanel, { label: treeLabel, lines: tree }), _jsxs(Panel, { children: [file && _jsx(FileChip, { path: file, badge: badge, badgeColor: badgeColor }), _jsx(CodeBlock, { code: code, lang: lang, fontSize: fontSize, startLineNumber: startLineNumber, showLineNumbers: showLineNumbers, spotlight: active?.lines ?? [], highlightColor: highlightColor }), active?.label && (_jsxs("div", { style: {
+                                    marginTop: 24,
+                                    fontFamily: theme.fontDisplay,
+                                    fontWeight: 600,
+                                    fontSize: 28,
+                                    color: theme.accent2,
+                                }, children: ["\u2191 ", active.label] }))] })] }), finding && _jsx(CalloutOverlay, { finding: finding })] }));
+};

package/dist/engine/scenes/DiagramScene.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export type DiagramNode = {
+    readonly id: string;
+    readonly label: string;
+    readonly sub?: string;
+    readonly icon?: string;
+    readonly x: number;
+    readonly y: number;
+    readonly w?: number;
+    readonly h?: number;
+    readonly kind?: "existing" | "new" | "focus";
+    readonly badge?: string;
+    readonly atSecond?: number;
+};
+export type ArrowSide = "top" | "bottom" | "left" | "right";
+export type DiagramArrow = {
+    readonly from: string;
+    readonly to: string;
+    readonly label?: string;
+    readonly atSecond?: number;
+    readonly kind?: "existing" | "new";
+    readonly fromSide?: ArrowSide;
+    readonly toSide?: ArrowSide;
+};
+export declare const DiagramScene: React.FC<{
+    kicker?: string;
+    title?: string;
+    nodes: readonly DiagramNode[];
+    arrows: readonly DiagramArrow[];
+    legend?: boolean;
+}>;

package/dist/engine/scenes/DiagramScene.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { FPS, theme } from "../theme";
+import { SceneShell } from "./SceneShell";
+const DEFAULT_W = 400;
+const DEFAULT_H = 150;
+export const DiagramScene = ({ kicker, title, nodes, arrows, legend = true }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    return (_jsx(SceneShell, { kicker: kicker, title: title, children: _jsxs("div", { style: { position: "relative", flex: 1 }, children: [_jsxs("svg", { style: { position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible" }, children: [_jsx("defs", { children: _jsxs("filter", { id: "arrow-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [_jsx("feGaussianBlur", { stdDeviation: "7", result: "blur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "blur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] }) }), arrows.map((arrow, i) => {
+                            const from = byId.get(arrow.from);
+                            const to = byId.get(arrow.to);
+                            if (!from || !to)
+                                return null;
+                            const fromSide = arrow.fromSide ?? autoSide(from, to);
+                            const toSide = arrow.toSide ?? autoSide(to, from);
+                            const start = sideAnchor(from, fromSide);
+                            const end = sideAnchor(to, toSide);
+                            const reach = Math.min(170, Math.hypot(end.x - start.x, end.y - start.y) * 0.45);
+                            const c1 = offsetAlongNormal(start, fromSide, reach);
+                            const c2 = offsetAlongNormal(end, toSide, reach);
+                            const path = `M ${start.x} ${start.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${end.x} ${end.y}`;
+                            const length = approximateCubicLength(start, c1, c2, end);
+                            const startFrame = (arrow.atSecond ?? 0) * FPS;
+                            const drawn = interpolate(frame, [startFrame, startFrame + 18], [0, 1], {
+                                extrapolateLeft: "clamp",
+                                extrapolateRight: "clamp",
+                            });
+                            if (drawn === 0)
+                                return null;
+                            const dim = arrow.kind === "existing";
+                            const color = dim ? "#4a5268" : theme.accent2;
+                            const tip = pointOnCubic(start, c1, c2, end, Math.min(1, drawn));
+                            const beforeTip = pointOnCubic(start, c1, c2, end, Math.max(0, drawn - 0.04));
+                            const angle = Math.atan2(tip.y - beforeTip.y, tip.x - beforeTip.x) * (180 / Math.PI);
+                            const mid = pointOnCubic(start, c1, c2, end, 0.5);
+                            return (_jsxs("g", { children: [_jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: dim ? 4 : 6, strokeLinecap: "round", strokeDasharray: length, strokeDashoffset: length * (1 - drawn), filter: dim ? undefined : "url(#arrow-glow)", opacity: dim ? 0.8 : 1 }), _jsx("g", { transform: `translate(${tip.x}, ${tip.y}) rotate(${angle})`, children: _jsx("polygon", { points: "0,0 -22,-10 -22,10", fill: color, filter: dim ? undefined : "url(#arrow-glow)" }) }), arrow.label && drawn > 0.7 && (_jsx("text", { x: mid.x, y: mid.y - 16, fill: theme.textDim, fontFamily: theme.fontMono, fontSize: 24, textAnchor: "middle", children: arrow.label }))] }, i));
+                        })] }), nodes.map((node) => {
+                    const startFrame = (node.atSecond ?? 0) * FPS;
+                    const pop = spring({ frame: frame - startFrame, fps, config: { damping: 14, stiffness: 160, mass: 0.6 } });
+                    const isNew = node.kind === "new" || node.kind === "focus";
+                    const borderColor = node.kind === "focus" ? theme.accent : isNew ? theme.green : "#39415a";
+                    const w = node.w ?? DEFAULT_W;
+                    const h = node.h ?? DEFAULT_H;
+                    return (_jsxs("div", { style: {
+                            position: "absolute",
+                            left: node.x - w / 2,
+                            top: node.y - h / 2,
+                            width: w,
+                            height: h,
+                            background: isNew
+                                ? `linear-gradient(160deg, ${theme.bgPanel} 0%, #1a1430 100%)`
+                                : `linear-gradient(160deg, ${theme.bgPanel} 0%, #141927 100%)`,
+                            border: `3px solid ${borderColor}`,
+                            borderRadius: 20,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 20,
+                            transform: `scale(${pop})`,
+                            opacity: pop * (isNew ? 1 : 0.78),
+                            boxShadow: isNew ? `0 0 60px ${borderColor}40` : "0 16px 40px rgba(0,0,0,0.4)",
+                        }, children: [node.icon && _jsx("span", { style: { fontSize: 46 }, children: node.icon }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start" }, children: [_jsx("div", { style: {
+                                            fontFamily: theme.fontMono,
+                                            fontSize: 33,
+                                            fontWeight: 700,
+                                            color: isNew ? theme.text : "#aab2c5",
+                                        }, children: node.label }), node.sub && (_jsx("div", { style: { fontFamily: theme.fontDisplay, fontSize: 23, color: theme.textDim }, children: node.sub }))] }), (node.kind === "new" || (node.kind === "focus" && node.badge)) && (_jsx("div", { style: {
+                                    position: "absolute",
+                                    top: -18,
+                                    right: -16,
+                                    fontFamily: theme.fontDisplay,
+                                    fontWeight: 800,
+                                    fontSize: 19,
+                                    letterSpacing: 2,
+                                    color: theme.bg,
+                                    backgroundColor: node.kind === "focus" ? theme.accent : theme.green,
+                                    borderRadius: 999,
+                                    padding: "6px 16px",
+                                    boxShadow: `0 0 30px ${node.kind === "focus" ? theme.accent : theme.green}66`,
+                                }, children: node.kind === "focus" ? node.badge : "NEW" }))] }, node.id));
+                }), legend && (_jsxs("div", { style: {
+                        position: "absolute",
+                        bottom: 0,
+                        right: 0,
+                        display: "flex",
+                        gap: 32,
+                        alignItems: "center",
+                        fontFamily: theme.fontDisplay,
+                        fontSize: 24,
+                        color: theme.textDim,
+                        backgroundColor: `${theme.bgPanel}cc`,
+                        border: `1px solid ${theme.stroke}`,
+                        borderRadius: 12,
+                        padding: "12px 24px",
+                    }, children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("span", { style: { width: 22, height: 22, borderRadius: 6, border: "3px solid #39415a", opacity: 0.78 } }), "already existed"] }), _jsxs("span", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("span", { style: { width: 22, height: 22, borderRadius: 6, border: `3px solid ${theme.green}`, boxShadow: `0 0 14px ${theme.green}66` } }), "this PR"] })] }))] }) }));
+};
+function autoSide(node, towards) {
+    const dx = towards.x - node.x;
+    const dy = towards.y - node.y;
+    if (Math.abs(dx) * ((node.h ?? DEFAULT_H) / 2) > Math.abs(dy) * ((node.w ?? DEFAULT_W) / 2)) {
+        return dx > 0 ? "right" : "left";
+    }
+    return dy > 0 ? "bottom" : "top";
+}
+function sideAnchor(node, side) {
+    const w = (node.w ?? DEFAULT_W) / 2;
+    const h = (node.h ?? DEFAULT_H) / 2;
+    if (side === "left")
+        return { x: node.x - w - 8, y: node.y };
+    if (side === "right")
+        return { x: node.x + w + 8, y: node.y };
+    if (side === "top")
+        return { x: node.x, y: node.y - h - 8 };
+    return { x: node.x, y: node.y + h + 8 };
+}
+function offsetAlongNormal(point, side, distance) {
+    if (side === "left")
+        return { x: point.x - distance, y: point.y };
+    if (side === "right")
+        return { x: point.x + distance, y: point.y };
+    if (side === "top")
+        return { x: point.x, y: point.y - distance };
+    return { x: point.x, y: point.y + distance };
+}
+function pointOnCubic(start, c1, c2, end, t) {
+    const inverse = 1 - t;
+    const a = inverse * inverse * inverse;
+    const b = 3 * inverse * inverse * t;
+    const c = 3 * inverse * t * t;
+    const d = t * t * t;
+    return {
+        x: a * start.x + b * c1.x + c * c2.x + d * end.x,
+        y: a * start.y + b * c1.y + c * c2.y + d * end.y,
+    };
+}
+function approximateCubicLength(start, c1, c2, end) {
+    let length = 0;
+    let previous = start;
+    for (let i = 1; i <= 20; i++) {
+        const point = pointOnCubic(start, c1, c2, end, i / 20);
+        length += Math.hypot(point.x - previous.x, point.y - previous.y);
+        previous = point;
+    }
+    return length;
+}

package/dist/engine/scenes/DiffMorph.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type CodeLang } from "../code/highlight";
+export declare const DiffMorph: React.FC<{
+    kicker?: string;
+    title?: string;
+    file?: string;
+    before: string;
+    after: string;
+    lang?: CodeLang;
+    fontSize?: number;
+    morphAtSecond: number;
+}>;

package/dist/engine/scenes/DiffMorph.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { diffLines } from "diff";
+import { interpolate, useCurrentFrame } from "remotion";
+import { CodeLine } from "../code/CodeBlock";
+import { useTokenLines } from "../code/highlight";
+import { FPS, theme } from "../theme";
+import { FileChip, Panel, SceneShell } from "./SceneShell";
+function computeRows(before, after) {
+    const rows = [];
+    let beforeLine = 0;
+    let afterLine = 0;
+    for (const part of diffLines(before.replace(/\n$/, "") + "\n", after.replace(/\n$/, "") + "\n")) {
+        const count = part.count ?? 0;
+        for (let i = 0; i < count; i++) {
+            if (part.added) {
+                rows.push({ kind: "add", afterLine: afterLine++ });
+            }
+            else if (part.removed) {
+                rows.push({ kind: "del", beforeLine: beforeLine++ });
+            }
+            else {
+                rows.push({ kind: "same", beforeLine: beforeLine++, afterLine: afterLine++ });
+            }
+        }
+    }
+    return rows;
+}
+export const DiffMorph = ({ kicker, title, file, before, after, lang = "typescript", fontSize = 30, morphAtSecond }) => {
+    const frame = useCurrentFrame();
+    const beforeTokens = useTokenLines(before.replace(/\n$/, ""), lang);
+    const afterTokens = useTokenLines(after.replace(/\n$/, ""), lang);
+    if (!beforeTokens || !afterTokens)
+        return null;
+    const rows = computeRows(before, after);
+    const lineHeight = fontSize * 1.55;
+    const morphStart = morphAtSecond * FPS;
+    const morph = interpolate(frame, [morphStart, morphStart + 22], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    const flashFade = interpolate(frame, [morphStart + 22, morphStart + 60], [1, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    return (_jsx(SceneShell, { kicker: kicker, title: title, center: true, children: _jsxs(Panel, { children: [file && (_jsx(FileChip, { path: file, badge: morph > 0.5 ? "after" : "before", badgeColor: morph > 0.5 ? theme.green : theme.red })), _jsx("div", { style: { fontFamily: theme.fontMono, fontSize, lineHeight: `${lineHeight}px` }, children: rows.map((row, i) => {
+                        const tokens = row.kind === "del" ? beforeTokens[row.beforeLine] : afterTokens[row.afterLine];
+                        const height = row.kind === "same" ? lineHeight : row.kind === "del" ? lineHeight * (1 - morph) : lineHeight * morph;
+                        const opacity = row.kind === "same" ? 1 : row.kind === "del" ? 1 - morph : morph;
+                        const flash = row.kind === "add" && morph > 0
+                            ? `${theme.green}${alphaHex(0.16 * flashFade + 0.06 * morph)}`
+                            : row.kind === "del"
+                                ? `${theme.red}${alphaHex(0.14 * (1 - morph) + 0.04)}`
+                                : "transparent";
+                        return (_jsxs("div", { style: {
+                                height,
+                                opacity,
+                                overflow: "hidden",
+                                backgroundColor: flash,
+                                borderRadius: 4,
+                                paddingLeft: 12,
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: [_jsx("span", { style: { width: fontSize * 1.2, color: rowGlyphColor(row.kind), flexShrink: 0 }, children: row.kind === "add" ? "+" : row.kind === "del" ? "-" : " " }), tokens && _jsx(CodeLine, { tokens: tokens })] }, i));
+                    }) })] }) }));
+};
+const rowGlyphColor = (kind) => kind === "add" ? theme.green : kind === "del" ? theme.red : "transparent";
+const alphaHex = (alpha) => Math.round(Math.max(0, Math.min(1, alpha)) * 255)
+    .toString(16)
+    .padStart(2, "0");

package/dist/engine/scenes/FileTreeScene.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export type FileEntry = {
+    readonly name: string;
+    readonly status: "added" | "modified";
+    readonly note?: string;
+};
+export type FileGroup = {
+    readonly label: string;
+    readonly icon: string;
+    readonly files: readonly FileEntry[];
+    readonly more?: number;
+};
+export type GroupSpotlight = {
+    readonly atSecond: number;
+    readonly groupIndex: number | null;
+};
+export declare const FileTreeScene: React.FC<{
+    kicker?: string;
+    title?: string;
+    groups: readonly FileGroup[];
+    spotlights?: readonly GroupSpotlight[];
+    columns?: number;
+}>;

package/dist/engine/scenes/FileTreeScene.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { FPS, theme } from "../theme";
+import { SceneShell } from "./SceneShell";
+export const FileTreeScene = ({ kicker, title, groups, spotlights = [], columns = 3 }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const second = frame / FPS;
+    const active = [...spotlights].reverse().find((beat) => second >= beat.atSecond);
+    const activeIndex = active?.groupIndex ?? null;
+    return (_jsx(SceneShell, { kicker: kicker, title: title, center: true, children: _jsx("div", { style: {
+                display: "grid",
+                gridTemplateColumns: `repeat(${columns}, 1fr)`,
+                gap: 28,
+                width: "100%",
+                alignItems: "start",
+            }, children: groups.map((group, groupIndex) => {
+                const pop = spring({ frame: frame - 6 - groupIndex * 6, fps, config: { damping: 15, stiffness: 160, mass: 0.6 } });
+                const lit = activeIndex === null || activeIndex === groupIndex;
+                return (_jsxs("div", { style: {
+                        backgroundColor: theme.bgPanel,
+                        border: `2px solid ${lit && activeIndex !== null ? theme.accent : theme.stroke}`,
+                        borderRadius: 18,
+                        padding: "24px 28px",
+                        opacity: pop * (lit ? 1 : 0.3),
+                        transform: `translateY(${(1 - pop) * 40}px) scale(${lit && activeIndex !== null ? 1.02 : 1})`,
+                        boxShadow: lit && activeIndex !== null ? `0 0 50px ${theme.accent}2a` : "none",
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }, children: [_jsx("span", { style: { fontSize: 30 }, children: group.icon }), _jsx("span", { style: { fontFamily: theme.fontMono, fontWeight: 700, fontSize: 27, color: theme.accent2 }, children: group.label })] }), group.files.map((file, fileIndex) => {
+                            const fileAt = 10 + groupIndex * 6 + fileIndex * 3;
+                            const filePop = spring({ frame: frame - fileAt, fps, config: { damping: 18, stiffness: 200, mass: 0.4 } });
+                            const color = file.status === "added" ? theme.green : theme.amber;
+                            return (_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 12,
+                                    padding: "5px 0",
+                                    opacity: filePop,
+                                    transform: `translateX(${(1 - filePop) * 20}px)`,
+                                }, children: [_jsx("span", { style: {
+                                            fontFamily: theme.fontMono,
+                                            fontWeight: 800,
+                                            fontSize: 21,
+                                            color,
+                                            width: 26,
+                                            textAlign: "center",
+                                            backgroundColor: `${color}1a`,
+                                            borderRadius: 6,
+                                            flexShrink: 0,
+                                        }, children: file.status === "added" ? "A" : "M" }), _jsx("span", { style: {
+                                            fontFamily: theme.fontMono,
+                                            fontSize: 22.5,
+                                            color: theme.text,
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: file.name }), file.note && (_jsx("span", { style: { fontFamily: theme.fontDisplay, fontSize: 19, color: theme.textDim, marginLeft: "auto", flexShrink: 0 }, children: file.note }))] }, fileIndex));
+                        }), group.more !== undefined && group.more > 0 && (_jsxs("div", { style: { fontFamily: theme.fontDisplay, fontSize: 21, color: theme.textDim, marginTop: 10 }, children: ["+ ", group.more, " more"] }))] }, groupIndex));
+            }) }) }));
+};

package/dist/engine/scenes/MontageBeat.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export type MontageItem = {
+    readonly icon: string;
+    readonly label: string;
+    readonly sub?: string;
+    readonly atSecond?: number;
+};
+export declare const MontageBeat: React.FC<{
+    kicker?: string;
+    title?: string;
+    items: readonly MontageItem[];
+    staggerFrames?: number;
+}>;

package/dist/engine/scenes/MontageBeat.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Audio, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { theme } from "../theme";
+import { SceneShell } from "./SceneShell";
+export const MontageBeat = ({ kicker, title, items, staggerFrames = 9 }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    return (_jsx(SceneShell, { kicker: kicker, title: title, center: true, children: _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 26, width: 1200 }, children: items.map((item, i) => {
+                const at = item.atSecond !== undefined ? Math.round(item.atSecond * 30) : 8 + i * staggerFrames;
+                const pop = spring({ frame: frame - at, fps, config: { damping: 13, stiffness: 190, mass: 0.5 } });
+                return (_jsxs(React.Fragment, { children: [frame >= at && (_jsx(Sequence, { from: at, name: `tick-${i}`, children: _jsx(Audio, { src: staticFile("sfx/tick.wav"), volume: 0.35 }) })), _jsxs("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 28,
+                                backgroundColor: theme.bgPanel,
+                                border: `1px solid ${theme.stroke}`,
+                                borderRadius: 16,
+                                padding: "22px 34px",
+                                transform: `translateX(${(1 - pop) * 200}px) scale(${0.9 + pop * 0.1})`,
+                                opacity: pop,
+                            }, children: [_jsx("span", { style: { fontSize: 44 }, children: item.icon }), _jsx("span", { style: { fontFamily: theme.fontDisplay, fontWeight: 700, fontSize: 36, color: theme.text }, children: item.label }), item.sub && (_jsx("span", { style: { fontFamily: theme.fontMono, fontSize: 25, color: theme.textDim, marginLeft: "auto" }, children: item.sub }))] })] }, i));
+            }) }) }));
+};

package/dist/engine/scenes/SceneShell.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const SceneShell: React.FC<{
+    kicker?: string;
+    title?: string;
+    contextTag?: boolean;
+    center?: boolean;
+    children: React.ReactNode;
+}>;
+export declare const ContextTag: React.FC;
+export declare const Panel: React.FC<{
+    children: React.ReactNode;
+    padding?: number;
+    appearAtSecond?: number;
+}>;
+export declare const FileChip: React.FC<{
+    path: string;
+    badge?: string;
+    badgeColor?: string;
+}>;

package/dist/engine/scenes/SceneShell.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { theme } from "../theme";
+export const SceneShell = ({ kicker, title, contextTag, center, children }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const slide = spring({ frame, fps, config: { damping: 200, stiffness: 120 } });
+    return (_jsxs(AbsoluteFill, { style: { backgroundColor: theme.bg, overflow: "hidden" }, children: [_jsx(Backdrop, {}), _jsxs(AbsoluteFill, { style: { padding: "64px 96px", display: "flex", flexDirection: "column" }, children: [(kicker || title || contextTag) && (_jsxs("div", { style: {
+                            marginBottom: 36,
+                            opacity: slide,
+                            transform: `translateY(${(1 - slide) * -30}px)`,
+                            display: "flex",
+                            alignItems: "baseline",
+                            gap: 24,
+                        }, children: [_jsxs("div", { children: [kicker && (_jsx("div", { style: {
+                                            fontFamily: theme.fontDisplay,
+                                            fontWeight: 600,
+                                            fontSize: 26,
+                                            letterSpacing: 4,
+                                            textTransform: "uppercase",
+                                            color: theme.accent2,
+                                            marginBottom: 6,
+                                        }, children: kicker })), title && (_jsx("div", { style: { fontFamily: theme.fontDisplay, fontWeight: 700, fontSize: 52, color: theme.text }, children: title }))] }), contextTag && _jsx(ContextTag, {})] })), _jsx("div", { style: {
+                            flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: center ? "center" : "flex-start",
+                            alignItems: center ? "center" : "stretch",
+                            minHeight: 0,
+                        }, children: children })] })] }));
+};
+export const ContextTag = () => (_jsx("span", { style: {
+        fontFamily: theme.fontDisplay,
+        fontWeight: 600,
+        fontSize: 22,
+        color: theme.textDim,
+        border: `2px solid ${theme.stroke}`,
+        borderRadius: 999,
+        padding: "6px 18px",
+        whiteSpace: "nowrap",
+    }, children: "\u23EA existing code \u2014 not part of this PR" }));
+const Backdrop = () => {
+    const frame = useCurrentFrame();
+    const drift = interpolate(frame, [0, 600], [0, 80]);
+    return (_jsxs(AbsoluteFill, { children: [_jsx("div", { style: {
+                    position: "absolute",
+                    width: 1300,
+                    height: 1300,
+                    borderRadius: "50%",
+                    background: `radial-gradient(circle, ${theme.accent}14 0%, transparent 65%)`,
+                    top: -500 + drift * 0.4,
+                    left: -300,
+                } }), _jsx("div", { style: {
+                    position: "absolute",
+                    width: 1100,
+                    height: 1100,
+                    borderRadius: "50%",
+                    background: `radial-gradient(circle, ${theme.accent2}10 0%, transparent 65%)`,
+                    bottom: -450,
+                    right: -250 + drift * 0.3,
+                } })] }));
+};
+export const Panel = ({ children, padding = 36, }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const pop = spring({ frame, fps, config: { damping: 16, stiffness: 140, mass: 0.7 } });
+    return (_jsx("div", { style: {
+            backgroundColor: theme.bgCode,
+            border: `1px solid ${theme.stroke}`,
+            borderRadius: 18,
+            padding,
+            boxShadow: "0 30px 80px rgba(0,0,0,0.55)",
+            transform: `scale(${0.94 + pop * 0.06})`,
+            opacity: pop,
+            maxWidth: "100%",
+        }, children: children }));
+};
+export const FileChip = ({ path, badge, badgeColor = theme.green, }) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }, children: [_jsx("span", { style: {
+                fontFamily: theme.fontMono,
+                fontSize: 24,
+                color: theme.accent2,
+                backgroundColor: `${theme.accent2}14`,
+                border: `1px solid ${theme.accent2}33`,
+                borderRadius: 8,
+                padding: "6px 16px",
+            }, children: path }), badge && (_jsx("span", { style: {
+                fontFamily: theme.fontDisplay,
+                fontWeight: 700,
+                fontSize: 20,
+                letterSpacing: 2,
+                color: badgeColor,
+                backgroundColor: `${badgeColor}1a`,
+                borderRadius: 8,
+                padding: "6px 14px",
+                textTransform: "uppercase",
+            }, children: badge }))] }));

package/dist/engine/scenes/TerminalScene.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const TerminalScene: React.FC<{
+    kicker?: string;
+    title?: string;
+    command: string;
+    output: string;
+    fontSize?: number;
+    outputAtSecond?: number;
+    highlightPattern?: RegExp;
+}>;