headreel 1.2.0 → 1.3.0

package/dist/styles/contribution-city/sketch.js

@@ -1,3 +1,4 @@
+import { fitIdentity } from '../../core/text.js';
 import { cityOrigin, LAYOUT, tileAt } from './city.js';
 const PALETTE = {
     skyTop: '#07090c',
@@ -5,12 +6,32 @@ const PALETTE = {
     skyFloor: '#0c0a09',
     front: [20, 28, 34],
     side: [12, 18, 23],
-    top: [8, 145, 178],
-    window: [165, 243, 252],
-    cyan: '#22d3ee',
     ink: '#f5f5f4',
     muted: '#a8a29e',
 };
+const ACCENTS = {
+    cyan: { deep: [8, 145, 178], bright: [34, 211, 238], pale: [165, 243, 252], scan: [12, 40, 50] },
+    cobalt: {
+        deep: [37, 99, 235],
+        bright: [96, 165, 250],
+        pale: [191, 219, 254],
+        scan: [19, 33, 50],
+    },
+    green: { deep: [5, 150, 105], bright: [52, 211, 153], pale: [167, 243, 208], scan: [10, 42, 31] },
+    violet: {
+        deep: [124, 58, 237],
+        bright: [167, 139, 250],
+        pale: [221, 214, 254],
+        scan: [33, 28, 50],
+    },
+    pink: {
+        deep: [219, 39, 119],
+        bright: [244, 114, 182],
+        pale: [251, 207, 232],
+        scan: [49, 23, 36],
+    },
+};
+const rgba = ([r, g, b], a) => `rgba(${r},${g},${b},${a})`;
 const SANS = 'Space Grotesk';
 const MONO = 'JetBrains Mono';
 const TEXT_X = 48;
@@ -27,7 +48,16 @@ function easeInOut(t) {
 function displayUrl(url) {
     return url.replace(/^[a-z]+:\/\//i, '').replace(/\/+$/, '');
 }
-export function createCitySketch(city, identity, rng) {
+export function createCitySketch(city, identity, rng, accent = 'cyan') {
+    const { deep, bright, pale, scan } = ACCENTS[accent];
+    const [br, bg, bb] = bright;
+    const [pr, pg, pb] = pale;
+    // The name and tagline run above the city; the website sits beside it.
+    const fitted = fitIdentity({
+        name: identity.name.toUpperCase(),
+        tagline: identity.tagline,
+        website: identity.website && `↗ ${displayUrl(identity.website)}`,
+    }, W - TEXT_X - LAYOUT.rightMargin, cityOrigin(city.weeks).x - 16 - TEXT_X);
     const origin = cityOrigin(city.weeks);
     const noiseSeed = Math.floor(rng() * 2 ** 31);
     const grainSeed = Math.floor(rng() * 2 ** 31);
@@ -51,9 +81,9 @@ export function createCitySketch(city, identity, rng) {
         const gx = origin.x + 520;
         const gy = baseY - 40;
         const glow = ctx.createRadialGradient(gx, gy, 10, gx, gy, 620);
-        glow.addColorStop(0, 'rgba(8,145,178,0.22)');
-        glow.addColorStop(0.5, 'rgba(8,145,178,0.06)');
-        glow.addColorStop(1, 'rgba(8,145,178,0)');
+        glow.addColorStop(0, rgba(deep, 0.22));
+        glow.addColorStop(0.5, rgba(deep, 0.06));
+        glow.addColorStop(1, rgba(deep, 0));
         ctx.fillStyle = glow;
         ctx.fillRect(0, 0, W, H);
         // Faint contour lines from warped noise.
@@ -61,7 +91,7 @@ export function createCitySketch(city, identity, rng) {
         g.noFill();
         g.strokeWeight(0.6);
         for (let k = 0; k < 7; k++) {
-            g.stroke(34, 211, 238, 10 + k * 1.5);
+            g.stroke(br, bg, bb, 10 + k * 1.5);
             g.beginShape();
             for (let x = 0; x <= W; x += 8) {
                 const n = p.noise(x * 0.0025, k * 0.4);
@@ -100,13 +130,13 @@ export function createCitySketch(city, identity, rng) {
         p.fill(14, 18, 22);
         p.quad(origin.x - 14, origin.y + 6, frontRight.x + 14, origin.y + 6, frontRight.x + 14 + 7 * depthX, back.y - depthY - 4, back.x - 14 + depthX, back.y - depthY - 4);
         // Street grid, one line per weekday row.
-        p.stroke(34, 211, 238, 18);
+        p.stroke(br, bg, bb, 18);
         p.strokeWeight(0.6);
         for (let d = 0; d <= 7; d++) {
             const y = origin.y - d * depthY + 2;
             p.line(origin.x + d * depthX - 8, y, frontRight.x + d * depthX + 8, y);
         }
-        p.stroke(34, 211, 238, 60);
+        p.stroke(br, bg, bb, 60);
         p.strokeWeight(1);
         p.line(origin.x - 14, origin.y + 6, frontRight.x + 14, origin.y + 6);
     }
@@ -117,26 +147,26 @@ export function createCitySketch(city, identity, rng) {
         const hit = Math.max(0, 1 - Math.abs(x + w / 2 - scanX) / 70);
         if (h === 0) {
             p.noStroke();
-            p.fill(34, 211, 238, 10 + hit * 40);
+            p.fill(br, bg, bb, 10 + hit * 40);
             p.quad(x, y, x + w, y, x + w + dx, y - dy, x + dx, y - dy);
             return;
         }
         const lum = 0.55 + b.t * 0.45;
         const [fr, fg, fb] = PALETTE.front;
         const [sr, sg, sb] = PALETTE.side;
-        const [tr, tg, tb] = PALETTE.top;
+        const [tr, tg, tb] = deep;
         p.noStroke();
         p.fill(sr + hit * 10, sg + hit * 30, sb + hit * 38);
         p.quad(x + w, y, x + w + dx, y - dy, x + w + dx, y - dy - h, x + w, y - h);
-        p.fill(fr * lum + hit * 12, fg * lum + hit * 40, fb * lum + hit * 50);
+        p.fill(fr * lum + hit * scan[0], fg * lum + hit * scan[1], fb * lum + hit * scan[2]);
         p.rect(x, y - h, w, h);
         p.fill(tr + hit * 60, tg + hit * 80, tb + hit * 60, Math.min(255, 90 + b.t * 165 + hit * 80));
         p.quad(x, y - h, x + w, y - h, x + w + dx, y - h - dy, x + dx, y - h - dy);
-        p.stroke(165, 243, 252, 40 + b.t * 120 + hit * 90);
+        p.stroke(pr, pg, pb, 40 + b.t * 120 + hit * 90);
         p.strokeWeight(0.8);
         p.line(x, y - h, x + w, y - h);
         p.noStroke();
-        const [wr, wg, wb] = PALETTE.window;
+        const [wr, wg, wb] = pale;
         for (const win of b.windows) {
             const on = win.cycles ? wave(phase, win.cycles, win.off) > 0.5 : win.lit;
             const a = on ? 150 + b.t * 80 : 18;
@@ -167,7 +197,7 @@ export function createCitySketch(city, identity, rng) {
         const c1x = p0.x + (p3.x - p0.x) * 0.25;
         const c2x = p0.x + (p3.x - p0.x) * 0.75;
         p.noFill();
-        p.stroke(34, 211, 238, 34);
+        p.stroke(br, bg, bb, 34);
         p.strokeWeight(0.8);
         p.bezier(p0.x, p0.y, c1x, top, c2x, top, p3.x, p3.y);
         // A packet travels the arc once per loop, trailed by fading dots.
@@ -179,7 +209,7 @@ export function createCitySketch(city, identity, rng) {
             const s = Math.max(0, eased - k * 0.012);
             const px = p.bezierPoint(p0.x, c1x, c2x, p3.x, s);
             const py = p.bezierPoint(p0.y, top, top, p3.y, s);
-            p.fill(165, 243, 252, (k === 0 ? 255 : 110 - k * 14) * fade);
+            p.fill(pr, pg, pb, (k === 0 ? 255 : 110 - k * 14) * fade);
             p.circle(px, py, k === 0 ? 4 : 3 - k * 0.3);
         }
     }
@@ -189,12 +219,12 @@ export function createCitySketch(city, identity, rng) {
         const ctx = p.drawingContext;
         ctx.globalAlpha = k;
         const g = ctx.createLinearGradient(scanX - 60, 0, scanX + 60, 0);
-        g.addColorStop(0, 'rgba(34,211,238,0)');
-        g.addColorStop(0.5, 'rgba(34,211,238,0.07)');
-        g.addColorStop(1, 'rgba(34,211,238,0)');
+        g.addColorStop(0, rgba(bright, 0));
+        g.addColorStop(0.5, rgba(bright, 0.07));
+        g.addColorStop(1, rgba(bright, 0));
         ctx.fillStyle = g;
         ctx.fillRect(scanX - 60, 150, 120, baseY - 140);
-        p.stroke(165, 243, 252, 70);
+        p.stroke(pr, pg, pb, 70);
         p.strokeWeight(1);
         p.line(scanX, baseY + 8, scanX, baseY + 16);
         ctx.globalAlpha = 1;
@@ -221,23 +251,23 @@ export function createCitySketch(city, identity, rng) {
         p.textFont(MONO);
         p.textStyle(p.NORMAL);
         p.textSize(13);
-        p.fill(PALETTE.cyan);
+        p.fill(br, bg, bb);
         p.text(PROMPT, x, 58);
         if (wave(phase, 3, 0) > 0.5) {
             p.rect(x + p.textWidth(PROMPT) + 4, 47, 7, 13);
         }
         p.textFont(SANS);
         p.textStyle(p.BOLD);
-        p.textSize(50);
+        p.textSize(fitted.name.size);
         ctx.letterSpacing = '3px';
         p.fill(PALETTE.ink);
-        p.text(identity.name.toUpperCase(), x, 116);
+        p.text(fitted.name.text, x, 116);
         ctx.letterSpacing = '0px';
-        if (identity.tagline) {
+        if (fitted.tagline) {
             p.textStyle(p.NORMAL);
-            p.textSize(17);
-            p.fill(PALETTE.cyan);
-            p.text(identity.tagline, x, 146);
+            p.textSize(fitted.tagline.size);
+            p.fill(br, bg, bb);
+            p.text(fitted.tagline.text, x, 146);
         }
         p.textFont(MONO);
         p.textStyle(p.NORMAL);
@@ -260,10 +290,10 @@ export function createCitySketch(city, identity, rng) {
             p.fill(PALETTE.muted);
             p.text('busiest days', x + 14, 296);
         }
-        if (identity.website) {
-            p.textSize(12);
-            p.fill(PALETTE.cyan);
-            p.text(`↗ ${displayUrl(identity.website)}`, x, 350);
+        if (fitted.website) {
+            p.textSize(fitted.website.size);
+            p.fill(br, bg, bb);
+            p.text(fitted.website.text, x, 350);
         }
     }
     return {

package/dist/styles/highlights-reel/index.js

@@ -0,0 +1,16 @@
+import { fetchHighlights, highlightsSchema } from '../../core/data/highlights.js';
+import { options } from './options.js';
+import { buildReel, FRAMES } from './reel.js';
+import { paletteOf, pinnedOf } from './palette.js';
+import { createReelSketch } from './sketch.js';
+export const highlightsReel = {
+    id: 'highlights-reel',
+    fps: 25,
+    frames: FRAMES,
+    pinned: (options) => pinnedOf(paletteOf(options)),
+    data: { name: 'highlights', schema: highlightsSchema, fetch: fetchHighlights },
+    options,
+    createSketch({ data, options, identity, rng }) {
+        return createReelSketch(buildReel(data, rng, options), identity);
+    },
+};

package/dist/styles/highlights-reel/options.js

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+export const THEMES = ['light', 'dark'];
+export const ACCENTS = ['cobalt', 'green', 'violet', 'orange', 'pink'];
+export const options = z
+    .object({
+    /** Desk, cards and type. `dark` suits profiles viewed in GitHub dark mode. */
+    theme: z.enum(THEMES).default('light'),
+    /** Bars, counting digits, prompt and links. Presets only, each contrast-checked. */
+    accent: z.enum(ACCENTS).default('cobalt'),
+})
+    .strict();

package/dist/styles/highlights-reel/palette.js

@@ -0,0 +1,68 @@
+const AMBER = [232, 163, 61];
+/**
+ * Accent presets, [light, dark]. Each passes 4.5:1 against its theme's desk,
+ * the lowest background its small type sits on (see SPEC, Highlights Reel).
+ */
+const ACCENT_VALUES = {
+    cobalt: [
+        [53, 88, 232],
+        [123, 147, 255],
+    ],
+    green: [
+        [18, 122, 66],
+        [61, 203, 127],
+    ],
+    violet: [
+        [109, 63, 214],
+        [169, 139, 255],
+    ],
+    orange: [
+        [176, 71, 22],
+        [255, 143, 87],
+    ],
+    pink: [
+        [196, 40, 94],
+        [255, 119, 168],
+    ],
+};
+const LIGHT_INK = [11, 12, 20];
+const DARK_INK = [238, 240, 246];
+const BASE = {
+    light: {
+        desk: [236, 237, 241],
+        card: [255, 255, 255],
+        plate: [242, 243, 247],
+        well: [228, 230, 236],
+        ink: LIGHT_INK,
+        soft: [102, 106, 124],
+        amber: AMBER,
+        dots: { rgb: LIGHT_INK, alpha: 0.16 },
+        marks: { rgb: LIGHT_INK, alpha: 0.15 },
+        shadow: { rgb: LIGHT_INK, alpha: 0.07 },
+        border: { rgb: LIGHT_INK, alpha: 0.09 },
+    },
+    dark: {
+        desk: [13, 15, 23],
+        card: [23, 26, 37],
+        plate: [31, 35, 49],
+        well: [38, 43, 58],
+        ink: DARK_INK,
+        soft: [140, 146, 168],
+        amber: AMBER,
+        dots: { rgb: DARK_INK, alpha: 0.1 },
+        marks: { rgb: DARK_INK, alpha: 0.14 },
+        shadow: { rgb: [0, 0, 0], alpha: 0.35 },
+        border: { rgb: DARK_INK, alpha: 0.08 },
+    },
+};
+export function paletteOf(options) {
+    const base = BASE[options.theme];
+    const [light, dark] = ACCENT_VALUES[options.accent];
+    return options.theme === 'light'
+        ? { ...base, accent: light, onAccent: [255, 255, 255] }
+        : { ...base, accent: dark, onAccent: base.desk };
+}
+/** Flat colors the encoder keeps exact and undithered. */
+export function pinnedOf(palette) {
+    return [palette.desk, palette.card, palette.plate, palette.well, palette.accent, palette.ink];
+}

package/dist/styles/highlights-reel/reel.js

@@ -0,0 +1,346 @@
+import { paletteOf } from './palette.js';
+/**
+ * Where the reel lives: four cards on one desk, filmed by one camera.
+ *
+ * The cards sit in a serpentine (row one left to right, row two right to left),
+ * just far enough apart that a neighbour is off frame (or under the identity
+ * band) at the holding zoom, so the pull-back at the end reads as one tight,
+ * laid-out sheet rather than a queue. Everything here is a pure function of the
+ * data; the sketch only draws.
+ */
+export const FRAMES = 425;
+export const LAYOUT = {
+    width: 1280,
+    height: 400,
+    /** Holding zoom. */
+    z: 0.62,
+    card: { w: 1000, h: 500, r: 18 },
+    /** Station pitch: a neighbour clears the frame, or sits under the identity band. */
+    spacing: { x: 1240, y: 680 },
+    /** At the hold the card sits right of centre, clearing the identity band. */
+    offX: 374,
+    /** The one push-in: twice the holding zoom, landing right of centre on the busiest week. */
+    pushZ: 1.24,
+    pushOffX: 169,
+    pushUpY: 40,
+    /**
+     * The top-repo card holds a grid of pseudo repo cards, drawn at `scale`, the
+     * top repo first. The second push-in lands on it at `z / scale`, so the pseudo
+     * card fills the frame exactly as a whole card does at the hold.
+     */
+    mini: { scale: 0.2, x: 520, y: 84, gap: 16, cols: 2 },
+    /** Moves longer than this world distance dip their zoom; shorter ones stay flat. */
+    travel: 1200,
+    /** Weekly strip, card-local. */
+    strip: { x: 70, baseline: 440, height: 165 },
+    /** Wide-shot frame band, screen space: right of the identity text. */
+    band: { left: 490, right: 1262, top: 14, bottom: 386 },
+};
+/** Segment weights, in frames at four cards; the plan normalizes them to `FRAMES`. */
+const WEIGHTS = {
+    hold: 52,
+    travel: 20,
+    pushTravel: 20,
+    pushHold: 46,
+    focusTravel: 20,
+    focusHold: 46,
+    wideHold: 34,
+    return: 24,
+};
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** Languages without a linguist color: the theme's soft grey. */
+const NEUTRAL = { light: [102, 106, 124], dark: [140, 146, 168] };
+/** Cards in play order. */
+const CARD_ORDER = ['contributions', 'top_repo', 'pull_requests', 'languages'];
+/** Longest run of consecutive days with at least one contribution. */
+export function longestStreak(contributions) {
+    let best = 0;
+    let run = 0;
+    for (const week of contributions.weeks) {
+        for (const day of week) {
+            run = day.count > 0 ? run + 1 : 0;
+            if (run > best)
+                best = run;
+        }
+    }
+    return best;
+}
+/** "2026-03-28" .. "2026-04-03" -> "Mar 28 to Apr 3". */
+function dateRange(from, to) {
+    const [, fm, fd] = from.split('-').map(Number);
+    const [, tm, td] = to.split('-').map(Number);
+    const start = `${MONTHS[fm - 1]} ${fd}`;
+    return fm === tm ? `${start} to ${td}` : `${start} to ${MONTHS[tm - 1]} ${td}`;
+}
+function busiestWeek(contributions) {
+    let index = -1;
+    let total = 0;
+    contributions.weeks.forEach((week, i) => {
+        const sum = week.reduce((s, d) => s + d.count, 0);
+        if (sum > total) {
+            total = sum;
+            index = i;
+        }
+    });
+    if (index < 0)
+        return null;
+    const week = contributions.weeks[index];
+    return {
+        index,
+        total,
+        days: week.map((d) => d.count),
+        label: dateRange(week[0].date, week[week.length - 1].date),
+    };
+}
+/**
+ * Linguist colors include pale and dark ones: darken for the white card, lighten
+ * for the dark one, so every dot reads on its card.
+ */
+export function languageColor(hex, theme = 'light') {
+    if (!hex)
+        return NEUTRAL[theme];
+    const n = Number.parseInt(hex.slice(1), 16);
+    const [h, s, l] = rgbToHsl([(n >> 16) & 255, (n >> 8) & 255, n & 255]);
+    const lightness = theme === 'light' ? Math.min(l, 0.55) : Math.max(l, 0.52);
+    return hslToRgb(h, Math.min(s, 0.85), lightness);
+}
+/** Serpentine desk: row one left to right, row two right to left. */
+export function stationOf(index) {
+    const row = Math.floor(index / 2);
+    const col = row % 2 === 0 ? index % 2 : 1 - (index % 2);
+    return { x: col * LAYOUT.spacing.x, y: row * LAYOUT.spacing.y };
+}
+function holdPose(index) {
+    const s = stationOf(index);
+    return { x: s.x - LAYOUT.offX, y: s.y, z: LAYOUT.z };
+}
+/** Pulls back far enough to hold every card at once, inside the identity band. */
+function widePose(count) {
+    const { w, h } = LAYOUT.card;
+    let left = Infinity;
+    let right = -Infinity;
+    let top = Infinity;
+    let bottom = -Infinity;
+    for (let i = 0; i < count; i++) {
+        const s = stationOf(i);
+        left = Math.min(left, s.x - w / 2);
+        right = Math.max(right, s.x + w / 2);
+        top = Math.min(top, s.y - h / 2);
+        bottom = Math.max(bottom, s.y + h / 2);
+    }
+    const pad = 40;
+    left -= pad;
+    right += pad;
+    top -= pad;
+    bottom += pad;
+    const z = Math.min((LAYOUT.band.right - LAYOUT.band.left) / (right - left), (LAYOUT.band.bottom - LAYOUT.band.top) / (bottom - top));
+    const bandCx = (LAYOUT.band.left + LAYOUT.band.right) / 2;
+    return {
+        x: (left + right) / 2 - (bandCx - LAYOUT.width / 2) / z,
+        y: (top + bottom) / 2,
+        z,
+    };
+}
+/** Card-local top-left corner of pseudo card `k` on the top-repo card. */
+export function plateAt(k) {
+    const { scale, x, y, gap, cols } = LAYOUT.mini;
+    const w = LAYOUT.card.w * scale;
+    const h = LAYOUT.card.h * scale;
+    return { x: x + (k % cols) * (w + gap), y: y + Math.floor(k / cols) * (h + gap) };
+}
+/** Where the second push-in lands: the top repo's pseudo card, framed like a hold. */
+function focusPoseOf(index) {
+    const s = stationOf(index);
+    const { scale } = LAYOUT.mini;
+    const plate = plateAt(0);
+    const z = LAYOUT.z / scale;
+    return {
+        x: s.x -
+            LAYOUT.card.w / 2 +
+            plate.x +
+            (LAYOUT.card.w * scale) / 2 -
+            (LAYOUT.offX * LAYOUT.z) / z,
+        y: s.y - LAYOUT.card.h / 2 + plate.y + (LAYOUT.card.h * scale) / 2,
+        z,
+    };
+}
+/**
+ * Where the push-in lands: the busiest week's opened column, framed right of
+ * centre. Null when there is no busiest week (an empty year), so no push.
+ */
+function pushPoseOf(card, weekCount) {
+    if (card.busiest === null)
+        return null;
+    const pitch = (LAYOUT.card.w - 2 * LAYOUT.strip.x) / weekCount;
+    const s = stationOf(0);
+    const localX = LAYOUT.strip.x + (card.busiest + 0.5) * pitch;
+    const localY = LAYOUT.strip.baseline - LAYOUT.strip.height / 2;
+    return {
+        x: s.x - LAYOUT.card.w / 2 + localX - LAYOUT.pushOffX,
+        y: s.y - LAYOUT.card.h / 2 + localY - LAYOUT.pushUpY,
+        z: LAYOUT.pushZ,
+    };
+}
+export function buildPlan(cards, push) {
+    const hold = (i) => holdPose(i);
+    if (cards.length === 1 && !push) {
+        // The empty state: one card, drift only.
+        return {
+            keys: [
+                { frame: 0, ...hold(0) },
+                { frame: FRAMES, ...hold(0) },
+            ],
+            builds: [{ start: 0, end: 0 }],
+            focus: { start: 0, end: 0 },
+        };
+    }
+    const segs = [{ weight: WEIGHTS.hold, pose: hold(0) }];
+    if (push) {
+        segs.push({ weight: WEIGHTS.pushTravel, pose: push });
+        segs.push({ weight: WEIGHTS.pushHold, pose: push });
+    }
+    for (let i = 1; i < cards.length; i++) {
+        segs.push({ weight: WEIGHTS.travel, pose: hold(i), build: i });
+        segs.push({ weight: WEIGHTS.hold, pose: hold(i) });
+        if (cards[i].kind === 'top_repo') {
+            // Total stars first, then into the top repo's pseudo card.
+            const focus = focusPoseOf(i);
+            segs.push({ weight: WEIGHTS.focusTravel, pose: focus, focus: true });
+            segs.push({ weight: WEIGHTS.focusHold, pose: focus });
+        }
+    }
+    if (cards.length >= 2) {
+        const wide = widePose(cards.length);
+        segs.push({ weight: WEIGHTS.travel, pose: wide });
+        segs.push({ weight: WEIGHTS.wideHold, pose: wide });
+    }
+    // Back into card 0: its pose is the loop's first key, so the seam closes.
+    segs.push({ weight: WEIGHTS.return, pose: hold(0) });
+    const total = segs.reduce((s, g) => s + g.weight, 0);
+    const scale = FRAMES / total;
+    const keys = [{ frame: 0, ...hold(0) }];
+    const builds = cards.map(() => ({ start: 0, end: 0 }));
+    let focus = { start: 0, end: 0 };
+    let frame = 0;
+    for (const seg of segs) {
+        const start = frame;
+        frame += seg.weight * scale;
+        const end = Math.min(FRAMES, Math.round(frame));
+        keys.push({ frame: end, ...seg.pose });
+        if (seg.build !== undefined) {
+            // A card builds while the camera arrives, and settles shortly after.
+            builds[seg.build] = {
+                start,
+                end: Math.min(FRAMES, end + Math.round(WEIGHTS.hold * scale * 0.4)),
+            };
+        }
+        if (seg.focus) {
+            // The top repo's details build as the camera lands in its pseudo card.
+            focus = {
+                start: Math.round(start + (end - start) * 0.5),
+                end: Math.min(FRAMES, end + Math.round(WEIGHTS.focusHold * scale * 0.4)),
+            };
+        }
+    }
+    keys[keys.length - 1].frame = FRAMES;
+    return { keys, builds, focus };
+}
+export function buildReel(data, _rng, options) {
+    const contributions = data.contributions;
+    const busiest = busiestWeek(contributions);
+    const streak = longestStreak(contributions);
+    const cards = [];
+    let push = null;
+    const theme = options.theme;
+    for (const id of CARD_ORDER) {
+        switch (id) {
+            case 'contributions': {
+                // The one card that is always filmed, even at zero.
+                const card = {
+                    kind: 'contributions',
+                    total: contributions.total,
+                    streak: streak > 0 ? streak : null,
+                    weeks: contributions.weeks.map((w) => w.reduce((s, d) => s + d.count, 0)),
+                    busiest: busiest?.index ?? null,
+                    busiestDays: busiest?.days ?? [],
+                    busiestLabel: busiest?.label ?? '',
+                };
+                push = pushPoseOf(card, card.weeks.length);
+                cards.push(card);
+                break;
+            }
+            case 'top_repo':
+                if (data.topRepo) {
+                    cards.push({
+                        kind: 'top_repo',
+                        totalStars: data.totalStars,
+                        plates: data.starredRepos.map((r) => ({
+                            name: r.name,
+                            stars: r.stars,
+                            color: languageColor(r.color, theme),
+                        })),
+                        name: data.topRepo.name,
+                        stars: data.topRepo.stars,
+                        forks: data.topRepo.forks,
+                        language: data.topRepo.language
+                            ? {
+                                name: data.topRepo.language.name,
+                                color: languageColor(data.topRepo.language.color, theme),
+                            }
+                            : null,
+                    });
+                }
+                break;
+            case 'pull_requests':
+                if (data.mergedPullRequests > 0) {
+                    cards.push({ kind: 'pull_requests', merged: data.mergedPullRequests });
+                }
+                break;
+            case 'languages':
+                if (data.languages.length > 0) {
+                    cards.push({
+                        kind: 'languages',
+                        languages: data.languages.map((l) => ({
+                            name: l.name,
+                            color: languageColor(l.color, theme),
+                            count: l.count,
+                        })),
+                    });
+                }
+                break;
+        }
+    }
+    return { cards, plan: buildPlan(cards, push), palette: paletteOf(options) };
+}
+function rgbToHsl([r, g, b]) {
+    const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, l];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === rn
+        ? (gn - bn) / d + (gn < bn ? 6 : 0)
+        : max === gn
+            ? (bn - rn) / d + 2
+            : (rn - gn) / d + 4;
+    return [h / 6, s, l];
+}
+function hslToRgb(h, s, l) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const channel = (t) => {
+        const k = (t + 1) % 1;
+        const v = k < 1 / 6
+            ? p + (q - p) * 6 * k
+            : k < 1 / 2
+                ? q
+                : k < 2 / 3
+                    ? p + (q - p) * (2 / 3 - k) * 6
+                    : p;
+        return Math.round(v * 255);
+    };
+    return [channel(h + 1 / 3), channel(h), channel(h - 1 / 3)];
+}