#CompactCharacterPicker

The picker cut down to what fits beside a sign-up form.

import { useState } from 'react';
import { AgentAvatar, CompactCharacterPicker, type ColorId, type ShapeId } from '@aora-bot/react';

export default function Demo() {
  const [shape, setShape] = useState<ShapeId>('blob');
  const [color, setColor] = useState<ColorId>('blue');
  return (
    <div className="site-demo site-demo--column">
      <AgentAvatar agent={{ id: 'first', shape, color }} size="xl" />
      <CompactCharacterPicker shape={shape} color={color} onSelectShape={setShape} onSelectColor={setColor} />
    </div>
  );
}

#Fewer options on purpose

A handful of inks and shapes rather than the whole catalogue. The shapes are AUTO_SHAPE_POOL — the shapes that still read as a character at 16px — and the missing ink is black, which is reserved as the default ink and so is not a choice anyone makes (ASSIGNABLE_COLOR_IDS). Someone deciding what their first agent looks like wants a handful of obvious options, not the whole catalogue; the full grid belongs in the editor they can open later.

The component is controlled, like the plain picker, and lays both groups out on one row.

#API

#Next

• CharacterPicker — the controlled grid
• Character setup — choosing what an agent looks like