@oxy.so/bloom 7.0.1 → 7.1.1

package/src/agent-creator/CharacterControls.tsx

@@ -0,0 +1,150 @@
+import { useContext } from 'react';
+import {
+  CharacterRuntimeContext,
+  CharacterCapabilitiesContext,
+} from '../agent-avatar/context';
+import type {
+  AvatarCharacterCategory,
+  AvatarCharacterConfig,
+} from '../agent-avatar/config-character';
+import { StyledView } from '../styles/styled-primitives';
+import { Text } from '../typography';
+import { CHARACTER_OPTIONS, CHARACTER_PRESETS } from './constants';
+import { useAgentCreatorBindings, useAgentCreatorMessages } from './context';
+
+/** Preset and accessory controls share Bloom Select; shapes, eyes and colors use the existing pickers. */
+export function CharacterControls({
+  character,
+  capabilitiesKey,
+  onChange,
+}: {
+  character?: AvatarCharacterConfig;
+  capabilitiesKey?: string;
+  onChange: (character: AvatarCharacterConfig | undefined) => void;
+}) {
+  const messages = useAgentCreatorMessages();
+  const { runtimeUrl } = useContext(CharacterRuntimeContext);
+  const { capabilities, capabilitiesByKey } = useContext(
+    CharacterCapabilitiesContext,
+  );
+  const {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectIcon,
+    SelectContent,
+    SelectItem,
+    SelectItemText,
+  } = useAgentCreatorBindings();
+  if (!runtimeUrl) return null;
+  const key = capabilitiesKey ?? JSON.stringify(character);
+  const resolved =
+    capabilitiesByKey?.get(key) ??
+    (character && capabilities?.key === key ? capabilities : undefined);
+  const row = (
+    label: string,
+    value: string,
+    items: readonly { id: string; title: string; disabled?: boolean }[],
+    onSelect: (id: string) => void,
+    placeholder = label,
+  ) => (
+    <StyledView key={label} className="flex flex-row items-center gap-3">
+      <Text
+        variant="body-regular"
+        className="w-[96px] text-body-regular text-text-primary"
+      >
+        {label}
+      </Text>
+      <StyledView className="min-w-0 flex-1">
+        <Select size="sm" value={value} onValueChange={onSelect}>
+          <SelectTrigger label={label}>
+            <SelectValue placeholder={placeholder} />
+            <SelectIcon />
+          </SelectTrigger>
+          <SelectContent
+            label={label}
+            items={items.map((item) => ({ ...item, label: item.title }))}
+            width={224}
+            valueExtractor={(item) => item.id}
+            renderItem={(item) => (
+              <SelectItem
+                value={item.id}
+                label={item.title}
+                disabled={item.disabled}
+              >
+                <SelectItemText>{item.title}</SelectItemText>
+              </SelectItem>
+            )}
+          />
+        </Select>
+      </StyledView>
+    </StyledView>
+  );
+  const presets = [
+    { id: 'bloom', title: messages.proceduralAvatar },
+    ...CHARACTER_PRESETS.map((item) => ({
+      id: item.id,
+      title: messages.characterOption('preset', item.id, item.title),
+    })),
+  ];
+  if (character && !presets.some((item) => item.id === character.preset))
+    presets.push({
+      id: character.preset,
+      title: messages.characterOption(
+        'preset',
+        character.preset,
+        character.preset,
+      ),
+    });
+  const labels: Record<AvatarCharacterCategory, string> = {
+    shape: messages.shape,
+    color: messages.color,
+    eyes: messages.betaEyes,
+    eyewear: messages.eyewear,
+    accessory: messages.accessory,
+  };
+  return (
+    <StyledView
+      className="mt-[15px] flex flex-col gap-2 px-3"
+      testID="agent-creator-character-controls"
+    >
+      {row(
+        messages.avatarStyle,
+        character?.preset ?? 'bloom',
+        presets,
+        (id) => onChange(id === 'bloom' ? undefined : { preset: id }),
+        messages.betaPreset,
+      )}
+      {character &&
+        (['eyewear', 'accessory'] as AvatarCharacterCategory[]).map(
+          (category) =>
+            row(
+              labels[category],
+              resolved?.selected[category] ??
+                character.selections?.[category] ??
+                'none',
+              (category === 'accessory'
+                ? [
+                    ['none', messages.off] as const,
+                    ...CHARACTER_OPTIONS[category],
+                  ]
+                : CHARACTER_OPTIONS[category]
+              ).map(([id, title]) => ({
+                id,
+                title: messages.characterOption(category, id, title),
+                disabled:
+                  !resolved ||
+                  resolved.available[`${category}:${id}`] === false,
+              })),
+              (id) => {
+                onChange({
+                  ...character,
+                  selections: { ...character.selections, [category]: id },
+                });
+              },
+              labels[category],
+            ),
+        )}
+    </StyledView>
+  );
+}

package/src/agent-creator/EmotionPicker.tsx

@@ -12,28 +12,35 @@ import Animated, {
 } from 'react-native-reanimated';
 import { EYES, type AvatarConfig } from '../agent-avatar';
 import { AgentFace } from '../agent-avatar/AgentFace';
-import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import { StyledImage, StyledPressable, StyledView } from '../styles/styled-primitives';
 import { useTheme } from '../theme/use-theme';
 import { useAgentCreatorMessages } from './context';
 import { useTrackEvents } from './use-track-events';
 
 const AnimatedView = Animated.createAnimatedComponent(StyledView);
+export type EmotionChoice = { id: string; label: string; config: AvatarConfig; disabled?: boolean; thumbnail?: string };
 function Emotion({
   config,
-  eyes,
+  choice,
+  backgroundColor,
+  active,
+  count,
   index,
   rotation,
   onChange,
 }: {
   config: AvatarConfig;
-  eyes: AvatarConfig['eyes'];
+  choice: EmotionChoice;
+  backgroundColor?: string;
+  active: boolean;
+  count: number;
   index: number;
   rotation: SharedValue<number>;
-  onChange: (eyes: AvatarConfig['eyes']) => void;
+  onChange: (id: string) => void;
 }) {
   const messages = useAgentCreatorMessages();
   const { colors } = useTheme();
-  const angle = (index * 360) / EYES.length;
+  const angle = (index * 360) / count;
   const counterRotation = useAnimatedStyle(
     () => ({ transform: [{ rotate: `${-rotation.value - angle}deg` }] }),
     [rotation, angle],
@@ -55,21 +62,22 @@ function Emotion({
       <AnimatedView style={counterRotation}>
         <StyledPressable
           accessibilityRole="button"
-          accessibilityLabel={messages.emotions[eyes]}
-          aria-pressed={config.eyes === eyes}
-          accessibilityState={{ selected: config.eyes === eyes }}
-          onPress={() => onChange(eyes)}
+          accessibilityLabel={choice.label}
+          aria-pressed={active}
+          accessibilityState={{ selected: active, disabled: choice.disabled }}
+          aria-disabled={choice.disabled}
+          disabled={choice.disabled}
+          onPress={() => onChange(choice.id)}
           pointerEvents="auto"
-          className={`pointer-events-auto flex size-[34px] cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 outline-none transition-[border-color,box-shadow] hover:ring-2 hover:ring-border-button-hover focus-visible:ring-2 focus-visible:ring-border-focus-ring ${config.eyes === eyes ? 'border-foreground-icon-secondary' : 'border-transparent'}`}
+          className={`pointer-events-auto flex size-[34px] cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 outline-none transition-[border-color,box-shadow] hover:ring-2 hover:ring-border-button-hover focus-visible:ring-2 focus-visible:ring-border-focus-ring ${active ? 'border-foreground-icon-secondary' : 'border-transparent'}`}
           style={{
-            backgroundColor: `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
-            borderColor: config.eyes === eyes ? colors.icon : 'transparent',
+            backgroundColor: backgroundColor ?? `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
+            borderColor: active ? colors.icon : 'transparent',
           }}
         >
-          <AgentFace
+          {choice.thumbnail ? <StyledImage source={{ uri: choice.thumbnail }} resizeMode="contain" accessible={false} style={{ width: 27, height: 27, opacity: choice.disabled ? 0.35 : 1 }} /> : <AgentFace
             config={{
-              ...config,
-              eyes,
+              ...choice.config,
               eyeSize: 24,
               eyeGap: 36,
               lookAt: 'center',
@@ -77,7 +85,7 @@ function Emotion({
               idle: false,
             }}
             size={34}
-          />
+          />}
         </StyledPressable>
       </AnimatedView>
     </StyledView>
@@ -88,11 +96,22 @@ function Emotion({
 export function EmotionPicker({
   config,
   onChange,
+  choices: choicesProp,
+  value: valueProp,
+  onSelect,
+  backgroundColor,
 }: {
   config: AvatarConfig;
+  backgroundColor?: string;
+  choices?: readonly EmotionChoice[];
+  value?: string;
+  onSelect?: (id: string) => void;
   onChange: (eyes: AvatarConfig['eyes']) => void;
 }) {
   const messages = useAgentCreatorMessages();
+  const choices = choicesProp ?? EYES.map((eyes) => ({ id: eyes, label: messages.emotions[eyes], config: { ...config, eyes } }));
+  const value = valueProp ?? config.eyes;
+  const emit = (id: string) => onSelect ? onSelect(id) : onChange(id as AvatarConfig['eyes']);
   const ref = useRef<View>(null);
   const visible = useSharedValue(true);
   const target = useSharedValue(0);
@@ -123,7 +142,7 @@ export function EmotionPicker({
     if (Platform.OS === 'web' && typeof document !== 'undefined')
       document.addEventListener('visibilitychange', visibility);
     return () => {
-      subscription?.remove();
+      subscription?.remove?.();
       if (Platform.OS === 'web' && typeof document !== 'undefined')
         document.removeEventListener('visibilitychange', visibility);
     };
@@ -182,15 +201,18 @@ export function EmotionPicker({
             orbit,
           ]}
         >
-          {EYES.map((eyes, index) => (
+          {choices.map((choice, index) => (
             <Emotion
-              key={eyes}
+              key={choice.id}
               config={config}
-              eyes={eyes}
+              choice={choice}
+              backgroundColor={backgroundColor}
+              active={value === choice.id}
+              count={choices.length}
               index={index}
               rotation={rotation}
               onChange={(value) => {
-                if (!suppressClick.value) onChange(value);
+                if (!suppressClick.value) emit(value);
               }}
             />
           ))}

package/src/agent-creator/ShapeArc.tsx

@@ -1,4 +1,11 @@
-import { useId, useRef, useState, type ComponentType, type Ref } from 'react';
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentType,
+  type Ref,
+} from 'react';
 import { Platform, type View, type ViewProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -11,14 +18,18 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
-import { AgentAvatar, FOLD_SHAPES, type AvatarConfig } from '../agent-avatar';
+import { FOLD_SHAPES, type AvatarConfig } from '../agent-avatar/model';
 import { useIsRtl } from '../hooks/use-is-rtl';
-import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import {
+  StyledImage,
+  StyledPressable,
+  StyledView,
+} from '../styles/styled-primitives';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { useAgentCreatorMessages } from './context';
-import { wrapShape } from './shared';
 import { useTrackEvents } from './use-track-events';
+import { ShapeSilhouette } from './ShapeSilhouette';
 
 // RNW supports these listbox properties; native handles equivalent accessibility actions.
 type ListboxViewProps = Omit<ViewProps, 'role'> & {
@@ -37,15 +48,24 @@ const trackClip: ArcCssStyle = {
   clipPath:
     'polygon(0 0, 15% 0, 30% 36%, 50% 50%, 70% 36%, 85% 0, 100% 0, 100% 100%, 0 100%)',
 };
+export type ShapeArcChoice = {
+  id: string;
+  label: string;
+  config: AvatarConfig;
+  thumbnail?: string;
+};
+const wrap = (slot: number, count: number) => ((slot % count) + count) % count;
 function ShapeSlot({
-  config,
   slot,
   position,
   sign,
   id,
   onSelect,
+  choices,
+  value,
 }: {
-  config: AvatarConfig;
+  choices: readonly ShapeArcChoice[];
+  value: string;
   slot: number;
   position: SharedValue<number>;
   sign: number;
@@ -54,8 +74,8 @@ function ShapeSlot({
 }) {
   const messages = useAgentCreatorMessages();
   const { colors } = useTheme();
-  const shape = FOLD_SHAPES[wrapShape(slot)]!;
-  const active = config.foldShape === shape;
+  const choice = choices[wrap(slot, choices.length)]!;
+  const active = value === choice.id;
   const animated = useAnimatedStyle(() => {
     const angle = (slot - position.value) * 0.34;
     return {
@@ -86,26 +106,23 @@ function ShapeSlot({
         role="option"
         tabIndex={-1}
         aria-selected={active}
-        accessibilityLabel={messages.shapeLabel(messages.shapes[shape])}
+        accessibilityLabel={messages.shapeLabel(choice.label)}
         onPress={() => onSelect(slot)}
         className={`flex size-14 cursor-grab items-center justify-center rounded-2xl outline-none transition-colors hover:bg-background-secondary-default active:cursor-grabbing${active ? ' bg-background-secondary-default ring-1 ring-border-button-default' : ''}`}
         style={{
           backgroundColor: active ? colors.backgroundSecondary : 'transparent',
         }}
       >
-        <AgentAvatar
-          config={{
-            ...config,
-            foldShape: shape,
-            face: false,
-            idle: false,
-            motion: 0,
-            lookAt: 'center',
-          }}
-          size={56}
-          paused
-          label={messages.silhouetteLabel(messages.shapes[shape])}
-        />
+        {choice.thumbnail ? (
+          <StyledImage
+            source={{ uri: choice.thumbnail }}
+            resizeMode="contain"
+            accessible={false}
+            style={{ width: 56, height: 56 }}
+          />
+        ) : (
+          <ShapeSilhouette config={choice.config} />
+        )}
       </StyledPressable>
     </AnimatedView>
   );
@@ -115,15 +132,42 @@ function ShapeSlot({
 export function ShapeArc({
   config,
   onChange,
+  choices: choicesProp,
+  value: valueProp,
+  onSelect,
 }: {
   config: AvatarConfig;
+  choices?: readonly ShapeArcChoice[];
+  value?: string;
+  onSelect?: (id: string) => void;
   onChange: (shape: AvatarConfig['foldShape']) => void;
 }) {
   const messages = useAgentCreatorMessages();
   const { colors } = useTheme();
+  const choices =
+    choicesProp ??
+    FOLD_SHAPES.map((shape) => ({
+      id: shape,
+      label: messages.shapes[shape],
+      config: {
+        ...config,
+        family: 'fold' as const,
+        character: undefined,
+        foldShape: shape,
+      },
+    }));
+  const value = valueProp ?? config.foldShape;
+  const emit = (slot: number) => {
+    const choice = choices[wrap(slot, choices.length)]!;
+    if (onSelect) onSelect(choice.id);
+    else onChange(choice.id as AvatarConfig['foldShape']);
+  };
   const id = useId();
   const ref = useRef<View>(null);
-  const initial = Math.max(0, FOLD_SHAPES.indexOf(config.foldShape));
+  const initial = Math.max(
+    0,
+    choices.findIndex((choice) => choice.id === value),
+  );
   const target = useSharedValue(initial);
   const position = useSharedValue(initial);
   const [center, setCenter] = useState(initial);
@@ -137,6 +181,15 @@ export function ShapeArc({
       ? next
       : withSpring(next, { stiffness: 180, damping: 28 });
   };
+  useEffect(() => {
+    const selected = choices.findIndex((choice) => choice.id === value);
+    if (selected < 0) return;
+    const current = Math.round(target.value);
+    let delta = selected - wrap(current, choices.length);
+    if (delta > choices.length / 2) delta -= choices.length;
+    if (delta < -choices.length / 2) delta += choices.length;
+    if (delta) move(current + delta);
+  }, [value, choices.length]);
   useAnimatedReaction(
     () => Math.round(position.value),
     (value, previous) => {
@@ -147,7 +200,7 @@ export function ShapeArc({
   const select = (slot: number) => {
     if (suppressClick.value) return;
     move(slot);
-    onChange(FOLD_SHAPES[wrapShape(slot)]!);
+    emit(slot);
   };
   const drag = Gesture.Pan()
     .activeOffsetX([-5, 5])
@@ -181,15 +234,15 @@ export function ShapeArc({
         ? Math.round(target.value) + step
         : key === 'Home'
           ? 0
-          : FOLD_SHAPES.length - 1;
+          : choices.length - 1;
       move(next);
-      onChange(FOLD_SHAPES[wrapShape(next)]!);
+      emit(next);
       return true;
     },
   );
   const slots = Array.from({ length: 9 }, (_, index) => center + index - 4);
   const selectedSlot = slots.find(
-    (slot) => FOLD_SHAPES[wrapShape(slot)] === config.foldShape,
+    (slot) => choices[wrap(slot, choices.length)]?.id === value,
   );
   return (
     <GestureDetector gesture={drag}>
@@ -213,14 +266,15 @@ export function ShapeArc({
             Math.round(target.value) +
             (event.nativeEvent.actionName === 'increment' ? 1 : -1);
           move(next);
-          onChange(FOLD_SHAPES[wrapShape(next)]!);
+          emit(next);
         }}
       >
         {slots.map((slot) => (
           <ShapeSlot
             key={slot}
             id={id}
-            config={config}
+            choices={choices}
+            value={value}
             slot={slot}
             position={position}
             sign={sign}

package/src/agent-creator/ShapeSilhouette.tsx

@@ -0,0 +1,65 @@
+import { memo } from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { legacyContours } from '../agent-avatar/legacy-contours';
+import { radialContour } from '../agent-avatar/legacy-recipe';
+import type { AvatarConfig } from '../agent-avatar/model';
+import { CHARACTER_COLORS } from './constants';
+
+const silhouettes = new Map<string, { path: string; viewBox: string }>();
+
+function silhouette(config: AvatarConfig) {
+  const key = JSON.stringify([
+    config.family,
+    config.shape,
+    config.foldShape,
+    config.foldDirection,
+    config.foldDepth,
+    config.alienShape,
+  ]);
+  const cached = silhouettes.get(key);
+  if (cached) return cached;
+  const points = radialContour(
+    legacyContours({ ...config, grain: 0, material: 'solid' }),
+    128,
+  ).map(([x, y]) => [x, -y] as const);
+  const xs = points.map(([x]) => x),
+    ys = points.map(([, y]) => y);
+  const left = Math.min(...xs),
+    top = Math.min(...ys),
+    width = Math.max(...xs) - left,
+    height = Math.max(...ys) - top;
+  // Original catalog PNGs use a flat pink silhouette with a small clear edge.
+  const padding = Math.max(width, height) * 0.025;
+  const result = {
+    path:
+      points
+        .map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(4)} ${y.toFixed(4)}`)
+        .join(' ') + 'Z',
+    viewBox: `${left - padding} ${top - padding} ${width + padding * 2} ${height + padding * 2}`,
+  };
+  if (silhouettes.size >= 64)
+    silhouettes.delete(silhouettes.keys().next().value!);
+  silhouettes.set(key, result);
+  return result;
+}
+
+/** Shape-only selector artwork: no avatar, animation loop, or runtime request. */
+export const ShapeSilhouette = memo(function ShapeSilhouette({
+  config,
+}: {
+  config: AvatarConfig;
+}) {
+  const { path, viewBox } = silhouette(config);
+  return (
+    <Svg
+      width={56}
+      height={56}
+      viewBox={viewBox}
+      preserveAspectRatio="xMidYMid meet"
+      accessible={false}
+      pointerEvents="none"
+    >
+      <Path d={path} fill={CHARACTER_COLORS.pink} />
+    </Svg>
+  );
+});

package/src/agent-creator/constants.ts

@@ -55,3 +55,33 @@ export const PREVIEW_TEXT: Record<AgentLanguage, string> = {
   ja: 'こんにちは！準備ができたら始めましょう。',
   pt: 'Olá! Podemos começar quando quiser.',
 };
+
+// Recovered engine catalog metadata. IDs are renderer selections; titles retain the beta catalog's English defaults.
+export const CHARACTER_PRESETS = [
+  { id: 'blue_beret', title: 'Felipe' },
+  { id: 'alfred', title: 'Alfred' },
+  { id: 'purple_heart', title: 'Jojo' },
+  { id: 'lime_frog', title: 'Todd' },
+  { id: 'coral_monocle', title: 'Iris' },
+  { id: 'gus', title: 'Thelma' },
+  { id: 'blue_spectacles', title: 'Josh' },
+  { id: 'lime_headphones', title: 'Iggy' },
+] as const;
+export const CHARACTER_OPTIONS = {
+  shape: [
+    ['circle', 'Circle'], ['rounded_triangle', 'Rounded triangle'], ['capsule', 'Capsule'],
+    ['rounded_head_two_ears', 'Rounded head with two ears'], ['six_lobed_flower', 'Six lobed flower'],
+    ['heart', 'Heart'], ['four_lobed_butterfly', 'Four lobed butterfly'], ['circle_two_ears', 'Circle with two ears'],
+    ['twelve_scalloped_rosette', 'Twelve scalloped rosette'], ['rounded_cube', 'Hexagon'], ['rounded_diamond', 'Rounded diamond'],
+  ],
+  color: [['pink', 'Pink'], ['orchid', 'Orchid'], ['violet', 'Violet'], ['blue', 'Blue'], ['cyan', 'Cyan'], ['teal', 'Teal'], ['lime', 'Lime'], ['yellow', 'Yellow'], ['coral', 'Coral']],
+  eyes: [['swept_lids', 'Swept lids'], ['oval', 'Oval'], ['sparkle_capsules', 'Sparkle capsules'], ['highlight_capsules', 'Highlight capsules'], ['dots', 'Dots'], ['double_highlights', 'Round highlights'], ['round_inset', 'Round inset'], ['crescent_inset', 'Crescent inset'], ['sleepy_lids', 'Sleepy lids']],
+  eyewear: [['none', 'None'], ['monocle', 'Monocle'], ['tall_oval_frames', 'Tall oval frames'], ['separate_trapezoid_lenses', 'Separate trapezoid lenses'], ['classic_sunglasses', 'Classic sunglasses'], ['round_sunglasses', 'Round sunglasses']],
+  accessory: [['headphones', 'Headphones'], ['bow', 'Bow tie'], ['beanie', 'Beanie'], ['hat', 'Hat'], ['beret', 'Beret'], ['orb', 'Bulb'], ['three_lobe', 'Tuft'], ['crown', 'Crown']],
+} as const;
+
+/** RGB swatches returned by the recovered engine's Color catalog. */
+export const CHARACTER_COLORS = {
+  pink: '#fa70ab', orchid: '#dd6adc', violet: '#a25bff', blue: '#4778ff', cyan: '#00b1ff',
+  teal: '#04bb9f', lime: '#b6d80b', yellow: '#ffcc38', coral: '#ff8066',
+} as const;

package/src/agent-creator/messages.ts

@@ -1,6 +1,16 @@
 import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 export interface AgentCreatorMessages {
+  reaction: string;
+  working: string;
+  avatarStyle: string;
+  proceduralAvatar: string;
+  betaPreset: string;
+  betaEyes: string;
+  eyewear: string;
+  accessory: string;
+  /** Recovered beta catalog names default to their source titles; hosts may localize by category/ID. */
+  characterOption: (category: string, id: string, title: string) => string;
   editor: string;
   newBot: string;
   closeEditor: string;
@@ -96,6 +106,15 @@ export interface AgentCreatorMessages {
 
 export const AGENT_CREATOR_MESSAGES: MessageCatalog<AgentCreatorMessages> =
   defineMessages<AgentCreatorMessages>('AGENT_CREATOR_MESSAGES', {
+    reaction: 'React',
+    working: 'Work',
+    avatarStyle: 'Avatar style',
+    proceduralAvatar: 'Current avatar',
+    betaPreset: 'Character preset (beta)',
+    betaEyes: 'Eye style',
+    eyewear: 'Eyewear',
+    accessory: 'Accessory',
+    characterOption: (_category, _id, title) => String(title),
     editor: 'Agent editor',
     newBot: 'New bot',
     closeEditor: 'Close agent editor',

package/src/agent-creator/shared.ts

@@ -26,21 +26,7 @@ export function normalizeAgentPreferences(
       typeof value?.notifications === 'boolean' ? value.notifications : true,
   };
 }
-export function avatarHex(
-  c: Pick<AvatarConfig, 'hue' | 'saturation' | 'lightness'>,
-) {
-  const light = (c.lightness ?? 76) / 100,
-    a = (c.saturation / 100) * Math.min(light, 1 - light);
-  const channel = (n: number) => {
-    const k = (n + c.hue / 30) % 12;
-    return Math.round(
-      255 * (light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))),
-    )
-      .toString(16)
-      .padStart(2, '0');
-  };
-  return `#${channel(0)}${channel(8)}${channel(4)}`;
-}
+export { avatarHex } from '../agent-avatar/avatar-color';
 export function hexAppearance(hex: string): Partial<AvatarConfig> | null {
   if (!/^#[0-9a-f]{6}$/i.test(hex)) return null;
   const [r = 0, g = 0, b = 0] = [1, 3, 5].map(