clip-join 1.0.0

package/dist/ui/App.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import Spinner from "ink-spinner";
+import path from "node:path";
+import { defaultOutputName } from "../config.js";
+import { checkDeps, probeClips } from "../core/probe.js";
+import { findVideos, sortClips } from "../core/videos.js";
+import { runJoin } from "../core/join.js";
+import { resolveOutputPath, writeChaptersFile } from "../core/output.js";
+import { useFullscreen } from "./hooks/useFullscreen.js";
+import { theme } from "./theme.js";
+import { Header } from "./components/Header.js";
+import { SplashScreen } from "./screens/SplashScreen.js";
+import { BrowseScreen } from "./screens/BrowseScreen.js";
+import { EditScreen } from "./screens/EditScreen.js";
+import { JoinScreen } from "./screens/JoinScreen.js";
+import { SummaryScreen } from "./screens/SummaryScreen.js";
+export function App({ initialFolder }) {
+    useFullscreen();
+    const { exit } = useApp();
+    const [phase, setPhase] = useState("splash");
+    const [deps, setDeps] = useState(null);
+    const [splashDone, setSplashDone] = useState(false);
+    const [clips, setClips] = useState([]);
+    const [outputName, setOutputName] = useState(defaultOutputName);
+    const [transition, setTransition] = useState("none");
+    const [generateChapters, setGenerateChapters] = useState(false);
+    const [probeDone, setProbeDone] = useState(0);
+    const [probeTotal, setProbeTotal] = useState(0);
+    const [progress, setProgress] = useState({
+        fraction: 0,
+        mode: "lossless",
+    });
+    const [result, setResult] = useState(null);
+    const [errorMsg, setErrorMsg] = useState("");
+    const lastPaint = useRef(0);
+    // Kick off the dep check immediately so it overlaps the splash animation.
+    useEffect(() => {
+        void checkDeps().then(setDeps);
+    }, []);
+    // Route once the splash is done AND deps have resolved.
+    useEffect(() => {
+        if (phase !== "splash" || !splashDone || !deps)
+            return;
+        if (!deps.ok) {
+            setPhase("missingdeps");
+        }
+        else if (initialFolder) {
+            void (async () => {
+                const files = await findVideos(path.resolve(initialFolder)).catch(() => []);
+                await beginProbe(files);
+            })();
+        }
+        else {
+            setPhase("browse");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [phase, splashDone, deps]);
+    async function beginProbe(files) {
+        if (files.length === 0) {
+            setErrorMsg("No videos found in that folder.");
+            setPhase("error");
+            return;
+        }
+        setProbeTotal(files.length);
+        setProbeDone(0);
+        setPhase("probing");
+        try {
+            const probed = await probeClips(files, (done) => setProbeDone(done));
+            setClips(sortClips(probed, "date"));
+            setOutputName(defaultOutputName()); // fresh timestamped name per session
+            setTransition("none");
+            setPhase("edit");
+        }
+        catch (e) {
+            // Never leave the user stranded on the spinner if probing blows up.
+            setErrorMsg(e.message || "Failed to read clip metadata.");
+            setPhase("error");
+        }
+    }
+    async function startJoin() {
+        setPhase("joining");
+        setProgress({ fraction: 0, mode: "lossless" });
+        try {
+            const res = await runJoin({
+                clips,
+                output: resolveOutputPath(outputName),
+                transition,
+                onProgress: (p) => {
+                    // Throttle repaints to ~15/s to keep the bar smooth without flicker.
+                    const now = Date.now();
+                    if (now - lastPaint.current > 66 || p.fraction >= 1) {
+                        lastPaint.current = now;
+                        setProgress({ fraction: p.fraction, mode: p.mode });
+                    }
+                },
+            });
+            if (generateChapters) {
+                const included = clips.filter((c) => c.included);
+                res.chaptersPath = await writeChaptersFile(included, res.outputPath);
+            }
+            setResult(res);
+            setPhase("done");
+        }
+        catch (e) {
+            setErrorMsg(e.message);
+            setPhase("error");
+        }
+    }
+    useInput((input) => input === "q" && exit(), {
+        isActive: phase === "missingdeps" || phase === "error",
+    });
+    // The splash owns the whole screen; every other phase gets the persistent
+    // ClipJoin header (the ASCII logo stays pinned once the animation is done).
+    if (phase === "splash") {
+        return _jsx(SplashScreen, { onDone: () => setSplashDone(true) });
+    }
+    const subtitles = {
+        missingdeps: "Setup needed",
+        browse: "Browse to your clips",
+        probing: "Reading clips",
+        edit: "Arrange your clips",
+        joining: "Joining",
+        done: "Done",
+        error: "Error",
+    };
+    let body = null;
+    switch (phase) {
+        case "missingdeps":
+            body = (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.danger, children: "ffmpeg / ffprobe not found on your PATH." }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "ClipJoin needs ffmpeg to read and join videos. Install it with:" }) }), _jsx(Text, { color: theme.brand, children: " brew install ffmpeg" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "Press q to quit, then re-run clip-join." }) })] }));
+            break;
+        case "browse":
+            body = _jsx(BrowseScreen, { onConfirm: (files) => void beginProbe(files), onQuit: exit });
+            break;
+        case "probing":
+            body = _jsx(Centered, { spinner: true, text: `Reading clip metadata… ${probeDone}/${probeTotal}` });
+            break;
+        case "edit":
+            body = (_jsx(EditScreen, { clips: clips, setClips: setClips, outputName: outputName, setOutputName: setOutputName, transition: transition, setTransition: setTransition, generateChapters: generateChapters, setGenerateChapters: setGenerateChapters, onJoin: () => void startJoin(), onBack: () => setPhase("browse"), onQuit: exit }));
+            break;
+        case "joining":
+            body = _jsx(JoinScreen, { fraction: progress.fraction, mode: progress.mode });
+            break;
+        case "done":
+            body = result ? (_jsx(SummaryScreen, { result: result, onAgain: () => {
+                    setResult(null);
+                    setPhase("browse");
+                }, onQuit: exit })) : null;
+            break;
+        case "error":
+            body = (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.danger, children: "Something went wrong" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: errorMsg }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "Press q to quit." }) })] }));
+            break;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { subtitle: subtitles[phase] }), body] }));
+}
+function Centered({ text, spinner }) {
+    return (_jsxs(Box, { paddingX: 1, paddingY: 1, children: [spinner && (_jsxs(Text, { color: theme.success, children: [_jsx(Spinner, { type: "dots" }), " "] })), _jsx(Text, { children: text })] }));
+}

package/dist/ui/components/Banner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "../theme.js";
+// 4-row block font; each glyph's rows are equal width so words align by construction.
+const FONT = {
+    C: ["█████", "██   ", "██   ", "█████"],
+    L: ["██  ", "██  ", "██  ", "████"],
+    I: ["██", "██", "██", "██"],
+    P: ["█████", "██ ██", "█████", "██   "],
+    J: ["   ██", "   ██", "██ ██", "████ "],
+    O: ["█████", "██ ██", "██ ██", "█████"],
+    N: ["██  ██", "███ ██", "██ ███", "██  ██"],
+};
+const ROWS = 4;
+export function renderWord(word) {
+    const glyphs = [...word.toUpperCase()].map((ch) => FONT[ch] ?? ["  ", "  ", "  ", "  "]);
+    return Array.from({ length: ROWS }, (_, r) => glyphs.map((g) => g[r]).join(" "));
+}
+const LOGO = renderWord("ClipJoin");
+export function Banner({ tagline = false, align = "left" }) {
+    return (_jsxs(Box, { flexDirection: "column", alignItems: align === "center" ? "center" : "flex-start", children: [LOGO.map((line, i) => (_jsx(Text, { color: theme.logo, bold: true, children: line }, i))), tagline && _jsx(Text, { color: theme.muted, children: "\u2726 join your clips \u2726" })] }));
+}

package/dist/ui/components/Header.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { Banner } from "./Banner.js";
+import { theme } from "../theme.js";
+export function Header({ subtitle }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Banner, {}), subtitle ? (_jsxs(Text, { color: theme.subtitle, children: ["\n", "> ", subtitle] })) : null] }));
+}

package/dist/ui/components/KeyHints.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "../theme.js";
+export function KeyHints({ lines }) {
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: lines.map((line, i) => (_jsx(Text, { color: theme.muted, children: line.map((hint, j) => (_jsxs(Text, { children: [j > 0 ? " · " : "", _jsx(Text, { color: hint.primary ? theme.success : theme.key, children: hint.keys }), " ", hint.label] }, j))) }, i))) }));
+}

package/dist/ui/components/PreviewPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import path from "node:path";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import { canLossless } from "../../core/videos.js";
+import { humanSize, humanTime } from "../../core/format.js";
+import { TRANSITION_DURATION_SEC, TRANSITIONS } from "../../config.js";
+import { theme } from "../theme.js";
+export function PreviewPanel({ clips, outputPath, transition, chaptersEnabled, editingValue, onChangeEditing, onSubmitEditing, }) {
+    const included = clips.filter((c) => c.included);
+    const totalSize = included.reduce((s, c) => s + c.sizeBytes, 0);
+    const hasTransition = transition !== "none" && included.length >= 2;
+    // Crossfades overlap, so each boundary shortens the output by the overlap.
+    const overlap = hasTransition ? (included.length - 1) * TRANSITION_DURATION_SEC : 0;
+    const totalDuration = Math.max(0, included.reduce((s, c) => s + c.durationSec, 0) - overlap);
+    const transitionLabel = TRANSITIONS.find((t) => t.id === transition)?.label ?? "None";
+    const lossless = canLossless(clips) && !hasTransition;
+    const folder = path.basename(path.dirname(outputPath));
+    const filename = path.basename(outputPath);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.brand, paddingX: 1, marginLeft: 1, flexGrow: 1, children: [_jsx(Text, { color: theme.muted, bold: true, children: "Preview" }), _jsxs(Text, { children: [included.length, "/", clips.length, " clips"] }), _jsxs(Text, { children: ["\u23F1 ", humanTime(totalDuration)] }), _jsxs(Text, { children: ["\uD83D\uDCBE ", humanSize(totalSize)] }), _jsxs(Text, { color: hasTransition ? undefined : theme.muted, children: [hasTransition ? "🎬 " : "", "Transition: ", transitionLabel] }), _jsxs(Text, { color: chaptersEnabled ? undefined : theme.muted, children: [chaptersEnabled ? "📄 " : "", "Chapters: ", chaptersEnabled ? "ON" : "OFF"] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.muted, children: ["Output \u2192 ", folder, "/"] }), editingValue !== null ? (_jsx(TextInput, { value: editingValue, onChange: onChangeEditing, onSubmit: onSubmitEditing })) : (_jsx(Text, { color: theme.warn, children: filename }))] }), _jsx(Box, { marginTop: 1, children: lossless ? (_jsx(Text, { color: theme.success, children: "\u2713 lossless (fast)" })) : (_jsxs(Text, { color: theme.warn, children: ["\u27F3 will re-encode", hasTransition ? " (transition)" : ""] })) }), _jsx(Text, { color: theme.muted, children: hasTransition ? "takes longer to render" : " " })] }));
+}

package/dist/ui/components/ProgressBar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+export function ProgressBar({ fraction, width = 32, color = "green" }) {
+    const clamped = Math.min(1, Math.max(0, fraction));
+    const filled = Math.round(clamped * width);
+    const bar = "█".repeat(filled) + "░".repeat(width - filled);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: color, children: bar }), " ", Math.round(clamped * 100), "%"] }));
+}

package/dist/ui/hooks/useFullscreen.js

@@ -0,0 +1,20 @@
+import { useStdout } from "ink";
+import { useEffect, useState } from "react";
+/** Run full-screen via the alternate screen buffer, restoring scrollback on exit. */
+export function useFullscreen() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState({
+        columns: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24,
+    });
+    useEffect(() => {
+        stdout.write("\x1b[?1049h\x1b[H"); // enter alternate screen, cursor home
+        const onResize = () => setSize({ columns: stdout.columns ?? 80, rows: stdout.rows ?? 24 });
+        stdout.on("resize", onResize);
+        return () => {
+            stdout.off("resize", onResize);
+            stdout.write("\x1b[?1049l"); // leave alternate screen
+        };
+    }, [stdout]);
+    return size;
+}

package/dist/ui/screens/BrowseScreen.js

@@ -0,0 +1,148 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { promises as fs } from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { DEFAULT_EXTS } from "../../config.js";
+import { humanDate } from "../../core/format.js";
+import { theme } from "../theme.js";
+import { KeyHints } from "../components/KeyHints.js";
+const VIDEO_EXTS = new Set(DEFAULT_EXTS);
+const VISIBLE = 12;
+/** Width of the name column so the Date Modified column lines up across rows. */
+const NAME_W = 30;
+function isVideoFile(name) {
+    const ext = name.split(".").pop()?.toLowerCase() ?? "";
+    return VIDEO_EXTS.has(ext);
+}
+export function BrowseScreen({ onConfirm, onQuit }) {
+    const [dir, setDir] = useState(process.cwd());
+    const [entries, setEntries] = useState([]);
+    const [cursor, setCursor] = useState(0);
+    const [selected, setSelected] = useState(new Set());
+    const [error, setError] = useState(null);
+    async function load(target, selectName) {
+        try {
+            const dirents = await fs.readdir(target, { withFileTypes: true });
+            const list = await Promise.all(dirents
+                .filter((d) => !d.name.startsWith("."))
+                .map(async (d) => {
+                const full = path.join(target, d.name);
+                const isVideo = d.isFile() && isVideoFile(d.name);
+                // Only selectable (video) files need a modified date, so skip the
+                // stat() for everything else and keep directory listings fast.
+                let mtime = null;
+                if (isVideo) {
+                    mtime = await fs
+                        .stat(full)
+                        .then((s) => s.mtime)
+                        .catch(() => null);
+                }
+                return {
+                    name: d.name,
+                    path: full,
+                    isDir: d.isDirectory(),
+                    isVideo,
+                    selected: selected.has(full),
+                    mtime,
+                };
+            }));
+            list.sort((a, b) => {
+                if (a.isDir !== b.isDir)
+                    return a.isDir ? -1 : 1;
+                return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+            });
+            setEntries(list);
+            const idx = selectName ? list.findIndex((e) => e.name === selectName) : -1;
+            setCursor(idx >= 0 ? idx : 0);
+            setDir(target);
+            setError(null);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    }
+    useEffect(() => {
+        void load(process.cwd());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const videoCountHere = entries.filter((e) => e.isVideo).length;
+    useInput((input, key) => {
+        if (input === "q")
+            return onQuit();
+        if (key.upArrow) {
+            setCursor((c) => (c > 0 ? c - 1 : entries.length - 1));
+        }
+        else if (key.downArrow) {
+            setCursor((c) => (c < entries.length - 1 ? c + 1 : 0));
+        }
+        else if (key.return || input === " ") {
+            const entry = entries[cursor];
+            if (!entry)
+                return;
+            if (entry.isDir) {
+                void load(entry.path);
+            }
+            else if (entry.isVideo) {
+                setSelected((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(entry.path))
+                        next.delete(entry.path);
+                    else
+                        next.add(entry.path);
+                    return next;
+                });
+                setEntries((prev) => prev.map((e, i) => (i === cursor ? { ...e, selected: !e.selected } : e)));
+            }
+        }
+        else if (key.leftArrow || key.backspace || key.delete) {
+            const parent = path.dirname(dir);
+            // Coming back up, land the cursor on the folder we just left.
+            if (parent !== dir)
+                void load(parent, path.basename(dir));
+        }
+        else if (input === "~") {
+            void load(os.homedir());
+        }
+        else if (input === "s") {
+            const all = entries.filter((e) => e.isVideo).map((e) => e.path);
+            if (all.length > 0)
+                onConfirm(all);
+        }
+        else if (input === "c") {
+            if (selected.size > 0)
+                onConfirm([...selected]);
+        }
+    });
+    const start = Math.max(0, Math.min(cursor - Math.floor(VISIBLE / 2), Math.max(0, entries.length - VISIBLE)));
+    const window = entries.slice(start, start + VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: theme.muted, children: ["\uD83D\uDCC1 ", dir] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.muted, paddingX: 1, marginY: 1, children: error ? (_jsx(Text, { color: theme.danger, children: error })) : window.length === 0 ? (_jsx(Text, { color: theme.muted, children: "(empty)" })) : (window.map((entry, i) => {
+                    const idx = start + i;
+                    const active = idx === cursor;
+                    const icon = entry.isDir ? "📁" : entry.isVideo ? "🎬" : "  ";
+                    const check = entry.isVideo ? (entry.selected ? "[x]" : "[ ]") : "   ";
+                    const label = `${entry.name}${entry.isDir ? "/" : ""}`;
+                    // Video rows pad the name so their Date Modified column aligns;
+                    // other rows just show the (untruncated) name with no date.
+                    const name = entry.isVideo
+                        ? label.length > NAME_W
+                            ? label.slice(0, NAME_W - 1) + "…"
+                            : label.padEnd(NAME_W)
+                        : label;
+                    const modified = entry.isVideo && entry.mtime ? `  ${humanDate(entry.mtime)}` : "";
+                    return (_jsxs(Text, { color: active ? theme.brand : undefined, inverse: active, children: [active ? "▸ " : "  ", check, " ", icon, " ", name, modified] }, entry.path));
+                })) }), _jsxs(Text, { color: theme.muted, children: [videoCountHere, " video(s) here \u00B7 ", selected.size, " selected"] }), _jsx(KeyHints, { lines: [
+                    [
+                        { keys: "↑↓", label: "move" },
+                        { keys: "space/enter", label: "open dir / select file" },
+                        { keys: "←/⌫", label: "up" },
+                        { keys: "~", label: "home" },
+                    ],
+                    [
+                        { keys: "s", label: "use whole folder", primary: true },
+                        { keys: "c", label: `continue with selected (${selected.size})`, primary: true },
+                        { keys: "q", label: "quit" },
+                    ],
+                ] })] }));
+}

package/dist/ui/screens/EditScreen.js

@@ -0,0 +1,92 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import path from "node:path";
+import { humanClock, humanDate } from "../../core/format.js";
+import { resolveOutputPath } from "../../core/output.js";
+import { TRANSITIONS } from "../../config.js";
+import { theme } from "../theme.js";
+import { PreviewPanel } from "../components/PreviewPanel.js";
+import { KeyHints } from "../components/KeyHints.js";
+const VISIBLE = 12;
+export function EditScreen({ clips, setClips, outputName, setOutputName, transition, setTransition, generateChapters, setGenerateChapters, onJoin, onBack, onQuit, }) {
+    const [cursor, setCursor] = useState(0);
+    const [editingOutput, setEditingOutput] = useState(false);
+    const [draftOutput, setDraftOutput] = useState(outputName);
+    const move = (from, to) => {
+        if (to < 0 || to >= clips.length)
+            return;
+        const next = [...clips];
+        const [item] = next.splice(from, 1);
+        next.splice(to, 0, item);
+        setClips(next);
+        setCursor(to);
+    };
+    useInput((input, key) => {
+        if (editingOutput)
+            return; // TextInput owns keystrokes while editing
+        if (input === "q")
+            return onQuit();
+        if (key.escape)
+            return onBack();
+        if (key.upArrow) {
+            if (key.shift)
+                move(cursor, cursor - 1);
+            else
+                setCursor((c) => (c > 0 ? c - 1 : clips.length - 1));
+        }
+        else if (key.downArrow) {
+            if (key.shift)
+                move(cursor, cursor + 1);
+            else
+                setCursor((c) => (c < clips.length - 1 ? c + 1 : 0));
+        }
+        else if (input === " " || key.return) {
+            setClips(clips.map((c, i) => (i === cursor ? { ...c, included: !c.included } : c)));
+        }
+        else if (input === "o") {
+            setDraftOutput(outputName);
+            setEditingOutput(true);
+        }
+        else if (input === "t") {
+            const idx = TRANSITIONS.findIndex((t) => t.id === transition);
+            setTransition(TRANSITIONS[(idx + 1) % TRANSITIONS.length].id);
+        }
+        else if (input === "c") {
+            setGenerateChapters(!generateChapters);
+        }
+        else if (input === "j") {
+            // j = Join. (Enter toggles the clip; it never starts the join.)
+            if (clips.some((c) => c.included))
+                onJoin();
+        }
+    });
+    const included = clips.filter((c) => c.included);
+    const transitionLabel = TRANSITIONS.find((t) => t.id === transition)?.label ?? "None";
+    const start = Math.max(0, Math.min(cursor - Math.floor(VISIBLE / 2), Math.max(0, clips.length - VISIBLE)));
+    const window = clips.slice(start, start + VISIBLE);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.muted, paddingX: 1, width: "65%", children: [_jsxs(Text, { color: theme.muted, bold: true, children: ["Clips (", clips.length, ")"] }), window.map((clip, i) => {
+                                const idx = start + i;
+                                const active = idx === cursor;
+                                const num = String(idx + 1).padStart(2, " ");
+                                return (_jsxs(Text, { color: active ? theme.brand : clip.included ? undefined : theme.muted, inverse: active, children: [active ? "▸" : " ", " ", num, ". ", clip.included ? "[x]" : "[ ]", " ", clip.name.padEnd(16).slice(0, 16), " ", humanClock(clip.durationSec), " ", humanDate(clip.mtime)] }, clip.id));
+                            })] }), _jsx(PreviewPanel, { clips: clips, outputPath: resolveOutputPath(outputName), transition: transition, chaptersEnabled: generateChapters, editingValue: editingOutput ? draftOutput : null, onChangeEditing: setDraftOutput, onSubmitEditing: (val) => {
+                            const base = path.basename(val.trim());
+                            setOutputName(base || outputName);
+                            setEditingOutput(false);
+                        } })] }), _jsx(KeyHints, { lines: [
+                    [
+                        { keys: "↑↓", label: "move" },
+                        { keys: "space/enter", label: "toggle" },
+                        { keys: "Shift+↑↓", label: "reorder" },
+                        { keys: "o", label: "rename output" },
+                        { keys: "t", label: `transition: ${transitionLabel}` },
+                        { keys: "c", label: `chapters: ${generateChapters ? "ON" : "OFF"}` },
+                    ],
+                    [
+                        { keys: "j", label: `▶ JOIN${included.length === 0 ? " (select a clip first)" : ""}`, primary: true },
+                        { keys: "esc", label: "back" },
+                        { keys: "q", label: "quit" },
+                    ],
+                ] })] }));
+}

package/dist/ui/screens/JoinScreen.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { theme } from "../theme.js";
+import { ProgressBar } from "../components/ProgressBar.js";
+export function JoinScreen({ fraction, mode }) {
+    const label = mode === "lossless" ? "Joining clips…" : "Re-encoding clips…";
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.success, children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", label] })] }), _jsx(ProgressBar, { fraction: fraction, color: mode === "lossless" ? theme.success : theme.warn }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: mode === "lossless"
+                        ? "Lossless stream copy — no re-encoding."
+                        : "Re-encoding to H.264/AAC…" }) })] }));
+}

package/dist/ui/screens/SplashScreen.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { Banner } from "../components/Banner.js";
+import { theme } from "../theme.js";
+const TRACK = 34;
+const CLIP = "▐████▌";
+const MERGED = "▐██████████▌";
+const CLIP_ROWS = 4; // clip height, matched to the logo so the snap flows into it
+const STEPS = 8;
+const FRAME_MS = 90;
+const CENTER = Math.floor(TRACK / 2);
+// One row of the two clips sliding inward toward the center for a given step.
+function approachRow(step) {
+    const track = Array.from({ length: TRACK }, () => " ");
+    const lx = Math.round((step / STEPS) * (CENTER - CLIP.length));
+    const rx = TRACK - CLIP.length - lx;
+    for (let i = 0; i < CLIP.length; i++) {
+        track[lx + i] = CLIP[i];
+        track[rx + i] = CLIP[i];
+    }
+    return track.join("");
+}
+function mergedRow() {
+    const pad = Math.floor((TRACK - MERGED.length) / 2);
+    return " ".repeat(pad) + MERGED;
+}
+// Stack a row into a CLIP_ROWS-tall block.
+function block(row) {
+    return Array.from({ length: CLIP_ROWS }, () => row);
+}
+// Frame milestones: approach (0..STEPS) → snap → banner reveal → brief hold.
+const SNAP = STEPS + 1;
+const REVEAL = STEPS + 2;
+const END = STEPS + 5;
+/** Clips-merging intro that reveals the ClipJoin wordmark. Any key skips. */
+export function SplashScreen({ onDone }) {
+    const [frame, setFrame] = useState(0);
+    const onDoneRef = useRef(onDone);
+    onDoneRef.current = onDone;
+    const finishedRef = useRef(false);
+    const timerRef = useRef();
+    const finish = () => {
+        if (finishedRef.current)
+            return;
+        finishedRef.current = true;
+        if (timerRef.current)
+            clearInterval(timerRef.current);
+        onDoneRef.current();
+    };
+    useEffect(() => {
+        timerRef.current = setInterval(() => setFrame((f) => f + 1), FRAME_MS);
+        return () => {
+            if (timerRef.current)
+                clearInterval(timerRef.current);
+        };
+    }, []);
+    // Complete once we reach the end — in an effect, never inside a setState updater.
+    useEffect(() => {
+        if (frame >= END)
+            finish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [frame]);
+    useInput(() => finish()); // any key skips
+    const showBanner = frame >= REVEAL;
+    const rows = frame >= SNAP ? block(mergedRow()) : block(approachRow(frame));
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: showBanner ? (_jsx(Banner, {})) : (_jsxs(Box, { flexDirection: "column", children: [rows.map((row, i) => (_jsx(Text, { color: theme.logo, children: row }, i))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: frame >= SNAP ? "✦ joining" : "clip + clip" }) })] })) }));
+}

package/dist/ui/screens/SummaryScreen.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { humanSize, humanTime } from "../../core/format.js";
+import { theme } from "../theme.js";
+import { KeyHints } from "../components/KeyHints.js";
+export function SummaryScreen({ result, onAgain, onQuit }) {
+    useInput((input) => {
+        if (input === "r")
+            onAgain();
+        else if (input === "q")
+            onQuit();
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.success, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Output:   " }), _jsx(Text, { color: theme.warn, children: result.outputPath })] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Duration: " }), humanTime(result.durationSec)] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Size:     " }), humanSize(result.sizeBytes)] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Mode:     " }), result.mode === "lossless" ? (_jsx(Text, { color: theme.success, children: "lossless (stream copy)" })) : (_jsx(Text, { color: theme.warn, children: "re-encoded (H.264/AAC)" }))] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Elapsed:  " }), (result.elapsedMs / 1000).toFixed(1), "s"] }), result.chaptersPath && (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "Chapters: " }), _jsx(Text, { color: theme.warn, children: result.chaptersPath })] }))] }), _jsx(KeyHints, { lines: [[{ keys: "r", label: "join more", primary: true }, { keys: "q", label: "quit" }]] })] }));
+}

package/dist/ui/theme.js

@@ -0,0 +1,14 @@
+/** Single source of truth for ClipJoin's terminal colors. */
+export const theme = {
+    brand: "cyan",
+    /** Calm, warm yellowish tone for the persistent ClipJoin logo. */
+    logo: "#E4C88A",
+    accent: "magenta",
+    muted: "gray",
+    /** Soft steel-blue for the phase subtitle — a gentle step up from plain gray. */
+    subtitle: "#8FB3C7",
+    success: "green",
+    warn: "yellow",
+    danger: "red",
+    key: "white",
+};