@oxy.so/bloom 7.1.1 → 7.1.4

package/src/agent-creator/AgentCreatorBase.tsx

@@ -1,15 +1,19 @@
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { AgentAvatar, type AvatarConfig } from '../agent-avatar';
+import {
+  CHARACTER_SHAPES,
+  NATIVE_CHARACTER_SHAPES,
+  createConfigForShape,
+  currentCharacterShape,
+  materializeCharacter,
+} from '../agent-avatar/character-shapes';
 import type { AvatarCharacterCategory } from '../agent-avatar/config-character';
 import {
   CharacterRuntimeContext,
   CharacterCapabilitiesContext,
 } from '../agent-avatar/context';
-import {
-  legacyCharacterRecipe,
-  legacyNativeShape,
-} from '../agent-avatar/legacy-recipe';
+import { legacyCharacterRecipe } from '../agent-avatar/legacy-recipe';
 import { Button } from '../button/Button';
 import { CloseButton } from '../button/CloseButton';
 import { useDirectionProps } from '../hooks/use-is-rtl';
@@ -56,58 +60,86 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
   );
   const { runtimeUrl } = runtime;
   const beta = Boolean(c.character && c.character.preset !== 'bloom');
-  const nativeShape = legacyNativeShape(c);
   const key = JSON.stringify(beta ? c.character : legacyCharacterRecipe(c));
-  const capabilities =
+  const currentCapabilities =
     catalog.capabilitiesByKey?.get(key) ??
     (catalog.capabilities?.key === key ? catalog.capabilities : undefined);
+  const retained = useRef<{ owner: string; selected: Record<string, string> }>({
+    owner: '',
+    selected: {},
+  });
+  const owner = JSON.stringify([agent.id, c.character?.preset ?? 'bloom']);
+  if (retained.current.owner !== owner)
+    retained.current = { owner, selected: {} };
+  if (currentCapabilities)
+    retained.current.selected = currentCapabilities.selected;
+  const capabilities = currentCapabilities ?? {
+    selected: retained.current.selected,
+    available: {},
+  };
   const betaColor =
-    capabilities?.selected.color ?? c.character?.selections?.color;
+    c.character?.selections?.color ?? capabilities?.selected.color;
+  const betaBodyColor =
+    c.character?.bodyColor ??
+    (c.character?.preset === 'clippo' && !c.character.selections?.color
+      ? '#999b9d'
+      : undefined) ??
+    (!betaColor ? capabilities?.selected.bodyColor : undefined);
   const customColorValue = beta
-    ? (c.character?.bodyColor ??
+    ? (betaBodyColor ??
+      (c.character?.selections?.color
+        ? CHARACTER_COLORS[
+            c.character.selections.color as keyof typeof CHARACTER_COLORS
+          ]
+        : undefined) ??
+      capabilities?.selected.bodyColor ??
       CHARACTER_COLORS[betaColor as keyof typeof CHARACTER_COLORS] ??
       avatarHex(c))
-    : (c.character?.bodyColor ?? avatarHex(c));
+    : (c.character?.bodyColor ??
+      CHARACTER_COLORS[
+        c.character?.selections?.color as keyof typeof CHARACTER_COLORS
+      ] ??
+      avatarHex(c));
   const selectedEyes =
-    capabilities?.selected.eyes ?? c.character?.selections?.eyes ?? 'oval';
+    c.character?.selections?.eyes ??
+    capabilities?.selected.eyes ??
+    (c.character?.preset === 'clippo'
+      ? 'clippo'
+      : c.character?.preset === 'lime_frog'
+        ? 'todd'
+        : 'oval');
+  const selectedEyewear =
+    c.character?.selections?.eyewear ?? capabilities?.selected.eyewear;
+  const selectedAccessory =
+    c.character?.selections?.accessory ?? capabilities?.selected.accessory;
+  const selectedParts = {
+    ...(c.character?.selections?.eyes ||
+    capabilities.selected.eyes ||
+    c.character?.preset === 'clippo' ||
+    c.character?.preset === 'lime_frog'
+      ? { eyes: selectedEyes }
+      : {}),
+    ...(selectedEyewear ? { eyewear: selectedEyewear } : {}),
+    ...(selectedAccessory ? { accessory: selectedAccessory } : {}),
+  };
   const characterConfig = (
     category: AvatarCharacterCategory,
     id: string,
   ): AvatarConfig => {
-    if (
-      !beta &&
-      (category === 'eyes' ||
-        category === 'eyewear' ||
-        category === 'accessory')
-    )
-      return {
-        ...c,
-        character: {
-          ...c.character,
-          preset: 'bloom',
-          selections: { ...c.character?.selections, [category]: id },
-        },
-      };
-    const character = beta
-      ? c.character!
-      : {
-          preset: 'blue_beret',
-          bodyColor: customColorValue,
-          selections: {
-            eyewear:
-              c.character?.selections?.eyewear ??
-              capabilities?.selected.eyewear ??
-              'none',
-            accessory:
-              c.character?.selections?.accessory ??
-              capabilities?.selected.accessory ??
-              'none',
-            eyes: selectedEyes,
-          },
-        };
-    const selections = { ...character.selections, [category]: id };
-    if (category === 'shape') delete selections.eyes;
-    const next = { ...character, selections };
+    if (category === 'shape')
+      return createConfigForShape(c, id, capabilities.selected);
+    const character = materializeCharacter(c, capabilities.selected);
+    // Choosing a body retains the edited face and the preset's effective parts.
+    // Presets supply defaults; their catalog restrictions do not own edits.
+    const selections = {
+      ...selectedParts,
+      ...character.selections,
+      [category]: id,
+    };
+    const next = {
+      ...character,
+      selections,
+    };
     if (category === 'color') delete next.bodyColor;
     return { ...c, character: next };
   };
@@ -117,103 +149,37 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
     ? runtimeUrl.slice(0, runtimeUrl.lastIndexOf('/') + 1)
     : '';
   const eyeBackground = customColorValue;
-  const migratedShapes = [
-    ...(['slender', 'pocket', 'petal', 'star', 'cloud', 'shield'] as const).map(
-      (shape) => ({
-        family: 'fold' as const,
-        shape,
-        title: messages.shapes[shape],
-      }),
-    ),
-    ...(
-      [
-        ['pebble', 'Pebble'],
-        ['squircle', 'Squircle'],
-      ] as const
-    ).map(([shape, title]) => ({
-      family: 'blob' as const,
-      shape,
-      title: messages.characterOption('shape', shape, title),
-    })),
-  ];
-  const migratedConfig = (
-    family: 'fold' | 'blob',
-    shape: string,
-  ): AvatarConfig => {
-    const { character: _character, ...existing } = c;
-    const color = hexAppearance(customColorValue);
-    return {
-      ...existing,
-      ...color,
-      lightEyes: beta ? false : c.lightEyes,
-      family,
-      ...(family === 'fold'
-        ? { foldShape: shape as AvatarConfig['foldShape'] }
-        : { shape: shape as AvatarConfig['shape'] }),
-      ...(runtimeUrl
-        ? {
-            character: {
-              preset: 'bloom',
-              selections: {
-                eyes: selectedEyes,
-                ...((capabilities?.selected.eyewear ??
-                c.character?.selections?.eyewear)
-                  ? {
-                      eyewear:
-                        capabilities?.selected.eyewear ??
-                        c.character?.selections?.eyewear,
-                    }
-                  : {}),
-                ...((capabilities?.selected.accessory ??
-                c.character?.selections?.accessory)
-                  ? {
-                      accessory:
-                        capabilities?.selected.accessory ??
-                        c.character?.selections?.accessory,
-                    }
-                  : {}),
-              },
-            },
-          }
-        : {}),
-    };
-  };
   const shapeChoices = runtimeUrl
-    ? [
-        ...CHARACTER_OPTIONS.shape.map(([id, title]) => ({
-          id,
-          label: messages.characterOption('shape', id, title),
-          config: characterConfig('shape', id),
-          thumbnail: `${thumbnailBase}thumbnails/shapes/${id}.png`,
-        })),
-        ...migratedShapes.map(({ family, shape, title }) => ({
-          id: `legacy:${family}:${shape}`,
-          label: title,
-          config: migratedConfig(family, shape),
-        })),
-      ]
+    ? CHARACTER_SHAPES.map(([id, title]) => ({
+        id,
+        label:
+          id in messages.shapes
+            ? messages.shapes[id as keyof typeof messages.shapes]
+            : messages.characterOption('shape', id, title),
+        config: createConfigForShape(c, id, capabilities.selected),
+        ...(NATIVE_CHARACTER_SHAPES.some(([shape]) => shape === id) &&
+        id !== 'clippo' &&
+        id !== 'todd'
+          ? { thumbnail: `${thumbnailBase}thumbnails/shapes/${id}.png` }
+          : {}),
+      }))
     : undefined;
-  const shapeValue = beta
-    ? (capabilities?.selected.shape ?? c.character?.selections?.shape)
-    : (nativeShape ??
-      `legacy:${c.family}:${c.family === 'fold' ? c.foldShape : c.shape}`);
-  const selectShape = (id: string) => {
-    if (id.startsWith('legacy:')) {
-      const [, family, shape] = id.split(':');
-      onChange({
-        ...agent,
-        avatar: migratedConfig(family as 'fold' | 'blob', shape!),
-      });
-    } else selectCharacter('shape', id);
-  };
+  const shapeValue =
+    c.character?.selections?.shape ??
+    (beta
+      ? (capabilities.selected.shape ??
+        (c.character?.preset === 'clippo' ? 'clippo' : undefined))
+      : currentCharacterShape(c));
+  const selectShape = (id: string) => selectCharacter('shape', id);
   const eyeChoices = runtimeUrl
     ? CHARACTER_OPTIONS.eyes.map(([id, title]) => ({
         id,
         label: messages.characterOption('eyes', id, title),
         config: characterConfig('eyes', id),
-        thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png`,
-        disabled:
-          !capabilities || capabilities.available[`eyes:${id}`] === false,
+        ...(id === 'clippo' || id === 'cyclops'
+          ? { artwork: id }
+          : { thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png` }),
+        disabled: false,
       }))
     : undefined;
   const appearance = (patch: Partial<AvatarConfig>) => {
@@ -367,8 +333,15 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
             </StyledView>
           )}
           <CharacterControls
-            character={c.character ?? { preset: 'bloom' }}
+            character={
+              runtimeUrl
+                ? beta
+                  ? c.character
+                  : materializeCharacter(c, capabilities.selected)
+                : c.character
+            }
             capabilitiesKey={key}
+            selected={capabilities.selected}
             onChange={(character) => {
               if (character)
                 onChange({ ...agent, avatar: { ...c, character } });
@@ -386,7 +359,7 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 boxShadow: '0 1px 2px rgba(0,0,0,.05)',
               }}
             >
-              {!beta &&
+              {!runtimeUrl &&
                 AVATAR_COLORS.map(([hue, saturation, name, center, edge]) => {
                   const active =
                     c.hue === hue &&
@@ -415,15 +388,11 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     </StyledPressable>
                   );
                 })}
-              {beta &&
+              {runtimeUrl &&
                 CHARACTER_OPTIONS.color.map(([id, title]) => {
-                  const active =
-                    !c.character?.bodyColor &&
-                    capabilities?.selected.color === id;
+                  const active = !betaBodyColor && betaColor === id;
                   const hex = CHARACTER_COLORS[id];
-                  const disabled =
-                    !capabilities ||
-                    capabilities.available[`color:${id}`] === false;
+                  const disabled = false;
                   return (
                     <StyledPressable
                       key={id}
@@ -446,18 +415,18 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 <PopoverTrigger asChild label={messages.customColor}>
                   <StyledPressable
                     aria-pressed={
-                      beta ? Boolean(c.character?.bodyColor) : undefined
+                      runtimeUrl ? Boolean(betaBodyColor) : undefined
                     }
                     accessibilityState={{
-                      selected: beta && Boolean(c.character?.bodyColor),
+                      selected: Boolean(runtimeUrl) && Boolean(betaBodyColor),
                     }}
                     className="relative size-[26px] shrink-0 overflow-hidden rounded-full"
                   >
                     <GlossArt
-                      rainbow={!beta || !c.character?.bodyColor}
-                      center={beta ? c.character?.bodyColor : undefined}
-                      edge={beta ? c.character?.bodyColor : undefined}
-                      active={beta && Boolean(c.character?.bodyColor)}
+                      rainbow={!runtimeUrl || !betaBodyColor}
+                      center={runtimeUrl ? betaBodyColor : undefined}
+                      edge={runtimeUrl ? betaBodyColor : undefined}
+                      active={Boolean(runtimeUrl) && Boolean(betaBodyColor)}
                     />
                   </StyledPressable>
                 </PopoverTrigger>
@@ -473,14 +442,14 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     onChange={(hex) => {
                       const next = hexAppearance(hex);
                       if (!next) return;
-                      if (beta)
+                      if (runtimeUrl)
                         onChange({
                           ...agent,
                           avatar: {
                             ...c,
                             ...next,
                             character: {
-                              ...c.character!,
+                              ...materializeCharacter(c, capabilities.selected),
                               bodyColor: hex.toLowerCase(),
                             },
                           },

package/src/agent-creator/CharacterControls.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import {
   CharacterRuntimeContext,
   CharacterCapabilitiesContext,
@@ -16,10 +16,12 @@ import { useAgentCreatorBindings, useAgentCreatorMessages } from './context';
 export function CharacterControls({
   character,
   capabilitiesKey,
+  selected,
   onChange,
 }: {
   character?: AvatarCharacterConfig;
   capabilitiesKey?: string;
+  selected?: Readonly<Record<string, string>>;
   onChange: (character: AvatarCharacterConfig | undefined) => void;
 }) {
   const messages = useAgentCreatorMessages();
@@ -36,11 +38,21 @@ export function CharacterControls({
     SelectItem,
     SelectItemText,
   } = useAgentCreatorBindings();
-  if (!runtimeUrl) return null;
   const key = capabilitiesKey ?? JSON.stringify(character);
-  const resolved =
+  const current =
     capabilitiesByKey?.get(key) ??
     (character && capabilities?.key === key ? capabilities : undefined);
+  const retained = useRef<{
+    preset?: string;
+    selected: Readonly<Record<string, string>>;
+  }>({ selected: {} });
+  if (retained.current.preset !== character?.preset)
+    retained.current = { preset: character?.preset, selected: {} };
+  if (current) retained.current.selected = current.selected;
+  const resolved = {
+    selected: selected ?? current?.selected ?? retained.current.selected,
+  };
+  if (!runtimeUrl) return null;
   const row = (
     label: string,
     value: string,
@@ -90,11 +102,14 @@ export function CharacterControls({
   if (character && !presets.some((item) => item.id === character.preset))
     presets.push({
       id: character.preset,
-      title: messages.characterOption(
-        'preset',
-        character.preset,
-        character.preset,
-      ),
+      title:
+        character.preset === 'legacy'
+          ? messages.proceduralAvatar
+          : messages.characterOption(
+              'preset',
+              character.preset,
+              character.preset,
+            ),
     });
   const labels: Record<AvatarCharacterCategory, string> = {
     shape: messages.shape,
@@ -120,8 +135,8 @@ export function CharacterControls({
           (category) =>
             row(
               labels[category],
-              resolved?.selected[category] ??
-                character.selections?.[category] ??
+              character.selections?.[category] ??
+                resolved?.selected[category] ??
                 'none',
               (category === 'accessory'
                 ? [
@@ -132,14 +147,24 @@ export function CharacterControls({
               ).map(([id, title]) => ({
                 id,
                 title: messages.characterOption(category, id, title),
-                disabled:
-                  !resolved ||
-                  resolved.available[`${category}:${id}`] === false,
+                disabled: false,
               })),
               (id) => {
                 onChange({
                   ...character,
-                  selections: { ...character.selections, [category]: id },
+                  selections: {
+                    ...(['eyes', 'eyewear', 'accessory'] as const).reduce(
+                      (parts, part) => ({
+                        ...parts,
+                        ...(resolved?.selected[part]
+                          ? { [part]: resolved.selected[part] }
+                          : {}),
+                      }),
+                      {},
+                    ),
+                    ...character.selections,
+                    [category]: id,
+                  },
                 });
               },
               labels[category],

package/src/agent-creator/ClippoArtwork.tsx

@@ -0,0 +1,49 @@
+import Svg, { Circle, Path } from 'react-native-svg';
+import { CHARACTER_COLORS } from './constants';
+
+/** Selector artwork only. The avatar itself uses Clippo's actual 3D meshes. */
+export function ClippoArtwork({
+  kind,
+  opacity = 1,
+}: {
+  kind: 'shape' | 'eyes';
+  opacity?: number;
+}) {
+  const eyes = kind === 'eyes';
+  return (
+    <Svg
+      width={eyes ? 27 : 56}
+      height={eyes ? 27 : 56}
+      viewBox={eyes ? '0 0 104 100' : '0 -4 90 170'}
+      preserveAspectRatio="xMidYMid meet"
+      opacity={opacity}
+      accessible={false}
+      pointerEvents="none"
+    >
+      {eyes ? (
+        <>
+          <Circle cx={27} cy={44} r={21} fill="#f4f3ee" />
+          <Circle cx={77} cy={58} r={21} fill="#f4f3ee" />
+          <Circle cx={27} cy={44} r={15} fill="#3c2b2d" />
+          <Circle cx={77} cy={58} r={15} fill="#3c2b2d" />
+          <Path
+            d="M11 8 C18 5 29 5 38 9 M63 21 C72 21 82 26 88 32"
+            fill="none"
+            stroke="#3c2b2d"
+            strokeWidth={12}
+            strokeLinecap="round"
+          />
+        </>
+      ) : (
+        <Path
+          d="M25.4 79 C23 102 24 115 35 120 C46 125 53 119 52 105 C48 84 46 63 56 40 C67 16 63 6 46 3 C27 -1 20 15 14 30 C5 51 2 70 5 91 C8 128 19 151 40 157 C57 162 72 153 75 134 C80 114 69 107 72 93 C73 83 76 75 80 71"
+          fill="none"
+          stroke={CHARACTER_COLORS.pink}
+          strokeWidth={8.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+    </Svg>
+  );
+}

package/src/agent-creator/CyclopsArtwork.tsx

@@ -0,0 +1,27 @@
+import Svg, { Circle, Ellipse, Path } from 'react-native-svg';
+
+/** Static selector artwork; the runtime renders the fitted single-eye mesh. */
+export function CyclopsArtwork({ opacity = 1 }: { opacity?: number }) {
+  return (
+    <Svg
+      width={27}
+      height={27}
+      viewBox="0 0 100 100"
+      opacity={opacity}
+      accessible={false}
+      pointerEvents="none"
+    >
+      <Ellipse cx={50} cy={50} rx={46} ry={44} fill="#f4f5ee" />
+      <Circle
+        cx={50}
+        cy={50}
+        r={24}
+        fill="#148a78"
+        stroke="#174e45"
+        strokeWidth={3}
+      />
+      <Circle cx={50} cy={50} r={14} fill="#101918" />
+      <Path d="M61 31 L71 38 L65 46 L57 40 Z" fill="#ffffff" />
+    </Svg>
+  );
+}

package/src/agent-creator/EmotionPicker.tsx

@@ -12,13 +12,26 @@ import Animated, {
 } from 'react-native-reanimated';
 import { EYES, type AvatarConfig } from '../agent-avatar';
 import { AgentFace } from '../agent-avatar/AgentFace';
-import { StyledImage, StyledPressable, StyledView } from '../styles/styled-primitives';
+import { ClippoArtwork } from './ClippoArtwork';
+import { CyclopsArtwork } from './CyclopsArtwork';
+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 };
+export type EmotionChoice = {
+  id: string;
+  label: string;
+  config: AvatarConfig;
+  disabled?: boolean;
+  thumbnail?: string;
+  artwork?: 'clippo' | 'cyclops';
+};
 function Emotion({
   config,
   choice,
@@ -71,21 +84,40 @@ function Emotion({
           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 ${active ? 'border-foreground-icon-secondary' : 'border-transparent'}`}
           style={{
-            backgroundColor: backgroundColor ?? `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
+            backgroundColor:
+              backgroundColor ??
+              `hsl(${config.hue}, ${config.saturation}%, ${config.lightness ?? 80}%)`,
             borderColor: active ? colors.icon : 'transparent',
           }}
         >
-          {choice.thumbnail ? <StyledImage source={{ uri: choice.thumbnail }} resizeMode="contain" accessible={false} style={{ width: 27, height: 27, opacity: choice.disabled ? 0.35 : 1 }} /> : <AgentFace
-            config={{
-              ...choice.config,
-              eyeSize: 24,
-              eyeGap: 36,
-              lookAt: 'center',
-              motion: 0,
-              idle: false,
-            }}
-            size={34}
-          />}
+          {choice.artwork === 'cyclops' ? (
+            <CyclopsArtwork opacity={choice.disabled ? 0.35 : 1} />
+          ) : choice.artwork === 'clippo' ? (
+            <ClippoArtwork kind="eyes" opacity={choice.disabled ? 0.35 : 1} />
+          ) : choice.thumbnail ? (
+            <StyledImage
+              source={{ uri: choice.thumbnail }}
+              resizeMode="contain"
+              accessible={false}
+              style={{
+                width: 27,
+                height: 27,
+                opacity: choice.disabled ? 0.35 : 1,
+              }}
+            />
+          ) : (
+            <AgentFace
+              config={{
+                ...choice.config,
+                eyeSize: 24,
+                eyeGap: 36,
+                lookAt: 'center',
+                motion: 0,
+                idle: false,
+              }}
+              size={34}
+            />
+          )}
         </StyledPressable>
       </AnimatedView>
     </StyledView>
@@ -109,9 +141,16 @@ export function EmotionPicker({
   onChange: (eyes: AvatarConfig['eyes']) => void;
 }) {
   const messages = useAgentCreatorMessages();
-  const choices = choicesProp ?? EYES.map((eyes) => ({ id: eyes, label: messages.emotions[eyes], config: { ...config, eyes } }));
+  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 emit = (id: string) =>
+    onSelect ? onSelect(id) : onChange(id as AvatarConfig['eyes']);
   const ref = useRef<View>(null);
   const visible = useSharedValue(true);
   const target = useSharedValue(0);

package/src/agent-creator/ShapeSilhouette.tsx

@@ -1,9 +1,12 @@
+import { characterShapeGeometry } from '../agent-avatar/character-shapes';
 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';
+import { ClippoArtwork } from './ClippoArtwork';
+import { ToddArtwork } from './ToddArtwork';
 
 const silhouettes = new Map<string, { path: string; viewBox: string }>();
 
@@ -49,7 +52,19 @@ export const ShapeSilhouette = memo(function ShapeSilhouette({
 }: {
   config: AvatarConfig;
 }) {
-  const { path, viewBox } = silhouette(config);
+  if (
+    config.character?.selections?.shape === 'todd' ||
+    (config.character?.preset === 'lime_frog' &&
+      !config.character.selections?.shape)
+  )
+    return <ToddArtwork />;
+  if (
+    config.character?.selections?.shape === 'clippo' ||
+    (config.character?.preset === 'clippo' &&
+      !config.character.selections?.shape)
+  )
+    return <ClippoArtwork kind="shape" />;
+  const { path, viewBox } = silhouette(characterShapeGeometry(config));
   return (
     <Svg
       width={56}