@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/auras/index.js

@@ -0,0 +1,355 @@
+/**
+ * Auras: a rounded tile of colour, after the reference. Two to four colours melt into each
+ * other with no edge anywhere, in a formation of their own: a glow, a horizon, a streak, an
+ * arc, a swirl. A fine film grain lies over it all, which also hides any banding in the blend.
+ *
+ * The colour is a few soft shapes, blurred together as one layer. That layer is drawn once
+ * and only ever moved and turned, so the costly blur is never redone as it reacts.
+ *
+ * A sky is its other type, as the animals are each a type of their own: smooth gradient from
+ * top to bottom, after the second reference's times of day and weathers. Both are a rounded tile.
+ */
+import { mix } from "../colors.js";
+import { calmed, keptOf, varianceOf, varianceSet } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING, PALETTE_ORDER } from "./calming.js";
+import { SKIES } from "./skies.js";
+export { SKIES } from "./skies.js";
+/** Each with a reference of its own: a tile of melted colour, or a circle of sky. */
+export const TYPES = ["Aura", "Sky"];
+/**
+ * Each as deep, mid, light and accent. The first nine are the first reference's, and the rest
+ * after the later ones: Craft's greens on cream, Flowy's sunrise, a fern green with pale rings,
+ * and three from the sprayed posters, lime on forest, mint on green and pale blue on cobalt.
+ */
+export const PALETTES = [
+    { label: "Sunrise", colors: ["#e2545b", "#f6a47c", "#fff0c2", "#f7b7a3"] },
+    { label: "Ember", colors: ["#1d1622", "#3a2232", "#ffd28a", "#ff7a1f"] },
+    { label: "Meadow", colors: ["#3d9e62", "#a5d89a", "#f1f9cf", "#6fc08a"] },
+    { label: "Blossom", colors: ["#e8447a", "#f6a3bf", "#fff1f4", "#f27aa3"] },
+    { label: "Aurora", colors: ["#04120f", "#1f9f57", "#e5ffc9", "#34c5c2"] },
+    { label: "Twilight", colors: ["#4757b3", "#a9b0ea", "#eceefe", "#7d86d6"] },
+    { label: "Dream", colors: ["#b98ae6", "#f2b0dc", "#fff4c0", "#d8a6f0"] },
+    { label: "Nebula", colors: ["#0d0b16", "#4b2a5e", "#ffb2df", "#c0549b"] },
+    { label: "Sky", colors: ["#3f86dc", "#8fc3f2", "#e4f8ff", "#b8eff0"] },
+    { label: "Craft", colors: ["#1f6b4e", "#3fd86b", "#ebe8e1", "#9fb3b0"] },
+    { label: "Cobalt", colors: ["#071466", "#0f3fd6", "#3da4ff", "#1a6cf5"] },
+    { label: "Flowy", colors: ["#f04f4b", "#c859b4", "#eef0f6", "#ffb347"] },
+    { label: "Forest", colors: ["#146b10", "#2f8f1a", "#e3f00f", "#f6e21a"] },
+    { label: "Fern", colors: ["#4f9a3a", "#86c06a", "#e9f2df", "#a9d48c"] },
+    { label: "Mint", colors: ["#0f4f2b", "#169660", "#c8e8d8", "#4aae38"] },
+];
+/** Which of a palette's colours each part is, and each can be changed by hand. */
+export const PARTS = ["deep", "mid", "light", "accent"];
+const round2 = (value) => Math.round(value * 100) / 100;
+const oval = (cx, cy, rx, ry, color, turn = 0, opacity) => ({ kind: "oval", cx, cy, rx, ry, turn, color, opacity });
+/** A ring's outline, as a stroke. */
+const ring = (cx, cy, r, width, color, opacity) => ({
+    kind: "stroke", d: `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0`, width, color, opacity,
+});
+/** The formations, after the reference's tiles. Neighbours are as unlike as they can be. */
+export const FLOWS = [
+    {
+        // Warm at the top, melting into a light glow low in the middle.
+        name: "Glow",
+        base: (c) => c.mid,
+        blobs: (c, j) => [
+            oval(20 + j("a", 8), 10, 46, 30, c.deep, -15),
+            oval(55 + j("b", 8), 58 + j("c", 6), 26, 22, c.light),
+            oval(88, 92, 30, 26, c.accent),
+            oval(30, 62, 18, 16, c.light, 0, 0.8),
+        ],
+    },
+    {
+        // A dark sky over a burning horizon.
+        name: "Horizon",
+        base: (c) => c.deep,
+        blobs: (c, j) => [
+            oval(50, 18, 70, 36, c.deep),
+            oval(50, 66, 80, 10, c.mid, 0, 0.8),
+            oval(50 + j("a", 10), 98, 76, 22, c.accent),
+            oval(50 + j("b", 12), 106, 48, 12, c.light),
+        ],
+    },
+    {
+        // One bright streak cutting across the dark.
+        name: "Streak",
+        base: (c) => c.deep,
+        blobs: (c, j) => [
+            oval(40, 60, 22, 56, c.accent, 35, 0.5),
+            oval(52 + j("a", 6), 50, 13, 50, c.light, 35 + j("b", 10)),
+            oval(88, 90, 30, 26, c.mid),
+            oval(10, 8, 30, 24, c.deep),
+        ],
+    },
+    {
+        // A pale arc rising from below, as a sky over a hill.
+        name: "Arc",
+        base: (c) => c.mid,
+        blobs: (c, j) => [
+            { kind: "stroke", d: `M-10 ${round2(78 + j("a", 6))}Q50 ${round2(28 + j("b", 8))} 110 ${round2(78 + j("c", 6))}`, width: 17, color: c.light },
+            oval(50, 112, 70, 24, c.deep),
+            oval(94, 4, 34, 26, c.accent),
+            oval(6, 12, 26, 22, c.deep, 0, 0.7),
+        ],
+    },
+    {
+        // A light ribbon curling through.
+        name: "Swirl",
+        base: (c) => c.mid,
+        blobs: (c, j) => [
+            oval(80, 20, 40, 30, c.deep, 20),
+            { kind: "stroke", d: `M10 ${round2(88 + j("a", 6))}C30 50 ${round2(70 + j("b", 10))} 70 ${round2(86 + j("c", 6))} 30`, width: 19, color: c.light },
+            oval(14, 30, 22, 26, c.accent),
+            oval(60, 104, 34, 18, c.deep, 0, 0.8),
+        ],
+    },
+    {
+        // Clouds of colour drifting over each other.
+        name: "Drift",
+        base: (c) => c.mid,
+        blobs: (c, j) => [
+            oval(24 + j("a", 8), 22 + j("b", 8), 26, 22, c.deep),
+            oval(74 + j("c", 8), 30 + j("d", 8), 22, 24, c.light),
+            oval(40 + j("e", 8), 70 + j("f", 8), 24, 20, c.accent),
+            oval(84, 84, 22, 20, c.deep, 0, 0.8),
+            oval(12, 90, 20, 18, c.light, 0, 0.9),
+        ],
+    },
+    {
+        // A light far off in the dark, breaking through.
+        name: "Break",
+        base: (c) => c.deep,
+        blobs: (c, j) => [
+            oval(96 + j("a", 6), 2, 40, 30, c.mid),
+            oval(82, 54, 26, 30, c.accent, -20),
+            oval(28 + j("b", 8), 96, 30, 20, c.light),
+            oval(20, 26, 30, 30, c.deep),
+        ],
+    },
+    {
+        // Two colours meeting along a soft diagonal.
+        name: "Split",
+        base: (c) => c.light,
+        blobs: (c, j) => [
+            oval(10, 10, 72, 40, c.deep, -35 + j("a", 10)),
+            oval(92, 92, 40, 30, c.accent, -35),
+            oval(60, 56, 18, 14, c.light),
+        ],
+    },
+    {
+        // A soft ring of colour round a light middle.
+        name: "Bloom",
+        base: (c) => c.deep,
+        blobs: (c, j) => [
+            oval(50, 52, 40, 40, c.accent),
+            oval(50 + j("a", 6), 52 + j("b", 6), 26, 26, c.mid),
+            oval(50 + j("a", 6), 52 + j("b", 6), 12, 12, c.light),
+        ],
+    },
+    {
+        // Craft: green breathing through a pale ground, a dark swirl low in it and a grey veil.
+        name: "Veil",
+        base: (c) => c.light,
+        blobs: (c, j) => [
+            oval(52 + j("a", 6), 62, 50, 22, c.mid, -8),
+            oval(24, 82 + j("b", 4), 20, 12, c.deep, -20),
+            oval(58, 76, 14, 9, c.accent),
+            oval(74, 58, 18, 9, c.deep, 15, 0.6),
+            oval(18, 48, 16, 14, c.mid, 0, 0.9),
+            oval(88, 88, 16, 10, c.mid, 0, 0.8),
+        ],
+    },
+    {
+        // Flowy: a sunrise of rings from below the middle, pale, lavender, magenta, red, orange and gold.
+        name: "Rise",
+        base: (c) => c.light,
+        blobs: (c, j) => {
+            const y = 110 + j("a", 6);
+            return [
+                oval(50, y, 82, 76, mix(c.light, c.mid, 0.45)),
+                oval(50, y, 66, 62, c.mid),
+                oval(50, y, 52, 48, c.deep),
+                oval(50, y, 36, 34, c.accent),
+                oval(50, y, 20, 18, mix(c.accent, "#fff6a8", 0.6)),
+            ];
+        },
+    },
+    {
+        // One Beauty: pale rings curving through a soft green, lighter towards the top.
+        name: "Rings",
+        base: (c) => c.mid,
+        // Soft enough to glow, not so soft that the rings melt away.
+        softness: 0.55,
+        blobs: (c, j) => [
+            oval(30, 10, 50, 34, c.accent, 0, 0.8),
+            ring(26 + j("a", 6), 34, 30, 12, c.light),
+            ring(66 + j("b", 6), 14, 26, 10, c.light, 0.8),
+            oval(80, 96, 44, 26, c.deep),
+            oval(10, 96, 26, 18, c.deep, 0, 0.8),
+        ],
+    },
+];
+/** A blur for the tile's size. Below about 9 the shapes show; above 16 they turn to mud. */
+const SOFTNESS = [9, 16];
+export const auraTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+/** The name a variant was made from, and how many steps on it is: 0 for the name itself. */
+function named(name) {
+    const variant = /^(.*)#(\d+)$/.exec(name);
+    return { from: variant ? variant[1] : name, step: variant ? Number(variant[2]) - 1 : 0 };
+}
+/**
+ * Which of `count` options a name has under `key`, as the animals each have an animal: its own,
+ * from the name, and for a variant, named `name#n`, n steps on from it, keeping to those that
+ * Possibilities offers. So a strip of variants shows them all, no two side by side alike. Set by
+ * hand, it's that one for every variant.
+ */
+function stepped(name, overrides, key, count, order) {
+    const { from, step } = named(name);
+    const t = createTraits(from, overrides);
+    const value = t(key);
+    const own = Math.min(count - 1, Math.floor(value * count));
+    if (t.forced(key) !== undefined)
+        return own;
+    const variance = varianceSet(t);
+    const list = CALMING.lists?.[key];
+    const plainest = order ?? (Array.isArray(list?.[2]) ? list[2] : Array.from({ length: count }, (_, i) => i));
+    // Possibilities keeps the plainest few, so the name's own is one of those, and a step stays among them.
+    if (variance === undefined)
+        return (own + step) % count;
+    const plain = plainest.slice(0, keptOf(count, list?.[1] ?? Math.min(count, 8), variance));
+    return plain[(Math.floor(value * plain.length) + step) % plain.length];
+}
+/** A name's type. Its variants take turns, an aura then a sky, so a strip has both. */
+export const typeOf = (name, overrides) => TYPES[stepped(name, overrides, "type", TYPES.length)];
+/** An aura's formation. A strip of variants never repeats one. */
+export const flowOf = (name, overrides) => FLOWS[stepped(name, overrides, "flow", FLOWS.length)];
+/** Where a sky's four colours to pick by hand are taken from, among its stops: its top, a third and two thirds down, and its foot. */
+const SKY_PICKS = [0, 7, 13, 20];
+/** The palettes a type offers: an aura's, or the skies, with their four colours to pick by hand. */
+export const palettesOf = (type) => type === "Sky" ? SKIES.map(({ label, stops }) => ({ label, stops, colors: SKY_PICKS.map((i) => stops[i]) })) : PALETTES;
+/**
+ * How far the horizon is moved, from -1 (lower) to 1 (higher). It sits as in the reference
+ * until Possibilities is moved, and then strays from it by the name, further the higher it is.
+ * Set by hand, it's that.
+ */
+export function horizonOf(t) {
+    const set = t.forced("horizon");
+    if (set !== undefined)
+        return set * 2 - 1;
+    const variance = varianceSet(t);
+    return variance === undefined ? 0 : (t("horizon") * 2 - 1) * variance * 0.7;
+}
+/**
+ * How grainy it is. The grain's range grows with Possibilities, from nearly smooth to heavy,
+ * so each name's grain moves with it. A sky starts smoother, as the reference's are.
+ */
+function grainOf(t, type) {
+    const variance = varianceOf(t);
+    const [low, calmest, wildest] = type === "Sky" ? [0.03, 0.07, 0.32] : [0.08, 0.2, 0.55];
+    return low + t("grain") * (calmest + (wildest - calmest) * variance - low);
+}
+/** Which of its type's palettes it has. Variants step on through them, each type's its own. */
+export const paletteOf = (name, overrides, type) => stepped(name, overrides, "palette", palettesOf(type).length, PALETTE_ORDER[type]);
+/** The palettes Possibilities offers a type, plainest first: all of them until it's moved. */
+export function palettesOffered(t, type) {
+    const order = PALETTE_ORDER[type];
+    const variance = varianceSet(t);
+    return variance === undefined ? order : order.slice(0, keptOf(order.length, 8, variance));
+}
+/** The palette's colours, each of which can be changed by hand. A sky's are its stops, top to bottom. */
+export function coloursOf(name, overrides, t, type) {
+    const { colors } = palettesOf(type)[paletteOf(name, overrides, type)];
+    return Object.fromEntries(PARTS.map((part, i) => [part, t.color(part) ?? colors[i]]));
+}
+/** A plain face, which is off unless picked: the reference's tiles have none. */
+export const FACES = ["None", "Dots", "Calm", "Smile"];
+export const faceOf = (t) => (t.forced("face") === undefined ? "None" : FACES[Math.min(FACES.length - 1, Math.floor(t("face") * FACES.length))]);
+const FACE_MARKS = {
+    None: { eyes: "", mouth: "" },
+    Dots: { eyes: `<circle cx="-10" cy="-3" r="3.4"/><circle cx="10" cy="-3" r="3.4"/>`, mouth: `<path d="M-5 7Q0 11 5 7" fill="none"/>` },
+    Calm: { eyes: `<path d="M-14 -3Q-10 1 -6 -3M6 -3Q10 1 14 -3" fill="none"/>`, mouth: `<path d="M-4 7Q0 10 4 7" fill="none"/>` },
+    Smile: { eyes: `<circle cx="-10" cy="-4" r="3"/><circle cx="10" cy="-4" r="3"/>`, mouth: `<path d="M-9 5Q0 15 9 5" fill="none"/>` },
+};
+function blobMarkup(blob) {
+    const opacity = blob.opacity === undefined ? "" : ` opacity="${blob.opacity}"`;
+    if (blob.kind === "stroke") {
+        return `<path d="${blob.d}" fill="none" stroke="${blob.color}" stroke-width="${blob.width}" stroke-linecap="round"${opacity}/>`;
+    }
+    const turn = blob.turn ? ` transform="rotate(${round2(blob.turn)} ${round2(blob.cx)} ${round2(blob.cy)})"` : "";
+    return `<ellipse cx="${round2(blob.cx)}" cy="${round2(blob.cy)}" rx="${round2(blob.rx)}" ry="${round2(blob.ry)}" fill="${blob.color}"${turn}${opacity}/>`;
+}
+export function createAura(name, overrides) {
+    const t = auraTraits(name, overrides);
+    const type = typeOf(name, overrides);
+    const c = coloursOf(name, overrides, t, type);
+    const shared = {
+        seed: t.int("grain.seed", 1, 999),
+        face: FACE_MARKS[faceOf(t)],
+        blinkDelay: round2(t.num("blink", 0, 4)),
+    };
+    if (type === "Sky") {
+        // The reference's own stops, unless its colours are picked by hand, when they are those four.
+        const picked = PARTS.some((part) => t.color(part) !== undefined);
+        const colours = picked ? PARTS.map((part) => c[part]) : SKIES[paletteOf(name, overrides, type)].stops;
+        // Raising the horizon draws every stop up towards the top, and lowering it down towards
+        // the foot, smoothly, with the top and the foot left where they are.
+        const lift = 2 ** (horizonOf(t) * 1.2);
+        const stops = colours
+            .map((color, i) => `<stop offset="${round2((i / (colours.length - 1)) ** lift)}" stop-color="${color}"/>`)
+            .join("");
+        return {
+            type,
+            colour: (id) => `<defs><linearGradient id="${id}-sky" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100">${stops}</linearGradient></defs>` +
+                `<rect x="-60" y="-60" width="220" height="220" fill="url(#${id}-sky)"/>`,
+            blur: 0,
+            grain: round2(grainOf(t, type)),
+            turn: 0,
+            ...shared,
+        };
+    }
+    const flow = flowOf(name, overrides);
+    const j = (key, amount) => t.jitter(`flow.${key}`, amount);
+    const base = `<rect x="-60" y="-60" width="220" height="220" fill="${flow.base(c)}"/>`;
+    const shapes = flow.blobs(c, j);
+    const blur = round2(t.num("softness", ...SOFTNESS) * (flow.softness ?? 1));
+    return {
+        type,
+        colour: () => base + shapes.map(blobMarkup).join(""),
+        blur,
+        grain: round2(grainOf(t, type)),
+        turn: round2(t.jitter("turn", 30)),
+        ...shared,
+    };
+}
+/** The colour layer as drawn: blurred and turned for an aura, and as it is for a sky. */
+export const colourLayer = (aura, id) => aura.blur
+    ? `<defs>${blurFilter(`${id}-blur`, aura.blur)}</defs><g filter="url(#${id}-blur)"><g transform="rotate(${aura.turn} 50 50)">${aura.colour(id)}</g></g>`
+    : aura.colour(id);
+/** Its corner radius, as a share of its side, the same as the other tiles'. */
+const CORNER = 22.22;
+/** How the face is drawn, over the colour. */
+export const FACE_STYLE = `fill="#ffffff" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"`;
+/** The grain as a filter, at `frequency` cycles a unit: fine, grey, and wholly opaque, to be laid on in overlay. */
+export const grainFilter = (id, frequency, seed) => `<filter id="${id}" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">` +
+    `<feTurbulence type="fractalNoise" baseFrequency="${frequency}" numOctaves="3" seed="${seed}" stitchTiles="stitch"/>` +
+    `<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1"/></filter>`;
+/** The colour layer's blur. Its region reaches well past the tile, so nothing is clipped before it's blurred. */
+export const blurFilter = (id, blur) => `<filter id="${id}" filterUnits="userSpaceOnUse" x="-60" y="-60" width="220" height="220" color-interpolation-filters="sRGB">` +
+    `<feGaussianBlur stdDeviation="${blur}"/></filter>`;
+/** The tile at rest, for thumbnails. */
+export function auraSvg(name, overrides) {
+    const aura = createAura(name, overrides);
+    const face = aura.face.eyes
+        ? `<g transform="translate(50 52)" ${FACE_STYLE}>${aura.face.eyes}${aura.face.mouth}</g>`
+        : "";
+    return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs>` +
+        `<clipPath id="aura-tile"><rect width="100" height="100" rx="${CORNER}"/></clipPath>` +
+        // About two cycles a unit, so in a thumbnail the grain is near a pixel.
+        grainFilter("aura-grain", 2.2, aura.seed) +
+        `</defs><g clip-path="url(#aura-tile)">` +
+        colourLayer(aura, "aura") +
+        `<rect width="100" height="100" filter="url(#aura-grain)" opacity="${aura.grain}" style="mix-blend-mode:overlay"/>` +
+        face +
+        `</g></svg>`);
+}

package/dist/auras/skies.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Skies: the reference's twelve skies, each a smooth gradient from top to bottom for a time of
+ * day or a weather, from a misty morning fading to nothing to a night with a last ember of sun
+ * along the horizon. Each is twenty-one colours, top to bottom and evenly spaced, measured down the
+ * middle of the reference's own from edge to edge, so the blend is the reference's and not a guess at it.
+ * The foot repeats the colour above it, as the last measure caught the circle's edge against the page.
+ */
+export interface Sky {
+    label: string;
+    stops: string[];
+}
+/** Light and dark alternate, as each variant steps to the next. */
+export declare const SKIES: Sky[];

package/dist/auras/skies.js

@@ -0,0 +1,22 @@
+/**
+ * Skies: the reference's twelve skies, each a smooth gradient from top to bottom for a time of
+ * day or a weather, from a misty morning fading to nothing to a night with a last ember of sun
+ * along the horizon. Each is twenty-one colours, top to bottom and evenly spaced, measured down the
+ * middle of the reference's own from edge to edge, so the blend is the reference's and not a guess at it.
+ * The foot repeats the colour above it, as the last measure caught the circle's edge against the page.
+ */
+/** Light and dark alternate, as each variant steps to the next. */
+export const SKIES = [
+    { label: "Clear", stops: ["#80bae2", "#82bae5", "#87bee7", "#8dc1e9", "#94c4ea", "#9bc7ea", "#9fcaec", "#a8cff0", "#aed1ef", "#b2d4f0", "#b9d7f3", "#bcdaf2", "#c2dcf3", "#c5dff6", "#c9e2f8", "#cbe4f8", "#cee8f9", "#d2e9f9", "#d6edfc", "#daeefc", "#daeefc"] },
+    { label: "Evening", stops: ["#0e1120", "#111f3a", "#1b2946", "#213153", "#283a62", "#2e406e", "#31487e", "#374f7d", "#405783", "#485f88", "#54668a", "#607091", "#687a92", "#758497", "#878c90", "#9b9289", "#ae9984", "#c2a27c", "#d3aa74", "#e7b36a", "#e7b36a"] },
+    { label: "Dawn", stops: ["#8492c4", "#7e96cc", "#849bd1", "#87a3d5", "#89a8d7", "#8eafdc", "#92b5dd", "#96bce3", "#98bfe8", "#9cc4e8", "#9fc6ed", "#a5cae7", "#adcde2", "#b8cfde", "#c2d4d8", "#cbd7d5", "#d5dbcf", "#dddfc9", "#eae4c3", "#f5e7bb", "#f5e7bb"] },
+    { label: "Ember", stops: ["#283544", "#273a4e", "#293b53", "#2a3c54", "#2c3e56", "#2e4058", "#2d4159", "#2f435b", "#31475f", "#334961", "#314b64", "#345068", "#37516c", "#455167", "#5c4f61", "#774c55", "#9d4345", "#c63232", "#e64d2e", "#ef843e", "#ef843e"] },
+    { label: "Pastel", stops: ["#9cb9be", "#afc4cf", "#c0cedb", "#cdd4e4", "#d6d9ec", "#dcdaef", "#dedbee", "#e4d9e9", "#e8d8e3", "#edd5e2", "#f3d3dd", "#f6d1d9", "#facfd6", "#facfd6", "#f8ced2", "#f4c9d2", "#edc2cc", "#e1b5c2", "#d2a5b5", "#bd8fa8", "#bd8fa8"] },
+    { label: "Noon", stops: ["#174e8d", "#1462ae", "#1765b0", "#1768b2", "#116bb7", "#0b6fba", "#0672ba", "#0676be", "#107dc2", "#167fc1", "#2685c7", "#338bcb", "#3c92cf", "#4597d1", "#4d9cd5", "#54a1d9", "#5ba7db", "#63aae0", "#67afe1", "#69b4e4", "#69b4e4"] },
+    { label: "Golden", stops: ["#976e8d", "#a27a96", "#ae86a0", "#b592a6", "#bf9eaf", "#c7a7b2", "#cdacb3", "#d1b2af", "#d8b8ac", "#debba7", "#e4c1a3", "#e9c69e", "#efcb9a", "#f7d096", "#fcd391", "#ffd490", "#fccd87", "#f3bd77", "#eaa863", "#de8f49", "#de8f49"] },
+    { label: "Night", stops: ["#11111a", "#131623", "#151827", "#171a2b", "#181b2c", "#1b1e2f", "#1c1f32", "#1e2134", "#1f2136", "#212338", "#20253b", "#222a3f", "#283047", "#2c374d", "#35415b", "#3b4b64", "#58505f", "#755556", "#955b4f", "#b9663e", "#b9663e"] },
+    { label: "Mist", stops: ["#ccd8ec", "#cddcf2", "#d4e1f2", "#d9e5f3", "#e0eaf6", "#e5ebf7", "#eaeef9", "#eef2fb", "#f0f4fd", "#f6f7fc", "#f7f8fc", "#f9fafe", "#fbfcfe", "#fdfdff", "#fdfdfd", "#fefefe", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"] },
+    { label: "Dusk", stops: ["#3e748e", "#5a88ab", "#7395b2", "#879eb5", "#99a9b9", "#aab3bc", "#babec1", "#c7c6c4", "#d2cdc7", "#d9d2c8", "#ddd3c9", "#e1d3c5", "#e7d1bb", "#eccdb1", "#f0c6a3", "#f7c297", "#fcba86", "#fcb482", "#f6a071", "#f5815e", "#f5815e"] },
+    { label: "Orchid", stops: ["#d068a4", "#d36eac", "#cf75b2", "#cc7db6", "#c882b8", "#c585b9", "#c68abe", "#c58cbf", "#c28cbe", "#c38dbf", "#c28cbe", "#c58fc1", "#c690c1", "#c892c3", "#ca95c3", "#ce99c5", "#d09bc7", "#d49fc9", "#d8a4cb", "#dea9ce", "#dea9ce"] },
+    { label: "Haze", stops: ["#546f82", "#7b94a5", "#8fa1ab", "#97a6ad", "#96a7ae", "#98a9b1", "#9aabb5", "#9eabbb", "#a0adc0", "#a5afc0", "#aeb0bd", "#b7b0b8", "#c1afb1", "#cbb0ad", "#d4b0a7", "#e0b0a2", "#ebb19c", "#f5b296", "#fbb592", "#fdc787", "#fdc787"] },
+];

package/dist/blobs/color.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Blob colours.
+ *
+ * Colours are authored in OKLCh, where equal lightness looks equal across hues,
+ * then resolved to hex so the SVG also works in server-side rasterizers. The
+ * name picks a hue and one of six designed tones, never free lightness or
+ * chroma, which is what keeps every blob looking like part of one set. Only a
+ * colour picked by hand steps outside that.
+ */
+export interface Palette {
+    head: string;
+    eye: string;
+}
+/** The tones with their odds, in order, for the control panel. */
+export declare const TONE_BANDS: {
+    label: string;
+    weight: number;
+}[];
+export declare function createPalette(hue: number, tone: number, picked?: string): Palette;

package/dist/blobs/color.js

@@ -0,0 +1,113 @@
+/**
+ * Blob colours.
+ *
+ * Colours are authored in OKLCh, where equal lightness looks equal across hues,
+ * then resolved to hex so the SVG also works in server-side rasterizers. The
+ * name picks a hue and one of six designed tones, never free lightness or
+ * chroma, which is what keeps every blob looking like part of one set. Only a
+ * colour picked by hand steps outside that.
+ */
+import { inkOn } from "../colors.js";
+/** `[upper edge, tone]`, so pale and mid tones dominate and ink stays rare. */
+const TONES = [
+    [0.2, { l: 0.86, c: 0.085 }], // pastel
+    [0.36, { l: 0.9, c: 0.028 }], // pale neutral
+    [0.62, { l: 0.73, c: 0.135 }], // mid
+    [0.8, { l: 0.62, c: 0.165 }], // deep
+    [0.93, { l: 0.87, c: 0.16 }], // bright
+    [1, { l: 0.34, c: 0.035 }], // ink
+];
+/** The tones with their odds, in order, for the control panel. */
+export const TONE_BANDS = [
+    { label: "Pastel", weight: 0.2 },
+    { label: "Pale", weight: 0.16 },
+    { label: "Mid", weight: 0.26 },
+    { label: "Deep", weight: 0.18 },
+    { label: "Bright", weight: 0.13 },
+    { label: "Ink", weight: 0.07 },
+];
+const DARK_SURFACE = { l: 0.145, c: 0, h: 0 };
+const SURFACE_CONTRAST = 1.5;
+const PLATE_CONTRAST = 1.25;
+const EYE_CONTRAST = 4.5;
+const cube = (v) => v * v * v;
+/** OKLCh to linear sRGB. Components may fall outside [0, 1]. */
+function toLinear({ l, c, h }) {
+    const radians = (h * Math.PI) / 180;
+    const a = c * Math.cos(radians);
+    const b = c * Math.sin(radians);
+    const lp = cube(l + 0.3963377774 * a + 0.2158037573 * b);
+    const mp = cube(l - 0.1055613458 * a - 0.0638541728 * b);
+    const sp = cube(l - 0.0894841775 * a - 1.291485548 * b);
+    return [
+        4.0767416621 * lp - 3.3077115913 * mp + 0.2309699292 * sp,
+        -1.2684380046 * lp + 2.6097574011 * mp - 0.3413193965 * sp,
+        -0.0041960863 * lp - 0.7034186147 * mp + 1.707614701 * sp,
+    ];
+}
+const inGamut = (rgb) => rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+/** Reduces chroma until the colour fits, because clipping channels shifts hue. */
+function toDisplayable(color) {
+    let rgb = toLinear(color);
+    if (!inGamut(rgb)) {
+        let low = 0;
+        let high = color.c;
+        for (let i = 0; i < 12; i++) {
+            const mid = (low + high) / 2;
+            if (inGamut(toLinear({ ...color, c: mid })))
+                low = mid;
+            else
+                high = mid;
+        }
+        rgb = toLinear({ ...color, c: low });
+    }
+    return rgb.map((v) => Math.min(1, Math.max(0, v)));
+}
+function luminance(color) {
+    const [r, g, b] = toDisplayable(color);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrast(a, b) {
+    const x = luminance(a);
+    const y = luminance(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+/** Pushes `fg` lightness away from `bg`, trying its current direction first. */
+function ensureContrast(fg, bg, min) {
+    if (contrast(fg, bg) >= min)
+        return fg;
+    const lean = fg.l >= bg.l ? 1 : -1;
+    for (const direction of [lean, -lean]) {
+        const probe = { ...fg };
+        for (let i = 0; i < 60; i++) {
+            probe.l = Math.min(1, Math.max(0, probe.l + direction * 0.02));
+            if (contrast(probe, bg) >= min)
+                return probe;
+            if (probe.l === 0 || probe.l === 1)
+                break;
+        }
+    }
+    const black = { ...fg, l: 0, c: 0 };
+    const white = { ...fg, l: 1, c: 0 };
+    return contrast(black, bg) >= contrast(white, bg) ? black : white;
+}
+function toHex(color) {
+    const channels = toDisplayable(color).map((v) => {
+        const encoded = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+        return Math.round(encoded * 255)
+            .toString(16)
+            .padStart(2, "0");
+    });
+    return `#${channels.join("")}`;
+}
+export function createPalette(hue, tone, picked) {
+    if (picked)
+        return { head: picked, eye: inkOn(picked) };
+    const swatch = (TONES.find(([edge]) => tone < edge) ?? TONES[0])[1];
+    const plate = { l: 0.965, c: 0.01, h: hue };
+    // Visible on a dark page and a pale one, with eyes chosen to read on the body.
+    const onDark = ensureContrast({ ...swatch, h: hue }, DARK_SURFACE, SURFACE_CONTRAST);
+    const head = ensureContrast(onDark, plate, PLATE_CONTRAST);
+    const eye = onDark.l >= 0.5 ? { l: 0.17, c: 0.02, h: hue } : { l: 0.97, c: 0.012, h: hue };
+    return { head: toHex(head), eye: toHex(ensureContrast(eye, head, EYE_CONTRAST)) };
+}

package/dist/blobs/controls.d.ts

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

package/dist/blobs/controls.js

@@ -0,0 +1,77 @@
+import { choice, clearingColor, palette, slider } from "../controls.js";
+import { createTraits } from "../traits.js";
+import { createPalette, TONE_BANDS } from "./color.js";
+import { containerControls } from "../container.js";
+import { possibilitiesSlider } from "../possibilities.js";
+import { NOTES, pickOf, shapeFor, shapesOffered } from "./variance.js";
+/** How many hues are on offer as swatches. Any other is a pick by hand. */
+const HUE_SWATCHES = 11;
+/** The extras each silhouette is built from. */
+const EXTRAS = {
+    Round: [["body.n", "Softness", 0, 100, "%"]],
+    Organic: [["body.pts", "Lumps", 6, 8]],
+    Boxy: [["body.n", "Squareness", 0, 100, "%"], ["body.rot", "Tilt", -20, 20, "°"]],
+    Capsule: [["capsule.squat", "Thickness", 0, 100, "%"]],
+    Nub: [["nub.n", "Nubs", 1, 2]],
+    Cloud: [["cloud.n", "Lobes", 4, 6]],
+    Droplet: [["droplet.tip", "Point", 0, 100, "%"]],
+    Hexagon: [["poly.round", "Corners", 0, 100, "%"], ["body.rot", "Tilt", -12, 12, "°"]],
+    Sun: [["sun.n", "Rays", 6, 9], ["sun.r", "Ray size", 0, 100, "%"]],
+    Triangle: [["poly.round", "Corners", 0, 100, "%"], ["body.rot", "Tilt", -5, 5, "°"]],
+    Oval: [],
+    Pill: [["pill.n", "Squareness", 0, 100, "%"]],
+    Spindle: [["spindle.squat", "Thickness", 0, 100, "%"]],
+    Diamond: [["diamond.n", "Squareness", 0, 100, "%"]],
+    Wide: [],
+};
+/** Lists the shapes the level offers, and the one picked by hand if it's outside them. */
+function shapeControl(t) {
+    const shape = shapeFor(t);
+    const offered = shapesOffered(t);
+    const listed = offered.includes(shape) ? offered : [...offered, shape];
+    return {
+        type: "choice",
+        id: "shape",
+        label: "Shape",
+        layout: "list",
+        options: listed.map((entry) => ({ id: entry.name, label: entry.name, set: pickOf(entry) })),
+        selected: shape.name,
+    };
+}
+export const controls = (name, overrides) => {
+    const t = createTraits(name, overrides);
+    const shape = shapeFor(t);
+    const extras = EXTRAS[shape.name].map(([key, label, min, max, unit]) => Number.isInteger(min) && max - min < 10
+        ? choice(t, key, label, max - min < 3 ? "segmented" : "list", Array.from({ length: max - min + 1 }, (_, i) => ({ label: String(min + i) })))
+        : slider(t, key, label, min, max, unit));
+    const hues = Array.from({ length: HUE_SWATCHES }, (_, i) => createPalette(((i + 0.5) * 360) / HUE_SWATCHES, t("tone")).head);
+    return [
+        {
+            title: "Body",
+            controls: [
+                possibilitiesSlider(t, NOTES),
+                shapeControl(t),
+                slider(t, "body.r", "Body size", 0, 100, "%"),
+                slider(t, "body.ratio", "Stretch", 0, 100, "%"),
+                ...extras,
+            ],
+        },
+        {
+            title: "Colour",
+            // A tone only means something on the name's own colours, so choosing one goes back to them.
+            controls: [palette(t, "hue", "Colour", hues), clearingColor(choice(t, "tone", "Tone", "list", TONE_BANDS), "hue")],
+        },
+        {
+            title: "Eyes",
+            controls: [
+                slider(t, "eye.rx", "Eye size", 0, 100, "%"),
+                slider(t, "eye.ratio", "Eye height", 0, 100, "%"),
+                slider(t, "eye.gap", "Gap", 0, 100, "%"),
+                slider(t, "eye.lean", "Lean", -100, 100, "%"),
+                slider(t, "gaze.x", "Look across", -100, 100, "%"),
+                slider(t, "gaze.y", "Look up", -100, 100, "%"),
+            ],
+        },
+        { title: "Container", controls: containerControls(t) },
+    ];
+};

package/dist/blobs/index.d.ts

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