@agent-os-lab/agent-game-sdk 0.1.1

package/src/core/pixel-character.ts

@@ -0,0 +1,684 @@
+import {
+  REQUIRED_AGENT_AVATAR_ANIMATIONS,
+  type AgentAvatarAnimationName,
+} from "./assets.js";
+
+export type PixelCharacterRole = "engineer" | "manager" | "support" | string;
+export type PixelCharacterStyle = "office" | "simple-chibi";
+export type PixelCharacterComponentKind = "hair" | "eyes" | "mouth" | "top" | "bottom" | "accessory" | "prop";
+export type PixelCharacterComponentRecipe = Record<PixelCharacterComponentKind, string>;
+
+export type PixelCharacterAppearance = {
+  skin: string;
+  hair: string;
+  shirt: string;
+  pants: string;
+  accessory?: "glasses" | "none" | string;
+};
+
+export type PixelCharacterLayer = {
+  kind: "rect";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill: string;
+};
+
+export type PixelCharacterContainer = {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type PixelCharacterContainerLayout = Record<string, PixelCharacterContainer>;
+
+export type PixelCharacterContainerOverrides = Partial<Record<string, Partial<Omit<PixelCharacterContainer, "id">>>>;
+
+export type PixelCharacterPartAlignment = {
+  horizontal: "left" | "center" | "right";
+  vertical: "top" | "center" | "bottom";
+};
+
+export type PixelCharacterPart = {
+  containerId: string;
+  align?: PixelCharacterPartAlignment;
+  layers: PixelCharacterLayer[];
+};
+
+export type PixelCharacterFrame = {
+  layers: PixelCharacterLayer[];
+};
+
+export type PixelCharacterSprite = {
+  schemaVersion: 1;
+  id: string;
+  role?: PixelCharacterRole;
+  style: PixelCharacterStyle;
+  components: PixelCharacterComponentRecipe;
+  frame: {
+    width: number;
+    height: number;
+  };
+  appearance: PixelCharacterAppearance;
+  containers: Record<string, PixelCharacterContainer>;
+  parts: Record<string, PixelCharacterPart>;
+  animations: Record<AgentAvatarAnimationName, string[]>;
+  frames: Record<string, PixelCharacterFrame>;
+};
+
+export type CreatePixelCharacterSpriteOptions = {
+  id: string;
+  seed: string;
+  role?: PixelCharacterRole;
+  style?: PixelCharacterStyle;
+  components?: Partial<PixelCharacterComponentRecipe>;
+  appearance?: PixelCharacterAppearance;
+  containers?: PixelCharacterContainerOverrides;
+};
+
+export type PixelCharacterComponentOption = {
+  kind: PixelCharacterComponentKind;
+  id: string;
+  label: string;
+};
+
+export type PixelCharacterPreset = {
+  id: string;
+  label: string;
+  components: PixelCharacterComponentRecipe;
+  appearance: PixelCharacterAppearance;
+};
+
+const DEFAULT_PALETTES: PixelCharacterAppearance[] = [
+  { skin: "#f3c7a1", hair: "#4b2e1f", shirt: "#2563eb", pants: "#1f2937", accessory: "none" },
+  { skin: "#d99b6c", hair: "#111827", shirt: "#16a34a", pants: "#334155", accessory: "glasses" },
+  { skin: "#f0c59a", hair: "#2f3440", shirt: "#38bdf8", pants: "#1d4ed8", accessory: "none" },
+];
+
+const COMPONENT_OPTIONS: Record<PixelCharacterComponentKind, PixelCharacterComponentOption[]> = {
+  hair: [
+    { kind: "hair", id: "short", label: "Short" },
+    { kind: "hair", id: "bob", label: "Bob" },
+    { kind: "hair", id: "bun", label: "Bun" },
+    { kind: "hair", id: "flat-top", label: "Flat Top" },
+    { kind: "hair", id: "round", label: "Round" },
+    { kind: "hair", id: "side-sweep", label: "Side Sweep" },
+    { kind: "hair", id: "wide", label: "Wide" },
+    { kind: "hair", id: "afro", label: "Afro" },
+  ],
+  eyes: [
+    { kind: "eyes", id: "dot", label: "Dot" },
+    { kind: "eyes", id: "sleepy", label: "Sleepy" },
+    { kind: "eyes", id: "glasses", label: "Glasses" },
+    { kind: "eyes", id: "tiny-blue", label: "Tiny Blue" },
+  ],
+  mouth: [
+    { kind: "mouth", id: "small", label: "Small" },
+    { kind: "mouth", id: "open", label: "Open" },
+    { kind: "mouth", id: "wide", label: "Wide" },
+  ],
+  top: [
+    { kind: "top", id: "shirt", label: "Shirt" },
+    { kind: "top", id: "tshirt", label: "T-Shirt" },
+    { kind: "top", id: "jacket", label: "Jacket" },
+    { kind: "top", id: "hoodie", label: "Hoodie" },
+    { kind: "top", id: "dress", label: "Dress" },
+  ],
+  bottom: [
+    { kind: "bottom", id: "pants", label: "Pants" },
+    { kind: "bottom", id: "skirt", label: "Skirt" },
+  ],
+  accessory: [
+    { kind: "accessory", id: "none", label: "None" },
+    { kind: "accessory", id: "blush", label: "Blush" },
+    { kind: "accessory", id: "headband", label: "Headband" },
+  ],
+  prop: [
+    { kind: "prop", id: "none", label: "None" },
+    { kind: "prop", id: "guitar", label: "Guitar" },
+  ],
+};
+
+const DEFAULT_COMPONENTS: PixelCharacterComponentRecipe = {
+  hair: "bob",
+  eyes: "dot",
+  mouth: "open",
+  top: "shirt",
+  bottom: "pants",
+  accessory: "none",
+  prop: "none",
+};
+
+const SIMPLE_CHIBI_CONTAINERS: PixelCharacterContainerLayout = {
+  hair: { id: "hair", x: 6, y: 2, width: 53, height: 47 },
+  head: { id: "head", x: 14, y: 18, width: 36, height: 31 },
+  body: { id: "body", x: 15, y: 35, width: 36, height: 29 },
+  prop: { id: "prop", x: 0, y: 24, width: 64, height: 40 },
+};
+
+const PRESETS: PixelCharacterPreset[] = [
+  preset("reference-1", "Ref 1", { hair: "afro", eyes: "dot", mouth: "open", top: "shirt", bottom: "pants", accessory: "none", prop: "none" }, "#f6d96b", "#050505", "#d8d4d6", "#9a5a22"),
+  preset("reference-2", "Ref 2", { hair: "flat-top", eyes: "glasses", mouth: "small", top: "jacket", bottom: "pants", accessory: "none", prop: "none" }, "#f3d981", "#76500b", "#0f6b3a", "#8a5a11"),
+  preset("reference-3", "Ref 3", { hair: "round", eyes: "dot", mouth: "open", top: "tshirt", bottom: "pants", accessory: "none", prop: "none" }, "#f1d36f", "#7a6338", "#b858ff", "#4f3b25"),
+  preset("reference-4", "Ref 4", { hair: "flat-top", eyes: "dot", mouth: "open", top: "jacket", bottom: "pants", accessory: "none", prop: "none" }, "#f3dc86", "#8a5709", "#6d95db", "#4d78c8"),
+  preset("reference-5", "Ref 5", { hair: "wide", eyes: "dot", mouth: "wide", top: "tshirt", bottom: "pants", accessory: "none", prop: "none" }, "#efd775", "#2d2618", "#555555", "#8b5b17"),
+  preset("reference-6", "Ref 6", { hair: "round", eyes: "sleepy", mouth: "small", top: "hoodie", bottom: "pants", accessory: "headband", prop: "none" }, "#f2d56e", "#272111", "#ef4141", "#433217"),
+  preset("reference-7", "Ref 7", { hair: "side-sweep", eyes: "dot", mouth: "open", top: "jacket", bottom: "skirt", accessory: "blush", prop: "none" }, "#efe48f", "#b66e4a", "#87a9d8", "#cf1826"),
+  preset("reference-8", "Ref 8", { hair: "side-sweep", eyes: "dot", mouth: "open", top: "dress", bottom: "skirt", accessory: "blush", prop: "none" }, "#efe48f", "#b56f4a", "#ff7a13", "#22c65e"),
+  preset("reference-9", "Ref 9", { hair: "side-sweep", eyes: "tiny-blue", mouth: "small", top: "tshirt", bottom: "pants", accessory: "none", prop: "guitar" }, "#f0da72", "#7a4f05", "#4e73d6", "#b84655"),
+  preset("reference-10", "Ref 10", { hair: "wide", eyes: "dot", mouth: "open", top: "dress", bottom: "skirt", accessory: "blush", prop: "none" }, "#efe48f", "#b66e4a", "#ff5b9a", "#84a9d6"),
+];
+
+export function getPixelCharacterComponentOptions(kind: PixelCharacterComponentKind): PixelCharacterComponentOption[] {
+  return COMPONENT_OPTIONS[kind];
+}
+
+export function getPixelCharacterPresets(): PixelCharacterPreset[] {
+  return PRESETS;
+}
+
+export function getSimpleChibiContainerLayout(): PixelCharacterContainerLayout {
+  return cloneContainers(SIMPLE_CHIBI_CONTAINERS);
+}
+
+export function createPixelCharacterSprite(options: CreatePixelCharacterSpriteOptions): PixelCharacterSprite {
+  const appearance = options.appearance ?? pickAppearance(options.seed);
+  const style = options.style ?? "office";
+  const components = { ...DEFAULT_COMPONENTS, ...options.components };
+  const animations = createAnimations();
+  const frameNames = new Set(Object.values(animations).flat());
+  const frames: Record<string, PixelCharacterFrame> = {};
+  const containers = style === "simple-chibi" ? createSimpleChibiContainers(options.containers) : {};
+  const parts = style === "simple-chibi" ? createSimpleChibiParts(appearance, components) : createOfficeParts(appearance);
+
+  for (const frameName of frameNames) {
+    frames[frameName] =
+      style === "simple-chibi"
+        ? createSimpleChibiFrame(frameName, appearance, components, containers, parts)
+        : createFrame(frameName, appearance);
+  }
+
+  return {
+    schemaVersion: 1,
+    id: options.id,
+    role: options.role,
+    style,
+    components,
+    frame: style === "simple-chibi" ? { width: 64, height: 64 } : { width: 48, height: 48 },
+    appearance,
+    containers,
+    parts,
+    animations,
+    frames,
+  };
+}
+
+function createSimpleChibiContainers(overrides: PixelCharacterContainerOverrides = {}): PixelCharacterContainerLayout {
+  const containers = cloneContainers(SIMPLE_CHIBI_CONTAINERS);
+  for (const [id, override] of Object.entries(overrides)) {
+    const base = containers[id];
+    if (!base || !override) {
+      continue;
+    }
+    containers[id] = {
+      id,
+      x: override.x ?? base.x,
+      y: override.y ?? base.y,
+      width: override.width ?? base.width,
+      height: override.height ?? base.height,
+    };
+  }
+  return containers;
+}
+
+function cloneContainers(containers: PixelCharacterContainerLayout): PixelCharacterContainerLayout {
+  return Object.fromEntries(Object.entries(containers).map(([id, container]) => [id, { ...container }]));
+}
+
+function createAnimations(): Record<AgentAvatarAnimationName, string[]> {
+  return {
+    "idle.down": ["idle-down-0"],
+    "idle.up": ["idle-up-0"],
+    "idle.left": ["idle-left-0"],
+    "idle.right": ["idle-right-0"],
+    "walk.down": ["walk-down-0", "walk-down-1", "walk-down-2", "walk-down-3"],
+    "walk.up": ["walk-up-0", "walk-up-1", "walk-up-2", "walk-up-3"],
+    "walk.left": ["walk-left-0", "walk-left-1", "walk-left-2", "walk-left-3"],
+    "walk.right": ["walk-right-0", "walk-right-1", "walk-right-2", "walk-right-3"],
+    "work.typing": ["work-typing-0", "work-typing-1"],
+    "emote.think": ["idle-down-0"],
+    "emote.talk": ["talk-down-0", "talk-down-1"],
+  };
+}
+
+function createFrame(frameName: string, appearance: PixelCharacterAppearance): PixelCharacterFrame {
+  const layers: PixelCharacterLayer[] = [
+    { kind: "rect", x: 15, y: 14, width: 18, height: 10, fill: appearance.skin },
+    { kind: "rect", x: 13, y: 10, width: 22, height: 8, fill: appearance.hair },
+    { kind: "rect", x: 14, y: 24, width: 20, height: 12, fill: appearance.shirt },
+    { kind: "rect", x: 9, y: 25, width: 5, height: 8, fill: appearance.shirt },
+    { kind: "rect", x: 34, y: 25, width: 5, height: 8, fill: appearance.shirt },
+    { kind: "rect", x: 9, y: 33, width: 5, height: 5, fill: appearance.skin },
+    { kind: "rect", x: 34, y: 33, width: 5, height: 5, fill: appearance.skin },
+    { kind: "rect", x: 14, y: 36, width: 8, height: 9, fill: appearance.pants },
+    { kind: "rect", x: 26, y: 36, width: 8, height: 9, fill: appearance.pants },
+  ];
+
+  if (frameName.startsWith("work-typing")) {
+    layers.push({ kind: "rect", x: 8, y: 32, width: 32, height: 9, fill: "#8b5e34" });
+    layers.push({ kind: "rect", x: 15, y: 29, width: 5, height: 4, fill: appearance.skin });
+    layers.push({ kind: "rect", x: 28, y: 29, width: 5, height: 4, fill: appearance.skin });
+  }
+
+  if (appearance.accessory === "glasses") {
+    layers.push({ kind: "rect", x: 17, y: 16, width: 6, height: 5, fill: "#111827" });
+    layers.push({ kind: "rect", x: 25, y: 16, width: 6, height: 5, fill: "#111827" });
+  }
+
+  return { layers };
+}
+
+function createOfficeParts(appearance: PixelCharacterAppearance): Record<string, PixelCharacterPart> {
+  return {
+    head: { containerId: "frame", layers: [{ kind: "rect", x: 15, y: 14, width: 18, height: 10, fill: appearance.skin }] },
+    torso: { containerId: "frame", layers: [{ kind: "rect", x: 14, y: 24, width: 20, height: 12, fill: appearance.shirt }] },
+    leftHand: { containerId: "frame", layers: [{ kind: "rect", x: 9, y: 33, width: 5, height: 5, fill: appearance.skin }] },
+    rightHand: { containerId: "frame", layers: [{ kind: "rect", x: 34, y: 33, width: 5, height: 5, fill: appearance.skin }] },
+  };
+}
+
+function createSimpleChibiFrame(
+  frameName: string,
+  appearance: PixelCharacterAppearance,
+  components: PixelCharacterComponentRecipe,
+  containers: Record<string, PixelCharacterContainer>,
+  parts: Record<string, PixelCharacterPart>,
+): PixelCharacterFrame {
+  const layers: PixelCharacterLayer[] = composeParts(containers, [
+    parts.hair,
+    parts.head,
+    parts.top,
+    parts.bottom,
+    parts.leftSleeve,
+    parts.rightSleeve,
+    parts.leftHand,
+    parts.rightHand,
+    parts.eyes,
+    parts.mouth,
+    parts.accessory,
+    parts.prop,
+  ]);
+
+  if (frameName.startsWith("walk-") && frameName.endsWith("-1")) {
+    replaceMatchingLayer(layers, { kind: "rect", x: 33, y: 63, width: 6, height: 1, fill: appearance.pants }, { kind: "rect", x: 32, y: 63, width: 6, height: 1, fill: appearance.pants });
+  }
+  if (frameName.startsWith("walk-") && frameName.endsWith("-3")) {
+    replaceMatchingLayer(layers, { kind: "rect", x: 33, y: 63, width: 6, height: 1, fill: appearance.pants }, { kind: "rect", x: 34, y: 63, width: 6, height: 1, fill: appearance.pants });
+  }
+  if (frameName.startsWith("work-typing")) {
+    layers.push({ kind: "rect", x: 15, y: 37, width: 18, height: 4, fill: "#8b5e34" });
+  }
+
+  return { layers };
+}
+
+function createSimpleChibiParts(
+  appearance: PixelCharacterAppearance,
+  components: PixelCharacterComponentRecipe,
+): Record<string, PixelCharacterPart> {
+  if (components.hair === "afro") {
+    return createAfroChibiParts(appearance, components);
+  }
+
+  return {
+    hair: part("hair", localizeLayers(SIMPLE_CHIBI_CONTAINERS.hair, createHairPart(components.hair, appearance))),
+    head: part("head", [
+      { kind: "rect", x: 0, y: 0, width: 24, height: 8, fill: appearance.skin },
+      { kind: "rect", x: 4, y: 6, width: 18, height: 4, fill: appearance.skin },
+    ]),
+    eyes: part("head", createEyesPart(components.eyes)),
+    mouth: part("head", createMouthPart(components.mouth)),
+    top: part("body", createTopPart(components.top, appearance), topCenterAlign()),
+    bottom: part("body", createBottomPart(components.bottom, appearance)),
+    leftSleeve: part("body", [{ kind: "rect", x: 1, y: 0, width: 3, height: 10, fill: "#7fb5d6" }]),
+    rightSleeve: part("body", [{ kind: "rect", x: 21, y: 0, width: 3, height: 10, fill: "#e7a2aa" }]),
+    leftHand: part("body", [{ kind: "rect", x: 0, y: 12, width: 5, height: 3, fill: appearance.skin }]),
+    rightHand: part("body", [{ kind: "rect", x: 21, y: 12, width: 5, height: 3, fill: appearance.skin }]),
+    accessory: part("head", createAccessoryPart(components.accessory)),
+    prop: part("prop", createPropPart(components.prop)),
+  };
+}
+
+function createAfroChibiParts(
+  appearance: PixelCharacterAppearance,
+  components: PixelCharacterComponentRecipe,
+): Record<string, PixelCharacterPart> {
+  return {
+    hair: part("hair", localizeLayers(SIMPLE_CHIBI_CONTAINERS.hair, createHairPart(components.hair, appearance))),
+    head: part("head", [
+      { kind: "rect", x: 13, y: 9, width: 14, height: 5, fill: appearance.skin },
+      { kind: "rect", x: 8, y: 14, width: 25, height: 5, fill: appearance.skin },
+      { kind: "rect", x: 5, y: 19, width: 30, height: 8, fill: appearance.skin },
+      { kind: "rect", x: 8, y: 27, width: 25, height: 4, fill: appearance.skin },
+    ]),
+    eyes: part("head", createAfroEyesPart(components.eyes)),
+    mouth: part("head", createAfroMouthPart(components.mouth)),
+    top: part("body", [
+      { kind: "rect", x: 9, y: 0, width: 22, height: 12, fill: appearance.shirt },
+      { kind: "rect", x: 9, y: 12, width: 22, height: 3, fill: "#df8f92" },
+    ], topCenterAlign()),
+    bottom: part("body", [
+      { kind: "rect", x: 9, y: 14, width: 6, height: 1, fill: appearance.pants },
+      { kind: "rect", x: 25, y: 14, width: 6, height: 1, fill: appearance.pants },
+    ]),
+    leftSleeve: part("body", [{ kind: "rect", x: 4, y: 0, width: 5, height: 12, fill: "#4f90b7" }]),
+    rightSleeve: part("body", [{ kind: "rect", x: 31, y: 0, width: 5, height: 12, fill: "#df8f92" }]),
+    leftHand: part("body", [{ kind: "rect", x: 4, y: 12, width: 5, height: 3, fill: appearance.skin }]),
+    rightHand: part("body", [{ kind: "rect", x: 31, y: 12, width: 5, height: 3, fill: appearance.skin }]),
+    accessory: part("head", createAccessoryPart(components.accessory)),
+    prop: part("prop", createPropPart(components.prop)),
+  };
+}
+
+function createAfroEyesPart(component: string): PixelCharacterLayer[] {
+  if (component === "sleepy") {
+    return [
+      { kind: "rect", x: 12, y: 19, width: 5, height: 1, fill: "#050505" },
+      { kind: "rect", x: 27, y: 19, width: 5, height: 1, fill: "#050505" },
+    ];
+  }
+  return [
+    { kind: "rect", x: 12, y: 18, width: 3, height: 4, fill: "#050505" },
+    { kind: "rect", x: 27, y: 18, width: 3, height: 4, fill: "#050505" },
+  ];
+}
+
+function createAfroMouthPart(component: string): PixelCharacterLayer[] {
+  return component === "small"
+    ? [{ kind: "rect", x: 17, y: 27, width: 7, height: 2, fill: "#050505" }]
+    : [{ kind: "rect", x: 16, y: 26, width: 10, height: 3, fill: "#050505" }];
+}
+
+function createHairPart(component: string, appearance: PixelCharacterAppearance): PixelCharacterLayer[] {
+  if (component === "flat-top") {
+    return [
+      { kind: "rect", x: 12, y: 9, width: 28, height: 9, fill: appearance.hair },
+      { kind: "rect", x: 12, y: 18, width: 9, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 31, y: 18, width: 9, height: 5, fill: appearance.hair },
+    ];
+  }
+  if (component === "round") {
+    return [
+      { kind: "rect", x: 17, y: 9, width: 18, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 14, y: 14, width: 24, height: 8, fill: appearance.hair },
+      { kind: "rect", x: 13, y: 22, width: 26, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 14, y: 27, width: 5, height: 4, fill: appearance.hair },
+      { kind: "rect", x: 33, y: 27, width: 5, height: 4, fill: appearance.hair },
+    ];
+  }
+  if (component === "side-sweep") {
+    return [
+      { kind: "rect", x: 16, y: 8, width: 18, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 13, y: 13, width: 25, height: 7, fill: appearance.hair },
+      { kind: "rect", x: 20, y: 20, width: 19, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 10, y: 18, width: 7, height: 13, fill: appearance.hair },
+      { kind: "rect", x: 34, y: 17, width: 7, height: 11, fill: appearance.hair },
+    ];
+  }
+  if (component === "wide") {
+    return [
+      { kind: "rect", x: 9, y: 12, width: 34, height: 8, fill: appearance.hair },
+      { kind: "rect", x: 12, y: 20, width: 28, height: 8, fill: appearance.hair },
+      { kind: "rect", x: 13, y: 28, width: 7, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 32, y: 28, width: 7, height: 5, fill: appearance.hair },
+    ];
+  }
+  if (component === "afro") {
+    return [
+      { kind: "rect", x: 25, y: 5, width: 10, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 39, y: 5, width: 8, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 21, y: 10, width: 30, height: 6, fill: appearance.hair },
+      { kind: "rect", x: 16, y: 16, width: 38, height: 7, fill: appearance.hair },
+      { kind: "rect", x: 12, y: 23, width: 44, height: 8, fill: appearance.hair },
+      { kind: "rect", x: 9, y: 31, width: 50, height: 6, fill: appearance.hair },
+      { kind: "rect", x: 12, y: 37, width: 9, height: 12, fill: appearance.hair },
+      { kind: "rect", x: 49, y: 37, width: 8, height: 12, fill: appearance.hair },
+    ];
+  }
+  if (component === "short") {
+    return [
+      { kind: "rect", x: 18, y: 13, width: 14, height: 3, fill: appearance.hair },
+      { kind: "rect", x: 15, y: 16, width: 22, height: 5, fill: appearance.hair },
+      { kind: "rect", x: 14, y: 19, width: 5, height: 4, fill: appearance.hair },
+    ];
+  }
+  if (component === "bun") {
+    return [
+      { kind: "rect", x: 20, y: 11, width: 9, height: 4, fill: appearance.hair },
+      { kind: "rect", x: 17, y: 15, width: 18, height: 7, fill: appearance.hair },
+      { kind: "rect", x: 33, y: 10, width: 6, height: 6, fill: appearance.hair },
+      { kind: "rect", x: 35, y: 8, width: 3, height: 3, fill: appearance.hair },
+    ];
+  }
+  return [
+    { kind: "rect", x: 20, y: 10, width: 8, height: 4, fill: appearance.hair },
+    { kind: "rect", x: 16, y: 14, width: 20, height: 8, fill: appearance.hair },
+    { kind: "rect", x: 15, y: 21, width: 5, height: 7, fill: appearance.hair },
+    { kind: "rect", x: 32, y: 21, width: 5, height: 7, fill: appearance.hair },
+  ];
+}
+
+function createEyesPart(component: string): PixelCharacterLayer[] {
+  if (component === "glasses") {
+    return [
+      { kind: "rect", x: 3, y: 1, width: 7, height: 5, fill: "#050505" },
+      { kind: "rect", x: 14, y: 1, width: 7, height: 5, fill: "#050505" },
+      { kind: "rect", x: 10, y: 3, width: 4, height: 1, fill: "#050505" },
+      { kind: "rect", x: 4, y: 2, width: 5, height: 3, fill: "#aeb4b8" },
+      { kind: "rect", x: 15, y: 2, width: 5, height: 3, fill: "#aeb4b8" },
+    ];
+  }
+  if (component === "tiny-blue") {
+    return [
+      { kind: "rect", x: 6, y: 3, width: 2, height: 2, fill: "#6377d8" },
+      { kind: "rect", x: 16, y: 3, width: 2, height: 2, fill: "#6377d8" },
+    ];
+  }
+  if (component === "sleepy") {
+    return [
+      { kind: "rect", x: 5, y: 2, width: 4, height: 1, fill: "#050505" },
+      { kind: "rect", x: 15, y: 2, width: 4, height: 1, fill: "#050505" },
+    ];
+  }
+  return [
+    { kind: "rect", x: 6, y: 2, width: 2, height: 3, fill: "#050505" },
+    { kind: "rect", x: 16, y: 2, width: 2, height: 3, fill: "#050505" },
+  ];
+}
+
+function createMouthPart(component: string): PixelCharacterLayer[] {
+  if (component === "wide") {
+    return [{ kind: "rect", x: 14, y: 12, width: 12, height: 3, fill: "#050505" }];
+  }
+  return component === "small"
+    ? [{ kind: "rect", x: 16, y: 12, width: 5, height: 2, fill: "#050505" }]
+    : [{ kind: "rect", x: 15, y: 12, width: 10, height: 3, fill: "#050505" }];
+}
+
+function createTopPart(component: string, appearance: PixelCharacterAppearance): PixelCharacterLayer[] {
+  if (component === "tshirt") {
+    return [{ kind: "rect", x: 2, y: 0, width: 18, height: 14, fill: appearance.shirt }];
+  }
+  if (component === "jacket") {
+    return [
+      { kind: "rect", x: 2, y: 0, width: 18, height: 14, fill: appearance.shirt },
+      { kind: "rect", x: 2, y: 0, width: 5, height: 14, fill: "#5d83c8" },
+      { kind: "rect", x: 15, y: 0, width: 5, height: 14, fill: "#5d83c8" },
+      { kind: "rect", x: 8, y: 1, width: 6, height: 8, fill: "#e8efe2" },
+    ];
+  }
+  if (component === "hoodie") {
+    return [
+      { kind: "rect", x: 2, y: 0, width: 18, height: 14, fill: appearance.shirt },
+      { kind: "rect", x: 8, y: 2, width: 6, height: 9, fill: "#138247" },
+    ];
+  }
+  if (component === "dress") {
+    return [
+      { kind: "rect", x: 1, y: 0, width: 20, height: 13, fill: appearance.shirt },
+      { kind: "rect", x: 0, y: 13, width: 22, height: 2, fill: appearance.pants },
+    ];
+  }
+  return [{ kind: "rect", x: 3, y: 0, width: 16, height: 14, fill: appearance.shirt }];
+}
+
+function createBottomPart(component: string, appearance: PixelCharacterAppearance): PixelCharacterLayer[] {
+  return component === "skirt"
+    ? [{ kind: "rect", x: 3, y: 12, width: 16, height: 3, fill: appearance.pants }]
+    : [
+        { kind: "rect", x: 3, y: 14, width: 6, height: 1, fill: appearance.pants },
+        { kind: "rect", x: 13, y: 14, width: 6, height: 1, fill: appearance.pants },
+      ];
+}
+
+function createAccessoryPart(component: string): PixelCharacterLayer[] {
+  if (component === "blush") {
+    return [
+      { kind: "rect", x: 2, y: 7, width: 4, height: 3, fill: "#ff9fc4" },
+      { kind: "rect", x: 18, y: 7, width: 4, height: 3, fill: "#ff9fc4" },
+    ];
+  }
+  if (component === "headband") {
+    return [{ kind: "rect", x: 3, y: 1, width: 18, height: 3, fill: "#7d50c8" }];
+  }
+  return [];
+}
+
+function createPropPart(component: string): PixelCharacterLayer[] {
+  if (component === "guitar") {
+    return [
+      { kind: "rect", x: 8, y: 5, width: 10, height: 13, fill: "#c8e86f" },
+      { kind: "rect", x: 15, y: 7, width: 20, height: 6, fill: "#c8e86f" },
+      { kind: "rect", x: 22, y: 10, width: 16, height: 7, fill: "#4e73d6" },
+    ];
+  }
+  return [];
+}
+
+function preset(
+  id: string,
+  label: string,
+  components: PixelCharacterComponentRecipe,
+  skin: string,
+  hair: string,
+  shirt: string,
+  pants: string,
+): PixelCharacterPreset {
+  return {
+    id,
+    label,
+    components,
+    appearance: { skin, hair, shirt, pants, accessory: "none" },
+  };
+}
+
+function part(containerId: string, layers: PixelCharacterLayer[], align?: PixelCharacterPartAlignment): PixelCharacterPart {
+  return { containerId, align, layers };
+}
+
+function composeParts(containers: Record<string, PixelCharacterContainer>, parts: Array<PixelCharacterPart | undefined>): PixelCharacterLayer[] {
+  const layers: PixelCharacterLayer[] = [];
+  for (const item of parts) {
+    if (!item) {
+      continue;
+    }
+    const container = containers[item.containerId] ?? { id: item.containerId, x: 0, y: 0, width: 0, height: 0 };
+    const alignmentOffset = getPartAlignmentOffset(container, item);
+    for (const layer of item.layers) {
+      layers.push({
+        ...layer,
+        x: container.x + alignmentOffset.x + layer.x,
+        y: container.y + alignmentOffset.y + layer.y,
+      });
+    }
+  }
+  return layers;
+}
+
+function getPartAlignmentOffset(container: PixelCharacterContainer, part: PixelCharacterPart): { x: number; y: number } {
+  if (!part.align || part.layers.length === 0) {
+    return { x: 0, y: 0 };
+  }
+
+  const bounds = getLayerBounds(part.layers);
+  const x =
+    part.align.horizontal === "center"
+      ? Math.round((container.width - bounds.width) / 2) - bounds.x
+      : part.align.horizontal === "right"
+        ? container.width - bounds.width - bounds.x
+        : -bounds.x;
+  const y =
+    part.align.vertical === "center"
+      ? Math.round((container.height - bounds.height) / 2) - bounds.y
+      : part.align.vertical === "bottom"
+        ? container.height - bounds.height - bounds.y
+        : -bounds.y;
+
+  return { x, y };
+}
+
+function getLayerBounds(layers: PixelCharacterLayer[]): { x: number; y: number; width: number; height: number } {
+  const minX = Math.min(...layers.map((layer) => layer.x));
+  const minY = Math.min(...layers.map((layer) => layer.y));
+  const maxX = Math.max(...layers.map((layer) => layer.x + layer.width));
+  const maxY = Math.max(...layers.map((layer) => layer.y + layer.height));
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+function bottomCenterAlign(): PixelCharacterPartAlignment {
+  return { horizontal: "center", vertical: "bottom" };
+}
+
+function topCenterAlign(): PixelCharacterPartAlignment {
+  return { horizontal: "center", vertical: "top" };
+}
+
+function localizeLayers(container: PixelCharacterContainer, layers: PixelCharacterLayer[]): PixelCharacterLayer[] {
+  return layers.map((layer) => ({
+    ...layer,
+    x: layer.x - container.x,
+    y: layer.y - container.y,
+  }));
+}
+
+function replaceMatchingLayer(layers: PixelCharacterLayer[], from: PixelCharacterLayer, to: PixelCharacterLayer): void {
+  const index = layers.findIndex(
+    (layer) =>
+      layer.kind === from.kind &&
+      layer.x === from.x &&
+      layer.y === from.y &&
+      layer.width === from.width &&
+      layer.height === from.height &&
+      layer.fill === from.fill,
+  );
+  if (index >= 0) {
+    layers[index] = to;
+  }
+}
+
+function pickAppearance(seed: string): PixelCharacterAppearance {
+  return DEFAULT_PALETTES[hashSeed(seed) % DEFAULT_PALETTES.length]!;
+}
+
+function hashSeed(seed: string): number {
+  let hash = 0;
+  for (const char of seed) {
+    hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+  }
+  return hash;
+}
+
+void REQUIRED_AGENT_AVATAR_ANIMATIONS;