@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/bubbles/controls.js

@@ -0,0 +1,69 @@
+import { mix, WHITE } from "../colors.js";
+import { choice, clearingColor, optional, slider } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey, createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { coloursOf, defaultTitle, EYE_KINDS, MAX_TEXT, MOUTH_ODDS, MOUTHS, PALETTES, SHAPES } from "./index.js";
+const COLOURS = ["core", "accent", "edge"];
+/** A new palette starts from its own colours, not the ones set by hand for the last. */
+function paletteControl(t) {
+    const swatches = PALETTES.map(({ label, core, accent }) => ({
+        label,
+        color: `radial-gradient(circle at 50% 45%, ${core} 35%, ${accent} 75%, ${mix(core, WHITE, 0.5)})`,
+    }));
+    return COLOURS.reduce(clearingColor, choice(t, "palette", "Colour", "swatches", swatches));
+}
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const colours = coloursOf(t);
+    return [
+        {
+            title: "Words",
+            controls: [
+                {
+                    type: "text",
+                    id: "text.title",
+                    label: "Title",
+                    value: t.text("text.title") ?? "",
+                    placeholder: defaultTitle(t),
+                    maxLength: MAX_TEXT,
+                },
+                slider(t, "tilt", "Tilt", -13, 13, "°"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                paletteControl(t),
+                {
+                    type: "colors",
+                    id: "bubble.colors",
+                    label: "Blend",
+                    colors: [colours.core, colours.accent, colours.edge].map((color, i) => ({ id: colorKey(COLOURS[i]), color })),
+                },
+                slider(t, "blend", "Core size", 0, 100, "%"),
+                slider(t, "grain", "Grain", 0, 100, "%"),
+            ],
+        },
+        {
+            title: "Shape",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                list(choice(t, "shape", "Shape", "list", SHAPES.map(({ name: label }) => ({ label })))),
+                slider(t, "depth", "Depth", 0, 100, "%"),
+                slider(t, "body.size", "Body size", 0, 100, "%"),
+            ],
+        },
+        {
+            title: "Eyes",
+            controls: [
+                list(choice(t, "eye.kind", "Eyes", "list", EYE_KINDS.map((label) => ({ label })))),
+                optional(t, "mouth", MOUTH_ODDS, "mouth.kind", "Mouth", "list", MOUTHS.map((label) => ({ label }))),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "eye.gap", "Gap", 0, 100, "%"),
+                slider(t, "eye.lean", "Lean", -100, 100, "%"),
+            ],
+        },
+    ];
+};

package/dist/bubbles/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Bubbles: a soft shape with words on it. A vivid core blends out to a pale rim, under
+ * fine white grain that gathers towards the edge, with two eyes on top.
+ *
+ * The art and the eyes are kept apart. The art has the costly filters, so it goes on a
+ * layer of its own and is only ever moved, while the eyes can repaint on their own.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+/** Warm and cool take turns, so neighbouring variants never share a colour. */
+export declare const PALETTES: {
+    label: string;
+    core: string;
+    accent: string;
+}[];
+export declare const EFFECTS: readonly ["squish", "wiggle", "bounce"];
+export type Effect = (typeof EFFECTS)[number];
+export declare const EYE_KINDS: string[];
+/** Most bubbles have no mouth, as in the reference: one in this many hundred does. */
+export declare const MOUTH_ODDS = 30;
+export declare const MOUTHS: string[];
+/** Words past this would be too small to read, however far they shrink. */
+export declare const MAX_TEXT = 28;
+export declare const VIEW_BOX = "-2 -2 104 104";
+/** `[how many times round, how deep, where it starts]`. */
+type Wave = [number, number, number];
+interface Shape {
+    name: string;
+    /** How a tap moves it. The motion suits the silhouette, so it comes with it. */
+    effect: Effect;
+    /** Wider than tall above 1, and taller than wide below it. */
+    wide?: number;
+    /** How far the whole shape may lean either way, in degrees. */
+    lean?: number;
+    waves(t: Traits): Wave[];
+}
+/**
+ * Every outline is a circle with waves added to its radius. Curves made this way have
+ * no corners anywhere, which is what gives the shapes their soft, even edge. A wave of
+ * twice the count taken away flattens each tip into a fat, round lobe.
+ *
+ * Neighbours in this list are as unlike as they can be, in both proportion and lobes,
+ * because a variant is the next along from the one before it.
+ */
+export declare const SHAPES: Shape[];
+export declare const shapeOf: (t: Traits) => Shape;
+/** The colours in use, each of which can be changed by hand. */
+export declare function coloursOf(t: Traits): {
+    core: string;
+    accent: string;
+    edge: string;
+};
+export declare const defaultTitle: (t: Traits) => string;
+export declare const eyeKindOf: (t: Traits) => string;
+/** Which mouth, if any. */
+export declare const mouthOf: (t: Traits) => string | undefined;
+export interface Bubble {
+    art: string;
+    eyes: string;
+    effect: Effect;
+    blinkDelay: number;
+}
+export declare function createBubble(name: string, overrides?: Overrides, ids?: string): Bubble;
+/** The bubble at rest, for thumbnails. */
+export declare const bubbleSvg: (name: string, overrides?: Overrides) => string;
+export {};

package/dist/bubbles/index.js

@@ -0,0 +1,279 @@
+/**
+ * Bubbles: a soft shape with words on it. A vivid core blends out to a pale rim, under
+ * fine white grain that gathers towards the edge, with two eyes on top.
+ *
+ * The art and the eyes are kept apart. The art has the costly filters, so it goes on a
+ * layer of its own and is only ever moved, while the eyes can repaint on their own.
+ */
+import { mix, WHITE } from "../colors.js";
+import { scopeIds } from "../art.js";
+import { calmed } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+/** Warm and cool take turns, so neighbouring variants never share a colour. */
+export const PALETTES = [
+    { label: "Azure", core: "#1584ff", accent: "#3deaff" },
+    { label: "Lemon", core: "#ffb800", accent: "#fff35c" },
+    { label: "Magenta", core: "#ff0a9c", accent: "#ff7ae6" },
+    { label: "Ocean", core: "#0057ff", accent: "#00e0c6" },
+    { label: "Emerald", core: "#08c236", accent: "#3fe6c4" },
+    { label: "Plum", core: "#9b1fe8", accent: "#ff5cab" },
+    { label: "Sunset", core: "#ff4d1a", accent: "#ffc02e" },
+    { label: "Teal", core: "#008f8f", accent: "#5cc8ff" },
+    { label: "Violet", core: "#7032ff", accent: "#e05cff" },
+    { label: "Lime", core: "#5ccc00", accent: "#e6ff4d" },
+    { label: "Coral", core: "#ff2a52", accent: "#ff9d5c" },
+    { label: "Grape", core: "#4b1fd1", accent: "#ff7ad9" },
+    { label: "Lagoon", core: "#00aec4", accent: "#3cf2a6" },
+    { label: "Ruby", core: "#e0002e", accent: "#ff3dd2" },
+    { label: "Indigo", core: "#2c31ff", accent: "#35c0ff" },
+    { label: "Peach", core: "#ff7a45", accent: "#ffb3c7" },
+    { label: "Arctic", core: "#00b3ff", accent: "#a5f3ff" },
+    { label: "Mango", core: "#ff8c00", accent: "#ffe14d" },
+    { label: "Forest", core: "#00995c", accent: "#7dff8a" },
+    { label: "Rose", core: "#ff3d7f", accent: "#ffc2e0" },
+    { label: "Cobalt", core: "#1a3dff", accent: "#9d7dff" },
+    { label: "Candy", core: "#ff3db8", accent: "#ffd23d" },
+    { label: "Aqua", core: "#00d4b4", accent: "#4da6ff" },
+    { label: "Amber", core: "#ff9f1a", accent: "#ff4d6d" },
+];
+/** What a bubble says until it is told otherwise. */
+const PHRASES = [
+    "say hi!", "good vibes only", "hello, legend", "stay curious", "big mood", "main character",
+    "dream bigger", "on a roll", "pure magic", "made you look", "vibe check", "soft launch",
+    "stay golden", "level up", "zero chill", "hey, you",
+];
+export const EFFECTS = ["squish", "wiggle", "bounce"];
+export const EYE_KINDS = ["Pill", "Oval", "Dot", "Slit", "Wide", "Bar", "Square", "Diamond", "Happy", "Sparkle", "Heart", "Cross"];
+/** Most bubbles have no mouth, as in the reference: one in this many hundred does. */
+export const MOUTH_ODDS = 30;
+export const MOUTHS = ["Smile", "Grin", "Ooh", "Cat", "Flat", "Smirk", "Wobbly"];
+/** Words past this would be too small to read, however far they shrink. */
+export const MAX_TEXT = 28;
+export const VIEW_BOX = "-2 -2 104 104";
+/** How far the widest part of a bubble reaches from the centre, so all read the same size. */
+const REACH = 49;
+/** Fine enough that an outline never shows a corner, even at its largest. */
+const OUTLINE_POINTS = 360;
+const MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
+/** Width of a character in that stack, as a share of its size. */
+const CHARACTER = 0.6;
+const TITLE_SIZE = 7.6;
+const SEEDS = 997;
+const round2 = (value) => Math.round(value * 100) / 100;
+const escaped = (text) => text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+const turn = (t, key) => t.num(key, 0, 2 * Math.PI);
+/**
+ * Every outline is a circle with waves added to its radius. Curves made this way have
+ * no corners anywhere, which is what gives the shapes their soft, even edge. A wave of
+ * twice the count taken away flattens each tip into a fat, round lobe.
+ *
+ * Neighbours in this list are as unlike as they can be, in both proportion and lobes,
+ * because a variant is the next along from the one before it.
+ */
+export const SHAPES = [
+    { name: "Scallop", effect: "wiggle", waves: (t) => [[t.int("scallop.n", 12, 15), t.num("depth", 0.05, 0.07), turn(t, "a")]] },
+    { name: "Capsule", effect: "bounce", wide: 1.65, lean: 16, waves: (t) => [[4, t.num("depth", -0.1, -0.06), 0], [2, 0.03, 0]] },
+    { name: "Clover", effect: "squish", wide: 1.12, lean: 10, waves: (t) => [[4, t.num("depth", 0.16, 0.2), 0], [8, -0.055, 0], [2, 0.04, turn(t, "a")]] },
+    { name: "Egg", effect: "bounce", wide: 0.72, lean: 14, waves: (t) => [[1, t.num("depth", 0.07, 0.12), Math.PI / 2], [3, 0.025, turn(t, "a")]] },
+    { name: "Star", effect: "wiggle", lean: 14, waves: (t) => [[5, t.num("depth", 0.2, 0.25), -Math.PI / 2], [10, 0.025, -Math.PI]] },
+    { name: "Cloud", effect: "squish", wide: 1.5, lean: 6, waves: (t) => [[6, t.num("depth", 0.07, 0.1), turn(t, "a")], [3, 0.05, turn(t, "b")], [12, -0.018, 0]] },
+    { name: "Pillow", effect: "bounce", waves: (t) => [[3, t.num("depth", 0.11, 0.14), turn(t, "a")], [2, 0.07, turn(t, "b")], [6, 0.04, turn(t, "c")]] },
+    // Deep enough on one side to dimple at the top.
+    { name: "Apple", effect: "bounce", wide: 1.08, lean: 14, waves: (t) => [[1, t.num("depth", 0.68, 0.76), -Math.PI / 2]] },
+    { name: "Flower", effect: "wiggle", waves: (t) => [[6, t.num("depth", 0.17, 0.21), turn(t, "a")], [12, -0.05, 0]] },
+    { name: "Bean", effect: "squish", wide: 1.3, lean: 22, waves: (t) => [[2, t.num("depth", 0.16, 0.2), Math.PI / 2], [1, 0.1, Math.PI / 2], [3, 0.09, -Math.PI / 2]] },
+    { name: "Gem", effect: "wiggle", wide: 1.18, lean: 12, waves: (t) => [[6, t.num("depth", -0.09, -0.07), 0], [2, 0.03, 0]] },
+    { name: "Trefoil", effect: "squish", lean: 18, waves: (t) => [[3, t.num("depth", 0.2, 0.25), -Math.PI / 2], [6, -0.06, -Math.PI]] },
+    { name: "Kite", effect: "bounce", wide: 0.84, waves: (t) => [[4, t.num("depth", 0.13, 0.17), 0], [8, 0.035, 0]] },
+    { name: "Burst", effect: "wiggle", waves: (t) => [[t.int("burst.n", 8, 10), t.num("depth", 0.12, 0.15), turn(t, "a")]] },
+    // Past a fifth, a wave of two pinches the middle in.
+    { name: "Peanut", effect: "squish", lean: 20, waves: (t) => [[2, t.num("depth", 0.3, 0.34), 0], [4, -0.03, 0]] },
+    { name: "Tile", effect: "bounce", lean: 24, waves: (t) => [[4, t.num("depth", -0.11, -0.08), 0]] },
+    { name: "Prism", effect: "bounce", lean: 14, waves: (t) => [[3, t.num("depth", 0.1, 0.13), Math.PI / 2], [6, 0.015, 0]] },
+    { name: "Pebble", effect: "squish", wide: 1.22, lean: 20, waves: (t) => [[2, t.num("depth", 0.05, 0.08), turn(t, "a")], [3, 0.05, turn(t, "b")], [5, 0.03, turn(t, "c")]] },
+];
+export const shapeOf = (t) => t.pick("shape", SHAPES);
+function drawOutline(t, shape) {
+    const waves = shape.waves(t);
+    const wide = shape.wide ?? 1;
+    const lean = (t.jitter("lean", shape.lean ?? 0) * Math.PI) / 180;
+    // Around the origin, stretched then leaned, to be sized once its extent is known.
+    const turned = Array.from({ length: OUTLINE_POINTS }, (_, i) => {
+        const angle = (i * 2 * Math.PI) / OUTLINE_POINTS;
+        const r = 1 + waves.reduce((sum, [count, depth, start]) => sum + depth * Math.cos(count * angle + start), 0);
+        const x = r * wide * Math.cos(angle);
+        const y = r * Math.sin(angle);
+        return [x * Math.cos(lean) - y * Math.sin(lean), x * Math.sin(lean) + y * Math.cos(lean)];
+    });
+    // Centred on its own extent, so a lopsided shape such as the apple keeps its face in the middle.
+    const middle = (axis) => {
+        const values = turned.map((point) => point[axis]);
+        return (Math.min(...values) + Math.max(...values)) / 2;
+    };
+    const [mx, my] = [middle(0), middle(1)];
+    const raw = turned.map(([x, y]) => [x - mx, y - my]);
+    const scale = (REACH * t.num("body.size", 0.88, 1)) / Math.max(...raw.flatMap(([x, y]) => [Math.abs(x), Math.abs(y)]));
+    const points = raw.map(([x, y]) => [50 + x * scale, 50 + y * scale]);
+    /** How far the body runs each way from the centre, along a line. */
+    const reachAlong = (axis, at) => Math.min(...[-1, 1].map((side) => Math.max(0, ...points.filter((p) => Math.abs(p[1 - axis] - at) < 3 && (p[axis] - 50) * side > 0).map((p) => Math.abs(p[axis] - 50)))));
+    return {
+        d: `M${points.map(([x, y]) => `${round2(x)} ${round2(y)}`).join("L")}Z`,
+        rx: scale * wide,
+        ry: scale,
+        /** How much room the words have across, at a given height. */
+        across: (y) => reachAlong(0, y),
+        /** How much room there is up and down the middle. */
+        tall: reachAlong(1, 50),
+    };
+}
+/** The colours in use, each of which can be changed by hand. */
+export function coloursOf(t) {
+    const palette = PALETTES[Math.floor(t("palette") * PALETTES.length)];
+    const core = t.color("core") ?? palette.core;
+    return {
+        core,
+        accent: t.color("accent") ?? palette.accent,
+        edge: t.color("edge") ?? mix(core, WHITE, 0.5),
+    };
+}
+export const defaultTitle = (t) => t.pick("title", PHRASES);
+/** Puts a unit gradient over an oval, so a long shape blends along its length. */
+const over = ({ cx, cy, rx, ry }) => `gradientUnits="userSpaceOnUse" cx="0" cy="0" r="1" gradientTransform="translate(${round2(cx)} ${round2(cy)}) scale(${round2(rx)} ${round2(ry)})"`;
+function grainFilter(id, seed, cut) {
+    return (`<filter id="${id}" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">` +
+        `<feTurbulence type="fractalNoise" baseFrequency="1.73 1.57" numOctaves="2" seed="${seed}"/>` +
+        `<feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 20 ${round2(cut)}"/>` +
+        `<feComposite in2="SourceAlpha" operator="in"/></filter>`);
+}
+function drawDefs(t, outline, rx, ry, core, accent) {
+    const blend = t.num("blend", 0.22, 0.62);
+    const seed = t.int("grain.seed", 1, SEEDS);
+    // Noise above the cut-off becomes a dot, so more grain is a lower cut-off.
+    const cut = t.num("grain", -15.6, -14.2);
+    // The core drifts off centre, and the second colour can come in from any side.
+    const centre = { cx: 50 + t.jitter("core.x", 0.3) * rx, cy: 50 + t.jitter("core.y", 0.28) * ry, rx: rx * 0.98, ry: ry * 0.98 };
+    const side = turn(t, "accent.side");
+    const sideways = { cx: 50 + Math.cos(side) * rx * 0.92, cy: 50 + Math.sin(side) * ry * 0.92, rx: rx * 0.9, ry: ry * 0.72 };
+    return (`<defs>` +
+        `<path id="bubble-shape" d="${outline}"/>` +
+        `<clipPath id="bubble-clip"><use href="#bubble-shape"/></clipPath>` +
+        `<radialGradient id="bubble-core" ${over(centre)}>` +
+        `<stop offset="0" stop-color="${core}"/>` +
+        `<stop offset="${round2(blend)}" stop-color="${core}"/>` +
+        `<stop offset="1" stop-color="${core}" stop-opacity="0"/></radialGradient>` +
+        `<radialGradient id="bubble-accent" ${over(sideways)}>` +
+        `<stop offset="0" stop-color="${accent}"/>` +
+        `<stop offset="1" stop-color="${accent}" stop-opacity="0"/></radialGradient>` +
+        `<radialGradient id="bubble-rim" ${over({ cx: 50, cy: 50, rx, ry })}>` +
+        `<stop offset="0.55" stop-color="#000"/>` +
+        `<stop offset="0.98" stop-color="#fff"/></radialGradient>` +
+        `<mask id="bubble-edges" maskUnits="userSpaceOnUse" x="-2" y="-2" width="104" height="104">` +
+        `<rect x="-2" y="-2" width="104" height="104" fill="url(#bubble-rim)"/></mask>` +
+        `<filter id="bubble-soft" x="-5%" y="-5%" width="110%" height="110%"><feGaussianBlur stdDeviation="0.3"/></filter>` +
+        grainFilter("bubble-grain", seed, cut) +
+        grainFilter("bubble-rim-grain", seed + 1, cut + 0.8) +
+        `</defs>`);
+}
+/** `[width, height, corner, turn]` of each kind of eye, before scaling. Corners default to fully round. */
+const EYE_SIZES = {
+    Pill: [4, 10.5],
+    Oval: [5.6, 8],
+    Dot: [5.6, 5.6],
+    Slit: [2.6, 11.5],
+    Wide: [8.4, 5],
+    Bar: [9, 2.8],
+    Square: [6, 6, 1.6],
+    Diamond: [5.6, 5.6, 1, 45],
+};
+const LINE = `fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`;
+/** Drawn eyes, around their own centre. The rest are rounded rectangles. */
+const EYE_PATHS = {
+    Happy: `<path d="M-2.8 1.4Q0 -3 2.8 1.4" ${LINE}/>`,
+    Sparkle: `<path d="M0 -4Q0.7 -0.7 4 0Q0.7 0.7 0 4Q-0.7 0.7 -4 0Q-0.7 -0.7 0 -4Z" fill="#fff"/>`,
+    Heart: `<path d="M0 3.4C-4.6 0.4 -3.6 -3.6 -1.4 -3.2C-0.6 -3 0 -2.2 0 -1.6C0 -2.2 0.6 -3 1.4 -3.2C3.6 -3.6 4.6 0.4 0 3.4Z" fill="#fff"/>`,
+    Cross: `<path d="M-2.2 -2.2L2.2 2.2M2.2 -2.2L-2.2 2.2" ${LINE}/>`,
+};
+/** Mouths, around their own centre, in the eyes' white. */
+const MOUTH_PATHS = {
+    Smile: `<path d="M-3 -0.6Q0 2.6 3 -0.6" ${LINE}/>`,
+    Grin: `<path d="M-3.4 -1.2H3.4Q3.4 3 0 3Q-3.4 3 -3.4 -1.2Z" fill="#fff"/>`,
+    Ooh: `<ellipse rx="1.7" ry="2.2" fill="#fff"/>`,
+    Cat: `<path d="M-3.4 -0.4Q-1.7 2 0 -0.2Q1.7 2 3.4 -0.4" ${LINE}/>`,
+    Flat: `<path d="M-2.6 0H2.6" ${LINE}/>`,
+    Smirk: `<path d="M-2.6 0.6Q0.6 1.6 3 -1" ${LINE}/>`,
+    Wobbly: `<path d="M-3.6 0Q-2.7 -1.2 -1.8 0T0 0T1.8 0T3.6 0" ${LINE}/>`,
+};
+export const eyeKindOf = (t) => t.pick("eye.kind", EYE_KINDS);
+/** Which mouth, if any. */
+export const mouthOf = (t) => (t("mouth") * 100 < MOUTH_ODDS ? t.pick("mouth.kind", MOUTHS) : undefined);
+function drawEyes(t, eyesY) {
+    const scale = t.num("eye.size", 0.8, 1.3);
+    const gap = t.num("eye.gap", 4.6, 11) * scale;
+    const lean = round2(t.num("eye.lean", -24, 24));
+    const kind = eyeKindOf(t);
+    const drawn = EYE_PATHS[kind];
+    if (drawn) {
+        return [50 - gap, 50 + gap]
+            .map((x) => `<g><g transform="translate(${round2(x)} ${eyesY}) rotate(${lean}) scale(${round2(scale)})">${drawn}</g></g>`)
+            .join("");
+    }
+    const [wide, tall, corner, turned = 0] = EYE_SIZES[kind];
+    const width = round2(wide * scale);
+    const height = round2(tall * scale);
+    const rx = round2(corner === undefined ? Math.min(width, height) / 2 : corner * scale);
+    return [50 - gap, 50 + gap]
+        .map((x) => `<g><rect x="${round2(x - width / 2)}" y="${round2(eyesY - height / 2)}" width="${width}" height="${height}" ` +
+        `rx="${rx}" fill="#fff" transform="rotate(${round2(lean + turned)} ${round2(x)} ${round2(eyesY)})"/></g>`)
+        .join("");
+}
+/** Under the eyes, and above `wordsTop` when there are words. Marked, so the blink leaves it alone. */
+function drawMouth(t, eyesY, wordsTop) {
+    const mouth = mouthOf(t);
+    if (!mouth)
+        return "";
+    const scale = round2(t.num("eye.size", 0.8, 1.3));
+    const y = round2(Math.min(eyesY + 8.5 * scale, (eyesY + 5 * scale + wordsTop) / 2));
+    return `<g data-mouth="" transform="translate(50 ${y}) scale(${scale})">${MOUTH_PATHS[mouth]}</g>`;
+}
+export function createBubble(name, overrides, ids = "bubble") {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const shape = shapeOf(t);
+    const { d, rx, ry, across, tall } = drawOutline(t, shape);
+    const { core, accent, edge } = coloursOf(t);
+    const tilt = round2(t.jitter("tilt", 13));
+    // A loose spread keeps tall shapes from scattering their face to either end.
+    const spread = Math.min(tall, 34) * t.num("spread", 0.85, 1.15);
+    // Only words the visitor typed are drawn. The suggestion stays in the panel's input, and
+    // with nothing to share the space, the eyes have the middle to themselves.
+    const title = t.text("text.title")?.slice(0, MAX_TEXT);
+    const eyesY = round2(title ? 50 - 0.36 * spread : 50 + t.jitter("eyes.y", 7));
+    const titleY = round2(50 + 0.34 * spread);
+    const room = Math.min(across(titleY - 3), across(titleY + 3)) * 1.7;
+    const fontSize = title ? round2(Math.min(TITLE_SIZE, room / (title.length * CHARACTER))) : 0;
+    const words = title
+        ? `<text x="50" y="${titleY}" transform="rotate(${tilt} 50 50)" text-anchor="middle" font-family="${MONO}" ` +
+            `font-size="${fontSize}" font-weight="500" fill="#fff">${escaped(title)}</text>`
+        : "";
+    const wordsTop = title ? titleY - 0.75 * fontSize : Infinity;
+    return {
+        // Scoped before the words go in, so typed text is never taken for an id.
+        art: scopeIds(drawDefs(t, d, rx, ry, core, accent) +
+            // Clipped after the blur, so the colours blend softly but the outline stays sharp.
+            `<g clip-path="url(#bubble-clip)"><use href="#bubble-shape" fill="${edge}"/><g filter="url(#bubble-soft)">` +
+            `<use href="#bubble-shape" fill="${edge}"/>` +
+            `<use href="#bubble-shape" fill="url(#bubble-core)"/>` +
+            `<use href="#bubble-shape" fill="url(#bubble-accent)"/>` +
+            `</g></g>` +
+            `<use href="#bubble-shape" fill="#fff" filter="url(#bubble-grain)"/>` +
+            `<g mask="url(#bubble-edges)"><use href="#bubble-shape" fill="#fff" filter="url(#bubble-rim-grain)"/></g>`, "bubble", ids) + words,
+        eyes: `<g transform="rotate(${tilt} 50 50)">${drawEyes(t, eyesY)}${drawMouth(t, eyesY, wordsTop)}</g>`,
+        effect: shape.effect,
+        blinkDelay: t.num("blink", 0, 4),
+    };
+}
+/** The bubble at rest, for thumbnails. */
+export const bubbleSvg = (name, overrides) => {
+    const { art, eyes } = createBubble(name, overrides);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${VIEW_BOX}">${art}${eyes}</svg>`;
+};

package/dist/buddies/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a buddy. Low keeps to the eight mildest expressions, one for
+ * each variant, standing straight or mirrored. Every gesture stays, so the variants still
+ * differ in what they do. Indices are into the lists in `index.ts`.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/buddies/calming.js

@@ -0,0 +1,18 @@
+/**
+ * What Possibilities calms on a buddy. Low keeps to the eight mildest expressions, one for
+ * each variant, standing straight or mirrored. Every gesture stays, so the variants still
+ * differ in what they do. Indices are into the lists in `index.ts`.
+ */
+export const CALMING = {
+    features: /^(eye)\.|^(weight|tilt)$/,
+    lists: {
+        // Content, Happy, Blushing, Wink, Smug, Sleepy, In love, Cheeky, then Surprised, Grumpy.
+        mood: [10, 8, [0, 1, 4, 3, 2, 7, 8, 9, 5, 6]],
+        pose: [6, 2],
+    },
+};
+export const NOTES = [
+    "sweet looks like content, happy and blushing, standing straight.",
+    "adds surprise, and leans and close ups.",
+    "every expression, up to grumpy, in any pose.",
+];

package/dist/buddies/controls.d.ts

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

package/dist/buddies/controls.js

@@ -0,0 +1,35 @@
+import { choice, palette, slider } from "../controls.js";
+import { calmed, narrowed, possibilitiesSlider } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { CHARACTERS, characterOf, GESTURES, MOODS, PATCHES, POSES, TILES } from "./index.js";
+const named = (list) => list.map(({ name: label }) => ({ label }));
+export const controls = (name, overrides) => {
+    const t = calmed(createTraits(name, overrides), CALMING);
+    const list = (control) => narrowed(control, t, CALMING);
+    const character = characterOf(t);
+    return [
+        {
+            title: "Buddy",
+            controls: [
+                choice(t, "character", "Character", "list", named(CHARACTERS)),
+                list(choice(t, "mood", "Expression", "list", named(MOODS))),
+                possibilitiesSlider(t, NOTES),
+                choice(t, "gesture", "Gesture", "list", named(GESTURES)),
+                list(choice(t, "pose", "Pose", "list", named(POSES))),
+                slider(t, "eye.size", "Eye size", 0, 100, "%"),
+                slider(t, "tilt", "Tilt", -5, 5, "°"),
+                slider(t, "weight", "Line weight", 0, 100, "%"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                palette(t, "tile", "Colour", TILES),
+                palette(t, "fur", "Fur", character.furs),
+                // Only a calico has patches to colour.
+                ...(character.name === "Calico" ? [palette(t, "patch", "Patches", PATCHES)] : []),
+            ],
+        },
+    ];
+};

package/dist/buddies/index.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Buddies: sticker cats in a thick, warm outline and flat colour. Two characters, a striped
+ * tabby and a calico, each traced from its own reference, and both sharing the same
+ * expressions and gestures.
+ *
+ * The hands and the shades are traced too, each from the reference that has them: the
+ * tabby's paws to its cheeks, the calico's paw at its sunglasses, and a salute traced from a
+ * croc's. Every character uses those same drawings, placed on its own face, and the other gestures are
+ * drawn with the calico's paw, so all the hands are the same hands.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+/** Solid cards. */
+export declare const TILES: string[];
+export declare const INK = "#1f1a17";
+type Point = readonly [number, number];
+/** Everything that makes one character: its shapes in tile units, and where its face and paws go. */
+interface Character {
+    name: string;
+    head: Point[];
+    body: string;
+    /** Default fur. */
+    furs: string[];
+    eyes: [Point, Point];
+    /** Where the mouth goes, its size, and its turn. */
+    mouth: [x: number, y: number, scale: number, turn: number];
+    /** Its nose, drawn in tile units, if it has one. */
+    nose?: (fur: string, weight: number) => string;
+    cheeks: [Point, Point];
+    shoulders: [Point, Point];
+    chest: Point;
+    whiskers?: string;
+    /** Lines and marks that are always there, over the head: tufts, a brow, chest fur. */
+    details?: (fur: string, patch: string, weight: number) => string;
+    /** Markings inside the head, and inside the body. */
+    markings: (fur: string, patch: string) => string;
+    /** How big the shades are on its face, and their turn, and how big its arms are. */
+    shades: [scale: number, turn: number];
+    arms?: number;
+    ovalEyes?: boolean;
+    /** How heavy its line is, and how it's fitted to the card. */
+    weight: number;
+    frame: string;
+}
+/** Neighbours are as unlike as possible. */
+export declare const CHARACTERS: Character[];
+/** A calico's patches, which can be changed apart from its fur. */
+export declare const PATCHES: string[];
+type EyeKind = "dot" | "happy" | "half" | "wink" | "round" | "line" | "heart";
+type MouthKind = "w" | "smile" | "smirk" | "o" | "frown" | "tongue";
+interface Mood {
+    name: string;
+    eyes: [EyeKind, EyeKind];
+    mouth: MouthKind;
+    blush?: boolean;
+    brows?: boolean;
+}
+export declare const MOODS: Mood[];
+/** What its paws are doing. Neighbours are as unlike as possible. */
+export declare const GESTURES: readonly [{
+    readonly name: "Cheeks";
+}, {
+    readonly name: "Shades";
+}, {
+    readonly name: "Salute";
+}, {
+    readonly name: "Heart";
+}, {
+    readonly name: "Wave";
+}, {
+    readonly name: "Shy";
+}, {
+    readonly name: "Peace";
+}, {
+    readonly name: "Chill";
+}];
+type Gesture = (typeof GESTURES)[number]["name"];
+interface Pose {
+    name: string;
+    transform: string;
+    mirrored?: boolean;
+}
+export declare const POSES: Pose[];
+export declare const characterOf: (t: Traits) => Character;
+export declare const moodOf: (t: Traits) => Mood;
+export declare const gestureOf: (t: Traits) => Gesture;
+export declare const poseOf: (t: Traits) => Pose;
+export declare function coloursOf(t: Traits, character: Character): {
+    tile: string;
+    fur: string;
+    patch: string;
+};
+export interface Buddy {
+    defs: string;
+    tile: string;
+    pose: string;
+    mirrored: boolean;
+    /** Ears that twitch on hover. Every buddy's are part of its outline, so these are empty. */
+    ears: [string, string];
+    /** Body and head, with markings and the details always drawn on them. */
+    body: string;
+    /** Each eye, marked so it can blink, widen and look about on its own. */
+    eyes: string;
+    /** Nose, mouth, whiskers, blush and brows. */
+    face: string;
+    /** Arms, paws and whatever they hold, and shades, in front of the face. */
+    front: string;
+    blinkDelay: number;
+}
+export declare function createBuddy(name: string, overrides?: Overrides, ids?: string): Buddy;
+export declare const TILE_SHAPE = "<rect width=\"100\" height=\"100\" rx=\"22.22\"/>";
+/** The buddy at rest, for thumbnails. */
+export declare const buddySvg: (name: string, overrides?: Overrides) => string;
+export {};