headreel 1.2.0 → 1.4.0

package/dist/core/encode/gif.js

@@ -4,7 +4,7 @@ import * as gifencModule from 'gifenc';
 const gifenc = typeof gifencModule.quantize === 'function'
     ? gifencModule
     : gifencModule.default;
-const { GIFEncoder, quantize, applyPalette } = gifenc;
+const { GIFEncoder, quantize } = gifenc;
 /** Number of frames sampled to build the shared palette. */
 const PALETTE_SAMPLES = 6;
 /** 255 real colors; the last global palette slot is the transparent index. */
@@ -33,12 +33,13 @@ const BAYER = (() => {
  * that does not change between frames dithers identically, which keeps the
  * frame deltas small and avoids shimmer.
  */
-function dither(rgba, width) {
+function dither(rgba, width, pinned) {
     const out = new Uint8ClampedArray(rgba.length);
     for (let i = 0, p = 0; i < rgba.length; i += 4, p++) {
         const x = p % width;
         const y = (p - x) / width;
-        const offset = BAYER[(y & 7) * 8 + (x & 7)] * DITHER_SPREAD;
+        const exact = pinned.size > 0 && pinned.has((rgba[i] << 16) | (rgba[i + 1] << 8) | rgba[i + 2]);
+        const offset = exact ? 0 : BAYER[(y & 7) * 8 + (x & 7)] * DITHER_SPREAD;
         out[i] = rgba[i] + offset;
         out[i + 1] = rgba[i + 1] + offset;
         out[i + 2] = rgba[i + 2] + offset;
@@ -46,12 +47,48 @@ function dither(rgba, width) {
     }
     return out;
 }
-function buildPalette(frames, frameBytes) {
+/**
+ * Maps pixels to their nearest palette index, memoized per exact color.
+ * gifenc's `applyPalette` memoizes per rgb565 bucket instead, so the first pixel
+ * of a bucket in scan order picks the index for the whole bucket. Near-white
+ * pixels then land on white in one frame and on a pale grey in the next, and a
+ * flat card flickers. An exact memo is a pure function of the color.
+ */
+function createMapper(palette) {
+    const memo = new Int16Array(1 << 24).fill(-1);
+    const nearest = (r, g, b) => {
+        let best = 0;
+        let bestDist = Infinity;
+        for (let k = 0; k < palette.length; k++) {
+            const c = palette[k];
+            const d = (c[0] - r) ** 2 + (c[1] - g) ** 2 + (c[2] - b) ** 2;
+            if (d < bestDist) {
+                bestDist = d;
+                best = k;
+            }
+        }
+        return best;
+    };
+    return (rgba) => {
+        const out = new Uint8Array(rgba.length / 4);
+        for (let i = 0, p = 0; i < rgba.length; i += 4, p++) {
+            const key = (rgba[i] << 16) | (rgba[i + 1] << 8) | rgba[i + 2];
+            let index = memo[key];
+            if (index < 0) {
+                index = nearest(rgba[i], rgba[i + 1], rgba[i + 2]);
+                memo[key] = index;
+            }
+            out[p] = index;
+        }
+        return out;
+    };
+}
+function buildPalette(frames, frameBytes, colors) {
     const step = Math.max(1, Math.floor(frames.length / PALETTE_SAMPLES));
     const picks = frames.filter((_, i) => i % step === 0).slice(0, PALETTE_SAMPLES);
     const sample = new Uint8ClampedArray(frameBytes * picks.length);
     picks.forEach((data, i) => sample.set(data, i * frameBytes));
-    return quantize(sample, COLORS);
+    return quantize(sample, colors);
 }
 /**
  * Encodes RGBA frames into a looping GIF: one global palette, ordered
@@ -59,16 +96,22 @@ function buildPalette(frames, frameBytes) {
  */
 export function encodeGif(frames, spec) {
     const { width, height } = spec;
-    const palette = buildPalette(frames, width * height * 4);
+    const pinnedColors = spec.pinned ?? [];
+    const palette = [
+        ...buildPalette(frames, width * height * 4, COLORS - pinnedColors.length),
+        ...pinnedColors.map((c) => [...c]),
+    ];
+    const pinned = new Set(pinnedColors.map(([r, g, b]) => (r << 16) | (g << 8) | b));
     const globalPalette = [...palette];
     while (globalPalette.length < TRANSPARENT)
         globalPalette.push([0, 0, 0]);
     globalPalette.push([0, 0, 0]);
+    const toIndex = createMapper(palette);
     const gif = GIFEncoder();
     const delay = Math.round(1000 / spec.fps);
     let previous;
     for (const [i, data] of frames.entries()) {
-        const index = applyPalette(dither(data, width), palette);
+        const index = toIndex(dither(data, width, pinned));
         let pixels = index;
         if (previous) {
             pixels = new Uint8Array(index);

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/core/pipeline.js

@@ -24,5 +24,9 @@ export async function renderBanner(style, input) {
         rng,
     });
     const frames = await renderFrames(sketch, { ...CANVAS, frames: style.frames });
-    return encodeGif(frames, { ...CANVAS, fps: style.fps });
+    return encodeGif(frames, {
+        ...CANVAS,
+        fps: style.fps,
+        ...(style.pinned ? { pinned: style.pinned(options) } : {}),
+    });
 }

package/dist/core/text.js

@@ -0,0 +1,72 @@
+import { createCanvas } from '@napi-rs/canvas';
+import { registerFonts } from './fonts.js';
+const ELLIPSIS = '…';
+/**
+ * Fits one line of text into `maxWidth`. It first shrinks from `size` toward
+ * `minSize` (pass `minSize === size` to keep the size), then cuts the text
+ * with an ellipsis. The result is never wider than `maxWidth`, so no line can
+ * leave the canvas or run into the scene.
+ */
+export function fitLine(text, maxWidth, size, minSize, measure) {
+    if (measure(text, size) <= maxWidth)
+        return { text, size };
+    // Width scales about linearly with size; step down until it fits.
+    let fitted = Math.max(minSize, Math.floor((size * maxWidth) / measure(text, size)));
+    while (fitted > minSize && measure(text, fitted) > maxWidth)
+        fitted--;
+    if (measure(text, fitted) <= maxWidth)
+        return { text, size: fitted };
+    // Longest prefix that fits with the ellipsis.
+    const chars = [...text];
+    let lo = 0;
+    let hi = chars.length;
+    while (lo < hi) {
+        const mid = Math.ceil((lo + hi) / 2);
+        const candidate = `${chars.slice(0, mid).join('').trimEnd()}${ELLIPSIS}`;
+        if (measure(candidate, minSize) <= maxWidth)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    const cut = chars.slice(0, lo).join('').trimEnd();
+    return { text: cut ? `${cut}${ELLIPSIS}` : '', size: minSize };
+}
+let scratch;
+/**
+ * Measures with the bundled fonts on a private canvas, so fitting never
+ * touches a sketch's own drawing state (p5 caches font and fill state).
+ * `tracking` is letter spacing in px, as the sketch draws it.
+ */
+export function canvasMeasure(family, weight, tracking = 0) {
+    registerFonts();
+    scratch ??= createCanvas(1, 1).getContext('2d');
+    const ctx = scratch;
+    return (text, size) => {
+        ctx.font = `${weight} ${size}px "${family}"`;
+        ctx.letterSpacing = `${tracking}px`;
+        return ctx.measureText(text).width;
+    };
+}
+/** The identity column's lines, shared by every style (same fonts and sizes). */
+export const IDENTITY_TYPE = {
+    name: { family: 'Space Grotesk', weight: 700, size: 50, minSize: 30, tracking: 3 },
+    tagline: { family: 'Space Grotesk', weight: 400, size: 17 },
+    website: { family: 'JetBrains Mono', weight: 400, size: 12 },
+};
+/**
+ * Fits the identity column: `name` shrinks then cuts, `tagline` and `website`
+ * cut. `column` bounds name and tagline; `websiteColumn` bounds the website,
+ * which some styles draw beside the scene rather than above it.
+ */
+export function fitIdentity(lines, column, websiteColumn = column) {
+    const { name, tagline, website } = IDENTITY_TYPE;
+    return {
+        name: fitLine(lines.name, column, name.size, name.minSize, canvasMeasure(name.family, name.weight, name.tracking)),
+        tagline: lines.tagline
+            ? fitLine(lines.tagline, column, tagline.size, tagline.size, canvasMeasure(tagline.family, tagline.weight))
+            : null,
+        website: lines.website
+            ? fitLine(lines.website, websiteColumn, website.size, website.size, canvasMeasure(website.family, website.weight))
+            : null,
+    };
+}

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

@@ -31,7 +31,9 @@ export function tileAt(weeks, w, d) {
     const depth = 6 - d;
     return { x: o.x + w * LAYOUT.cell + depth * LAYOUT.depthX, y: o.y - depth * LAYOUT.depthY };
 }
-export function buildCity(data, rng, beacons) {
+/** Busiest days marked with a beacon. */
+export const BEACONS = 8;
+export function buildCity(data, rng) {
     const between = (min, max) => min + rng() * (max - min);
     const weeks = data.weeks.length;
     const maxCount = Math.max(0, ...data.weeks.flat().map((d) => d.count));
@@ -73,7 +75,7 @@ export function buildCity(data, rng, beacons) {
     const ranked = buildings
         .filter((b) => b.count > 0)
         .sort((a, b) => b.count - a.count || a.w - b.w || a.d - b.d);
-    for (const b of ranked.slice(0, beacons))
+    for (const b of ranked.slice(0, BEACONS))
         b.beacon = true;
     // Back rows first, then left to right, so front towers occlude correctly.
     buildings.sort((a, b) => a.d - b.d || a.w - b.w);

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

@@ -9,6 +9,6 @@ export const contributionCity = {
     data: { name: 'contributions', schema: contributionsSchema, fetch: fetchContributions },
     options,
     createSketch({ data, options, identity, rng }) {
-        return createCitySketch(buildCity(data, rng, options.beacons), identity, rng);
+        return createCitySketch(buildCity(data, rng), identity, rng, options.accent);
     },
 };

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

@@ -1,7 +1,8 @@
 import { z } from 'zod';
+export const ACCENTS = ['cyan', 'cobalt', 'green', 'violet', 'pink'];
 export const options = z
     .object({
-    /** Number of busiest days marked with a beacon. */
-    beacons: z.coerce.number().int().min(0).max(10).default(8),
+    /** Color of the roofs, windows, glow, lines, scan beam and links. */
+    accent: z.enum(ACCENTS).default('cyan'),
 })
     .strict();

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];
+}