@oxy.so/bloom 6.3.0 → 7.0.0

package/src/agent-avatar/shape-morph.ts

@@ -0,0 +1,210 @@
+import { DrawingPath } from './drawing';
+import type { AvatarConfig } from './model';
+
+type Point = [number, number];
+type RecordedPath = DrawingPath & { contour: Point[] };
+export type PaperGeometry = {
+  paper: RecordedPath;
+  back: RecordedPath;
+  crease: RecordedPath;
+  sx: number;
+  gazeX: number;
+  gazeY: number;
+  faceInset: number;
+  faceY: number;
+};
+type SampledGeometry = Omit<PaperGeometry, 'paper' | 'back' | 'crease'> & {
+  paper: Point[];
+  back: Point[];
+  crease: Point[];
+};
+export type ShapeMorph = {
+  shape?: AvatarConfig['foldShape'];
+  last?: PaperGeometry;
+  resolved?: SampledGeometry;
+  from?: SampledGeometry;
+  started: number;
+  active: boolean;
+};
+export const SHAPE_MORPH_MS = 480;
+
+/** Keep lightweight contour samples alongside the native path; no canvas readback. */
+export function recordingPath(record = true): RecordedPath {
+  const path = new DrawingPath() as RecordedPath;
+  if (!record) {
+    path.contour = [];
+    return path;
+  }
+  const commands: number[][] = [];
+  let contour: Point[] | undefined;
+  const move = path.moveTo.bind(path),
+    line = path.lineTo.bind(path),
+    curve = path.bezierCurveTo.bind(path);
+  path.moveTo = (x, y) => {
+    move(x, y);
+    commands.push([0, x, y]);
+  };
+  path.lineTo = (x, y) => {
+    line(x, y);
+    commands.push([1, x, y]);
+  };
+  path.bezierCurveTo = (x1, y1, x2, y2, x3, y3) => {
+    curve(x1, y1, x2, y2, x3, y3);
+    commands.push([2, x1, y1, x2, y2, x3, y3]);
+  };
+  // Normal wandering draws only native curves. Sample their contours lazily,
+  // during the half-second morph, instead of allocating points every frame.
+  Object.defineProperty(path, 'contour', {
+    get() {
+      if (contour) return contour;
+      contour = [];
+      for (const [kind, x1, y1, x2, y2, x3, y3] of commands as [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+      ][]) {
+        if (kind !== 2) {
+          contour.push([x1, y1]);
+          continue;
+        }
+        const a = contour[contour.length - 1] ?? [0, 0];
+        for (let i = 1; i <= 12; i++) {
+          const t = i / 12,
+            u = 1 - t;
+          contour.push([
+            u ** 3 * a[0] +
+              3 * u * u * t * x1 +
+              3 * u * t * t * x2 +
+              t ** 3 * x3,
+            u ** 3 * a[1] +
+              3 * u * u * t * y1 +
+              3 * u * t * t * y2 +
+              t ** 3 * y3,
+          ]);
+        }
+      }
+      return contour;
+    },
+  });
+  return path;
+}
+
+/** Match outlines by bearing, so tips grow outwards without twisting the paper. */
+export function radialContour(points: Point[], count = 160): Point[] {
+  return Array.from({ length: count }, (_, index) => {
+    const angle = -Math.PI / 2 + (index / count) * Math.PI * 2,
+      dx = Math.cos(angle),
+      dy = Math.sin(angle);
+    let radius = 0;
+    for (let i = 0; i < points.length; i++) {
+      const a = points[i]!,
+        b = points[(i + 1) % points.length]!,
+        ex = b[0] - a[0],
+        ey = b[1] - a[1];
+      const denominator = dx * ey - dy * ex;
+      if (Math.abs(denominator) < 1e-9) continue;
+      const r = (a[0] * ey - a[1] * ex) / denominator;
+      const t = (a[0] * dy - a[1] * dx) / denominator;
+      if (r >= 0 && t >= -1e-7 && t <= 1 + 1e-7) radius = Math.max(radius, r);
+    }
+    return [dx * radius, dy * radius];
+  });
+}
+function openContour(points: Point[], count = 48): Point[] {
+  return Array.from({ length: count }, (_, i) => {
+    const at = (i / (count - 1)) * (points.length - 1),
+      index = Math.floor(at),
+      t = at - index;
+    const a = points[index]!,
+      b = points[Math.min(index + 1, points.length - 1)]!;
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  });
+}
+function sample(g: PaperGeometry): SampledGeometry {
+  return {
+    ...g,
+    paper: radialContour(g.paper.contour),
+    back: radialContour(g.back.contour),
+    crease: openContour(g.crease.contour),
+  };
+}
+function trace(points: Point[], closed: boolean): RecordedPath {
+  const path = new DrawingPath() as RecordedPath;
+  path.contour = points;
+  path.moveTo(...points[0]!);
+  for (let i = 0; i < points.length - (closed ? 0 : 1); i++) {
+    const point = (n: number) =>
+      points[
+        closed
+          ? (n + points.length) % points.length
+          : Math.min(points.length - 1, Math.max(0, n))
+      ]!;
+    const a = point(i - 1),
+      b = point(i),
+      c = point(i + 1),
+      d = point(i + 2);
+    path.bezierCurveTo(
+      b[0] + (c[0] - a[0]) / 6,
+      b[1] + (c[1] - a[1]) / 6,
+      c[0] - (d[0] - b[0]) / 6,
+      c[1] - (d[1] - b[1]) / 6,
+      ...c,
+    );
+  }
+  if (closed) path.closePath();
+  return path;
+}
+export function morphEase(progress: number) {
+  const t = Math.max(0, Math.min(1, progress));
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+/** Retarget from the last rendered contour, including during a rapid second selection. */
+export function morphPaper(
+  target: PaperGeometry,
+  state: ShapeMorph,
+  shape: AvatarConfig['foldShape'],
+  now: number,
+): PaperGeometry {
+  if (state.shape !== shape) {
+    state.from =
+      state.resolved ?? (state.last ? sample(state.last) : undefined);
+    state.started = now;
+    state.shape = shape;
+  }
+  state.last = target;
+  const progress = (now - state.started) / SHAPE_MORPH_MS;
+  state.active = !!state.from && progress < 1;
+  if (!state.active || !state.from) {
+    state.from = undefined;
+    state.resolved = undefined;
+    return target;
+  }
+  const destination = sample(target),
+    from = state.from,
+    t = morphEase(progress);
+  const lerp = (a: number, b: number) => a + (b - a) * t;
+  const points = (a: Point[], b: Point[]): Point[] =>
+    a.map((p, i) => [lerp(p[0], b[i]![0]), lerp(p[1], b[i]![1])]);
+  const result: SampledGeometry = {
+    paper: points(from.paper, destination.paper),
+    back: points(from.back, destination.back),
+    crease: points(from.crease, destination.crease),
+    sx: lerp(from.sx, destination.sx),
+    gazeX: lerp(from.gazeX, destination.gazeX),
+    gazeY: lerp(from.gazeY, destination.gazeY),
+    faceInset: lerp(from.faceInset, destination.faceInset),
+    faceY: lerp(from.faceY, destination.faceY),
+  };
+  state.resolved = result;
+  return {
+    ...result,
+    paper: trace(result.paper, true),
+    back: trace(result.back, true),
+    crease: trace(result.crease, false),
+  };
+}

package/src/agent-avatar/types.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AvatarConfig } from './model';
+
+export type AgentAvatarProps = {
+  config: AvatarConfig;
+  size?: number;
+  paused?: boolean;
+  label?: string;
+  locale?: string;
+  /** Compatibility options reserved by the original artwork. */
+  interactive?: boolean;
+  portrait?: boolean;
+  entranceKey?: number;
+  workingKey?: number;
+  workingCycles?: number;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+export type AvatarProps = AgentAvatarProps;

package/src/agent-avatar/wander.ts

@@ -0,0 +1,97 @@
+export type GazePoint = [number, number];
+
+export type WanderState = {
+  seed: number;
+  from: GazePoint;
+  target: GazePoint;
+  point: GazePoint;
+  elapsed: number;
+  travel: number;
+  hold: number;
+};
+
+function random(state: WanderState) {
+  state.seed = (Math.imul(state.seed, 1664525) + 1013904223) >>> 0;
+  return state.seed / 4294967296;
+}
+
+export function createWander(seed: number, attentive = false): WanderState {
+  const state: WanderState = {
+    seed,
+    from: [0, 0],
+    target: [0, 0],
+    point: [0, 0],
+    elapsed: 0,
+    travel: 0.2,
+    hold: 0,
+  };
+  state.hold = attentive
+    ? 0.35 + random(state) * 0.55
+    : 0.4 + random(state) * 1.3;
+  return state;
+}
+
+/** Runs on active animation time, so pausing or hiding the avatar freezes its gaze. */
+export function advanceWander(
+  state: WanderState,
+  seconds: number,
+  attentive = false,
+): GazePoint {
+  state.elapsed += Math.max(0, seconds);
+  while (state.elapsed >= state.travel + state.hold) {
+    state.elapsed -= state.travel + state.hold;
+    state.from = state.target;
+    if (attentive) {
+      // Most changes are nearby checking glances; broad looks are occasional.
+      const nearby = random(state) < 0.68;
+      const clamp = (v: number) => Math.max(-0.9, Math.min(0.9, v));
+      state.target = nearby
+        ? [
+            clamp(state.from[0] * 0.72 + (random(state) - 0.5) * 0.85),
+            clamp(state.from[1] * 0.72 + (random(state) - 0.5) * 0.7),
+          ]
+        : [(random(state) * 2 - 1) * 0.9, (random(state) * 2 - 1) * 0.8];
+      state.travel =
+        0.38 +
+        random(state) * 0.24 +
+        Math.hypot(
+          state.target[0] - state.from[0],
+          state.target[1] - state.from[1],
+        ) *
+          0.22;
+      state.hold = 0.45 + random(state) * 1.05;
+      continue;
+    }
+    const range = random(state) < 0.24 ? 0.2 : 1;
+    let next: GazePoint = [0, 0];
+    for (let attempt = 0; attempt < 4; attempt++) {
+      next = [(random(state) * 2 - 1) * range, (random(state) * 2 - 1) * range];
+      if (Math.hypot(next[0] - state.from[0], next[1] - state.from[1]) > 0.3)
+        break;
+    }
+    state.target = next;
+    state.travel = 0.16 + random(state) * 0.3;
+    // A quick checking glance sometimes interrupts the longer, relaxed holds.
+    state.hold =
+      random(state) < 0.2
+        ? 0.25 + random(state) * 0.45
+        : 1 + random(state) * 2.6;
+  }
+  const t = Math.min(state.elapsed / state.travel, 1);
+  const ease = t * t * (3 - 2 * t);
+  state.point = [
+    state.from[0] + (state.target[0] - state.from[0]) * ease,
+    state.from[1] + (state.target[1] - state.from[1]) * ease,
+  ];
+  if (attentive && state.elapsed > state.travel) {
+    // Tiny adjustments during a hold, easing to zero at either end.
+    const holdProgress = (state.elapsed - state.travel) / state.hold;
+    const envelope = Math.sin(holdProgress * Math.PI) ** 2 * 0.035;
+    const offset = state.seed % 97;
+    state.point = [
+      state.point[0] + Math.sin(holdProgress * 3 + offset) * envelope,
+      state.point[1] + Math.cos(holdProgress * 2 + offset) * envelope,
+    ];
+  }
+  return state.point;
+}

package/src/agent-avatar/working.ts

@@ -0,0 +1,20 @@
+export const WORKING_SECONDS = 1.15;
+
+const smooth = (value: number) => {
+  const t = Math.max(0, Math.min(1, value));
+  return t * t * t * (t * (t * 6 - 15) + 10);
+};
+
+/** One little hop and a full turn, then back to the existing gaze and pose. */
+export function workingPose(seconds: number, cycles = 1) {
+  const duration = WORKING_SECONDS * cycles;
+  const elapsed =
+    seconds >= duration
+      ? WORKING_SECONDS
+      : Math.max(0, seconds) % WORKING_SECONDS;
+  const t = Math.max(0, Math.min(1, elapsed / WORKING_SECONDS));
+  const turn = smooth((t - 0.08) / 0.84) * Math.PI * 2;
+  const lift = Math.sin(Math.PI * smooth((t - 0.12) / 0.72)) ** 2;
+  const anticipation = t < 0.18 ? Math.sin((Math.PI * t) / 0.18) ** 2 * 2 : 0;
+  return { turn, y: anticipation - lift * 9, tilt: Math.sin(turn) * -0.055 };
+}

package/src/agent-chat/AgentChatMessage.tsx

@@ -309,3 +309,10 @@ export function AgentChatMessage({
   );
 }
 AgentChatMessage.displayName = 'AgentChatMessage';
+
+/** Paragraph reveal shared by conversation surfaces. Each line enters only once. */
+export function StreamedText({text,paragraphs=false}:{text:string;paragraphs?:boolean}) {
+  const reduced=useReducedMotion(), palette=useAgentChatPalette();
+  const lines=text.split('\n').filter(line=>line.trim()!=='');
+  return <View style={{gap:paragraphs?12:0}}>{lines.map((line,index)=><Line key={index} text={line} color={palette.text} animate={!reduced}/>)}</View>;
+}

package/src/agent-creator/AgentCreator.tsx

@@ -0,0 +1,32 @@
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '../select';
+import { AgentCreatorBase } from './AgentCreatorBase';
+import { AgentCreatorContext } from './context';
+import type { AgentCreatorProps } from './types';
+const bindings = {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectIcon,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+};
+export function AgentCreator(props: AgentCreatorProps) {
+  return (
+    <AgentCreatorContext.Provider value={bindings}>
+      <AgentCreatorBase {...props} />
+    </AgentCreatorContext.Provider>
+  );
+}

package/src/agent-creator/AgentCreator.web.tsx

@@ -0,0 +1,32 @@
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.web';
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '../select/index.web';
+import { AgentCreatorBase } from './AgentCreatorBase';
+import { AgentCreatorContext } from './context';
+import type { AgentCreatorProps } from './types';
+const bindings = {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectIcon,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+};
+export function AgentCreator(props: AgentCreatorProps) {
+  return (
+    <AgentCreatorContext.Provider value={bindings}>
+      <AgentCreatorBase {...props} />
+    </AgentCreatorContext.Provider>
+  );
+}