@originkit/avatars 0.0.0-stage → 0.2.0

package/dist/mallows/controls.js

@@ -0,0 +1,45 @@
+import { containerControls } from "../container.js";
+import { choice, fixedPalette, toggle } from "../controls.js";
+import { narrowed, possibilitiesSlider } from "../possibilities.js";
+import { colorKey } from "../traits.js";
+import { CALMING, NOTES } from "./calming.js";
+import { BLUSH_PERCENT, coloursFor, coloursOf, eyesOf, FEELINGS, mallowTraits, poseOf, TYPES, typeOf } from "./index.js";
+/** Each type's eyes, by whose they are. */
+const EYES = ["Bun's", "Ghost's", "Cloud's"];
+export const controls = (name, overrides) => {
+    const t = mallowTraits(name, overrides);
+    const type = typeOf(name, overrides);
+    const { ink, tint } = coloursOf(t, type);
+    return [
+        {
+            title: "Face",
+            controls: [
+                // Showing the type drawn, which for a variant is a step on from its name's own.
+                { ...choice(t, "type", "Type", "list", TYPES.map(({ name: label }) => ({ label }))), selected: String(TYPES.indexOf(type)) },
+                narrowed(choice(t, "face", "Feeling", "list", FEELINGS.map((label) => ({ label }))), t, CALMING),
+                // Showing the eyes drawn, which a variant steps on from its name's.
+                { ...choice(t, "eyes", "Eyes", "list", EYES.map((label) => ({ label }))), selected: String(TYPES.indexOf(eyesOf(name, overrides, type))) },
+                possibilitiesSlider(t, NOTES),
+                // Named for the type drawn, as each type holds its arms or hands its own way.
+                { ...narrowed(choice(t, "pose", "Pose", "list", type.poses.map(({ name: label }) => ({ label }))), t, CALMING), selected: String(poseOf(name, overrides)) },
+                toggle(t, "blush", BLUSH_PERCENT, "Blush"),
+            ],
+        },
+        {
+            title: "Colour",
+            controls: [
+                fixedPalette(t, "colour", "Colour", coloursFor(type)),
+                {
+                    type: "colors",
+                    id: "mallow.ink",
+                    label: "Face, pink",
+                    colors: [
+                        { id: colorKey("ink"), color: ink },
+                        { id: colorKey("tint"), color: tint },
+                    ],
+                },
+            ],
+        },
+        { title: "Container", controls: containerControls(t) },
+    ];
+};

package/dist/mallows/index.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Mallows: soft clay characters, each type after a reference, and only that. The Bun is a
+ * domed body on two little feet with an arm hanging low on each side and a small dark face.
+ * The Ghost is a taller dome with a scalloped hem, plump hands pressed onto its front, and
+ * big glossy eyes. The Cloud is puffy lobes on stubby feet, with hands on its front and big
+ * white eyes that look about. Every mallow of a type has its body, measured off its reference, and its
+ * colour: what changes from name to name is how it feels. In 3D both are matte clay.
+ *
+ * Everything is drawn as numbers first: the outline as points, the face as exact shapes,
+ * so the 3D stage and the still picture draw the very same avatar.
+ */
+import { type Overrides, type Traits } from "../traits.ts";
+import type { AvatarParts, Shape } from "../types.ts";
+/** The name's traits, calmed to the Possibilities set, as the panel reads them too. */
+export declare const mallowTraits: (name: string, overrides?: Overrides) => Traits;
+interface Body {
+    /** Half its width and height, in its type's units. */
+    rx: number;
+    ry: number;
+    /** How square its dome and its base are: 2 is round. */
+    top: number;
+    base: number;
+    /** How much wider it is at the foot. */
+    taper: number;
+    /** Where the dips between its feet are, across the base from -1 to 1, how deep, and how wide. */
+    dips: number[];
+    dip: number;
+    width: number;
+    /** A cloud is drawn from round lobes instead, as middles and radii in its units, which run into each other. */
+    lobes?: [x: number, y: number, r: number][];
+}
+/** An oval piece of clay: its middle as shares of the body's half width and height, its half sizes as shares of the half width, and its turn. */
+type Piece = [x: number, y: number, rx: number, ry: number, turn: number];
+/** Exact shapes in the face's own units, around the body's middle, with y down. */
+interface Face {
+    name: string;
+    /** What blinks. */
+    eyes: Shape[];
+    /** What stays put through a blink: the mouth, and any brows. */
+    mouth: Shape[];
+    /** White glints on the eyes, and marks in the tint, such as a tongue or a blush. */
+    shine?: Shape[];
+    tint?: Shape[];
+    /** The whites of the eyes, which the eyes are pupils on. */
+    white?: Shape[];
+}
+/** Where a type's arms or hands are. The first is its reference's, and the rest after its other poses. */
+interface Pose {
+    name: string;
+    /** Pieces tucked behind the body, such as arms or feet, and pieces pressed onto its front. */
+    arms: Piece[];
+    hands: Piece[];
+}
+interface Type {
+    name: string;
+    colour: string;
+    ink: string;
+    /** A tongue's or a blush's colour. */
+    tint: string;
+    body: Body;
+    poses: Pose[];
+    /** Pink cheeks, in the face's units, for when Blush is on. */
+    blush: Shape[];
+    /** Where its eyes are in its reference's face, in the face's units: across from the middle, up and down, and half their height. */
+    eyes: {
+        x: number;
+        y: number;
+        h: number;
+    };
+    /** The face's unit, as a share of the body's half width. */
+    unit: number;
+    faces: Face[];
+}
+/** The first is the first reference's. Each type's faces are the same feelings, in the same order. */
+export declare const TYPES: Type[];
+/** The feelings every type has, by name. */
+export declare const FEELINGS: string[];
+/**
+ * A name's type. Its variants, named `name#n`, step on through the types from the name's own,
+ * as the animals' variants are each a different animal: a strip has every type, no two side by
+ * side alike, each with a feeling of its own. A type set by hand is the one drawn, as ever.
+ */
+export declare function typeOf(name: string, overrides?: Overrides): Type;
+export declare const faceOf: (t: Traits, type: Type) => Face;
+/**
+ * Whose eyes it has. Half of all names have their own type's, and the rest another's. Variants
+ * step on through them as through the types, so a strip shows every eye on every body, and low
+ * Possibilities keeps each type's own. Picked by hand, they're those. The rest of the face stays its own.
+ */
+export declare function eyesOf(name: string, overrides: Overrides | undefined, type: Type): Type;
+/** Every type has as many poses, so the Pose control is the same for all. */
+export declare const POSE_COUNT = 4;
+/**
+ * Which pose it's in. Variants step on through them from the name's own, keeping to those that
+ * Possibilities offers, so a strip shows them all. Set by hand, it's that one.
+ */
+export declare function poseOf(name: string, overrides?: Overrides): number;
+/** How often a mallow blushes, in percent. */
+export declare const BLUSH_PERCENT = 30;
+export declare const blushes: (t: Traits) => boolean;
+/** A type's colours: its own, then the pastels. */
+export declare const coloursFor: (type: Type) => string[];
+export declare function coloursOf(t: Traits, type: Type): {
+    body: string;
+    ink: string;
+    tint: string;
+};
+export declare function mallowParts(name: string, overrides?: Overrides): AvatarParts;
+/** The mallow at rest, for thumbnails and where 3D can't run: lit softly from above, as in 3D. */
+export declare function mallowSvg(name: string, overrides?: Overrides): string;
+export {};

package/dist/mallows/index.js

@@ -0,0 +1,454 @@
+/**
+ * Mallows: soft clay characters, each type after a reference, and only that. The Bun is a
+ * domed body on two little feet with an arm hanging low on each side and a small dark face.
+ * The Ghost is a taller dome with a scalloped hem, plump hands pressed onto its front, and
+ * big glossy eyes. The Cloud is puffy lobes on stubby feet, with hands on its front and big
+ * white eyes that look about. Every mallow of a type has its body, measured off its reference, and its
+ * colour: what changes from name to name is how it feels. In 3D both are matte clay.
+ *
+ * Everything is drawn as numbers first: the outline as points, the face as exact shapes,
+ * so the 3D stage and the still picture draw the very same avatar.
+ */
+import { mix, WHITE } from "../colors.js";
+import { containerOf, inContainer } from "../container.js";
+import { shapePath } from "../bots/paths.js";
+import { calmed, keptOf, varianceSet } from "../possibilities.js";
+import { createTraits } from "../traits.js";
+import { CALMING } from "./calming.js";
+/** The name's traits, calmed to the Possibilities set, as the panel reads them too. */
+export const mallowTraits = (name, overrides) => calmed(createTraits(name, overrides), CALMING);
+/** Pastels to pick by hand. Each type starts on its own reference's colour instead. */
+const PASTELS = ["#ffd6bf", "#c2eed8", "#fbe8ad", "#f9cddc", "#b5e7e3", "#d9edb4", "#c9d3fb"];
+const oval = (cx, cy, rx, ry) => ({ kind: "superellipse", cx, cy, rx, ry, n: 2, rot: 0 });
+const disc = (cx, cy, r) => ({ kind: "circle", cx, cy, r });
+const line = (r) => ({
+    arc: (x1, y1, cx, cy, x2, y2) => ({ kind: "curve", x1, y1, cx, cy, x2, y2, r }),
+    bar: (x1, y1, x2, y2) => ({ kind: "rod", x1, y1, x2, y2, r }),
+    ring: (cx, cy, rx, ry) => ({ kind: "superellipse", cx, cy, rx, ry, n: 2, rot: 0, stroke: r }),
+});
+/** The same mark on each side, as drawn for the left. */
+const both = (draw) => [draw(-1), draw(1)];
+/** An open mouth with a flat top, bowing down by `depth` in its middle. */
+const open = (y, width, depth) => ({ kind: "crescent", cx: 0, cy: y, width, lift: 0, thickness: depth });
+/* The Bun, in tenths of its reference's pixels. */
+const BUN_LINE = 0.38;
+const BUN_X = 8.55;
+const BUN_Y = -6;
+const bun = line(BUN_LINE);
+const bunOvals = (dy = 0, rx = 1.8, ry = 3) => [oval(-BUN_X, BUN_Y + dy, rx, ry), oval(BUN_X, BUN_Y + dy, rx, ry)];
+/** The reference's smile: a shallow curve whose ends sit level, `bow` above its middle. */
+const bunSmile = (width = 3.8, bow = 2.3, y = -3.3) => bun.arc(-width, y, 0, y + bow * 2, width, y);
+/** A brow over each eye, its inner end `lift` higher than its outer one. */
+const bunBrows = (y, lift) => both((s) => bun.bar(s * (BUN_X + 1.9), y, s * (BUN_X - 1.8), y - lift));
+const BUN_FACES = [
+    { name: "Content", eyes: bunOvals(), mouth: [bunSmile()] },
+    { name: "Laugh", eyes: both((s) => bun.bar(s * 10.2, -8.2, s * 7.2, -6)).concat(both((s) => bun.bar(s * 7.2, -6, s * 10.2, -3.8))), mouth: [open(-3.6, 3.9, 3.6)] },
+    { name: "Sad", eyes: bunOvals(0.6, 1.7, 2.6), mouth: [bun.arc(-3, -0.9, 0, -4.7, 3, -0.9), ...bunBrows(-9.6, 1.4)] },
+    { name: "Wow", eyes: bunOvals(-0.3, 2.1, 3.3), mouth: [bun.ring(0, -1.4, 1.4, 1.8)] },
+    { name: "Sleepy", eyes: both((s) => bun.arc(s * 10.4, -6, s * 8.55, -3.4, s * 6.7, -6)), mouth: [bunSmile(2.2, 1, -2.8)] },
+    { name: "Joy", eyes: bunOvals(-0.3), mouth: [open(-3.4, 3.4, 3.1)] },
+    { name: "Grumpy", eyes: bunOvals(0.7, 1.8, 2.3), mouth: [bun.bar(-2.6, -1.8, 2.6, -1.8), ...bunBrows(-10.6, -1.6)] },
+    { name: "Wink", eyes: [oval(-BUN_X, BUN_Y, 1.8, 3), bun.arc(6.7, -5.2, 8.55, -8.6, 10.4, -5.2)], mouth: [bunSmile(4.2, 2.6)] },
+    { name: "Shy", eyes: bunOvals(0.9, 1.5, 2.4), mouth: [bunSmile(1.8, 0.8, -2.4)] },
+    { name: "Bliss", eyes: both((s) => bun.arc(s * 10.4, -5.2, s * 8.55, -8.8, s * 6.7, -5.2)), mouth: [bunSmile()] },
+    { name: "Worried", eyes: bunOvals(0.4, 1.7, 2.8), mouth: [bun.arc(-3.2, -2, -1.6, -3.4, 0, -2), bun.arc(0, -2, 1.6, -0.6, 3.2, -2), ...bunBrows(-9.8, 1)] },
+    { name: "Cheeky", eyes: bunOvals(), mouth: [bun.arc(-3.2, -2.6, 0.6, -0.4, 3.8, -4.2)] },
+];
+/* The Ghost, with its body 30 across each side of its middle. */
+const GHOST_X = 10.5;
+const GHOST_Y = -7;
+const ghost = line(0.62);
+const lid = line(0.85);
+/** Big glossy eyes, each with its glint high on the side towards the light. */
+const ghostEyes = (dy = 0, rx = 4.4, ry = 5.6) => {
+    const at = (side) => [side * GHOST_X, GHOST_Y + dy];
+    return {
+        eyes: both((s) => oval(...at(s), rx, ry)),
+        shine: both((s) => disc(at(s)[0] + rx * 0.34, at(s)[1] - ry * 0.42, rx * 0.3)),
+    };
+};
+const ghostSmile = (width = 2.6, bow = 1.4, y = -2.2) => ghost.arc(-width, y, 0, y + bow * 2, width, y);
+/** Closed eyes, curving up as a smile's do, or down as a sleeper's. */
+const ghostLids = (bow) => both((s) => lid.arc(s * GHOST_X - 3.2, GHOST_Y + bow / 2, s * GHOST_X, GHOST_Y - bow * 1.5, s * GHOST_X + 3.2, GHOST_Y + bow / 2));
+const ghostBrows = (y, lift) => both((s) => ghost.bar(s * (GHOST_X + 3.2), y, s * (GHOST_X - 2.4), y - lift));
+/** A tongue low in an open mouth. */
+const tongue = (y, width, depth) => oval(0, y + depth * 0.62, width * 0.42, depth * 0.27);
+const GHOST_FACES = [
+    { name: "Content", ...ghostEyes(), mouth: [ghostSmile()] },
+    { name: "Laugh", eyes: ghostLids(2.2), mouth: [open(-2.6, 3.2, 3.4)], tint: [tongue(-2.6, 3.2, 3.4)] },
+    { name: "Sad", ...ghostEyes(1, 4, 4.8), mouth: [ghost.arc(-2.4, 0, 0, -3, 2.4, 0), ...ghostBrows(-14.4, 1.4)] },
+    { name: "Wow", ...ghostEyes(-0.4, 4.8, 6.2), mouth: [ghost.ring(0, 0.2, 1.5, 1.9)] },
+    { name: "Sleepy", eyes: ghostLids(-1.9), mouth: [ghostSmile(1.6, 0.8, -1.4)] },
+    { name: "Joy", ...ghostEyes(-0.3), mouth: [open(-2.4, 2.6, 3)], tint: [tongue(-2.4, 2.6, 3)] },
+    { name: "Grumpy", ...ghostEyes(0.8, 4.2, 4.6), mouth: [ghost.bar(-2, -1.4, 2, -1.4), ...ghostBrows(-15.6, -1.8)] },
+    { name: "Wink", eyes: [oval(-GHOST_X, GHOST_Y, 4.4, 5.6), lid.arc(GHOST_X - 3.2, GHOST_Y + 1.1, GHOST_X, GHOST_Y - 3.3, GHOST_X + 3.2, GHOST_Y + 1.1)], shine: [disc(-GHOST_X + 1.5, GHOST_Y - 2.35, 1.32)], mouth: [ghostSmile(3, 1.7)] },
+    { name: "Shy", ...ghostEyes(1, 3.6, 4.6), mouth: [ghostSmile(1.6, 0.7, -1.2)] },
+    { name: "Bliss", eyes: ghostLids(2), mouth: [ghostSmile()] },
+    { name: "Worried", ...ghostEyes(0.6, 4.2, 5.2), mouth: [ghost.arc(-2.6, -1.2, -1.3, -2.4, 0, -1.2), ghost.arc(0, -1.2, 1.3, 0, 2.6, -1.2), ...ghostBrows(-14.6, 1)] },
+    { name: "Cheeky", ...ghostEyes(), mouth: [ghost.arc(-2.6, -1.8, 0.6, 0.4, 3, -3.2)] },
+];
+/* The Cloud, with its body 30 across each side of its middle. */
+const CLOUD_X = 7.6;
+const CLOUD_Y = -2.5;
+const cloud = line(0.55);
+const brow = line(0.42);
+const cloudLid = line(0.7);
+/**
+ * Big white eyes, their pupils looking `look` of the way to the edge of the whites, each with
+ * a glint. `only` leaves one side, for a wink.
+ */
+const cloudEyes = ([lx, ly], size = 1, only) => {
+    const sides = only === undefined ? [-1, 1] : [only];
+    const pupil = (s) => [s * CLOUD_X + lx * 2, CLOUD_Y + ly * 2];
+    return {
+        white: sides.map((s) => oval(s * CLOUD_X, CLOUD_Y, 5.6, 6.2)),
+        eyes: sides.map((s) => oval(...pupil(s), 3.3 * size, 3.9 * size)),
+        shine: sides.map((s) => disc(pupil(s)[0] + 1.1 * size, pupil(s)[1] - 1.5 * size, 1.05 * size)),
+    };
+};
+/** A thin brow above each eye, bowing up, its inner end `lift` higher than its outer one. */
+const cloudBrows = (lift = 0) => both((s) => brow.arc(s * (CLOUD_X + 3.4), CLOUD_Y - 7.6, s * (CLOUD_X + 1.2), CLOUD_Y - 9.8, s * (CLOUD_X - 1.4), CLOUD_Y - 9.6 - lift));
+/** Closed eyes, curving up as a smile's do, or down as a sleeper's. */
+const cloudLids = (bow, sides = [-1, 1]) => sides.map((s) => cloudLid.arc(s * CLOUD_X - 3.4, CLOUD_Y + bow / 2, s * CLOUD_X, CLOUD_Y - bow * 1.5, s * CLOUD_X + 3.4, CLOUD_Y + bow / 2));
+/** The reference's smile, a little lopsided. */
+const cloudSmile = (width = 2.6, bow = 1.1, y = 5.8) => cloud.arc(-width, y, 0.3, y + bow * 2, width + 0.6, y - 0.8);
+/** A wink: one eye open, and the other closed in a smile. */
+const winking = () => {
+    const { white, eyes, shine } = cloudEyes([0.3, -0.3], 1, -1);
+    return { white, shine, eyes: [...eyes, ...cloudLids(2.2, [1])] };
+};
+const CLOUD_FACES = [
+    { name: "Content", ...cloudEyes([0.45, -0.45]), mouth: [cloudSmile(), ...cloudBrows()] },
+    { name: "Laugh", eyes: cloudLids(2.4), mouth: [open(4.6, 3, 3.2), ...cloudBrows(0.4)], tint: [tongue(4.6, 3, 3.2)] },
+    { name: "Sad", ...cloudEyes([0, 0.55]), mouth: [cloud.arc(-2.4, 7.4, 0, 4.6, 2.4, 7.4), ...cloudBrows(1.6)] },
+    { name: "Wow", ...cloudEyes([0, 0], 0.85), mouth: [cloud.ring(0, 7.2, 1.4, 1.8), ...cloudBrows(1)] },
+    { name: "Sleepy", eyes: cloudLids(-2.1), mouth: [cloud.arc(-1.4, 5.6, 0, 6.8, 1.4, 5.6), ...cloudBrows()] },
+    { name: "Joy", ...cloudEyes([0.2, -0.5]), mouth: [open(4.8, 2.6, 2.9), ...cloudBrows(0.6)], tint: [tongue(4.8, 2.6, 2.9)] },
+    { name: "Grumpy", ...cloudEyes([0, 0.2]), mouth: [cloud.bar(-2, 6, 2, 6), ...cloudBrows(-1.8)] },
+    { name: "Wink", ...winking(), mouth: [cloudSmile(2.9, 1.3), ...cloudBrows()] },
+    { name: "Shy", ...cloudEyes([-0.5, 0.45]), mouth: [cloudSmile(1.6, 0.6), ...cloudBrows(0.6)] },
+    { name: "Bliss", eyes: cloudLids(2.2), mouth: [cloudSmile(), ...cloudBrows()] },
+    { name: "Worried", ...cloudEyes([0, -0.1]), mouth: [cloud.arc(-2.6, 6.2, -1.3, 5, 0, 6.2), cloud.arc(0, 6.2, 1.3, 7.4, 2.6, 6.2), ...cloudBrows(1.4)] },
+    { name: "Cheeky", ...cloudEyes([0.6, 0]), mouth: [cloud.arc(-2.6, 6, 0.6, 8, 3.4, 4.6), ...cloudBrows(-0.6)] },
+];
+/**
+ * The cloud's waving arm, as in its reference: it rises from the right side, tucked into it
+ * and blended with it as the bun's arms are, up past the shoulder.
+ */
+const WAVING = [0.94, -0.12, 0.34, 0.17, -62];
+/**
+ * The ghost's dome is round where the cloud is lobed, so its arm sits higher and nearer upright:
+ * its root tucked into the side, the rest clear of the dome, as the reference's waving ghost's is.
+ */
+const GHOST_WAVING = [0.98, -0.42, 0.32, 0.16, -75];
+const CLOUD_FEET = [
+    [-0.29, 1.02, 0.2, 0.12, 0],
+    [0.37, 1.02, 0.21, 0.12, 0],
+];
+/** The first is the first reference's. Each type's faces are the same feelings, in the same order. */
+export const TYPES = [
+    {
+        name: "Bun",
+        colour: "#c4e2f4",
+        ink: "#2e3850",
+        // In the reference's pixels, around the body's middle.
+        body: { rx: 220, ry: 230, top: 2.15, base: 3, taper: 0.05, dips: [0], dip: 0.1, width: 0.25 },
+        tint: "#f2a7b8",
+        // Plump ovals hanging down and out, their tops tucked behind the body's sides. Its other
+        // poses swing them out, up in a cheer, or one up in a wave.
+        poses: [
+            { name: "Rest", arms: [-1, 1].map((side) => [side * 1.1, 0.33, 0.35, 0.18, side * 70]), hands: [] },
+            { name: "Out", arms: [-1, 1].map((side) => [side * 1.16, 0.22, 0.3, 0.17, side * 25]), hands: [] },
+            { name: "Cheer", arms: [-1, 1].map((side) => [side * 1.08, -0.15, 0.33, 0.18, side * -55]), hands: [] },
+            { name: "Wave", arms: [[-1.1, 0.33, 0.35, 0.18, -70], [1.08, -0.15, 0.33, 0.18, -55]], hands: [] },
+        ],
+        blush: both((s) => oval(s * (BUN_X + 1.2), BUN_Y + 5.2, 2.1, 1.05)),
+        eyes: { x: BUN_X, y: BUN_Y, h: 3 },
+        unit: 1 / 22,
+        faces: BUN_FACES,
+    },
+    {
+        name: "Ghost",
+        colour: "#c6b6f6",
+        ink: "#2b1818",
+        tint: "#f07888",
+        body: { rx: 30, ry: 33, top: 2.2, base: 4.5, taper: 0.07, dips: [-0.5, 0, 0.5], dip: 0.13, width: 0.19 },
+        // Pressed onto its front, the left one over the body's edge as in the reference. The other
+        // poses are the reference's smaller ghosts': hands low, hugging its front, or one up in a wave.
+        // None reaches the face, which would be painted onto a hand over it.
+        poses: [
+            { name: "Rest", arms: [], hands: [[-0.8, 0.42, 0.26, 0.21, -28], [0.84, 0.22, 0.22, 0.25, 18]] },
+            { name: "Low", arms: [], hands: [[-0.86, 0.6, 0.22, 0.2, -10], [0.88, 0.55, 0.22, 0.2, 10]] },
+            { name: "Hug", arms: [], hands: [[-0.55, 0.32, 0.21, 0.19, -25], [0.58, 0.28, 0.2, 0.21, 25]] },
+            { name: "Wave", arms: [GHOST_WAVING], hands: [[-0.8, 0.42, 0.26, 0.21, -28]] },
+        ],
+        blush: both((s) => oval(s * (GHOST_X + 2.6), GHOST_Y + 7, 2.6, 1.3)),
+        eyes: { x: GHOST_X, y: GHOST_Y, h: 5.6 },
+        unit: 1 / 30,
+        faces: GHOST_FACES,
+    },
+    {
+        name: "Cloud",
+        colour: "#82b8ee",
+        ink: "#1d1515",
+        tint: "#ef6f80",
+        // Its lobes, after the reference: two big ones on top, a round one each side, and a broad belly.
+        body: {
+            rx: 30, ry: 27, top: 2, base: 2, taper: 0, dips: [], dip: 0, width: 1,
+            lobes: [[-2.4, -9.5, 17], [17.4, -10.3, 10.3], [-18.1, 1.6, 11.8], [21.3, 3.2, 9.5], [-7, 9.2, 17.6], [8, 9.6, 17.4]],
+        },
+        // Two stubby feet peeking out underneath, and hands on its front. The other poses are the
+        // reference's smaller clouds': hands low, one at its chin, or one up in a wave.
+        poses: [
+            { name: "Rest", arms: CLOUD_FEET, hands: [[-0.43, 0.47, 0.22, 0.2, -30], [0.71, 0.35, 0.19, 0.22, 15]] },
+            { name: "Low", arms: CLOUD_FEET, hands: [[-0.55, 0.72, 0.2, 0.18, -10], [0.6, 0.7, 0.2, 0.18, 10]] },
+            { name: "Chin", arms: CLOUD_FEET, hands: [[-0.43, 0.47, 0.22, 0.2, -30], [0.16, 0.5, 0.19, 0.17, 5]] },
+            { name: "Wave", arms: [...CLOUD_FEET, WAVING], hands: [[-0.43, 0.47, 0.22, 0.2, -30]] },
+        ],
+        blush: both((s) => oval(s * (CLOUD_X + 3.5), CLOUD_Y + 7, 2.2, 1.1)),
+        eyes: { x: CLOUD_X, y: CLOUD_Y, h: 6.2 },
+        unit: 1 / 30,
+        faces: CLOUD_FACES,
+    },
+];
+/** The feelings every type has, by name. */
+export const FEELINGS = BUN_FACES.map(({ name }) => name);
+/**
+ * A name's type. Its variants, named `name#n`, step on through the types from the name's own,
+ * as the animals' variants are each a different animal: a strip has every type, no two side by
+ * side alike, each with a feeling of its own. A type set by hand is the one drawn, as ever.
+ */
+export function typeOf(name, overrides) {
+    const { t, step } = named(name, overrides);
+    const own = TYPES.indexOf(t.pick("type", TYPES));
+    return TYPES[t.forced("type") === undefined ? (own + step) % TYPES.length : own];
+}
+/** The name a variant was made from, its traits, and how many steps on it is: 0 for the name itself. */
+function named(name, overrides) {
+    const variant = /^(.*)#(\d+)$/.exec(name);
+    const from = variant ? variant[1] : name;
+    return { from, t: createTraits(from, overrides), step: variant ? Number(variant[2]) - 1 : 0 };
+}
+export const faceOf = (t, type) => type.faces[Math.floor(t("face") * type.faces.length)];
+/**
+ * Whose eyes it has. Half of all names have their own type's, and the rest another's. Variants
+ * step on through them as through the types, so a strip shows every eye on every body, and low
+ * Possibilities keeps each type's own. Picked by hand, they're those. The rest of the face stays its own.
+ */
+export function eyesOf(name, overrides, type) {
+    const { t, step } = named(name, overrides);
+    const set = t.forced("eyes");
+    if (set !== undefined)
+        return TYPES[Math.min(TYPES.length - 1, Math.floor(set * TYPES.length))];
+    const value = t("eyes");
+    const variance = varianceSet(t);
+    const kept = variance === undefined ? TYPES.length : keptOf(TYPES.length, 1, variance);
+    // How many types on from its own.
+    const along = ((value < 0.5 ? 0 : value < 0.75 ? 1 : 2) + step) % kept;
+    return TYPES[(TYPES.indexOf(type) + along) % TYPES.length];
+}
+/**
+ * An eye's shape from another type's face, moved onto this type's eyes and sized to them, so
+ * borrowed eyes sit where its own would and never reach its mouth.
+ */
+function borrowed(shape, from, to) {
+    const across = shape.kind === "rod" || shape.kind === "curve" ? shape.x1 + shape.x2 : shape.cx;
+    const side = across < 0 ? -1 : 1;
+    const size = to.eyes.h / from.eyes.h;
+    return placed(shape, side * (to.eyes.x - from.eyes.x * size), to.eyes.y - from.eyes.y * size, size);
+}
+/** Every type has as many poses, so the Pose control is the same for all. */
+export const POSE_COUNT = 4;
+/**
+ * Which pose it's in. Variants step on through them from the name's own, keeping to those that
+ * Possibilities offers, so a strip shows them all. Set by hand, it's that one.
+ */
+export function poseOf(name, overrides) {
+    const { from, step } = named(name, overrides);
+    const t = mallowTraits(from, overrides);
+    const own = Math.floor(t("pose") * POSE_COUNT);
+    const variance = varianceSet(t);
+    if (t.forced("pose") !== undefined)
+        return own;
+    return (own + step) % (variance === undefined ? POSE_COUNT : keptOf(POSE_COUNT, 2, variance));
+}
+/** How often a mallow blushes, in percent. */
+export const BLUSH_PERCENT = 30;
+export const blushes = (t) => t("blush") * 100 < BLUSH_PERCENT;
+/** A type's colours: its own, then the pastels. */
+export const coloursFor = (type) => [type.colour, ...PASTELS];
+export function coloursOf(t, type) {
+    return { body: t.color("colour") ?? type.colour, ink: t.color("ink") ?? type.ink, tint: t.color("tint") ?? type.tint };
+}
+const OUTLINE_POINTS = 240;
+/** How much of the frame the whole mallow spans. */
+const SPAN = 82;
+const round2 = (value) => Math.round(value * 100) / 100;
+const signedPower = (value, power) => Math.sign(value) * Math.abs(value) ** power;
+/** The body's outline, round its own middle with y down. */
+function outlineOf({ rx, ry, top, base, taper, dips, dip, width }) {
+    return Array.from({ length: OUTLINE_POINTS }, (_, i) => {
+        const angle = (i / OUTLINE_POINTS) * 2 * Math.PI;
+        const sin = Math.sin(angle);
+        // Each half its own superellipse, so the dome stays round over straight sides.
+        const power = sin < 0 ? top : base;
+        let x = rx * signedPower(Math.cos(angle), 2 / power);
+        let y = ry * signedPower(sin, 2 / power);
+        const down = y / ry;
+        x *= 1 + taper * down;
+        // The dips between the feet, deepest at the very bottom, so the sides keep their line.
+        if (down > 0) {
+            const across = x / (rx * (1 + taper));
+            const near = dips.reduce((sum, at) => sum + Math.exp(-(((across - at) / width) ** 2)), 0);
+            y -= ry * dip * Math.min(1, near) * down ** 6;
+        }
+        return [x, y];
+    });
+}
+/** An oval piece, as points round its outline. */
+function pieceOf([x, y, rx, ry, turn], body) {
+    const [c, s] = [Math.cos((turn * Math.PI) / 180), Math.sin((turn * Math.PI) / 180)];
+    return Array.from({ length: 96 }, (_, i) => {
+        const angle = (i / 96) * 2 * Math.PI;
+        const [px, py] = [rx * body.rx * Math.cos(angle), ry * body.rx * Math.sin(angle)];
+        return [x * body.rx + c * px - s * py, y * body.ry + s * px + c * py];
+    });
+}
+/** A face's shape, moved and scaled into place, which keeps a curve a curve. */
+function placed(shape, x, y, size) {
+    const to = (px, py) => [round2(x + size * px), round2(y + size * py)];
+    const by = (value) => round2(value * size);
+    switch (shape.kind) {
+        case "superellipse": {
+            const [cx, cy] = to(shape.cx, shape.cy);
+            return { ...shape, cx, cy, rx: by(shape.rx), ry: by(shape.ry), ...(shape.stroke ? { stroke: by(shape.stroke) } : {}) };
+        }
+        case "circle": {
+            const [cx, cy] = to(shape.cx, shape.cy);
+            return { ...shape, cx, cy, r: by(shape.r) };
+        }
+        case "rod": {
+            const [x1, y1] = to(shape.x1, shape.y1);
+            const [x2, y2] = to(shape.x2, shape.y2);
+            return { ...shape, x1, y1, x2, y2, r: by(shape.r) };
+        }
+        case "curve": {
+            const [x1, y1] = to(shape.x1, shape.y1);
+            const [cx, cy] = to(shape.cx, shape.cy);
+            const [x2, y2] = to(shape.x2, shape.y2);
+            return { ...shape, x1, y1, cx, cy, x2, y2, r: by(shape.r) };
+        }
+        case "crescent": {
+            const [cx, cy] = to(shape.cx, shape.cy);
+            return { ...shape, cx, cy, width: by(shape.width), thickness: by(shape.thickness) };
+        }
+    }
+}
+const pathOf = (points) => `M${points.map(([x, y]) => `${round2(x)} ${round2(y)}`).join("L")}Z`;
+/**
+ * A type's body and each pose's pieces in the 100×100 frame, the same for every mallow of it,
+ * and where they span. It is framed in its reference's pose, so the body is the same size in
+ * every pose, and a raised hand reaches into the margin.
+ */
+function figureOf(type) {
+    const { body } = type;
+    const lobes = body.lobes?.map(([x, y, r]) => pieceOf([x / body.rx, y / body.ry, r / body.rx, r / body.rx, 0], body));
+    const outlines = lobes ?? [outlineOf(body)];
+    const poses = type.poses.map(({ arms, hands }) => ({ arms: arms.map((piece) => pieceOf(piece, body)), hands: hands.map((piece) => pieceOf(piece, body)) }));
+    const all = [...outlines.flat(), ...poses[0].arms.flat(), ...poses[0].hands.flat()];
+    const [left, right] = [Math.min(...all.map(([x]) => x)), Math.max(...all.map(([x]) => x))];
+    const [high, low] = [Math.min(...all.map(([, y]) => y)), Math.max(...all.map(([, y]) => y))];
+    const scale = SPAN / Math.max(right - left, low - high);
+    const frame = ([x, y]) => [50 + (x - (left + right) / 2) * scale, 50 + (y - (high + low) / 2) * scale];
+    const [x, y] = frame([0, 0]);
+    return {
+        body: outlines.map((outline) => pathOf(outline.map(frame))),
+        poses: poses.map(({ arms, hands }) => ({
+            // Puffed up on their own and tucked behind the body, which rounds into them with a soft crease.
+            arms: arms.map((piece) => pathOf(piece.map(frame))),
+            // Pressed onto its front, where they stand proud of it with a soft crease round them.
+            hands: hands.map((piece) => pathOf(piece.map(frame))),
+        })),
+        middle: { x: round2(x), y: round2(y) },
+        unit: type.unit * type.body.rx * scale,
+        top: round2(frame([0, high])[1]),
+        bottom: round2(frame([0, low])[1]),
+    };
+}
+const FIGURES = new Map(TYPES.map((type) => [type, figureOf(type)]));
+function describe(name, overrides) {
+    const t = mallowTraits(name, overrides);
+    const type = typeOf(name, overrides);
+    const figure = FIGURES.get(type);
+    const face = faceOf(t, type);
+    // Another type's eyes, for the same feeling, if they were picked.
+    const from = eyesOf(name, overrides, type);
+    const eyeFace = faceOf(t, from);
+    const own = (shape) => (from === type ? shape : borrowed(shape, from, type));
+    const at = (shape) => placed(shape, figure.middle.x, figure.middle.y, figure.unit);
+    return {
+        t,
+        type,
+        figure,
+        pose: figure.poses[poseOf(name, overrides)],
+        eyes: eyeFace.eyes.map(own).map(at),
+        mouth: face.mouth.map(at),
+        shine: (eyeFace.shine ?? []).map(own).map(at),
+        tint: [...(face.tint ?? []), ...(blushes(t) ? type.blush : [])].map(at),
+        white: (eyeFace.white ?? []).map(own).map(at),
+        colours: coloursOf(t, type),
+    };
+}
+/** Where a shape's middle sits, up and down, which a blink closes towards. */
+const middleOf = (shape) => shape.kind === "rod" || shape.kind === "curve" ? (shape.y1 + shape.y2) / 2 : shape.cy;
+export function mallowParts(name, overrides) {
+    const { t, figure, pose, eyes, mouth, shine, tint, white, colours } = describe(name, overrides);
+    return {
+        // The visor colours the tinted marks, as clay has no glass.
+        colors: { body: colours.body, accent: colours.body, visor: colours.tint, light: colours.ink },
+        head: figure.body,
+        accents: pose.arms,
+        visor: [],
+        visorShapes: [],
+        eyes: [],
+        eyeShapes: eyes,
+        lights: [],
+        lightShapes: mouth,
+        chrome: [],
+        chromeShapes: [],
+        studs: [],
+        studShapes: [],
+        speckle: 0,
+        eyeY: round2(eyes.reduce((sum, shape) => sum + middleOf(shape), 0) / eyes.length),
+        painted: true,
+        matte: true,
+        raised: pose.hands,
+        shineShapes: shine,
+        tintShapes: tint,
+        whiteShapes: white,
+        container: containerOf(t),
+    };
+}
+/** A face's shape as markup. An oval's outline leaves out its stroke, so it's added here. */
+function markupOf(shape) {
+    const stroked = shape.kind === "superellipse" && shape.stroke ? ` fill="none" stroke="currentColor" stroke-width="${round2(shape.stroke * 2)}"` : "";
+    return `<path d="${shapePath(shape)}"${stroked}/>`;
+}
+/** The mallow at rest, for thumbnails and where 3D can't run: lit softly from above, as in 3D. */
+export function mallowSvg(name, overrides) {
+    const { t, type, figure, pose, eyes, mouth, shine, tint, white, colours } = describe(name, overrides);
+    const { body, ink } = colours;
+    const clay = (d) => `<path d="${d}"/>`;
+    const art = `<defs><linearGradient id="mallow-clay" gradientUnits="userSpaceOnUse" x1="50" y1="${figure.top}" x2="50" y2="${figure.bottom}">` +
+        `<stop offset="0" stop-color="${mix(body, WHITE, 0.4)}"/><stop offset="0.55" stop-color="${body}"/>` +
+        `<stop offset="1" stop-color="${mix(body, type.ink, 0.12)}"/></linearGradient></defs>` +
+        `<g fill="url(#mallow-clay)">${[...pose.arms, ...figure.body].map(clay).join("")}` +
+        // Hands sit on the body, so a faint crease round each keeps them apart from it.
+        // Lit from the upper left, as in 3D, they catch more light than the body behind them.
+        `<g fill="${mix(body, WHITE, 0.22)}" stroke="${mix(body, type.ink, 0.2)}" stroke-width="0.6">${pose.hands.map(clay).join("")}</g></g>` +
+        `<g fill="#f2ede0">${white.map(markupOf).join("")}</g>` +
+        `<g fill="${ink}" color="${ink}">${[...eyes, ...mouth].map(markupOf).join("")}</g>` +
+        `<g fill="${colours.tint}">${tint.map(markupOf).join("")}</g>` +
+        `<g fill="#ffffff">${shine.map(markupOf).join("")}</g>`;
+    return inContainer(art, containerOf(t), "mallow-card");
+}

package/dist/peeks/calming.d.ts

@@ -0,0 +1,8 @@
+/**
+ * What Possibilities calms on a peek. Low keeps eight bodies and poses, one for each variant,
+ * glossy eyes, and draws its size, depth, eyes and turn towards their middle. Indices are
+ * into the lists in `index.ts`, plainest first.
+ */
+import type { Calming } from "../possibilities.ts";
+export declare const CALMING: Calming;
+export declare const NOTES: [string, string, string];

package/dist/peeks/calming.js

@@ -0,0 +1,21 @@
+/**
+ * What Possibilities calms on a peek. Low keeps eight bodies and poses, one for each variant,
+ * glossy eyes, and draws its size, depth, eyes and turn towards their middle. Indices are
+ * into the lists in `index.ts`, plainest first.
+ */
+export const CALMING = {
+    features: /^(body\.size|eye\.(size|ratio|gap)|brow\.y|fluff|tilt|bumps|angle)$/,
+    lists: {
+        // Dome, Swell, Fluffy, Ears, Tuft, Lumpy, Drips, Horns, then Spiky.
+        body: [9, 8, [7, 2, 0, 1, 3, 8, 6, 5, 4]],
+        // Corner, Other corner, Rising, Right, Left, Top corner, Top left, Whole, then Hanging.
+        pose: [9, 8, [0, 3, 6, 2, 5, 4, 7, 8, 1]],
+        // Glossy, then Sleepy and Tiny.
+        "eye.kind": [3, 1],
+    },
+};
+export const NOTES = [
+    "smooth bodies peeking from a corner or the side, glossy eyes, barely turned.",
+    "more eye styles, depth and turn.",
+    "every body and pose, up to spikes and hanging upside down, at any turn.",
+];

package/dist/peeks/controls.d.ts

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