pi-roundtable 0.22.5 → 0.23.0

package/src/characters/parts-outfits.ts

@@ -0,0 +1,81 @@
+import type { OutfitId } from "./catalog.ts";
+import type { Part, Tones } from "./colors.ts";
+
+const WOOD = "#8b5a33";
+const STEEL = "#c7cfdd";
+const STEELD = "#9aa5ba";
+const LEATHER = "#a6713f";
+
+const T = "M31 94C29 79 35 71 50 71C65 71 71 79 69 94Z";
+export const hand = (v: Tones, x: number, y: number, r = 4.8): string =>
+	`<circle cx="${x}" cy="${y}" r="${r}" fill="${v.k}"/>`;
+const torso = (fill: string): string => `<path d="${T}" fill="${fill}"/>`;
+const arms = (fill: string): string =>
+	`<ellipse cx="28.5" cy="80" rx="5.2" ry="8" transform="rotate(14 28.5 80)" fill="${fill}"/><ellipse cx="71.5" cy="80" rx="5.2" ry="8" transform="rotate(-14 71.5 80)" fill="${fill}"/>`;
+export const star5 = (x: number, y: number, fill: string): string =>
+	`<path d="M${x} ${y - 4}l1.5 3.2 3.5.4-2.6 2.4.7 3.5-3.1-1.8-3.1 1.8.7-3.5-2.6-2.4 3.5-.4z" fill="${fill}"/>`;
+
+export const OUTFITS: Record<OutfitId, Part> = {
+	robe: (v) =>
+		arms(v.p) +
+		torso(v.p) +
+		`<path d="M30 89H70L69.6 94H30.4Z" fill="${v.t}"/>` +
+		star5(50, 77, v.t) +
+		hand(v, 27, 88, 4.4),
+	scholar: (v) =>
+		arms(v.pd) +
+		torso(v.pd) +
+		`<path d="M39 71.5L50 85L61 71.5Z" fill="${v.s}"/><path d="M50 85V94" stroke="${v.t}" stroke-width="1.6"/><path d="M33 88H67" stroke="${v.p}" stroke-width="2.4" opacity=".7"/>`,
+	armor: (v) =>
+		arms(STEEL) +
+		torso(STEEL) +
+		`<path d="M44 71H56V94H44Z" fill="${v.p}"/><path d="M44 80H56" stroke="${v.t}" stroke-width="2"/><circle cx="31" cy="75.5" r="6.4" fill="${STEELD}"/><circle cx="69" cy="75.5" r="6.4" fill="${STEELD}"/><circle cx="29.5" cy="73.5" r="2" fill="#fff" opacity=".6"/><circle cx="67.5" cy="73.5" r="2" fill="#fff" opacity=".6"/>`,
+	plate: (v) =>
+		arms("#e6eaf3") +
+		torso("#e6eaf3") +
+		`<path d="M44 71H56L58 94H42Z" fill="${v.s}" stroke="${v.t}" stroke-width="1.6"/><path d="M50 74V92M45 81H55" stroke="${v.p}" stroke-width="3"/><circle cx="31" cy="75.5" r="6.4" fill="${v.t}"/><circle cx="69" cy="75.5" r="6.4" fill="${v.t}"/><circle cx="29.5" cy="73.5" r="2" fill="#fff" opacity=".6"/><circle cx="67.5" cy="73.5" r="2" fill="#fff" opacity=".6"/>`,
+	apron: (v) =>
+		arms(v.s) +
+		torso(v.s) +
+		`<path d="M38 71H62L66 94H34Z" fill="${LEATHER}"/><path d="M38 71L42 75M62 71L58 75" stroke="#7a4f27" stroke-width="2"/><rect x="43.5" y="82" width="13" height="8" rx="2" fill="#8d5c30"/><rect x="24" y="85" width="9" height="3" rx="1.5" fill="#8d5c30"/>`,
+	chef: (v) =>
+		arms("#fff") +
+		torso("#fff") +
+		`<path d="M50 72V94" stroke="#cfd5e4" stroke-width="1.4"/><circle cx="45" cy="79" r="1.7" fill="${v.t}"/><circle cx="45" cy="87" r="1.7" fill="${v.t}"/><circle cx="55" cy="79" r="1.7" fill="${v.t}"/><circle cx="55" cy="87" r="1.7" fill="${v.t}"/><path d="M41 71.5Q50 77 59 71.5L57 75Q50 79 43 75Z" fill="${v.p}"/>`,
+	cloak: (v) =>
+		`<path d="M26 79Q50 66 74 79L72 94H28Z" fill="${v.pd}"/>` +
+		arms(v.p) +
+		torso(v.p) +
+		`<path d="M32 87H68" stroke="${WOOD}" stroke-width="3.2"/><rect x="46" y="84.8" width="8" height="4.4" rx="1.4" fill="${v.t}"/><circle cx="50" cy="72.5" r="2.6" fill="${v.t}"/>`,
+	tunic: (v) =>
+		arms(v.p) +
+		torso(v.p) +
+		`<path d="M31 83L69 76V82L31 89Z" fill="${v.s}"/><circle cx="44" cy="90" r="1.8" fill="${v.t}"/><circle cx="56" cy="88" r="1.8" fill="${v.t}"/><path d="M37 71.5q3 5 6.3 0t6.4 0t6.3 0t6.3 0V75H37Z" fill="${v.s}"/>`,
+	coat: (v) =>
+		arms(v.pd) +
+		torso(v.pd) +
+		`<path d="M50 72V94" stroke="${v.ink}" stroke-width="1" opacity=".35"/><path d="M40 71.5L47 84L50 72ZM60 71.5L53 84L50 72Z" fill="${v.s}"/><circle cx="46" cy="87" r="1.8" fill="${v.t}"/><circle cx="54" cy="87" r="1.8" fill="${v.t}"/><circle cx="46" cy="80" r="1.8" fill="${v.t}" opacity="0"/>`,
+	overalls: (v) =>
+		arms(v.s) +
+		torso(v.s) +
+		`<path d="M36 80H64V94H36Z" fill="${v.p}"/><path d="M39 80L40 71.4M61 80L60 71.4" stroke="${v.p}" stroke-width="4"/><rect x="44.5" y="83" width="11" height="6" rx="1.5" fill="${v.pd}"/><circle cx="40" cy="79" r="1.6" fill="${v.t}"/><circle cx="60" cy="79" r="1.6" fill="${v.t}"/>`,
+	vest: (v) =>
+		arms(v.s) +
+		torso(v.s) +
+		`<path d="M37 71.5L45 94H36ZM63 71.5L55 94H64Z" fill="${v.p}"/><path d="M40 83Q50 90 60 83" fill="none" stroke="${v.t}" stroke-width="1.6"/><circle cx="50" cy="86" r="2" fill="${v.t}"/>`,
+	habit: (v) =>
+		arms(v.p) +
+		`<path d="M29 94C27 78 35 71 50 71C65 71 73 78 71 94Z" fill="${v.p}"/><path d="M40 71.5L50 82L60 71.5" fill="none" stroke="${v.s}" stroke-width="3.2" stroke-linejoin="round"/><path d="M29 87H71" stroke="${v.s}" stroke-width="3"/><circle cx="50" cy="87" r="2" fill="${v.t}"/>`,
+	surplice: (v) =>
+		arms(v.s) +
+		torso(v.s) +
+		`<path d="M46 74H54V79H59V85H54V93H46V85H41V79H46Z" fill="${v.p}"/><path d="M31 90H69" stroke="${v.sd}" stroke-width="2"/>`,
+	motley: (v) =>
+		arms(v.p) +
+		torso(v.p) +
+		`<path d="M50 71C65 71 71 79 69 94H50Z" fill="${v.s}"/><path d="M71.5 72A8 8 0 0 1 71.5 88Z" fill="${v.s}" opacity="0"/><path d="M41 82L50 90L59 82L50 74Z" fill="${v.t}" opacity=".9"/><path d="M36 71.5q3 5 6.5 0t7.5 0t7.5 0t6.5 0V75H36Z" fill="${v.t}"/>`,
+	sailor: (v) =>
+		arms(v.s) +
+		torso(v.s) +
+		`<path d="M31 78H69M31 84H69M31 90H69" stroke="${v.p}" stroke-width="2.6"/><path d="M38 71.5L50 82L62 71.5L56 71Q50 76 44 71Z" fill="${v.pd}"/>`,
+};

package/src/characters/parts-props.ts

@@ -0,0 +1,137 @@
+import type { PropId } from "./catalog.ts";
+import type { Part } from "./colors.ts";
+import { hand, star5 } from "./parts-outfits.ts";
+
+const WOOD = "#8b5a33";
+const LEATHER = "#a6713f";
+
+/** The part's markup as it is; the pivot its animation turns about is in `PROP_PIVOTS`. */
+const held = (inner: string): string => inner;
+
+/** Where each prop turns when it sweeps, in the 100-unit drawing (applied by characters.css). */
+export const PROP_PIVOTS: Readonly<Record<PropId, string>> = {
+	staff: "73px 82px",
+	shield: "27px 82px",
+	scroll: "76px 76px",
+	hammer: "79px 84px",
+	bow: "78px 70px",
+	lute: "75px 70px",
+	flask: "73px 66px",
+	quill: "72px 82px",
+	tome: "78px 76px",
+	bell: "76px 62px",
+	keys: "78px 62px",
+	map: "77px 58px",
+	telescope: "76px 74px",
+	wrench: "78px 86px",
+	spade: "76px 60px",
+	ladle: "78px 78px",
+	lantern: "76px 62px",
+	seal: "76px 66px",
+	dagger: "78px 86px",
+	beads: "78px 62px",
+	bird: "78px 76px",
+	anchor: "76px 76px",
+	marotte: "76px 62px",
+	sword: "76px 82px",
+};
+
+export const PROPS: Record<PropId, Part> = {
+	staff: (v) =>
+		held(
+			`<circle class="glow" cx="73" cy="15" r="13" fill="${v.gl}"/><path d="M73 15V92" stroke="${WOOD}" stroke-width="4.2" stroke-linecap="round"/><circle cx="73" cy="14" r="6.4" fill="${v.gl}" stroke="${v.t}" stroke-width="2"/><circle cx="71" cy="12" r="1.8" fill="#fff" opacity=".85"/>${hand(v, 73, 82)}`,
+		),
+	shield: (v) =>
+		held(
+			`<path class="glow" d="M17 70H37V80Q37 89 27 93.5Q17 89 17 80Z" fill="none" stroke="${v.gl}" stroke-width="6"/><path d="M17 70H37V80Q37 89 27 93.5Q17 89 17 80Z" fill="${v.s}" stroke="${v.t}" stroke-width="2"/><path d="M17 70H27V93.5Q17 89 17 80Z" fill="${v.p}"/>` +
+				star5(27, 79, v.t),
+		),
+	scroll: (v) =>
+		held(
+			`<g transform="rotate(-16 76 74)"><path class="glow" d="M76 38l2.4 5.4 5.7.6-4.3 3.9 1.2 5.7-5-2.9-5 2.9 1.2-5.7-4.3-3.9 5.7-.6z" fill="${v.t}"/><rect x="69.5" y="56" width="13" height="30" rx="2" fill="#fbefd0" stroke="#c9a867" stroke-width="1.2"/><ellipse cx="76" cy="56" rx="7.4" ry="2.8" fill="#f1d99b" stroke="#c9a867" stroke-width="1.2"/><ellipse cx="76" cy="86" rx="7.4" ry="2.8" fill="#f1d99b" stroke="#c9a867" stroke-width="1.2"/><path d="M72.5 63H79.5M72.5 68H79.5M72.5 73H77" stroke="${v.p}" stroke-width="1.6" stroke-linecap="round"/></g>${hand(v, 75.5, 74, 4.6)}`,
+		),
+	hammer: (v) =>
+		held(
+			`<path class="glow" d="M89 49l1.8 4 4.2.4-3.2 2.9.9 4.2-3.7-2.2-3.7 2.2.9-4.2-3.2-2.9 4.2-.4z" fill="${v.t}"/><path d="M78 95L82 70" stroke="${WOOD}" stroke-width="4.4" stroke-linecap="round"/><g transform="rotate(8 81 66)"><rect x="68" y="59" width="26" height="14" rx="3.4" fill="#aab3c5" stroke="#7d879b" stroke-width="1.4"/><rect x="68" y="59" width="7" height="14" rx="3" fill="#8b95a9"/><path d="M73 61.4H90" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity=".6"/></g>${hand(v, 79.4, 85)}`,
+		),
+	bow: (v) =>
+		held(
+			`<circle class="glow" cx="94" cy="70" r="8" fill="${v.gl}"/><path d="M74 40Q98 68 74 96" fill="none" stroke="${WOOD}" stroke-width="4.2" stroke-linecap="round"/><path d="M74 40V96" stroke="#9aa5ba" stroke-width="1" opacity=".9"/><path d="M66 70H94" stroke="${WOOD}" stroke-width="1.8" stroke-linecap="round"/><path d="M93 66.5L99 70L93 73.5Z" fill="${v.t}"/><path d="M66 70l-3.4-3M66 70l-3.4 3" stroke="${v.p}" stroke-width="1.8" stroke-linecap="round"/>${hand(v, 78, 70)}`,
+		),
+	lute: (v) =>
+		held(
+			`<g transform="rotate(18 76 80)"><path d="M74.2 70V44" stroke="${WOOD}" stroke-width="3.8"/><rect x="72.6" y="38" width="6.4" height="8" rx="1.6" fill="#6d4426"/><ellipse cx="76" cy="82" rx="11.4" ry="12.6" fill="#cd8b4a" stroke="#9a5f2c" stroke-width="1.6"/><circle cx="76" cy="82" r="3.6" fill="${v.ink}"/><path d="M74.8 46V88M77.2 46V88" stroke="#fff" stroke-width=".8" opacity=".85"/></g><g class="glow"><circle cx="89" cy="54" r="2.8" fill="${v.gl}"/><path d="M91.5 54V41q4.2 1 4.4 6" fill="none" stroke="${v.gl}" stroke-width="2" stroke-linecap="round"/></g>${hand(v, 75, 68, 4.6)}`,
+		),
+	flask: (v) =>
+		held(
+			`<circle class="glow" cx="73.5" cy="78" r="17" fill="${v.gl}"/><rect x="70" y="56" width="7" height="12" fill="#eaf7fb" stroke="#9fc9d8" stroke-width="1.4"/><rect x="69" y="51.5" width="9" height="5.6" rx="1.6" fill="#b7773f"/><circle cx="73.5" cy="78" r="12.4" fill="#eaf7fb" stroke="#9fc9d8" stroke-width="1.6"/><path d="M61.4 77Q73.5 72.6 85.6 77A12.2 12.2 0 0 1 61.4 77Z" fill="${v.gl}"/><circle cx="70" cy="80" r="1.8" fill="#fff" opacity=".8"/><circle cx="76.5" cy="83.5" r="1.2" fill="#fff" opacity=".8"/>${hand(v, 73.5, 64)}`,
+		),
+	quill: (v) =>
+		held(
+			`<circle class="glow" cx="92" cy="30" r="8" fill="${v.t}"/><path d="M70 88C70 62 80 40 92 30C95 50 86 72 70 88Z" fill="${v.s}" stroke="${v.td}" stroke-width="1.3"/><path d="M70 88Q80 58 92 30" fill="none" stroke="${v.td}" stroke-width="1.5"/><path d="M80 52Q86 54 89 48M77 62Q84 63 88 57" fill="none" stroke="${v.sd}" stroke-width="1.3"/><path d="M70 88l-3 5" stroke="${v.ink}" stroke-width="2" stroke-linecap="round"/>${hand(v, 72.4, 80)}`,
+		),
+	tome: (v) =>
+		held(
+			`<circle class="glow" cx="80" cy="60" r="9" fill="${v.t}"/><g transform="rotate(-12 78 76)"><rect x="65" y="63" width="25" height="24" rx="2.4" fill="${v.pd}" stroke="${v.ink}" stroke-width="1" stroke-opacity=".3"/><rect x="67.4" y="65.4" width="20" height="19" rx="1.4" fill="none" stroke="${v.t}" stroke-width="1.2"/><path d="M90 66V84" stroke="#f8efd6" stroke-width="3"/><rect x="72" y="71" width="9" height="7" rx="1.4" fill="${v.t}"/></g>${hand(v, 66, 80, 4.4)}`,
+		),
+	bell: (v) =>
+		held(
+			`<g class="glow"><path d="M90 66q4 6 0 12M94 62q7 10 0 20" fill="none" stroke="${v.gl}" stroke-width="2" stroke-linecap="round"/></g><path d="M66 85C70 83 69 68 76 66C83 68 82 83 86 85Z" fill="${v.t}" stroke="${v.td}" stroke-width="1.4" stroke-linejoin="round"/><circle cx="76" cy="87.6" r="2.4" fill="${v.td}"/><rect x="73.4" y="60" width="5.2" height="6.4" rx="1.6" fill="${WOOD}"/>${hand(v, 76, 60, 4.4)}`,
+		),
+	keys: (v) =>
+		held(
+			`<circle class="glow" cx="79" cy="80" r="14" fill="${v.t}"/><circle cx="78" cy="62" r="5.6" fill="none" stroke="${v.t}" stroke-width="2.6"/><path d="M82 66L90 88M90 88L93 87M87 82L90 81" fill="none" stroke="${v.t}" stroke-width="2.6" stroke-linecap="round"/><path d="M74 66L70 84M70 84L73 85M71 78L74 78" fill="none" stroke="${v.td}" stroke-width="2.6" stroke-linecap="round"/>${hand(v, 78, 62, 4.4)}`,
+		),
+	map: (v) =>
+		held(
+			`<circle class="glow" cx="81" cy="76" r="8" fill="${v.p}"/><rect x="66" y="58" width="24" height="29" rx="2" fill="#f3e2b5" stroke="#c9a867" stroke-width="1.3"/><path d="M70 66Q78 62 82 70T86 80M70 82L74 76" fill="none" stroke="#8ec7d8" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 2.4"/><path d="M79 74l4 4M83 74l-4 4" stroke="${v.p}" stroke-width="2.2" stroke-linecap="round"/>${hand(v, 78, 58, 4.4)}`,
+		),
+	telescope: (v) =>
+		held(
+			`<circle class="glow" cx="94" cy="48" r="8" fill="${v.gl}"/><g transform="rotate(-38 78 70)"><rect x="55" y="64.5" width="14" height="11" rx="2" fill="${v.pd}"/><rect x="68" y="65.6" width="14" height="8.8" fill="${v.p}"/><rect x="81" y="66.6" width="12" height="6.8" rx="1.4" fill="${v.pd}"/><rect x="68" y="64.5" width="2.4" height="11" fill="${v.t}"/><rect x="81" y="65.6" width="2.4" height="8.8" fill="${v.t}"/><rect x="91" y="63.6" width="3.6" height="12.8" rx="1.4" fill="${v.t}"/></g>${hand(v, 77, 72, 4.6)}`,
+		),
+	wrench: (v) =>
+		held(
+			`<path class="glow" d="M90 52l1.6 3.6 3.8.4-2.8 2.6.8 3.8-3.4-2-3.4 2 .8-3.8-2.8-2.6 3.8-.4z" fill="${v.t}"/><path d="M76 94L83 66" stroke="#aab3c5" stroke-width="5" stroke-linecap="round"/><path d="M76 94L83 66" stroke="#fff" stroke-width="1.2" stroke-linecap="round" opacity=".5"/><path d="M77.6 58C77 52 84 50 86 54L84 57L87 59L89 57C92 62 86 68 81 66Z" fill="#aab3c5" stroke="#7d879b" stroke-width="1.2" stroke-linejoin="round"/>${hand(v, 77.4, 86)}`,
+		),
+	spade: (v) =>
+		held(
+			`<g class="glow"><ellipse cx="88" cy="62" rx="4.4" ry="2.4" transform="rotate(-30 88 62)" fill="#4fae6c"/><ellipse cx="91" cy="70" rx="4" ry="2.2" transform="rotate(20 91 70)" fill="#4fae6c"/></g><path d="M76 92V56" stroke="${WOOD}" stroke-width="4" stroke-linecap="round"/><path d="M70 56H82" stroke="${WOOD}" stroke-width="3.4" stroke-linecap="round"/><path d="M69.5 78H82.5V88Q76 97 69.5 88Z" fill="#aab3c5" stroke="#7d879b" stroke-width="1.3" stroke-linejoin="round"/>${hand(v, 76, 59)}`,
+		),
+	ladle: (v) =>
+		held(
+			`<g class="glow"><path d="M88 48q-3-4 0-8M93 50q-3-4 0-8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></g><path d="M74 94L82 62" stroke="${WOOD}" stroke-width="4" stroke-linecap="round"/><path d="M73 58H93A10 8 0 0 1 73 58Z" fill="#aab3c5" stroke="#7d879b" stroke-width="1.3" stroke-linejoin="round" transform="rotate(-14 83 58)"/><ellipse cx="83" cy="57" rx="8" ry="2" fill="#c97b3a" transform="rotate(-14 83 57)"/>${hand(v, 76.4, 82)}`,
+		),
+	lantern: (v) =>
+		held(
+			`<circle class="glow" cx="77" cy="78" r="20" fill="#ffd84a"/><path d="M69 66Q77 52 85 66" fill="none" stroke="${v.td}" stroke-width="2.2"/><rect x="69" y="66" width="16" height="4" rx="1.6" fill="${v.t}"/><rect x="70.4" y="70" width="13.2" height="16" fill="#fff3c2" stroke="${v.td}" stroke-width="1.4"/><path d="M77 73Q81 78 77 83Q73 78 77 73Z" fill="#ffa63a"/><rect x="69" y="86" width="16" height="4" rx="1.6" fill="${v.t}"/>${hand(v, 77, 60, 4.4)}`,
+		),
+	seal: (v) =>
+		held(
+			`<circle class="glow" cx="79" cy="78" r="9" fill="${v.p}"/><g transform="rotate(-10 78 74)"><rect x="66" y="64" width="26" height="18" rx="2" fill="#fff7e6" stroke="#d3bd8e" stroke-width="1.2"/><path d="M66 65L79 75L92 65" fill="none" stroke="#d3bd8e" stroke-width="1.2"/><circle cx="79" cy="75" r="4.6" fill="${v.p}" stroke="${v.pd}" stroke-width="1"/>${star5(79, 75, v.t).replace('d="M', 'transform="scale(.6) translate(52 50)" d="M')}</g>${hand(v, 70, 82, 4.4)}`,
+		),
+	dagger: (v) =>
+		held(
+			`<path class="glow" d="M78 50V80" stroke="#fff" stroke-width="5" stroke-linecap="round"/><path d="M78 52L82.4 78H73.6Z" fill="#dfe5f0" stroke="#9aa5ba" stroke-width="1.2" stroke-linejoin="round"/><path d="M78 56V76" stroke="#fff" stroke-width="1.2" opacity=".7"/><rect x="71" y="78" width="14" height="3.4" rx="1.6" fill="${v.t}"/><rect x="76.4" y="81" width="3.2" height="8" fill="${WOOD}"/>${hand(v, 78, 86)}`,
+		),
+	beads: (v) =>
+		held(
+			`<g class="glow"><circle cx="78" cy="78" r="12" fill="${v.t}"/></g><g fill="${v.t}" stroke="${v.td}" stroke-width="1"><circle cx="78" cy="66" r="2.4"/><circle cx="84.4" cy="68.4" r="2.4"/><circle cx="87" cy="75" r="2.4"/><circle cx="85.6" cy="82" r="2.4"/><circle cx="80.4" cy="86.6" r="2.4"/><circle cx="73.6" cy="86.6" r="2.4"/><circle cx="68.4" cy="82" r="2.4"/><circle cx="67" cy="75" r="2.4"/><circle cx="71.6" cy="68.4" r="2.4"/></g>${hand(v, 78, 62, 4.4)}`,
+		),
+	bird: (v) =>
+		held(
+			`<circle class="glow" cx="88" cy="55" r="8" fill="${v.t}"/><ellipse cx="80" cy="64" rx="9" ry="6.4" transform="rotate(-24 80 64)" fill="#8a6a4a"/><path d="M72 70L66 76L76 70Z" fill="#6f5338"/><path d="M76 66Q82 64 86 66Q82 70 78 70Z" fill="#f1e2c4"/><circle cx="87" cy="56" r="5" fill="#8a6a4a"/><path d="M91 55L96 57L91 59Z" fill="${v.t}"/><circle cx="88" cy="55" r="1.3" fill="${v.ink}"/><path d="M78 70V75" stroke="${v.t}" stroke-width="2"/><circle cx="78" cy="79" r="6.2" fill="${LEATHER}" stroke="#7a4f27" stroke-width="1.2"/>`,
+		),
+	anchor: (v) =>
+		held(
+			`<path class="glow" d="M76 54l2 4.4 4.8.5-3.6 3.2 1 4.7-4.2-2.4-4.2 2.4 1-4.7-3.6-3.2 4.8-.5z" fill="${v.t}" transform="translate(11 -4)"/><circle cx="76" cy="58" r="3.4" fill="none" stroke="#aab3c5" stroke-width="2.4"/><path d="M76 61.4V90M69.6 66H82.4M65 82Q76 98 87 82" fill="none" stroke="#aab3c5" stroke-width="3.4" stroke-linecap="round"/><path d="M65 82L63 86M87 82L89 86" stroke="#aab3c5" stroke-width="3.4" stroke-linecap="round"/>${hand(v, 76, 74)}`,
+		),
+	marotte: (v) =>
+		held(
+			`<g class="glow"><circle cx="66" cy="40" r="3" fill="${v.t}"/><circle cx="86" cy="40" r="3" fill="${v.t}"/></g><path d="M76 94V52" stroke="${WOOD}" stroke-width="4" stroke-linecap="round"/><circle cx="76" cy="46" r="7" fill="${v.k}" stroke="${v.kd}" stroke-width="1"/><path d="M70 42Q64 36 66 40Q68 42 71 44ZM82 42Q88 36 86 40Q84 42 81 44Z" fill="${v.p}"/><path d="M69 42C64 38 62 36 66 40ZM83 42C88 38 90 36 86 40Z" fill="none"/><circle cx="74" cy="46" r="1" fill="${v.ink}"/><circle cx="78" cy="46" r="1" fill="${v.ink}"/><path d="M73.4 49Q76 51.4 78.6 49" fill="none" stroke="${v.ink}" stroke-width="1" stroke-linecap="round"/>${hand(v, 76, 62, 4.4)}`,
+		),
+	sword: (v) =>
+		held(
+			`<path class="glow" d="M76 20V76" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path d="M76 17L80.4 24V76H71.6V24Z" fill="#e1e7f2" stroke="#9aa5ba" stroke-width="1.2" stroke-linejoin="round"/><path d="M76 24V74" stroke="#fff" stroke-width="1.4" opacity=".8"/><rect x="67" y="76" width="18" height="4" rx="2" fill="${v.t}"/><rect x="74.4" y="80" width="3.6" height="8" fill="${WOOD}"/><circle cx="76.2" cy="90" r="2.4" fill="${v.t}"/>${hand(v, 76.2, 83)}`,
+		),
+};

package/src/characters/spec.ts

@@ -0,0 +1,224 @@
+import {
+	ACCESSORY_CHOICES,
+	type AccessoryId,
+	BEARD_CHOICES,
+	type BeardId,
+	BUILDS,
+	CATALOG,
+	CLASS_IDS,
+	type ClassId,
+	HAIR_IDS,
+	HAT_IDS,
+	type HairId,
+	type HatId,
+	OUTFIT_IDS,
+	type OutfitId,
+	PROP_IDS,
+	type PropId,
+	SKIN_INDEXES,
+} from "./catalog.ts";
+
+/** A lowercase `#rrggbb` color. */
+export type Hex = `#${string}`;
+export type PaletteName =
+	| "azure"
+	| "gules"
+	| "vert"
+	| "purpure"
+	| "amber"
+	| "sable"
+	| "teal"
+	| "rose";
+
+export interface CharacterColors {
+	/** The agent accent. */
+	primary: Hex;
+	secondary: Hex;
+	trim: Hex;
+}
+
+/** An agent's look, fully resolved. */
+export interface CharacterSpec {
+	v: 1;
+	class: ClassId;
+	outfit: OutfitId;
+	hat: HatId;
+	prop: PropId;
+	hair: HairId;
+	beard: BeardId | "none";
+	accessory: AccessoryId | "none";
+	build: "slim" | "regular" | "stout";
+	skin: 0 | 1 | 2 | 3 | 4 | 5;
+	hairColor: Hex;
+	colors: CharacterColors;
+	/** Set when `colors` equal a preset. */
+	palette?: PaletteName;
+}
+
+export type CharacterInput = Partial<
+	Omit<CharacterSpec, "v" | "colors" | "palette">
+> & { palette?: PaletteName; colors?: Partial<CharacterColors> };
+
+/** A character that cannot be made; `field` is the path of the offending field. */
+export class CharacterError extends Error {
+	readonly field: string;
+	constructor(field: string, message: string) {
+		super(`${field}: ${message}`);
+		this.name = "CharacterError";
+		this.field = field;
+	}
+}
+
+const HEX = /^#[0-9a-f]{6}$/;
+
+export function checkHex(value: unknown, field: string): Hex {
+	if (typeof value !== "string")
+		throw new CharacterError(field, "must be a #rrggbb color");
+	const lower = value.toLowerCase();
+	if (!HEX.test(lower))
+		throw new CharacterError(field, "must be a #rrggbb color");
+	return lower as Hex;
+}
+
+export function checkOneOf<T extends string | number>(
+	list: readonly T[],
+	value: unknown,
+	field: string,
+): T {
+	const found = list.find((item) => item === value);
+	if (found === undefined)
+		throw new CharacterError(
+			field,
+			`must be one of ${list.map(String).join(", ")}`,
+		);
+	return found;
+}
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+	if (typeof value !== "object" || value === null || Array.isArray(value))
+		return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+
+/** The palette whose three colors these are, if any. */
+export function paletteOf(colors: CharacterColors): PaletteName | undefined {
+	for (const [name, preset] of Object.entries(CATALOG.palettes))
+		if (
+			preset.primary === colors.primary &&
+			preset.secondary === colors.secondary &&
+			preset.trim === colors.trim
+		)
+			return name as PaletteName;
+	return undefined;
+}
+
+/** A fresh copy of a class's preset. */
+export function presetSpec(id: ClassId): CharacterSpec {
+	const preset = CATALOG.classes[id].preset;
+	return {
+		v: 1,
+		class: id,
+		outfit: preset.outfit,
+		hat: preset.hat,
+		prop: preset.prop,
+		hair: preset.hair,
+		beard: preset.beard,
+		accessory: preset.accessory,
+		build: preset.build,
+		skin: preset.skin,
+		hairColor: preset.hairColor,
+		colors: { ...preset.colors },
+		...(preset.palette ? { palette: preset.palette } : {}),
+	};
+}
+
+const INPUT_KEYS = new Set([
+	"class",
+	"outfit",
+	"hat",
+	"prop",
+	"hair",
+	"beard",
+	"accessory",
+	"build",
+	"skin",
+	"hairColor",
+	"colors",
+	"palette",
+]);
+const COLOR_KEYS = ["primary", "secondary", "trim"] as const;
+
+/** Set `colors` and `palette` on `spec` from a palette name and/or partial colors. */
+function applyColors(
+	spec: CharacterSpec,
+	palette: unknown,
+	colors: unknown,
+): void {
+	if (palette !== undefined) {
+		const name = checkOneOf(Object.keys(CATALOG.palettes), palette, "palette");
+		spec.colors = { ...CATALOG.palettes[name as PaletteName] };
+	}
+	if (colors !== undefined) {
+		if (!isRecord(colors))
+			throw new CharacterError("colors", "must be an object");
+		for (const key of Object.keys(colors))
+			if (!(COLOR_KEYS as readonly string[]).includes(key))
+				throw new CharacterError(`colors.${key}`, "is not a known color");
+		const next = { ...spec.colors };
+		for (const key of COLOR_KEYS)
+			if (colors[key] !== undefined)
+				next[key] = checkHex(colors[key], `colors.${key}`);
+		spec.colors = next;
+	}
+	const name = paletteOf(spec.colors);
+	if (name) spec.palette = name;
+	else delete spec.palette;
+}
+
+/**
+ * The look an input describes: `base` (or the input's class preset when there is no base or the
+ * input changes the class), then the input's fields over it.
+ */
+export function resolveCharacter(
+	input: CharacterInput,
+	base?: CharacterSpec,
+): CharacterSpec {
+	if (!isRecord(input))
+		throw new CharacterError("character", "must be an object");
+	for (const key of Object.keys(input))
+		if (!INPUT_KEYS.has(key))
+			throw new CharacterError(key, "is not a known field");
+	const id =
+		input.class === undefined
+			? base?.class
+			: checkOneOf(CLASS_IDS, input.class, "class");
+	if (!id) throw new CharacterError("class", "is required");
+	const spec: CharacterSpec =
+		base && base.class === id
+			? { ...base, colors: { ...base.colors } }
+			: presetSpec(id);
+	if (input.outfit !== undefined)
+		spec.outfit = checkOneOf(OUTFIT_IDS, input.outfit, "outfit");
+	if (input.hat !== undefined) spec.hat = checkOneOf(HAT_IDS, input.hat, "hat");
+	if (input.prop !== undefined)
+		spec.prop = checkOneOf(PROP_IDS, input.prop, "prop");
+	if (input.hair !== undefined)
+		spec.hair = checkOneOf(HAIR_IDS, input.hair, "hair");
+	if (input.beard !== undefined)
+		spec.beard = checkOneOf(BEARD_CHOICES, input.beard, "beard");
+	if (input.accessory !== undefined)
+		spec.accessory = checkOneOf(
+			ACCESSORY_CHOICES,
+			input.accessory,
+			"accessory",
+		);
+	if (input.build !== undefined)
+		spec.build = checkOneOf(BUILDS, input.build, "build");
+	if (input.skin !== undefined)
+		spec.skin = checkOneOf(SKIN_INDEXES, input.skin, "skin");
+	if (input.hairColor !== undefined)
+		spec.hairColor = checkHex(input.hairColor, "hairColor");
+	applyColors(spec, input.palette, input.colors);
+	return spec;
+}

package/src/characters/suggest.ts

@@ -0,0 +1,101 @@
+import { BUILDS, CATALOG, CLASS_IDS, type ClassId } from "./catalog.ts";
+import {
+	type CharacterSpec,
+	type PaletteName,
+	paletteOf,
+	presetSpec,
+} from "./spec.ts";
+
+const NAME_WEIGHT = 3;
+const PROMPT_WEIGHT = 1;
+const PROMPT_CHARS = 600;
+const ASCII = /^[ -~]+$/;
+const MAX_SHORT = 3;
+
+/** FNV-1a over the UTF-16 code units, an unsigned 32-bit integer. */
+function fnv(text: string): number {
+	let hash = 0x811c9dc5;
+	for (let i = 0; i < text.length; i++) {
+		hash ^= text.charCodeAt(i);
+		hash = Math.imul(hash, 0x01000193) >>> 0;
+	}
+	return hash >>> 0;
+}
+
+const escapeRegExp = (text: string): string =>
+	text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+type Matcher = (text: string) => boolean;
+
+/** An English keyword matches from a word start (`review` finds `reviewer`); a short one is a whole word. */
+function matcher(keyword: string): Matcher {
+	const lower = keyword.toLowerCase();
+	if (!ASCII.test(lower)) return (text) => text.includes(lower);
+	const pattern = new RegExp(
+		`(?<![a-z0-9])${escapeRegExp(lower)}${lower.length <= MAX_SHORT ? "(?![a-z0-9])" : ""}`,
+	);
+	return (text) => pattern.test(text);
+}
+
+const MATCHERS: Record<ClassId, Matcher[]> = Object.fromEntries(
+	CLASS_IDS.map((id) => [id, CATALOG.classes[id].keywords.map(matcher)]),
+) as Record<ClassId, Matcher[]>;
+
+function scoreOf(id: ClassId, fields: readonly [string, number][]): number {
+	let score = 0;
+	for (const check of MATCHERS[id])
+		for (const [text, weight] of fields) if (check(text)) score += weight;
+	return score;
+}
+
+/** The index into a list of `length` that a name picks, stable across runs. */
+const pick = (hash: number, length: number): number => hash % length;
+
+/**
+ * A look for an agent that has none, chosen from its role: the class whose keywords its display
+ * name, name and the start of its prompt hit most, with the name's hash settling a tie or no hit
+ * among the classes `taken` does not use, so two agents of one role still differ. Skin and build
+ * come from separate hashes of the name, and the palette is the one `taken` uses least.
+ */
+export function suggestCharacter(
+	agent: { name: string; displayName: string; prompt: string },
+	taken: readonly CharacterSpec[] = [],
+): CharacterSpec {
+	const hash = fnv(agent.name);
+	const fields: [string, number][] = [
+		[agent.displayName.toLowerCase(), NAME_WEIGHT],
+		[agent.name.toLowerCase(), NAME_WEIGHT],
+		[agent.prompt.slice(0, PROMPT_CHARS).toLowerCase(), PROMPT_WEIGHT],
+	];
+	let best = 0;
+	let leaders: ClassId[] = [];
+	for (const id of CLASS_IDS) {
+		const score = scoreOf(id, fields);
+		if (score > best) {
+			best = score;
+			leaders = [id];
+		} else if (score === best && score > 0) leaders.push(id);
+	}
+	const pool = best > 0 ? leaders : [...CLASS_IDS];
+	const used = new Set(taken.map((spec) => spec.class));
+	const free = pool.filter((id) => !used.has(id));
+	const candidates = free.length > 0 ? free : pool;
+	const chosen = candidates[pick(hash, candidates.length)] as ClassId;
+
+	const spec = presetSpec(chosen);
+	spec.skin = (hash % 6) as CharacterSpec["skin"];
+	spec.build = BUILDS[fnv(`build:${agent.name}`) % 3] as CharacterSpec["build"];
+
+	const names = Object.keys(CATALOG.palettes) as PaletteName[];
+	const count = new Map<PaletteName, number>(names.map((name) => [name, 0]));
+	for (const other of taken) {
+		const name = other.palette ?? paletteOf(other.colors);
+		if (name) count.set(name, (count.get(name) ?? 0) + 1);
+	}
+	const least = Math.min(...count.values());
+	const open = names.filter((name) => count.get(name) === least);
+	const palette = open[pick(hash, open.length)] as PaletteName;
+	spec.colors = { ...CATALOG.palettes[palette] };
+	spec.palette = palette;
+	return spec;
+}

package/src/cli/checks/characters.ts

@@ -0,0 +1,23 @@
+import { resolveCharacter } from "../../characters/index.ts";
+import { characterPng } from "../../core/agents/character-png.ts";
+import { fail, ok, type Result } from "../report.ts";
+
+/** Rasterizes one composition, as the agent server does for every agent's picture. */
+const rasterize = async (): Promise<unknown> =>
+	characterPng(resolveCharacter({ class: "wizard" }), { size: 64 });
+
+/** Whether `canvas` can rasterize the composer's SVG, which the agent server needs to draw its agents. */
+export async function checkCharacters(
+	probe: () => Promise<unknown> = rasterize,
+): Promise<Result> {
+	try {
+		await probe();
+		return ok("canvas rasterizes the agents' composed pictures");
+	} catch (error) {
+		const reason = error instanceof Error ? error.message : String(error);
+		return fail(
+			`canvas cannot rasterize SVG, so the agent server cannot draw the agents' pictures: ${reason}`,
+			"Install canvas with SVG support (librsvg), as the installation guide for your system describes, then run the check again.",
+		);
+	}
+}

package/src/cli/checks/images.ts

@@ -6,14 +6,16 @@ import { ok, type Result } from "../report.ts";
 const GUIDE =
 	"node_modules/pi-roundtable/docs/plugins.md#providers-replace-a-part-the-core-runs-on";
 
-/** Whether a plugin fills the `images` slot. Not having one is a choice, not a failure: agents get generated avatars. */
+/** Whether a plugin fills the `images` slot. Not having one is a choice, not a failure: agents are composed characters, which the agent server no longer draws with an image provider. */
 export async function checkImageProvider(project: Project): Promise<Result> {
 	const assembled = await project.assembled();
 	if (!assembled.ok)
 		return { status: "skipped", reason: "the configuration is not valid yet" };
 	return fillsImages(assembled.value.defined.plugins)
-		? ok("a plugin fills the images slot; agents' avatars are drawn")
+		? ok(
+				"a plugin fills the images slot, used for agents' generate_image; the agent server no longer draws their avatars with it",
+			)
 		: ok(
-				`none; agents use avatars generated from their display names. To have them drawn, fill the images slot, as the plugin guide shows: ${GUIDE}`,
+				`none; agents are composed characters, and the agent server no longer draws with the images slot. To let agents make pictures with generate_image, fill the slot, as the plugin guide shows: ${GUIDE}`,
 			);
 }

package/src/cli/doctor.ts

@@ -1,4 +1,5 @@
 import { type BunFacts, checkBun } from "./checks/bun.ts";
+import { checkCharacters } from "./checks/characters.ts";
 import { checkConfiguration, checkPlugins } from "./checks/configuration.ts";
 import { checkDatabase, type DatabasePort } from "./checks/database.ts";
 import {
@@ -71,6 +72,7 @@ export function buildChecks(
 			offline: true,
 			run: () => checkImageProvider(project),
 		},
+		{ name: "characters", offline: true, run: () => checkCharacters() },
 		{
 			name: "PostgreSQL",
 			offline: false,