headreel 1.3.0 → 1.4.0

package/README.md

@@ -120,6 +120,18 @@ Set the style with `style: <name>` in the Action, or `--style <name>` in the com
 | `theme`  | `light`  | `light` or `dark`. Use `dark` if your profile is mostly viewed in GitHub dark mode.    |
 | `accent` | `cobalt` | Color of the bars, numbers and links: `cobalt`, `green`, `violet`, `orange` or `pink`. |
 
+### Now Playing
+
+`now-playing`: a cassette deck playing the repository you committed to most in the last 30 days. The label names its language, your commit messages on it scroll across the deck's display as lyrics, and the level meter shows the month day by day. When nothing was committed in the last 30 days, the deck shows the repository you pushed to last as `LAST PLAYED`.
+
+![Now Playing banner](https://raw.githubusercontent.com/arifszn/headreel/main/docs/samples/now-playing.gif)
+
+| Option    | Default | Description                                                                                         |
+| --------- | ------- | --------------------------------------------------------------------------------------------------- |
+| `theme`   | `dark`  | `dark` (graphite deck) or `light` (silver deck).                                                    |
+| `accent`  | `cyan`  | Display color, meter and links: `cyan`, `green` or `orange`.                                        |
+| `exclude` | empty   | Comma-separated repositories never picked, for example your profile repository: `exclude: octocat`. |
+
 ### Repo Galaxy
 
 `repo-galaxy`: your most starred repositories orbit a sun. A bigger planet has more stars, and its color is the repository's main language. Repositories you pushed to recently orbit closer to the sun.

package/assets/fonts/OFL-Caveat.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/cli/run.js

@@ -24,7 +24,7 @@ async function render(settings, io) {
         throw new Error(`Output must be a .gif file, got "${settings.out}".`);
     }
     // Fail on bad options before any API call.
-    parseOptions(style, settings.options);
+    const options = parseOptions(style, settings.options);
     let login;
     let name;
     let data;
@@ -38,7 +38,7 @@ async function render(settings, io) {
         const user = settings.user;
         const [profile, fetched] = await Promise.all([
             fetchProfile(client, user),
-            style.data.fetch(client, user, io.now()),
+            style.data.fetch(client, user, io.now(), options),
         ]);
         ({ login, name } = profile);
         data = fetched;

package/dist/core/data/now-playing.js

@@ -0,0 +1,282 @@
+import { z } from 'zod';
+// The tape is the user's most active public repository of the last 30 days.
+// Two queries when something is playing; a third one finds the fallback.
+// Query 1: every repository the user committed to in the window, with its
+// daily commit counts. The user's id feeds the author filter of query 2.
+const QUERY = /* GraphQL */ `
+  query NowPlaying($login: String!, $from: DateTime!, $to: DateTime!) {
+    user(login: $login) {
+      id
+      contributionsCollection(from: $from, to: $to) {
+        commitContributionsByRepository(maxRepositories: 25) {
+          repository {
+            name
+            owner {
+              login
+            }
+            isPrivate
+            primaryLanguage {
+              name
+              color
+            }
+          }
+          contributions(first: 31) {
+            totalCount
+            nodes {
+              occurredAt
+              commitCount
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+// Query 2: the playing repository's default-branch commits authored by the
+// user since the window started. GitHub counts commit contributions on the
+// default branch (or gh-pages) only, the same source as query 1.
+const COMMIT_HISTORY = /* GraphQL */ `
+  edges {
+    node {
+      messageHeadline
+      parents {
+        totalCount
+      }
+    }
+  }
+`;
+const COMMITS_QUERY = /* GraphQL */ `
+  query NowPlayingCommits($owner: String!, $name: String!, $id: ID!, $since: GitTimestamp!) {
+    repository(owner: $owner, name: $name) {
+      defaultBranchRef {
+        target {
+          ... on Commit {
+            history(author: { id: $id }, since: $since, first: 30) {
+              ${COMMIT_HISTORY}
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+// Fallback: the most recently pushed owned public repository and the user's
+// latest commits on it, without `since`. The history rides on every node, so
+// one query covers whichever repository the picker lands on.
+const FALLBACK_QUERY = /* GraphQL */ `
+  query NowPlayingFallback($login: String!, $id: ID!, $first: Int!) {
+    user(login: $login) {
+      repositories(
+        first: $first
+        ownerAffiliations: OWNER
+        privacy: PUBLIC
+        isFork: false
+        orderBy: { field: PUSHED_AT, direction: DESC }
+      ) {
+        nodes {
+          name
+          owner {
+            login
+          }
+          primaryLanguage {
+            name
+            color
+          }
+          defaultBranchRef {
+            target {
+              ... on Commit {
+                history(author: { id: $id }, first: 30) {
+                  ${COMMIT_HISTORY}
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+export const WINDOW_DAYS = 30;
+export const statusSchema = z.enum(['playing', 'last-played', 'empty']);
+const languageSchema = z
+    .object({
+    name: z.string().min(1),
+    /** Linguist color; null when the repo has no language or color. */
+    color: z
+        .string()
+        .regex(/^#[0-9a-fA-F]{6}$/)
+        .nullable(),
+})
+    .nullable();
+export const nowPlayingSchema = z.object({
+    /** Fetch date, YYYY-MM-DD (UTC). */
+    asOf: z.iso.date(),
+    status: statusSchema,
+    repo: z
+        .object({
+        /** Not always the user: contributions to another user's project show as owner/name. */
+        owner: z.string().min(1),
+        name: z.string().min(1),
+        language: languageSchema,
+    })
+        .nullable(),
+    /** The playing repo's commits in the window; 0 on fallback. */
+    commits: z.number().int().min(0),
+    /** Its part of all public commits in the window, 0..1. */
+    share: z.number().min(0).max(1),
+    /** The playing repo's daily commits in the window, oldest first. */
+    days: z.array(z.number().int().min(0)).length(WINDOW_DAYS),
+    /** The repo's default-branch commit headlines, newest first, merges dropped. */
+    lyrics: z.array(z.string().min(1)).max(8),
+});
+const DAY_MS = 86_400_000;
+/**
+ * The 30 days ending on `now` (UTC): `from` is 29 days back at midnight, `to`
+ * is today, matching the run date the banner is rendered on.
+ */
+export function nowPlayingWindow(now) {
+    const today = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+    return {
+        from: new Date(today - (WINDOW_DAYS - 1) * DAY_MS).toISOString().slice(0, 10),
+        to: new Date(today).toISOString().slice(0, 10),
+        asOf: new Date(today).toISOString().slice(0, 10),
+    };
+}
+/**
+ * The daily commit counts of one repository across the window, oldest first.
+ * `occurredAt` days outside the window are dropped.
+ */
+export function windowDays(contributions, from, to) {
+    const counts = new Map();
+    for (const node of contributions.nodes ?? []) {
+        counts.set(node.occurredAt.slice(0, 10), (counts.get(node.occurredAt.slice(0, 10)) ?? 0) + node.commitCount);
+    }
+    const days = [];
+    for (let t = Date.parse(`${from}T00:00:00Z`); t <= Date.parse(`${to}T00:00:00Z`); t += DAY_MS) {
+        days.push(counts.get(new Date(t).toISOString().slice(0, 10)) ?? 0);
+    }
+    return days;
+}
+/** Index of the last day with a commit, -1 when the repository had none. */
+function lastActiveIndex(days) {
+    for (let i = days.length - 1; i >= 0; i--) {
+        if (days[i] > 0)
+            return i;
+    }
+    return -1;
+}
+function excludedBy(exclude) {
+    const names = new Set(exclude.map((n) => n.trim().toLowerCase()));
+    return (owner, name) => names.has(name.toLowerCase()) || names.has(`${owner}/${name}`.toLowerCase());
+}
+/**
+ * Drops excluded names, then picks the playing one: most commits in the
+ * window, ties to the latest active day, then name.
+ */
+export function pickRepo(candidates, exclude = []) {
+    const isExcluded = excludedBy(exclude);
+    let best = null;
+    for (const c of candidates) {
+        if (isExcluded(c.owner, c.name))
+            continue;
+        if (!best || better(c, best))
+            best = c;
+    }
+    return best;
+}
+function better(a, b) {
+    if (a.commits !== b.commits)
+        return a.commits > b.commits;
+    const ai = lastActiveIndex(a.days);
+    const bi = lastActiveIndex(b.days);
+    if (ai !== bi)
+        return ai > bi;
+    return a.name.localeCompare(b.name) < 0;
+}
+/** Merges (more than one parent) and empty headlines never become lyrics. */
+export function lyricsFromHistory(nodes) {
+    return nodes
+        .filter((n) => n.parents.totalCount <= 1 && n.messageHeadline.trim().length > 0)
+        .map((n) => n.messageHeadline.trim())
+        .slice(0, 8);
+}
+const ZEROS = Array.from({ length: WINDOW_DAYS }).fill(0);
+export async function fetchNowPlaying(client, login, now, options = {}) {
+    const { from, to, asOf } = nowPlayingWindow(now);
+    const since = `${from}T00:00:00Z`;
+    const { user } = await client(QUERY, {
+        login,
+        from: since,
+        to: `${to}T23:59:59Z`,
+    });
+    // Private repositories are dropped before anything is picked: repo names
+    // and commit messages of private repos never reach the banner.
+    const candidates = user.contributionsCollection.commitContributionsByRepository
+        .filter((entry) => !entry.repository.isPrivate)
+        .map((entry) => ({
+        owner: entry.repository.owner.login,
+        name: entry.repository.name,
+        commits: entry.contributions.totalCount,
+        days: windowDays(entry.contributions, from, to),
+        language: entry.repository.primaryLanguage
+            ? {
+                name: entry.repository.primaryLanguage.name,
+                color: entry.repository.primaryLanguage.color,
+            }
+            : null,
+    }));
+    const picked = pickRepo(candidates, options.exclude ?? []);
+    if (picked) {
+        const all = candidates.reduce((sum, c) => sum + c.commits, 0);
+        const { repository } = await client(COMMITS_QUERY, {
+            owner: picked.owner,
+            name: picked.name,
+            id: user.id,
+            since,
+        });
+        return {
+            asOf,
+            status: 'playing',
+            repo: { owner: picked.owner, name: picked.name, language: picked.language },
+            commits: picked.commits,
+            share: all > 0 ? picked.commits / all : 0,
+            days: picked.days,
+            lyrics: lyricsFromHistory(repository?.defaultBranchRef?.target?.history?.edges.map((e) => e.node) ?? []),
+        };
+    }
+    // Nothing playing: the most recently pushed owned public repository, whose
+    // latest default-branch commits become the lyrics without a window.
+    const fallback = await client(FALLBACK_QUERY, {
+        login,
+        id: user.id,
+        first: 25,
+    });
+    const isExcluded = excludedBy(options.exclude ?? []);
+    const repo = fallback.user.repositories.nodes.find((n) => !isExcluded(n.owner.login, n.name));
+    if (!repo) {
+        return {
+            asOf,
+            status: 'empty',
+            repo: null,
+            commits: 0,
+            share: 0,
+            days: [...ZEROS],
+            lyrics: [],
+        };
+    }
+    return {
+        asOf,
+        status: 'last-played',
+        repo: {
+            owner: repo.owner.login,
+            name: repo.name,
+            language: repo.primaryLanguage
+                ? { name: repo.primaryLanguage.name, color: repo.primaryLanguage.color }
+                : null,
+        },
+        commits: 0,
+        share: 0,
+        days: [...ZEROS],
+        lyrics: lyricsFromHistory(repo.defaultBranchRef?.target?.history?.edges.map((e) => e.node) ?? []),
+    };
+}

package/dist/core/fonts.js

@@ -5,6 +5,9 @@ const FONT_FILES = [
     'SpaceGrotesk-Medium.ttf',
     'SpaceGrotesk-Bold.ttf',
     'JetBrainsMono-Regular.ttf',
+    // Handwriting face for Now Playing's cassette label. Variable font: Skia
+    // registers the default 400 instance and ignores other weights.
+    'Caveat.ttf',
 ];
 // Resolves from both src/core (tsx, vitest) and dist/core (published build).
 const FONT_DIR = new URL('../../assets/fonts/', import.meta.url);

package/dist/styles/index.js

@@ -1,9 +1,11 @@
 import { contributionCity } from './contribution-city/index.js';
 import { highlightsReel } from './highlights-reel/index.js';
+import { nowPlaying } from './now-playing/index.js';
 import { repoGalaxy } from './repo-galaxy/index.js';
 /** Built-in styles, keyed by id. */
 export const styles = {
     [contributionCity.id]: contributionCity,
     [highlightsReel.id]: highlightsReel,
+    [nowPlaying.id]: nowPlaying,
     [repoGalaxy.id]: repoGalaxy,
 };

package/dist/styles/now-playing/deck.js

@@ -0,0 +1,105 @@
+import { paletteOf } from './palette.js';
+/** 8 lyric lines at 2 s each, at 25 fps. */
+export const FRAMES = 400;
+/** Cassette hub and the fullest tape pack, px. */
+export const HUB_R = 26;
+export const PACK_MAX = 40;
+const COUNTER_MAX = 999;
+function hexToRgb(hex) {
+    const n = Number.parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+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);
+    let h;
+    if (max === rn)
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+    else if (max === gn)
+        h = ((bn - rn) / d + 2) / 6;
+    else
+        h = ((rn - gn) / d + 4) / 6;
+    return [h, s, l];
+}
+function hslToRgb(h, s, l) {
+    if (s === 0) {
+        const v = Math.round(l * 255);
+        return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const channel = (t) => {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    return [
+        Math.round(channel(h + 1 / 3) * 255),
+        Math.round(channel(h) * 255),
+        Math.round(channel(h - 1 / 3) * 255),
+    ];
+}
+/**
+ * The band's caption is small white type, so the band is held to a darkness
+ * pale linguist colors reach after adjustment and dark ones keep their hue.
+ */
+export function languageBandColor(hex) {
+    if (!hex)
+        return [90, 96, 110];
+    const [h, s, l] = rgbToHsl(hexToRgb(hex));
+    return hslToRgb(h, Math.min(s, 0.8), Math.min(Math.max(l, 0.3), 0.45));
+}
+/** Tape pack radius for a share of the tape, by area. */
+export function packRadius(share) {
+    const s = Math.min(1, Math.max(0, share));
+    return Math.sqrt(HUB_R ** 2 + s * (PACK_MAX ** 2 - HUB_R ** 2));
+}
+function reel(share, phase) {
+    const radius = packRadius(share);
+    return { radius, revs: Math.max(1, Math.round(80 / radius)), phase };
+}
+/** Meter heights: sqrt scaling, so a quiet day next to a busy one still shows. */
+export function meterBars(days) {
+    const max = Math.max(1, ...days);
+    return days.map((c) => (c > 0 ? Math.sqrt(c / max) : 0));
+}
+export function buildDeck(data, options, rng) {
+    const brush = [];
+    for (let i = 0; i < 90; i++) {
+        brush.push({
+            y: rng(),
+            x0: rng() * 0.6,
+            x1: 0.4 + rng() * 0.6,
+            alpha: 0.03 + rng() * 0.03,
+        });
+    }
+    return {
+        palette: paletteOf(options),
+        status: data.status,
+        repo: data.repo ? { owner: data.repo.owner, name: data.repo.name } : null,
+        bandColor: languageBandColor(data.repo?.language?.color),
+        languageName: data.repo?.language?.name ?? null,
+        counter: Math.min(COUNTER_MAX, data.commits),
+        bars: meterBars(data.days),
+        lyrics: data.lyrics,
+        takeUp: reel(data.share, rng()),
+        supply: reel(1 - data.share, rng()),
+        brush,
+        screws: [rng() * Math.PI, rng() * Math.PI, rng() * Math.PI, rng() * Math.PI],
+        labelTilt: (rng() - 0.5) * 0.04,
+    };
+}

package/dist/styles/now-playing/index.js

@@ -0,0 +1,16 @@
+import { fetchNowPlaying, nowPlayingSchema } from '../../core/data/now-playing.js';
+import { buildDeck, FRAMES } from './deck.js';
+import { options } from './options.js';
+import { paletteOf, pinnedOf } from './palette.js';
+import { createDeckSketch } from './sketch.js';
+export const nowPlaying = {
+    id: 'now-playing',
+    fps: 25,
+    frames: FRAMES,
+    pinned: (options) => pinnedOf(paletteOf(options)),
+    data: { name: 'nowplaying', schema: nowPlayingSchema, fetch: fetchNowPlaying },
+    options,
+    createSketch({ data, options, identity, rng }) {
+        return createDeckSketch(buildDeck(data, options, rng), identity);
+    },
+};

package/dist/styles/now-playing/options.js

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+export const THEMES = ['dark', 'light'];
+export const ACCENTS = ['cyan', 'green', 'orange'];
+export const options = z
+    .object({
+    /** The deck and the room: graphite on dark, or a silver deck on light. */
+    theme: z.enum(THEMES).default('dark'),
+    /** Display phosphor, level meter, play LED, prompt and links. Real VFD colors only. */
+    accent: z.enum(ACCENTS).default('cyan'),
+    /** Comma-separated repositories never picked, e.g. the profile repo itself. */
+    exclude: z
+        .string()
+        .default('')
+        .transform((v) => v
+        .split(',')
+        .map((n) => n.trim())
+        .filter(Boolean)),
+})
+    .strict();

package/dist/styles/now-playing/palette.js

@@ -0,0 +1,69 @@
+/**
+ * Accent presets: the three colors real VFDs came in. The phosphor value
+ * passes 4.5:1 on the display glass; the light theme's darker value passes
+ * 4.5:1 on its room (both asserted by a test).
+ */
+export const ACCENT_VALUES = {
+    cyan: [34, 211, 238],
+    green: [52, 211, 153],
+    orange: [251, 146, 60],
+};
+/** Tailwind 700 of each accent (orange 800: 700 misses 4.5:1), for type on the light room. */
+const LIGHT_ACCENT_VALUES = {
+    cyan: [14, 116, 144],
+    green: [4, 120, 87],
+    orange: [154, 52, 18],
+};
+const CASSETTE = {
+    shell: [46, 44, 41],
+    tape: [24, 19, 17],
+    paper: [239, 230, 210],
+    ink: [31, 29, 26],
+    glass: [7, 16, 15],
+    amber: [255, 181, 71],
+    red: [255, 77, 61],
+};
+const BASE = {
+    dark: {
+        ...CASSETTE,
+        bg: [16, 17, 20],
+        vignette: 0.3,
+        faceplate: [36, 38, 43],
+        bevel: [58, 61, 68],
+        keyTop: [58, 61, 68],
+        keyRim: [255, 255, 255],
+        screw: [22, 23, 26],
+        plateInk: [143, 147, 156],
+        identityInk: [242, 239, 232],
+        identityMuted: [143, 147, 156],
+    },
+    // A silver deck, as 1980s hi-fi came in. The window and display stay dark.
+    light: {
+        ...CASSETTE,
+        bg: [236, 237, 241],
+        vignette: 0.06,
+        faceplate: [204, 207, 212],
+        bevel: [246, 247, 249],
+        keyTop: [226, 228, 232],
+        keyRim: [255, 255, 255],
+        screw: [120, 124, 132],
+        plateInk: [70, 74, 82],
+        identityInk: [17, 18, 22],
+        identityMuted: [92, 96, 106],
+    },
+};
+export function paletteOf(options) {
+    const accent = ACCENT_VALUES[options.accent];
+    return {
+        ...BASE[options.theme],
+        accent,
+        identityAccent: options.theme === 'dark' ? accent : LIGHT_ACCENT_VALUES[options.accent],
+    };
+}
+/** Flat colors the encoder keeps exact and undithered. */
+export function pinnedOf(palette) {
+    const colors = [palette.bg, palette.faceplate, palette.glass, palette.paper, palette.accent];
+    if (palette.identityAccent !== palette.accent)
+        colors.push(palette.identityAccent);
+    return colors;
+}

package/dist/styles/now-playing/sketch.js

@@ -0,0 +1,610 @@
+import { canvasMeasure, fitIdentity, fitLine, } from '../../core/text.js';
+import { HUB_R } from './deck.js';
+/**
+ * A cassette deck, drawn as hardware: the cassette through a smoked window,
+ * a VFD showing the user's commit messages as lyrics, and a level meter of
+ * the month's days.
+ *
+ * Everything is drawn through the raw 2D context with the style set right
+ * before each draw (see Highlights Reel's note on p5's cached fill state).
+ * The chrome is one static layer built in setup; the reels, the display and
+ * the LEDs animate over it. Every animated value is periodic in `t`.
+ */
+const SANS = '"Space Grotesk"';
+const MONO = '"JetBrains Mono"';
+const HAND = '"Caveat"';
+/**
+ * The prompt names what the tape is with made-up flags: the most active repo
+ * of the window, or the last pushed one when the window was empty.
+ */
+export function promptFor(status) {
+    if (status === 'playing')
+        return '~/now-playing --most-active-repo --30d';
+    if (status === 'last-played')
+        return '~/now-playing --last-pushed';
+    return '~/now-playing';
+}
+const W = 1280;
+const H = 400;
+const TAU = Math.PI * 2;
+/** Width of the identity column: x 48 to 420. */
+export const IDENTITY_COLUMN = 420 - 48;
+const PLATE = { x: 452, y: 36, w: 784, h: 328, r: 12 };
+/** The smoked window and its interior, where the cassette sits. */
+const WELL = { x: 470, y: 56, w: 304, h: 190, r: 8 };
+const INTERIOR = { x: WELL.x + 7, y: WELL.y + 7, w: WELL.w - 14, h: WELL.h - 14, r: 5 };
+const CASSETTE = { x: 486, y: 72, w: 272, h: 160, r: 6 };
+const LABEL = { x: 500, y: 82, w: 244, h: 58 };
+const BAND_H = 20;
+const HUBS = { y: 192, left: 548, right: 696 };
+const KEYS = ['REW', 'PLAY', 'FF', 'STOP', 'REC'];
+const KEY = { w: 52, h: 44, gap: 9, y: 264 };
+const DISPLAY = { x: 792, y: 56, w: 428, h: 240, r: 8 };
+const PAD = 18;
+const UX = DISPLAY.x + PAD;
+const UW = DISPLAY.w - PAD * 2;
+const LYRIC_BASE = [128, 158, 188];
+const LYRIC_ROW = 30;
+const METER = { y: 210, h: 62 };
+const BARS = 30;
+const COUNTER = { x: 792, y: 308, w: 112, h: 40 };
+const LEDS = { rec: 934, play: 988, y: 328 };
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** 0..1, periodic in `t`, so every animated value loops seamlessly. */
+function wave(t, cycles, off) {
+    return 0.5 + 0.5 * Math.sin(TAU * (t * cycles + off));
+}
+/** The tape scroll: a short eased move between holds. */
+function easeInOut(t) {
+    return t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function rgba(color, alpha = 1) {
+    return `rgba(${color[0]},${color[1]},${color[2]},${alpha})`;
+}
+function setFill(ctx, color, alpha = 1) {
+    ctx.fillStyle = rgba(color, alpha);
+}
+function setStroke(ctx, color, alpha = 1) {
+    ctx.strokeStyle = rgba(color, alpha);
+}
+function setFont(ctx, o) {
+    ctx.font = `${o.bold ? 700 : 400} ${o.size}px ${o.mono ? MONO : (o.family ?? SANS)}`;
+    ctx.textAlign = o.align ?? 'left';
+    ctx.textBaseline = 'alphabetic';
+    ctx.letterSpacing = `${o.tracking ?? 0}px`;
+}
+function drawText(ctx, str, x, y, o) {
+    setFont(ctx, o);
+    setFill(ctx, o.color, o.alpha ?? 1);
+    ctx.fillText(str, x, y);
+    if (o.tracking)
+        ctx.letterSpacing = '0px';
+}
+/** Phosphor: the glyphs carry a faint glow, as a VFD does. */
+function glowText(ctx, str, x, y, o) {
+    setFont(ctx, o);
+    setFill(ctx, o.color, o.alpha ?? 1);
+    ctx.shadowColor = rgba(o.color, 0.9);
+    ctx.shadowBlur = o.glow ?? 7;
+    ctx.fillText(str, x, y);
+    ctx.shadowBlur = 0;
+    ctx.shadowColor = 'transparent';
+    if (o.tracking)
+        ctx.letterSpacing = '0px';
+}
+function measure(ctx, str, o) {
+    setFont(ctx, o);
+    return ctx.measureText(str).width;
+}
+/**
+ * The lyric lines on the display at `t`: index into the lyrics, baseline and
+ * alpha. Lines scroll up one row between holds; the middle one is bright, its
+ * neighbours dim, and the loop wraps from the last line to the first. The row
+ * two below the middle is hidden during a hold and scrolls in, so no line
+ * appears in place. With two lines, the row above would repeat the row below,
+ * so it is left out and the leaving line fades out on its way up.
+ */
+export function lyricLayout(n, t) {
+    if (n === 0)
+        return [];
+    if (n === 1)
+        return [{ index: 0, base: LYRIC_BASE[1], alpha: 1 }];
+    const u = t * n;
+    const k = Math.floor(u) % n;
+    const offset = easeInOut(clamp01((u - Math.floor(u) - 0.8) / 0.2));
+    const rows = n === 2 ? [0, 1, 2] : [-1, 0, 1, 2];
+    const fadeAbove = n === 2 ? 1 : 0.68;
+    const lines = [];
+    for (const row of rows) {
+        const base = LYRIC_BASE[1] + (row - offset) * LYRIC_ROW;
+        const dist = Math.abs(base - LYRIC_BASE[1]) / LYRIC_ROW;
+        const alpha = clamp01(1 - dist * (base < LYRIC_BASE[1] ? fadeAbove : 0.68));
+        if (alpha > 0.02)
+            lines.push({ index: (k + row + n) % n, base, alpha });
+    }
+    return lines;
+}
+/** Width the hand-written name may take on the label. */
+export const TAPE_NAME_WIDTH = LABEL.w - 24;
+/**
+ * The hand-written `owner/name` on the label, with baselines relative to the
+ * label's writing area. One line when it fits at 20 px or more; otherwise the
+ * owner goes on a smaller first line and the name below it, each cut with an
+ * ellipsis if it is still too long.
+ */
+export function tapeLabel(owner, name, measure) {
+    const full = `${owner}/${name}`;
+    if (measure(full, 20) <= TAPE_NAME_WIDTH) {
+        return [{ ...fitLine(full, TAPE_NAME_WIDTH, 30, 20, measure), dy: 0 }];
+    }
+    return [
+        { ...fitLine(`${owner}/`, TAPE_NAME_WIDTH, 16, 16, measure), dy: -16 },
+        { ...fitLine(name, TAPE_NAME_WIDTH, 22, 18, measure), dy: 2 },
+    ];
+}
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, h, r);
+}
+export function createDeckSketch(deck, identity) {
+    const P = deck.palette;
+    const prompt = promptFor(deck.status);
+    const fitted = fitIdentity({
+        name: identity.name.toUpperCase(),
+        tagline: identity.tagline,
+        website: identity.website && `↗ ${displayUrl(identity.website)}`,
+    }, IDENTITY_COLUMN);
+    const repo = deck.repo;
+    // Lines are cut with an ellipsis at the width they are drawn into.
+    const measureMono = canvasMeasure('JetBrains Mono', 400);
+    const measureHand = canvasMeasure('Caveat', 400);
+    const topLabel = deck.status === 'last-played' ? 'LAST PLAYED' : 'NOW PLAYING';
+    const topLabelW = canvasMeasure('JetBrains Mono', 400, 2)(topLabel, 12);
+    const topName = 
+    // The label carries the owner; the display keeps the room for the name.
+    repo === null ? null : fitLine(repo.name, UW - topLabelW - 14, 13, 13, measureMono);
+    const lyrics = deck.lyrics.map((line) => fitLine(line, UW, 14, 14, measureMono));
+    const tapeName = repo === null ? [] : tapeLabel(repo.owner, repo.name, measureHand);
+    const languageName = deck.languageName === null
+        ? null
+        : fitLine(deck.languageName, LABEL.w * 0.55, 8, 8, canvasMeasure('JetBrains Mono', 400, 1));
+    // --- static layer ---------------------------------------------------------
+    function drawVignette(ctx) {
+        const grad = ctx.createRadialGradient(W / 2, H / 2 - 20, 180, W / 2, H / 2, 860);
+        grad.addColorStop(0, 'rgba(0,0,0,0)');
+        grad.addColorStop(1, `rgba(0,0,0,${P.vignette})`);
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, W, H);
+    }
+    function drawPlate(ctx) {
+        setFill(ctx, P.faceplate);
+        roundRect(ctx, PLATE.x, PLATE.y, PLATE.w, PLATE.h, PLATE.r);
+        ctx.fill();
+        // Fine horizontal brushing, seeded.
+        for (const s of deck.brush) {
+            setStroke(ctx, [255, 255, 255], s.alpha);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(PLATE.x + 4 + s.x0 * (PLATE.w - 8), PLATE.y + 4 + s.y * (PLATE.h - 8));
+            ctx.lineTo(PLATE.x + 4 + s.x1 * (PLATE.w - 8), PLATE.y + 4 + s.y * (PLATE.h - 8));
+            ctx.stroke();
+        }
+        // Bevel: light on top, dark on the bottom edge.
+        setStroke(ctx, P.bevel, 0.65);
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(PLATE.x + PLATE.r, PLATE.y + 1);
+        ctx.lineTo(PLATE.x + PLATE.w - PLATE.r, PLATE.y + 1);
+        ctx.stroke();
+        setStroke(ctx, [0, 0, 0], 0.4);
+        ctx.beginPath();
+        ctx.moveTo(PLATE.x + PLATE.r, PLATE.y + PLATE.h - 1);
+        ctx.lineTo(PLATE.x + PLATE.w - PLATE.r, PLATE.y + PLATE.h - 1);
+        ctx.stroke();
+        setStroke(ctx, [0, 0, 0], 0.35);
+        ctx.lineWidth = 1;
+        roundRect(ctx, PLATE.x + 0.5, PLATE.y + 0.5, PLATE.w - 1, PLATE.h - 1, PLATE.r);
+        ctx.stroke();
+        // Screws in the corners, slots at seeded angles.
+        const corners = [
+            [PLATE.x + 16, PLATE.y + 16],
+            [PLATE.x + PLATE.w - 16, PLATE.y + 16],
+            [PLATE.x + 16, PLATE.y + PLATE.h - 16],
+            [PLATE.x + PLATE.w - 16, PLATE.y + PLATE.h - 16],
+        ];
+        corners.forEach(([cx, cy], i) => {
+            setFill(ctx, P.screw);
+            ctx.beginPath();
+            ctx.arc(cx, cy, 4.5, 0, TAU);
+            ctx.fill();
+            setStroke(ctx, P.bevel, 0.9);
+            ctx.lineWidth = 1.5;
+            const a = deck.screws[i];
+            ctx.beginPath();
+            ctx.moveTo(cx - Math.cos(a) * 3, cy - Math.sin(a) * 3);
+            ctx.lineTo(cx + Math.cos(a) * 3, cy + Math.sin(a) * 3);
+            ctx.stroke();
+        });
+    }
+    function drawWellChrome(ctx) {
+        // The well's interior: glass over the faceplate, the cassette sits inside.
+        setFill(ctx, P.glass, 0.85);
+        roundRect(ctx, INTERIOR.x, INTERIOR.y, INTERIOR.w, INTERIOR.h, INTERIOR.r);
+        ctx.fill();
+        setStroke(ctx, P.bevel, 0.9);
+        ctx.lineWidth = 1.5;
+        roundRect(ctx, WELL.x, WELL.y, WELL.w, WELL.h, WELL.r);
+        ctx.stroke();
+        setStroke(ctx, [0, 0, 0], 0.5);
+        ctx.lineWidth = 1;
+        roundRect(ctx, INTERIOR.x + 0.5, INTERIOR.y + 0.5, INTERIOR.w - 1, INTERIOR.h - 1, INTERIOR.r);
+        ctx.stroke();
+    }
+    function drawDisplayChrome(ctx) {
+        setFill(ctx, P.glass);
+        roundRect(ctx, DISPLAY.x, DISPLAY.y, DISPLAY.w, DISPLAY.h, DISPLAY.r);
+        ctx.fill();
+        setStroke(ctx, P.bevel, 0.9);
+        ctx.lineWidth = 1.5;
+        roundRect(ctx, DISPLAY.x, DISPLAY.y, DISPLAY.w, DISPLAY.h, DISPLAY.r);
+        ctx.stroke();
+        setStroke(ctx, [0, 0, 0], 0.5);
+        ctx.lineWidth = 1;
+        roundRect(ctx, DISPLAY.x + 1, DISPLAY.y + 1, DISPLAY.w - 2, DISPLAY.h - 2, DISPLAY.r - 1);
+        ctx.stroke();
+        // Unlit segment ghosts, as real VFDs show.
+        const ghost = rgba(P.accent, 0.05);
+        ctx.fillStyle = ghost;
+        for (const base of LYRIC_BASE) {
+            for (let x = UX; x < UX + UW - 3; x += 7) {
+                ctx.fillRect(x, base - 9, 3.5, 10);
+            }
+        }
+    }
+    function drawKeys(ctx) {
+        const total = KEYS.length * KEY.w + (KEYS.length - 1) * KEY.gap;
+        const x0 = WELL.x + (WELL.w - total) / 2;
+        KEYS.forEach((label, i) => {
+            const pressed = label === 'PLAY';
+            const x = x0 + i * (KEY.w + KEY.gap);
+            const y = KEY.y + (pressed ? 5 : 0);
+            const h = KEY.h - (pressed ? 5 : 0);
+            // Slot the raised keys sit out of.
+            if (!pressed) {
+                setFill(ctx, [0, 0, 0], 0.35);
+                roundRect(ctx, x, KEY.y - 3, KEY.w, KEY.h + 3, 5);
+                ctx.fill();
+            }
+            setFill(ctx, pressed ? P.faceplate : P.keyTop);
+            roundRect(ctx, x, y, KEY.w, h, 5);
+            ctx.fill();
+            setStroke(ctx, pressed ? [0, 0, 0] : P.keyRim, pressed ? 0.4 : 0.25);
+            ctx.lineWidth = 1;
+            roundRect(ctx, x + 0.5, y + 0.5, KEY.w - 1, h - 1, 5);
+            ctx.stroke();
+            if (pressed) {
+                setFill(ctx, P.identityAccent, 0.9);
+                ctx.fillRect(x + 8, y + 4, KEY.w - 16, 2.5);
+            }
+            drawText(ctx, label, x + KEY.w / 2, KEY.y + KEY.h + 18, {
+                size: 10,
+                align: 'center',
+                color: P.plateInk,
+                alpha: pressed ? 0.9 : 0.6,
+            });
+        });
+    }
+    function drawCounter(ctx) {
+        setFill(ctx, [10, 11, 14]);
+        roundRect(ctx, COUNTER.x, COUNTER.y, COUNTER.w, COUNTER.h, 4);
+        ctx.fill();
+        setStroke(ctx, P.bevel, 0.8);
+        ctx.lineWidth = 1;
+        roundRect(ctx, COUNTER.x + 0.5, COUNTER.y + 0.5, COUNTER.w - 1, COUNTER.h - 1, 4);
+        ctx.stroke();
+        const digits = String(deck.counter).padStart(3, '0');
+        for (let i = 0; i < 3; i++) {
+            const x = COUNTER.x + 10 + i * 33;
+            setFill(ctx, [4, 4, 6]);
+            roundRect(ctx, x, COUNTER.y + 7, 28, 26, 2);
+            ctx.fill();
+            drawText(ctx, digits[i], x + 14, COUNTER.y + 28, {
+                size: 19,
+                mono: true,
+                bold: true,
+                align: 'center',
+                color: P.amber,
+            });
+        }
+        drawText(ctx, 'COUNTER', COUNTER.x + COUNTER.w / 2, COUNTER.y + COUNTER.h + 12, {
+            size: 7,
+            mono: true,
+            tracking: 2,
+            align: 'center',
+            color: P.plateInk,
+            alpha: 0.7,
+        });
+    }
+    function drawLedLabels(ctx) {
+        drawText(ctx, 'REC', LEDS.rec + 9, LEDS.y + 3, {
+            size: 7,
+            mono: true,
+            color: P.plateInk,
+            alpha: 0.7,
+        });
+        drawText(ctx, 'PLAY', LEDS.play + 9, LEDS.y + 3, {
+            size: 7,
+            mono: true,
+            color: P.plateInk,
+            alpha: 0.7,
+        });
+    }
+    function drawIdentity(ctx) {
+        const x = 48;
+        drawText(ctx, prompt, x, 58, { size: 13, mono: true, color: P.identityAccent });
+        drawText(ctx, fitted.name.text, x, 116, {
+            size: fitted.name.size,
+            bold: true,
+            color: P.identityInk,
+            tracking: 3,
+        });
+        if (fitted.tagline) {
+            drawText(ctx, fitted.tagline.text, x, 146, {
+                size: fitted.tagline.size,
+                color: P.identityAccent,
+            });
+        }
+        if (fitted.website) {
+            drawText(ctx, fitted.website.text, x, 350, {
+                size: fitted.website.size,
+                mono: true,
+                color: P.identityAccent,
+            });
+        }
+    }
+    let chrome;
+    function setup(p) {
+        chrome = p.createGraphics(W, H);
+        const ctx = chrome.drawingContext;
+        setFill(ctx, P.bg);
+        ctx.fillRect(0, 0, W, H);
+        drawVignette(ctx);
+        drawPlate(ctx);
+        drawWellChrome(ctx);
+        drawDisplayChrome(ctx);
+        drawKeys(ctx);
+        drawCounter(ctx);
+        drawLedLabels(ctx);
+        drawIdentity(ctx);
+    }
+    // --- cassette -------------------------------------------------------------
+    function drawReel(ctx, reel, cx, t) {
+        const angle = (reel.phase + reel.revs * t) * TAU;
+        setFill(ctx, P.tape);
+        ctx.beginPath();
+        ctx.arc(cx, HUBS.y, reel.radius, 0, TAU);
+        ctx.fill();
+        // Wound tape: a bright rim and faint rings.
+        if (reel.radius > HUB_R + 2) {
+            setStroke(ctx, [96, 84, 72], 0.55);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.arc(cx, HUBS.y, reel.radius - 0.5, 0, TAU);
+            ctx.stroke();
+            setStroke(ctx, [255, 255, 255], 0.05);
+            for (let r = HUB_R + 5; r < reel.radius - 2; r += 4) {
+                ctx.beginPath();
+                ctx.arc(cx, HUBS.y, r, 0, TAU);
+                ctx.stroke();
+            }
+        }
+        // Six-spoke hub, turning a whole number of sixths per loop.
+        setStroke(ctx, [92, 86, 78], 0.95);
+        ctx.lineWidth = 5;
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        for (let i = 0; i < 3; i++) {
+            const a = angle + (i * TAU) / 6;
+            const dx = Math.cos(a) * (HUB_R - 3);
+            const dy = Math.sin(a) * (HUB_R - 3);
+            ctx.moveTo(cx - dx, HUBS.y - dy);
+            ctx.lineTo(cx + dx, HUBS.y + dy);
+        }
+        ctx.stroke();
+        ctx.lineCap = 'butt';
+        setFill(ctx, P.tape);
+        ctx.beginPath();
+        ctx.arc(cx, HUBS.y, 5, 0, TAU);
+        ctx.fill();
+    }
+    function drawCassette(ctx, t) {
+        ctx.save();
+        roundRect(ctx, INTERIOR.x, INTERIOR.y, INTERIOR.w, INTERIOR.h, INTERIOR.r);
+        ctx.clip();
+        if (deck.status !== 'empty') {
+            setFill(ctx, P.shell);
+            roundRect(ctx, CASSETTE.x, CASSETTE.y, CASSETTE.w, CASSETTE.h, CASSETTE.r);
+            ctx.fill();
+            setStroke(ctx, [255, 255, 255], 0.06);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(CASSETTE.x + CASSETTE.r, CASSETTE.y + 1);
+            ctx.lineTo(CASSETTE.x + CASSETTE.w - CASSETTE.r, CASSETTE.y + 1);
+            ctx.stroke();
+            setStroke(ctx, [20, 19, 17], 0.8);
+            roundRect(ctx, CASSETTE.x + 0.5, CASSETTE.y + 0.5, CASSETTE.w - 1, CASSETTE.h - 1, CASSETTE.r);
+            ctx.stroke();
+            // Label: cream paper, colored band, hand-written name.
+            setFill(ctx, P.paper);
+            ctx.fillRect(LABEL.x, LABEL.y, LABEL.w, LABEL.h);
+            setFill(ctx, deck.bandColor);
+            ctx.fillRect(LABEL.x, LABEL.y, LABEL.w, BAND_H);
+            setStroke(ctx, [0, 0, 0], 0.15);
+            ctx.lineWidth = 1;
+            ctx.strokeRect(LABEL.x + 0.5, LABEL.y + 0.5, LABEL.w - 1, LABEL.h - 1);
+            drawText(ctx, 'SIDE A', LABEL.x + 7, LABEL.y + 14, {
+                size: 8,
+                mono: true,
+                tracking: 1,
+                color: [255, 255, 255],
+                alpha: 0.92,
+            });
+            if (languageName) {
+                drawText(ctx, languageName.text, LABEL.x + LABEL.w - 7, LABEL.y + 14, {
+                    size: languageName.size,
+                    mono: true,
+                    tracking: 1,
+                    align: 'right',
+                    color: [255, 255, 255],
+                    alpha: 0.92,
+                });
+            }
+            ctx.save();
+            ctx.translate(LABEL.x + LABEL.w / 2, LABEL.y + BAND_H + (LABEL.h - BAND_H) / 2 + 12);
+            ctx.rotate(deck.labelTilt);
+            for (const line of tapeName) {
+                drawText(ctx, line.text, 0, line.dy, {
+                    size: line.size,
+                    family: HAND,
+                    align: 'center',
+                    color: P.ink,
+                });
+            }
+            ctx.restore();
+            // Tape threading along the bottom, then the reels.
+            setFill(ctx, P.tape);
+            ctx.fillRect(HUBS.left, 216, HUBS.right - HUBS.left, 3);
+            drawReel(ctx, deck.supply, HUBS.left, t);
+            drawReel(ctx, deck.takeUp, HUBS.right, t);
+        }
+        // Smoked glass over whatever is inside.
+        setFill(ctx, P.glass, 0.35);
+        ctx.fillRect(INTERIOR.x, INTERIOR.y, INTERIOR.w, INTERIOR.h);
+        ctx.restore();
+    }
+    // --- display --------------------------------------------------------------
+    function drawLyrics(ctx, t) {
+        ctx.save();
+        roundRect(ctx, DISPLAY.x + 4, DISPLAY.y + 4, DISPLAY.w - 8, DISPLAY.h - 8, DISPLAY.r - 2);
+        ctx.clip();
+        for (const { index, base, alpha } of lyricLayout(lyrics.length, t)) {
+            const line = lyrics[index];
+            const opts = { size: line.size, mono: true, color: P.accent, alpha };
+            if (alpha > 0.8) {
+                glowText(ctx, line.text, UX, base, opts);
+            }
+            else {
+                drawText(ctx, line.text, UX, base, opts);
+            }
+        }
+        ctx.restore();
+    }
+    function drawMeter(ctx, t) {
+        const pitch = UW / BARS;
+        const barW = pitch * 0.55;
+        const pos = (t * BARS) % BARS;
+        deck.bars.forEach((height, i) => {
+            const x = UX + i * pitch + (pitch - barW) / 2;
+            if (height <= 0) {
+                // Unlit ghost for a day without commits.
+                setFill(ctx, P.accent, 0.09);
+                ctx.fillRect(x, METER.y, barW, METER.h);
+                return;
+            }
+            const d = (pos - i + BARS) % BARS;
+            const flash = Math.exp(-d * 0.4);
+            setFill(ctx, P.accent, Math.min(1, 0.55 + flash * 0.45));
+            const h = Math.max(3, height * METER.h);
+            ctx.fillRect(x, METER.y + METER.h - h, barW, h);
+        });
+        setStroke(ctx, P.accent, 0.25);
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(UX, METER.y + METER.h + 2.5);
+        ctx.lineTo(UX + UW, METER.y + METER.h + 2.5);
+        ctx.stroke();
+        // The playhead sweeps once per loop.
+        const px = UX + pos * pitch + pitch / 2;
+        ctx.save();
+        setStroke(ctx, P.accent, 0.55);
+        ctx.lineWidth = 1.5;
+        ctx.shadowColor = rgba(P.accent, 0.9);
+        ctx.shadowBlur = 6;
+        ctx.beginPath();
+        ctx.moveTo(px, METER.y - 4);
+        ctx.lineTo(px, METER.y + METER.h + 4);
+        ctx.stroke();
+        ctx.restore();
+        ctx.shadowBlur = 0;
+        ctx.shadowColor = 'transparent';
+    }
+    function drawDisplay(ctx, t) {
+        if (deck.status === 'empty') {
+            glowText(ctx, 'NO TAPE', UX, 86, {
+                size: 13,
+                mono: true,
+                tracking: 2,
+                color: P.accent,
+                alpha: 0.85,
+            });
+        }
+        else {
+            drawText(ctx, topLabel, UX, 86, {
+                size: 12,
+                mono: true,
+                tracking: 2,
+                color: P.accent,
+                alpha: 0.55,
+            });
+            if (topName) {
+                glowText(ctx, topName.text, UX + topLabelW + 14, 86, {
+                    size: topName.size,
+                    mono: true,
+                    color: P.accent,
+                    alpha: 0.95,
+                });
+            }
+        }
+        drawLyrics(ctx, t);
+        drawMeter(ctx, t);
+    }
+    function drawLeds(ctx, t) {
+        // Record-off: the red LED stays dim. Play pulses once per loop.
+        setFill(ctx, P.red, 0.22);
+        ctx.beginPath();
+        ctx.arc(LEDS.rec, LEDS.y, 4.5, 0, TAU);
+        ctx.fill();
+        const pulse = 0.45 + 0.55 * wave(t, 1, 0);
+        ctx.save();
+        setFill(ctx, P.accent, pulse);
+        ctx.shadowColor = rgba(P.accent, pulse);
+        ctx.shadowBlur = 8;
+        ctx.beginPath();
+        ctx.arc(LEDS.play, LEDS.y, 4.5, 0, TAU);
+        ctx.fill();
+        ctx.restore();
+        ctx.shadowBlur = 0;
+        ctx.shadowColor = 'transparent';
+    }
+    function drawCursor(ctx, t) {
+        // Once a second, a terminal's blink rate: 16 whole cycles per 16 s loop.
+        if (wave(t, 16, 0) <= 0.5)
+            return;
+        setFill(ctx, P.identityAccent);
+        ctx.fillRect(48 + measure(ctx, prompt, { size: 13, mono: true }) + 4, 47, 7, 13);
+    }
+    function draw(p, _frame, t) {
+        const ctx = p.drawingContext;
+        if (chrome)
+            p.image(chrome, 0, 0);
+        drawCassette(ctx, t);
+        drawDisplay(ctx, t);
+        drawLeds(ctx, t);
+        drawCursor(ctx, t);
+    }
+    return { setup, draw };
+}
+/** "https://www.example.com/" -> "www.example.com" */
+function displayUrl(url) {
+    return url.replace(/^[a-z]+:\/\//i, '').replace(/\/+$/, '');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "headreel",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Animated GitHub profile banner made from your GitHub activity, with a GitHub Action or CLI.",
   "keywords": [
     "github",