@originkit/avatars 0.0.0-stage → 0.1.0

package/dist/bots/calming.d.ts

@@ -0,0 +1,4 @@
+/** What Possibilities calms on a bot. All eight heads stay, so variants never repeat one. */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/bots/calming.js

@@ -0,0 +1,19 @@
+/** What Possibilities calms on a bot. All eight heads stay, so variants never repeat one. */
+export const CALMING = {
+    features: /^(head|eye|side|top|mouth|port|lens|screen|vent)\./,
+    lists: {
+        head: [8, 8],
+        face: [4, 1],
+        eye: [6, 1],
+        mouth: [4, 1],
+        // Antennas, ears and side parts are the extras, and "None" is last in both lists.
+        top: [8, 1, "end"],
+        side: [5, 1, "end"],
+    },
+    rarer: ["trim.straps", "trim.studs"],
+};
+export const NOTES = [
+    "plain bots, with one face style, dot eyes, hardly any add-ons and even proportions.",
+    "more face styles and eyes, and some antennas, ears and side parts.",
+    "anything goes: every face, eye, antenna and bit of trim.",
+];

package/dist/bots/controls.d.ts

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

package/dist/bots/controls.js

@@ -0,0 +1,78 @@
+import { containerControls } from "../container.js";
+import { choice, palette, slider, toggle } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { SIDE_NAMES, TOP_OPTIONS } from "./attachments.js";
+import { CYCLOPS_EYES, EYE_LABELS, FACE_NAMES, LENS_EYES, MOUTH_KINDS, PAIR_EYES } from "./faces.js";
+import { HEAD_NAMES } from "./heads.js";
+import { LIGHTS, PAINTS } from "./palette.js";
+const indexOf = (value, count) => Math.floor(value * count);
+/** The heads built with each extra measurement. */
+const TALL_HEADS = ["TV", "Pill", "Dome", "Acorn", "Bucket"];
+const SQUARE_HEADS = ["TV", "Cube", "Orb", "Dome", "Acorn"];
+const CUT_HEADS = ["Bucket", "Octagon"];
+const EYES_FOR = {
+    Band: PAIR_EYES,
+    Screen: PAIR_EYES,
+    Goggles: LENS_EYES,
+    Porthole: CYCLOPS_EYES,
+};
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const head = HEAD_NAMES[indexOf(t("head"), HEAD_NAMES.length)];
+    const face = FACE_NAMES[indexOf(t("face"), FACE_NAMES.length)];
+    const paint = PAINTS[indexOf(t("paint"), PAINTS.length)];
+    const top = list(choice(t, "top", "Top", "list", TOP_OPTIONS));
+    const side = list(choice(t, "side", "Sides", "list", SIDE_NAMES.map((label) => ({ label }))));
+    const topName = TOP_OPTIONS[Number(top.selected)].label;
+    const hasParts = topName !== "None" || SIDE_NAMES[Number(side.selected)] !== "None";
+    const sections = [
+        {
+            title: "Head",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                choice(t, "head", "Head", "list", HEAD_NAMES.map((label) => ({ label }))),
+                slider(t, "head.rx", "Head size", 0, 100, "%"),
+                ...(TALL_HEADS.includes(head) ? [slider(t, "head.ry", "Height", 0, 100, "%")] : []),
+                ...(SQUARE_HEADS.includes(head) ? [slider(t, "head.n", "Squareness", 0, 100, "%")] : []),
+                ...(CUT_HEADS.includes(head) ? [slider(t, "head.round", "Corners", 0, 100, "%")] : []),
+                ...(head === "Bucket" ? [slider(t, "head.taper", "Taper", 0, 100, "%")] : []),
+            ],
+        },
+        {
+            title: "Face",
+            controls: [
+                list(choice(t, "face", "Style", "list", FACE_NAMES.map((label) => ({ label })))),
+                list(choice(t, "eye", "Eyes", "list", EYES_FOR[face].map((kind) => ({ label: EYE_LABELS[kind] })))),
+                ...(face === "Screen" ? [list(choice(t, "mouth", "Mouth", "list", MOUTH_KINDS.map((label) => ({ label }))))] : []),
+                ...(face === "Band" || face === "Screen" ? [slider(t, "eye.gap", "Eye gap", 0, 100, "%")] : []),
+            ],
+        },
+        {
+            title: "Parts",
+            controls: [
+                top,
+                ...(topName === "Antenna" ? [slider(t, "top.length", "Antenna length", 0, 100, "%"), slider(t, "top.lean", "Antenna lean", -100, 100, "%")] : []),
+                side,
+                toggle(t, "trim.straps", 60, "Chrome straps"),
+                toggle(t, "trim.studs", 75, "Studs"),
+            ],
+        },
+        {
+            title: "Paint",
+            controls: [
+                palette(t, "paint", "Colour", PAINTS.map(({ body }) => body)),
+                ...(hasParts ? [palette(t, "paint.accent", "Parts", paint.accents)] : []),
+                palette(t, "paint.light", "Lights", LIGHTS),
+                slider(t, "speckle", "Speckle", 0, 100, "%"),
+            ],
+        },
+        {
+            title: "Container",
+            controls: containerControls(t),
+        },
+    ];
+    return sections;
+};

package/dist/bots/faces.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The faces. A face is dark glass with lights behind it, so the visor layer is
+ * drawn as glass and the lights layer glows.
+ */
+import type { Box } from "./heads.ts";
+import type { Traits } from "../traits.ts";
+import type { Shape } from "../types.ts";
+export interface Face {
+    visor: Shape[];
+    eyes: Shape[];
+    /** The mouth, kept apart from the eyes so a blink never moves it. */
+    lights: Shape[];
+    /** The height of the eyes, which a blink closes towards. */
+    eyeY: number;
+}
+export declare const PAIR_EYES: string[];
+export declare const LENS_EYES: string[];
+export declare const CYCLOPS_EYES: string[];
+export declare const EYE_LABELS: Record<string, string>;
+/** In the order the generator picks from, because the panel selects by position. */
+export declare const MOUTH_KINDS: string[];
+export declare const FACE_NAMES: string[];
+export declare const buildFace: (t: Traits, box: Box) => Face;

package/dist/bots/faces.js

@@ -0,0 +1,122 @@
+/**
+ * The faces. A face is dark glass with lights behind it, so the visor layer is
+ * drawn as glass and the lights layer glows.
+ */
+const squircle = (cx, cy, rx, ry, n) => ({ kind: "superellipse", cx, cy, rx, ry, n, rot: 0 });
+function eye(kind, x, y, r) {
+    switch (kind) {
+        case "bar":
+            return squircle(x, y, r * 0.58, r * 1.3, 4);
+        case "pixel":
+            return squircle(x, y, r * 0.92, r * 0.92, 8);
+        case "diamond":
+            return squircle(x, y, r * 1.25, r * 1.25, 1.2);
+        case "slit":
+            return squircle(x, y, r * 1.3, r * 0.42, 4);
+        case "happy":
+            return { kind: "crescent", cx: x, cy: y + r * 0.45, width: r * 1.2, lift: r * 0.9, thickness: r * 0.5 };
+        default:
+            return squircle(x, y, r, r * 1.28, 2);
+    }
+}
+const ring = (cx, cy, r) => ({ kind: "circle", cx, cy, r });
+const bar = (x1, y1, x2, y2, r) => ({ kind: "rod", x1, y1, x2, y2, r });
+export const PAIR_EYES = ["dot", "bar", "pixel", "diamond", "slit", "happy"];
+export const LENS_EYES = ["dot", "pixel", "diamond", "bar"];
+export const CYCLOPS_EYES = ["dot", "pixel", "diamond"];
+export const EYE_LABELS = {
+    dot: "Dots",
+    bar: "Bars",
+    pixel: "Squares",
+    diamond: "Diamonds",
+    slit: "Slits",
+    happy: "Happy",
+};
+/** In the order the generator picks from, because the panel selects by position. */
+export const MOUTH_KINDS = ["Smile", "Flat", "Equalizer", "Chirp"];
+export const FACE_NAMES = ["Band", "Screen", "Goggles", "Porthole"];
+function mouth(t, x, y, width) {
+    const kind = t.pick("mouth", ["smile", "flat", "equalizer", "chirp"]);
+    switch (kind) {
+        case "flat":
+            return [{ kind: "rod", x1: x - width, y1: y, x2: x + width, y2: y, r: 1.3 }];
+        case "chirp":
+            return [{ kind: "circle", cx: x, cy: y, r: width * 0.34 }];
+        case "equalizer": {
+            const bars = t.int("mouth.bars", 4, 6);
+            return Array.from({ length: bars }, (_, i) => {
+                const barX = x - width + (2 * width * i) / (bars - 1);
+                const reach = t.num(`mouth.bar${i}`, 0.8, 3.4);
+                return { kind: "rod", x1: barX, y1: y - reach, x2: barX, y2: y + reach, r: 1 };
+            });
+        }
+        default:
+            return [{ kind: "crescent", cx: x, cy: y + 1.6, width, lift: -2.2, thickness: -1.4 }];
+    }
+}
+/** Cooling slots cut under the visor, in the same dark glass. */
+function vents(t, x, y, width) {
+    const count = t.int("vent.n", 3, 5);
+    return Array.from({ length: count }, (_, i) => {
+        const slotX = x - width + (2 * width * i) / (count - 1);
+        return bar(slotX, y - 2.2, slotX, y + 2.2, 0.95);
+    });
+}
+function band(t, box) {
+    const ry = box.ry * t.num("band.ry", 0.46, 0.56);
+    const y = box.cy - box.ry * 0.26;
+    const r = Math.min(ry * 0.54, box.rx * 0.2);
+    const gap = box.rx * t.num("eye.gap", 0.4, 0.54);
+    const kind = t.pick("eye", PAIR_EYES);
+    return {
+        visor: [
+            squircle(box.cx, y, box.rx, ry, t.num("band.n", 3.4, 5.5)),
+            ...vents(t, box.cx, box.cy + box.ry * 0.72, box.rx * 0.42),
+        ],
+        eyes: [eye(kind, box.cx - gap, y, r), eye(kind, box.cx + gap, y, r)],
+        lights: [],
+        eyeY: y,
+    };
+}
+function screen(t, box) {
+    const eyeY = box.cy - box.ry * 0.26;
+    const mouthY = box.cy + box.ry * 0.5;
+    const r = Math.min(box.ry * 0.24, box.rx * 0.2);
+    const gap = box.rx * t.num("eye.gap", 0.38, 0.52);
+    const kind = t.pick("eye", PAIR_EYES);
+    return {
+        visor: [squircle(box.cx, box.cy, box.rx, box.ry, t.num("screen.n", 3.6, 5.5))],
+        eyes: [eye(kind, box.cx - gap, eyeY, r), eye(kind, box.cx + gap, eyeY, r)],
+        lights: mouth(t, box.cx, mouthY, box.rx * t.num("mouth.width", 0.26, 0.4)),
+        eyeY,
+    };
+}
+function goggles(t, box) {
+    const lens = Math.min(box.rx * 0.46, box.ry * 0.74);
+    const y = box.cy - box.ry * 0.2;
+    const gap = box.rx - lens;
+    const r = lens * t.num("lens.pupil", 0.4, 0.52);
+    const kind = t.pick("eye", LENS_EYES);
+    return {
+        visor: [
+            ring(box.cx - gap, y, lens),
+            ring(box.cx + gap, y, lens),
+            bar(box.cx - gap, y, box.cx + gap, y, 2),
+            ...vents(t, box.cx, box.cy + box.ry * 0.82, box.rx * 0.34),
+        ],
+        eyes: [eye(kind, box.cx - gap, y, r), eye(kind, box.cx + gap, y, r)],
+        lights: [],
+        eyeY: y,
+    };
+}
+function porthole(t, box) {
+    const r = Math.min(box.rx, box.ry) * t.num("port.r", 0.86, 1);
+    const pupil = r * t.num("port.pupil", 0.42, 0.56);
+    return {
+        visor: [ring(box.cx, box.cy, r)],
+        eyes: [eye(t.pick("eye", CYCLOPS_EYES), box.cx, box.cy, pupil)],
+        lights: [],
+        eyeY: box.cy,
+    };
+}
+export const buildFace = (t, box) => t.pick("face", [band, screen, goggles, porthole])(t, box);

package/dist/bots/heads.d.ts

@@ -0,0 +1,15 @@
+/** The head shapes, each with the box its face has to fit inside. */
+import type { Traits } from "../traits.ts";
+export interface Box {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export interface Head extends Box {
+    path: string;
+    face: Box;
+}
+/** In the order of `HEADS`, because the panel selects by position. */
+export declare const HEAD_NAMES: string[];
+export declare const pickHead: (t: Traits) => Head;

package/dist/bots/heads.js

@@ -0,0 +1,66 @@
+/** The head shapes, each with the box its face has to fit inside. */
+import { roundedPolygon, superellipse } from "./paths.js";
+const CENTER_X = 50;
+const CENTER_Y = 58;
+/** Places a head at the frame's centre, with a face that is a fraction of its size. */
+function head(rx, ry, path, faceRx, faceRy, faceDrop = 0) {
+    const cy = CENTER_Y;
+    return {
+        cx: CENTER_X,
+        cy,
+        rx,
+        ry,
+        path,
+        face: { cx: CENTER_X, cy: cy + ry * faceDrop, rx: rx * faceRx, ry: ry * faceRy },
+    };
+}
+const place = (rx, ry, n, nLower = n) => ({ cx: CENTER_X, cy: CENTER_Y, rx, ry, n, nLower });
+const tv = (t) => {
+    const [rx, ry] = [t.num("head.rx", 33, 37), t.num("head.ry", 25, 29)];
+    return head(rx, ry, superellipse(place(rx, ry, t.num("head.n", 4.5, 6))), 0.8, 0.68);
+};
+const cube = (t) => {
+    const r = t.num("head.rx", 29, 33);
+    return head(r, r, superellipse(place(r, r, t.num("head.n", 4.5, 6))), 0.78, 0.66);
+};
+const orb = (t) => {
+    const r = t.num("head.rx", 31, 35);
+    return head(r, r, superellipse(place(r, r, t.num("head.n", 2, 2.3))), 0.72, 0.6);
+};
+const pill = (t) => {
+    const [rx, ry] = [t.num("head.rx", 24, 27), t.num("head.ry", 33, 36)];
+    return head(rx, ry, superellipse(place(rx, ry, 3)), 0.78, 0.52, -0.12);
+};
+const dome = (t) => {
+    const [rx, ry] = [t.num("head.rx", 31, 35), t.num("head.ry", 29, 32)];
+    return head(rx, ry, superellipse(place(rx, ry, 2.1, t.num("head.n", 5, 6.5))), 0.78, 0.58, 0.12);
+};
+const acorn = (t) => {
+    const [rx, ry] = [t.num("head.rx", 31, 35), t.num("head.ry", 29, 33)];
+    return head(rx, ry, superellipse(place(rx, ry, t.num("head.n", 5, 6.5), 2.1)), 0.78, 0.54, -0.14);
+};
+const bucket = (t) => {
+    const [rx, ry] = [t.num("head.rx", 31, 35), t.num("head.ry", 27, 31)];
+    const top = rx * t.num("head.taper", 0.68, 0.8);
+    const [cx, cy] = [CENTER_X, CENTER_Y];
+    const path = roundedPolygon([
+        [cx - top, cy - ry],
+        [cx + top, cy - ry],
+        [cx + rx, cy + ry],
+        [cx - rx, cy + ry],
+    ], t.num("head.round", 0.55, 0.75));
+    return head(rx, ry, path, 0.7, 0.62, 0.08);
+};
+const octagon = (t) => {
+    const r = t.num("head.rx", 31, 34);
+    const corner = r / Math.cos(Math.PI / 8);
+    const vertices = Array.from({ length: 8 }, (_, i) => {
+        const angle = Math.PI / 8 + (i * Math.PI) / 4;
+        return [CENTER_X + corner * Math.cos(angle), CENTER_Y + corner * Math.sin(angle)];
+    });
+    return head(r, r, roundedPolygon(vertices, t.num("head.round", 0.45, 0.65)), 0.76, 0.64);
+};
+const HEADS = [tv, cube, orb, pill, dome, acorn, bucket, octagon];
+/** In the order of `HEADS`, because the panel selects by position. */
+export const HEAD_NAMES = ["TV", "Cube", "Orb", "Pill", "Dome", "Acorn", "Bucket", "Octagon"];
+export const pickHead = (t) => t.pick("head", HEADS)(t);

package/dist/bots/index.d.ts

@@ -0,0 +1,5 @@
+import { type Overrides } from "../traits.ts";
+import type { AvatarParts } from "../types.ts";
+export declare function botParts(name: string, overrides?: Overrides): AvatarParts;
+/** Renders the bot for a name as SVG markup. The same name always gives the same bot. */
+export declare function generateBot(name: string, overrides?: Overrides): string;

package/dist/bots/index.js

@@ -0,0 +1,47 @@
+import { buildAttachments } from "./attachments.js";
+import { buildFace } from "./faces.js";
+import { pickHead } from "./heads.js";
+import { pickColors } from "./palette.js";
+import { shapePath } from "./paths.js";
+import { buildTrim } from "./trim.js";
+import { containerOf, inContainer } from "../container.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+export function botParts(name, overrides) {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const head = pickHead(t);
+    const face = buildFace(t, head.face);
+    const { chrome, studs } = buildTrim(t, head);
+    return {
+        colors: pickColors(t),
+        head: [head.path],
+        accents: buildAttachments(t, head),
+        visor: face.visor.map(shapePath),
+        visorShapes: face.visor,
+        eyes: face.eyes.map(shapePath),
+        eyeShapes: face.eyes,
+        lights: face.lights.map(shapePath),
+        lightShapes: face.lights,
+        chrome: chrome.map(shapePath),
+        chromeShapes: chrome,
+        studs: studs.map(shapePath),
+        studShapes: studs,
+        speckle: t("speckle"),
+        eyeY: face.eyeY,
+        container: containerOf(t),
+    };
+}
+/** Chrome's colour in flat pictures. In 3D it reflects the studio instead. */
+const CHROME = "#c9ced8";
+const layer = (fill, paths) => paths.length ? `<g fill="${fill}">${paths.map((d) => `<path d="${d}"/>`).join("")}</g>` : "";
+/** Renders the bot for a name as SVG markup. The same name always gives the same bot. */
+export function generateBot(name, overrides) {
+    const { colors, head, accents, visor, eyes, lights, chrome, studs, container } = botParts(name, overrides);
+    const art = layer(colors.accent, accents) +
+        layer(colors.body, head) +
+        layer(CHROME, chrome) +
+        layer(colors.visor, [...visor, ...studs]) +
+        layer(colors.light, [...eyes, ...lights]);
+    return inContainer(art, container, "bot-card");
+}

package/dist/bots/palette.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The paint box. Colours are chosen by hand rather than computed, so a bot is
+ * only ever a combination that already looks good. `bots.test` holds every
+ * combination to the contrast the face needs.
+ */
+import type { Traits } from "../traits.ts";
+import type { Colors } from "../types.ts";
+/** Each paint lists the accents that were picked to sit well on it. */
+export declare const PAINTS: {
+    body: string;
+    accents: string[];
+}[];
+export declare const VISOR = "#000000";
+export declare const LIGHTS: string[];
+export declare function pickColors(t: Traits): Colors;

package/dist/bots/palette.js

@@ -0,0 +1,30 @@
+/**
+ * The paint box. Colours are chosen by hand rather than computed, so a bot is
+ * only ever a combination that already looks good. `bots.test` holds every
+ * combination to the contrast the face needs.
+ */
+/** Each paint lists the accents that were picked to sit well on it. */
+export const PAINTS = [
+    { body: "#f2483f", accents: ["#ffd23f", "#f6efe2", "#1f2a6b"] }, // tomato
+    { body: "#ff8a2b", accents: ["#fff1cf", "#2740a8", "#7a2bd6"] }, // tangerine
+    { body: "#ffc933", accents: ["#ff5a4f", "#2b63ff", "#6a3fd1"] }, // sunflower
+    { body: "#35c46b", accents: ["#fff1cf", "#ffd23f", "#0f5e6e"] }, // apple
+    { body: "#16b8a6", accents: ["#fff1cf", "#17406b", "#ffd23f"] }, // lagoon
+    { body: "#35a7ff", accents: ["#ffd23f", "#fff1cf", "#5a2bc8"] }, // sky
+    { body: "#3b5bff", accents: ["#ff8a2b", "#ffd23f", "#8ff0d8"] }, // cobalt
+    { body: "#8a4dff", accents: ["#ffd23f", "#6ff0c8", "#ffb3d9"] }, // grape
+    { body: "#ff5fa2", accents: ["#fff1cf", "#ffd23f", "#4a2bb8"] }, // bubblegum
+    { body: "#c9d2e6", accents: ["#ff5a4f", "#3b5bff", "#0f7f70"] }, // chrome
+    { body: "#f4efe3", accents: ["#ff5a4f", "#16b8a6", "#3b5bff"] }, // cream
+];
+export const VISOR = "#000000";
+export const LIGHTS = ["#59f5b0", "#4fe3ff", "#ffc24b", "#ff6fb5", "#eef4ff", "#c9ff4d"];
+export function pickColors(t) {
+    const paint = t.pick("paint", PAINTS);
+    return {
+        body: t.color("paint") ?? paint.body,
+        accent: t.color("paint.accent") ?? t.pick("paint.accent", paint.accents),
+        visor: VISOR,
+        light: t.color("paint.light") ?? t.pick("paint.light", LIGHTS),
+    };
+}

package/dist/bots/paths.d.ts

@@ -0,0 +1,25 @@
+/** SVG path builders. Every coordinate is absolute, in the 100×100 viewBox. */
+import type { Shape } from "../types.ts";
+export interface Superellipse {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+    /** Squareness: 2 is an ellipse, higher tends towards a rectangle. */
+    n: number;
+    /** Squareness of the lower half, for shapes that differ top to bottom. */
+    nLower?: number;
+}
+type Point = [number, number];
+/** |x/a|^n + |y/b|^n = 1, with one cubic Bézier per quadrant. */
+export declare function superellipse({ cx, cy, rx, ry, n, nLower }: Superellipse): string;
+export declare function circle(cx: number, cy: number, r: number): string;
+/** A straight bar with fully rounded ends. */
+export declare function rod(x1: number, y1: number, x2: number, y2: number, r: number): string;
+/** A closed outline with its corners cut back along each edge by `round`, from 0 to 1. */
+export declare function roundedPolygon(vertices: Point[], round: number): string;
+/** A curved sliver, bowing upwards for a positive `lift`. Used for smiles and happy eyes. */
+export declare function crescent(cx: number, cy: number, width: number, lift: number, thickness: number): string;
+/** A shape's outline for still pictures, from the same numbers the 3D shader draws. */
+export declare function shapePath(shape: Shape): string;
+export {};

package/dist/bots/paths.js

@@ -0,0 +1,89 @@
+/** SVG path builders. Every coordinate is absolute, in the 100×100 viewBox. */
+const fmt = (v) => {
+    const rounded = Math.round(v * 100) / 100;
+    return Object.is(rounded, -0) ? "0" : String(rounded);
+};
+/** Bézier handle length that passes through the curve's 45° point. */
+const handle = (n) => Math.min(1, (8 * 2 ** (-1 / n) - 4) / 3);
+/** |x/a|^n + |y/b|^n = 1, with one cubic Bézier per quadrant. */
+export function superellipse({ cx, cy, rx, ry, n, nLower = n }) {
+    const upper = handle(n);
+    const lower = handle(nLower);
+    const at = (x, y) => `${fmt(cx + x)} ${fmt(cy + y)}`;
+    return (`M${at(rx, 0)}` +
+        `C${at(rx, ry * lower)} ${at(rx * lower, ry)} ${at(0, ry)}` +
+        `C${at(-rx * lower, ry)} ${at(-rx, ry * lower)} ${at(-rx, 0)}` +
+        `C${at(-rx, -ry * upper)} ${at(-rx * upper, -ry)} ${at(0, -ry)}` +
+        `C${at(rx * upper, -ry)} ${at(rx, -ry * upper)} ${at(rx, 0)}Z`);
+}
+export function circle(cx, cy, r) {
+    const left = `${fmt(cx - r)} ${fmt(cy)}`;
+    const right = `${fmt(cx + r)} ${fmt(cy)}`;
+    return `M${left}A${fmt(r)} ${fmt(r)} 0 1 0 ${right}A${fmt(r)} ${fmt(r)} 0 1 0 ${left}Z`;
+}
+/** A straight bar with fully rounded ends. */
+export function rod(x1, y1, x2, y2, r) {
+    const length = Math.hypot(x2 - x1, y2 - y1);
+    const nx = (-(y2 - y1) / length) * r;
+    const ny = ((x2 - x1) / length) * r;
+    const arc = `A${fmt(r)} ${fmt(r)} 0 0 0`;
+    return (`M${fmt(x1 + nx)} ${fmt(y1 + ny)}` +
+        `L${fmt(x2 + nx)} ${fmt(y2 + ny)}` +
+        `${arc} ${fmt(x2 - nx)} ${fmt(y2 - ny)}` +
+        `L${fmt(x1 - nx)} ${fmt(y1 - ny)}` +
+        `${arc} ${fmt(x1 + nx)} ${fmt(y1 + ny)}Z`);
+}
+/** A closed outline with its corners cut back along each edge by `round`, from 0 to 1. */
+export function roundedPolygon(vertices, round) {
+    const count = vertices.length;
+    const k = round / 2;
+    const at = (i) => vertices[((i % count) + count) % count];
+    const cut = (i, j) => {
+        const [x0, y0] = at(i);
+        const [x1, y1] = at(j);
+        return `${fmt(x0 + (x1 - x0) * k)} ${fmt(y0 + (y1 - y0) * k)}`;
+    };
+    let d = `M${cut(0, -1)}`;
+    for (let i = 0; i < count; i++) {
+        const [x, y] = at(i);
+        d += `Q${fmt(x)} ${fmt(y)} ${cut(i, i + 1)}L${cut(i + 1, i)}`;
+    }
+    return `${d}Z`;
+}
+/** A curved sliver, bowing upwards for a positive `lift`. Used for smiles and happy eyes. */
+export function crescent(cx, cy, width, lift, thickness) {
+    const left = `${fmt(cx - width)} ${fmt(cy)}`;
+    const right = `${fmt(cx + width)} ${fmt(cy)}`;
+    return (`M${left}Q${fmt(cx)} ${fmt(cy - lift * 2)} ${right}` +
+        `Q${fmt(cx)} ${fmt(cy - lift * 2 + thickness * 2)} ${left}Z`);
+}
+/** A quadratic Bézier stroke with round ends, as a filled outline: each side offset along it. */
+function curve(x1, y1, cx, cy, x2, y2, r) {
+    const steps = 16;
+    const along = Array.from({ length: steps + 1 }, (_, i) => {
+        const u = i / steps;
+        const point = [(1 - u) ** 2 * x1 + 2 * u * (1 - u) * cx + u * u * x2, (1 - u) ** 2 * y1 + 2 * u * (1 - u) * cy + u * u * y2];
+        const tangent = [2 * (1 - u) * (cx - x1) + 2 * u * (x2 - cx), 2 * (1 - u) * (cy - y1) + 2 * u * (y2 - cy)];
+        const length = Math.hypot(...tangent) || 1;
+        return { point, normal: [-tangent[1] / length, tangent[0] / length] };
+    });
+    const side = (sign) => along.map(({ point, normal }) => `${fmt(point[0] + normal[0] * r * sign)} ${fmt(point[1] + normal[1] * r * sign)}`);
+    const [left, right] = [side(1), side(-1).reverse()];
+    const cap = `A${fmt(r)} ${fmt(r)} 0 0 1`;
+    return `M${left.join("L")}${cap} ${right[0]}L${right.join("L")}${cap} ${left[0]}Z`;
+}
+/** A shape's outline for still pictures, from the same numbers the 3D shader draws. */
+export function shapePath(shape) {
+    switch (shape.kind) {
+        case "superellipse":
+            return superellipse(shape);
+        case "crescent":
+            return crescent(shape.cx, shape.cy, shape.width, shape.lift, shape.thickness);
+        case "rod":
+            return rod(shape.x1, shape.y1, shape.x2, shape.y2, shape.r);
+        case "circle":
+            return circle(shape.cx, shape.cy, shape.r);
+        case "curve":
+            return curve(shape.x1, shape.y1, shape.cx, shape.cy, shape.x2, shape.y2, shape.r);
+    }
+}

package/dist/bots/trim.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The fine detail on a bot's shell: chrome straps and ear rings, and dark studs.
+ * Each sits in the band of skin between the top of the head and the face.
+ */
+import type { Head } from "./heads.ts";
+import type { Traits } from "../traits.ts";
+import type { Shape } from "../types.ts";
+export interface Trim {
+    chrome: Shape[];
+    studs: Shape[];
+}
+export declare function buildTrim(t: Traits, head: Head): Trim;

package/dist/bots/trim.js

@@ -0,0 +1,37 @@
+/**
+ * The fine detail on a bot's shell: chrome straps and ear rings, and dark studs.
+ * Each sits in the band of skin between the top of the head and the face.
+ */
+import { earDiscs } from "./attachments.js";
+const circle = (cx, cy, r) => ({ kind: "circle", cx, cy, r });
+/** Below this much skin there is no room for detail, and it would crowd the face. */
+const MIN_ROOM = 6;
+export function buildTrim(t, head) {
+    const { cx, cy, ry, rx, face } = head;
+    const top = cy - ry;
+    const faceTop = face.cy - face.ry;
+    const headroom = faceTop - top;
+    const sideroom = rx - face.rx;
+    const chrome = earDiscs(t, head).map(({ x, y, r }) => circle(x, y, r * 0.5));
+    const studs = [];
+    if (headroom >= MIN_ROOM && t("trim.straps") * 100 < 60) {
+        const gap = rx * t.num("trim.gap", 0.34, 0.46);
+        for (const side of [-1, 1]) {
+            chrome.push({ kind: "rod", x1: cx + side * gap, y1: top + 3, x2: cx + side * gap * 1.08, y2: faceTop - 1.5, r: 0.9 });
+        }
+    }
+    if (t("trim.studs") * 100 < 75) {
+        if (headroom >= MIN_ROOM) {
+            const y = top + headroom * 0.5;
+            for (const side of [-1, 1])
+                studs.push(circle(cx + side * rx * 0.17, y, 1.9));
+        }
+        if (sideroom >= MIN_ROOM) {
+            for (const side of [-1, 1]) {
+                const x = cx + side * (face.rx + sideroom * 0.5);
+                studs.push(circle(x, cy - 3.2, 1.5), circle(x, cy + 3.2, 1.5));
+            }
+        }
+    }
+    return { chrome, studs };
+}

package/dist/bubbles/calming.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What Possibilities calms on a bubble. Low keeps the eight softest shapes, one for each
+ * variant, then adds the lobed and spiky ones. Indices are into `SHAPES`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/bubbles/calming.js

@@ -0,0 +1,19 @@
+/**
+ * What Possibilities calms on a bubble. Low keeps the eight softest shapes, one for each
+ * variant, then adds the lobed and spiky ones. Indices are into `SHAPES`, plainest first.
+ */
+export const CALMING = {
+    features: /^(depth|lean|tilt|spread|eyes\.y|core\.y|body\.size|eye\.(gap|lean|size))$/,
+    lists: {
+        // Capsule, Egg, Pillow, Tile, Pebble, Bean, Kite, Scallop, then Apple, Gem, Prism, Peanut,
+        // Cloud, Clover, Trefoil, Flower, Star, Burst.
+        shape: [18, 8, [1, 3, 6, 15, 17, 9, 12, 0, 7, 10, 16, 14, 5, 2, 11, 8, 4, 13]],
+        "eye.kind": [12, 1],
+    },
+    rarer: ["mouth"],
+};
+export const NOTES = [
+    "soft, simple shapes like capsules, eggs, pebbles and pillows, with one kind of eye.",
+    "adds apples, gems, peanuts, clouds and clovers, and more kinds of eye.",
+    "anything goes, up to flowers, stars and bursts.",
+];

package/dist/bubbles/controls.d.ts

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