@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/peeks/controls.js

@@ -0,0 +1,54 @@
+import { choice, palette, slider, toggle, turnSlider } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey, createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { BODIES, bodyOf, coloursOf, EYE_KINDS, FORMATIONS, formationOf, NATURAL_ANGLE, POSES, TILES } from "./index.js";
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const { body, iris } = coloursOf(t);
+    return [
+        {
+            title: "Shape",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                list(choice(t, "body", "Body", "list", BODIES.map(({ name: label }) => ({ label })))),
+                turnSlider(t, NATURAL_ANGLE),
+                list(choice(t, "pose", "Peeking from", "list", POSES.map(({ name: label }) => ({ label })))),
+                ...(bodyOf(t).counted
+                    ? [choice(t, "bumps", "Bumps", "list", [5, 6, 7, 8, 9].map((count) => ({ label: String(count) })))]
+                    : []),
+                slider(t, "fluff", "Depth", 0, 100, "%"),
+                slider(t, "body.size", "Body size", 0, 100, "%"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                palette(t, "tile", "Colour", TILES),
+                {
+                    type: "colors",
+                    id: "peek.colors",
+                    label: "Body, eyes",
+                    colors: [
+                        { id: colorKey("body"), color: body },
+                        { id: colorKey("iris"), color: iris },
+                    ],
+                },
+            ],
+        },
+        {
+            title: "Eyes",
+            controls: [
+                choice(t, "eye.formation", "Formation", "list", FORMATIONS),
+                list(choice(t, "eye.kind", "Eyes", "list", EYE_KINDS.map((label) => ({ label })))),
+                toggle(t, "brows", 80, "Brows"),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                // A single eye has nothing to sit apart from, or to lean against.
+                ...(formationOf(t) === "One"
+                    ? []
+                    : [slider(t, "eye.gap", "Gap", 0, 100, "%"), slider(t, "tilt", "Tilt", -8, 8, "°")]),
+            ],
+        },
+    ];
+};

package/dist/peeks/index.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Peeks: a creature peering into a bright tile from somewhere off its edge. Its outline
+ * is echoed by contour rings that fade into the tile, and it has big glossy eyes.
+ * Everything is flat fills and gradients, so all of it can move cheaply.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+export declare const TILES: string[];
+export declare const EFFECTS: readonly ["peek", "pop", "wobble"];
+export type Effect = (typeof EFFECTS)[number];
+export declare const EYE_KINDS: string[];
+/** How many eyes it has, and how they sit. Most have two, as the rest are surprises. */
+export declare const FORMATIONS: {
+    label: string;
+    weight: number;
+}[];
+interface Pose {
+    name: string;
+    /** Where it peers in from, which can be off the tile, and how big it is. */
+    x: number;
+    y: number;
+    size: number;
+    /** Where its eyes sit, and how they lean. */
+    eyeX: number;
+    eyeY: number;
+    lean: number;
+    effect: Effect;
+}
+/** Each comes in from a different side, so no two variants start from the same place. */
+export declare const POSES: Pose[];
+interface Body {
+    name: string;
+    /** Has a number of bumps worth choosing. */
+    counted?: boolean;
+    /**
+     * How far the radius strays, given the angle from the way it faces. `depth` scales
+     * it, `count` is the bumps, `start` slips the waves, and `pick` gives a stable value.
+     */
+    shape(angle: number, depth: number, count: number, start: number, pick: (i: number) => number): number;
+}
+/** What a creature is made of. The first is the cloud in the reference. */
+export declare const BODIES: Body[];
+export declare const VIEW_BOX = "5 5 90 90";
+export declare const TILE_SHAPE = "<rect x=\"5\" y=\"5\" width=\"90\" height=\"90\" rx=\"20\"/>";
+/** Left to itself an angle stays this close to upright, as upside down reads as a mistake. */
+export declare const NATURAL_ANGLE = 32;
+export declare const poseOf: (t: Traits) => Pose;
+export declare const bodyOf: (t: Traits) => Body;
+export declare const eyeKindOf: (t: Traits) => string;
+export declare function formationOf(t: Traits): string;
+/** The colours in use, each of which can be changed by hand. */
+export declare function coloursOf(t: Traits): {
+    tile: string;
+    body: string;
+    iris: string;
+};
+export interface Peek {
+    defs: string;
+    tile: string;
+    /** The turn of the rings, the creature and its face together, in degrees. */
+    angle: number;
+    turn: string;
+    rings: string;
+    body: string;
+    face: string;
+    effect: Effect;
+    /** Which way it leans further in, and the point its rings spread from. */
+    into: {
+        x: number;
+        y: number;
+    };
+    origin: {
+        x: number;
+        y: number;
+    };
+    blinkDelay: number;
+}
+export declare function createPeek(name: string, overrides?: Overrides, ids?: string): Peek;
+/** The peek at rest, for thumbnails. */
+export declare const peekSvg: (name: string, overrides?: Overrides) => string;
+export {};

package/dist/peeks/index.js

@@ -0,0 +1,225 @@
+/**
+ * Peeks: a creature peering into a bright tile from somewhere off its edge. Its outline
+ * is echoed by contour rings that fade into the tile, and it has big glossy eyes.
+ * Everything is flat fills and gradients, so all of it can move cheaply.
+ */
+import { BLACK, mix, WHITE } from "../colors.js";
+import { turnOf } from "../controls.js";
+import { scopeAll } from "../art.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+export const TILES = [
+    "#3f4ff0", "#7a3dff", "#0fa3b1", "#ff4f8b", "#ff7a1a", "#17a85a", "#e8344a", "#1f2a6b", "#c23dd6",
+];
+export const EFFECTS = ["peek", "pop", "wobble"];
+export const EYE_KINDS = ["Glossy", "Sleepy", "Tiny"];
+/** How many eyes it has, and how they sit. Most have two, as the rest are surprises. */
+export const FORMATIONS = [
+    { label: "Pair", weight: 5 },
+    { label: "Close", weight: 2 },
+    { label: "Wide", weight: 2 },
+    { label: "One", weight: 1.5 },
+    { label: "Three", weight: 1.5 },
+];
+/** Each comes in from a different side, so no two variants start from the same place. */
+export const POSES = [
+    { name: "Corner", x: 68, y: 96, size: 60, eyeX: 62, eyeY: 67, lean: -9, effect: "peek" },
+    { name: "Hanging", x: 50, y: -14, size: 66, eyeX: 50, eyeY: 33, lean: 4, effect: "wobble" },
+    { name: "Right", x: 106, y: 56, size: 67, eyeX: 67, eyeY: 53, lean: -7, effect: "peek" },
+    { name: "Other corner", x: 32, y: 96, size: 60, eyeX: 38, eyeY: 67, lean: 9, effect: "pop" },
+    { name: "Top corner", x: 76, y: 2, size: 62, eyeX: 66, eyeY: 32, lean: 8, effect: "wobble" },
+    { name: "Left", x: -6, y: 56, size: 67, eyeX: 33, eyeY: 53, lean: 7, effect: "peek" },
+    { name: "Rising", x: 50, y: 112, size: 70, eyeX: 50, eyeY: 67, lean: -3, effect: "pop" },
+    { name: "Top left", x: 24, y: 2, size: 62, eyeX: 34, eyeY: 32, lean: -8, effect: "wobble" },
+    { name: "Whole", x: 50, y: 54, size: 31, eyeX: 50, eyeY: 54, lean: -5, effect: "pop" },
+];
+/** A bump `width` across, `height` tall, at `at` radians from the way it is facing. */
+const bump = (angle, at, width, height) => {
+    const away = Math.atan2(Math.sin(angle - at), Math.cos(angle - at));
+    return height * Math.exp(-((away / width) ** 2));
+};
+/** What a creature is made of. The first is the cloud in the reference. */
+export const BODIES = [
+    {
+        name: "Fluffy",
+        counted: true,
+        shape: (a, depth, count, start) => depth * Math.cos(count * a + start) + 0.03 * Math.cos(3 * a + start),
+    },
+    { name: "Ears", shape: (a, depth) => bump(a, -0.42, 0.17, depth * 4.4) + bump(a, 0.42, 0.17, depth * 4.4) },
+    {
+        name: "Swell",
+        shape: (a, depth, _count, start) => depth * 2.4 * Math.cos(3 * a + start) + depth * 0.9 * Math.cos(5 * a + start * 2),
+    },
+    { name: "Tuft", shape: (a, depth) => bump(a, 0, 0.14, depth * 6) + bump(a, -0.3, 0.09, depth * 3.2) + bump(a, 0.32, 0.1, depth * 3.6) },
+    {
+        name: "Spiky",
+        counted: true,
+        shape: (a, depth, count, start) => depth * 1.1 * (Math.abs(Math.sin(((count + 5) * a + start) / 2)) * 2 - 1),
+    },
+    { name: "Horns", shape: (a, depth) => bump(a, -0.62, 0.1, depth * 5.4) + bump(a, 0.62, 0.1, depth * 5.4) },
+    {
+        name: "Drips",
+        shape: (a, depth, _count, _start, pick) => [-0.9, -0.45, 0, 0.5, 0.95].reduce((sum, at, i) => sum + bump(a, at + pick(i) * 0.1, 0.11, depth * (2.5 + pick(i + 5) * 3)), 0),
+    },
+    { name: "Dome", shape: (a, depth) => depth * 0.4 * Math.cos(2 * a) + bump(a, 0, 0.5, depth * 2.2) },
+    {
+        name: "Lumpy",
+        shape: (a, depth, _count, start) => depth * 1.7 * Math.cos(2 * a + start) + depth * 1.3 * Math.cos(3 * a + start * 3) + depth * Math.cos(7 * a + start * 5),
+    },
+];
+export const VIEW_BOX = "5 5 90 90";
+export const TILE_SHAPE = `<rect x="5" y="5" width="90" height="90" rx="20"/>`;
+const OUTLINE_POINTS = 360;
+const RINGS = 3;
+/** How much further out each ring sits. */
+const RING_STEP = 0.13;
+/** Where a sparkle's four points reach, as a star around the origin. */
+const SPARKLE = "M0-1Q.12-.12 1 0Q.12 .12 0 1Q-.12 .12-1 0Q-.12-.12 0-1Z";
+/** Left to itself an angle stays this close to upright, as upside down reads as a mistake. */
+export const NATURAL_ANGLE = 32;
+/** How close an eye may come to the frame, which leaves it clear of the tile's edge. */
+const FACE_EDGE = 9;
+const round2 = (value) => Math.round(value * 100) / 100;
+export const poseOf = (t) => t.pick("pose", POSES);
+export const bodyOf = (t) => t.pick("body", BODIES);
+export const eyeKindOf = (t) => t.pick("eye.kind", EYE_KINDS);
+const angleOf = (t) => turnOf(t, NATURAL_ANGLE);
+export function formationOf(t) {
+    const position = t("eye.formation");
+    const total = FORMATIONS.reduce((sum, { weight }) => sum + weight, 0);
+    let edge = 0;
+    for (const { label, weight } of FORMATIONS) {
+        edge += weight / total;
+        if (position < edge)
+            return label;
+    }
+    return FORMATIONS[0].label;
+}
+/** The colours in use, each of which can be changed by hand. */
+export function coloursOf(t) {
+    const tile = t.color("tile") ?? t.pick("tile", TILES);
+    return {
+        tile,
+        body: t.color("body") ?? mix(tile, WHITE, 0.86),
+        iris: t.color("iris") ?? mix(tile, BLACK, 0.66),
+    };
+}
+function drawOutline(t, pose, body, grown) {
+    const size = pose.size * t.num("body.size", 0.92, 1.08);
+    const depth = t.num("fluff", 0.04, 0.09);
+    const count = t.int("bumps", 5, 9);
+    // Each ring's waves slip a little from the last, so they read as drawn contours.
+    const start = t.num("wave", 0, 2 * Math.PI) + grown * 2.4;
+    const pick = (i) => t(`body.pick${i}`);
+    const facing = pose.x === 50 && pose.y === 54 ? -Math.PI / 2 : Math.atan2(54 - pose.y, 50 - pose.x);
+    const points = Array.from({ length: OUTLINE_POINTS }, (_, i) => {
+        const angle = (i * 2 * Math.PI) / OUTLINE_POINTS;
+        const r = size * (1 + grown) * (1 + body.shape(angle - facing, depth, count, start, pick));
+        return `${round2(pose.x + r * Math.cos(angle))} ${round2(pose.y + r * Math.sin(angle))}`;
+    });
+    return `M${points.join("L")}Z`;
+}
+function drawEye(t, side, radius, x, y, body, tile) {
+    const kind = eyeKindOf(t);
+    const size = round2(radius * (kind === "Tiny" ? 0.56 : 0.86));
+    // The iris sits off centre, which leaves the white as a crescent.
+    const offX = round2(radius - size - 0.8);
+    const offY = round2(-(radius - size) * 0.7);
+    const sparkle = round2(size * 0.34);
+    const glint = `translate(${round2(offX + size * 0.26)} ${round2(offY - size * 0.26)}) scale(${sparkle})`;
+    // Covers only the top third, with a line along it, so it still reads as an eye.
+    const lidY = round2(-radius * 0.36);
+    const lidWide = round2(Math.sqrt(radius ** 2 - lidY ** 2));
+    const cover = round2(radius + 0.6);
+    const lid = kind === "Sleepy"
+        ? `<path d="M${-lidWide - 0.6} ${lidY}A${cover} ${cover} 0 0 1 ${lidWide + 0.6} ${lidY}Z" fill="${body}"/>` +
+            `<path d="M${-lidWide} ${lidY}H${lidWide}" stroke="${tile}" stroke-width="1.5" stroke-linecap="round"/>`
+        : "";
+    const lift = round2(t.num("brow.y", 1.5, 4));
+    const arch = round2(radius * 0.74);
+    const brow = t("brows") * 100 < 80
+        ? `<path data-brow="" d="M${round2(side * arch - 3.6)} ${round2(-radius - lift + 1)}q3.6 -3 7.2 -.4" fill="none" stroke="${tile}" stroke-width="1.6" stroke-linecap="round"/>`
+        : "";
+    return (`<g transform="translate(${round2(x)} ${round2(y)})">${brow}<g data-eye="">` +
+        `<circle r="${round2(radius)}" fill="#fff"/>` +
+        `<g data-iris=""><circle cx="${offX}" cy="${offY}" r="${size}" fill="url(#peek-iris)"/>` +
+        `<path d="${SPARKLE}" transform="${glint}" fill="#fff"/>` +
+        `<circle cx="${round2(offX + size * 0.56)}" cy="${round2(offY - size * 0.02)}" r="${round2(size * 0.08)}" fill="#fff"/></g>` +
+        `${lid}</g></g>`);
+}
+function drawFace(t, pose, body, tile) {
+    const formation = formationOf(t);
+    const scale = t.num("eye.size", 0.8, 1.2);
+    const lean = pose.lean + t.jitter("tilt", 8);
+    const radians = (lean * Math.PI) / 180;
+    const big = 11 * scale;
+    const small = big * t.num("eye.ratio", 0.68, 1);
+    const spread = { Close: 0.74, Wide: 1.34 }[formation] ?? 1;
+    const gap = t.num("eye.gap", 10.5, 14) * scale * spread;
+    const eyes = formation === "One"
+        ? [{ side: 0, radius: big * 1.42, by: 0 }]
+        : formation === "Three"
+            ? [{ side: -1, radius: small * 0.84, by: -gap * 1.5 }, { side: 0, radius: big, by: 0 }, { side: 1, radius: small * 0.84, by: gap * 1.5 }]
+            : [{ side: -1, radius: big, by: -gap }, { side: 1, radius: small, by: gap }];
+    // Measured where they end up after the turn, as that's where the tile could cut one off.
+    const turn = (angleOf(t) * Math.PI) / 180;
+    const spots = eyes.map(({ radius, by }) => {
+        const x = pose.eyeX - 50 + Math.cos(radians) * by;
+        const y = pose.eyeY - 50 + Math.sin(radians) * by;
+        return { radius, across: 50 + x * Math.cos(turn) - y * Math.sin(turn), down: 50 + x * Math.sin(turn) + y * Math.cos(turn) };
+    });
+    const backInside = (axis) => {
+        const low = Math.min(...spots.map((spot) => spot[axis] - spot.radius));
+        const high = Math.max(...spots.map((spot) => spot[axis] + spot.radius));
+        return low < FACE_EDGE ? FACE_EDGE - low : high > 100 - FACE_EDGE ? 100 - FACE_EDGE - high : 0;
+    };
+    const pushX = backInside("across");
+    const pushY = backInside("down");
+    // The face is drawn before the turn, so the push is turned back the other way.
+    const shiftX = pushX * Math.cos(turn) + pushY * Math.sin(turn);
+    const shiftY = pushY * Math.cos(turn) - pushX * Math.sin(turn);
+    return eyes
+        .map(({ side, radius, by }) => drawEye(t, side, radius, pose.eyeX + shiftX + Math.cos(radians) * by, pose.eyeY + shiftY + Math.sin(radians) * by, body, tile))
+        .join("");
+}
+export function createPeek(name, overrides, ids = "peek") {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const pose = poseOf(t);
+    const shape = bodyOf(t);
+    const { tile, body, iris } = coloursOf(t);
+    const size = pose.size * t.num("body.size", 0.92, 1.08);
+    const rings = Array.from({ length: RINGS }, (_, i) => {
+        const ring = RINGS - i;
+        return `<path d="${drawOutline(t, pose, shape, ring * RING_STEP)}" fill="${mix(tile, WHITE, round2(0.05 + i * 0.05))}"/>`;
+    }).join("");
+    const toCentre = Math.hypot(50 - pose.x, 54 - pose.y) || 1;
+    return scopeAll({
+        defs: `<defs>` +
+            `<linearGradient id="peek-tile" gradientUnits="userSpaceOnUse" x1="50" y1="5" x2="50" y2="95">` +
+            `<stop offset="0" stop-color="${tile}"/><stop offset="1" stop-color="${mix(tile, WHITE, 0.14)}"/></linearGradient>` +
+            `<linearGradient id="peek-body" gradientUnits="userSpaceOnUse" x1="50" y1="${round2(pose.y - size)}" x2="50" y2="${round2(pose.y + size)}">` +
+            `<stop offset="0" stop-color="${body}"/><stop offset="1" stop-color="${mix(body, WHITE, 0.6)}"/></linearGradient>` +
+            `<linearGradient id="peek-iris" x1="0.5" y1="0" x2="0.5" y2="1">` +
+            `<stop offset="0" stop-color="${iris}"/><stop offset="1" stop-color="${mix(iris, tile, 0.62)}"/></linearGradient>` +
+            `</defs>`,
+        tile: "url(#peek-tile)",
+        angle: angleOf(t),
+        turn: `rotate(${round2(angleOf(t))} 50 50)`,
+        rings,
+        body: `<path d="${drawOutline(t, pose, shape, 0)}" fill="url(#peek-body)"/>`,
+        face: drawFace(t, pose, body, tile),
+        effect: pose.effect,
+        into: { x: round2(((50 - pose.x) / toCentre) * 7), y: round2(((54 - pose.y) / toCentre) * 7) },
+        origin: { x: pose.x, y: pose.y },
+        blinkDelay: t.num("blink", 0, 4),
+    }, "peek", ids);
+}
+/** The peek at rest, for thumbnails. */
+export const peekSvg = (name, overrides) => {
+    const peek = createPeek(name, overrides);
+    const tile = TILE_SHAPE.replace("/>", ` fill="${peek.tile}"/>`);
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${VIEW_BOX}">${peek.defs}${tile}` +
+        `<clipPath id="peek-box">${TILE_SHAPE}</clipPath>` +
+        `<g clip-path="url(#peek-box)"><g transform="${peek.turn}">${peek.rings}${peek.body}${peek.face}</g></g></svg>`);
+};

package/dist/pixels/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a pixel person. Low keeps eight everyday hairstyles, one for
+ * each variant, a smile, plain hats, and makes hats, beards, glasses, marks and earrings
+ * rarer. Indices are into the lists in `sprites.ts` and `index.ts`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/pixels/calming.js

@@ -0,0 +1,22 @@
+/**
+ * What Possibilities calms on a pixel person. Low keeps eight everyday hairstyles, one for
+ * each variant, a smile, plain hats, and makes hats, beards, glasses, marks and earrings
+ * rarer. Indices are into the lists in `sprites.ts` and `index.ts`, plainest first.
+ */
+export const CALMING = {
+    lists: {
+        // Crop, side part, bob, long, curly, afro, bun, hijab, then ponytail, slick, dreads,
+        // balding, and the loudest, spiky and mohawk.
+        hair: [14, 8, [0, 1, 6, 5, 3, 4, 7, 13, 8, 12, 10, 11, 2, 9]],
+        // Smile and small first, then tiny, line, smirk and frown.
+        mouth: [6, 2, [3, 1, 5, 0, 2, 4]],
+        // Cap, backwards cap and beanie, then the bucket hat and santa's.
+        "hat.kind": [5, 3],
+    },
+    rarer: ["hat", "beard", "glasses", "mark", "earring"],
+};
+export const NOTES = [
+    "everyday hair, a smile, and hardly ever a hat, beard, glasses or mark.",
+    "more hairstyles and mouths, with hats, beards and glasses now and then.",
+    "every hairstyle up to mohawks, every mouth, hat and extra.",
+];

package/dist/pixels/controls.d.ts

@@ -0,0 +1,3 @@
+import { type ControlBuilder } from "../controls.ts";
+export declare const colorControls: ControlBuilder;
+export declare const retroControls: ControlBuilder;

package/dist/pixels/controls.js

@@ -0,0 +1,82 @@
+import { choice, fixedPalette, optional, palette, spaced, toggle, } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { MOUTH_NAMES } from "./index.js";
+import { HAIR_COLORS, HAT_COLORS, isPaleHair, SCREENS, SKINS } from "./palette.js";
+import { BEARDS, EYE_SPACING_NAMES, EYEBROWS, HAIRS, HATS, MARKS } from "./sprites.js";
+const named = (names) => names.map((name) => ({ label: spaced(name) }));
+const firsts = (colors) => colors.map(([color]) => color);
+const indexOf = (value, count) => Math.floor(value * count);
+/** Retro only has dark and light, so it offers those instead of every colour. */
+function tone(t, key, colors, label) {
+    const position = (index) => (index + 0.5) / colors.length;
+    const pale = colors.findIndex(isPaleHair);
+    const dark = colors.findIndex((color) => !isPaleHair(color));
+    return {
+        type: "choice",
+        id: key,
+        label,
+        layout: "segmented",
+        options: [
+            { id: "dark", label: "Dark", set: { [key]: position(dark) } },
+            { id: "pale", label: "Light", set: { [key]: position(pale) } },
+        ],
+        selected: isPaleHair(colors[indexOf(t(key), colors.length)]) ? "pale" : "dark",
+    };
+}
+const builder = (theme) => (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const retro = theme === "retro";
+    const hair = HAIRS[indexOf(t("hair"), HAIRS.length)];
+    const hijab = hair.name === "hijab";
+    const wearsHat = hair.takesHat && t("hat") * 100 < 38;
+    const hat = HATS[indexOf(t("hat.kind"), HATS.length)];
+    const wearsGlasses = t("glasses") * 100 < 24;
+    const hairColor = retro
+        ? hijab ? tone(t, "hat.color", HAT_COLORS, "Scarf") : tone(t, "hair.color", HAIR_COLORS, "Hair tone")
+        : hijab ? palette(t, "hat.color", "Scarf colour", firsts(HAT_COLORS))
+            : palette(t, "hair.color", "Hair colour", firsts(HAIR_COLORS));
+    const sections = [
+        {
+            title: "Person",
+            controls: [
+                retro ? fixedPalette(t, "screen", "Colour", SCREENS) : palette(t, "skin", "Colour", firsts(SKINS)),
+                choice(t, "mirrored", "Facing", "segmented", [{ label: "Right" }, { label: "Left" }]),
+                possibilitiesSlider(t, NOTES),
+            ],
+        },
+        {
+            title: "Hair",
+            controls: [list(choice(t, "hair", "Hair", "list", named(HAIRS.map((entry) => entry.name)))), hairColor],
+        },
+        {
+            title: "Face",
+            controls: [
+                ...(wearsGlasses
+                    ? []
+                    : [
+                        choice(t, "eyes.spacing", "Eye spacing", "segmented", EYE_SPACING_NAMES.map((label) => ({ label }))),
+                        toggle(t, "eyes.tall", 65, "Tall eyes"),
+                    ]),
+                optional(t, "brows", 55, "brows.kind", "Brows", "list", named(Object.keys(EYEBROWS))),
+                list(choice(t, "mouth", "Mouth", "list", named(MOUTH_NAMES))),
+                optional(t, "mark", 30, "mark.kind", "Marks", "list", named(Object.keys(MARKS))),
+                ...(hijab ? [] : [optional(t, "beard", 34, "beard.kind", "Beard", "list", named(Object.keys(BEARDS)))]),
+            ],
+        },
+        {
+            title: "Accessories",
+            controls: [
+                ...(hair.takesHat ? [optional(t, "hat", 38, "hat.kind", "Hat", "list", named(HATS.map((entry) => entry.name)))] : []),
+                ...(!retro && wearsHat && hat.name !== "santa" ? [palette(t, "hat.color", "Hat colour", firsts(HAT_COLORS))] : []),
+                optional(t, "glasses", 24, "glasses.kind", "Glasses", "segmented", [{ label: "Frames", weight: 2 }, { label: "Shades" }]),
+                ...(hair.wraps ? [] : [toggle(t, "earring", 16, "Earring")]),
+            ],
+        },
+    ];
+    return sections;
+};
+export const colorControls = builder("color");
+export const retroControls = builder("retro");

package/dist/pixels/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pixel people. Parts from `sprites.ts` are stacked on a 20×20 grid, then each
+ * layer becomes SVG rectangles so it can move on its own without leaving the grid.
+ */
+import { type Overrides } from "../traits.ts";
+import { type Theme } from "./palette.ts";
+export declare const GRID = 20;
+/** Empty cells around the person, so tall hair never touches the tile's edge. */
+export declare const MARGIN = 2;
+/** The mouths a person can have, in the order they are picked from. */
+export declare const MOUTH_NAMES: string[];
+export interface PixelFace {
+    tile: string;
+    /** The head's shape, which keeps the moving face from sliding off it. */
+    headMask: string;
+    /** Everything that stays put: the body and hair, with any outline. */
+    behind: string;
+    /** The face moves over the head as it turns towards the pointer. */
+    face: string;
+    front: string;
+    hat: string | null;
+    glasses: string | null;
+    eyes: Record<"open" | "wide" | "shut", string>;
+    mouths: {
+        rest: string;
+        hover: string;
+    };
+    /** Shades hide the eyes, so only the head can show where they look. */
+    eyesVisible: boolean;
+    blinkDelay: number;
+}
+export declare function createPixelFace(name: string, theme: Theme, overrides?: Overrides): PixelFace;
+/** The whole face at rest, for sheets and tests. */
+export declare const pixelSvg: (name: string, theme: Theme, overrides?: Overrides) => string;