@oxy.so/bloom 7.1.4 → 7.1.5

package/src/agent-creator/AgentCreatorBase.tsx

@@ -1,19 +1,15 @@
-import { useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, 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 } from '../agent-avatar/legacy-recipe';
+import {
+  legacyCharacterRecipe,
+  legacyNativeShape,
+} from '../agent-avatar/legacy-recipe';
 import { Button } from '../button/Button';
 import { CloseButton } from '../button/CloseButton';
 import { useDirectionProps } from '../hooks/use-is-rtl';
@@ -60,86 +56,58 @@ 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 currentCapabilities =
+  const capabilities =
     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 =
-    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);
+    capabilities?.selected.color ?? c.character?.selections?.color;
   const customColorValue = beta
-    ? (betaBodyColor ??
-      (c.character?.selections?.color
-        ? CHARACTER_COLORS[
-            c.character.selections.color as keyof typeof CHARACTER_COLORS
-          ]
-        : undefined) ??
-      capabilities?.selected.bodyColor ??
+    ? (c.character?.bodyColor ??
       CHARACTER_COLORS[betaColor as keyof typeof CHARACTER_COLORS] ??
       avatarHex(c))
-    : (c.character?.bodyColor ??
-      CHARACTER_COLORS[
-        c.character?.selections?.color as keyof typeof CHARACTER_COLORS
-      ] ??
-      avatarHex(c));
+    : (c.character?.bodyColor ?? avatarHex(c));
   const selectedEyes =
-    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 } : {}),
-  };
+    capabilities?.selected.eyes ?? c.character?.selections?.eyes ?? 'oval';
   const characterConfig = (
     category: AvatarCharacterCategory,
     id: string,
   ): AvatarConfig => {
-    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 (
+      !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 === 'color') delete next.bodyColor;
     return { ...c, character: next };
   };
@@ -149,37 +117,103 @@ 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_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` }
-          : {}),
-      }))
+    ? [
+        ...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),
+        })),
+      ]
     : undefined;
-  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 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 eyeChoices = runtimeUrl
     ? CHARACTER_OPTIONS.eyes.map(([id, title]) => ({
         id,
         label: messages.characterOption('eyes', id, title),
         config: characterConfig('eyes', id),
-        ...(id === 'clippo' || id === 'cyclops'
-          ? { artwork: id }
-          : { thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png` }),
-        disabled: false,
+        thumbnail: `${thumbnailBase}thumbnails/eyes/${id}.png`,
+        disabled:
+          !capabilities || capabilities.available[`eyes:${id}`] === false,
       }))
     : undefined;
   const appearance = (patch: Partial<AvatarConfig>) => {
@@ -333,15 +367,8 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
             </StyledView>
           )}
           <CharacterControls
-            character={
-              runtimeUrl
-                ? beta
-                  ? c.character
-                  : materializeCharacter(c, capabilities.selected)
-                : c.character
-            }
+            character={c.character ?? { preset: 'bloom' }}
             capabilitiesKey={key}
-            selected={capabilities.selected}
             onChange={(character) => {
               if (character)
                 onChange({ ...agent, avatar: { ...c, character } });
@@ -359,7 +386,7 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 boxShadow: '0 1px 2px rgba(0,0,0,.05)',
               }}
             >
-              {!runtimeUrl &&
+              {!beta &&
                 AVATAR_COLORS.map(([hue, saturation, name, center, edge]) => {
                   const active =
                     c.hue === hue &&
@@ -388,11 +415,15 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     </StyledPressable>
                   );
                 })}
-              {runtimeUrl &&
+              {beta &&
                 CHARACTER_OPTIONS.color.map(([id, title]) => {
-                  const active = !betaBodyColor && betaColor === id;
+                  const active =
+                    !c.character?.bodyColor &&
+                    capabilities?.selected.color === id;
                   const hex = CHARACTER_COLORS[id];
-                  const disabled = false;
+                  const disabled =
+                    !capabilities ||
+                    capabilities.available[`color:${id}`] === false;
                   return (
                     <StyledPressable
                       key={id}
@@ -415,18 +446,18 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                 <PopoverTrigger asChild label={messages.customColor}>
                   <StyledPressable
                     aria-pressed={
-                      runtimeUrl ? Boolean(betaBodyColor) : undefined
+                      beta ? Boolean(c.character?.bodyColor) : undefined
                     }
                     accessibilityState={{
-                      selected: Boolean(runtimeUrl) && Boolean(betaBodyColor),
+                      selected: beta && Boolean(c.character?.bodyColor),
                     }}
                     className="relative size-[26px] shrink-0 overflow-hidden rounded-full"
                   >
                     <GlossArt
-                      rainbow={!runtimeUrl || !betaBodyColor}
-                      center={runtimeUrl ? betaBodyColor : undefined}
-                      edge={runtimeUrl ? betaBodyColor : undefined}
-                      active={Boolean(runtimeUrl) && Boolean(betaBodyColor)}
+                      rainbow={!beta || !c.character?.bodyColor}
+                      center={beta ? c.character?.bodyColor : undefined}
+                      edge={beta ? c.character?.bodyColor : undefined}
+                      active={beta && Boolean(c.character?.bodyColor)}
                     />
                   </StyledPressable>
                 </PopoverTrigger>
@@ -442,14 +473,14 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
                     onChange={(hex) => {
                       const next = hexAppearance(hex);
                       if (!next) return;
-                      if (runtimeUrl)
+                      if (beta)
                         onChange({
                           ...agent,
                           avatar: {
                             ...c,
                             ...next,
                             character: {
-                              ...materializeCharacter(c, capabilities.selected),
+                              ...c.character!,
                               bodyColor: hex.toLowerCase(),
                             },
                           },

package/src/agent-creator/CharacterControls.tsx

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

package/src/agent-creator/EmotionPicker.tsx

@@ -12,26 +12,13 @@ import Animated, {
 } from 'react-native-reanimated';
 import { EYES, type AvatarConfig } from '../agent-avatar';
 import { AgentFace } from '../agent-avatar/AgentFace';
-import { ClippoArtwork } from './ClippoArtwork';
-import { CyclopsArtwork } from './CyclopsArtwork';
-import {
-  StyledImage,
-  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;
-  artwork?: 'clippo' | 'cyclops';
-};
+export type EmotionChoice = { id: string; label: string; config: AvatarConfig; disabled?: boolean; thumbnail?: string };
 function Emotion({
   config,
   choice,
@@ -84,40 +71,21 @@ 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.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}
-            />
-          )}
+          {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>
@@ -141,16 +109,9 @@ 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,12 +1,9 @@
-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 }>();
 
@@ -52,19 +49,7 @@ export const ShapeSilhouette = memo(function ShapeSilhouette({
 }: {
   config: AvatarConfig;
 }) {
-  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));
+  const { path, viewBox } = silhouette(config);
   return (
     <Svg
       width={56}