videobook 0.0.0-stage → 0.2.0

package/dist/reference-video-duration.js

@@ -0,0 +1,17 @@
+export async function referenceVideoDuration(engine, refs) {
+    if (refs.length === 0)
+        return undefined;
+    let total = 0;
+    for (const ref of refs) {
+        const assetId = ref.replace(/^@/, "");
+        const artifact = engine.artifacts.get(assetId);
+        if (!artifact.ok || artifact.value.kind !== "video")
+            return undefined;
+        const metadata = await engine.metadata.artifacts.read(assetId, "original");
+        const duration = metadata.ok ? metadata.value?.duration : undefined;
+        if (typeof duration !== "number" || !Number.isFinite(duration) || duration <= 0)
+            return undefined;
+        total += duration;
+    }
+    return total;
+}

package/dist/remotion/BlurFillVideo.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { OffthreadVideo, useVideoConfig } from "remotion";
+export const BlurFillVideo = ({ src, sourceWidth, sourceHeight, volume, audioFadeIn, audioFadeOut, backgroundMode, }) => {
+    const { width, height, fps, durationInFrames } = useVideoConfig();
+    const fadeInFrames = Math.round((audioFadeIn / 1000) * fps);
+    const fadeOutFrames = Math.round((audioFadeOut / 1000) * fps);
+    const volumeCallback = React.useCallback((frame) => {
+        const baseVolume = volume / 100;
+        if (frame < fadeInFrames) {
+            return baseVolume * (frame / fadeInFrames);
+        }
+        const framesFromEnd = durationInFrames - frame;
+        if (framesFromEnd < fadeOutFrames) {
+            return baseVolume * (framesFromEnd / fadeOutFrames);
+        }
+        return baseVolume;
+    }, [volume, fadeInFrames, fadeOutFrames, durationInFrames]);
+    const sourceAspect = sourceWidth / sourceHeight;
+    const targetAspect = width / height;
+    let fgWidth;
+    let fgHeight;
+    if (sourceAspect > targetAspect) {
+        fgWidth = width;
+        fgHeight = width / sourceAspect;
+    }
+    else {
+        fgHeight = height;
+        fgWidth = height * sourceAspect;
+    }
+    return (_jsxs("div", { style: { position: "relative", width, height, overflow: "hidden" }, children: [backgroundMode === "blur" && (_jsx(OffthreadVideo, { src: src, style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    filter: "blur(20px) brightness(0.6)",
+                    transform: "scale(1.1)",
+                }, volume: 0 })), _jsx("div", { style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width,
+                    height,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(OffthreadVideo, { src: src, style: {
+                        width: fgWidth,
+                        height: fgHeight,
+                    }, volume: volumeCallback }) })] }));
+};

package/dist/remotion/KeywordGraphicsOverlay.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { loadFont } from "@remotion/google-fonts/PlayfairDisplay";
+import { keywordFontSize, keywordLayout } from "./keyword-placement.js";
+const { fontFamily } = loadFont("normal", {
+    weights: ["700"],
+    subsets: ["latin", "latin-ext", "cyrillic", "vietnamese"],
+});
+export const KeywordGraphicsOverlay = ({ graphics }) => {
+    const frame = useCurrentFrame();
+    const { fps, width, height } = useVideoConfig();
+    const currentTime = frame / fps;
+    const active = graphics.find((graphic) => currentTime >= graphic.start && currentTime < graphic.end);
+    if (!active)
+        return null;
+    const span = Math.max(0.01, active.end - active.start);
+    const enterEnd = active.start + Math.min(0.5, span * 0.35);
+    const exitStart = Math.max(enterEnd, active.end - Math.min(0.38, span * 0.25));
+    const reveal = interpolate(currentTime, [active.start, enterEnd], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: Easing.out(Easing.cubic),
+    });
+    const fade = interpolate(currentTime, [exitStart, active.end], [1, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: Easing.in(Easing.quad),
+    });
+    const portrait = height > width;
+    const smartLayout = active.anchor
+        ? keywordLayout(active.text, active.anchor, width, height, active.scale ?? 1)
+        : null;
+    const side = smartLayout?.side ?? active.side;
+    const direction = side === "right" ? 1 : -1;
+    const fontSize = smartLayout?.fontSize ?? keywordFontSize(active.text, width, height);
+    const sideInset = smartLayout?.sideInset ?? Math.round(width * (portrait ? 0.065 : 0.07));
+    const lineWidth = interpolate(reveal, [0, 1], [0, Math.min(width * 0.14, fontSize * 2.25)]);
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            top: smartLayout?.top ?? (portrait ? "25%" : "29%"),
+            ...(side === "right" ? { right: sideInset } : { left: sideInset }),
+            width: smartLayout?.containerWidth ?? (portrait ? "72%" : "43%"),
+            display: "flex",
+            flexDirection: "column",
+            alignItems: side === "right" ? "flex-end" : "flex-start",
+            opacity: reveal * fade,
+            transform: `translate3d(${direction * (1 - reveal) * 56}px, ${(1 - reveal) * 12}px, 0) scale(${0.97 + reveal * 0.03})`,
+            filter: `blur(${(1 - reveal) * 5}px)`,
+            pointerEvents: "none",
+        }, children: [_jsx("div", { style: {
+                    color: "#FFFFFF",
+                    fontFamily,
+                    fontSize,
+                    fontWeight: 700,
+                    lineHeight: 0.94,
+                    letterSpacing: `${0.13 - reveal * 0.07}em`,
+                    textAlign: side === "right" ? "right" : "left",
+                    textShadow: "0 4px 22px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,1)",
+                    textTransform: "uppercase",
+                    overflowWrap: "anywhere",
+                }, children: active.text }), _jsx("div", { style: {
+                    width: lineWidth,
+                    height: Math.max(2, Math.round(width * 0.002)),
+                    marginTop: Math.round(fontSize * 0.2),
+                    backgroundColor: "rgba(255,255,255,0.92)",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.75)",
+                } })] }));
+};

package/dist/remotion/OsgOverlay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Img, useCurrentFrame, useVideoConfig } from "remotion";
+import { osgAnchorPlacement, osgFadeEnvelope, osgMaxSize, osgPadding, resolveOsgWindow, } from "./osg-spec.js";
+export const OsgOverlay = ({ src, position, size, scale = 1, opacity = 1, startSeconds = null, endSeconds = null, tailSeconds = null, }) => {
+    const { width, fps, durationInFrames } = useVideoConfig();
+    const frame = useCurrentFrame();
+    const maxSize = osgMaxSize(width, size, scale);
+    const padding = osgPadding(width);
+    const window = resolveOsgWindow({ startSeconds, endSeconds, tailSeconds, durationInFrames, fps });
+    const finalOpacity = osgFadeEnvelope(frame, window, fps) * opacity;
+    const placement = osgAnchorPlacement(position, padding);
+    const posStyle = { position: "absolute" };
+    if (placement.top !== undefined)
+        posStyle.top = placement.top;
+    if (placement.bottom !== undefined)
+        posStyle.bottom = placement.bottom;
+    if (placement.left !== undefined)
+        posStyle.left = placement.left;
+    if (placement.right !== undefined)
+        posStyle.right = placement.right;
+    if (placement.transforms.length > 0)
+        posStyle.transform = placement.transforms.join(" ");
+    return (_jsx(Img, { src: src, style: {
+            ...posStyle,
+            opacity: finalOpacity,
+            maxWidth: maxSize,
+            maxHeight: maxSize,
+            objectFit: "contain",
+        } }));
+};

package/dist/remotion/QrOutroComposition.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, Img, Audio, Sequence, interpolate, staticFile, useCurrentFrame, } from "remotion";
+import { buildOutroSpec, cardAnimationProgress, cardEntryOffset, cueWindows, BACKGROUND_COLOR, } from "./qr-outro-spec.js";
+import { DEFAULT_QR_OUTRO_SOUND_FILENAME } from "./qr-outro-audio.js";
+const QrCard = ({ src, placement, impactFrame, cardIndex, entryOffset }) => {
+    const frame = useCurrentFrame();
+    const anim = cardAnimationProgress(frame, impactFrame);
+    if (!anim.visible)
+        return null;
+    const enterDir = cardIndex % 2 === 0 ? -1 : 1;
+    const translateX = anim.translateFraction * entryOffset.x;
+    const translateY = anim.translateFraction * entryOffset.y;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: placement.x,
+            top: placement.y,
+            width: placement.w,
+            height: placement.h,
+            opacity: anim.opacity,
+            transform: `translate(${translateX}px, ${translateY}px) rotate(${anim.rotation * enterDir}deg) scale(${anim.scale})`,
+            transformOrigin: "center center",
+        }, children: _jsx(Img, { src: src, style: {
+                width: "100%",
+                height: "100%",
+                display: "block",
+                objectFit: "contain",
+                imageRendering: "pixelated",
+            } }) }));
+};
+export const QrOutroComposition = ({ qrSrcs, audioSrc, aspectRatio, durationSeconds, includeAudio, }) => {
+    const spec = buildOutroSpec(aspectRatio, qrSrcs.length, durationSeconds ?? undefined);
+    const resolvedAudioSrc = includeAudio
+        ? audioSrc ?? staticFile(DEFAULT_QR_OUTRO_SOUND_FILENAME)
+        : null;
+    const windows = resolvedAudioSrc
+        ? cueWindows(qrSrcs.length, spec.totalDurationFrames)
+        : [];
+    return (_jsxs(AbsoluteFill, { style: { backgroundColor: BACKGROUND_COLOR }, children: [spec.cards.map((card, i) => (_jsx(QrCard, { src: qrSrcs[i], placement: card, impactFrame: spec.impacts[i].frame, cardIndex: i, entryOffset: cardEntryOffset(card, spec.layout) }, i))), windows.map((cue, i) => {
+                const cueDuration = cue.endFrame - cue.startFrame;
+                const fadeDuration = Math.min(3, Math.floor(cueDuration / 3));
+                return (_jsx(Sequence, { from: cue.startFrame, durationInFrames: cueDuration, children: _jsx(Audio, { src: resolvedAudioSrc, endAt: cueDuration, volume: (localFrame) => {
+                            if (localFrame < cueDuration - fadeDuration)
+                                return 1;
+                            return interpolate(localFrame, [cueDuration - fadeDuration, cueDuration - 1], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+                        } }) }, `sfx-${i}`));
+            })] }));
+};

package/dist/remotion/RenderComposition.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill } from "remotion";
+import { BlurFillVideo } from "./BlurFillVideo.js";
+import { SubtitleOverlay } from "./subtitles/SubtitleOverlay.js";
+import { OsgOverlay } from "./OsgOverlay.js";
+import { KeywordGraphicsOverlay } from "./KeywordGraphicsOverlay.js";
+import { AliveCaptions } from "./subtitles/AliveCaptions.js";
+export const RenderComposition = ({ videoSrc, sourceWidth, sourceHeight, subtitlesEnabled, chunks, style, position, fontSize, textColor, highlightColor, audioFadeIn, audioFadeOut, audioVolume, osgSrc, osgPosition, osgSize, osgScale, osgOpacity, osgStartSeconds, osgEndSeconds, osgTailSeconds, keywordGraphics, backgroundMode, strokeWidth, strokeColor, shadowBlur, shadowOpacity, aliveCues, aliveSettings, }) => {
+    const alive = style === "alive";
+    return (_jsxs(AbsoluteFill, { style: { backgroundColor: "black" }, children: [_jsx(BlurFillVideo, { src: videoSrc, sourceWidth: sourceWidth, sourceHeight: sourceHeight, volume: audioVolume, audioFadeIn: audioFadeIn, audioFadeOut: audioFadeOut, backgroundMode: backgroundMode }), subtitlesEnabled && alive && aliveSettings && aliveCues.length > 0 && (_jsx(AliveCaptions, { cues: aliveCues, settings: aliveSettings, strokeWidth: strokeWidth, strokeColor: strokeColor, shadowBlur: shadowBlur, shadowOpacity: shadowOpacity })), subtitlesEnabled && !alive && chunks.length > 0 && (_jsx(SubtitleOverlay, { chunks: chunks, style: style, position: position, fontSize: fontSize, textColor: textColor, highlightColor: highlightColor, strokeWidth: strokeWidth, strokeColor: strokeColor, shadowBlur: shadowBlur, shadowOpacity: shadowOpacity })), osgSrc && (_jsx(OsgOverlay, { src: osgSrc, position: osgPosition, size: osgSize, scale: osgScale, opacity: osgOpacity, startSeconds: osgStartSeconds, endSeconds: osgEndSeconds, tailSeconds: osgTailSeconds })), keywordGraphics.length > 0 && (_jsx(KeywordGraphicsOverlay, { graphics: keywordGraphics }))] }));
+};

package/dist/remotion/browser.js

@@ -0,0 +1,59 @@
+import { execFile } from "node:child_process";
+import { mkdir, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { homedir } from "node:os";
+import { join, resolve } from "node:path";
+import { promisify } from "node:util";
+import { sourceCheckoutRoot } from "../data-home.js";
+const execFileAsync = promisify(execFile);
+const require = createRequire(import.meta.url);
+const CACHE_PACKAGE = `${JSON.stringify({ name: "videobook-remotion-cache", private: true })}\n`;
+let located;
+export function remotionCacheRoot(env = process.env, checkoutRoot = sourceCheckoutRoot()) {
+    const override = env.VIDEOBOOK_REMOTION_CACHE_DIR?.trim();
+    if (override)
+        return resolve(override);
+    if (checkoutRoot)
+        return null;
+    return join(homedir(), ".cache", "videobook", "remotion");
+}
+export function remotionBrowserDir(root) {
+    return join(root, "node_modules", ".remotion");
+}
+function ensureBrowserScript() {
+    const renderer = JSON.stringify(require.resolve("@remotion/renderer"));
+    return `require(${renderer}).ensureBrowser({ chromeMode: "headless-shell", logLevel: "error" })`
+        + ".then((status) => process.stdout.write(`\\n${JSON.stringify(status)}\\n`))";
+}
+function parseStatus(stdout) {
+    const line = stdout.trim().split("\n").pop() ?? "{}";
+    try {
+        return JSON.parse(line);
+    }
+    catch {
+        return {};
+    }
+}
+async function locate(root) {
+    await mkdir(root, { recursive: true });
+    await writeFile(join(root, "package.json"), CACHE_PACKAGE, { flag: "w" });
+    const { stdout } = await execFileAsync(process.execPath, ["-e", ensureBrowserScript()], {
+        cwd: root,
+        maxBuffer: 4 * 1024 * 1024,
+        timeout: 15 * 60_000,
+    });
+    const status = parseStatus(stdout);
+    if (typeof status.path !== "string")
+        throw new Error(`Remotion could not provide a render browser (${status.type ?? "no status"})`);
+    return status.path;
+}
+export function renderBrowserExecutable() {
+    const root = remotionCacheRoot();
+    if (!root)
+        return Promise.resolve(undefined);
+    located ??= locate(root).catch((error) => {
+        located = undefined;
+        throw error;
+    });
+    return located;
+}

package/dist/remotion/constants.js

@@ -0,0 +1,35 @@
+export const LANDSCAPE_WIDTH = 1920;
+export const LANDSCAPE_HEIGHT = 1080;
+export const PORTRAIT_WIDTH = 1080;
+export const PORTRAIT_HEIGHT = 1920;
+export const SQUARE_WIDTH = 1080;
+export const SQUARE_HEIGHT = 1080;
+const IMPACT_FONT_SIZES = {
+    small: { portrait: 96, landscape: 56, square: 56 },
+    medium: { portrait: 120, landscape: 72, square: 72 },
+    large: { portrait: 144, landscape: 88, square: 88 },
+};
+const HIGHLIGHT_FONT_SIZES = {
+    small: { portrait: 56, landscape: 40, square: 40 },
+    medium: { portrait: 72, landscape: 52, square: 52 },
+    large: { portrait: 88, landscape: 64, square: 64 },
+};
+export function getImpactFontSize(preset, orientation) {
+    return IMPACT_FONT_SIZES[preset][orientation];
+}
+export function getHighlightFontSize(preset, orientation) {
+    return HIGHLIGHT_FONT_SIZES[preset][orientation];
+}
+const Y_POSITIONS = {
+    top: { portrait: 0.15, landscape: 0.15, square: 0.15 },
+    middle: { portrait: 0.45, landscape: 0.45, square: 0.45 },
+    bottom: { portrait: 0.72, landscape: 0.80, square: 0.80 },
+};
+export function getYPosition(position, orientation) {
+    return Y_POSITIONS[position][orientation];
+}
+export const DEFAULT_TEXT_COLOR = "#F8FAFC";
+export const DEFAULT_HIGHLIGHT_COLOR = "#991B1B";
+export const POP_DURATION_FRAMES = 4; // ~120ms at 30fps
+export const POP_SCALE_START = 1.15;
+export const POP_SCALE_END = 1.0;

package/dist/remotion/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Composition, registerRoot } from "remotion";
+import { RenderComposition } from "./RenderComposition.js";
+import { QrOutroComposition } from "./QrOutroComposition.js";
+import { buildOutroSpec } from "./qr-outro-spec.js";
+const defaultProps = {
+    videoSrc: "",
+    targetWidth: 1920,
+    targetHeight: 1080,
+    sourceWidth: 1920,
+    sourceHeight: 1080,
+    durationInFrames: 300,
+    fps: 30,
+    subtitlesEnabled: false,
+    chunks: [],
+    style: "impact",
+    position: "bottom",
+    fontSize: "medium",
+    textColor: "#F8FAFC",
+    highlightColor: "#991B1B",
+    audioFadeIn: 0,
+    audioFadeOut: 0,
+    audioVolume: 100,
+    osgSrc: null,
+    osgPosition: "top-right",
+    osgSize: "medium",
+    osgScale: 1,
+    osgOpacity: 1,
+    osgStartSeconds: null,
+    osgEndSeconds: null,
+    osgTailSeconds: null,
+    keywordGraphics: [],
+    backgroundMode: "blur",
+    strokeWidth: 6,
+    strokeColor: "#000000",
+    shadowBlur: 6,
+    shadowOpacity: 60,
+    aliveCues: [],
+    aliveSettings: null,
+};
+const defaultQrOutroProps = {
+    qrSrcs: [""],
+    audioSrc: null,
+    aspectRatio: "16:9",
+    durationSeconds: null,
+    includeAudio: true,
+};
+// eslint-disable-next-line react-refresh/only-export-components
+const RemotionRoot = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Composition, { id: "render", component: RenderComposition, durationInFrames: defaultProps.durationInFrames, fps: defaultProps.fps, width: defaultProps.targetWidth, height: defaultProps.targetHeight, defaultProps: defaultProps, calculateMetadata: ({ props }) => ({
+                    durationInFrames: props.durationInFrames,
+                    fps: props.fps,
+                    width: props.targetWidth,
+                    height: props.targetHeight,
+                }) }), _jsx(Composition, { id: "qr-outro", component: QrOutroComposition, durationInFrames: 90, fps: 30, width: 1920, height: 1080, defaultProps: defaultQrOutroProps, calculateMetadata: ({ props }) => {
+                    const input = props;
+                    const spec = buildOutroSpec(input.aspectRatio, input.qrSrcs.length, input.durationSeconds ?? undefined);
+                    return {
+                        durationInFrames: spec.totalDurationFrames,
+                        fps: spec.fps,
+                        width: spec.layout.width,
+                        height: spec.layout.height,
+                    };
+                } })] }));
+};
+registerRoot(RemotionRoot);

package/dist/remotion/keyword-graphics.js

@@ -0,0 +1,151 @@
+import { parseSegments } from "./subtitles/segments.js";
+export const DEFAULT_KEYWORD_GRAPHICS_MAX_COUNT = 8;
+export const DEFAULT_KEYWORD_GRAPHICS_LINGER_SECONDS = 2.4;
+const STOP_WORDS = new Set([
+    "and", "are", "can", "did", "for", "get", "got", "had", "has", "her", "his", "how", "its",
+    "know", "not", "now", "one", "our", "said", "say", "see", "she", "take", "tell", "the", "too",
+    "two", "way", "well", "why", "yes", "you",
+    "about", "after", "again", "against", "almost", "also", "always", "among", "another", "around",
+    "because", "been", "before", "being", "between", "both", "but", "came", "come", "could",
+    "does", "doing", "done", "down", "during", "each", "even", "every", "from", "going", "have",
+    "having", "here", "hers", "him", "himself", "into", "just", "like", "made", "make", "many",
+    "might", "more", "most", "much", "must", "never", "only", "other", "ours", "over", "really",
+    "same", "should", "since", "some", "still", "such", "than", "that", "their", "them", "then",
+    "there", "these", "they", "thing", "think", "this", "those", "through", "under", "until", "very",
+    "want", "was", "were", "what", "when", "where", "which", "while", "who", "will", "with", "would",
+    "your", "you're", "youre",
+]);
+function transcriptPayload(raw) {
+    if (typeof raw !== "object" || raw === null)
+        return null;
+    const value = raw;
+    if (Array.isArray(value.transcripts)) {
+        const transcript = value.transcripts.find((entry) => typeof entry === "object" && entry !== null);
+        return transcript ? transcript : null;
+    }
+    return value;
+}
+export function parseKeywordTranscript(raw) {
+    const payload = transcriptPayload(raw);
+    return payload ? parseSegments(payload) : [];
+}
+function cleanWord(raw) {
+    return raw.trim().replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, "");
+}
+function wordLength(value) {
+    return Array.from(value).filter((char) => /[\p{L}\p{N}]/u.test(char)).length;
+}
+function isCandidateWord(display, normalized) {
+    const length = wordLength(display);
+    if (length < 3 && !/^[\p{Lu}\d]{2,}$/u.test(display))
+        return false;
+    if (STOP_WORDS.has(normalized))
+        return false;
+    if (/^\d+$/.test(normalized) && length < 4)
+        return false;
+    return true;
+}
+function timedWords(segments) {
+    return segments
+        .flatMap((segment) => segment.words)
+        .filter((word) => (Number.isFinite(word.start)
+        && Number.isFinite(word.end)
+        && word.start >= 0
+        && word.end >= word.start));
+}
+function buildCandidates(segments) {
+    const words = timedWords(segments);
+    const frequencies = new Map();
+    for (const word of words) {
+        const display = cleanWord(word.word);
+        const normalized = display.toLocaleLowerCase();
+        if (!isCandidateWord(display, normalized))
+            continue;
+        frequencies.set(normalized, (frequencies.get(normalized) ?? 0) + 1);
+    }
+    return words.flatMap((word) => {
+        const display = cleanWord(word.word);
+        const normalized = display.toLocaleLowerCase();
+        if (!isCandidateWord(display, normalized))
+            return [];
+        const lengthScore = Math.min(14, wordLength(display)) * 0.3;
+        const frequencyScore = Math.min(4, frequencies.get(normalized) ?? 1) * 1.15;
+        const titleScore = /^[\p{Lu}]/u.test(display) ? 0.35 : 0;
+        return [{
+                display,
+                normalized,
+                start: word.start,
+                end: word.end,
+                score: lengthScore + frequencyScore + titleScore,
+            }];
+    });
+}
+function pickCandidates(candidates, maxCount, lingerSeconds) {
+    const minGap = lingerSeconds + 0.75;
+    const selected = [];
+    const used = new Set();
+    const ranked = [...candidates].sort((a, b) => b.score - a.score || a.start - b.start);
+    for (const candidate of ranked) {
+        if (used.has(candidate.normalized))
+            continue;
+        if (selected.some((entry) => Math.abs(entry.start - candidate.start) < minGap))
+            continue;
+        selected.push(candidate);
+        used.add(candidate.normalized);
+        if (selected.length >= maxCount)
+            break;
+    }
+    return selected.sort((a, b) => a.start - b.start);
+}
+function graphicsFromCandidates(candidates, lingerSeconds) {
+    const selected = [...candidates].sort((a, b) => a.start - b.start);
+    return selected.map((candidate, index) => {
+        const start = Math.max(0, candidate.start - 0.12);
+        const nextStart = selected[index + 1]?.start;
+        const desiredEnd = Math.max(candidate.end + lingerSeconds, start + 1.2);
+        const end = nextStart === undefined ? desiredEnd : Math.min(desiredEnd, nextStart - 0.18);
+        return {
+            text: candidate.display,
+            start,
+            end: Math.max(start + 0.01, end),
+            side: index % 2 === 0 ? "right" : "left",
+            frameTime: (candidate.start + candidate.end) / 2,
+        };
+    });
+}
+export function selectKeywordGraphics(segments, options = {}) {
+    const maxCount = Math.min(20, Math.max(1, Math.floor(options.maxCount ?? DEFAULT_KEYWORD_GRAPHICS_MAX_COUNT)));
+    const lingerSeconds = Math.min(5, Math.max(0.8, options.lingerSeconds ?? DEFAULT_KEYWORD_GRAPHICS_LINGER_SECONDS));
+    const selected = pickCandidates(buildCandidates(segments), maxCount, lingerSeconds);
+    return graphicsFromCandidates(selected, lingerSeconds);
+}
+export function selectRequestedKeywordGraphics(segments, requestedKeywords, options = {}) {
+    const lingerSeconds = Math.min(5, Math.max(0.8, options.lingerSeconds ?? DEFAULT_KEYWORD_GRAPHICS_LINGER_SECONDS));
+    const words = timedWords(segments).map((word) => ({
+        display: cleanWord(word.word),
+        normalized: cleanWord(word.word).toLocaleLowerCase(),
+        start: word.start,
+        end: word.end,
+        score: 0,
+    }));
+    const selected = [];
+    const missing = [];
+    const used = new Set();
+    for (const requested of requestedKeywords) {
+        const display = cleanWord(requested);
+        const normalized = display.toLocaleLowerCase();
+        if (!display || used.has(normalized))
+            continue;
+        used.add(normalized);
+        const match = words.find((word) => word.normalized === normalized);
+        if (!match) {
+            missing.push(display);
+            continue;
+        }
+        selected.push({ ...match, display });
+    }
+    return {
+        graphics: graphicsFromCandidates(selected, lingerSeconds),
+        missing,
+    };
+}