pi-roundtable 0.22.5 → 0.23.0

package/src/characters/characters.css

@@ -0,0 +1,68 @@
+/* Generated from src/characters/css.ts by scripts/build-character-css.ts; do not edit. */
+/* State motion for composed characters. Put data-state on the <svg class="av"> or on an .av-host around it. */
+.av{overflow:visible}
+.av .ov{opacity:0}
+.av .glow{opacity:.28}
+.av .ch,.av .prop,.av .eyes,.av .ov{transform-box:view-box}
+.av .ch{transform-origin:50px 94px}
+.av .eyes{transform-origin:50px 52px;animation:av-blink 5.2s infinite}
+.av .o-wait,.av .o-done,.av .o-err{transform-origin:17px 19px}
+.av .o-think{transform-origin:50px 50px}
+.av [data-prop=staff]{transform-origin:73px 82px}
+.av [data-prop=shield]{transform-origin:27px 82px}
+.av [data-prop=scroll]{transform-origin:76px 76px}
+.av [data-prop=hammer]{transform-origin:79px 84px}
+.av [data-prop=bow]{transform-origin:78px 70px}
+.av [data-prop=lute]{transform-origin:75px 70px}
+.av [data-prop=flask]{transform-origin:73px 66px}
+.av [data-prop=quill]{transform-origin:72px 82px}
+.av [data-prop=tome]{transform-origin:78px 76px}
+.av [data-prop=bell]{transform-origin:76px 62px}
+.av [data-prop=keys]{transform-origin:78px 62px}
+.av [data-prop=map]{transform-origin:77px 58px}
+.av [data-prop=telescope]{transform-origin:76px 74px}
+.av [data-prop=wrench]{transform-origin:78px 86px}
+.av [data-prop=spade]{transform-origin:76px 60px}
+.av [data-prop=ladle]{transform-origin:78px 78px}
+.av [data-prop=lantern]{transform-origin:76px 62px}
+.av [data-prop=seal]{transform-origin:76px 66px}
+.av [data-prop=dagger]{transform-origin:78px 86px}
+.av [data-prop=beads]{transform-origin:78px 62px}
+.av [data-prop=bird]{transform-origin:78px 76px}
+.av [data-prop=anchor]{transform-origin:76px 76px}
+.av [data-prop=marotte]{transform-origin:76px 62px}
+.av [data-prop=sword]{transform-origin:76px 82px}
+:is(.av,.av-host)[data-state=idle] .ch{animation:av-breathe 3.8s ease-in-out infinite}
+:is(.av,.av-host)[data-state=thinking] .ch{animation:av-tilt 3.2s ease-in-out infinite}
+:is(.av,.av-host)[data-state=thinking] .o-think{opacity:1;animation:av-orbit 2.6s linear infinite}
+:is(.av,.av-host)[data-state=working] .ch{animation:av-bob .56s ease-in-out infinite}
+:is(.av,.av-host)[data-state=working] .prop{animation:av-sweep .56s ease-in-out infinite alternate}
+:is(.av,.av-host)[data-state=working] .glow{animation:av-glow .56s ease-in-out infinite alternate}
+:is(.av,.av-host)[data-state=waiting] .ch{animation:av-lean 1.6s ease-in-out infinite}
+:is(.av,.av-host)[data-state=waiting] .o-wait{opacity:1;animation:av-badge 1.2s ease-in-out infinite}
+:is(.av,.av-host)[data-state=waiting] .glow{animation:av-glow 1.2s ease-in-out infinite alternate}
+:is(.av,.av-host)[data-state=done] .ch{animation:av-pop .7s cubic-bezier(.3,1.6,.5,1) 1}
+:is(.av,.av-host)[data-state=done] .o-done{opacity:1;animation:av-badge-in .5s ease-out 1}
+:is(.av,.av-host)[data-state=done] .glow{opacity:.7}
+:is(.av,.av-host)[data-state=error] .ch{animation:av-shake .5s ease-in-out 2}
+:is(.av,.av-host)[data-state=error] .o-err{opacity:1;animation:av-badge-in .3s ease-out 1}
+:is(.av,.av-host)[data-state=error] .ring{stroke:#e5484d}
+:is(.av,.av-host)[data-state=error] .glow{opacity:0}
+:is(.av,.av-host)[data-state=sleepy] .ch{animation:av-breathe 6s ease-in-out infinite}
+:is(.av,.av-host)[data-state=sleepy] .o-zz{opacity:1;animation:av-float 3s ease-in-out infinite}
+:is(.av,.av-host)[data-state=sleepy] .glow{opacity:.08}
+@keyframes av-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
+@keyframes av-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.03)}}
+@keyframes av-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
+@keyframes av-orbit{to{transform:rotate(360deg)}}
+@keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
+@keyframes av-sweep{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
+@keyframes av-glow{from{opacity:.2}to{opacity:.85}}
+@keyframes av-lean{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(-6deg) translateY(1px)}}
+@keyframes av-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
+@keyframes av-badge-in{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
+@keyframes av-pop{0%{transform:scale(1)}40%{transform:scale(1.1,.94)}70%{transform:scale(.97,1.05)}100%{transform:scale(1)}}
+@keyframes av-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2.4px)}40%{transform:translateX(2.4px)}60%{transform:translateX(-1.6px)}80%{transform:translateX(1.6px)}}
+@keyframes av-float{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:1}}
+@media (prefers-reduced-motion:reduce){.av *{animation:none!important}.av .o-think{opacity:0!important}}
+.av.static *{animation:none!important}

package/src/characters/colors.ts

@@ -0,0 +1,108 @@
+import type { CharacterLook } from "./compose.ts";
+import type { Hex } from "./spec.ts";
+
+type Rgb = readonly [number, number, number];
+
+const channel = (value: number): string =>
+	Math.max(0, Math.min(255, Math.round(value)))
+		.toString(16)
+		.padStart(2, "0");
+
+function rgbOf(color: string): Rgb {
+	const part = (at: number) => Number.parseInt(color.slice(at, at + 2), 16);
+	return [part(1), part(3), part(5)];
+}
+
+function hexOf([r, g, b]: Rgb): Hex {
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+
+/** The point `t` of the way from `a` to `b`, channel by channel. */
+export function mix(a: string, b: string, t: number): Hex {
+	const from = rgbOf(a);
+	const to = rgbOf(b);
+	return hexOf([
+		from[0] + (to[0] - from[0]) * t,
+		from[1] + (to[1] - from[1]) * t,
+		from[2] + (to[2] - from[2]) * t,
+	]);
+}
+
+export const lighten = (color: string, t: number): Hex =>
+	mix(color, "#ffffff", t);
+export const darken = (color: string, t: number): Hex =>
+	mix(color, "#1a1330", t);
+
+function luminance(color: string): number {
+	const [r, g, b] = rgbOf(color).map((value) => {
+		const unit = value / 255;
+		return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;
+	}) as [number, number, number];
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** The WCAG contrast ratio of two colors, 1 to 21. */
+export function contrast(a: string, b: string): number {
+	const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [
+		number,
+		number,
+	];
+	return (light + 0.05) / (dark + 0.05);
+}
+
+/**
+ * The surface the accent sits on, per scheme and per look: the app's page background, and for
+ * Camelot the hardest of its surfaces (the darkest parchment, the lightest night blue), so a
+ * shade that reads on that one reads on the rest.
+ */
+const SURFACE = {
+	light: "#ffffff",
+	dark: "#0d1018",
+	"modern-light": "#ffffff",
+	"modern-dark": "#0d1018",
+	"camelot-light": "#e3d2a9",
+	"camelot-dark": "#243557",
+} as const;
+
+/**
+ * `primary` itself when it reads at 3:1 on the surface, else the first shade toward the opposite
+ * end (darker on a light surface, lighter on a dark one) that does.
+ */
+export function accentColor(
+	primary: Hex,
+	on: "light" | "dark" | CharacterLook,
+): Hex {
+	const surface = SURFACE[on];
+	const toward = on.endsWith("light") ? "#1a1330" : "#ffffff";
+	for (let step = 0; step <= 20; step++) {
+		const shade = step === 0 ? primary : mix(primary, toward, step / 20);
+		if (contrast(shade, surface) >= 3) return shade;
+	}
+	return toward as Hex;
+}
+
+/** Every color a part may use, as literals: nothing in the output refers to a variable. */
+export interface Tones {
+	/** Primary and its shades. */
+	p: string;
+	pd: string;
+	pl: string;
+	pll: string;
+	/** Secondary tincture. */
+	s: string;
+	sd: string;
+	/** Metal trim. */
+	t: string;
+	td: string;
+	/** Skin. */
+	k: string;
+	kd: string;
+	/** Hair. */
+	hr: string;
+	hd: string;
+	ink: string;
+	/** Prop glow. */
+	gl: string;
+}
+
+export type Part = (tones: Tones) => string;

package/src/characters/compose.ts

@@ -0,0 +1,281 @@
+import {
+	AVATAR_STATES,
+	type AvatarState,
+	CATALOG,
+	EXPRESSIONS,
+	type Expression,
+	STATE_EXPRESSION,
+} from "./catalog.ts";
+import { accentColor, darken, lighten, mix, type Tones } from "./colors.ts";
+import { parseCharacter } from "./parse.ts";
+import { faceParts, INK, overlays } from "./parts-face.ts";
+import { ACCESSORIES, BEARDS, HAIR } from "./parts-hair.ts";
+import { HATS } from "./parts-hats.ts";
+import { OUTFITS } from "./parts-outfits.ts";
+import { PROPS } from "./parts-props.ts";
+import {
+	CharacterError,
+	type CharacterSpec,
+	checkOneOf,
+	type Hex,
+} from "./spec.ts";
+
+export type CharacterLook =
+	| "modern-light"
+	| "modern-dark"
+	| "camelot-light"
+	| "camelot-dark";
+
+export interface ComposeOptions {
+	/** Default `STATE_EXPRESSION[state ?? "idle"]`. */
+	expr?: Expression;
+	/** With `still`: which overlay is baked in. Live output carries every overlay. */
+	state?: AvatarState;
+	/** Background and ring only. Default `"modern-light"`. */
+	look?: CharacterLook;
+	/** Default `"disc"`. */
+	frame?: "disc" | "shield";
+	/** No frame and no background. */
+	bare?: boolean;
+	/** For files, PNG and 3D: only the active state's overlay, and no motion needed. */
+	still?: boolean;
+	/** `/^[a-z0-9]{1,16}$/`, the suffix of the clip path ids. Default `"a"`. */
+	uid?: string;
+	/** Adds `width` and `height` (the PNG rasterizer needs them). */
+	size?: number;
+	/** The accessible name, escaped into `aria-label`; without it the figure is `aria-hidden`. */
+	label?: string;
+}
+
+const LOOKS = ["modern-light", "modern-dark", "camelot-light", "camelot-dark"];
+const FRAMES = ["disc", "shield"] as const;
+const UID = /^[a-z0-9]{1,16}$/;
+const MAX_LABEL = 200;
+const MAX_SIZE = 4096;
+
+interface LookStyle {
+	bg: (primary: string) => string;
+	ring: (primary: string) => string;
+	width: number;
+	/** The thin inner line of the Camelot frame. */
+	line: string | null;
+}
+
+const STYLES: Record<CharacterLook, LookStyle> = {
+	"modern-light": {
+		bg: (p) => lighten(p, 0.8),
+		ring: (p) => p,
+		width: 3,
+		line: null,
+	},
+	"modern-dark": {
+		bg: (p) => mix(p, "#0d1018", 0.68),
+		ring: (p) => lighten(p, 0.15),
+		width: 3,
+		line: null,
+	},
+	"camelot-light": {
+		bg: (p) => mix("#f2e6c6", p, 0.1),
+		ring: () => "#b98a2c",
+		width: 4.2,
+		line: "#8a5f12",
+	},
+	"camelot-dark": {
+		bg: (p) => mix("#16224c", p, 0.16),
+		ring: () => "#e6b94c",
+		width: 4.2,
+		line: "#ffe08a",
+	},
+};
+
+const SHIELD = "M12 14H88V50Q88 78 50 97Q12 78 12 50Z";
+const ERROR_RED = "#e5484d";
+
+/**
+ * Text safe inside a double-quoted attribute and inert as markup or script: the characters that
+ * open a tag, end a value or start a call become entities, which also leaves no `on…=`, `style=`
+ * or `var(` in the output, and `href` is broken by one more entity.
+ */
+function escapeAttribute(text: string): string {
+	return text
+		.replace(/[&<>"'=()]/g, (char) => `&#${char.charCodeAt(0)};`)
+		.replace(
+			/href/gi,
+			(word) => `${word[0]}&#${word.charCodeAt(1)};${word.slice(2)}`,
+		);
+}
+
+function tonesOf(spec: CharacterSpec, look: LookStyle, error: boolean) {
+	const { primary, secondary, trim } = spec.colors;
+	const skin = CATALOG.skins[spec.skin] as Hex;
+	const tones: Tones = {
+		p: primary,
+		pd: darken(primary, 0.3),
+		pl: lighten(primary, 0.35),
+		pll: lighten(primary, 0.65),
+		s: secondary,
+		sd: darken(secondary, 0.16),
+		t: trim,
+		td: darken(trim, 0.3),
+		k: skin,
+		kd: darken(skin, 0.12),
+		hr: spec.hairColor,
+		hd: darken(spec.hairColor, 0.2),
+		ink: INK,
+		gl: lighten(primary, 0.5),
+	};
+	return {
+		tones,
+		bg: look.bg(primary),
+		ring: error ? ERROR_RED : look.ring(primary),
+	};
+}
+
+function group(name: string, inner: string, extra = ""): string {
+	return inner
+		? `<g class="${name}" data-part="${name}"${extra}>${inner}</g>`
+		: "";
+}
+
+/**
+ * The figure as an SVG string with literal colors: no style attribute, variable, script or
+ * link, so it is safe to inject into a page that forbids inline styles and renders the same
+ * through canvas or a 3D texture. The spec is checked again here, so a spec cast from untrusted
+ * data cannot reach the markup. State motion is in `characters.css`.
+ */
+export function composeSvg(
+	spec: CharacterSpec,
+	options: ComposeOptions = {},
+): string {
+	const s = parseCharacter(spec);
+	const state =
+		options.state === undefined
+			? undefined
+			: checkOneOf(AVATAR_STATES, options.state, "state");
+	const expr = checkOneOf(
+		EXPRESSIONS,
+		options.expr ?? STATE_EXPRESSION[state ?? "idle"],
+		"expr",
+	);
+	const lookName = checkOneOf(
+		LOOKS,
+		options.look ?? "modern-light",
+		"look",
+	) as CharacterLook;
+	const frame = checkOneOf(FRAMES, options.frame ?? "disc", "frame");
+	const uid = options.uid ?? "a";
+	if (typeof uid !== "string" || !UID.test(uid))
+		throw new CharacterError("uid", "must match /^[a-z0-9]{1,16}$/");
+	const { size, label } = options;
+	if (
+		size !== undefined &&
+		!(Number.isInteger(size) && size >= 1 && size <= MAX_SIZE)
+	)
+		throw new CharacterError("size", `must be an integer up to ${MAX_SIZE}`);
+	if (
+		label !== undefined &&
+		(typeof label !== "string" || label.length > MAX_LABEL)
+	)
+		throw new CharacterError(
+			"label",
+			`must be text of at most ${MAX_LABEL} characters`,
+		);
+	const bare = options.bare === true;
+	const still = options.still === true;
+
+	const style = STYLES[lookName];
+	const { tones, bg, ring } = tonesOf(s, style, state === "error");
+	const face = faceParts(
+		{ ink: INK, brow: mix(s.hairColor, INK, 0.5), dot: mix(tones.p, INK, 0.1) },
+		expr,
+	);
+
+	const hair = HAIR[s.hair](tones);
+	const hood =
+		s.hat === "hood"
+			? `<path d="M17 62C12 22 88 22 83 62C81 72 72 77 66 78H34C28 77 19 72 17 62Z" fill="${tones.pd}"/>`
+			: "";
+	const outfit = OUTFITS[s.outfit](tones);
+	const factor = { slim: 0.8, regular: 1, stout: 1.3 }[s.build];
+	const dressed =
+		factor === 1
+			? outfit
+			: `<g transform="translate(${+(50 - 50 * factor).toFixed(2)} 0) scale(${factor} 1)">${outfit}</g>`;
+	let body = dressed;
+	if (!bare)
+		body =
+			frame === "shield"
+				? `<g clip-path="url(#as${uid})">${dressed}</g>`
+				: `<clipPath id="ad${uid}"><circle cx="50" cy="50" r="44.6"/></clipPath><g clip-path="url(#ad${uid})">${dressed}</g>`;
+
+	const line = style.line;
+	const frameMarkup =
+		frame === "shield"
+			? `<clipPath id="as${uid}"><path d="${SHIELD}"/></clipPath><path d="${SHIELD}" fill="${bg}" stroke="${ring}" stroke-width="${style.width}" stroke-linejoin="round" class="ring"/>${
+					line
+						? `<path d="M16.5 18.5H83.5V50Q83.5 74 50 91.6Q16.5 74 16.5 50Z" fill="none" stroke="${line}" stroke-width=".9" opacity=".55"/>`
+						: ""
+				}`
+			: `<circle cx="50" cy="50" r="46.4" fill="${bg}" stroke="${ring}" stroke-width="${style.width}" class="ring"/>${
+					line
+						? `<circle cx="50" cy="50" r="40.6" fill="none" stroke="${line}" stroke-width=".9" opacity=".55"/>`
+						: ""
+				}<ellipse cx="50" cy="93" rx="19" ry="2.6" fill="#000" opacity=".12"/>`;
+
+	const head =
+		`<circle cx="22.6" cy="54" r="4.2" fill="${tones.k}"/><circle cx="77.4" cy="54" r="4.2" fill="${tones.k}"/>` +
+		`<ellipse cx="50" cy="51" rx="28" ry="26" fill="${tones.k}"/><path d="M23 58Q50 88 77 58Q77 76 50 77Q23 76 23 58Z" fill="${tones.kd}" opacity=".3"/>` +
+		`<ellipse cx="50" cy="58.4" rx="1.7" ry="1.2" fill="${tones.kd}"/>` +
+		hair.front +
+		(s.beard === "none" ? "" : BEARDS[s.beard](tones));
+
+	const inner =
+		(bare ? "" : group("frame", frameMarkup)) +
+		`<g class="ch">` +
+		group("back", hair.back + hood) +
+		group("body", body) +
+		group("head", head) +
+		group("hat", HATS[s.hat](tones)) +
+		group("eyes-brows", face.eyes + face.brows) +
+		group("mouth", face.mouth) +
+		group("fx", face.fx) +
+		group(
+			"acc",
+			s.accessory === "none" ? "" : ACCESSORIES[s.accessory](tones),
+		) +
+		group("prop", PROPS[s.prop](tones), ` data-prop="${s.prop}"`) +
+		`</g>` +
+		group(
+			"state",
+			overlays(tones.p, darken(tones.p, 0.1), still ? (state ?? "idle") : null),
+		);
+
+	const attributes = [
+		`xmlns="http://www.w3.org/2000/svg"`,
+		`viewBox="0 0 100 100"`,
+		size === undefined ? "" : `width="${size}" height="${size}"`,
+		`class="${still ? "av static" : "av"}"`,
+		state === undefined && !still ? "" : `data-state="${state ?? "idle"}"`,
+		`data-expr="${expr}"`,
+		label === undefined
+			? `aria-hidden="true"`
+			: `role="img" aria-label="${escapeAttribute(label)}"`,
+	]
+		.filter(Boolean)
+		.join(" ");
+	return `<svg ${attributes}>${inner}</svg>`.replace(
+		/class="glow"/g,
+		`class="glow" opacity=".3"`,
+	);
+}
+
+/**
+ * The agent's accent as a UI color: `colors.primary`, shaded until it reads at 3:1 on the page. A
+ * scheme means the modern page; a look (`camelot-light`) means that look's hardest surface.
+ */
+export function accentOf(
+	spec: CharacterSpec,
+	on: "light" | "dark" | CharacterLook,
+): Hex {
+	return accentColor(spec.colors.primary, on);
+}

package/src/characters/css.ts

@@ -0,0 +1,63 @@
+import { PIVOTS } from "./parts-face.ts";
+import { PROP_PIVOTS } from "./parts-props.ts";
+
+/** A state, named on the figure itself or on the `.av-host` around it. */
+const on = (state: string) => `:is(.av,.av-host)[data-state=${state}]`;
+
+/**
+ * The stylesheet that moves composed characters: state motion on transform and opacity only,
+ * with the pivots the composer leaves out of the markup, because the page forbids inline
+ * styles. The static file `characters.css` is this text, generated by
+ * `scripts/build-character-css.ts`.
+ */
+export function characterCss(): string {
+	const pivots = Object.entries(PROP_PIVOTS)
+		.map(([id, origin]) => `.av [data-prop=${id}]{transform-origin:${origin}}`)
+		.join("\n");
+	return `/* Generated from src/characters/css.ts by scripts/build-character-css.ts; do not edit. */
+/* State motion for composed characters. Put data-state on the <svg class="av"> or on an .av-host around it. */
+.av{overflow:visible}
+.av .ov{opacity:0}
+.av .glow{opacity:.28}
+.av .ch,.av .prop,.av .eyes,.av .ov{transform-box:view-box}
+.av .ch{transform-origin:${PIVOTS.character}}
+.av .eyes{transform-origin:${PIVOTS.eyes};animation:av-blink 5.2s infinite}
+.av .o-wait,.av .o-done,.av .o-err{transform-origin:${PIVOTS.badge}}
+.av .o-think{transform-origin:${PIVOTS.orbit}}
+${pivots}
+${on("idle")} .ch{animation:av-breathe 3.8s ease-in-out infinite}
+${on("thinking")} .ch{animation:av-tilt 3.2s ease-in-out infinite}
+${on("thinking")} .o-think{opacity:1;animation:av-orbit 2.6s linear infinite}
+${on("working")} .ch{animation:av-bob .56s ease-in-out infinite}
+${on("working")} .prop{animation:av-sweep .56s ease-in-out infinite alternate}
+${on("working")} .glow{animation:av-glow .56s ease-in-out infinite alternate}
+${on("waiting")} .ch{animation:av-lean 1.6s ease-in-out infinite}
+${on("waiting")} .o-wait{opacity:1;animation:av-badge 1.2s ease-in-out infinite}
+${on("waiting")} .glow{animation:av-glow 1.2s ease-in-out infinite alternate}
+${on("done")} .ch{animation:av-pop .7s cubic-bezier(.3,1.6,.5,1) 1}
+${on("done")} .o-done{opacity:1;animation:av-badge-in .5s ease-out 1}
+${on("done")} .glow{opacity:.7}
+${on("error")} .ch{animation:av-shake .5s ease-in-out 2}
+${on("error")} .o-err{opacity:1;animation:av-badge-in .3s ease-out 1}
+${on("error")} .ring{stroke:#e5484d}
+${on("error")} .glow{opacity:0}
+${on("sleepy")} .ch{animation:av-breathe 6s ease-in-out infinite}
+${on("sleepy")} .o-zz{opacity:1;animation:av-float 3s ease-in-out infinite}
+${on("sleepy")} .glow{opacity:.08}
+@keyframes av-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
+@keyframes av-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.03)}}
+@keyframes av-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
+@keyframes av-orbit{to{transform:rotate(360deg)}}
+@keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
+@keyframes av-sweep{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
+@keyframes av-glow{from{opacity:.2}to{opacity:.85}}
+@keyframes av-lean{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(-6deg) translateY(1px)}}
+@keyframes av-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
+@keyframes av-badge-in{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
+@keyframes av-pop{0%{transform:scale(1)}40%{transform:scale(1.1,.94)}70%{transform:scale(.97,1.05)}100%{transform:scale(1)}}
+@keyframes av-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2.4px)}40%{transform:translateX(2.4px)}60%{transform:translateX(-1.6px)}80%{transform:translateX(1.6px)}}
+@keyframes av-float{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:1}}
+@media (prefers-reduced-motion:reduce){.av *{animation:none!important}.av .o-think{opacity:0!important}}
+.av.static *{animation:none!important}
+`;
+}

package/src/characters/index.ts

@@ -0,0 +1,33 @@
+// Composed characters: a part library and an SVG composer that run in the browser and on the server.
+
+export type {
+	AccessoryId,
+	AvatarState,
+	BeardId,
+	ClassId,
+	Expression,
+	HairId,
+	HatId,
+	OutfitId,
+	PropId,
+} from "./catalog.ts";
+export {
+	AVATAR_STATES,
+	CATALOG,
+	CLASS_IDS,
+	EXPRESSIONS,
+	STATE_EXPRESSION,
+} from "./catalog.ts";
+export type { CharacterLook, ComposeOptions } from "./compose.ts";
+export { accentOf, composeSvg } from "./compose.ts";
+export { characterCss } from "./css.ts";
+export { parseCharacter, readCharacter } from "./parse.ts";
+export type {
+	CharacterColors,
+	CharacterInput,
+	CharacterSpec,
+	Hex,
+	PaletteName,
+} from "./spec.ts";
+export { CharacterError, resolveCharacter } from "./spec.ts";
+export { suggestCharacter } from "./suggest.ts";