@oxy.so/bloom 6.4.0 → 7.0.0

package/src/agent-avatar/AgentAvatar.tsx

@@ -0,0 +1,299 @@
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  AccessibilityInfo,
+  AppState,
+  PixelRatio,
+  Platform,
+  type View,
+} from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+import { useMessages } from '../locale/messages';
+import { StyledView } from '../styles/styled-primitives';
+import { drawAvatar } from './artwork';
+import { advanceAttention, createAttention } from './attention';
+import { advanceBlink, createBlink } from './blink';
+import { AvatarDrawingObserver } from './context';
+import { DrawingContext } from './drawing';
+import { ENTRANCE_SECONDS } from './entrance';
+import {
+  easeFace,
+  expressionRig,
+  faceAtSize,
+  gazeAngles,
+  type FaceRig,
+} from './face';
+import { AGENT_AVATAR_MESSAGES } from './messages';
+import type { ShapeMorph } from './shape-morph';
+import { Drawing } from './SvgDrawing';
+import type { AgentAvatarProps } from './types';
+import { advanceWander, createWander } from './wander';
+import { WORKING_SECONDS } from './working';
+
+const TAU = Math.PI * 2;
+const randomSeed = () => {
+  if (globalThis.crypto?.getRandomValues)
+    return globalThis.crypto.getRandomValues(new Uint32Array(1))[0]!;
+  return Math.floor(Math.random() * 4294967296) >>> 0;
+};
+
+/** Animated procedural artwork; shared geometry, face rig and materials across platforms. */
+export function AgentAvatar({
+  config,
+  size = 64,
+  paused = false,
+  label,
+  locale,
+  entranceKey,
+  workingKey,
+  workingCycles = 1,
+  className,
+  style,
+  accessibilityLabel,
+  testID,
+}: AgentAvatarProps) {
+  const { messages } = useMessages(AGENT_AVATAR_MESSAGES, locale);
+  const initialReduced = useReducedMotion();
+  const [reduced, setReduced] = useState(initialReduced);
+  useEffect(() => {
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduced,
+    );
+    const media =
+      Platform.OS === 'web' && typeof matchMedia !== 'undefined'
+        ? matchMedia('(prefers-reduced-motion: reduce)')
+        : undefined;
+    const change = () => setReduced(media!.matches);
+    media?.addEventListener('change', change);
+    if (media) change();
+    return () => {
+      subscription?.remove?.();
+      media?.removeEventListener('change', change);
+    };
+  }, []);
+  const backingSize = Math.round(size * Math.min(PixelRatio.get() || 1, 2));
+  const root = useRef<View>(null);
+  const randomized = useRef(false);
+  const state = useRef<{
+    phase: number;
+    blink: ReturnType<typeof createBlink>;
+    wander: ReturnType<typeof createWander>;
+    attention: ReturnType<typeof createAttention>;
+    shapeMorph: ShapeMorph;
+    expression?: FaceRig;
+    face?: FaceRig;
+    velocity: Partial<FaceRig>;
+    gaze?: [number, number];
+    entrance: { key?: number; elapsed: number };
+    working: { key?: number; elapsed: number };
+  } | null>(null);
+  if (!state.current) {
+    const seed = config.seed >>> 0;
+    state.current = {
+      phase: (seed / 4294967296) * TAU,
+      blink: createBlink(seed),
+      wander: createWander(seed ^ config.seed, config.family === 'fold'),
+      attention: createAttention(seed ^ config.seed),
+      shapeMorph: { started: 0, active: false },
+      velocity: {},
+      entrance: { elapsed: ENTRANCE_SECONDS },
+      working: { elapsed: WORKING_SECONDS },
+    };
+  }
+  const renderDrawing = () => {
+    const context = new DrawingContext(),
+      s = state.current!;
+    const appearance = faceAtSize(config, size),
+      target = expressionRig(appearance);
+    drawAvatar(
+      context,
+      appearance,
+      s.phase,
+      s.face ?? target,
+      s.gaze ?? gazeAngles(appearance, s.phase, target),
+      size,
+      s.entrance.elapsed,
+      s.working.elapsed,
+      undefined,
+      Math.max(1, Math.floor(workingCycles)),
+      backingSize,
+    );
+    return context;
+  };
+  const [drawing, setDrawing] = useState(renderDrawing);
+  const observeDrawing = useContext(AvatarDrawingObserver);
+  useLayoutEffect(() => {
+    observeDrawing?.(drawing);
+  }, [observeDrawing, drawing]);
+  useEffect(() => {
+    const s = state.current!,
+      cycles = Math.max(1, Math.floor(workingCycles));
+    if (!randomized.current) {
+      s.wander = createWander(
+        randomSeed() ^ config.seed,
+        config.family === 'fold',
+      );
+      const seed = randomSeed();
+      s.phase = (seed / 4294967296) * TAU;
+      s.blink = createBlink(seed);
+      s.attention = createAttention(randomSeed() ^ config.seed);
+      randomized.current = true;
+    }
+    const duration = WORKING_SECONDS * cycles,
+      appearance = faceAtSize(config, size),
+      target = expressionRig(appearance);
+    if (s.entrance.key !== entranceKey)
+      s.entrance = {
+        key: entranceKey,
+        elapsed: entranceKey === undefined || paused ? ENTRANCE_SECONDS : 0,
+      };
+    if (s.working.key !== workingKey) {
+      s.working = {
+        key: workingKey,
+        elapsed: workingKey === undefined || paused ? duration : 0,
+      };
+      if (workingKey !== undefined) s.entrance.elapsed = ENTRANCE_SECONDS;
+    }
+    if (config.idle || workingKey === undefined) s.working.elapsed = duration;
+    s.expression ??= s.face ?? target;
+    s.face ??= target;
+    s.gaze ??= gazeAngles(appearance, s.phase, target, s.wander.point);
+    const frozen = paused || reduced || config.motion === 0;
+    if (reduced || config.motion === 0) {
+      s.entrance.elapsed = ENTRANCE_SECONDS;
+      s.working.elapsed = duration;
+    }
+    if (frozen) {
+      s.shapeMorph = { started: 0, active: false };
+      s.face = target;
+      s.expression = target;
+      s.velocity = {};
+      if (!paused || config.lookAt !== 'wander')
+        s.gaze = gazeAngles(appearance, s.phase, target, s.wander.point);
+    }
+    const draw = () => {
+      const context = new DrawingContext();
+      drawAvatar(
+        context,
+        appearance,
+        s.phase,
+        s.face!,
+        s.gaze!,
+        size,
+        s.entrance.elapsed,
+        s.working.elapsed,
+        frozen ? undefined : s.shapeMorph,
+        cycles,
+        backingSize,
+      );
+      setDrawing(context);
+    };
+    let frame = 0,
+      last = 0,
+      visible = true,
+      active = AppState.currentState !== 'background',
+      transitioning = true;
+    const tick = (now: number) => {
+      if (!last) last = now;
+      if (now - last >= (transitioning ? 16 : 32)) {
+        if (visible && active) {
+          const milliseconds = Math.min(now - last, 64),
+            seconds = milliseconds / 1000;
+          s.entrance.elapsed = Math.min(
+            ENTRANCE_SECONDS,
+            s.entrance.elapsed + seconds,
+          );
+          s.working.elapsed = Math.min(duration, s.working.elapsed + seconds);
+          const base = easeFace(
+            s.expression ?? target,
+            target,
+            s.velocity,
+            seconds,
+          );
+          s.expression = base;
+          transitioning =
+            (Object.keys(target) as (keyof FaceRig)[]).some(
+              (key) => base[key] !== target[key],
+            ) || s.shapeMorph.active;
+          s.face =
+            config.family === 'fold' || base.smile > 0.2
+              ? advanceAttention(
+                  s.attention,
+                  (seconds * 8) / config.duration,
+                  base,
+                  appearance,
+                )
+              : base;
+          s.face.blink = config.idle ? 1 : advanceBlink(s.blink, seconds);
+          transitioning ||= s.blink.blinking;
+          s.phase = (s.phase + (seconds * TAU) / config.duration) % TAU;
+          if (!config.idle && config.lookAt === 'wander')
+            advanceWander(
+              s.wander,
+              (seconds * 8) / config.duration,
+              config.family === 'fold',
+            );
+          const aim = gazeAngles(appearance, s.phase, s.face, s.wander.point),
+            ease = 1 - Math.exp(-milliseconds / 85);
+          s.gaze = [
+            s.gaze![0] + (aim[0] - s.gaze![0]) * ease,
+            s.gaze![1] + (aim[1] - s.gaze![1]) * ease,
+          ];
+          draw();
+        }
+        last = now;
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    const subscription = AppState.addEventListener('change', (next) => {
+      active = next === 'active';
+      last = 0;
+    });
+    let observer: IntersectionObserver | undefined;
+    if (
+      Platform.OS === 'web' &&
+      typeof IntersectionObserver !== 'undefined' &&
+      root.current instanceof Element
+    ) {
+      observer = new IntersectionObserver((entries) => {
+        visible = entries[0]?.isIntersecting ?? true;
+      });
+      observer.observe(root.current);
+    }
+    draw();
+    if (!frozen) frame = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frame);
+      subscription?.remove?.();
+      observer?.disconnect();
+    };
+  }, [
+    config,
+    size,
+    backingSize,
+    paused,
+    reduced,
+    entranceKey,
+    workingKey,
+    workingCycles,
+  ]);
+  return (
+    <StyledView
+      ref={root}
+      className={className}
+      style={[{ width: size, height: size, maxWidth: '100%' }, style]}
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel ?? label ?? messages.label}
+      testID={testID}
+    >
+      <Drawing context={drawing} size={size} />
+    </StyledView>
+  );
+}

package/src/agent-avatar/AgentFace.tsx

@@ -0,0 +1,20 @@
+import { DrawingContext } from './drawing';
+import { drawFace, expressionRig } from './face';
+import type { AvatarConfig } from './model';
+import { Drawing } from './SvgDrawing';
+
+/** Face-only artwork used by the emotion selector. */
+export function AgentFace({
+  config,
+  size = 34,
+}: {
+  config: AvatarConfig;
+  size?: number;
+}) {
+  const context = new DrawingContext();
+  context.translate(100, 100 + (2 * 200) / size);
+  // The original emotion chip scales 200px artwork by .36 within its 34px slot.
+  context.scale((0.36 * 200) / size, (0.36 * 200) / size);
+  drawFace(context, config, 0, expressionRig(config), [0, 0], 200);
+  return <Drawing context={context} size={size} />;
+}

package/src/agent-avatar/SvgDrawing.tsx

@@ -0,0 +1,237 @@
+import { useId, type ReactNode } from 'react';
+import Svg, {
+  ClipPath,
+  Defs,
+  G,
+  Image,
+  LinearGradient,
+  Path,
+  Pattern,
+  RadialGradient,
+  Stop,
+  Text,
+} from 'react-native-svg';
+import { StyledView } from '../styles/styled-primitives';
+import {
+  DrawingGradient,
+  DrawingMatrix,
+  type DrawingContext,
+  type DrawingNode,
+  type DrawingPaint,
+} from './drawing';
+import { GRAIN_URI } from './grain';
+
+/** Native SVG stops require a separate alpha; alpha-bearing colors silently lose it. */
+export function splitPaint(value: string): { color: string; opacity: number } {
+  const match = /^hsla?\(([^)]+)\)$/.exec(value);
+  if (!match) return { color: value, opacity: 1 };
+  const [h = 0, s = 0, l = 0, opacity = 1] = match[1]!
+    .split(',')
+    .map(Number.parseFloat);
+  const hue = (((h % 360) + 360) % 360) / 360,
+    sat = s / 100,
+    light = l / 100;
+  const a = sat * Math.min(light, 1 - light);
+  const channel = (n: number) => {
+    const k = (n + hue * 12) % 12;
+    return Math.round(
+      255 * (light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))),
+    );
+  };
+  return { color: `rgb(${channel(0)},${channel(8)},${channel(4)})`, opacity };
+}
+function inverse(m: DrawingMatrix) {
+  const determinant = m.a * m.d - m.b * m.c;
+  if (Math.abs(determinant) < 1e-10) return new DrawingMatrix();
+  return new DrawingMatrix([
+    m.d / determinant,
+    -m.b / determinant,
+    -m.c / determinant,
+    m.a / determinant,
+    (m.c * m.f - m.d * m.e) / determinant,
+    (m.b * m.e - m.a * m.f) / determinant,
+  ]);
+}
+
+/** Render the original drawing command stream on native and web with the same SVG primitives. */
+function DrawingLayer({ nodes, size }: { nodes: DrawingNode[]; size: number }) {
+  const prefix = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+  const definitions: ReactNode[] = [];
+  const artwork = nodes.map((node, index) => {
+    if (node.globalAlpha <= 0) return null;
+    const id = `${prefix}-${index}`;
+    const paint = (value: DrawingPaint) => {
+      if (typeof value === 'string') return splitPaint(value);
+      if (!(value instanceof DrawingGradient)) {
+        const grain = `${id}-grain`;
+        definitions.push(
+          <Pattern
+            key={grain}
+            id={grain}
+            patternUnits="userSpaceOnUse"
+            width={192}
+            height={192}
+          >
+            <Image href={GRAIN_URI} width={192} height={192} />
+          </Pattern>,
+        );
+        return { color: `url(#${grain})`, opacity: 1 };
+      }
+      const gradientId = `${id}-gradient`;
+      const coordinates = value.coordinates;
+      const stops = value.stops.map((stop, i) => {
+        const color = splitPaint(stop.color);
+        return (
+          <Stop
+            key={i}
+            offset={stop.offset}
+            stopColor={color.color}
+            stopOpacity={color.opacity}
+          />
+        );
+      });
+      const transform = inverse(node.matrix).multiply(value.matrix).toString();
+      definitions.push(
+        value.kind === 'linear' ? (
+          <LinearGradient
+            key={gradientId}
+            id={gradientId}
+            gradientUnits="userSpaceOnUse"
+            x1={coordinates[0]}
+            y1={coordinates[1]}
+            x2={coordinates[2]}
+            y2={coordinates[3]}
+            gradientTransform={transform}
+          >
+            {stops}
+          </LinearGradient>
+        ) : (
+          <RadialGradient
+            key={gradientId}
+            id={gradientId}
+            gradientUnits="userSpaceOnUse"
+            fx={coordinates[0]}
+            fy={coordinates[1]}
+            cx={coordinates[3]}
+            cy={coordinates[4]}
+            r={coordinates[5]}
+            gradientTransform={transform}
+          >
+            {stops}
+          </RadialGradient>
+        ),
+      );
+      return { color: `url(#${gradientId})`, opacity: 1 };
+    };
+    const color = paint(node.stroke ? node.strokeStyle : node.fillStyle);
+    let result: ReactNode =
+      node.text !== undefined ? (
+        <Text
+          x={node.x}
+          y={node.y}
+          fontSize={Number.parseFloat(
+            /([\d.]+)px/.exec(node.font)?.[1] ?? '10',
+          )}
+          fontWeight={/^(\d+)/.exec(node.font)?.[1] ?? 'normal'}
+          fontFamily={node.font.replace(/^.*?px\s+/, '')}
+          textAnchor={
+            node.textAlign === 'center'
+              ? 'middle'
+              : node.textAlign === 'right'
+                ? 'end'
+                : 'start'
+          }
+          alignmentBaseline={
+            node.textBaseline === 'middle' ? 'central' : 'baseline'
+          }
+          fill={color.color}
+          fillOpacity={color.opacity}
+        >
+          {node.text}
+        </Text>
+      ) : (
+        <Path
+          d={node.path?.toString()}
+          fill={node.stroke ? 'none' : color.color}
+          fillOpacity={color.opacity}
+          stroke={node.stroke ? color.color : undefined}
+          strokeOpacity={color.opacity}
+          strokeWidth={node.lineWidth}
+          strokeLinecap={node.lineCap}
+        />
+      );
+    result = (
+      <G transform={node.matrix.toString()} opacity={node.globalAlpha}>
+        {result}
+      </G>
+    );
+    node.clips.forEach((clip, i) => {
+      const clipId = `${id}-clip-${i}`;
+      definitions.push(
+        <ClipPath key={clipId} id={clipId}>
+          <Path d={clip.toString()} />
+        </ClipPath>,
+      );
+      result = <G clipPath={`url(#${clipId})`}>{result}</G>;
+    });
+    return <G key={id}>{result}</G>;
+  });
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      accessible={false}
+      aria-hidden={true}
+    >
+      <Defs>{definitions}</Defs>
+      {artwork}
+    </Svg>
+  );
+}
+
+/** Preserve Canvas compositing between consecutive drawing operations. RN's View
+ * implements soft-light on iOS/Fabric and Android 10+, and RNW emits the same CSS.
+ * Isolation keeps grain from blending with the application's background. */
+export function Drawing({
+  context,
+  size,
+}: {
+  context: DrawingContext;
+  size: number;
+}) {
+  const layers: { blend: 'normal' | 'soft-light'; nodes: DrawingNode[] }[] = [];
+  for (const node of context.nodes) {
+    const blend =
+      node.globalCompositeOperation === 'soft-light' ? 'soft-light' : 'normal';
+    let layer = layers[layers.length - 1];
+    if (!layer || layer.blend !== blend) {
+      layer = { blend, nodes: [] };
+      layers.push(layer);
+    }
+    layer.nodes.push(node);
+  }
+  return (
+    <StyledView
+      pointerEvents="none"
+      style={{ width: size, height: size, isolation: 'isolate' }}
+    >
+      {layers.map((layer, index) => (
+        <StyledView
+          key={index}
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: size,
+            height: size,
+            mixBlendMode: layer.blend,
+          }}
+        >
+          <DrawingLayer nodes={layer.nodes} size={size} />
+        </StyledView>
+      ))}
+    </StyledView>
+  );
+}