react-native-ai-animations 0.8.1 → 0.9.1

package/lib/typescript/src/skia/media-generating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-generating.d.ts","sourceRoot":"","sources":["../../../../src/skia/media-generating.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"media-generating.d.ts","sourceRoot":"","sources":["../../../../src/skia/media-generating.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/skia/voice-wave.d.ts

@@ -3,12 +3,12 @@ import { type SharedValue } from "react-native-reanimated";
 export type VoiceWaveVariant = "lines" | "bars" | "dots" | "pulse";
 export type VoiceWaveProps = {
     level: SharedValue<number>;
-    colors: [string, string, string];
+    colors?: [string, string, string];
     variant?: VoiceWaveVariant;
     height?: number;
     style?: StyleProp<ViewStyle>;
 };
-export declare function VoiceWave({ level, colors, variant, height, style }: VoiceWaveProps): import("react").JSX.Element;
+export declare function VoiceWave({ level, colors: colorsProp, variant, height, style }: VoiceWaveProps): import("react").JSX.Element;
 export type VoiceWaveStyleProps = Omit<VoiceWaveProps, "variant">;
 export declare function VoiceWaveLines(props: VoiceWaveStyleProps): import("react").JSX.Element;
 export declare function VoiceWaveBars(props: VoiceWaveStyleProps): import("react").JSX.Element;

package/lib/typescript/src/skia/voice-wave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"voice-wave.d.ts","sourceRoot":"","sources":["../../../../src/skia/voice-wave.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,KAAK,WAAW,EAAuE,MAAM,yBAAyB,CAAC;AAwBhI,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAuIF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAiB,EAAE,MAAuB,EAAE,KAAK,EAAE,EAAE,cAAc,+BA0B7G;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAElE,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAExD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,+BAEvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,+BAEvD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAExD"}
+{"version":3,"file":"voice-wave.d.ts","sourceRoot":"","sources":["../../../../src/skia/voice-wave.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAE,KAAK,WAAW,EAAuE,MAAM,yBAAyB,CAAC;AA2BhI,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAuIF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAiB,EAAE,MAAuB,EAAE,KAAK,EAAE,EAAE,cAAc,+BA4BzH;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAElE,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAExD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,+BAEvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,+BAEvD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAExD"}

package/lib/typescript/src/text/shimmer-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shimmer-text.d.ts","sourceRoot":"","sources":["../../../../src/text/shimmer-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA0B1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAA8B,EAC9B,QAA2B,EAC3B,cAAwC,EACxC,KAAS,EACT,SAAiB,GAClB,EAAE,gBAAgB,+BA2DlB"}
+{"version":3,"file":"shimmer-text.d.ts","sourceRoot":"","sources":["../../../../src/text/shimmer-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA2B1E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,WAAW,EACX,UAAU,EACV,SAA8B,EAC9B,QAA2B,EAC3B,cAAwC,EACxC,KAAS,EACT,SAAiB,GAClB,EAAE,gBAAgB,+BAgFlB"}

package/lib/typescript/src/text/spoken-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spoken-text.d.ts","sourceRoot":"","sources":["../../../../src/text/spoken-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAKtD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,SAA8B,EAC9B,WAAW,EACX,WAAW,EACX,aAAa,EACb,KAAgB,EAChB,MAAM,EACN,KAAK,GACN,EAAE,eAAe,+BAqCjB"}
+{"version":3,"file":"spoken-text.d.ts","sourceRoot":"","sources":["../../../../src/text/spoken-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1F,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAKtD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,SAA8B,EAC9B,WAAW,EACX,WAAW,EACX,aAAa,EACb,KAAgB,EAChB,MAAM,EACN,KAAK,GACN,EAAE,eAAe,+BAyCjB"}

package/lib/typescript/src/text/streaming-text.d.ts

@@ -7,10 +7,10 @@ export type StreamingTextProps = {
     textStyle?: StyleProp<TextStyle>;
     paragraphGap?: number;
     fadeDuration?: number;
-    rise?: number;
     caret?: boolean | ReactNode;
+    selectable?: boolean;
     colors?: Partial<MotionPalette>;
     style?: StyleProp<ViewStyle>;
 };
-export declare function StreamingText({ text, streaming, textStyle, paragraphGap, fadeDuration, rise, caret, colors, style, }: StreamingTextProps): import("react").JSX.Element;
+export declare function StreamingText({ text, streaming, textStyle, paragraphGap, fadeDuration, caret, selectable, colors, style, }: StreamingTextProps): import("react").JSX.Element;
 //# sourceMappingURL=streaming-text.d.ts.map

package/lib/typescript/src/text/streaming-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"streaming-text.d.ts","sourceRoot":"","sources":["../../../../src/text/streaming-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAWtG,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAQtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AASF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAA8B,EAC9B,YAAiB,EACjB,YAA2B,EAC3B,IAAmB,EACnB,KAAY,EACZ,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,+BA4CpB"}
+{"version":3,"file":"streaming-text.d.ts","sourceRoot":"","sources":["../../../../src/text/streaming-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAA2C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUvH,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAkB,CAAC;AAQtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AA+DF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAA8B,EAC9B,YAAiB,EACjB,YAA2B,EAC3B,KAAY,EACZ,UAAkB,EAClB,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,+BA2EpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ai-animations",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Animated React Native and Expo components for AI chat apps: streaming text, shimmer loading text, thinking and status indicators, voice orbs and waveforms, image and video generation loaders, question cards and reasoning effort bars. Built on Reanimated and Skia.",
   "license": "MIT",
   "author": "Ahmet Kar",

package/src/chat/effort-bar.tsx

@@ -20,7 +20,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
-import { withAlpha } from "../internal/color";
+import { mixColors, withAlpha } from "../internal/color";
 import { type MotionPalette } from "../theme/palette";
 import { useMotionPalette } from "../theme/provider";
 
@@ -36,6 +36,7 @@ const SLIDER_TAB = 28;
 const SLIDER_TAB_RADIUS = 10;
 const SLIDER_SHOULDER = 8;
 const COMPACT_SLIDER_KNOB = 10;
+const DRAG_SLOP = 4;
 
 export type EffortBarVariant = "bars" | "track" | "segmented" | "slider";
 
@@ -66,16 +67,6 @@ function normalize(level: EffortLevel): { key?: string; label: string; descripti
   return typeof level === "string" ? { label: level } : level;
 }
 
-function mix(a: string, b: string, t: number) {
-  const parse = (hex: string) => {
-    const clean = hex.replace("#", "");
-    return [0, 2, 4].map((offset) => parseInt(clean.slice(offset, offset + 2), 16));
-  };
-  const from = parse(a);
-  const to = parse(b);
-  const channel = (index: number) => Math.round(from[index] + (to[index] - from[index]) * t).toString(16).padStart(2, "0");
-  return `#${channel(0)}${channel(1)}${channel(2)}`;
-}
 
 function spread(stops: string[], count: number) {
   if (count <= 1) return [stops[stops.length - 1]];
@@ -86,7 +77,7 @@ function spread(stops: string[], count: number) {
     const high = Math.min(stops.length - 1, low + 1);
     const a = stops[low];
     const b = stops[high];
-    return a.startsWith("#") && b.startsWith("#") ? mix(a, b, position - low) : position - low < 0.5 ? a : b;
+    return mixColors(a, b, position - low);
   });
 }
 
@@ -116,7 +107,7 @@ export function EffortBar({
   const reduceMotion = useReducedMotion();
   const items = useMemo(() => levels.map(normalize), [levels]);
   const count = Math.max(1, items.length);
-  const index = Math.min(count - 1, Math.max(0, value));
+  const index = Math.min(count - 1, Math.max(0, Number.isFinite(value) ? Math.round(value) : 0));
   const current = items[index];
   const compact = size === "compact";
   const stops = fillColors && fillColors.length > 0 ? fillColors : undefined;
@@ -132,6 +123,8 @@ export function EffortBar({
   const lastIndex = useRef(index);
   const indexRef = useRef(index);
   const dragging = useRef(false);
+  const moved = useRef(false);
+  const startX = useRef(0);
   const interactive = !!onChange && !disabled;
   indexRef.current = index;
 
@@ -160,14 +153,15 @@ export function EffortBar({
     onChange?.(next, { index: next, label: item.label, value: item.value, budget: item.budget });
   };
 
-  const pick = (x: number, grant: boolean) => {
+  const pick = (x: number, mode: "start" | "move" | "tap") => {
     if (!interactive || width === 0) return;
     let next: number;
     if (variant === "slider") {
       const position = Math.min(1, Math.max(0, (x - knobInset - knobSize / 2) / Math.max(1, width - knobInset * 2 - knobSize)));
-      dragging.current = true;
-      knob.value = reduceMotion || !grant ? position : withSpring(position, GRAB_SPRING);
-      if (grant && !reduceMotion) pressed.value = withSpring(1, GRAB_SPRING);
+      if (mode !== "tap") {
+        dragging.current = true;
+        knob.value = reduceMotion || mode === "move" ? position : withSpring(position, GRAB_SPRING);
+      }
       next = Math.round(position * (count - 1));
     } else {
       next = Math.min(count - 1, Math.max(0, Math.floor((x / width) * count)));
@@ -176,15 +170,34 @@ export function EffortBar({
     lastIndex.current = next;
     select(next);
   };
-  const pickRef = useRef(pick);
-  pickRef.current = pick;
 
-  const release = () => {
+  const grant = (x: number) => {
+    startX.current = x;
+    moved.current = false;
+    lastIndex.current = indexRef.current;
+    if (variant === "slider" && !reduceMotion) pressed.value = withSpring(1, GRAB_SPRING);
+  };
+  const grantRef = useRef(grant);
+  grantRef.current = grant;
+
+  const move = (x: number, dx: number) => {
+    if (!moved.current && Math.abs(dx) < DRAG_SLOP) return;
+    const first = !moved.current;
+    moved.current = true;
+    pick(x, first ? "start" : "move");
+  };
+  const moveRef = useRef(move);
+  moveRef.current = move;
+
+  const release = (commit: boolean) => {
+    const tap = commit && !moved.current;
+    moved.current = false;
+    if (tap) pick(startX.current, "tap");
+    if (variant === "slider") pressed.value = reduceMotion ? 0 : withSpring(0, LEVEL_SPRING);
     if (!dragging.current) return;
     dragging.current = false;
     const target = count > 1 ? indexRef.current / (count - 1) : 0;
     knob.value = reduceMotion ? target : withSpring(target, LEVEL_SPRING);
-    pressed.value = reduceMotion ? 0 : withSpring(0, LEVEL_SPRING);
   };
   const releaseRef = useRef(release);
   releaseRef.current = release;
@@ -197,12 +210,12 @@ export function EffortBar({
     () =>
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > 4,
-        onPanResponderTerminationRequest: () => false,
-        onPanResponderGrant: (event) => pickRef.current(event.nativeEvent.locationX, true),
-        onPanResponderMove: (event) => pickRef.current(event.nativeEvent.locationX, false),
-        onPanResponderRelease: () => releaseRef.current(),
-        onPanResponderTerminate: () => releaseRef.current(),
+        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > DRAG_SLOP,
+        onPanResponderTerminationRequest: () => !moved.current,
+        onPanResponderGrant: (event) => grantRef.current(event.nativeEvent.locationX),
+        onPanResponderMove: (event, gesture) => moveRef.current(event.nativeEvent.locationX, gesture.dx),
+        onPanResponderRelease: () => releaseRef.current(true),
+        onPanResponderTerminate: () => releaseRef.current(false),
       }),
     [],
   );

package/src/chat/question-card.tsx

@@ -333,7 +333,7 @@ export const QuestionCard = forwardRef<QuestionCardHandle, QuestionCardProps>(fu
   const padding: ViewStyle = sheet
     ? { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 16 }
     : { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 12 };
-  const showFooter = kind === "multiple" && draft.selected.length > 0;
+  const showFooter = draft.selected.length > 0 && (kind === "multiple" || (last ? !autoSubmit : !autoAdvance));
 
   return (
     <Animated.View style={[container, shellStyle, style]}>

package/src/chat/status-row.tsx

@@ -28,6 +28,7 @@ export type StatusRowProps = {
   iconSize?: number;
   active?: boolean;
   startedAt?: number;
+  seconds?: number;
   showTimer?: boolean;
   formatTimer?: (seconds: number) => string;
   textStyle?: StyleProp<TextStyle>;
@@ -43,6 +44,7 @@ export function StatusRow({
   iconSize = 18,
   active = true,
   startedAt,
+  seconds,
   showTimer = true,
   formatTimer = formatElapsed,
   textStyle = DEFAULT_TEXT_STYLE,
@@ -52,12 +54,13 @@ export function StatusRow({
 }: StatusRowProps) {
   const palette = useMotionPalette(colors);
   const reduceMotion = useReducedMotion();
-  const seconds = useElapsed(startedAt, active);
+  const elapsed = useElapsed(startedAt, active);
+  const shownSeconds = seconds ?? elapsed;
 
   return (
     <View
       accessible
-      accessibilityRole="progressbar"
+      accessibilityRole={active ? "progressbar" : "text"}
       accessibilityLabel={label}
       accessibilityState={{ busy: active }}
       style={[{ flexDirection: "row", alignItems: "center", gap: 8 }, style]}
@@ -83,9 +86,9 @@ export function StatusRow({
           )}
         </Animated.View>
       </View>
-      {showTimer && startedAt !== undefined && (
+      {showTimer && (startedAt !== undefined || seconds !== undefined) && (
         <Text style={[textStyle, { color: palette.textTertiary, fontVariant: ["tabular-nums"] }, timerStyle]}>
-          {formatTimer(seconds)}
+          {formatTimer(shownSeconds)}
         </Text>
       )}
     </View>

package/src/chat/thinking-block.tsx

@@ -126,6 +126,7 @@ export function ThinkingBlock({
   };
 
   const heading = title ?? (thinking ? copy.thinking : copy.done(totalSeconds));
+  const label = thinking && startedAt !== undefined ? `${heading} ${elapsed}s` : heading;
 
   return (
     <View style={style}>
@@ -142,13 +143,13 @@ export function ThinkingBlock({
         <Animated.View key={thinking ? "thinking" : "done"} entering={reduceMotion ? undefined : FadeIn.duration(220)}>
           {thinking && !reduceMotion ? (
             <ShimmerText
-              text={thinking && startedAt !== undefined ? `${heading} ${elapsed}s` : heading}
+              text={label}
               activeColor={palette.text}
               mutedColor={palette.textTertiary}
               textStyle={textStyle}
             />
           ) : (
-            <Text style={[textStyle, { color: palette.textSecondary }]}>{heading}</Text>
+            <Text style={[textStyle, { color: palette.textSecondary }]}>{label}</Text>
           )}
         </Animated.View>
         {hasBody && (

package/src/internal/color.ts

@@ -1,18 +1,33 @@
+import { processColor } from "react-native";
+
+type Rgba = [number, number, number, number];
+
+export function parseColor(color: string): Rgba | null {
+  const processed = processColor(color);
+  if (typeof processed !== "number") return null;
+  const argb = processed >>> 0;
+  return [(argb >>> 16) & 255, (argb >>> 8) & 255, argb & 255, (argb >>> 24) / 255];
+}
+
+function roundAlpha(value: number) {
+  return Math.round(value * 1000) / 1000;
+}
+
 export function withAlpha(color: string, alpha: number): string {
-  if (color.startsWith("rgb")) {
-    const parts = color.replace(/rgba?\(|\)/g, "").split(",").map((part) => part.trim());
-    return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+  const parsed = parseColor(color);
+  if (!parsed) return color;
+  const [red, green, blue, source] = parsed;
+  return `rgba(${red}, ${green}, ${blue}, ${roundAlpha(source * alpha)})`;
+}
+
+export function mixColors(from: string, to: string, t: number): string {
+  const a = parseColor(from);
+  const b = parseColor(to);
+  if (!a || !b) return t < 0.5 ? from : to;
+  const [red, green, blue, alpha] = a.map((value, index) => value + (b[index] - value) * t);
+  if (alpha >= 1) {
+    const hex = (value: number) => Math.round(value).toString(16).padStart(2, "0");
+    return `#${hex(red)}${hex(green)}${hex(blue)}`;
   }
-  const hex = color.replace("#", "");
-  const full =
-    hex.length === 3
-      ? hex
-          .split("")
-          .map((char) => char + char)
-          .join("")
-      : hex.slice(0, 6);
-  const r = parseInt(full.slice(0, 2), 16);
-  const g = parseInt(full.slice(2, 4), 16);
-  const b = parseInt(full.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  return `rgba(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${roundAlpha(alpha)})`;
 }

package/src/internal/graphemes.ts

@@ -0,0 +1,40 @@
+const EXTEND = /^[\p{M}\u200C\uFE00-\uFE0F\u{E0020}-\u{E007F}\u{1F3FB}-\u{1F3FF}]$/u;
+const REGIONAL = /^[\u{1F1E6}-\u{1F1FF}]$/u;
+const ZWJ = "\u200D";
+const SHAPED = /[\u0590-\u08FF\u0900-\u0DFF\u0E00-\u0FFF\u1000-\u109F\u1780-\u18AF\uA800-\uABFF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+const CJK = /^[\u2E80-\u303F\u3040-\u9FFF\uAC00-\uD7AF\uF900-\uFAFF\uFF00-\uFFEF]/;
+
+type Segmenter = { segment(text: string): Iterable<{ segment: string }> };
+type SegmenterConstructor = new (locale?: string, options?: { granularity: "grapheme" }) => Segmenter;
+
+function nativeSegmenter(): Segmenter | null {
+  const constructor = (Intl as unknown as { Segmenter?: SegmenterConstructor }).Segmenter;
+  return constructor ? new constructor(undefined, { granularity: "grapheme" }) : null;
+}
+
+export function splitGraphemes(text: string): string[] {
+  const segmenter = typeof Intl === "undefined" ? null : nativeSegmenter();
+  if (segmenter) return Array.from(segmenter.segment(text), (part) => part.segment);
+  const clusters: string[] = [];
+  let joinNext = false;
+  for (const point of text) {
+    const last = clusters.length - 1;
+    const previous = clusters[last];
+    const pairsFlag = REGIONAL.test(point) && previous !== undefined && REGIONAL.test(previous);
+    if (previous !== undefined && (joinNext || point === ZWJ || EXTEND.test(point) || pairsFlag)) {
+      clusters[last] = previous + point;
+    } else {
+      clusters.push(point);
+    }
+    joinNext = point === ZWJ;
+  }
+  return clusters;
+}
+
+export function needsShaping(text: string) {
+  return SHAPED.test(text);
+}
+
+export function isCjk(cluster: string) {
+  return CJK.test(cluster);
+}

package/src/internal/use-elapsed.ts

@@ -4,8 +4,9 @@ export function useElapsed(startedAt: number | undefined, running: boolean, inte
   const [now, setNow] = useState(() => Date.now());
 
   useEffect(() => {
-    if (!running || startedAt === undefined) return;
+    if (startedAt === undefined) return;
     setNow(Date.now());
+    if (!running) return;
     const id = setInterval(() => setNow(Date.now()), interval);
     return () => clearInterval(id);
   }, [interval, running, startedAt]);

package/src/internal/use-motion-clock.ts

@@ -0,0 +1,9 @@
+import { type SharedValue, useFrameCallback, useSharedValue } from "react-native-reanimated";
+
+export function useMotionClock(running: boolean, initial = 0): SharedValue<number> {
+  const clock = useSharedValue(initial);
+  useFrameCallback((info) => {
+    clock.value += info.timeSincePreviousFrame ?? 0;
+  }, running);
+  return clock;
+}

package/src/skia/dot-orb.tsx

@@ -1,7 +1,8 @@
-import { Canvas, Path, Skia, type SkPath, useClock } from "@shopify/react-native-skia";
+import { Canvas, Path, Skia, type SkPath } from "@shopify/react-native-skia";
 import { useEffect, useMemo } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import { Easing, useDerivedValue, useReducedMotion, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { useMotionClock } from "../internal/use-motion-clock";
 import { useMotionPalette } from "../theme/provider";
 
 export type DotOrbVariant = "orbit" | "scan" | "constellation" | "helix";
@@ -96,9 +97,9 @@ export function DotOrb({
   const reduceMotion = useReducedMotion();
   const ink = color ?? palette.text;
   const highlight = accent ?? palette.accent;
-  const clock = useClock();
-  const layout = useSharedValue({ width: size ?? 0, height: size ?? 0 });
   const still = reduceMotion || paused;
+  const clock = useMotionClock(!still);
+  const layout = useSharedValue({ width: size ?? 0, height: size ?? 0 });
   const spread = useSharedValue(scatter === true ? 1 : 0);
 
   useEffect(() => {
@@ -116,7 +117,7 @@ export function DotOrb({
   const edges = useMemo(() => (variant === "constellation" ? buildEdges(sphere, 0.6) : []), [sphere, variant]);
 
   const frame = useDerivedValue<Frame>(() => {
-    const t = (still ? STILL_TIME : clock.value) * 0.001 * speed;
+    const t = (reduceMotion ? STILL_TIME : clock.value) * 0.001 * speed;
     const width = layout.value.width;
     const height = layout.value.height;
     const cx = width / 2;

package/src/skia/matrix-orb.tsx

@@ -7,6 +7,8 @@ import {
   useReducedMotion,
   useSharedValue,
 } from "react-native-reanimated";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
 
 export type MatrixOrbState = "idle" | "listening" | "thinking";
 
@@ -24,7 +26,6 @@ const MAX_DELTA = 0.05;
 const MIN_DOTS = 3;
 const DEFAULT_DOTS = 11;
 const DEFAULT_SIZE = 240;
-const DEFAULT_COLOR = "#FFFFFF";
 
 const ORB_SPAN = 0.74;
 const ORB_DOT = 0.6;
@@ -195,6 +196,7 @@ export type MatrixOrbProps = {
   color?: string;
   stateColors?: Partial<Record<MatrixOrbState, string>>;
   dots?: number;
+  colors?: Partial<MotionPalette>;
 };
 
 export function MatrixOrb({
@@ -202,10 +204,13 @@ export function MatrixOrb({
   level,
   size = DEFAULT_SIZE,
   cover = false,
-  color = DEFAULT_COLOR,
+  color: colorProp,
   stateColors,
   dots = DEFAULT_DOTS,
+  colors,
 }: MatrixOrbProps) {
+  const palette = useMotionPalette(colors);
+  const color = colorProp ?? palette.text;
   const reduceMotion = useReducedMotion();
 
   const grid = Math.max(MIN_DOTS, Math.round(dots));

package/src/skia/media-generating.tsx

@@ -7,7 +7,6 @@ import {
   LinearGradient,
   Paint,
   Rect,
-  useClock,
   vec,
 } from "@shopify/react-native-skia";
 import { useEffect, useState, type ReactNode } from "react";
@@ -36,6 +35,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { withAlpha } from "../internal/color";
 import { formatElapsed, useElapsed } from "../internal/use-elapsed";
+import { useMotionClock } from "../internal/use-motion-clock";
 import { ShimmerText } from "../text/shimmer-text";
 import { moodstoneSwatches, type MotionPalette } from "../theme/palette";
 import { useMotionPalette } from "../theme/provider";
@@ -138,7 +138,7 @@ export function MediaGenerating({
   const seconds = useElapsed(startedAt, true);
   const copy = { ...DEFAULT_LABELS, ...labels };
   const title = status ? copy[status] : (label ?? copy.generating);
-  const headline = chrome === "header" && label && status ? label : title;
+  const headline = chrome === "header" && label && status ? (status === "queued" ? `${label} \u00B7 ${copy.queued}` : label) : title;
   const percent = progress === undefined ? undefined : Math.round(Math.min(1, Math.max(0, progress)) * 100);
   const chip = withAlpha(palette.background, 0.72);
   const showSweep = sweep ?? variant === "blobs";
@@ -241,7 +241,7 @@ type BlobFieldProps = { colors: string[]; grain: boolean; sweep: boolean; sweepC
 
 function BlobField({ colors, grain, sweep, sweepColor, still }: BlobFieldProps) {
   const size = useSharedValue({ width: 0, height: 0 });
-  const clock = useClock();
+  const clock = useMotionClock(!still);
   const time = useDerivedValue(() => (still ? 0 : clock.value), [still]);
   const canvasWidth = useDerivedValue(() => size.value.width);
   const canvasHeight = useDerivedValue(() => size.value.height);

package/src/skia/voice-wave.tsx

@@ -1,7 +1,10 @@
-import { Canvas, LinearGradient, Path, Skia, useClock, vec } from "@shopify/react-native-skia";
+import { Canvas, LinearGradient, Path, Skia, vec } from "@shopify/react-native-skia";
 import { useState } from "react";
 import { View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
 import { type SharedValue, useDerivedValue, useFrameCallback, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import { useMotionClock } from "../internal/use-motion-clock";
+import { moodstoneSwatches } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
 
 const DEFAULT_HEIGHT = 32;
 const SAMPLE_STEP = 2;
@@ -29,7 +32,7 @@ export type VoiceWaveVariant = "lines" | "bars" | "dots" | "pulse";
 
 export type VoiceWaveProps = {
   level: SharedValue<number>;
-  colors: [string, string, string];
+  colors?: [string, string, string];
   variant?: VoiceWaveVariant;
   height?: number;
   style?: StyleProp<ViewStyle>;
@@ -168,10 +171,12 @@ function Pulse({ width, height, level, clock, colors }: FieldProps) {
   );
 }
 
-export function VoiceWave({ level, colors, variant = "lines", height = DEFAULT_HEIGHT, style }: VoiceWaveProps) {
+export function VoiceWave({ level, colors: colorsProp, variant = "lines", height = DEFAULT_HEIGHT, style }: VoiceWaveProps) {
+  const palette = useMotionPalette();
+  const colors = colorsProp ?? [palette.accent, moodstoneSwatches.sky, moodstoneSwatches.mint];
   const [width, setWidth] = useState(0);
   const reduceMotion = useReducedMotion();
-  const ticking = useClock();
+  const ticking = useMotionClock(!reduceMotion);
   const clock = useDerivedValue(() => (reduceMotion ? 1200 : ticking.value), [reduceMotion]);
 
   const handleLayout = (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width);

package/src/text/shimmer-text.tsx

@@ -14,6 +14,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
+import { isCjk, needsShaping, splitGraphemes } from "../internal/graphemes";
 
 const DEFAULT_DURATION = 1400;
 const DEFAULT_HIGHLIGHT_WIDTH = 0.22;
@@ -50,20 +51,26 @@ export function ShimmerText({
 }: ShimmerTextProps) {
   const reduceMotion = useReducedMotion();
   const progress = useSharedValue(0);
+  const shaped = useMemo(() => needsShaping(text), [text]);
   const { words, total } = useMemo(() => {
-    const characters = Array.from(text);
+    const characters = shaped ? [] : splitGraphemes(text);
     const groups: Glyph[][] = [];
     let current: Glyph[] = [];
     characters.forEach((char, index) => {
+      const breakAfter = char === " " || isCjk(char);
+      if (isCjk(char) && current.length) {
+        groups.push(current);
+        current = [];
+      }
       current.push({ char, index });
-      if (char === " ") {
+      if (breakAfter) {
         groups.push(current);
         current = [];
       }
     });
     if (current.length) groups.push(current);
     return { words: groups, total: characters.length };
-  }, [text]);
+  }, [shaped, text]);
 
   useEffect(() => {
     if (reduceMotion) return;
@@ -80,6 +87,21 @@ export function ShimmerText({
     return <Text style={[textStyle, { color: activeColor }]}>{text}</Text>;
   }
 
+  if (shaped) {
+    return (
+      <ShimmerChar
+        char={text}
+        index={1}
+        total={3}
+        progress={progress}
+        activeColor={activeColor}
+        mutedColor={mutedColor}
+        textStyle={textStyle}
+        highlightWidth={Math.max(highlightWidth, 0.5)}
+      />
+    );
+  }
+
   return (
     <View
       accessible

package/src/text/spoken-text.tsx

@@ -40,7 +40,11 @@ export function SpokenText({
   if (reduceMotion) {
     return (
       <Text accessibilityLabel={text} style={[textStyle, { color: active, textAlign: align }, style as StyleProp<TextStyle>]}>
-        {text}
+        {words.map((word, index) => (
+          <Text key={index} style={{ color: index < current ? done : index === current ? active : upcoming }}>
+            {word}
+          </Text>
+        ))}
       </Text>
     );
   }