ccwrap 0.1.0

package/dist/video/components/AnimatedNumber.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const AnimatedNumber: React.FC<{
+    value: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    style?: React.CSSProperties;
+    startFrame?: number;
+    duration?: number;
+}>;

package/dist/video/components/AnimatedNumber.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { interpolate, useCurrentFrame } from "remotion";
+export const AnimatedNumber = ({ value, decimals = 0, prefix = "", suffix = "", style = {}, startFrame = 10, duration = 30 }) => {
+    const frame = useCurrentFrame();
+    const progress = interpolate(frame, [startFrame, startFrame + duration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    // Eased progress for smoother counting
+    const eased = 1 - Math.pow(1 - progress, 3);
+    const displayValue = Math.round(value * eased * Math.pow(10, decimals)) / Math.pow(10, decimals);
+    const formatted = decimals > 0
+        ? displayValue.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+        : displayValue.toLocaleString();
+    return (_jsxs("span", { style: style, children: [prefix, formatted, suffix] }));
+};

package/dist/video/components/FadeIn.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const FadeIn: React.FC<{
+    children: React.ReactNode;
+    delay?: number;
+    duration?: number;
+    slideUp?: number;
+    style?: React.CSSProperties;
+}>;

package/dist/video/components/FadeIn.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { interpolate, useCurrentFrame } from "remotion";
+export const FadeIn = ({ children, delay = 0, duration = 15, slideUp = 30, style = {} }) => {
+    const frame = useCurrentFrame();
+    const opacity = interpolate(frame, [delay, delay + duration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    const translateY = interpolate(frame, [delay, delay + duration], [slideUp, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    return (_jsx("div", { style: {
+            opacity,
+            transform: `translateY(${translateY}px)`,
+            ...style,
+        }, children: children }));
+};

package/dist/video/components/GlowOrb.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const GlowOrb: React.FC<{
+    color: string;
+    size: number;
+    x: number;
+    y: number;
+    speed?: number;
+}>;

package/dist/video/components/GlowOrb.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { interpolate, useCurrentFrame } from "remotion";
+export const GlowOrb = ({ color, size, x, y, speed = 0.5 }) => {
+    const frame = useCurrentFrame();
+    const floatY = interpolate(Math.sin(frame * 0.02 * speed), [-1, 1], [-20, 20]);
+    const floatX = interpolate(Math.cos(frame * 0.015 * speed), [-1, 1], [-15, 15]);
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: `${x}%`,
+            top: `${y}%`,
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${color}40, ${color}00)`,
+            filter: "blur(40px)",
+            transform: `translate(${floatX}px, ${floatY}px)`,
+            pointerEvents: "none",
+        } }));
+};

package/dist/video/components/ParticleField.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const ParticleField: React.FC<{
+    count?: number;
+    seed?: number;
+}>;

package/dist/video/components/ParticleField.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useCurrentFrame, interpolate } from "remotion";
+import { colors } from "../styles";
+export const ParticleField = ({ count = 40, seed = 42 }) => {
+    const frame = useCurrentFrame();
+    const particles = useMemo(() => {
+        const rng = (s) => {
+            let x = Math.sin(s) * 10000;
+            return x - Math.floor(x);
+        };
+        const particleColors = [colors.primary, colors.secondary, colors.accent, colors.gold, colors.pink];
+        return Array.from({ length: count }, (_, i) => ({
+            x: rng(seed + i * 7) * 100,
+            y: rng(seed + i * 13) * 100,
+            size: rng(seed + i * 17) * 3 + 1,
+            speed: rng(seed + i * 23) * 2 + 0.5,
+            opacity: rng(seed + i * 29) * 0.5 + 0.2,
+            color: particleColors[Math.floor(rng(seed + i * 31) * particleColors.length)],
+        }));
+    }, [count, seed]);
+    return (_jsx("div", { style: { position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }, children: particles.map((p, i) => {
+            const y = (p.y + frame * p.speed * 0.3) % 110 - 5;
+            const twinkle = interpolate(Math.sin(frame * 0.1 + i), [-1, 1], [p.opacity * 0.5, p.opacity]);
+            return (_jsx("div", { style: {
+                    position: "absolute",
+                    left: `${p.x}%`,
+                    top: `${y}%`,
+                    width: p.size,
+                    height: p.size,
+                    borderRadius: "50%",
+                    backgroundColor: p.color,
+                    opacity: twinkle,
+                } }, i));
+        }) }));
+};

package/dist/video/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/video/index.js

@@ -0,0 +1,3 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+registerRoot(RemotionRoot);

package/dist/video/slides/ArchetypeSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const ArchetypeSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/ArchetypeSlide.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, label } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function getArchetypeColor(archetype, mode) {
+    const c = getColors(mode);
+    if (archetype.includes("Night"))
+        return c.primary;
+    if (archetype.includes("Weekend"))
+        return c.secondary;
+    if (archetype.includes("Marathon"))
+        return c.accent;
+    if (archetype.includes("Streak"))
+        return c.gold;
+    if (archetype.includes("Whale"))
+        return mode === "dark" ? c.accent : "#10b981";
+    if (archetype.includes("Connoisseur"))
+        return c.gold;
+    if (archetype.includes("Serial"))
+        return c.pink;
+    return c.secondary;
+}
+export const ArchetypeSlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const c = getColors(mode);
+    const color = getArchetypeColor(stats.archetype, mode);
+    const revealScale = spring({ frame: Math.max(0, frame - 20), fps, from: 0, to: 1, config: { damping: 8, stiffness: 80 } });
+    const glowIntensity = interpolate(Math.sin(frame * 0.08), [-1, 1], [0.5, 1]);
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 40, seed: 333 }), _jsx(GlowOrb, { color: color, size: 350, x: 50, y: 45, speed: 0.3 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 15, y: 20 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 85, y: 80 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color, zIndex: 1, letterSpacing: "0.3em" }, children: mode === "dark" ? "Your Classification" : "You Are..." }) }), _jsxs("div", { style: { transform: `scale(${revealScale})`, opacity: revealScale, zIndex: 1, marginTop: 24, textAlign: "center" }, children: [_jsx("div", { style: { width: 90, height: 3, background: `linear-gradient(90deg, transparent, ${color}, transparent)`, margin: "0 auto 18px", opacity: glowIntensity } }), _jsx("div", { style: { fontSize: 68, fontWeight: 900, lineHeight: 1.1, ...glowText(color), background: `linear-gradient(135deg, ${color}, ${c.text}, ${color})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", filter: `brightness(${0.8 + glowIntensity * 0.4})` }, children: stats.archetype }), _jsx("div", { style: { width: 90, height: 3, background: `linear-gradient(90deg, transparent, ${color}, transparent)`, margin: "18px auto 0", opacity: glowIntensity } })] }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { fontSize: 18, color: c.textMuted, maxWidth: 580, textAlign: "center", lineHeight: 1.5, marginTop: 28, zIndex: 1, padding: "8px 18px", borderRadius: 10, background: "rgba(0,0,0,0.35)" }, children: commentary }) }), _jsx(FadeIn, { delay: 55, style: { zIndex: 1, marginTop: 28 }, children: _jsxs("div", { style: { display: "flex", gap: 14 }, children: [_jsx(Badge, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Badge, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted }), _jsx(Badge, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) })] }));
+};
+const Badge = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { background: `${color}20`, border: `1px solid ${color}50`, borderRadius: 12, padding: "10px 20px", textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 22, fontWeight: 700, color }, children: value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2, textTransform: "uppercase" }, children: l })] }));

package/dist/video/slides/BusiestDaySlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const BusiestDaySlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/BusiestDaySlide.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, interpolate } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { AnimatedNumber } from "../components/AnimatedNumber";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function formatDate(dateStr) {
+    const d = new Date(dateStr + "T00:00:00");
+    return d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
+}
+export const BusiestDaySlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const c = getColors(mode);
+    const day = stats.busiestDay;
+    const recentDays = stats.dailyActivity.slice(-14);
+    const maxTokens = Math.max(...recentDays.map(d => d.tokenCount), 1);
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(45, c), color: c.text }, children: [_jsx(ParticleField, { count: 30, seed: 55 }), _jsx(GlowOrb, { color: c.accent, size: 250, x: 50, y: 30 }), _jsx(GlowOrb, { color: c.pink, size: 180, x: 25, y: 70 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.accent, zIndex: 1 }, children: mode === "dark" ? "Peak Destruction Day" : "Your Biggest Day" }) }), _jsx(FadeIn, { delay: 12, children: _jsx("div", { style: { fontSize: 44, fontWeight: 900, ...glowText(c.accent), color: c.text, zIndex: 1, marginTop: 16 }, children: formatDate(day.date) }) }), _jsx(FadeIn, { delay: 25, children: _jsxs("div", { style: { display: "flex", gap: 48, marginTop: 24, zIndex: 1 }, children: [_jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.tokenCount, style: { fontSize: 40, fontWeight: 800, color: c.accent }, startFrame: 25, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "TOKENS" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.messageCount, style: { fontSize: 40, fontWeight: 800, color: c.pink }, startFrame: 28, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "MESSAGES" })] }), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx(AnimatedNumber, { value: day.sessions, style: { fontSize: 40, fontWeight: 800, color: c.secondary }, startFrame: 31, duration: 25 }), _jsx("div", { style: { fontSize: 13, color: c.textMuted, marginTop: 4 }, children: "SESSIONS" })] })] }) }), _jsx(FadeIn, { delay: 45, style: { width: "88%", marginTop: 28, zIndex: 1 }, children: _jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 4, height: 100 }, children: recentDays.map((d, i) => {
+                        const barHeight = interpolate(frame, [48 + i, 68 + i], [0, (d.tokenCount / maxTokens) * 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+                        const isBusiest = d.date === day.date;
+                        return (_jsx("div", { style: { flex: 1, height: barHeight, borderRadius: 3, background: isBusiest ? `linear-gradient(180deg, ${c.accent}, ${c.pink})` : `${c.primary}90`, boxShadow: isBusiest ? `0 0 8px ${c.accent}80` : undefined } }, d.date));
+                    }) }) }), _jsx(FadeIn, { delay: 60, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+};

package/dist/video/slides/CostSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const CostSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/CostSlide.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { baseSlide, gradientBg, getColors, glowText, bigNumber, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { AnimatedNumber } from "../components/AnimatedNumber";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+export const CostSlide = ({ stats, commentary, mode }) => {
+    const c = getColors(mode);
+    const costColor = mode === "dark" ? c.accent : "#10b981";
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(320, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 42 }), _jsx(GlowOrb, { color: costColor, size: 280, x: 50, y: 35 }), _jsx(GlowOrb, { color: c.primary, size: 160, x: 80, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: costColor, zIndex: 1 }, children: mode === "dark" ? "The Price of Progress" : "Estimated Cost" }) }), _jsx(AnimatedNumber, { value: stats.totalCost, decimals: 2, prefix: "$", style: { ...bigNumber, ...glowText(costColor), color: costColor, display: "block", textAlign: "center", zIndex: 1, marginTop: 20 }, startFrame: 10, duration: 35 }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { display: "flex", gap: 50, marginTop: 36, zIndex: 1 }, children: mode === "dark" ? (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\uD83D\uDCA7", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, label: "Water" }), _jsx(Metric, { icon: "\uD83C\uDFED", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, label: "CO\u2082" }), _jsx(Metric, { icon: "\u26A1", value: `${stats.kwhUsed.toLocaleString(undefined, { maximumFractionDigits: 1 })}`, label: "kWh" })] })) : (_jsxs(_Fragment, { children: [_jsx(Metric, { icon: "\u2615", value: stats.coffeeEquivalent.toLocaleString(), label: "Coffees" }), _jsx(Metric, { icon: "\uD83C\uDFC3", value: stats.marathonEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "Marathons" }), _jsx(Metric, { icon: "\uD83D\uDCD6", value: stats.warAndPeaceEquivalent.toLocaleString(undefined, { maximumFractionDigits: 1 }), label: "War & Peaces" })] })) }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+};
+const Metric = ({ icon, value, label: l }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 36 }, children: icon }), _jsx("div", { style: { fontSize: 30, fontWeight: 800, color: "#f1f5f9", marginTop: 6 }, children: value }), _jsx("div", { style: { fontSize: 13, color: "inherit", opacity: 0.7, marginTop: 3, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));

package/dist/video/slides/IntroSlide.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const IntroSlide: React.FC<{
+    mode: "sassy" | "dark";
+    periodLabel: string;
+}>;

package/dist/video/slides/IntroSlide.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
+import { baseSlide, gradientBg, getColors } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+export const IntroSlide = ({ mode, periodLabel }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const c = getColors(mode);
+    const logoScale = spring({ frame, fps, from: 0, to: 1, config: { damping: 12, stiffness: 100 } });
+    const titleOpacity = interpolate(frame, [20, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const taglineScale = spring({ frame: Math.max(0, frame - 35), fps, from: 0.5, to: 1, config: { damping: 8 } });
+    const taglineOpacity = interpolate(frame, [35, 50], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const rotation = interpolate(frame, [0, 150], [0, 360], { extrapolateRight: "extend" });
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(135, c), color: c.text }, children: [_jsx(ParticleField, { count: 40 }), _jsx(GlowOrb, { color: c.primary, size: 250, x: 15, y: 25 }), _jsx(GlowOrb, { color: c.secondary, size: 200, x: 80, y: 70 }), _jsx(GlowOrb, { color: c.accent, size: 150, x: 50, y: 15, speed: 0.3 }), _jsx("div", { style: { position: "absolute", width: 180, height: 180, borderRadius: "50%", border: `2px solid ${c.primary}30`, transform: `scale(${logoScale}) rotate(${rotation}deg)` } }), _jsx("div", { style: { position: "absolute", width: 150, height: 150, borderRadius: "50%", border: `1px solid ${c.secondary}20`, transform: `scale(${logoScale}) rotate(-${rotation * 0.7}deg)` } }), _jsx("div", { style: { transform: `scale(${logoScale})`, fontSize: 72, fontWeight: 900, background: `linear-gradient(135deg, ${c.primary}, ${c.secondary})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", zIndex: 1 }, children: "</>" }), _jsxs("div", { style: { opacity: titleOpacity, fontSize: 48, fontWeight: 800, marginTop: 24, letterSpacing: "-0.02em", zIndex: 1 }, children: [_jsx("span", { style: { color: c.text }, children: "Claude Code " }), _jsx("span", { style: { background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }, children: "Wrapped" })] }), _jsx(FadeIn, { delay: 35, children: _jsx("div", { style: { opacity: taglineOpacity, transform: `scale(${taglineScale})`, fontSize: 22, fontWeight: 500, color: c.textMuted, marginTop: 20, zIndex: 1 }, children: periodLabel.startsWith("Your ")
+                        ? mode === "dark"
+                            ? `${periodLabel} in AI. The planet remembers.`
+                            : `${periodLabel} in AI-assisted coding`
+                        : periodLabel }) })] }));
+};

package/dist/video/slides/ModelSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const ModelSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/ModelSlide.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function getModelVersion(model) {
+    // Extract version like "4.6", "4.5", "3.5" from model ID
+    const match = model.match(/(\d+)[.-](\d+)/);
+    if (match)
+        return `${match[1]}.${match[2]}`;
+    return "";
+}
+function getModelDisplayName(model) {
+    const version = getModelVersion(model);
+    if (model.includes("opus"))
+        return version ? `Opus ${version}` : "Opus";
+    if (model.includes("sonnet"))
+        return version ? `Sonnet ${version}` : "Sonnet";
+    if (model.includes("haiku"))
+        return version ? `Haiku ${version}` : "Haiku";
+    return model;
+}
+function getModelColor(model, mode) {
+    const c = getColors(mode);
+    if (model.includes("opus"))
+        return c.gold;
+    if (model.includes("sonnet"))
+        return c.primary;
+    if (model.includes("haiku"))
+        return c.secondary;
+    return c.accent;
+}
+export const ModelSlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const c = getColors(mode);
+    const favoriteColor = getModelColor(stats.favoriteModel, mode);
+    const revealScale = spring({ frame: Math.max(0, frame - 15), fps, from: 0.3, to: 1, config: { damping: 10 } });
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(260, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 77 }), _jsx(GlowOrb, { color: favoriteColor, size: 300, x: 50, y: 40 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: favoriteColor, zIndex: 1 }, children: mode === "dark" ? "Your Weapon of Choice" : "Your #1 Model" }) }), _jsx(FadeIn, { delay: 15, children: _jsx("div", { style: { fontSize: 90, fontWeight: 900, ...glowText(favoriteColor), background: `linear-gradient(135deg, ${favoriteColor}, ${c.text})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", transform: `scale(${revealScale})`, zIndex: 1, marginTop: 12 }, children: getModelDisplayName(stats.favoriteModel) }) }), _jsx(FadeIn, { delay: 30, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) }), _jsx(FadeIn, { delay: 40, style: { width: "85%", marginTop: 28, zIndex: 1 }, children: _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: stats.modelUsage.slice(0, 4).map((m, i) => {
+                        const barWidth = interpolate(frame, [45 + i * 5, 65 + i * 5], [0, m.percentage], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+                        const modelColor = getModelColor(m.model, mode);
+                        return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("div", { style: { width: 100, fontSize: 14, color: c.textMuted, textAlign: "right", fontWeight: 500 }, children: getModelDisplayName(m.model) }), _jsx("div", { style: { flex: 1, height: 24, borderRadius: 12, background: `${c.text}20`, overflow: "hidden" }, children: _jsx("div", { style: { width: `${barWidth}%`, height: "100%", borderRadius: 12, background: `linear-gradient(90deg, ${modelColor}, ${modelColor}cc)`, boxShadow: `0 0 8px ${modelColor}60` } }) }), _jsxs("div", { style: { width: 44, fontSize: 14, color: c.textMuted, fontWeight: 600 }, children: [m.percentage.toFixed(0), "%"] })] }, m.model));
+                    }) }) })] }));
+};

package/dist/video/slides/PeakHoursSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const PeakHoursSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/PeakHoursSlide.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, interpolate } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function formatHour(hour) {
+    if (hour === 0)
+        return "12am";
+    if (hour === 12)
+        return "12pm";
+    return hour < 12 ? `${hour}am` : `${hour - 12}pm`;
+}
+function getTimeTitle(hour, mode) {
+    if (mode === "dark") {
+        if (hour >= 22 || hour < 5)
+            return "Midnight Burner";
+        if (hour >= 5 && hour < 9)
+            return "Dawn Polluter";
+        if (hour >= 17)
+            return "After-Dark Emitter";
+        return "Daytime Drainer";
+    }
+    if (hour >= 5 && hour < 9)
+        return "Early Bird";
+    if (hour >= 9 && hour < 12)
+        return "Morning Person";
+    if (hour >= 12 && hour < 14)
+        return "Lunch Coder";
+    if (hour >= 14 && hour < 17)
+        return "Afternoon Warrior";
+    if (hour >= 17 && hour < 20)
+        return "After-Hours Hacker";
+    if (hour >= 20 && hour < 23)
+        return "Night Coder";
+    return "Midnight Demon";
+}
+export const PeakHoursSlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const c = getColors(mode);
+    const maxActivity = Math.max(...stats.hourlyActivity.map(h => h.tokenCount), 1);
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(280, c), color: c.text }, children: [_jsx(ParticleField, { count: 20, seed: 200 }), _jsx(GlowOrb, { color: c.secondary, size: 250, x: 50, y: 30 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 20, y: 70 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.secondary, zIndex: 1 }, children: mode === "dark" ? "Peak Power Draw" : "Peak Coding Hours" }) }), _jsxs(FadeIn, { delay: 12, children: [_jsx("div", { style: { fontSize: 56, fontWeight: 900, ...glowText(c.secondary), color: c.text, zIndex: 1, marginTop: 12 }, children: getTimeTitle(stats.busiestHour, mode) }), _jsxs("div", { style: { fontSize: 18, color: c.textMuted, textAlign: "center", marginTop: 8, zIndex: 1 }, children: ["Your peak: ", _jsx("span", { style: { color: c.secondary, fontWeight: 700 }, children: formatHour(stats.busiestHour) })] })] }), _jsx(FadeIn, { delay: 25, style: { marginTop: 32, zIndex: 1 }, children: _jsxs("div", { style: { width: 700, height: 180 }, children: [_jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 3, height: 150 }, children: stats.hourlyActivity.map((h, i) => {
+                                const barHeight = interpolate(frame, [28 + i * 0.5, 48 + i * 0.5], [0, (h.tokenCount / maxActivity) * 150], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+                                const isPeak = h.hour === stats.busiestHour;
+                                const isNight = h.hour >= 22 || h.hour < 5;
+                                return (_jsx("div", { style: { flex: 1 }, children: _jsx("div", { style: { width: "100%", height: barHeight, borderRadius: 3, background: isPeak ? `linear-gradient(180deg, ${c.secondary}, ${c.primary})` : isNight ? `${c.primary}cc` : `${c.text}60`, boxShadow: isPeak ? `0 0 8px ${c.secondary}80` : undefined } }) }, i));
+                            }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 6 }, children: [0, 6, 12, 18, 23].map(h => _jsx("div", { style: { fontSize: 12, color: c.textMuted }, children: formatHour(h) }, h)) })] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+};

package/dist/video/slides/SessionSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const SessionSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/SessionSlide.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, spring, useVideoConfig } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function formatDuration(minutes) {
+    if (minutes < 60)
+        return `${Math.round(minutes)} min`;
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.round(minutes % 60);
+    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+}
+export const SessionSlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const c = getColors(mode);
+    const pulse = spring({ frame: frame % 40, fps, from: 1, to: 1.04, config: { damping: 5 } });
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(160, c), color: c.text }, children: [_jsx(ParticleField, { count: 25, seed: 123 }), _jsx(GlowOrb, { color: c.pink, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.primary, size: 180, x: 75, y: 20 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: c.pink, zIndex: 1 }, children: mode === "dark" ? "Endurance Test" : "Marathon Session" }) }), _jsxs(FadeIn, { delay: 12, children: [_jsx("div", { style: { fontSize: 80, fontWeight: 900, ...glowText(c.pink), color: c.text, zIndex: 1, marginTop: 16, transform: `scale(${pulse})` }, children: formatDuration(stats.longestSession.durationMinutes) }), _jsx("div", { style: { fontSize: 18, color: c.textMuted, zIndex: 1, marginTop: 8 }, children: "longest session" })] }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: { display: "flex", gap: 36, marginTop: 32, zIndex: 1 }, children: [_jsx(Pill, { label: "Sessions", value: stats.totalSessions, color: c.primary, textColor: c.textMuted }), _jsx(Pill, { label: "Avg", value: `${stats.avgSessionMinutes}m`, color: c.secondary, textColor: c.textMuted }), _jsx(Pill, { label: "Messages", value: stats.totalMessages, color: mode === "dark" ? c.textMuted : "#10b981", textColor: c.textMuted }), _jsx(Pill, { label: "Streak", value: `${stats.streakDays}d`, color: c.gold, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { display: "flex", gap: 14, marginTop: 24, zIndex: 1 }, children: [_jsx(Chip, { label: "Active Days", value: stats.totalDaysActive, color: c.accent, textColor: c.textMuted }), _jsx(Chip, { label: "Night Owl", value: `${stats.nightOwlScore}%`, color: c.primary, textColor: c.textMuted }), _jsx(Chip, { label: "Weekend", value: `${stats.weekendWarriorScore}%`, color: c.secondary, textColor: c.textMuted })] }) }), _jsx(FadeIn, { delay: 60, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+};
+const Pill = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 34, fontWeight: 800, color, ...glowText(color) }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: { fontSize: 12, color: textColor, marginTop: 3, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));
+const Chip = ({ label: l, value, color, textColor }) => (_jsxs("div", { style: { background: `${color}20`, border: `1px solid ${color}50`, borderRadius: 10, padding: "8px 18px", textAlign: "center" }, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 700, color }, children: typeof value === "number" ? value.toLocaleString() : value }), _jsx("div", { style: { fontSize: 11, color: textColor, marginTop: 2 }, children: l })] }));

package/dist/video/slides/SummarySlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const SummarySlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/SummarySlide.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function formatNumber(n) {
+    if (n >= 1_000_000)
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000)
+        return `${(n / 1_000).toFixed(1)}K`;
+    return n.toString();
+}
+function getModelShortName(model) {
+    const match = model.match(/(\d+)[.-](\d+)/);
+    const version = match ? ` ${match[1]}.${match[2]}` : "";
+    if (model.includes("opus"))
+        return `Opus${version}`;
+    if (model.includes("sonnet"))
+        return `Sonnet${version}`;
+    if (model.includes("haiku"))
+        return `Haiku${version}`;
+    return model.split("-").slice(0, 2).join(" ");
+}
+function getSummaryTitle(periodLabel, mode) {
+    const suffixMap = {
+        "Your week": ["Your Week in Review", "Your Week's Impact"],
+        "Your month": ["Your Month in Review", "Your Month's Impact"],
+        "Your quarter": ["Your Quarter in Review", "Your Quarter's Impact"],
+        "Your all-time": ["Your All-Time Recap", "Your All-Time Impact"],
+    };
+    const match = suffixMap[periodLabel];
+    if (match)
+        return mode === "dark" ? match[1] : match[0];
+    return periodLabel; // custom date range string
+}
+export const SummarySlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const c = getColors(mode);
+    const cardScale = spring({ frame: Math.max(0, frame - 5), fps, from: 0.85, to: 1, config: { damping: 12 } });
+    const cardOpacity = interpolate(frame, [5, 20], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    const rotation = interpolate(Math.sin(frame * 0.02), [-1, 1], [-0.8, 0.8]);
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(135, c), color: c.text }, children: [_jsx(ParticleField, { count: 50, seed: 444 }), _jsx(GlowOrb, { color: c.primary, size: 240, x: 25, y: 20 }), _jsx(GlowOrb, { color: c.secondary, size: 200, x: 75, y: 75 }), _jsx(GlowOrb, { color: c.accent, size: 170, x: 50, y: 50, speed: 0.2 }), _jsxs("div", { style: {
+                    opacity: cardOpacity, transform: `scale(${cardScale}) rotate(${rotation}deg)`,
+                    background: `linear-gradient(145deg, ${c.bgGradient1}ee, ${c.bgGradient3}ee)`,
+                    border: `1px solid ${c.primary}50`, borderRadius: 24, padding: "36px 44px",
+                    maxWidth: 620, width: "92%",
+                    boxShadow: `0 0 36px ${c.primary}20, 0 12px 36px rgba(0,0,0,0.5)`, zIndex: 1,
+                }, children: [_jsx("div", { style: { textAlign: "center", marginBottom: 20 }, children: _jsx("div", { style: { fontSize: 28, fontWeight: 900, ...glowText(c.primary), background: `linear-gradient(90deg, ${c.primary}, ${c.secondary})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }, children: getSummaryTitle(stats.periodLabel, mode) }) }), _jsx(FadeIn, { delay: 15, children: _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 36px" }, children: [_jsx(Row, { label: "Tokens", value: formatNumber(stats.totalTokens), color: c.gold, textColor: c.textMuted }), _jsx(Row, { label: "Cost", value: `$${stats.totalCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, color: mode === "dark" ? c.accent : "#10b981", textColor: c.textMuted }), _jsx(Row, { label: "Sessions", value: stats.totalSessions.toLocaleString(), color: c.primary, textColor: c.textMuted }), _jsx(Row, { label: "Messages", value: formatNumber(stats.totalMessages), color: c.pink, textColor: c.textMuted }), _jsx(Row, { label: "Active Days", value: stats.totalDaysActive.toLocaleString(), color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "Fav Model", value: getModelShortName(stats.favoriteModel), color: c.accent, textColor: c.textMuted }), mode === "dark" && _jsxs(_Fragment, { children: [_jsx(Row, { label: "Water", value: `${stats.waterLiters.toLocaleString(undefined, { maximumFractionDigits: 1 })}L`, color: c.secondary, textColor: c.textMuted }), _jsx(Row, { label: "CO\u2082", value: `${(stats.co2Grams / 1000).toLocaleString(undefined, { maximumFractionDigits: 1 })}kg`, color: c.textMuted, textColor: c.textMuted })] })] }) }), _jsx(FadeIn, { delay: 30, children: _jsxs("div", { style: { marginTop: 20, textAlign: "center", padding: "12px 20px", background: `linear-gradient(135deg, ${c.primary}20, ${c.accent}20)`, borderRadius: 12, border: `1px solid ${c.primary}40` }, children: [_jsx("div", { style: { fontSize: 12, color: c.textMuted, textTransform: "uppercase", letterSpacing: "0.15em" }, children: "Your Archetype" }), _jsx("div", { style: { fontSize: 26, fontWeight: 800, background: `linear-gradient(90deg, ${c.primary}, ${c.accent})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", marginTop: 3 }, children: stats.archetype })] }) }), _jsx(FadeIn, { delay: 40, children: _jsx("div", { style: { textAlign: "center", marginTop: 16, fontSize: 15, fontStyle: "italic", color: c.textMuted }, children: commentary }) }), _jsx(FadeIn, { delay: 50, children: _jsxs("div", { style: { textAlign: "center", marginTop: 14, fontSize: 12, color: c.textDim }, children: ["ccwrapped", mode === "dark" ? " — know your impact" : " — put meme software on the map"] }) })] })] }));
+};
+const Row = ({ label, value, color, textColor }) => (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("div", { style: { fontSize: 14, color: textColor }, children: label }), _jsx("div", { style: { fontSize: 20, fontWeight: 700, color }, children: value })] }));

package/dist/video/slides/TokensSlide.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { WrappedStats } from "../../data/types";
+export declare const TokensSlide: React.FC<{
+    stats: WrappedStats;
+    commentary: string;
+    mode: "sassy" | "dark";
+}>;

package/dist/video/slides/TokensSlide.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCurrentFrame } from "remotion";
+import { baseSlide, gradientBg, getColors, glowText, bigNumber, label, memeCaption } from "../styles";
+import { FadeIn } from "../components/FadeIn";
+import { AnimatedNumber } from "../components/AnimatedNumber";
+import { ParticleField } from "../components/ParticleField";
+import { GlowOrb } from "../components/GlowOrb";
+function formatTokens(n) {
+    if (n >= 1_000_000_000)
+        return { value: Math.round(n / 1_000_000_000 * 10) / 10, suffix: "B" };
+    if (n >= 1_000_000)
+        return { value: Math.round(n / 1_000_000 * 10) / 10, suffix: "M" };
+    if (n >= 1_000)
+        return { value: Math.round(n / 1_000 * 10) / 10, suffix: "K" };
+    return { value: n, suffix: "" };
+}
+export const TokensSlide = ({ stats, commentary, mode }) => {
+    const frame = useCurrentFrame();
+    const c = getColors(mode);
+    const formatted = formatTokens(stats.totalTokens);
+    const shake = frame > 30 && frame < 45 ? Math.sin(frame * 2) * 2 : 0;
+    const accentColor = mode === "dark" ? c.accent : c.gold;
+    return (_jsxs("div", { style: { ...baseSlide, ...gradientBg(200, c), color: c.text }, children: [_jsx(ParticleField, { count: 35, seed: 99 }), _jsx(GlowOrb, { color: accentColor, size: 300, x: 50, y: 40 }), _jsx(GlowOrb, { color: c.accent, size: 180, x: 20, y: 75 }), _jsx(FadeIn, { delay: 5, children: _jsx("div", { style: { ...label, color: accentColor, zIndex: 1 }, children: "Total Tokens Consumed" }) }), _jsx("div", { style: { transform: `translateX(${shake}px)`, zIndex: 1, marginTop: 20 }, children: _jsx(AnimatedNumber, { value: formatted.value, decimals: formatted.suffix ? 1 : 0, suffix: formatted.suffix, style: { ...bigNumber, ...glowText(accentColor), background: `linear-gradient(135deg, ${accentColor}, ${c.text})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", display: "block", textAlign: "center" }, startFrame: 10, duration: 40 }) }), _jsx(FadeIn, { delay: 45, children: _jsxs("div", { style: { display: "flex", gap: 50, marginTop: 32, zIndex: 1 }, children: [_jsx(StatBox, { label: "Input", value: formatTokens(stats.totalInputTokens), color: c.secondary }), _jsx(StatBox, { label: "Output", value: formatTokens(stats.totalOutputTokens), color: mode === "dark" ? c.textMuted : "#10b981" }), mode === "dark" && _jsx(StatBox, { label: "Water", value: { value: stats.waterLiters, suffix: "L" }, color: c.secondary }), mode === "dark" && _jsx(StatBox, { label: "Energy", value: { value: stats.kwhUsed, suffix: " kWh" }, color: c.gold })] }) }), _jsx(FadeIn, { delay: 55, children: _jsx("div", { style: { ...memeCaption, color: c.textMuted, zIndex: 1 }, children: commentary }) })] }));
+};
+const StatBox = ({ label: l, value, color }) => (_jsxs("div", { style: { textAlign: "center" }, children: [_jsxs("div", { style: { fontSize: 36, fontWeight: 800, color, ...glowText(color) }, children: [value.value.toLocaleString(undefined, { maximumFractionDigits: value.suffix ? 1 : 0 }), value.suffix] }), _jsx("div", { style: { fontSize: 13, color: "inherit", opacity: 0.7, marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }, children: l })] }));

package/dist/video/styles.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties } from "react";
+declare const sassyColors: {
+    bg: string;
+    bgGradient1: string;
+    bgGradient2: string;
+    bgGradient3: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    gold: string;
+    green: string;
+    pink: string;
+    text: string;
+    textMuted: string;
+    textDim: string;
+};
+export type ColorScheme = typeof sassyColors;
+export declare function getColors(mode: "sassy" | "dark"): ColorScheme;
+export declare const colors: {
+    bg: string;
+    bgGradient1: string;
+    bgGradient2: string;
+    bgGradient3: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    gold: string;
+    green: string;
+    pink: string;
+    text: string;
+    textMuted: string;
+    textDim: string;
+};
+export declare const fonts: {
+    heading: string;
+    body: string;
+    mono: string;
+};
+export declare const baseSlide: CSSProperties;
+export declare const gradientBg: (angle: number, c: ColorScheme) => CSSProperties;
+export declare const glowText: (color: string) => CSSProperties;
+export declare const bigNumber: CSSProperties;
+export declare const label: CSSProperties;
+export declare const memeCaption: CSSProperties;
+export {};